Now you can specify the axis a series lives on in the palette.
[dygraphs.git] / experimental / palette / multi-palette.js
... / ...
CommitLineData
1// Copyright (c) 2011 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 Multiple Dygraphs palettes, grouped by global, series, etc..
23 *
24 * @author konigsberg@google.com (Robert Konigsberg)
25 */
26
27function MultiPalette() {
28 this.palettes = {};
29 this.root = null;
30 this.filterBar = null;
31 // This is meant to be overridden by a palette host.
32 this.activePalette = null;
33 this.onchange = function() {};
34}
35
36MultiPalette.optionSetValues = {
37 "global": "global",
38 "x": "x axis",
39 "y": "y axis",
40 "y2": "y2 axis",
41};
42
43MultiPalette.prototype.create = function(parentElement) {
44 var self = this;
45
46 this.root = $("<div>").addClass("palette").appendTo(parentElement);
47 var header = $("<div>").addClass("header").appendTo(this.root);
48 // Selector for series and axes.
49 var selectorRow = $("<div>").appendTo(header);
50 this.optionSelector = $("<select>")
51 .change(function(x) {
52 self.activate(self.optionSelector.val());
53 });
54
55 selectorRow
56 .append($("<span>").text("Option Set:"))
57 .append(this.optionSelector)
58 .append($("<span>")
59 .append($("<a>")
60 .addClass("link")
61 .text("to hash")
62 .css("float", "right")
63 .css("padding-right", "8px")
64 .click(function() { self.showHash(); })));
65
66 var filter = function() {
67 $.each(self.palettes, function(key, value) {
68 value.filter(self.filterBar.val());
69 });
70 }
71
72 this.filterBar = $("<input>", { type : "search" })
73 .keyup(filter)
74 .click(filter);
75
76 header.append($("<div>")
77 .append($("<span>").text("Filter:"))
78 .append($("<span>").append(this.filterBar))
79 .append($("<span>")
80 .append($("<a>")
81 .addClass("link")
82 .text("Redraw")
83 .css("float", "right")
84 .css("padding-right", "8px")
85 .click(function() { self.onchange(); }))));
86
87 $.each(MultiPalette.optionSetValues, function(key, value) {
88 self.createPalette_(key, key, value);
89 });
90
91 this.activate("global");
92}
93
94MultiPalette.prototype.createPalette_ = function(key, scope, value) {
95 this.optionSelector
96 .append($("<option></option>")
97 .attr("value", key)
98 .text(value));
99 var palette = new Palette(scope);
100 palette.create(this.root);
101 palette.root.hide();
102 var self = this;
103 palette.onchange = function() {
104 self.onchange();
105 };
106 this.palettes[key] = palette;
107}
108
109MultiPalette.prototype.setSeries = function(labels) {
110 for (var idx = 1; idx < labels.length; idx++) {
111 this.conditionallyAddSingleSeries_(labels[idx]);
112 }
113}
114
115MultiPalette.prototype.conditionallyAddSingleSeries_ = function(series) {
116 var key = "series:" + series;
117 if (!this.palettes.hasOwnProperty(key)) {
118 this.createPalette_(key, "series", series + " (series)");
119 }
120}
121
122MultiPalette.prototype.activate = function(key) {
123 if (this.activePalette) {
124 this.activePalette.root.hide();
125 }
126 this.activePalette = this.palettes[key];
127 this.activePalette.root.show();
128}
129
130MultiPalette.prototype.showHash = function() {
131 var hash = this.read();
132 var textarea = new TextArea();
133 textarea.cancel.style.display = "none";
134
135 /*
136 * JSON.stringify isn't built to be nice to functions. The following fixes
137 * this.
138 *
139 * First, val.toString only does part of the work, turning it into
140 * "function () {\n alert(\"p-click!\");\n}",
141 *
142 * {start,end}Marker make the surrounding quotes easy to find, and then
143 * remove them. It also converts the instances of \n and \" so the
144 * result looks like:
145 * function () {
146 * alert("p-click!");
147 * }",
148 */
149 var startMarker = "<~%!<";
150 var endMarker = ">!%~>";
151 var replacer = function(key, val) {
152 if (typeof val === 'function') {
153 return startMarker + val.toString() + endMarker;
154 }
155 return val;
156 }
157 var text = JSON.stringify(hash, replacer, 2);
158 while(true) {
159 var start = text.indexOf(startMarker);
160 var end = text.indexOf(endMarker);
161 if (start == -1) {
162 break;
163 }
164 var substring = text.substring(start + startMarker.length, end);
165 while(substring.indexOf("\\n") >= 0) {
166 substring = substring.replace("\\n", "\n");
167 }
168 while(substring.indexOf("\\\"") >= 0) {
169 substring = substring.replace("\\\"", "\"");
170 }
171 text = text.substring(0, start - 1)
172 + substring
173 + text.substring(end + endMarker.length + 1);
174 }
175 textarea.show("options", text);
176}
177
178/**
179 * Read from palette
180 */
181MultiPalette.prototype.read = function() {
182 var results = this.palettes.global.read();
183 results.axes = {};
184 results.series = {};
185 var clearIfEmpty = function(hash, key) {
186 var val = hash[key];
187 if ($.isEmptyObject(val)) {
188 delete hash[key];
189 }
190 }
191 var clearEmptyChildren = function(hash) {
192 for (var key in hash) {
193 if (hash.hasOwnProperty(key)) {
194 clearIfEmpty(hash, key);
195 }
196 }
197 }
198
199 results.axes.x = this.palettes.x.read();
200 results.axes.y = this.palettes.y.read();
201 results.axes.y2 = this.palettes.y2.read();
202
203 clearEmptyChildren(results.axes);
204 clearIfEmpty(results, "axes");
205
206 for (var key in this.palettes) {
207 if (key.indexOf("series:") == 0) {
208 var series = key.substring("series:".length);
209 results.series[series] = this.palettes[key].read();
210 }
211 }
212
213 clearEmptyChildren(results.series);
214 clearIfEmpty(results, "series");
215
216 return results;
217}
218
219/**
220 * Write to palette from hash.
221 */
222MultiPalette.prototype.write = function(hash) {
223 this.palettes.global.write(hash);
224 if (hash.hasOwnProperty("axes")) {
225 var axes = hash.axes;
226 this.palettes.x.write(axes["x"]);
227 this.palettes.y.write(axes["y"]);
228 this.palettes.y2.write(axes["y2"]);
229 }
230
231 if (hash.hasOwnProperty("series")) {
232 for (var key in hash.series) {
233 if (hash.series.hasOwnProperty(key)) {
234 this.conditionallyAddSingleSeries_(key);
235 this.palettes["series:" + key].write(hash.series[key]);
236 }
237 }
238 }
239}