Merge pull request #10 from k-rister/demo-updates

Demo updates

Author: gurbirkalsi

jschart/index.css

@@ -33,7 +33,7 @@ rect.pane { cursor: crosshair; fill: none; pointer-events: all; }
 .hidden { visibility: hidden; }
 .hiddenrow { background-color: rgba(152, 152, 152, 1); }
 .invalidrow { background-color: yellow; }
-.loadinglabel { opacity: 0.75; color: black; pointer-events: none; }
+.loadinglabel { font-size: 120px; opacity: 0.75; color: black; pointer-events: none; }
 rect.tooltip { fill: #CCCCCC; stroke-width: 2px; stroke: black; }
 .slider path { fill: #033E6B;  stroke: black;  }
 .slider rect { fill-opacity: 0.25; }

jschart/index.js

@@ -3247,7 +3247,7 @@ function build_chart(chart) {
     for (var i = 0; i < chart.options.csvfiles.length; i++) {
       // add a dataset load to the queue
       chart.datasets_queue.defer(
-        load_csv_text,
+        load_csv_files,
         chart.options.csvfiles[i],
         chart
       );
@@ -3564,7 +3564,7 @@ exports.create_jschart = function(
   );
 };
 
-function finish_page() {
+exports.finish_page = function () {
   // wait for chart generation to complete before logging that it is done and changing the page background
   charts_queue.await(function(error, results) {
     d3.select("body").classed("completedpage", true);

jschart/webpack.config.js

@@ -1,16 +1,23 @@
 const path = require('path');
 
 module.exports = {
-  entry: 'index.js',
+    entry: 'index.js',
     module: {
-    rules: [
-        {
-            test: /\.css$/,
-            use: [
-            'style-loader',
-            'css-loader'
-            ]
-        }
+	rules: [
+            {
+		test: /\.css$/,
+		use: [
+		    'style-loader',
+		    'css-loader'
+		]
+            },
+	    {
+		test: /\.(csv|json|plot)$/,
+		use: [
+		    loader: 'file-loader',
+		    options: {}
+		]
+	    }
         ]
     }
 };

tests/package.json

@@ -8,7 +8,8 @@
     "jschart": "file:../jschart",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
-    "react-scripts": "1.1.5"
+    "react-scripts": "1.1.5",
+    "file-loader": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

tests/src/App.js

@@ -1,34 +1,102 @@
 import React, { Component } from "react";
 import jschart from "jschart";
 
+import histogram_data from './data/histogram.csv';
+import timeseries_data from './data/timeseries.csv';
+import xy_data from './data/xy.csv';
+import jitter_data from './data/jitter.csv';
+
 class App extends Component {
   componentDidMount = () => {
     jschart.create_jschart(
       0,
       "timeseries",
-      "jschart_timeseries",
-      "Timeseries Demo",
+      "jschart_json",
+      "JSON Demo",
       "Time (secs.)",
       "CPU Utilization",
       {
-        json_object: {
-          x_axis_series: "time",
-          data_series_names: ["time", "data series 1", "data series 2"],
-          data: [[1461027782000, 0, 1], [1461027783000, 4, 5]]
-        }
+          json_object: {
+	      x_axis_series: "time",
+	      data_series_names: ["time", "data series 1", "data series 2"],
+	      data: [[1461027782000, 0, 1], [1461027783000, 4, 5]]
+	  }
+      }
+    );
+    jschart.create_jschart(
+      0,
+      "histogram",
+      "jschart_histogram",
+      "Histogram Demo",
+      "Buckets",
+      "Bucket Size",
+      {
+	  csvfiles: [ histogram_data ]
+      }
+    );
+    jschart.create_jschart(
+      1,
+      "timeseries",
+      "jschart_timeseries",
+      "Timeseries Demo",
+      null,
+      null,
+      {
+	  csvfiles: [ timeseries_data ],
+	  sort_datasets: false
+      }
+    );
+    jschart.create_jschart(
+      0,
+      "xy",
+      "jschart_xy",
+      "XY Demo",
+      null,
+      null,
+      {
+	  csvfiles: [ xy_data ]
+      }
+    );
+    jschart.create_jschart(
+      0,
+      "xy",
+      "jschart_jitter",
+      "Jitter Samples",
+      "Samples",
+      "Latency (ns)",
+      {
+	  csvfiles: [ jitter_data ]
+      }
+    );
+    jschart.create_jschart(
+      0,
+      "xy",
+      "jschart_jitter_scatter",
+      "Jitter Samples: Scatterplot",
+      "Samples",
+      "Latency (ns)",
+      {
+	  csvfiles: [ jitter_data ],
+	  scatterplot: true
       }
     );
+    jschart.finish_page();
   };
 
   render() {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">JSChart Node Module Demo</h1>
+          <h1 className="App-title">JSChart Demos</h1>
         </header>
         <br></br>
+        <div id="jschart_json"></div>
+        <div id="jschart_histogram"></div>
         <div id="jschart_timeseries"></div>
-      </div>
+        <div id="jschart_xy"></div>
+        <div id="jschart_jitter"></div>
+        <div id="jschart_jitter_scatter"></div>
+	</div>
     );
   }
 }