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 }