From 30d8637356f85e67cf538c070d88aa12e841759b Mon Sep 17 00:00:00 2001
From: Robin Hu <robinfhu@gmail.com>
Date: Wed, 14 Aug 2013 23:03:29 -0400
Subject: [PATCH] Adding a "Select chart" button to each of the test charts.
 Clicking this button will hide other charts and only display the selected
 one.

---
 test/ScatterChartTest.html     | 17 +++++++++++++++++
 test/lineChartTest.html        | 18 ++++++++++++++++++
 test/stackedAreaChartTest.html | 15 ++++++++-------
 test/testScript.js             | 20 ++++++++++++++++++++
 test/teststyle.css             |  4 ++++
 5 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 test/testScript.js

diff --git a/test/ScatterChartTest.html b/test/ScatterChartTest.html
index 843da37..464453d 100644
--- a/test/ScatterChartTest.html
+++ b/test/ScatterChartTest.html
@@ -17,66 +17,82 @@
   </div>
   <div id="test1" class="chart third">
     Normal - four series', all random (40 points)
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test2" class="chart third">
     Normal - one series', all random (5 points), zero left margin
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test3" class="chart third">
     Zero right margin, 200 points
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test4" class="chart third">
     Bigger margins
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test5" class="chart third">
     Zero data points
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test6" class="chart third">
     One point.
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test7" class="chart third">
     Two points
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test8" class="chart third">
     Three series', one point each
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test9" class="chart third">
     Three series', first one has zero points
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test10" class="chart third">
     Lots of series
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test11" class="chart third">
     Scatter plus line: y=2x + 0
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test12" class="chart third">
     Scatter plus line: y=2x + 10;
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test13" class="chart third">
     Scatter plus line: y=-0.5x + 1.0;
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test14" class="chart third">
     Scatter chart: duplicate y values
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test15" class="chart third">
     Scatter chart: duplicate x values
+    <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test16" class="chart third">
     Scatter chart: extremely small data points (1e-10)
+    <button>Select chart</button>
     <svg></svg>
   </div>
 
@@ -94,6 +110,7 @@
 <script src="../src/models/scatter.js"></script>
 <script src="../src/models/scatterChart.js"></script>
 <script src="../src/models/scatterPlusLineChart.js"></script>
+<script src="testScript.js"></script>
 <script>
 
 defaultChartTest("test1", randomData(4,40));
diff --git a/test/lineChartTest.html b/test/lineChartTest.html
index c11747f..f5faa9f 100644
--- a/test/lineChartTest.html
+++ b/test/lineChartTest.html
@@ -32,77 +32,94 @@
       <div class='chart full' id='chart1'>
         Example of chart with many series', and new interactive guideline plus tooltip. A chunk of data was purposely removed
         to show how the chart handles it.
+        <button>Select chart</button>
         <svg></svg>
       </div>
       <div class='chart half with-transitions' id='chart2'>
         Chart with old tooltip style (with-transitions).
+        <button>Select chart</button>
         <svg></svg>
       </div>
       <div class='chart half' id='chart3'>
         Chart with three data points.
+        <button>Select chart</button>
         <svg></svg>
       </div>
       <div class='chart third' id='chart4'>
         Chart where two series have different number of points.
+        <button>Select chart</button>
         <svg></svg>
       </div>
        <div class='chart third' id='chart5'>
         Chart with one point.
+        <button>Select chart</button>
         <svg></svg>
       </div>
        <div class='chart third' id='chart6'>
         Chart with 1000 points.
+        <button>Select chart</button>
         <svg></svg>
       </div>
 
       <div class='chart third' id='chart7'>
         Chart with no data.
+        <button>Select chart</button>
         <svg></svg>
       </div>
        <div class='chart third' id='chart8'>
         All points random. No order.
+        <button>Select chart</button>
         <svg></svg>
       </div>
        <div class='chart third' id='chart9'>
         Points do not increase linearly.
+        <button>Select chart</button>
         <svg></svg>
       </div>
 
       <div class='chart third' id='chart10'>
         Chart with 15 series'
+        <button>Select chart</button>
         <svg></svg>
       </div>
        <div class='chart third' id='chart11'>
         Data points go backwards
+        <button>Select chart</button>
         <svg></svg>
       </div>
        <div class='chart third' id='chart12'>
         Duplicate X coordinate points.
+        <button>Select chart</button>
         <svg></svg>
       </div>
 
       <div class='chart third' id='chart16'>
         Duplicate Y coordinate points.
