Sfoglia il codice sorgente

HPCC-18512 Update ECL Watch stats to use WebPack

Update stats page to use latest viz framework.
Remove old crossfilter and update to latest.

Signed-off-by: Gordon Smith <gordonjsmith@gmail.com>
Gordon Smith 7 anni fa
parent
commit
800b472e3d

+ 0 - 3
.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/crossfilter"]
-	path = esp/src/crossfilter
-	url = https://github.com/hpcc-systems/crossfilter.git
 [submodule "plugins/kafka/librdkafka"]
 	path = plugins/kafka/librdkafka
 	url = https://github.com/hpcc-systems/librdkafka.git

+ 3 - 3
esp/src/eclwatch/Utility.js

@@ -627,9 +627,9 @@
             case "WUQueryWidget":
                 require(["hpcc/WUQueryWidget"], doLoad);
                 break;
-//            case "WUStatsWidget":
-//                require(["hpcc/WUStatsWidget"], doLoad);
-//                break;
+            case "WUStatsWidget":
+                require(["hpcc/WUStatsWidget"], doLoad);
+                break;
             case "XrefDetailsWidget":
                 require(["hpcc/XrefDetailsWidget"], doLoad);
                 break;

+ 121 - 121
esp/src/eclwatch/WUStatsWidget.js

