@hpcc-js/chart 2.86.2 → 2.86.3

package/src/RadialBar.css

@@ -1,26 +1,26 @@
-.chart_RadialBar path.arc {
-    opacity: 0.9;
-    transition: opacity 0.5s;
-}
-
-.chart_RadialBar path.arc.selected {
-    stroke: red;
-}
-
-.chart_RadialBar path.arc:hover {
-    opacity: 0.7;
-}
-
-.chart_RadialBar .axis line,
-.chart_RadialBar .axis circle {
-    stroke: #cccccc;
-    stroke-width: 1px
-}
-
-.chart_RadialBar .axis circle {
-    fill: none;
-}
-
-.chart_RadialBar .r.axis text {
-    text-anchor: end
+.chart_RadialBar path.arc {
+    opacity: 0.9;
+    transition: opacity 0.5s;
+}
+
+.chart_RadialBar path.arc.selected {
+    stroke: red;
+}
+
+.chart_RadialBar path.arc:hover {
+    opacity: 0.7;
+}
+
+.chart_RadialBar .axis line,
+.chart_RadialBar .axis circle {
+    stroke: #cccccc;
+    stroke-width: 1px
+}
+
+.chart_RadialBar .axis circle {
+    fill: none;
+}
+
+.chart_RadialBar .r.axis text {
+    text-anchor: end
 }

package/src/RadialBar.md

@@ -1,91 +1,91 @@
-# RadialBar
-
-<!--meta
-
--->
-
-RadialBar displays one category and one numeric value per data row.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { RadialBar } from "@hpcc-js/chart";
-
-      new RadialBar()
-          .target("placeholder")
-          .columns(["Category", "Value"])
-          .data([
-              ["A", 144],
-              ["B", 89],
-              ["C", 55],
-              ["D", 34]
-          ])
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-_valueMaxAngle_ sets the maximum angle of the largest value in the data that you provide.
-
-_tickCount_ sets the target number of ticks to display along the circular axis. The tick count may be slightly lower or higher than the provided number as the axis attempts to place the ticks in sensible intervals.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { RadialBar } from "@hpcc-js/chart";
-
-      new RadialBar()
-          .target("placeholder")
-          .columns(["Category", "Value 1"])
-          .data([
-              ["A", 144],
-              ["B", 89],
-              ["C", 55],
-              ["D", 34]
-          ])
-          .valueMaxAngle(90)
-          .tickCount(10)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-_domainPadding_ sets the ratio of white space to bar width.
-
-_valueDomainHigh_ sets the maximum domain axis value.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { RadialBar } from "@hpcc-js/chart";
-
-      new RadialBar()
-          .target("placeholder")
-          .columns(["Category", "Value 1"])
-          .data([
-              ["A", 144],
-              ["B", 89],
-              ["C", 55],
-              ["D", 34]
-          ])
-          .domainPadding(0.62)
-          .valueDomainHigh(200)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-## API
-
-## Published Properties
-```@hpcc-js/chart:RadialBar
-```
+# RadialBar
+
+<!--meta
+
+-->
+
+RadialBar displays one category and one numeric value per data row.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { RadialBar } from "@hpcc-js/chart";
+
+      new RadialBar()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 144],
+              ["B", 89],
+              ["C", 55],
+              ["D", 34]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_valueMaxAngle_ sets the maximum angle of the largest value in the data that you provide.
+
+_tickCount_ sets the target number of ticks to display along the circular axis. The tick count may be slightly lower or higher than the provided number as the axis attempts to place the ticks in sensible intervals.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { RadialBar } from "@hpcc-js/chart";
+
+      new RadialBar()
+          .target("placeholder")
+          .columns(["Category", "Value 1"])
+          .data([
+              ["A", 144],
+              ["B", 89],
+              ["C", 55],
+              ["D", 34]
+          ])
+          .valueMaxAngle(90)
+          .tickCount(10)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_domainPadding_ sets the ratio of white space to bar width.
+
+_valueDomainHigh_ sets the maximum domain axis value.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { RadialBar } from "@hpcc-js/chart";
+
+      new RadialBar()
+          .target("placeholder")
+          .columns(["Category", "Value 1"])
+          .data([
+              ["A", 144],
+              ["B", 89],
+              ["C", 55],
+              ["D", 34]
+          ])
+          .domainPadding(0.62)
+          .valueDomainHigh(200)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:RadialBar
+```

package/src/RadialBar.ts

@@ -1,212 +1,212 @@
-import { INDChart, ITooltip } from "@hpcc-js/api";
-import { InputField, SVGWidget, Utility } from "@hpcc-js/common";
-import { interpolate as d3Interpolate } from "d3-interpolate";
-import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from "d3-scale";
-import { arc as d3Arc } from "d3-shape";
-
-import "../src/RadialBar.css";
-
-export class RadialBar extends SVGWidget {
-    static __inputs: InputField[] = [{
-        id: "label",
-        type: "any"
-    }, {
-        id: "values",
-        type: "number"
-    }];
-
-    private _domainScale = d3ScaleBand();
-    private _valueScale = d3ScaleLinear();
-    private _d3Arc = d3Arc<[string, number]>()
-        .startAngle(0)
-        .endAngle((d) => this._valueScale(d[1]))
-        ;
-
-    protected _arcs;
-    protected _axialAxis;
-    protected _radialAxis;
-
-    constructor() {
-        super();
-        INDChart.call(this);
-        ITooltip.call(this);
-        Utility.SimpleSelectionMixin.call(this);
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._selection.widgetElement(element);
-        this.tooltipHTML(d => {
-            return this.tooltipFormat({ label: d[0], value: d[1] });
-        });
-
-        this._radialAxis = element.append("g")
-            .attr("class", "r axis")
-            ;
-        this._axialAxis = element.append("g")
-            .attr("class", "a axis")
-            ;
-        this._arcs = element.append("g")
-            .attr("class", "data")
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-        const maxValue = Math.max(this.valueDomainHigh_exists() ? this.valueDomainHigh() : 0, ...this.data().map(d => d[1]));
-
-        this._valueScale
-            .domain([0, maxValue])
-            .range([0, this.radians(this.valueMaxAngle())])
-            ;
-
-        const ticks = this._valueScale.ticks(this.tickCount());
-
-        const maxTextWidth = this.textSize(ticks.map(d => "" + d), "Verdana", 12).width;
-        const chartRadius = (Math.min(this.width() - (10 + maxTextWidth) * 2, this.height() - (10 + 12) * 2) / 2);
-
-        //  Domain Axis (x-axis)  ---
-        const domainData = this.data().map(d => d[0]);
-
-        this._domainScale
-            .domain(domainData)
-            .range([0, chartRadius])
-            .padding(this.domainPadding())
-            ;
-        const domainPadding = this._domainScale.step() * this._domainScale.padding();
-
-        const domainCircles = this._radialAxis.selectAll("circle").data(domainData);
-        domainCircles.enter().append("circle")
-            .attr("fill", "transparent")
-            .merge(domainCircles)
-            .attr("r", d => this._domainScale(d) + this._domainScale.step() - domainPadding / 2)
-            ;
-        domainCircles.exit().remove();
-
-        const domainText = this._radialAxis.selectAll(".arc-text").data(domainData);
-        domainText.enter().append("text")
-            .attr("class", "arc-text")
-            .attr("x", -4)
-            .attr("alignment-baseline", "middle")
-            .attr("text-anchor", "end")
-            .merge(domainText)
-            .attr("y", d => -this._domainScale(d) - this._domainScale.bandwidth() / 2)
-            .text(d => d);
-        domainText.exit().remove();
-
-        //  Value Axis (y-axis)  ---
-        const valueLines = this._axialAxis.selectAll("line").data(ticks);
-        valueLines.enter().append("line")
-            .merge(valueLines)
-            .attr("x2", d => chartRadius * Math.cos(this._valueScale(d) - this.radians(90)))
-            .attr("y2", d => chartRadius * Math.sin(this._valueScale(d) - this.radians(90)))
-            ;
-        valueLines.exit().remove();
-
-        const valueText = this._axialAxis.selectAll("text").data(ticks);
-        valueText.enter().append("text")
-            .style("dominant-baseline", "central")
-            .merge(valueText)
-            .attr("x", d => (chartRadius + 10) * Math.cos(this._valueScale(d) - this.radians(90)))
-            .attr("y", d => (chartRadius + 10) * Math.sin(this._valueScale(d) - this.radians(90)))
-            .style("text-anchor", d => {
-                const middleZone = 20;
-                const angle = this.degrees(this._valueScale(d));
-                if (angle >= 0 && angle <= middleZone ||
-                    angle >= 180 - middleZone && angle <= 180 + middleZone ||
-                    angle >= 360 - middleZone && angle <= 360
-                ) {
-                    return "middle";
-                } else if (angle >= 180 && angle <= 360) {
-                    return "end";
-                } else {
-                    return null;
-                }
-            })
-            .text(d => d)
-            ;
-        valueText.exit().remove();
-
-        const valueColumn = this.columns().length > 1 ? this.columns()[1] : "";
-        //  Data (arcs) ---
-        this._d3Arc
-            .innerRadius(d => this._domainScale(d[0]))
-            .outerRadius(d => this._domainScale(d[0]) + this._domainScale.bandwidth())
-            ;
-        const arcs = this._arcs.selectAll("path").data(this.data(), d => d[0]);
-        arcs.enter().append("path")
-            .attr("class", "arc")
-            .call(this._selection.enter.bind(this._selection))
-            .on("mouseout.tooltip", this.tooltip.hide)
-            .on("mousemove.tooltip", this.tooltip.show)
-            .on("click", function (d: any, _idx) {
-                context.click(context.rowToObj(d), valueColumn, context._selection.selected(this));
-            })
-            .on("dblclick", function (d: any, _idx) {
-                context.dblclick(context.rowToObj(d), valueColumn, context._selection.selected(this));
-            })
-            .merge(arcs)
-            .style("fill", (d, i) => this.fillColor(d, d[0], d[1]))
-            .transition()
-            .delay((d, i) => i * this.transitionDelay())
-            .duration(this.transitionDuration())
-            .attrTween("d", (d, indx) => {
-                const interpolate = d3Interpolate(d._current || 0, d[1]);
-                d._current = d[1];
-                return t => this._d3Arc([d[0], interpolate(t)], indx);
-            })
-            ;
-        arcs.exit().remove();
-    }
-
-    degrees(radians) {
-        return radians * 180 / Math.PI;
-    }
-
-    radians(degrees) {
-        return degrees * Math.PI / 180;
-    }
-
-    //  INDChart
-    _palette;
-    fillColor: (row, column, value) => string;
-    strokeColor: (row, column, value) => string;
-    textColor: (row, column, value) => string;
-    click: (row, column, selected) => void;
-    dblclick: (row, column, selected) => void;
-
-    //  ITooltip
-    tooltip;
-    tooltipHTML: (_) => string;
-    tooltipFormat: (_) => string;
-    _selection;
-}
-RadialBar.prototype._class += " chart_RadialBar";
-RadialBar.prototype.implements(INDChart.prototype);
-RadialBar.prototype.implements(ITooltip.prototype);
-RadialBar.prototype.mixin(Utility.SimpleSelectionMixin);
-export interface RadialBar {
-    paletteID(): string;
-    paletteID(_: string): this;
-    tickCount(): number;
-    tickCount(_: number): this;
-    domainPadding(): number;
-    domainPadding(_: number): this;
-    valueMaxAngle(): number;
-    valueMaxAngle(_: number): this;
-    valueDomainHigh(): number;
-    valueDomainHigh(_: number): this;
-    valueDomainHigh_exists(): boolean;
-    transitionDelay(): number;
-    transitionDelay(_: number): this;
-    transitionDuration(): number;
-    transitionDuration(_: number): this;
-}
-RadialBar.prototype.publish("paletteID", "default", "set", "Color palette for this widget", RadialBar.prototype._palette.switch());
-RadialBar.prototype.publish("tickCount", 10, "number", "Number of ticks to display");
-RadialBar.prototype.publish("domainPadding", 0.25, "number", "Padding between chart edge and container edge (0..1)");
-RadialBar.prototype.publish("valueMaxAngle", 270, "number", "Maximum angular length of a bar (degrees)");
-RadialBar.prototype.publish("valueDomainHigh", null, "number", "Value domain high", undefined, { optional: true });
-RadialBar.prototype.publish("transitionDelay", 100, "number", "Delay between the start of each row animation (ms)");
-RadialBar.prototype.publish("transitionDuration", 750, "number", "Duration of a row's animation (ms)");
+import { INDChart, ITooltip } from "@hpcc-js/api";
+import { InputField, SVGWidget, Utility } from "@hpcc-js/common";
+import { interpolate as d3Interpolate } from "d3-interpolate";
+import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from "d3-scale";
+import { arc as d3Arc } from "d3-shape";
+
+import "../src/RadialBar.css";
+
+export class RadialBar extends SVGWidget {
+    static __inputs: InputField[] = [{
+        id: "label",
+        type: "any"
+    }, {
+        id: "values",
+        type: "number"
+    }];
+
+    private _domainScale = d3ScaleBand();
+    private _valueScale = d3ScaleLinear();
+    private _d3Arc = d3Arc<[string, number]>()
+        .startAngle(0)
+        .endAngle((d) => this._valueScale(d[1]))
+        ;
+
+    protected _arcs;
+    protected _axialAxis;
+    protected _radialAxis;
+
+    constructor() {
+        super();
+        INDChart.call(this);
+        ITooltip.call(this);
+        Utility.SimpleSelectionMixin.call(this);
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._selection.widgetElement(element);
+        this.tooltipHTML(d => {
+            return this.tooltipFormat({ label: d[0], value: d[1] });
+        });
+
+        this._radialAxis = element.append("g")
+            .attr("class", "r axis")
+            ;
+        this._axialAxis = element.append("g")
+            .attr("class", "a axis")
+            ;
+        this._arcs = element.append("g")
+            .attr("class", "data")
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+        const maxValue = Math.max(this.valueDomainHigh_exists() ? this.valueDomainHigh() : 0, ...this.data().map(d => d[1]));
+
+        this._valueScale
+            .domain([0, maxValue])
+            .range([0, this.radians(this.valueMaxAngle())])
+            ;
+
+        const ticks = this._valueScale.ticks(this.tickCount());
+
+        const maxTextWidth = this.textSize(ticks.map(d => "" + d), "Verdana", 12).width;
+        const chartRadius = (Math.min(this.width() - (10 + maxTextWidth) * 2, this.height() - (10 + 12) * 2) / 2);
+
+        //  Domain Axis (x-axis)  ---
+        const domainData = this.data().map(d => d[0]);
+
+        this._domainScale
+            .domain(domainData)
+            .range([0, chartRadius])
+            .padding(this.domainPadding())
+            ;
+        const domainPadding = this._domainScale.step() * this._domainScale.padding();
+
+        const domainCircles = this._radialAxis.selectAll("circle").data(domainData);
+        domainCircles.enter().append("circle")
+            .attr("fill", "transparent")
+            .merge(domainCircles)
+            .attr("r", d => this._domainScale(d) + this._domainScale.step() - domainPadding / 2)
+            ;
+        domainCircles.exit().remove();
+
+        const domainText = this._radialAxis.selectAll(".arc-text").data(domainData);
+        domainText.enter().append("text")
+            .attr("class", "arc-text")
+            .attr("x", -4)
+            .attr("alignment-baseline", "middle")
+            .attr("text-anchor", "end")
+            .merge(domainText)
+            .attr("y", d => -this._domainScale(d) - this._domainScale.bandwidth() / 2)
+            .text(d => d);
+        domainText.exit().remove();
+
+        //  Value Axis (y-axis)  ---
+        const valueLines = this._axialAxis.selectAll("line").data(ticks);
+        valueLines.enter().append("line")
+            .merge(valueLines)
+            .attr("x2", d => chartRadius * Math.cos(this._valueScale(d) - this.radians(90)))
+            .attr("y2", d => chartRadius * Math.sin(this._valueScale(d) - this.radians(90)))
+            ;
+        valueLines.exit().remove();
+
+        const valueText = this._axialAxis.selectAll("text").data(ticks);
+        valueText.enter().append("text")
+            .style("dominant-baseline", "central")
+            .merge(valueText)
+            .attr("x", d => (chartRadius + 10) * Math.cos(this._valueScale(d) - this.radians(90)))
+            .attr("y", d => (chartRadius + 10) * Math.sin(this._valueScale(d) - this.radians(90)))
+            .style("text-anchor", d => {
+                const middleZone = 20;
+                const angle = this.degrees(this._valueScale(d));
+                if (angle >= 0 && angle <= middleZone ||
+                    angle >= 180 - middleZone && angle <= 180 + middleZone ||
+                    angle >= 360 - middleZone && angle <= 360
+                ) {
+                    return "middle";
+                } else if (angle >= 180 && angle <= 360) {
+                    return "end";
+                } else {
+                    return null;
+                }
+            })
+            .text(d => d)
+            ;
+        valueText.exit().remove();
+
+        const valueColumn = this.columns().length > 1 ? this.columns()[1] : "";
+        //  Data (arcs) ---
+        this._d3Arc
+            .innerRadius(d => this._domainScale(d[0]))
+            .outerRadius(d => this._domainScale(d[0]) + this._domainScale.bandwidth())
+            ;
+        const arcs = this._arcs.selectAll("path").data(this.data(), d => d[0]);
+        arcs.enter().append("path")
+            .attr("class", "arc")
+            .call(this._selection.enter.bind(this._selection))
+            .on("mouseout.tooltip", this.tooltip.hide)
+            .on("mousemove.tooltip", this.tooltip.show)
+            .on("click", function (d: any, _idx) {
+                context.click(context.rowToObj(d), valueColumn, context._selection.selected(this));
+            })
+            .on("dblclick", function (d: any, _idx) {
+                context.dblclick(context.rowToObj(d), valueColumn, context._selection.selected(this));
+            })
+            .merge(arcs)
+            .style("fill", (d, i) => this.fillColor(d, d[0], d[1]))
+            .transition()
+            .delay((d, i) => i * this.transitionDelay())
+            .duration(this.transitionDuration())
+            .attrTween("d", (d, indx) => {
+                const interpolate = d3Interpolate(d._current || 0, d[1]);
+                d._current = d[1];
+                return t => this._d3Arc([d[0], interpolate(t)], indx);
+            })
+            ;
+        arcs.exit().remove();
+    }
+
+    degrees(radians) {
+        return radians * 180 / Math.PI;
+    }
+
+    radians(degrees) {
+        return degrees * Math.PI / 180;
+    }
+
+    //  INDChart
+    _palette;
+    fillColor: (row, column, value) => string;
+    strokeColor: (row, column, value) => string;
+    textColor: (row, column, value) => string;
+    click: (row, column, selected) => void;
+    dblclick: (row, column, selected) => void;
+
+    //  ITooltip
+    tooltip;
+    tooltipHTML: (_) => string;
+    tooltipFormat: (_) => string;
+    _selection;
+}
+RadialBar.prototype._class += " chart_RadialBar";
+RadialBar.prototype.implements(INDChart.prototype);
+RadialBar.prototype.implements(ITooltip.prototype);
+RadialBar.prototype.mixin(Utility.SimpleSelectionMixin);
+export interface RadialBar {
+    paletteID(): string;
+    paletteID(_: string): this;
+    tickCount(): number;
+    tickCount(_: number): this;
+    domainPadding(): number;
+    domainPadding(_: number): this;
+    valueMaxAngle(): number;
+    valueMaxAngle(_: number): this;
+    valueDomainHigh(): number;
+    valueDomainHigh(_: number): this;
+    valueDomainHigh_exists(): boolean;
+    transitionDelay(): number;
+    transitionDelay(_: number): this;
+    transitionDuration(): number;
+    transitionDuration(_: number): this;
+}
+RadialBar.prototype.publish("paletteID", "default", "set", "Color palette for this widget", RadialBar.prototype._palette.switch());
+RadialBar.prototype.publish("tickCount", 10, "number", "Number of ticks to display");
+RadialBar.prototype.publish("domainPadding", 0.25, "number", "Padding between chart edge and container edge (0..1)");
+RadialBar.prototype.publish("valueMaxAngle", 270, "number", "Maximum angular length of a bar (degrees)");
+RadialBar.prototype.publish("valueDomainHigh", null, "number", "Value domain high", undefined, { optional: true });
+RadialBar.prototype.publish("transitionDelay", 100, "number", "Delay between the start of each row animation (ms)");
+RadialBar.prototype.publish("transitionDuration", 750, "number", "Duration of a row's animation (ms)");