+        <button>Select chart</button>
         <svg></svg>
       </div>
 
       <div class='chart third' id='chart13'>
         Chart in a overflow div with scrolls (new tooltips)
+        <button>Select chart</button>
         <svg></svg>
       </div>
 
       <div class='chart third' id='chart14'>
         Chart in a overflow div with scrolls (old tooltips)
+        <button>Select chart</button>
         <svg></svg>
       </div>
 
       <div style='clear:both;'></div>
       <div class='chart third' id='chart15'>
         What if there are null, Infinity and NaN values in points?
+        <button>Select chart</button>
         <svg></svg>
       </div>
       <div class='chart third' id='chart17'>
         Chart with very small, 1e-10, points (old tooltips)
+        <button>Select chart</button>
         <svg></svg>
       </div>
     </div>
@@ -117,6 +134,7 @@
 <script src="../src/models/scatter.js"></script>
 <script src="../src/models/line.js"></script>
 <script src="../src/models/lineChart.js"></script>
+<script src="testScript.js"></script>
 <script>
 
 //------------ CHART 1 
diff --git a/test/stackedAreaChartTest.html b/test/stackedAreaChartTest.html
index 279cfc8..d6e3015 100644
--- a/test/stackedAreaChartTest.html
+++ b/test/stackedAreaChartTest.html
@@ -11,13 +11,13 @@
       <a href="stackedAreaChartTest.html">Stacked Area</a>
       <a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
   </div>
-  <div class='chart full' id='chart1'>Full chart example with new tooltip and guideline<svg></svg></div>
-  <div class='chart half with-transitions' id='chart2'>Chart with old tooltips (with-transitions)<svg></svg></div>
-  <div class='chart half' id='chart3'>Chart with single point<svg></svg></div>
-  <div class='chart half' id='chart4'>Chart with two points<svg></svg></div>
-  <div class='chart half' id='chart5'>Chart with 'holes'<svg></svg></div>
-  <div class='chart half' id='chart6'>Total random points<svg></svg></div>
-  <div class='chart half' id='chart7'>Less than four points, old tooltips<svg></svg></div>
+  <div class='chart full' id='chart1'>Full chart example with new tooltip and guideline<button>Select chart</button><svg></svg></div>
+  <div class='chart half with-transitions' id='chart2'>Chart with old tooltips (with-transitions)<button>Select chart</button><svg></svg></div>
+  <div class='chart half' id='chart3'>Chart with single point<button>Select chart</button><svg></svg></div>
+  <div class='chart half' id='chart4'>Chart with two points<button>Select chart</button><svg></svg></div>
+  <div class='chart half' id='chart5'>Chart with 'holes'<button>Select chart</button><svg></svg></div>
+  <div class='chart half' id='chart6'>Total random points<button>Select chart</button><svg></svg></div>
+  <div class='chart half' id='chart7'>Less than four points, old tooltips<button>Select chart</button><svg></svg></div>
   <div class='chart half' id='chart8'>No data<svg></svg></div>
 
 <script src="../lib/d3.v3.js"></script>
@@ -31,6 +31,7 @@
 <script src="../src/models/scatter.js"></script>
 <script src="../src/models/stackedArea.js"></script>
 <script src="../src/models/stackedAreaChart.js"></script>
+<script src="testScript.js"></script>
 <script>
 
 
diff --git a/test/testScript.js b/test/testScript.js
new file mode 100644
index 0000000..2e7dc16
--- /dev/null
+++ b/test/testScript.js
@@ -0,0 +1,20 @@
+//A little snippet of D3 code that creates a button that lets you toggle whether a chart is the only one visible on a page or not.
+d3.selectAll(".chart button").on("click",function() {
+   var thisId = this.parentElement.id;
+
+   var chartContainer = d3.select("#" + thisId);
+   if (chartContainer.attr("class").match("selected"))
+      chartContainer.classed("selected",false);
+   else
+      chartContainer.classed("selected",true);
+
+   d3.selectAll(".chart").style("display",function() {
+        if (thisId === this.id) return "block";
+
+        if (d3.select(this).style("display") === "none")
+          return "block";
+        else
+          return "none";
+   });
+   window.onresize();
+});
\ No newline at end of file
diff --git a/test/teststyle.css b/test/teststyle.css
index ffab772..db5bdd0 100644
--- a/test/teststyle.css
+++ b/test/teststyle.css
@@ -26,6 +26,10 @@ text {
   width: 33%;
 }
 
+.chart.selected {
+  width: 100% !important;
+}
+
 .navigation a{
   margin-right: 1em;
 }