@hpcc-js/chart 2.86.2 → 2.86.3

package/src/Bubble.ts

@@ -1,191 +1,191 @@
-import { I2DChart, ITooltip } from "@hpcc-js/api";
-import { FAChar, InputField, ISize, SVGWidget, Text, Utility } from "@hpcc-js/common";
-import { hierarchy as d3Hierarchy, pack as d3Pack } from "d3-hierarchy";
-import { select as d3Select } from "d3-selection";
-
-import "../src/Bubble.css";
-
-export class Bubble extends SVGWidget {
-    static __inputs: InputField[] = [{
-        id: "label",
-        type: "string"
-    }, {
-        id: "value",
-        type: "number"
-    }];
-
-    labelWidgets;
-    d3Pack;
-
-    constructor() {
-        super();
-        I2DChart.call(this);
-        ITooltip.call(this);
-        Utility.SimpleSelectionMixin.call(this);
-
-        this._drawStartPos = "origin";
-
-        this.labelWidgets = {};
-
-        this.d3Pack = d3Pack()
-            .size([this.width(), this.height()])
-            .padding(1.5)
-            ;
-    }
-
-    size(): ISize;
-    size(_): this;
-    size(_?): ISize | this {
-        const retVal = super.size.apply(this, arguments);
-        if (arguments.length) {
-            this.d3Pack
-                .size([this.width(), this.height()])
-                ;
-        }
-        return retVal;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._selection.widgetElement(element);
-        const context = this;
-        this
-            .tooltipHTML(function (d) {
-                switch (context.tooltipStyle()) {
-                    case "series-table":
-                        return context.tooltipFormat({
-                            label: d[0],
-                            arr: context.columns().slice(1).map(function (column, i) {
-                                return {
-                                    label: column,
-                                    color: context._palette(d[0]),
-                                    value: d[1]
-                                };
-                            })
-                        });
-                    default:
-                        return context.tooltipFormat({ label: d.data[0], value: d.data[1] });
-                }
-            })
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-
-        this._palette = this._palette.switch(this.paletteID());
-        if (this.useClonedPalette()) {
-            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
-        }
-
-        const root = d3Hierarchy({ children: this.cloneData() })
-            .sum(function (d) { return d[1]; })
-            .sort(function (b, a) {
-                return a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0;
-            })
-            ;
-        this.d3Pack(root);
-
-        const node = element.selectAll(".node").data(root.children || [], d => d.data[0]);
-
-        //  Enter  ---
-        node.enter().append("g")
-            .attr("class", (d, i) => "node series series-" + this.cssTag(d.data[0]))
-            .attr("opacity", 0)
-            .call(this._selection.enter.bind(this._selection))
-            .on("click", function (d) {
-                context.click(context.rowToObj(d.data), context.columns()[1], context._selection.selected(this));
-            })
-            .on("dblclick", function (d) {
-                context.dblclick(context.rowToObj(d.data), context.columns()[1], context._selection.selected(this));
-            })
-            .each(function (d) {
-                const element2 = d3Select(this);
-                const pos = { x: d.x, y: d.y };
-                element2.append("circle")
-                    .attr("transform", "translate(" + pos.x + "," + pos.y + ")")
-                    .attr("r", 0)
-                    .on("mouseout.tooltip", context.tooltip.hide)
-                    .on("mousemove.tooltip", context.tooltip.show)
-                    ;
-                if (d.__viz_faChar) {
-                    context.labelWidgets[d.data[0]] = new FAChar()
-                        .char(d.__viz_faChar)
-                        .target(this)
-                        .render()
-                        ;
-                } else {
-                    context.labelWidgets[d.data[0]] = new Text()
-                        .text(d.data[0])
-                        .target(this)
-                        .render()
-                        ;
-                }
-            })
-            .merge(node).transition()
-            .attr("opacity", 1)
-            .each(function (d) {
-                const element2 = d3Select(this);
-                const pos = { x: d.x, y: d.y };
-                element2.select("circle").transition()
-                    .attr("transform", "translate(" + pos.x + "," + pos.y + ")")
-                    .style("fill", context.fillColor(d.data, context.columns()[1], d.data[1]))
-                    .attr("r", d.r)
-                    .select("title")
-                    .text(d.data[0] + " (" + d.data[1] + ")")
-                    ;
-                if (d.__viz_faChar) {
-                    context.labelWidgets[d.data[0]]
-                        .pos(pos)
-                        .render()
-                        ;
-                } else {
-                    context.labelWidgets[d.data[0]]
-                        .pos(pos)
-                        .colorFill_default(context.textColor(d.data, context.columns()[1], d.data[1]))
-                        .width(d.r * 2)
-                        .text(d.data[0])
-                        .render()
-                        ;
-                }
-            })
-            ;
-
-        //  Exit  ---
-        node.exit().transition()
-            .style("opacity", 0)
-            .remove()
-            ;
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    paletteID: { (): string; (_: string): Bubble; };
-    useClonedPalette: { (): boolean; (_: boolean): Bubble; };
-
-    //  I2DChart
-    _palette;
-    fillColor: (row: any[], column: string, value: number) => string;
-    textColor: (row: any[], column: string, value: number) => string;
-    click: (row, column, selected) => void;
-    dblclick: (row, column, selected) => void;
-
-    //  ITooltip
-    tooltip;
-    tooltipHTML: (_) => string;
-    tooltipFormat: (_) => string;
-    tooltipStyle: () => "default" | "none" | "series-table";
-
-    //  SimpleSelectionMixin
-    _selection;
-}
-Bubble.prototype._class += " chart_Bubble";
-Bubble.prototype.implements(I2DChart.prototype);
-Bubble.prototype.implements(ITooltip.prototype);
-Bubble.prototype.mixin(Utility.SimpleSelectionMixin);
-
-Bubble.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Bubble.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
-Bubble.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
+import { I2DChart, ITooltip } from "@hpcc-js/api";
+import { FAChar, InputField, ISize, SVGWidget, Text, Utility } from "@hpcc-js/common";
+import { hierarchy as d3Hierarchy, pack as d3Pack } from "d3-hierarchy";
+import { select as d3Select } from "d3-selection";
+
+import "../src/Bubble.css";
+
+export class Bubble extends SVGWidget {
+    static __inputs: InputField[] = [{
+        id: "label",
+        type: "string"
+    }, {
+        id: "value",
+        type: "number"
+    }];
+
+    labelWidgets;
+    d3Pack;
+
+    constructor() {
+        super();
+        I2DChart.call(this);
+        ITooltip.call(this);
+        Utility.SimpleSelectionMixin.call(this);
+
+        this._drawStartPos = "origin";
+
+        this.labelWidgets = {};
+
+        this.d3Pack = d3Pack()
+            .size([this.width(), this.height()])
+            .padding(1.5)
+            ;
+    }
+
+    size(): ISize;
+    size(_): this;
+    size(_?): ISize | this {
+        const retVal = super.size.apply(this, arguments);
+        if (arguments.length) {
+            this.d3Pack
+                .size([this.width(), this.height()])
+                ;
+        }
+        return retVal;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._selection.widgetElement(element);
+        const context = this;
+        this
+            .tooltipHTML(function (d) {
+                switch (context.tooltipStyle()) {
+                    case "series-table":
+                        return context.tooltipFormat({
+                            label: d[0],
+                            arr: context.columns().slice(1).map(function (column, i) {
+                                return {
+                                    label: column,
+                                    color: context._palette(d[0]),
+                                    value: d[1]
+                                };
+                            })
+                        });
+                    default:
+                        return context.tooltipFormat({ label: d.data[0], value: d.data[1] });
+                }
+            })
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+
+        this._palette = this._palette.switch(this.paletteID());
+        if (this.useClonedPalette()) {
+            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
+        }
+
+        const root = d3Hierarchy({ children: this.cloneData() })
+            .sum(function (d) { return d[1]; })
+            .sort(function (b, a) {
+                return a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0;
+            })
+            ;
+        this.d3Pack(root);
+
+        const node = element.selectAll(".node").data(root.children || [], d => d.data[0]);
+
+        //  Enter  ---
+        node.enter().append("g")
+            .attr("class", (d, i) => "node series series-" + this.cssTag(d.data[0]))
+            .attr("opacity", 0)
+            .call(this._selection.enter.bind(this._selection))
+            .on("click", function (d) {
+                context.click(context.rowToObj(d.data), context.columns()[1], context._selection.selected(this));
+            })
+            .on("dblclick", function (d) {
+                context.dblclick(context.rowToObj(d.data), context.columns()[1], context._selection.selected(this));
+            })
+            .each(function (d) {
+                const element2 = d3Select(this);
+                const pos = { x: d.x, y: d.y };
+                element2.append("circle")
+                    .attr("transform", "translate(" + pos.x + "," + pos.y + ")")
+                    .attr("r", 0)
+                    .on("mouseout.tooltip", context.tooltip.hide)
+                    .on("mousemove.tooltip", context.tooltip.show)
+                    ;
+                if (d.__viz_faChar) {
+                    context.labelWidgets[d.data[0]] = new FAChar()
+                        .char(d.__viz_faChar)
+                        .target(this)
+                        .render()
+                        ;
+                } else {
+                    context.labelWidgets[d.data[0]] = new Text()
+                        .text(d.data[0])
+                        .target(this)
+                        .render()
+                        ;
+                }
+            })
+            .merge(node).transition()
+            .attr("opacity", 1)
+            .each(function (d) {
+                const element2 = d3Select(this);
+                const pos = { x: d.x, y: d.y };
+                element2.select("circle").transition()
+                    .attr("transform", "translate(" + pos.x + "," + pos.y + ")")
+                    .style("fill", context.fillColor(d.data, context.columns()[1], d.data[1]))
+                    .attr("r", d.r)
+                    .select("title")
+                    .text(d.data[0] + " (" + d.data[1] + ")")
+                    ;
+                if (d.__viz_faChar) {
+                    context.labelWidgets[d.data[0]]
+                        .pos(pos)
+                        .render()
+                        ;
+                } else {
+                    context.labelWidgets[d.data[0]]
+                        .pos(pos)
+                        .colorFill_default(context.textColor(d.data, context.columns()[1], d.data[1]))
+                        .width(d.r * 2)
+                        .text(d.data[0])
+                        .render()
+                        ;
+                }
+            })
+            ;
+
+        //  Exit  ---
+        node.exit().transition()
+            .style("opacity", 0)
+            .remove()
+            ;
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    paletteID: { (): string; (_: string): Bubble; };
+    useClonedPalette: { (): boolean; (_: boolean): Bubble; };
+
+    //  I2DChart
+    _palette;
+    fillColor: (row: any[], column: string, value: number) => string;
+    textColor: (row: any[], column: string, value: number) => string;
+    click: (row, column, selected) => void;
+    dblclick: (row, column, selected) => void;
+
+    //  ITooltip
+    tooltip;
+    tooltipHTML: (_) => string;
+    tooltipFormat: (_) => string;
+    tooltipStyle: () => "default" | "none" | "series-table";
+
+    //  SimpleSelectionMixin
+    _selection;
+}
+Bubble.prototype._class += " chart_Bubble";
+Bubble.prototype.implements(I2DChart.prototype);
+Bubble.prototype.implements(ITooltip.prototype);
+Bubble.prototype.mixin(Utility.SimpleSelectionMixin);
+
+Bubble.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Bubble.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
+Bubble.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });

