@hpcc-js/chart 3.7.2 → 3.7.4

package/src/Bullet.md

@@ -1,104 +1,104 @@
-# Bullet
-
-<!--meta
-
--->
-
-The Bullet chart displays a title and subtitle along with three types of values to the right. Each row's values are placed relative to the other values in that row. Their placement is unaffected by the values in other rows.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Bullet } from "@hpcc-js/chart";
-
-      new Bullet()
-          .target("placeholder")
-          .columns(["title", "subtitle", "measures"])
-          .data([
-              ["Revenue", "US$, in thousands", [220, 270, 345]],
-              ["Profit  ", "%", [21, 23]],
-              ["Order Size", "US$, average", [100, 320, 432]],
-              ["New Customers", "count", [1000, 1650, 1943]],
-              ["Satisfaction", "out of 5", [3.2, 4.7, 4.9]]
-          ])
-          .titleColumn("title")
-          .subtitleColumn("subtitle")
-          .measuresColumn("measures")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-In this example "markers" have been added. 
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Bullet } from "@hpcc-js/chart";
-
-      new Bullet()
-          .target("placeholder")
-          .columns(["title", "subtitle", "measures", "markers"])
-          .data([
-              ["Revenue", "US$, in thousands", [220, 270], [250, 25]],
-              ["Profit  ", "%", [21, 23], [26]],
-              ["Order Size", "US$, average", [100, 320], [150, 550]],
-              ["New Customers", "count", [1000, 1650], [190, 540, 750, 850, 2100]],
-              ["Satisfaction", "out of 5", [3.2, 4.7], [4.4]]
-          ])
-          .titleColumn("title")
-          .subtitleColumn("subtitle")
-          .measuresColumn("measures")
-          .markersColumn("markers")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-In this example "ranges" have been added. 
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Bullet } from "@hpcc-js/chart";
-
-      new Bullet()
-          .target("placeholder")
-          .columns(["title", "subtitle", "ranges", "measures", "markers"])
-          .data([
-              ["Revenue", "US$, in thousands", [150, 225, 300], [220, 270], [250, 25]],
-              ["Profit  ", "%", [20, 25, 30], [21, 23], [26]],
-              ["Order Size", "US$, average", [350, 500, 600], [100, 320], [550]],
-              ["New Customers", "count", [1400, 2000, 2500], [1000, 1650], 2100],
-              ["Satisfaction", "out of 5", [3.5, 4.25, 5], [3.2, 4.7], [4.4]]
-          ])
-          .titleColumn("title")
-          .subtitleColumn("subtitle")
-          .rangesColumn("ranges")
-          .measuresColumn("measures")
-          .markersColumn("markers")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-## API
-
-## Published Properties
-```@hpcc-js/chart:Bullet
-```
+# Bullet
+
+<!--meta
+
+-->
+
+The Bullet chart displays a title and subtitle along with three types of values to the right. Each row's values are placed relative to the other values in that row. Their placement is unaffected by the values in other rows.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bullet } from "@hpcc-js/chart";
+
+      new Bullet()
+          .target("placeholder")
+          .columns(["title", "subtitle", "measures"])
+          .data([
+              ["Revenue", "US$, in thousands", [220, 270, 345]],
+              ["Profit  ", "%", [21, 23]],
+              ["Order Size", "US$, average", [100, 320, 432]],
+              ["New Customers", "count", [1000, 1650, 1943]],
+              ["Satisfaction", "out of 5", [3.2, 4.7, 4.9]]
+          ])
+          .titleColumn("title")
+          .subtitleColumn("subtitle")
+          .measuresColumn("measures")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+In this example "markers" have been added. 
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bullet } from "@hpcc-js/chart";
+
+      new Bullet()
+          .target("placeholder")
+          .columns(["title", "subtitle", "measures", "markers"])
+          .data([
+              ["Revenue", "US$, in thousands", [220, 270], [250, 25]],
+              ["Profit  ", "%", [21, 23], [26]],
+              ["Order Size", "US$, average", [100, 320], [150, 550]],
+              ["New Customers", "count", [1000, 1650], [190, 540, 750, 850, 2100]],
+              ["Satisfaction", "out of 5", [3.2, 4.7], [4.4]]
+          ])
+          .titleColumn("title")
+          .subtitleColumn("subtitle")
+          .measuresColumn("measures")
+          .markersColumn("markers")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+In this example "ranges" have been added. 
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bullet } from "@hpcc-js/chart";
+
+      new Bullet()
+          .target("placeholder")
+          .columns(["title", "subtitle", "ranges", "measures", "markers"])
+          .data([
+              ["Revenue", "US$, in thousands", [150, 225, 300], [220, 270], [250, 25]],
+              ["Profit  ", "%", [20, 25, 30], [21, 23], [26]],
+              ["Order Size", "US$, average", [350, 500, 600], [100, 320], [550]],
+              ["New Customers", "count", [1400, 2000, 2500], [1000, 1650], 2100],
+              ["Satisfaction", "out of 5", [3.5, 4.25, 5], [3.2, 4.7], [4.4]]
+          ])
+          .titleColumn("title")
+          .subtitleColumn("subtitle")
+          .rangesColumn("ranges")
+          .measuresColumn("measures")
+          .markersColumn("markers")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Bullet
+```

package/src/Bullet.ts

@@ -1,176 +1,176 @@
-import { HTMLWidget, Utility } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
-import { bullet as d3Bullet } from "d3v4-bullet";
-
-import "../src/Bullet.css";
-
-export class Bullet extends HTMLWidget {
-
-    private _hiddenColumns = {};
-
-    constructor() {
-        super();
-        Utility.SimpleSelectionMixin.call(this, true);
-    }
-
-    bulletData() {
-        const context = this;
-        this._hiddenColumns = {};
-        const columns = this.columns();
-        return this.data().map(function (row) {
-            return {
-                title: valueOf(row, this.titleColumn()),
-                subtitle: valueOf(row, this.subtitleColumn()),
-                ranges: valueOf(row, this.rangesColumn(), "range"),
-                measures: valueOf(row, this.measuresColumn(), "measure"),
-                markers: valueOf(row, this.markersColumn(), "marker"),
-                origRow: row
-            };
-        }, this);
-
-        function valueOf(row, column, columnType?) {
-            const colIdx = columns.indexOf(column);
-            if (colIdx >= 0) {
-                if (row[colIdx] instanceof Array) {
-                    return row[colIdx];
-                }
-                return [row[colIdx]];
-            }
-            if (columnType) {
-                context._hiddenColumns[columnType] = true;
-            }
-            return [0];
-        }
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        d3Select(domNode.parentNode).style("overflow", "auto");
-        this._selection.widgetElement(element);
-    }
-
-    update(_domNode, element) {
-        super.update(_domNode, element);
-        const context = this;
-
-        element.selectAll(".axis")
-            .style("display", "none")
-            ;
-        element.selectAll(".range,.measure,.marker")
-            .style("display", null)
-            ;
-
-        const margin = { left: 2, top: 8, right: 2, bottom: 8 };
-        const width = this.width() - margin.left - margin.right;
-        const height = 40 - margin.top - margin.bottom;
-
-        const svg = element.selectAll("svg").data(this.bulletData());
-        const svgUpdate = svg.enter().append("svg")
-            .attr("class", "bullet")
-            .call(this._selection.enter.bind(this._selection))
-            .on("click", function (d) {
-                context.click(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
-            })
-            .on("dblclick", function (d) {
-                context.dblclick(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
-            })
-            .each(function () {
-                const element2 = d3Select(this);
-                const bulletBar = element2.append("g")
-                    .attr("class", (d, i) => "bulletBar series series-" + context.cssTag(context.titleColumn()))
-                    ;
-                const bulletTitle = bulletBar.append("g")
-                    .attr("class", "bulletTitle")
-                    ;
-                bulletTitle.append("text")
-                    .attr("class", "title")
-                    ;
-                bulletTitle.append("text")
-                    .attr("class", "subtitle")
-                    .attr("dy", "1em")
-                    ;
-            })
-            .merge(svg)
-            ;
-
-        //  Title ---
-        const title = svgUpdate.select(".bulletTitle")
-            .style("text-anchor", "end")
-            .attr("transform", "translate(-6," + height / 2 + ")")
-            ;
-        title.select(".title")
-            .text(function (d) { return d.title; })
-            ;
-        title.select(".subtitle")
-            .text(function (d) { return d.subtitle; })
-            ;
-
-        let titleWidth = 0;
-        title.each(function () {
-            const bbox = this.getBBox();
-            if (bbox.width > titleWidth) {
-                titleWidth = bbox.width;
-            }
-        });
-
-        //  Bullet Chart ---
-        const chart = d3Bullet()
-            .width(width - titleWidth - 6)
-            .height(height)
-            ;
-        svgUpdate
-            .attr("width", width)
-            .attr("height", height + margin.top + margin.bottom)
-            .style("margin-left", `${margin.left}px`)
-            ;
-        svgUpdate.select(".bulletBar")
-            .attr("transform", "translate(" + (titleWidth + 6) + "," + margin.top + ")")
-            .call(chart)
-            ;
-
-        svg.exit().remove();
-
-        if (Object.keys(this._hiddenColumns).length > 0) {
-            element.selectAll(`.${Object.keys(this._hiddenColumns).join(",.")}`)
-                .style("display", "none")
-                ;
-        }
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    //  Events ---
-    click(row, column, selected) {
-        // console.log("Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
-    }
-
-    dblclick(row, column, selected) {
-        // console.log("Double click:  " + JSON.stringify(row) + ", " + column + "," + selected);
-    }
-
-    //  SimpleSelectionMixin
-    _selection;
-}
-Bullet.prototype._class += " chart_Bullet";
-
-export interface Bullet {
-    titleColumn(): string;
-    titleColumn(_: string): this;
-    subtitleColumn(): string;
-    subtitleColumn(_: string): this;
-    rangesColumn(): string;
-    rangesColumn(_: string): this;
-    measuresColumn(): string;
-    measuresColumn(_: string): this;
-    markersColumn(): string;
-    markersColumn(_: string): this;
-}
-
-Bullet.prototype.publish("titleColumn", null, "set", "Title Column", function () { return this.columns(); }, { optional: true });
-Bullet.prototype.publish("subtitleColumn", null, "set", "Subtitle Column", function () { return this.columns(); }, { optional: true });
-Bullet.prototype.publish("rangesColumn", null, "set", "Ranges Column", function () { return this.columns(); }, { optional: true });
-Bullet.prototype.publish("measuresColumn", null, "set", "Measures Column", function () { return this.columns(); }, { optional: true });
-Bullet.prototype.publish("markersColumn", null, "set", "Markers Column", function () { return this.columns(); }, { optional: true });
-
+import { HTMLWidget, Utility } from "@hpcc-js/common";
+import { select as d3Select } from "d3-selection";
+import { bullet as d3Bullet } from "d3v4-bullet";
+
+import "../src/Bullet.css";
+
+export class Bullet extends HTMLWidget {
+
+    private _hiddenColumns = {};
+
+    constructor() {
+        super();
+        Utility.SimpleSelectionMixin.call(this, true);
+    }
+
+    bulletData() {
+        const context = this;
+        this._hiddenColumns = {};
+        const columns = this.columns();
+        return this.data().map(function (row) {
+            return {
+                title: valueOf(row, this.titleColumn()),
+                subtitle: valueOf(row, this.subtitleColumn()),
+                ranges: valueOf(row, this.rangesColumn(), "range"),
+                measures: valueOf(row, this.measuresColumn(), "measure"),
+                markers: valueOf(row, this.markersColumn(), "marker"),
+                origRow: row
+            };
+        }, this);
+
+        function valueOf(row, column, columnType?) {
+            const colIdx = columns.indexOf(column);
+            if (colIdx >= 0) {
+                if (row[colIdx] instanceof Array) {
+                    return row[colIdx];
+                }
+                return [row[colIdx]];
+            }
+            if (columnType) {
+                context._hiddenColumns[columnType] = true;
+            }
+            return [0];
+        }
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        d3Select(domNode.parentNode).style("overflow", "auto");
+        this._selection.widgetElement(element);
+    }
+
+    update(_domNode, element) {
+        super.update(_domNode, element);
+        const context = this;
+
+        element.selectAll(".axis")
+            .style("display", "none")
+            ;
+        element.selectAll(".range,.measure,.marker")
+            .style("display", null)
+            ;
+
+        const margin = { left: 2, top: 8, right: 2, bottom: 8 };
+        const width = this.width() - margin.left - margin.right;
+        const height = 40 - margin.top - margin.bottom;
+
+        const svg = element.selectAll("svg").data(this.bulletData());
+        const svgUpdate = svg.enter().append("svg")
+            .attr("class", "bullet")
+            .call(this._selection.enter.bind(this._selection))
+            .on("click", function (d) {
+                context.click(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
+            })
+            .on("dblclick", function (d) {
+                context.dblclick(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
+            })
+            .each(function () {
+                const element2 = d3Select(this);
+                const bulletBar = element2.append("g")
+                    .attr("class", (d, i) => "bulletBar series series-" + context.cssTag(context.titleColumn()))
+                    ;
+                const bulletTitle = bulletBar.append("g")
+                    .attr("class", "bulletTitle")
+                    ;
+                bulletTitle.append("text")
+                    .attr("class", "title")
+                    ;
+                bulletTitle.append("text")
+                    .attr("class", "subtitle")
+                    .attr("dy", "1em")
+                    ;
+            })
+            .merge(svg)
+            ;
+
+        //  Title ---
+        const title = svgUpdate.select(".bulletTitle")
+            .style("text-anchor", "end")
+            .attr("transform", "translate(-6," + height / 2 + ")")
+            ;
+        title.select(".title")
+            .text(function (d) { return d.title; })
+            ;
+        title.select(".subtitle")
+            .text(function (d) { return d.subtitle; })
+            ;
+
+        let titleWidth = 0;
+        title.each(function () {
+            const bbox = this.getBBox();
+            if (bbox.width > titleWidth) {
+                titleWidth = bbox.width;
+            }
+        });
+
+        //  Bullet Chart ---
+        const chart = d3Bullet()
+            .width(width - titleWidth - 6)
+            .height(height)
+            ;
+        svgUpdate
+            .attr("width", width)
+            .attr("height", height + margin.top + margin.bottom)
+            .style("margin-left", `${margin.left}px`)
+            ;
+        svgUpdate.select(".bulletBar")
+            .attr("transform", "translate(" + (titleWidth + 6) + "," + margin.top + ")")
+            .call(chart)
+            ;
+
+        svg.exit().remove();
+
+        if (Object.keys(this._hiddenColumns).length > 0) {
+            element.selectAll(`.${Object.keys(this._hiddenColumns).join(",.")}`)
+                .style("display", "none")
+                ;
+        }
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    //  Events ---
+    click(row, column, selected) {
+        // console.log("Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
+    }
+
+    dblclick(row, column, selected) {
+        // console.log("Double click:  " + JSON.stringify(row) + ", " + column + "," + selected);
+    }
+
+    //  SimpleSelectionMixin
+    _selection;
+}
+Bullet.prototype._class += " chart_Bullet";
+
+export interface Bullet {
+    titleColumn(): string;
+    titleColumn(_: string): this;
+    subtitleColumn(): string;
+    subtitleColumn(_: string): this;
+    rangesColumn(): string;
+    rangesColumn(_: string): this;
+    measuresColumn(): string;
+    measuresColumn(_: string): this;
+    markersColumn(): string;
+    markersColumn(_: string): this;
+}
+
+Bullet.prototype.publish("titleColumn", null, "set", "Title Column", function () { return this.columns(); }, { optional: true });
+Bullet.prototype.publish("subtitleColumn", null, "set", "Subtitle Column", function () { return this.columns(); }, { optional: true });
+Bullet.prototype.publish("rangesColumn", null, "set", "Ranges Column", function () { return this.columns(); }, { optional: true });
+Bullet.prototype.publish("measuresColumn", null, "set", "Measures Column", function () { return this.columns(); }, { optional: true });
+Bullet.prototype.publish("markersColumn", null, "set", "Markers Column", function () { return this.columns(); }, { optional: true });
+

package/src/Column.css

@@ -1,45 +1,45 @@
-.chart_Column .columnRect {
-    fill: steelblue;
-    cursor: pointer;
-}
-
-.chart_Column .data.axis path {
-    display: none;
-}
-
-.chart_Column .columnRect {
-    stroke: transparent;
-    border-width: 2px;
-}
-
-.chart_Column .dataCell.selected .columnRect {
-    stroke: #dc3545 !important;
-    stroke-width: 3px !important;
-    paint-order: fill stroke !important;
-    transition: all 0.2s ease;
-}
-
-.chart_Column .dataCell:hover .columnRect {
-    stroke: rgba(108, 117, 125, 0.6);
-    stroke-width: 2px;
-    filter: brightness(1.05);
-}
-
-.chart_Column .dataCell:focus .columnRect {
-    stroke: #007bff !important;
-    stroke-width: 3px !important;
-    paint-order: fill stroke !important;
-    transition: all 0.2s ease;
-}
-
-.chart_Column .dataCell.selected:focus .columnRect {
-    stroke: #6f42c1 !important;
-}
-
-.chart_Column .dataCell:focus-visible {
-    outline: none;
-}
-
-.chart_Column .dataCell:active {
-    outline: none !important;
+.chart_Column .columnRect {
+    fill: steelblue;
+    cursor: pointer;
+}
+
+.chart_Column .data.axis path {
+    display: none;
+}
+
+.chart_Column .columnRect {
+    stroke: transparent;
+    border-width: 2px;
+}
+
+.chart_Column .dataCell.selected .columnRect {
+    stroke: #dc3545 !important;
+    stroke-width: 3px !important;
+    paint-order: fill stroke !important;
+    transition: all 0.2s ease;
+}
+
+.chart_Column .dataCell:hover .columnRect {
+    stroke: rgba(108, 117, 125, 0.6);
+    stroke-width: 2px;
+    filter: brightness(1.05);
+}
+
+.chart_Column .dataCell:focus .columnRect {
+    stroke: #007bff !important;
+    stroke-width: 3px !important;
+    paint-order: fill stroke !important;
+    transition: all 0.2s ease;
+}
+
+.chart_Column .dataCell.selected:focus .columnRect {
+    stroke: #6f42c1 !important;
+}
+
+.chart_Column .dataCell:focus-visible {
+    outline: none;
+}
+
+.chart_Column .dataCell:active {
+    outline: none !important;
 }