Merge pull request #6868 from GordonSmith/IDE-384

IDE-384 Use new Visualizations in ECL Watch

Reviewed-By: Miguel Vazquez <miguel.vazquez@lexisnexis.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/src/eclwatch/VizWidget.js

@@ -146,8 +146,8 @@ define([
                     context.wu.fetchResults(function (response) {
                         var newSel = null;
                         arrayUtil.forEach(response, function(item, idx) {
-                            arrayUtil.forEach(vizResponse, function(vizItem, idx) {
-                                if (vizItem.value.indexOf(item.Name) >= 0) {
+                            arrayUtil.forEach(vizResponse, function (vizItem, idx) {
+                                if (vizItem.label.split(" ").join("").indexOf(item.Name) >= 0) {
                                     newSel = vizItem.value;
                                     return true;
                                 }
@@ -354,13 +354,17 @@ define([
         },
 
         vizType: "",
-        refreshVizType: function (value) {
+        refreshVizType: function (_value) {
+            var valueParts = _value.split(" ");
+            var value = valueParts[0];
+            var chartType = valueParts[1];
             var deferred = new Deferred();
             if (this.vizType !== value) {
                 this.vizType = value;
                 var context = this;
                 require(["hpcc/viz/" + this.vizType], function (D3Viz) {
                     context.d3Viz = new D3Viz();
+                    context.d3Viz._chartType = chartType;
                     domConstruct.empty(context.id + "VizCP");
                     context.d3Viz.renderTo({
                         domNodeID: context.id + "VizCP"
@@ -368,6 +372,9 @@ define([
                     deferred.resolve(context.vizType);
                 });
             } else {
+                if (chartType && this.d3Viz.chart) {
+                    this.d3Viz.chart.chartType(chartType);
+                }
                 deferred.resolve(this.vizType);
             }
             return deferred.promise;
@@ -395,7 +402,9 @@ define([
                     }));
                 });
                 all(allArray).then(function (response) {
-                    context.params.viz = context.vizSelect.get("value");
+                    var valueParts = context.vizSelect.get("value").split(" ");
+                    context.params.viz = valueParts[0];
+                    context.params.chartType = valueParts[1];
                     context.params.mapping = domForm.toQuery(context.id + "MappingForm");
                     context.d3Viz.display();
                 });

esp/src/eclwatch/WsWorkunits.js

@@ -273,9 +273,14 @@ define([
         //  Stub waiting for HPCC-10308
         visualisations: [
             { value: "DojoD3ScatterChart", label: "Scatter Chart" },
-            { value: "DojoD3BarChart", label: "Bar Chart" },
-            { value: "DojoD3PieChart", label: "Pie Chart" },
-            { value: "DojoD3DonutChart", label: "Donut Chart" },
+            { value: "DojoD32DChart C3_SCATTER", label: "Scatter C3 Chart" },
+            { value: "DojoD32DChart C3_PIE", label: "Pie Chart" },
+            { value: "DojoD32DChart C3_DONUT", label: "Donut Chart" },
+            { value: "DojoD32DChart C3_COLUMN", label: "Column Chart" },
+            { value: "DojoD32DChart C3_BAR", label: "Bar Chart" },
+            { value: "DojoD32DChart C3_LINE", label: "Line Chart" },
+            { value: "DojoD32DChart C3_STEP", label: "Step Chart" },
+            { value: "DojoD32DChart C3_AREA", label: "Area Chart" },
             { value: "DojoD3Choropleth", label: "Choropleth" },
             { value: "DojoD3CooccurrenceGraph", label: "Co-Occurrence Graph" },
             { value: "DojoD3ForceDirectedGraph", label: "Force Directed Graph" },

esp/src/eclwatch/dojoConfig.js

@@ -82,7 +82,11 @@ var dojoConfig = (function () {
         }, {
             name: "d3",
             location: urlInfo.basePath + "/Visualization/widgets/lib/d3",
-            main:"d3"
+            main: "d3"
+        }, {
+            name: "c3",
+            location: urlInfo.basePath + "/Visualization/widgets/lib/c3",
+            main: "c3"
         }, {
             name: "topojson",
             location: urlInfo.basePath + "/Visualization/widgets/lib/topojson"

esp/src/eclwatch/viz/DojoD32DChart.js

@@ -0,0 +1,92 @@
+define([
+  "dojo/_base/declare",
+  "dojo/_base/lang",
+  "dojo/_base/array",
+
+  "./DojoD3",
+  "./Mapping",
+
+  "src/chart/MultiChartSurface",
+
+  "d3/d3",
+
+  "dojo/text!./templates/DojoD3BarChart.css"
+
+], function (declare, lang, arrayUtil,
+    DojoD3, Mapping,
+    MultiChartSurface,
+    d3,
+    css) {
+    return declare([Mapping, DojoD3], {
+        mapping: {
+            barChart: {
+                display: "2D Chart Data",
+                fields: {
+                    label: "Label",
+                    value: "Value"
+                }
+            }
+        },
+
+        constructor: function (mappings, target) {
+            if (mappings)
+                this.setFieldMappings(mappings);
+
+            if (target)
+                this.renderTo(target);
+        },
+
+        renderTo: function (_target) {
+            this.chart = new MultiChartSurface()
+                .chartType(this._chartType)
+                .target(_target.domNodeID)
+            ;
+            if (this.chart.show_title) {
+                this.chart.show_title(false);
+            }
+        },
+
+        display: function (data) {
+            if (data)
+                this.setData(data);
+
+            var data = this.getMappedData();
+
+            var columns = [this.getFieldMapping("label"), this.getFieldMapping("value")];
+            var chartData = [];
+            arrayUtil.forEach(data, function (row, idx) {
+                chartData.push([row.label, row.value]);
+            });
+            this.chart
+                .columns(columns)
+                .data(chartData)
+                .render()
+            ;
+            return;
+        },
+
+        resize: function () {
+            var _debounce = function (fn, timeout) {
+                var timeoutID = -1;
+                return function () {
+                    if (timeoutID > -1) {
+                        window.clearTimeout(timeoutID);
+                    }
+                    timeoutID = window.setTimeout(fn, timeout);
+                }
+            };
+
+            var _debounced_draw = _debounce(lang.hitch(this, function () {
+                this.chart
+                    .resize()
+                    .render()
+                ;
+            }), 125);
+
+            _debounced_draw();
+        },
+
+        update: function (data) {
+        }
+    });
+});