@hpcc-js/tree 3.2.12 → 3.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/tree",
-    "version": "3.2.12",
+    "version": "3.2.15",
     "description": "hpcc-js - Viz Tree",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -37,11 +37,11 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.4.12",
-        "@hpcc-js/common": "^3.7.2"
+        "@hpcc-js/api": "^3.4.15",
+        "@hpcc-js/common": "^3.7.5"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.8.4",
+        "@hpcc-js/esbuild-plugins": "^1.8.7",
         "@types/d3-transition": "1.3.6",
         "d3-hierarchy": "^1",
         "d3-interpolate": "^1",
@@ -61,5 +61,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "04460c76008934053c9957c361693aac862ca7dc"
+    "gitHead": "f8bdd58fc6914054a2313a87bbe1257dc9720545"
 }

package/src/CirclePacking.css

@@ -1,16 +1,16 @@
-.tree_CirclePacking circle {
-  fill: rgb(31, 119, 180);
-  fill-opacity: .25;
-  stroke: rgb(31, 119, 180);
-  stroke-width: 1px;
-}
-
-.tree_CirclePacking .leaf circle {
-  fill: #ff7f0e;
-  fill-opacity: 1;
-}
-
-.tree_CirclePacking .label {
-  fill: white;
-  text-anchor: middle;
+.tree_CirclePacking circle {
+  fill: rgb(31, 119, 180);
+  fill-opacity: .25;
+  stroke: rgb(31, 119, 180);
+  stroke-width: 1px;
+}
+
+.tree_CirclePacking .leaf circle {
+  fill: #ff7f0e;
+  fill-opacity: 1;
+}
+
+.tree_CirclePacking .label {
+  fill: white;
+  text-anchor: middle;
 }

package/src/CirclePacking.ts

@@ -1,152 +1,152 @@
-import { ITree } from "@hpcc-js/api";
-import { d3Event, SVGWidget } from "@hpcc-js/common";
-import { rgb as d3Rgb } from "d3-color";
-import { hierarchy as d3Hierarchy, pack as d3Pack } from "d3-hierarchy";
-import { interpolateZoom as d3InterpolateZoom } from "d3-interpolate";
-import "d3-transition";
-
-import "../src/CirclePacking.css";
-
-export class CirclePacking extends SVGWidget {
-    diameter;
-    pack;
-    svg;
-    _focus;
-    circle;
-    view;
-    protected _node;
-
-    constructor() {
-        super();
-        ITree.call(this);
-    }
-
-    enter(_domNode, element) {
-        this.diameter = Math.min(this.width(), this.height());
-
-        this.pack = d3Pack()
-            .size([this.diameter - 4, this.diameter - 4])
-            .padding(1.5)
-            ;
-
-        this.svg = element
-            .append("g")
-            ;
-    }
-
-    update(_domNode, _element) {
-        const context = this;
-
-        this.diameter = Math.min(this.width(), this.height());
-        this.pack
-            .size([this.diameter - 4, this.diameter - 4])
-            .padding(1.5)
-            ;
-
-        this._palette = this._palette.switch(this.paletteID());
-        if (this.useClonedPalette()) {
-            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
-        }
-
-        this.svg.selectAll("circle").remove();
-        this.svg.selectAll("text").remove();
-
-        const root: any = d3Hierarchy(this.data())
-            .sum(function (d) {
-                return d && d.size ? d.size : 1;
-            }).sort(function (a, b) {
-                return a.value < b.value ? -1 : a.value > b.value ? 1 : 0;
-            })
-            ;
-        this._focus = root;
-        this.pack(root);
-
-        this.circle = this.svg.selectAll("circle").data(root.descendants())
-            .enter().append("circle")
-            .attr("class", function (d) { return d.parent ? d.children ? "node" : "node leaf" : "node root"; })
-            .style("fill", function (d) {
-                d.color = context.paletteDepthLevel_exists() && d.depth > context.paletteDepthLevel() ? d3Rgb(d.parent.color)[context.paletteDepthVariant()](1) : context._palette(d.data.label);
-                return d.color;
-            })
-            .on("click", function (d) { context.click(d.data, null, null); })
-            .on("dblclick", function (d) {
-                if (this._focus !== d) {
-                    context.zoom(d);
-                }
-                d3Event().stopPropagation();
-            })
-            ;
-        this.circle.append("title").text(function (d) { return d.data.label; });
-
-        this.svg.selectAll("text").data(root.descendants())
-            .enter().append("text")
-            .attr("class", "label")
-            .style("fill-opacity", function (d) { return d.parent === root ? 1 : 0; })
-            .style("display", function (d) { return d.parent === root ? null : "none"; })
-            .text(function (d) {
-                return d.data.label + (context.showSize() && typeof d.data.size !== "undefined" ? " " + d.data.size : "");
-            })
-            ;
-
-        this._node = this.svg.selectAll("circle,text");
-
-        this.zoomTo([root.x, root.y, root.r * 2]);
-    }
-
-    zoom(newFocus) {
-        this._focus = newFocus;
-        const context = this;
-        const transition = this.svg.transition()
-            .duration(d3Event().altKey ? 7500 : 750)
-            .tween("zoom", function () {
-                const i = d3InterpolateZoom(context.view, [context._focus.x, context._focus.y, context._focus.r * 2]);
-                return function (t) { context.zoomTo(i(t)); };
-            });
-
-        function showText(d) {
-            return (d === context._focus && !d.children) || d.parent === context._focus;
-        }
-
-        transition.selectAll("text")
-            .filter(function (d) { return showText(d) || this.style.display === "inline"; })
-            .style("fill-opacity", function (d) { return showText(d) ? 1 : 0; })
-            .on("start", function (d) { if (showText(d)) this.style.display = "inline"; })
-            .on("end", function (d) { if (!showText(d)) this.style.display = "none"; });
-    }
-
-    zoomTo(v) {
-        const k = this.diameter / v[2];
-        this.view = v;
-        this._node.attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
-        this.circle.attr("r", function (d) { return d.r * k; });
-    }
-}
-CirclePacking.prototype._class += " tree_CirclePacking";
-CirclePacking.prototype.implements(ITree.prototype);
-
-export interface CirclePacking {
-    _palette;
-
-    //  I2DChart  ---
-    click(row, column, selected): void;
-    dblclick(row, column, selected): void;
-
-    // Properties  ---
-    showSize(): boolean;
-    showSize(_: boolean): this;
-    paletteDepthLevel(): number;
-    paletteDepthLevel(_: number): this;
-    paletteDepthLevel_exists(): boolean;
-    paletteDepthVariant(): "brighter" | "darker";
-    paletteDepthVariant(_: "brighter" | "darker"): this;
-    paletteID(): string;
-    paletteID(_: string): this;
-    useClonedPalette(): boolean;
-    useClonedPalette(_: boolean): this;
-}
-
-CirclePacking.prototype.publish("showSize", true, "boolean", "Show size along with label");
-CirclePacking.prototype.publish("paletteDepthLevel", null, "number", "If not null then beyond this depth number the child node colors are based on parent", null, { optional: true });
-CirclePacking.prototype.publish("paletteDepthVariant", "brighter", "set", "Determines paletteDepthLevel decendant color shade variant", ["brighter", "darker"], { disable: w => w.paletteDepthLevel_exists() });
-CirclePacking.prototype.publish("paletteID", "default", "set", "Color palette for this widget", CirclePacking.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
-CirclePacking.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
+import { ITree } from "@hpcc-js/api";
+import { d3Event, SVGWidget } from "@hpcc-js/common";
+import { rgb as d3Rgb } from "d3-color";
+import { hierarchy as d3Hierarchy, pack as d3Pack } from "d3-hierarchy";
+import { interpolateZoom as d3InterpolateZoom } from "d3-interpolate";
+import "d3-transition";
+
+import "../src/CirclePacking.css";
+
+export class CirclePacking extends SVGWidget {
+    diameter;
+    pack;
+    svg;
+    _focus;
+    circle;
+    view;
+    protected _node;
+
+    constructor() {
+        super();
+        ITree.call(this);
+    }
+
+    enter(_domNode, element) {
+        this.diameter = Math.min(this.width(), this.height());
+
+        this.pack = d3Pack()
+            .size([this.diameter - 4, this.diameter - 4])
+            .padding(1.5)
+            ;
+
+        this.svg = element
+            .append("g")
+            ;
+    }
+
+    update(_domNode, _element) {
+        const context = this;
+
+        this.diameter = Math.min(this.width(), this.height());
+        this.pack
+            .size([this.diameter - 4, this.diameter - 4])
+            .padding(1.5)
+            ;
+
+        this._palette = this._palette.switch(this.paletteID());
+        if (this.useClonedPalette()) {
+            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
+        }
+
+        this.svg.selectAll("circle").remove();
+        this.svg.selectAll("text").remove();
+
+        const root: any = d3Hierarchy(this.data())
+            .sum(function (d) {
+                return d && d.size ? d.size : 1;
+            }).sort(function (a, b) {
+                return a.value < b.value ? -1 : a.value > b.value ? 1 : 0;
+            })
+            ;
+        this._focus = root;
+        this.pack(root);
+
+        this.circle = this.svg.selectAll("circle").data(root.descendants())
+            .enter().append("circle")
+            .attr("class", function (d) { return d.parent ? d.children ? "node" : "node leaf" : "node root"; })
+            .style("fill", function (d) {
+                d.color = context.paletteDepthLevel_exists() && d.depth > context.paletteDepthLevel() ? d3Rgb(d.parent.color)[context.paletteDepthVariant()](1) : context._palette(d.data.label);
+                return d.color;
+            })
+            .on("click", function (d) { context.click(d.data, null, null); })
+            .on("dblclick", function (d) {
+                if (this._focus !== d) {
+                    context.zoom(d);
+                }
+                d3Event().stopPropagation();
+            })
+            ;
+        this.circle.append("title").text(function (d) { return d.data.label; });
+
+        this.svg.selectAll("text").data(root.descendants())
+            .enter().append("text")
+            .attr("class", "label")
+            .style("fill-opacity", function (d) { return d.parent === root ? 1 : 0; })
+            .style("display", function (d) { return d.parent === root ? null : "none"; })
+            .text(function (d) {
+                return d.data.label + (context.showSize() && typeof d.data.size !== "undefined" ? " " + d.data.size : "");
+            })
+            ;
+
+        this._node = this.svg.selectAll("circle,text");
+
+        this.zoomTo([root.x, root.y, root.r * 2]);
+    }
+
+    zoom(newFocus) {
+        this._focus = newFocus;
+        const context = this;
+        const transition = this.svg.transition()
+            .duration(d3Event().altKey ? 7500 : 750)
+            .tween("zoom", function () {
+                const i = d3InterpolateZoom(context.view, [context._focus.x, context._focus.y, context._focus.r * 2]);
+                return function (t) { context.zoomTo(i(t)); };
+            });
+
+        function showText(d) {
+            return (d === context._focus && !d.children) || d.parent === context._focus;
+        }
+
+        transition.selectAll("text")
+            .filter(function (d) { return showText(d) || this.style.display === "inline"; })
+            .style("fill-opacity", function (d) { return showText(d) ? 1 : 0; })
+            .on("start", function (d) { if (showText(d)) this.style.display = "inline"; })
+            .on("end", function (d) { if (!showText(d)) this.style.display = "none"; });
+    }
+
+    zoomTo(v) {
+        const k = this.diameter / v[2];
+        this.view = v;
+        this._node.attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
+        this.circle.attr("r", function (d) { return d.r * k; });
+    }
+}
+CirclePacking.prototype._class += " tree_CirclePacking";
+CirclePacking.prototype.implements(ITree.prototype);
+
+export interface CirclePacking {
+    _palette;
+
+    //  I2DChart  ---
+    click(row, column, selected): void;
+    dblclick(row, column, selected): void;
+
+    // Properties  ---
+    showSize(): boolean;
+    showSize(_: boolean): this;
+    paletteDepthLevel(): number;
+    paletteDepthLevel(_: number): this;
+    paletteDepthLevel_exists(): boolean;
+    paletteDepthVariant(): "brighter" | "darker";
+    paletteDepthVariant(_: "brighter" | "darker"): this;
+    paletteID(): string;
+    paletteID(_: string): this;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+}
+
+CirclePacking.prototype.publish("showSize", true, "boolean", "Show size along with label");
+CirclePacking.prototype.publish("paletteDepthLevel", null, "number", "If not null then beyond this depth number the child node colors are based on parent", null, { optional: true });
+CirclePacking.prototype.publish("paletteDepthVariant", "brighter", "set", "Determines paletteDepthLevel decendant color shade variant", ["brighter", "darker"], { disable: w => w.paletteDepthLevel_exists() });
+CirclePacking.prototype.publish("paletteID", "default", "set", "Color palette for this widget", CirclePacking.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
+CirclePacking.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });

package/src/Dendrogram.css

@@ -1,41 +1,41 @@
-.tree_Dendrogram .node {}
-
-.tree_Dendrogram .node circle {
-    fill: #dcf1ff;
-    stroke: #1f77b4;
-    stroke-width: 1.0px;
-}
-
-.tree_Dendrogram .node.selected circle {
-    stroke: red;
-}
-
-.tree_Dendrogram .node.over circle {
-    stroke: orange;
-}
-
-.tree_Dendrogram .node.selected.over circle {
-    stroke: red;
-}
-
-.tree_Dendrogram .node.selected text {
-    fill: red;
-}
-
-.tree_Dendrogram .node.over text {
-    fill: orange;
-}
-
-.tree_Dendrogram .node.selected.over text {
-    fill: red;
-}
-
-.tree_Dendrogram .node text {
-    font-size: 14px;
-}
-
-.tree_Dendrogram .link {
-    fill: none;
-    stroke: #656565;
-    stroke-width: 1.0px;
+.tree_Dendrogram .node {}
+
+.tree_Dendrogram .node circle {
+    fill: #dcf1ff;
+    stroke: #1f77b4;
+    stroke-width: 1.0px;
+}
+
+.tree_Dendrogram .node.selected circle {
+    stroke: red;
+}
+
+.tree_Dendrogram .node.over circle {
+    stroke: orange;
+}
+
+.tree_Dendrogram .node.selected.over circle {
+    stroke: red;
+}
+
+.tree_Dendrogram .node.selected text {
+    fill: red;
+}
+
+.tree_Dendrogram .node.over text {
+    fill: orange;
+}
+
+.tree_Dendrogram .node.selected.over text {
+    fill: red;
+}
+
+.tree_Dendrogram .node text {
+    font-size: 14px;
+}
+
+.tree_Dendrogram .link {
+    fill: none;
+    stroke: #656565;
+    stroke-width: 1.0px;
 }