add screenshot for example 14

RhoInc · May 19, 2017 · fde8a8d · fde8a8d
1 parent d0694e7
commit fde8a8d
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 16 deletions.
diff --git a/examples/0014-webcharts-visual-tests/index.html b/examples/0014-webcharts-visual-tests/index.html
@@ -0,0 +1,115 @@
+<html lang="en"><head>
+  <title>Webcharts Visual Test Sheet</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+</head>
+
+<body style="padding:1em;">
+	<span style="position:absolute;top:1em;right:1em;">
+		<a href="../../">🏠</a>
+	</span>
+	<div class="header section"><h1 style="margin-bottom: 0.1em;">Webcharts Visual Test Sheet</h1><div style="margin-bottom: 0.5em;">A series of simple charts showing webcharts functionality. Used for demos and for testing new releases.</div></div>
+	<div class="chart section"><iframe sandbox="allow-popups allow-scripts allow-forms allow-same-origin allow-top-navigation" src="example.html" marginwidth="0" marginheight="0" style="height:600px; width:100%;"></iframe></div>	
+	<div class="details section"><div><div style="display:inline-block; padding-right:1em;"><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Languages&nbsp;</span><span>javascript</span></div><div style="display:inline-block; padding-right:1em;"><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Libraries&nbsp;</span><span>webcharts</span></div><div style="display:inline-block; padding-right:1em;"><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Tags&nbsp;</span><span>interactive, graphics, testing</span></div><div style="display:inline-block; padding-right:1em;"><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Data&nbsp;</span><span><a href="../../data/queries/elements.csv">../../data/queries/elements.csv</a></span></div><div style="display:inline-block; padding-right:1em;"><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Results&nbsp;</span><span><a href="example.html">example.html</a></span></div></div><div><p>This example demonstrates the functionality of the <a href="https://github.com/RhoInc/webcharts">webcharts</a> charting framework and serves as a Visual Test sheet.  Inspired by <a href="https://planet-os.github.io/ui-components/datahub-ui/example/index.html">this</a> nice implementation from <a href="https://medium.com/planet-os/insights-from-designing-datahub-ui-in-d3-js-d8f0f5da0b82">datahub-ui</a>.</p></div></div>
+	<div class="code section">
+		<h2>Code</h2>
+		<pre><code class="hljs">function renderTest(d) {
+  console.log("rendering test"+d.index+" - "+d.label)
+  console.log(this)
+  //draw title
+  d3.select(this).append('h2').text(function(d) {
+    return d.label;
+  });
+
+  //render chart
+  var chartWrap = d3.select(this).append('div').attr('class', 'chart');
+
+  //show notes (if any)
+  var notes = d3.select(this)
+    .append('div')
+    .attr("class","notes")
+    notes.append("div").html("&lt;strong&gt;Data: &lt;/strong&gt; ")
+    .append("a")
+    .attr("href",function(d){return d.dataPath})
+    .text(function(d){return d.dataPath})
+
+    notes.append("div").html(function(d){return d.notes ? "&lt;strong&gt;Notes: &lt;/strong&gt;"+d.notes : "" })
+
+
+
+  //show settings
+  var settingsWrap = d3
+    .select(this)
+    .append('div')
+    .attr("class",'code test' + d.index)
+
+  var settingsHead = settingsWrap.append("a")
+  .style({"color":"blue","text-decoration":"underline"})
+  .text("+ Settings")
+  .on("click",function(){
+    var wrap = this.parentNode
+    var code = d3.select(wrap).select("pre")
+    var status = code.classed("hidden")
+    code.classed("hidden",!status)
+    d3.select(this).text(status?"- Settings":"+ Settings")
+  })
+
+  var code = settingsWrap
+    .append("pre")
+    .attr("class","hidden")
+    .append("code")
+    .attr('class', "hljs")
+    .html(JSON.stringify(d.settings, null, "  ").trim());
+
+    hljs.highlightBlock(code.node());
+
+    var thisChart = webCharts.createChart('div.test' + d.index + ' .chart', d.settings);
+    console.log(thisChart)
+    thisChart.init(d.raw);
+}
+
+testConfig.forEach(function(d,i){d.index = i})
+var chartDivs = d3
+  .select('body')
+  .selectAll('div.testWrap')
+  .data(testConfig)
+  .enter()
+  .append('div')
+  .attr('class', function(d) {
+    return 'testWrap test' + d.index;
+  })
+
+
+
+//get all test data sets (once each)
+var dataPaths = d3
+  .set(
+    testConfig.map(function(d) {
+      return d.dataPath;
+    })
+  )
+  .values()
+  .map(function(d){return {"path":d}});
+
+console.log(dataPaths)
+//load the data and render the chart
+dataPaths.forEach(function(file) {
+  d3.csv(file.path, function(error, data) {
+    file.raw = data;
+
+    chartDivs
+    .filter(function(chart){
+      if(chart.dataPath == file.path){
+        chart.raw = file.raw
+      }
+      return chart.dataPath == file.path
+    })
+    .each(renderTest)
+  });
+});
+</code></pre>
+	</div>	
+
+</body></html>
diff --git a/examples/0014-webcharts-visual-tests/screenshot.png b/examples/0014-webcharts-visual-tests/screenshot.png
diff --git a/examples/0014-webcharts-visual-tests/thumb.png b/examples/0014-webcharts-visual-tests/thumb.png
diff --git a/util/web/data/dataFiles.js b/util/web/data/dataFiles.js
@@ -47,6 +47,22 @@ var dataFiles = [
     rows: 5000,
     cols: 11
   },
+  {
+    local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADAE.csv",
+    filename: "ADAE.csv",
+    ext: "csv",
+    rel_path: "./safetyData-queries/ADAE.csv",
+    rows: 402,
+    cols: 23
+  },
+  {
+    local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADBDS.csv",
+    filename: "ADBDS.csv",
+    ext: "csv",
+    rel_path: "./safetyData-queries/ADBDS.csv",
+    rows: 22695,
+    cols: 20
+  },
   {
     local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData/ADAE.csv",
     filename: "ADAE.csv",
@@ -126,21 +142,5 @@ var dataFiles = [
     rel_path: "./safetyData/vitalSigns.csv",
     rows: 27,
     cols: 7
-  },
-  {
-    local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADAE.csv",
-    filename: "ADAE.csv",
-    ext: "csv",
-    rel_path: "./safetyData-queries/ADAE.csv",
-    rows: 402,
-    cols: 23
-  },
-  {
-    local_path: "/Users/jwildfire/Sites/github/viz-library/data/safetyData-queries/ADBDS.csv",
-    filename: "ADBDS.csv",
-    ext: "csv",
-    rel_path: "./safetyData-queries/ADBDS.csv",
-    rows: 22695,
-    cols: 20
   }
 ];