update README

README.md

@@ -1,2 +1,70 @@
 # CAT
 This Charting Application Tester (CAT) lets users make and adjust web graphics on the fly.  
+
+## Controls
+allow the choice and configuration of charts, as well as the data file with which to initialize the charts
+
+### 1. Choose a Charting Library
+controls which renderer library/version and charting library/versoin will be loaded
+
+#### Render Chart
+button that generates the selected chart
+
+1. Destroys the currently displayed chart if one has been rendered.
+2. Loads the selected data file.
+3. Initializes the selected renderer.
+
+#### Library:
+dropdown with a list of charting libraries
+
+1. Loads the selected version of the selected renderer library.
+  1. Loads the library's package.json file to know where the main .js file lives.
+  2. Optionally loads the settings-schema.json file to populate the settings text/form.
+  3. Loads the main .js file.
+  4. Loads the main .css file if the library has a .css file.
+2. Updates the settings text/form.
+
+#### Version:
+dropdown with a list of branches and releases for the selected library
+
+1. Loads the selected version of the selected renderer library.
+  1. Loads the library's package.json file to know where the main .js file lives.
+  2. Optionally loads the settings-schema.json file to populate the settings text/form.
+  3. Loads the main .js file.
+  4. Loads the main .css file if the library has a .css file.
+2. Updates the settings text/form.
+
+#### Init:
+input that allows the specification of the namespace of the selected library
+
+#### .
+optional input that allows the specification of the method that generates the chart
+
+#### Webcharts Version:
+dropdown with a list of branches and releases of the charting library; Webcharts is currently the only charting library supported
+
+1. Loads the selected charting library.
+  1. Loads the library's package.json file to know where the main .js file lives.
+  2. Loads the main .js file.
+  3. Loads the main .css file if the library has a .css file.
+
+#### Schema:
+input that accepts the name of the settings schema of the selected renderer library
+
+### 2. Choose a Dataset
+controls the selected data file
+
+#### :magnifying glass:
+button that toggles the display from the chart to the loaded dataset
+
+### 3. Customize the Chart
+allows editing of the chart settings, either with a text input or with a settings form generated with the charting library's settings schema
+
+#### Settings:-text
+a simple text input that allows the specification of a settings object
+
+#### Settings:-form
+a list of inputs generated with the settings schema of the loaded charting library
+
+### 4. Environment
+a list of the loaded stylesheets and JavaScript files

build/cat.js

@@ -415,8 +415,6 @@
 
       //create the controls
       this.controls.init(this);
-
-      console.log(this);
   }
 
   function layout(cat) {
@@ -785,13 +783,14 @@
           cat.current.rendered = true;
       }
 
-      if (dataObject.user_loaded) {
+      if (dataObject.json) render(false, dataObject.json);else if (dataObject.user_loaded) {
           dataObject.json = d3.csv.parse(dataObject.csv_raw);
           render(false, dataObject.json);
       } else {
           var dataFilePath = dataObject.path + dataFile;
           d3.csv(dataFilePath, function (error, data) {
-              render(error, data);
+              dataObject.json = data;
+              render(error, dataObject.json);
           });
       }
   }
@@ -919,6 +918,7 @@
 
           d3.selectAll('style').property('disabled', true).remove();
 
