Add interactiveLegendQuicktest to examples/release for release demo

palantir · Jun 10, 2014 · b7c590d · b7c590d
1 parent a8e6040
commit b7c590d
Showing 1 changed file with 123 additions and 0 deletions.
diff --git a/examples/release/interactiveLegend.html b/examples/release/interactiveLegend.html
@@ -0,0 +1,123 @@
+<html>
+  <head>
+    <title>Interactive Legend Quicktest</title>
+    <link rel="stylesheet" type="text/css" href="../../plottable.css">
+    <script src="../../bower_components/d3/d3.min.js"></script>
+    <script src="../../../plottable.js"></script>
+    <script src="../exampleUtil.js"></script>
+    <style>
+    </style>
+
+    <script>
+        var renderers = [];
+
+        var colors = new Plottable.Scale.Color("10").range();
+        var maxPlots = 10;
+        var numPlots = 5;
+        var names = ["bat", "cat", "hat", "rat", "pat", "mat", "sat", "vat", "at", "splat"];
+        var colorScale = new Plottable.Scale.Color();
+        colorScale.range(colors);
+        colorScale.domain(names.slice(0, numPlots));
+
+        var xScale = new Plottable.Scale.Linear();
+        var yScale = new Plottable.Scale.Linear();
+
+        for (var i=0; i<numPlots; i++) {
+            var data = makeRandomData(20);
+            var renderer = new Plottable.Plot.Line(data, xScale, yScale);
+                renderers.push(renderer);
+        }
+
+        var cg = new Plottable.Component.Group();
+        renderers.forEach(function(renderer, i) {
+            renderer.project("stroke", function() { return colors[i]; });
+            cg.merge(renderer);
+        });
+
+        var xAxis = new Plottable.Axis.XAxis(xScale, "bottom");
+        var yAxis = new Plottable.Axis.YAxis(yScale, "left");
+
+        var chart = new Plottable.Component.Table ([
+                                  [yAxis, cg],
+                                  [null,  xAxis]
+                                ]);
+
+        var legendLabel = new Plottable.Component.TitleLabel("fat");
+        var legend = new Plottable.Component.Legend(colorScale);
+        legend.toggleCallback(
+            function (d, b) {
+                var index = names.indexOf(d);
+                renderers[index].classed("toggled-on", b);
+                renderers[index].classed("toggled-off", !b);
+            }
+        );
+        legend.hoverCallback(
+            function (d) {
+                var index = names.indexOf(d);
+                renderers.forEach(function(r, i) {
+                    r.classed("hover", d !== undefined);
+                    r.classed("focus", d !== undefined && i === index);
+                    r.classed("not-focus", d === undefined || i !== index);
+                });
+            }
+        );
+
+        var legendTable = new Plottable.Component.Table([[legendLabel], [legend]]);
+        var outerTable = new Plottable.Component.Table([[chart, legendTable]]);
+
+      window.onload = function() {
+        outerTable.renderTo("#legend-toggle-test");
+      }
+
+      function shuffle() {
+        for (var i = 1; i < numPlots; i++) {
+            var j = Math.floor(Math.random() * (i + 1));
+            if (j == i) {
+                continue;
+            }
+            var t = names[i]; names[i] = names[j]; names[j] = t;
+            t = renderers[i]; renderers[i] = renderers[j]; renderers[j] = t;
+            t = colors[i]; colors[i] = colors[j]; colors[j] = t;
+        }
+        renderers.forEach(function(renderer, i) {
+            renderer.project("stroke", function() { return colors[i]; });
+        });
+        colorScale.range(colors);
+        colorScale.domain(names.slice(0, numPlots));
+      }
+
+      function removePlot() {
+        if (numPlots > 0) {
+          renderers[numPlots - 1].remove();
+          ["toggled-on", "toggled-off", "hover", "focus", "not-focus"].forEach(function(d) {
+            renderers[numPlots - 1].classed(d, false);
+          });
+          numPlots--;
+          colorScale.domain(names.slice(0, numPlots));
+        }
+      }
+
+      function addPlot() {
+        if (numPlots < maxPlots) {
+          var data = makeRandomData(20);
+          var renderer = new Plottable.Plot.Line(data, xScale, yScale);
+          var nextColor = colors[numPlots]
+          renderer.project("stroke", function() { return nextColor; });
+          renderers.push(renderer);
+          cg.merge(renderers[numPlots]);
+          numPlots++;
+          colorScale.domain(names.slice(0, numPlots));
+        }
+      }
+
+    </script>
+  </head>
+  <body>
+    <svg id="legend-toggle-test" width="480" height="320"></svg>
+    <p />
+    <button name="shuffle" onclick="shuffle()">Shuffle</button>
+    <button name="remove" onclick="removePlot()">Remove</button>
+    <button name="add" onclick="addPlot()">Add</button>
+  </body>
+
+</html>