HPCC-18510 Upgrade to latest Viz Framework

Reimplement the visualizations with the new build system.

Signed-off-by: Gordon Smith <gordonjsmith@gmail.com>

.gitmodules

@@ -13,9 +13,6 @@
 [submodule "plugins/cassandra/cpp-driver"]
 	path = plugins/cassandra/cpp-driver
 	url = https://github.com/hpcc-systems/cpp-driver.git
-[submodule "esp/src/Visualization"]
-	path = esp/src/Visualization
-	url = https://github.com/hpcc-systems/Visualization.git
 [submodule "esp/src/crossfilter"]
 	path = esp/src/crossfilter
 	url = https://github.com/hpcc-systems/crossfilter.git

esp/src/Visualization

@@ -1 +0,0 @@
-Subproject commit 7c65a6f2ad9d1c60270aa56551186d8a1ae5755b

esp/src/eclwatch/Utility.js

@@ -369,6 +369,15 @@
             case "DiskUsageWidget":
                 require(["hpcc/DiskUsageWidget"], doLoad);
                 break;
+            case "viz/DojoD3Choropleth":
+                require(["hpcc/viz/DojoD3Choropleth"], doLoad);
+                break;
+            case "viz/DojoD32DChart":
+                require(["hpcc/viz/DojoD32DChart"], doLoad);
+                break;
+            case "viz/DojoD3NDChart":
+                require(["hpcc/viz/DojoD3NDChart"], doLoad);
+                break;
             case "DynamicESDLDefinitionDetailsWidget":
                 require(["hpcc/DynamicESDLDefinitionDetailsWidget"], doLoad);
                 break;

esp/src/eclwatch/VizWidget.js