@@ -22,6 +22,14 @@ define([
 
     "dijit/registry",
 
+    "crossfilter",
+
+    "@hpcc-js/common",
+    "@hpcc-js/chart", 
+    "@hpcc-js/layout",
+    "@hpcc-js/tree",
+    "@hpcc-js/other",
+    
     "hpcc/_Widget",
     "hpcc/WsWorkunits",
 
@@ -33,6 +41,8 @@ define([
     "dijit/form/Select"
 ], function (declare, lang, i18n, nlsHPCC, on,
             registry,
+            crossfilter,
+            hpccCommon, hpccChart, hpccLayout, hpccTree, hpccOther,
             _Widget, WsWorkunits,
             template) {
     return declare("WUStatsWidget", [_Widget], {
@@ -84,131 +94,122 @@ define([
                 return;
 
             var context = this;
-            function requireWidget() {
-                require(["src/other/Comms", "src/composite/MegaChart", "src/layout/Surface", "src/tree/SunburstPartition", "src/other/Table", "crossfilter"], function (Comms, MegaChart, Surface, SunburstPartition, Table, crossfilterXXX) {
-                    function CFGroup(crossfilter, dimensionID, targetID) {
-                        this.targetID = targetID;
-                        this.dimensionID = dimensionID;
-                        this.dimension = crossfilter.dimension(function (d) { return d[dimensionID]; });
-                        this.group = this.dimension.group().reduceSum(function (d) { return d.RawValue; });
-
-                        this.widget = new MegaChart()
-                            .target(targetID)
-                            .title(dimensionID)
-                            .titleFontFamily("Verdana")
-                            .columns([dimensionID, "Total"])
-                            .chartType("C3_PIE")
-                        ;
-
-                        this.filter = null;
-                        var context = this;
-                        this.widget.click = function (row, column) {
-                            if (context.filter === row[dimensionID]) {
-                                context.filter = null;
-                            } else {
-                                context.filter = row[dimensionID];
-                            }
-                            context.dimension.filter(context.filter);
-                            context.click(row, column);
-                            context.render();
-                        };
-                    }
-                    CFGroup.prototype.click = function (row, column) {
-                    }
-                    CFGroup.prototype.resetFilter = function () {
-                        this.filter = null;
-                        this.dimension.filter(null);
-                    }
-                    CFGroup.prototype.render = function () {
-                        this.widget
-                            .title(this.dimensionID + (this.filter ? " (" + this.filter + ")" : ""))
-                            .data(this.group.all().map(function (row) {
-                                return [row.key, row.value];
-                            }))
-                            .render()
-                        ;
-                    }
-
-                    context.stats = crossfilter([]);
-                    context.summaryByKind = context.stats.dimension(function (d) { return d.Kind; });
-                    context.groupByKind = context.summaryByKind.group().reduceCount();
-
-                    context.select = registry.byId(context.id + "Kind");
-                    var prevKind = "";
-                    context.select.on("change", function (newValue) {
-                        if (prevKind !== newValue) {
-                            context.pieCreatorType.resetFilter();
-                            context.pieScopeType.resetFilter();
-                            context.prevScope = null;
-                            context.summaryByScope.filterAll();
-                            context.summaryByKind.filter(newValue);
-                            context.doRender(context.select);
-                            prevKind = newValue;
-                        }
-                    });
+            function CFGroup(crossfilter, dimensionID, targetID) {
+                this.targetID = targetID;
+                this.dimensionID = dimensionID;
+                this.dimension = crossfilter.dimension(function (d) { return d[dimensionID]; });
+                this.group = this.dimension.group().reduceSum(function (d) { return d.RawValue; });
+
+                this.scopes = new hpccTree.SunburstPartition();
+                this.scopesSurface = new hpccLayout.Surface()
+                    .target(this.id + "Scope")
+                    .title("Scope")
+                    .widget(this.scopes)
+                ;
 
-                    context.pieCreatorType = new CFGroup(context.stats, "CreatorType", context.id + "CreatorType");
-                    context.pieCreatorType.click = function (row, column) {
-                        context.doRender(context.pieCreatorType);
-                    }
+                this.widgetChart = new hpccChart.Pie()
+                    .columns([dimensionID, "Total"])
+                    ;
+                this.widget = new hpccLayout.Surface()
+                    .target(targetID)
+                    .title(dimensionID)
+                    .widget(this.widgetChart)
+                ;
 
-                    context.pieScopeType = new CFGroup(context.stats, "ScopeType", context.id + "ScopeType");
-                    context.pieScopeType.click = function (row, column) {
-                        context.doRender(context.pieScopeType);
+                this.filter = null;
+                var context = this;
+                this.widgetChart.click = function (row, column) {
+                    if (context.filter === row[dimensionID]) {
+                        context.filter = null;
+                    } else {
+                        context.filter = row[dimensionID];
                     }
+                    context.dimension.filter(context.filter);
+                    context.click(row, column);
+                    context.render();
+                };
+            }
+            CFGroup.prototype.click = function (row, column) {
+            }
+            CFGroup.prototype.resetFilter = function () {
+                this.filter = null;
+                this.dimension.filter(null);
+            }
+            CFGroup.prototype.render = function () {
+                this.widgetChart
+                    .data(this.group.all().map(function (row) {
+                        return [row.key, row.value];
+                    }))
+                ;
+                this.widget
+                    .title(this.dimensionID + (this.filter ? " (" + this.filter + ")" : ""))
+                    .resize()
+                    .render()
+                ;
+            }
 
-                    context.summaryByScope = context.stats.dimension(function (d) { return d.Scope; });
-                    context.groupByScope = context.summaryByScope.group().reduceSum(function (d) { return d.RawValue; });
-
-                    context.scopes = new SunburstPartition();
-                    context.scopesSurface = new Surface()
-                        .target(context.id + "Scope")
-                        .title("Scope")
-                        .widget(context.scopes)
-                    ;
+            this.stats = crossfilter([]);
+            this.summaryByKind = this.stats.dimension(function (d) { return d.Kind; });
+            this.groupByKind = this.summaryByKind.group().reduceCount();
 
+            this.select = registry.byId(this.id + "Kind");
+            var prevKind = "";
+            this.select.on("change", function (newValue) {
+                if (prevKind !== newValue) {
+                    context.pieCreatorType.resetFilter();
+                    context.pieScopeType.resetFilter();
                     context.prevScope = null;
-                    context.scopes.click = SunburstPartition.prototype.debounce(function (row, column) {
-                        if (row.id === "") {
-                            context.prevScope = null;
-                            context.summaryByScope.filter(null);
-                        } else if (context.prevScope === row.id) {
-                            context.prevScope = null;
-                            context.summaryByScope.filter(null);
-                        } else {
-                            context.prevScope = row.id;
-                            context.summaryByScope.filter(function (d) {
-                                return d.indexOf(context.prevScope + ":") === 0;
-                            });
-                        }
-                        context.doRender(context.scopes);
-                    }, 250);
+                    context.summaryByScope.filterAll();
+                    context.summaryByKind.filter(newValue);
+                    context.doRender(context.select);
+                    prevKind = newValue;
+                }
+            });
 
-                    context.bar = new MegaChart()
-                        .target(context.id + "Stats")
-                        .titleFontFamily("Verdana")
-                        .chartType("BAR")
-                    ;
+            this.pieCreatorType = new CFGroup(this.stats, "CreatorType", this.id + "CreatorType");
+            this.pieCreatorType.click = function (row, column) {
+                context.doRender(context.pieCreatorType);
+            }
 
-                    context.doRefreshData();
-                });
+            this.pieScopeType = new CFGroup(this.stats, "ScopeType", this.id + "ScopeType");
+            this.pieScopeType.click = function (row, column) {
+                context.doRender(context.pieScopeType);
             }
 
-            if (dojoConfig.vizDebug) {
-                requireWidget();
-            } else {
-                require(["dist-amd/hpcc-viz"], function () {
-                    require(["dist-amd/hpcc-viz-common"], function () {
-                        require(["dist-amd/hpcc-viz-api"], function () {
-                            require(["dist-amd/hpcc-viz-layout"], function () {
-                                require(["dist-amd/hpcc-viz-chart", "dist-amd/hpcc-viz-google", "dist-amd/hpcc-viz-c3chart", "dist-amd/hpcc-viz-amchart", "dist-amd/hpcc-viz-other", "dist-amd/hpcc-viz-tree", "dist-amd/hpcc-viz-composite"], function () {
-                                    requireWidget();
-                                });
-                            });
-                        });
+            this.summaryByScope = this.stats.dimension(function (d) { return d.Scope; });
+            this.groupByScope = this.summaryByScope.group().reduceSum(function (d) { return d.RawValue; });
+
+            this.scopes = new hpccTree.SunburstPartition();
+            this.scopesSurface = new hpccLayout.Surface()
+                .target(this.id + "Scope")
+                .title("Scope")
+                .widget(this.scopes)
+            ;
+
+            this.prevScope = null;
+            this.scopes.click = hpccCommon.Utility.debounce(function (row, column) {
+                if (row.id === "") {
+                    context.prevScope = null;
+                    context.summaryByScope.filter(null);
+                } else if (context.prevScope === row.id) {
+                    context.prevScope = null;
+                    context.summaryByScope.filter(null);
+                } else {
+                    context.prevScope = row.id;
+                    context.summaryByScope.filter(function (d) {
+                        return d.indexOf(context.prevScope + ":") === 0;
                     });
-                });
-            }
+                }
+                context.doRender(context.scopes);
+            }, 250);
+
+            this.barChart = new hpccChart.Bar();
+            this.bar = new hpccLayout.Surface()
+                .target(this.id + "Stats")
+                .widget(this.barChart)
+            ;
+
+            this.doRefreshData();
         },
 
         formatTree: function (data, label) {
@@ -318,15 +319,14 @@ define([
                 return item;
             }).join(", ") || "Unknown";
             statsLabel += (scopeData[0] ? " (" + scopeData[0].Measure + ")" : "");
-            this.bar
-                .title(statsLabel)
+            this.barChart
                 .columns(["Stat", statsLabel])
                 .data(statsData)
-                .render(function (d) {
-                    if (d._content && d._content._chart && d._content._chart.legendShow) {
-                        d._content._chart.legendShow(false);
-                    }
-                })
+            ;
+            this.bar
+                .title(statsLabel)
+                .resize()
+                .render()
             ;
         },
 

+ 2 - 1
esp/src/eclwatch/dojoConfig.js

@@ -32,11 +32,12 @@ 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/tree": baseUrl + "/node_modules/@hpcc-js/tree/dist/tree",
             "@hpcc-js/util": baseUrl + "/node_modules/@hpcc-js/util/dist/util",
             "@hpcc-js/TopoJSON": dojoRoot ? "/esp/files/dist/TopoJSON" : baseUrl + "/node_modules/@hpcc-js/map/TopoJSON",
             "clipboard": baseUrl + "/node_modules/clipboard/dist/clipboard",
             "codemirror": baseUrl + "/node_modules/codemirror",
-            "crossfilter": baseUrl + "/crossfilter/crossfilter.min",
+            "crossfilter": baseUrl + "/node_modules/crossfilter2/crossfilter.min",
             "font-awesome": baseUrl + "/node_modules/@hpcc-js/common/font-awesome",
             "tslib": baseUrl + "/node_modules/tslib/tslib"
         },

+ 111 - 1
esp/src/package-lock.json

@@ -12,6 +12,7 @@
       "requires": {
         "@hpcc-js/common": "0.0.42",
         "d3-format": "1.2.0",
+        "d3-tip": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
         "tslib": "1.7.1"
       },
       "dependencies": {
@@ -39,7 +40,8 @@
           }
         },
         "d3-tip": {
-          "version": "github:gordonsmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+          "version": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+          "dev": true,
           "requires": {
             "d3-collection": "1.0.4",
             "d3-selection": "1.1.0"
@@ -183,7 +185,18 @@
           "requires": {
             "@hpcc-js/common": "0.0.41",
             "d3-format": "1.2.0",
+            "d3-tip": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
             "tslib": "1.8.0"
+          },
+          "dependencies": {
+            "d3-tip": {
+              "version": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+              "dev": true,
+              "requires": {
+                "d3-collection": "1.0.4",
+                "d3-selection": "1.1.0"
+              }
+            }
           }
         },
         "@hpcc-js/chart": {
@@ -254,7 +267,18 @@
           "requires": {
             "@hpcc-js/common": "0.0.41",
             "d3-format": "1.2.0",
+            "d3-tip": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
             "tslib": "1.8.0"
+          },
+          "dependencies": {
+            "d3-tip": {
+              "version": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+              "dev": true,
+              "requires": {
+                "d3-collection": "1.0.4",
+                "d3-selection": "1.1.0"
+              }
+            }
           }
         },
         "@hpcc-js/chart": {
@@ -311,7 +335,18 @@
           "requires": {
             "@hpcc-js/common": "0.0.41",
             "d3-format": "1.2.0",
+            "d3-tip": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
             "tslib": "1.8.0"
+          },
+          "dependencies": {
+            "d3-tip": {
+              "version": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+              "dev": true,
+              "requires": {
+                "d3-collection": "1.0.4",
+                "d3-selection": "1.1.0"
+              }
+            }
           }
         },
         "d3-tip": {
@@ -377,7 +412,18 @@
           "requires": {
             "@hpcc-js/common": "0.0.41",
             "d3-format": "1.2.0",
+            "d3-tip": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
             "tslib": "1.8.0"
+          },
+          "dependencies": {
+            "d3-tip": {
+              "version": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+              "dev": true,
+              "requires": {
+                "d3-collection": "1.0.4",
+                "d3-selection": "1.1.0"
+              }
+            }
           }
         },
         "d3-tip": {
@@ -423,7 +469,18 @@
           "requires": {
             "@hpcc-js/common": "0.0.41",
             "d3-format": "1.2.0",
+            "d3-tip": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
             "tslib": "1.8.0"
+          },
+          "dependencies": {
+            "d3-tip": {
+              "version": "github:GordonSmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+              "dev": true,
+              "requires": {
+                "d3-collection": "1.0.4",
+                "d3-selection": "1.1.0"
+              }
+            }
           }
         },
         "d3-tip": {
@@ -469,6 +526,36 @@
         "preact": "8.2.6"
       }
     },
+    "@hpcc-js/tree": {
+      "version": "0.0.41",
+      "resolved": "https://registry.npmjs.org/@hpcc-js/tree/-/tree-0.0.41.tgz",
+      "integrity": "sha1-PlbrmsjT6yz64g7+W5MRT4gG6gI=",
+      "dev": true,
+      "requires": {
+        "@hpcc-js/api": "0.0.41",
+        "@hpcc-js/common": "0.0.41",
+        "d3-hierarchy": "1.1.4",
+        "d3-interpolate": "1.1.5",
+        "d3-scale": "1.0.6",
+        "d3-selection": "1.1.0",
+        "d3-shape": "1.2.0",
+        "tslib": "1.8.0"
+      },
+      "dependencies": {
+        "@hpcc-js/api": {
+          "version": "0.0.41",
+          "resolved": "https://registry.npmjs.org/@hpcc-js/api/-/api-0.0.41.tgz",
+          "integrity": "sha1-v83nPPjwMs6yIuWn+C/lGF+Lfeo=",
+          "dev": true,
+          "requires": {
+            "@hpcc-js/common": "0.0.41",
+            "d3-format": "1.2.0",
+            "d3-tip": "github:gordonsmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+            "tslib": "1.8.0"
+          }
+        }
+      }
+    },
     "@hpcc-js/util": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@hpcc-js/util/-/util-0.0.39.tgz",
@@ -1614,6 +1701,15 @@
         "which": "1.3.0"
       }
     },
+    "crossfilter2": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/crossfilter2/-/crossfilter2-1.4.3.tgz",
+      "integrity": "sha512-LB0si9wwHufgvIk8ia3WoWDc3mel1OC0ZHe1bUxXE4hZDpino5xBwlw27VI26n8beiAM+Pdknuh55OTHlZz+tg==",
+      "dev": true,
+      "requires": {
+        "lodash.result": "4.5.2"
+      }
+    },
     "cryptiles": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
@@ -2077,6 +2173,14 @@
       "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA==",
       "dev": true
     },
+    "d3-tip": {
+      "version": "github:gordonsmith/d3-tip#ab6bb995e06a9e9c27e10d9a70458264c5cf939f",
+      "dev": true,
+      "requires": {
+        "d3-collection": "1.0.4",
+        "d3-selection": "1.1.0"
+      }
+    },
     "d3-transition": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
@@ -4063,6 +4167,12 @@
       "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=",
       "dev": true
     },
+    "lodash.result": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.result/-/lodash.result-4.5.2.tgz",
+      "integrity": "sha1-y0Wyf7kU6qjY7m8M57KHC4fLcKo=",
+      "dev": true
+    },
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",

+ 2 - 0
esp/src/package.json

@@ -30,9 +30,11 @@
     "@hpcc-js/layout": "0.0.41",
     "@hpcc-js/map": "0.0.45",
     "@hpcc-js/other": "0.0.41",
+    "@hpcc-js/tree": "0.0.41",
     "clipboard": "1.7.1",
     "codemirror": "5.31.0",
     "cpx": "1.5.0",
+    "crossfilter2": "1.4.3",
     "css-loader": "0.28.7",
     "dijit": "1.13.0",
     "dojo": "1.13.0",