package/src/BubbleXY.ts

@@ -1,14 +1,14 @@
-import { Scatter } from "./Scatter";
-
-export class BubbleXY extends Scatter {
-    constructor() {
-        super();
-    }
-    enter(domNode, element) {
-        if (!this.pointSizeColumn_exists()) {
-            this.pointSizeColumn(this.columns()[this.columns().length - 1]);
-        }
-        super.enter(domNode, element);
-    }
-}
-BubbleXY.prototype._class += " chart_BubbleXY";
+import { Scatter } from "./Scatter";
+
+export class BubbleXY extends Scatter {
+    constructor() {
+        super();
+    }
+    enter(domNode, element) {
+        if (!this.pointSizeColumn_exists()) {
+            this.pointSizeColumn(this.columns()[this.columns().length - 1]);
+        }
+        super.enter(domNode, element);
+    }
+}
+BubbleXY.prototype._class += " chart_BubbleXY";

package/src/Bullet.css

@@ -1,60 +1,60 @@
-.chart_Bullet .domain {
-    opacity: 0;
-}
-
-.chart_Bullet .bullet {
-    border: solid 1px;
-    border-color: transparent;
-    font: 10px sans-serif;
-}
-
-.chart_Bullet .bullet.selected {
-    border-color: red;
-}
-
-.chart_Bullet .bullet.over {
-    border-color: orange;
-}
-
-.chart_Bullet .bullet.selected.over {
-    border-color: red;
-}
-
-.chart_Bullet .bullet .marker {
-    stroke: #000;
-    stroke-width: 2px;
-}
-
-.chart_Bullet .bullet .tick line {
-    stroke: #666;
-    stroke-width: .5px;
-}
-
-.chart_Bullet .bullet .range.s0 {
-    fill: #eee;
-}
-
-.chart_Bullet .bullet .range.s1 {
-    fill: #ddd;
-}
-
-.chart_Bullet .bullet .range.s2 {
-    fill: #ccc;
-}
-
-.chart_Bullet .bullet .measure.s0 {
-    fill: lightsteelblue;
-}
-
-.chart_Bullet .bullet .measure.s1 {
-    fill: steelblue;
-}
-
-.chart_Bullet .bullet .title {
-    font-size: 14px;
-    font-weight: bold;
-}
-
-.chart_Bullet .bullet .subtitle {
-    fill: #999;
-}
+.chart_Bullet .domain {
+    opacity: 0;
+}
+
+.chart_Bullet .bullet {
+    border: solid 1px;
+    border-color: transparent;
+    font: 10px sans-serif;
+}
+
+.chart_Bullet .bullet.selected {
+    border-color: red;
+}
+
+.chart_Bullet .bullet.over {
+    border-color: orange;
+}
+
+.chart_Bullet .bullet.selected.over {
+    border-color: red;
+}
+
+.chart_Bullet .bullet .marker {
+    stroke: #000;
+    stroke-width: 2px;
+}
+
+.chart_Bullet .bullet .tick line {
+    stroke: #666;
+    stroke-width: .5px;
+}
+
+.chart_Bullet .bullet .range.s0 {
+    fill: #eee;
+}
+
+.chart_Bullet .bullet .range.s1 {
+    fill: #ddd;
+}
+
+.chart_Bullet .bullet .range.s2 {
+    fill: #ccc;
+}
+
+.chart_Bullet .bullet .measure.s0 {
+    fill: lightsteelblue;
+}
+
+.chart_Bullet .bullet .measure.s1 {
+    fill: steelblue;
+}
+
+.chart_Bullet .bullet .title {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.chart_Bullet .bullet .subtitle {
+    fill: #999;
+}