@@ -32,6 +32,8 @@ define([
 
     "dgrid/editor",
 
+    "@hpcc-js/common",
+
     "hpcc/TableContainer",
     "hpcc/_Widget",
     "hpcc/ESPWorkunit",
@@ -55,6 +57,7 @@ define([
 ], function (declare, lang, i18n, nlsHPCC, arrayUtil, Deferred, domConstruct, domForm, ioQuery, all,
                 registry, ContentPane, Select, CheckBox,
                 editor,
+                hpccCommon,
                 TableContainer, _Widget, ESPWorkunit, WsWorkunits, SelectionGridWidget, Utility,
                 template) {
     return declare("VizWidget", [_Widget], {
@@ -423,8 +426,7 @@ define([
                 }
             }, this);
             var context = this;
-            /*
-            var data = d3.nest()
+            var data = hpccCommon.nest()
                 .key(function (d) { return d[request.label] })
                 .rollup(function (leaves) {
                     var retVal = {
@@ -436,7 +438,7 @@ define([
                                     retVal[row.id] = leaves.length;
                                     break;
                                 default:
-                                    retVal[row.id] = d3[row.aggregation || "mean"](leaves, function (d) {
+                                    retVal[row.id] = hpccCommon[row.aggregation || "mean"](leaves, function (d) {
                                         return d[row.field];
                                     });
                                     break;
@@ -446,15 +448,11 @@ define([
                     return retVal;
                 })
                 .entries(this.rows).map(function (d) {
-                    var retVal = d.values;
+                    var retVal = d.value;
                     retVal.label = d.key;
                     return retVal;
                 })
             ;
-            */
-            //  TODO - reimplement with d3v4  ---
-            var data = [];
-
             this.d3Viz.setData(data, null, request);
 
             this.params.limit = this.limit.get("value");

esp/src/eclwatch/dojoConfig.js

@@ -31,6 +31,7 @@ function getConfig(env) {
             "@hpcc-js/layout": baseUrl + "/node_modules/@hpcc-js/layout/dist/layout",
             "@hpcc-js/map": baseUrl + "/node_modules/@hpcc-js/map/dist/map",
             "@hpcc-js/other": baseUrl + "/node_modules/@hpcc-js/other/dist/other",
+            "@hpcc-js/TopoJSON": dojoRoot ? "/esp/files/dist/TopoJSON" : baseUrl + "/node_modules/@hpcc-js/map/TopoJSON",
             "clipboard": baseUrl + "/node_modules/clipboard/dist/clipboard",
             "font-awesome": baseUrl + "/node_modules/@hpcc-js/common/font-awesome",
             "crossfilter": baseUrl + "/crossfilter/crossfilter.min"

esp/src/eclwatch/viz/DojoD32DChart.js

@@ -4,12 +4,13 @@ define([
   "dojo/_base/array",
   "dojo/_base/Deferred",
 
-  "@hpcc-js/composite",
-
+  "@hpcc-js/chart",
+  "@hpcc-js/other",
+  
   "./DojoD3",
   "./Mapping"
 ], function (declare, lang, arrayUtil, Deferred,
-    hpccComposite,
+    hpccChart, hpccOther,
     DojoD3, Mapping) {
     return declare([Mapping, DojoD3], {
         mapping: {
@@ -32,11 +33,29 @@ define([
 
         renderTo: function (_target) {
             var deferred = new Deferred();
-            this.chart = new hpccComposite.MultiChart()
-                .chartType(this._chartType)
-                .target(_target.domNodeID)
-            ;
-            deferred.resolve(this.chart);
+            switch (this._chartType) {
+                case "BUBBLE":
+                    this.chart = new hpccChart.Bubble()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                case "PIE":
+                    this.chart = new hpccChart.Pie()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                case "WORD_CLOUD":
+                        this.chart = new hpccOther.WordCloud()
+                            .target(_target.domNodeID)
+                        ;
+                        deferred.resolve(this.chart);
+                    break;
+                default:
+                    console.log("Invalid visualization:  " + this._chartType)
+                    deferred.resolve(null);
+            }
             return deferred.promise;
         },
 

esp/src/eclwatch/viz/DojoD3Choropleth.js

@@ -57,6 +57,9 @@ define([
                     console.log("Invalid visualization:  " + this._chartType)
                     deferred.resolve(null);
             }
+            if (this.chart) {
+                this.chart._topoJsonFolder = require.toUrl("@hpcc-js/TopoJSON");
+            }    
             return deferred.promise;
         },
 

esp/src/eclwatch/viz/DojoD3NDChart.js

@@ -4,12 +4,12 @@ define([
   "dojo/_base/array",
   "dojo/_base/Deferred",
 
-  "@hpcc-js/composite",
-
+  "@hpcc-js/chart",
+  
   "./DojoD3",
   "./Mapping"
 ], function (declare, lang, arrayUtil, Deferred,
-    hpccComposite,
+    hpccChart,
     DojoD3, Mapping) {
 
     return declare([Mapping, DojoD3], {
@@ -37,11 +37,47 @@ define([
 
         renderTo: function (_target) {
             var deferred = new Deferred();
-            this.chart = new hpccComposite.MultiChart()
-            .chartType(this._chartType)
-                .target(_target.domNodeID)
-            ;
-            deferred.resolve(this.chart);
+            switch (this._chartType) {
+                case "COLUMN":
+                    this.chart = new hpccChart.Column()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                case "BAR":
+                    this.chart = new hpccChart.Bar()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                case "LINE":
+                    this.chart = new hpccChart.Line()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                case "AREA":
+                    this.chart = new hpccChart.Area()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                case "STEP":
+                    this.chart = new hpccChart.Step()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                case "SCATTER":
+                    this.chart = new hpccChart.Scatter()
+                        .target(_target.domNodeID)
+                    ;
+                    deferred.resolve(this.chart);
+                    break;
+                default:
+                    console.log("Invalid visualization:  " + this._chartType)
+                    deferred.resolve(null);
+            }
             return deferred.promise;
         },
 

esp/src/eclwatch/viz/Mapping.js

@@ -200,7 +200,7 @@
 
         getFieldMapping: function (id, datasetID) {
             var dataset = this.datasets.get(datasetID);
-            return dataset.getFieldMapping(id);
+            return dataset.getFieldMapping(id) || id;
         },
 
         //  Data  ---

esp/src/package.json

@@ -10,7 +10,8 @@
     "copy-res-eclwatch-ecl": "cpx \"./eclwatch/ecl/**/*.*\" ./build/eclwatch/ecl/",
     "copy-res-dojo": "cpx \"./node_modules/dojo/resources/**/*.{png,jpg,gif}\" ./build/node_modules/dojo/resources/",
     "copy-res-dojox": "cpx \"./node_modules/dojox/widget/ColorPicker/images/**/*.{png,jpg,gif}\" ./build/eclwatch/img/",
-    "copy-res": "npm run copy-res-es6-promise && npm run copy-res-eclwatch-img && npm run copy-res-eclwatch-ecl && npm run copy-res-dojo && npm run copy-res-dojox",
+    "copy-res-TopoJSON": "cpx \"./node_modules/@hpcc-js/map/TopoJSON/**/*\" ./build/dist/TopoJSON/",
+    "copy-res": "npm run copy-res-es6-promise && npm run copy-res-eclwatch-img && npm run copy-res-eclwatch-ecl && npm run copy-res-dojo && npm run copy-res-dojox && npm run copy-res-TopoJSON",
     "compile": "tsc",
     "bundle": "node node_modules/webpack/bin/webpack.js --bail --display errors-only --config webpack.config.js",
     "build": "npm run copy-res && npm run compile && npm run bundle",