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   var g = new Dygraph(
  54     element,
  55     data,
  56     options
  57   );
  58
  59   // These don't work yet.
  60   g.updateOptions({
  61     labelsDiv: 'status',
  62   });
  63 }
  64
  65 Index.addMessage = function(text) {
  66   var messages = document.getElementById("messages");
  67   messages.textContent = messages.textContent + text + "\n";
  68 }
  69
  70 /**
  71  * Start up the palette system.
  72  */
  73 Index.start = function() {
  74   var variables = Index.splitVariables();
  75   var sampleName = variables["sample"] || "interestingShapes";
  76   var sampleIndex = Samples.indexOf(sampleName);
  77   var sample = Samples.data[sampleIndex];
  78   var data = sample.data;
  79   var redraw = function() {
  80     Index.draw(document.getElementById("graph"), data, palette.read());
  81   }
  82
  83   // Selector is the drop-down for selecting a set of data.
  84
  85   // Popupate the selector with the set of data samples
  86   var selector = document.getElementById("selector").getElementsByTagName("select")[0];
  87   for (var idx in Samples.data) {
  88     var entry = Samples.data[idx];
  89     var option = document.createElement("option");
  90     option.value = entry.id;
  91     option.textContent = entry.title;
  92     selector.appendChild(option);
  93   }
  94   selector.onchange = function() {
  95     var id = selector.options[selector.selectedIndex].value;
  96     var url = document.URL;
  97     var qmIndex = url.indexOf("?");
  98     if (qmIndex >= 0) {
  99       url = url.substring(0, qmIndex);
 100     }
 101     url = url + "?sample=" + id;
 102     for (var idx in variables) {
 103       if (idx != "sample") {
 104         url = url + "&" + idx + "=" + variables[idx];
 105       }
 106     }
 107     window.location = url;
 108   }
 109   selector.selectedIndex = sampleIndex;
 110
 111   // Palette contains the widget that builds options.
 112   var palette = new MultiPalette();
 113   palette.create(document.getElementById("optionsPalette"));
 114   palette.write(sample.options);
 115   palette.onchange = redraw;
 116   palette.filterBar.focus();
 117
 118   redraw();
 119
 120   // Find all new options which we don't implement here in the palette.
 121   for (var opt in Dygraph.OPTIONS_REFERENCE) {
 122     if (!(opt in opts)) {
 123       var entry = Dygraph.OPTIONS_REFERENCE[opt];
 124       console.warn("missing option: " + opt + " of type " + entry.type);
 125     }
 126   }
 127 }