experimental/palette/multi-palette.js

   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
  27 function 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
  36
  37 MultiPalette.optionSetValues = {
  38   "global": "global",
  39   "x": "x axis",
  40   "y": "y axis",
  41   "y2": "y2 axis",
  42 };
  43
  44 MultiPalette.prototype.create = function(parentElement) {
  45   var self = this;
  46
  47   this.root = $("<div>").addClass("palette").appendTo(parentElement);
  48   var header = $("<div>").addClass("header").appendTo(this.root);
  49   // Selector for series and axes.
  50   var selectorRow = $("<div>").appendTo(header);
  51   var optionSelector = $("<select>")
  52       .change(function(x) {
  53         self.activate(optionSelector.val());
  54       });
  55
  56   selectorRow
  57       .append($("<span>").text("Option Set:"))
  58       .append(optionSelector);
  59
  60   var filter = function() {
  61     $.each(self.palettes, function(key, value) {
  62       value.filter(self.filterBar.val());
  63     });
  64   }
  65
  66   this.filterBar = $("<input>", { type : "search" })
  67       .keyup(filter)
  68       .click(filter);
  69
  70   header.append($("<div>")
  71       .append($("<span>").text("Filter:"))
  72       .append($("<span>").append(this.filterBar))
  73       .append($("<span>")
  74           .append($("<a>")
  75               .attr("href", "#")
  76               .addClass("link")
  77               .text("Redraw")
  78               .css("float", "right")
  79               .css("padding-right", "8px")
  80               .click(function() { self.onchange(); }))));
  81
  82   $.each(MultiPalette.optionSetValues, function(key, value) {
  83      $(optionSelector)
  84          .append($("<option></option>")
  85          .attr("value", key)
  86          .text(value));
  87       var palette = new Palette(key);
  88       palette.create(self.root);
  89       palette.root.style.display = "none";
  90       palette.onchange = function() {
  91         self.onchange();
  92       };
  93       self.palettes[key] = palette;
  94   });
  95
  96   this.activate("global");
  97 }
  98
  99 MultiPalette.prototype.activate = function(key) {
 100   if (this.activePalette) {
 101     this.activePalette.root.style.display = "none";
 102   }
 103   this.activePalette = this.palettes[key];
 104   this.activePalette.root.style.display = "block";
 105 }
 106
 107 /**
 108  * Read from palette
 109  */
 110 MultiPalette.prototype.read = function() {
 111   var results = this.palettes.global.read();
 112   results.axes = {};
 113   var clearIfEmpty = function(hash, key) {
 114     var val = hash[key];
 115     if ($.isEmptyObject(val)) {
 116       delete hash[key];
 117     }
 118   }
 119   results.axes.x = this.palettes.x.read();
 120   results.axes.y = this.palettes.y.read();
 121   results.axes.y2 = this.palettes.y2.read();
 122   clearIfEmpty(results.axes, "x");
 123   clearIfEmpty(results.axes, "y");
 124   clearIfEmpty(results.axes, "y2");
 125   clearIfEmpty(results, "axes");
 126   return results;
 127 }
 128
 129 /**
 130  * Write to palette from hash.
 131  */
 132 MultiPalette.prototype.write = function(hash) {
 133   this.palettes.global.write(hash);
 134   if (hash.hasOwnProperty("axes")) {
 135     var axes = hash.axes;
 136     this.palettes.x.write(axes["x"]);
 137     this.palettes.y.write(axes["y"]);
 138     this.palettes.y2.write(axes["y2"]);
 139   }
 140 }