+          console.log(_this.previous);
           if (_this.previous) {
               if (_this.previous.instance && _this.previous.instance.destroy) {
                   console.log('destroy');
@@ -1031,11 +1031,12 @@
       cat.controls.versionSelect = cat.controls.rendererWrap.append('select');
       getVersions(cat.controls.versionSelect, cat.current.api_url);
       //cat.controls.versionSelect.node().value = 'master';
-      cat.controls.versionSelect.on('input', function () {
+      //cat.controls.versionSelect.on('input', function() {
+      //    console.log(this.value);
+      //});
+      cat.controls.versionSelect.on('change', function () {
           console.log(this.value);
           cat.current.version = this.value;
-      });
-      cat.controls.versionSelect.on('change', function () {
           cat.settings.set(cat);
       });
       cat.controls.rendererWrap.append('br');
@@ -1094,19 +1095,59 @@
 
       cat.dataWrap.append('h3').text('Data Preview for ' + dataFile);
 
-      cat.dataWrap.append('div').attr('class', 'dataPreview').style('overflow-x', 'overlay');
-      cat.dataPreview = webCharts.createTable('.dataPreview');
+      cat.dataWrap.append('div').attr('class', 'dataPreview');
+      //    .style('overflow-x', 'overlay');
+      //cat.dataPreview = webCharts.createTable('.dataPreview');
       if (dataObject.user_loaded) {
-          cat.dataPreview.init(d3.csv.parse(dataObject.csv_raw));
+          dataObject.data = d3.csv.parse(dataObject.csv_raw);
+          handsOnTable(dataObject.data);
+          //cat.dataPreview.init(d3.csv.parse(dataObject.csv_raw));
       } else {
           d3.csv(path, function (raw) {
-              cat.dataPreview.init(raw);
+              dataObject.data = raw;
+              handsOnTable(dataObject.data);
+              //cat.dataPreview.init(raw);
+          });
+      }
+
+      function handsOnTable(data) {
+          var colHeaders = Object.keys(data[0]);
+          var table = new Handsontable(cat.dataWrap.select('.dataPreview').node(), {
+              data: data.map(function (d) {
+                  return Object.keys(d).map(function (key) {
+                      return d[key];
+                  });
+              }),
+              colHeaders: colHeaders,
+              columns: colHeaders.map(function (_) {
+                  return { type: 'text' };
+              }),
+              rowHeaders: true,
+              dropdownMenu: true,
+              filters: true,
+              afterChange: function afterChange(changes) {
+                  dataObject.json = this.getData().map(function (d) {
+                      return d.reduce(function (acc, cur, i) {
+                          acc[colHeaders[i]] = cur;
+                          return acc;
+                      }, {});
+                  });
+              },
+              afterFilter: function afterFilter(changes) {
+                  dataObject.json = this.getData().map(function (d) {
+                      return d.reduce(function (acc, cur, i) {
+                          acc[colHeaders[i]] = cur;
+                          return acc;
+                      }, {});
+                  });
+              },
+              licenseKey: 'non-commercial-and-evaluation'
           });
       }
   }
 
   function initDataSelect(cat) {
-      cat.controls.dataWrap.append('h3').text('2. Choose a data Set');
+      cat.controls.dataWrap.append('h3').text('2. Choose a Dataset');
       cat.controls.dataFileSelect = cat.controls.dataWrap.append('select');
 
       cat.controls.dataWrap.append('span').html('🔍').style('cursor', 'pointer').on('click', function () {

index.html

@@ -11,7 +11,7 @@
         <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
         <script type = 'text/javascript' src = 'https://cdn.rawgit.com/SheetJS/js-xlsx/master/dist/xlsx.full.min.js'></script>
         <script type = 'text/javascript' src = 'https://cdn.rawgit.com/RhoInc/webcharts/master/build/webcharts.js'></script>
-        <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
+        <script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.js'></script>
         <script type = 'text/javascript' src = 'server/pages/deps/jquery.min.js'></script>
         <script type = 'text/javascript' src = 'server/pages/deps/underscore.js'></script>
         <script type = 'text/javascript' src = 'server/pages/deps/opt/jsv.js'></script>
@@ -25,7 +25,7 @@
 
         <link type = 'text/css' rel = 'stylesheet' href = './css/cat.css'>
         <link type = 'text/css' rel = 'stylesheet' href = 'https://cdn.rawgit.com/RhoInc/webcharts/master/css/webcharts.css'>
-        <link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/handsontable@7.0.3/dist/handsontable.full.min.css'>
         <link type = 'text/css' rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' disabled>
         <link type = 'text/css' rel = 'stylesheet' href = '//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' disabled>
     </head>

src/cat/controls/initDataSelect.js

@@ -1,7 +1,7 @@
 import { showDataPreview } from '../datapreview/showDataPreview';
 
 export function initDataSelect(cat) {
-    cat.controls.dataWrap.append('h3').text('2. Choose a data Set');
+    cat.controls.dataWrap.append('h3').text('2. Choose a Dataset');
     cat.controls.dataFileSelect = cat.controls.dataWrap.append('select');
 
     cat.controls.dataWrap

src/cat/controls/initRendererSelect.js

@@ -24,11 +24,12 @@ export function initRendererSelect(cat) {
     cat.controls.versionSelect = cat.controls.rendererWrap.append('select');
     getVersions(cat.controls.versionSelect, cat.current.api_url);
     //cat.controls.versionSelect.node().value = 'master';
-    cat.controls.versionSelect.on('input', function() {
+    //cat.controls.versionSelect.on('input', function() {
+    //    console.log(this.value);
+    //});
+    cat.controls.versionSelect.on('change', function() {
         console.log(this.value);
         cat.current.version = this.value;
-    });
-    cat.controls.versionSelect.on('change', function() {
         cat.settings.set(cat);
     });
     cat.controls.rendererWrap.append('br');

src/cat/controls/initSubmit/addSubmitButton.js

@@ -24,6 +24,7 @@ export default function addSubmitButton() {
                 .property('disabled', true)
                 .remove();
 
+            console.log(this.previous);
             if (this.previous) {
                 if (this.previous.instance && this.previous.instance.destroy) {
                     console.log('destroy');

src/cat/datapreview/showDataPreview.js

@@ -24,13 +24,57 @@ export function showDataPreview(cat) {
     cat.dataWrap
         .append('div')
         .attr('class', 'dataPreview')
-        .style('overflow-x', 'overlay');
-    cat.dataPreview = webCharts.createTable('.dataPreview');
+    //    .style('overflow-x', 'overlay');
+    //cat.dataPreview = webCharts.createTable('.dataPreview');
     if (dataObject.user_loaded) {
-        cat.dataPreview.init(d3.csv.parse(dataObject.csv_raw));
+        dataObject.data = d3.csv.parse(dataObject.csv_raw);
+        handsOnTable(dataObject.data);
+        //cat.dataPreview.init(d3.csv.parse(dataObject.csv_raw));
     } else {
         d3.csv(path, function(raw) {
-            cat.dataPreview.init(raw);
+            dataObject.data = raw;
+            handsOnTable(dataObject.data);
+            //cat.dataPreview.init(raw);
         });
     }
+
+    function handsOnTable(data) {
+        const colHeaders = Object.keys(data[0]);
+        const table = new Handsontable(
+            cat.dataWrap.select('.dataPreview').node(),
+            {
+                data: data.map(d => Object.keys(d).map(key => d[key])),
+                colHeaders,
+                columns: colHeaders.map(_ => { return {type: 'text'}; }),
+                rowHeaders: true,
+                dropdownMenu: true,
+                filters: true,
+                afterChange: function(changes) {
+                    dataObject.json = this.getData()
+                        .map(d => {
+                            return d.reduce(
+                                (acc,cur,i) => {
+                                    acc[colHeaders[i]] = cur;
+                                    return acc;
+                                },
+                                {}
+                            );
+                        });
+                },
+                afterFilter: function(changes) {
+                    dataObject.json = this.getData()
+                        .map(d => {
+                            return d.reduce(
+                                (acc,cur,i) => {
+                                    acc[colHeaders[i]] = cur;
+                                    return acc;
+                                },
+                                {}
+                            );
+                        });
+                },
+                licenseKey: 'non-commercial-and-evaluation',
+            },
+        );
+    }
 }

src/cat/init.js

@@ -13,6 +13,4 @@ export function init() {
 
     //create the controls
     this.controls.init(this);
-
-    console.log(this);
 }

src/cat/renderChart.js

@@ -52,13 +52,16 @@ export function renderChart(cat) {
         cat.current.rendered = true;
     }
 
-    if (dataObject.user_loaded) {
+    if (dataObject.json)
+        render(false, dataObject.json);
+    else if (dataObject.user_loaded) {
         dataObject.json = d3.csv.parse(dataObject.csv_raw);
         render(false, dataObject.json);
     } else {
         var dataFilePath = dataObject.path + dataFile;
         d3.csv(dataFilePath, function(error, data) {
-            render(error, data);
+            dataObject.json = data;
+            render(error, dataObject.json);
         });
     }
 }

test-page/handsontable/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Handsontable: Test Page</title>
+        <title>Hands-on Table: Test Page</title>
         <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
 
         <script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/npm/underscore@1.9.1/underscore.js'></script>
@@ -15,7 +15,7 @@
     </head>
 
     <body>
-        <div id = 'title'>Handsontable</div>
+        <div id = 'title'>Hands-on Table</div>
         <div id = 'subtitle'>Test Page</div>
         <div id = 'container'>
             <div id = 'chart'></div>