From b5c7c7a99d83e928e06c45bff23b07bdff4c46f4 Mon Sep 17 00:00:00 2001 From: Robert Konigsberg Date: Fri, 28 Dec 2012 18:55:52 -0500 Subject: [PATCH] Add series customization to the palette. Requires some bug fixes. Nice, nice. --- experimental/palette/index.js | 23 +++++++--- experimental/palette/multi-palette.js | 82 +++++++++++++++++++++++++++-------- 2 files changed, 80 insertions(+), 25 deletions(-) diff --git a/experimental/palette/index.js b/experimental/palette/index.js index 8aeced1..924b139 100644 --- a/experimental/palette/index.js +++ b/experimental/palette/index.js @@ -50,6 +50,17 @@ Index.splitVariables = function() { // http://www.idealog.us/2006/06/javascript_ Index.draw = function(element, data, options) { element.innerHTML = ""; element.removeAttribute("style"); + + // Replace the drawCallback function with one that also lets us track + // all labels (for the palette.) + // If the drawCallback option is not specified, use a null function. + var originalDraw = options["drawCallback"] || function() {}; + options.drawCallback = function(g, isInitial) { + Index.palette.setSeries(g.getLabels()); + // Call the original function, too. + originalDraw(g, isInitial); + }; + var g = new Dygraph( element, data, @@ -77,7 +88,7 @@ Index.start = function() { var sample = Samples.data[sampleIndex]; var data = sample.data; var redraw = function() { - Index.draw(document.getElementById("graph"), data, palette.read()); + Index.draw(document.getElementById("graph"), data, Index.palette.read()); } // Selector is the drop-down for selecting a set of data. @@ -109,11 +120,11 @@ Index.start = function() { selector.selectedIndex = sampleIndex; // Palette contains the widget that builds options. - var palette = new MultiPalette(); - palette.create(document.getElementById("optionsPalette")); - palette.write(sample.options); - palette.onchange = redraw; - palette.filterBar.focus(); + Index.palette = new MultiPalette(); + Index.palette.create(document.getElementById("optionsPalette")); + Index.palette.write(sample.options); + Index.palette.onchange = redraw; + Index.palette.filterBar.focus(); redraw(); diff --git a/experimental/palette/multi-palette.js b/experimental/palette/multi-palette.js index 4497121..5556f19 100644 --- a/experimental/palette/multi-palette.js +++ b/experimental/palette/multi-palette.js @@ -33,7 +33,6 @@ function MultiPalette() { this.onchange = function() {}; } - MultiPalette.optionSetValues = { "global": "global", "x": "x axis", @@ -48,14 +47,14 @@ MultiPalette.prototype.create = function(parentElement) { var header = $("
").addClass("header").appendTo(this.root); // Selector for series and axes. var selectorRow = $("
").appendTo(header); - var optionSelector = $("") .change(function(x) { - self.activate(optionSelector.val()); + self.activate(self.optionSelector.val()); }); selectorRow .append($("").text("Option Set:")) - .append(optionSelector) + .append(this.optionSelector) .append($("") .append($("") .addClass("link") @@ -86,22 +85,40 @@ MultiPalette.prototype.create = function(parentElement) { .click(function() { self.onchange(); })))); $.each(MultiPalette.optionSetValues, function(key, value) { - $(optionSelector) - .append($("") - .attr("value", key) - .text(value)); - var palette = new Palette(key); - palette.create(self.root); - palette.root.style.display = "none"; - palette.onchange = function() { - self.onchange(); - }; - self.palettes[key] = palette; + self.createPalette_(key, key, value); }); this.activate("global"); } +MultiPalette.prototype.createPalette_ = function(key, scope, value) { + this.optionSelector + .append($("") + .attr("value", key) + .text(value)); + var palette = new Palette(scope); + palette.create(this.root); + palette.root.style.display = "none"; + var self = this; + palette.onchange = function() { + self.onchange(); + }; + this.palettes[key] = palette; +} + +MultiPalette.prototype.setSeries = function(labels) { + for (var idx = 1; idx < labels.length; idx++) { + this.conditionallyAddSingleSeries_(labels[idx]); + } +} + +MultiPalette.prototype.conditionallyAddSingleSeries_ = function(series) { + var key = "series:" + series; + if (!this.palettes.hasOwnProperty(key)) { + this.createPalette_(key, "series", series + " (series)"); + } +} + MultiPalette.prototype.activate = function(key) { if (this.activePalette) { this.activePalette.root.style.display = "none"; @@ -138,7 +155,6 @@ MultiPalette.prototype.showHash = function() { return val; } var text = JSON.stringify(hash, replacer, 2); - console.log(text); while(true) { var start = text.indexOf(startMarker); var end = text.indexOf(endMarker); @@ -165,19 +181,38 @@ MultiPalette.prototype.showHash = function() { MultiPalette.prototype.read = function() { var results = this.palettes.global.read(); results.axes = {}; + results.series = {}; var clearIfEmpty = function(hash, key) { var val = hash[key]; if ($.isEmptyObject(val)) { delete hash[key]; } } + var clearEmptyChildren = function(hash) { + for (var key in hash) { + if (hash.hasOwnProperty(key)) { + clearIfEmpty(hash, key); + } + } + } + results.axes.x = this.palettes.x.read(); results.axes.y = this.palettes.y.read(); results.axes.y2 = this.palettes.y2.read(); - clearIfEmpty(results.axes, "x"); - clearIfEmpty(results.axes, "y"); - clearIfEmpty(results.axes, "y2"); + + clearEmptyChildren(results.axes); clearIfEmpty(results, "axes"); + + for (var key in this.palettes) { + if (key.indexOf("series:") == 0) { + var series = key.substring("series:".length); + results.series[series] = this.palettes[key].read(); + } + } + + clearEmptyChildren(results.series); + clearIfEmpty(results, "series"); + return results; } @@ -192,4 +227,13 @@ MultiPalette.prototype.write = function(hash) { this.palettes.y.write(axes["y"]); this.palettes.y2.write(axes["y2"]); } + + if (hash.hasOwnProperty("series")) { + for (var key in hash.series) { + if (hash.series.hasOwnProperty(key)) { + this.conditionallyAddSingleSeries_(key); + this.palettes["series:" + key].write(hash.series[key]); + } + } + } } -- 2.7.4