Merge pull request #673 from danvk/track-code-size
[dygraphs.git] / experimental / palette / index.js
1 // Copyright (c) 2012 Google, Inc.
2 //
3 // Permission is hereby granted, free of charge, to any person obtaining a copy
4 // of this software and associated documentation files (the "Software"), to deal
5 // in the Software without restriction, including without limitation the rights
6 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 // copies of the Software, and to permit persons to whom the Software is
8 // furnished to do so, subject to the following conditions:
9 //
10 // The above copyright notice and this permission notice shall be included in
11 // all copies or substantial portions of the Software.
12 //
13 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 // THE SOFTWARE.
20
21 /**
22 * @fileoverview Javascript to run index.html.
23 *
24 * @author konigsberg@google.com (Robert Konigsberg)
25 */
26
27 "use strict";
28
29 var Index = {};
30
31 Index.splitVariables = function() { // http://www.idealog.us/2006/06/javascript_to_p.html
32 var query = window.location.search.substring(1);
33 var args = {};
34 var vars = query.split("&");
35 for (var i = 0; i < vars.length; i++) {
36 if (vars[i].length > 0) {
37 var pair = vars[i].split("=");
38 args[pair[0]] = pair[1];
39 }
40 }
41 return args;
42 }
43
44 /**
45 * Draw the graph.
46 * @param {Object} element the display element
47 * @param {Object} data the data to be shown
48 * @param {Object} options the options hash.
49 */
50 Index.draw = function(element, data, options) {
51 element.innerHTML = "";
52 element.removeAttribute("style");
53
54 // Replace the drawCallback function with one that also lets us track
55 // all labels (for the palette.)
56 // If the drawCallback option is not specified, use a null function.
57 var originalDraw = options["drawCallback"] || function() {};
58 options.drawCallback = function(g, isInitial) {
59 Index.palette.setSeries(g.getLabels());
60 // Call the original function, too.
61 originalDraw(g, isInitial);
62 };
63
64 var g = new Dygraph(
65 element,
66 data,
67 options
68 );
69
70 // These don't work yet.
71 g.updateOptions({
72 labelsDiv: 'status',
73 });
74 }
75
76 Index.addMessage = function(text) {
77 var messages = document.getElementById("messages");
78 messages.textContent = messages.textContent + text + "\n";
79 }
80
81 /**
82 * Start up the palette system.
83 */
84 Index.start = function() {
85 var variables = Index.splitVariables();
86 var sampleName = variables["sample"] || "interestingShapes";
87 var sampleIndex = Samples.indexOf(sampleName);
88 var sample = Samples.data[sampleIndex];
89 var data = sample.data;
90 var redraw = function() {
91 Index.draw(document.getElementById("graph"), data, Index.palette.read());
92 }
93
94 // Selector is the drop-down for selecting a set of data.
95
96 // Popupate the selector with the set of data samples
97 var selector = document.getElementById("selector").getElementsByTagName("select")[0];
98 for (var idx in Samples.data) {
99 var entry = Samples.data[idx];
100 var option = document.createElement("option");
101 option.value = entry.id;
102 option.textContent = entry.title;
103 selector.appendChild(option);
104 }
105 selector.onchange = function() {
106 var id = selector.options[selector.selectedIndex].value;
107 var url = document.URL;
108 var qmIndex = url.indexOf("?");
109 if (qmIndex >= 0) {
110 url = url.substring(0, qmIndex);
111 }
112 url = url + "?sample=" + id;
113 for (var idx in variables) {
114 if (idx != "sample") {
115 url = url + "&" + idx + "=" + variables[idx];
116 }
117 }
118 window.location = url;
119 }
120 selector.selectedIndex = sampleIndex;
121
122 // Palette contains the widget that builds options.
123 Index.palette = new MultiPalette();
124 Index.palette.create(document.getElementById("optionsPalette"));
125 Index.palette.write(sample.options);
126 Index.palette.onchange = redraw;
127 Index.palette.filterBar.focus();
128
129 redraw();
130
131 // Find all new options which we don't implement here in the palette.
132 for (var opt in Dygraph.OPTIONS_REFERENCE) {
133 if (!(opt in opts)) {
134 var entry = Dygraph.OPTIONS_REFERENCE[opt];
135 console.warn("missing option: " + opt + " of type " + entry.type);
136 }
137 }
138 }