@hpcc-js/chart 3.7.2 → 3.7.4

package/src/HexBin.md

@@ -1,88 +1,88 @@
-# HexBin
-
-<!--meta
-
--->
-
-HexBin and [Contour](./Contour.md) serve a similar purpose. They summarize high density data across two continuous axes.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { HexBin } from "@hpcc-js/chart";
-
-      new HexBin()
-          .target("placeholder")
-          .columns(["X-Value", "Y-Value"])
-          .data(randomData(1000))
-          .xAxisType("linear")
-          .render()
-          ;
-
-      function randomData(count){
-          return Array(count).fill(1).map((n,x)=>{
-              const y = Math.sqrt(x) * Math.random();
-              return [x,y];
-          });
-      }
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-_binSize_ can be used to set the size of the hexagon bins. The results can be seen in the below example.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { HexBin } from "@hpcc-js/chart";
-
-      let binSize = 5;
-
-      const widget = new HexBin()
-          .target("placeholder")
-          .columns(["X-Value", "Y-Value"])
-          .data(randomData(1000))
-          .xAxisType("linear")
-          .xAxisTickCount(10)
-          .binSize(binSize)
-          .render()
-          ;
-
-      function randomData(count){
-          return Array(count).fill(1).map((n,x)=>{
-              const y = Math.sqrt(x) * Math.random();
-              return [x,y];
-          });
-      }
-      let interval = 5;
-      setInterval(function(){
-          const next = binSize + interval;
-          if(next > 20 || next <= 0){
-              interval *= -1;
-          }
-          binSize += interval;
-          widget
-              .xAxisTitle("binSize = " + binSize)
-              .binSize(binSize)
-              .render()
-              ;
-      },1000);
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-For documentation on axis-specific properties take a look at the [Axis Documentation](./XYAxis.md).
-
-## API
-
-## Published Properties
-```@hpcc-js/chart:HexBin
-```
+# HexBin
+
+<!--meta
+
+-->
+
+HexBin and [Contour](./Contour.md) serve a similar purpose. They summarize high density data across two continuous axes.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { HexBin } from "@hpcc-js/chart";
+
+      new HexBin()
+          .target("placeholder")
+          .columns(["X-Value", "Y-Value"])
+          .data(randomData(1000))
+          .xAxisType("linear")
+          .render()
+          ;
+
+      function randomData(count){
+          return Array(count).fill(1).map((n,x)=>{
+              const y = Math.sqrt(x) * Math.random();
+              return [x,y];
+          });
+      }
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+_binSize_ can be used to set the size of the hexagon bins. The results can be seen in the below example.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { HexBin } from "@hpcc-js/chart";
+
+      let binSize = 5;
+
+      const widget = new HexBin()
+          .target("placeholder")
+          .columns(["X-Value", "Y-Value"])
+          .data(randomData(1000))
+          .xAxisType("linear")
+          .xAxisTickCount(10)
+          .binSize(binSize)
+          .render()
+          ;
+
+      function randomData(count){
+          return Array(count).fill(1).map((n,x)=>{
+              const y = Math.sqrt(x) * Math.random();
+              return [x,y];
+          });
+      }
+      let interval = 5;
+      setInterval(function(){
+          const next = binSize + interval;
+          if(next > 20 || next <= 0){
+              interval *= -1;
+          }
+          binSize += interval;
+          widget
+              .xAxisTitle("binSize = " + binSize)
+              .binSize(binSize)
+              .render()
+              ;
+      },1000);
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+For documentation on axis-specific properties take a look at the [Axis Documentation](./XYAxis.md).
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:HexBin
+```

package/src/HexBin.ts

@@ -1,144 +1,144 @@
-import { I2DAggrChart, ITooltip } from "@hpcc-js/api";
-import { InputField } from "@hpcc-js/common";
-import { extent as d3Extent, max as d3Max, min as d3Min } from "d3-array";
-import { hexbin as d3HexBin } from "d3-hexbin";
-import { XYAxis } from "./XYAxis.ts";
-
-import "../src/HexBin.css";
-
-export class HexBin extends XYAxis {
-    static __inputs: InputField[] = [{
-        id: "x",
-        type: "any"
-    }, {
-        id: "y",
-        type: "number"
-    }];
-
-    protected _hexbin;
-    protected _dataMinWeight;
-    protected _dataMaxWeight;
-    constructor() {
-        super();
-        I2DAggrChart.call(this);
-        this.tooltipValueFormat_default(",.0f");
-        ITooltip.call(this);
-        this.tooltipHTML(d => {
-            const seriesExtent = d3Extent<{ label: any, value: any }>(d, d => d.label);
-            const labelExtent = d3Extent<{ label: any, value: any }>(d, d => d.value);
-            return this.tooltipFormat({
-                series: seriesExtent[0] === seriesExtent[1] ? seriesExtent[0] : `${seriesExtent[0]} -> ${seriesExtent[1]}`,
-                label: labelExtent[0] === labelExtent[1] ? labelExtent[0] : `${labelExtent[0]} -> ${labelExtent[1]}`,
-                value: d.length
-            });
-        });
-        this._hexbin = d3HexBin()
-            .x(d => d.x)
-            .y(d => d.y)
-            ;
-        this
-            .xAxisGuideLines_default(false)
-            .yAxisGuideLines_default(false)
-            .xAxisType_default("linear")
-            ;
-    }
-
-    xPos(host: XYAxis, d) {
-        return host.orientation() === "horizontal" ? host.dataPos(d.label) : host.valuePos(d.value);
-    }
-
-    yPos(host: XYAxis, d) {
-        return host.orientation() === "horizontal" ? host.valuePos(d.value) : host.dataPos(d.label);
-    }
-
-    layerUpdate(host: XYAxis, element, duration: number = 250) {
-        super.layerUpdate(host, element, duration);
-        const context = this;
-
-        this._palette = this._palette.switch(this.paletteID());
-        if (this.useClonedPalette()) {
-            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
-        }
-
-        this._hexbin
-            .extent([0, 0], [this.width(), this.height()])
-            .radius(this.binSize())
-            ;
-
-        const flatData = this.flattenData();
-        const dataPoints = flatData.map(d => {
-            return {
-                x: context.xPos(host, d),
-                y: context.yPos(host, d),
-                label: host.parseData(d.label),
-                value: host.parseValue(d.value),
-                origRow: d
-            };
-        });
-        const hexBinPoints = this._hexbin(dataPoints);
-        const minBinPoints = d3Min(hexBinPoints, function (d: any) { return d.length; });
-        const maxBinPoints = d3Max(hexBinPoints, function (d: any) { return d.length; });
-        this._dataMinWeight = minBinPoints;
-        this._dataMaxWeight = maxBinPoints;
-
-        const points = element.selectAll(".hexagon").data(hexBinPoints, function (d) { return d.i + "_" + d.j; });
-        points.enter().append("path")
-            .attr("class", "hexagon")
-            .call(host._selection.enter.bind(host._selection))
-            .on("click", function (d: any) {
-                const data = context.data();
-                context.click(d.map(row => host.rowToObj(data[row.origRow.rowIdx])), context.columns()[1], host._selection.selected(this));
-            })
-            .on("dblclick", function (d: any) {
-                const data = context.data();
-                context.dblclick(d.map(row => host.rowToObj(data[row.origRow.rowIdx])), context.columns()[1], host._selection.selected(this));
-            })
-            .on("mouseout.tooltip", context.tooltip.hide)
-            .on("mousemove.tooltip", context.tooltip.show)
-            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")scale(0)"; })
-            .merge(points).transition().duration(duration)
-            .attr("d", this._hexbin.hexagon())
-            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")scale(1)"; })
-            .style("fill", function (d) { return context._palette(d.length, minBinPoints, maxBinPoints); })
-            ;
-        points.exit().transition().duration(duration)
-            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")scale(0)"; })
-            .remove()
-            ;
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    //  Events  ---
-    click(row: object[], column, selected) {
-        // console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
-    }
-    dblclick(row: object[], column, selected) {
-        // console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
-    }
-}
-HexBin.prototype._class += " chart_HexBin";
-HexBin.prototype.implements(I2DAggrChart.prototype);
-HexBin.prototype.implements(ITooltip.prototype);
-
-export interface HexBin {
-    //  ITooltip
-    tooltip;
-    tooltipHTML(_): string;
-    tooltipFormat(_): string;
-    tooltipValueFormat(_): string;
-    tooltipValueFormat_default(_): string;
-
-    paletteID(): string;
-    paletteID(_: string): this;
-    useClonedPalette(): boolean;
-    useClonedPalette(_: boolean): this;
-    binSize(): number;
-    binSize(_: number): this;
-}
-
-HexBin.prototype.publish("paletteID", "Blues", "set", "Color palette for this widget", HexBin.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
-HexBin.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
-HexBin.prototype.publish("binSize", 20, "number", "Bin radius", null, { range: { min: 1, max: 300, step: 1 } });
+import { I2DAggrChart, ITooltip } from "@hpcc-js/api";
+import { InputField } from "@hpcc-js/common";
+import { extent as d3Extent, max as d3Max, min as d3Min } from "d3-array";
+import { hexbin as d3HexBin } from "d3-hexbin";
+import { XYAxis } from "./XYAxis.ts";
+
+import "../src/HexBin.css";
+
+export class HexBin extends XYAxis {
+    static __inputs: InputField[] = [{
+        id: "x",
+        type: "any"
+    }, {
+        id: "y",
+        type: "number"
+    }];
+
+    protected _hexbin;
+    protected _dataMinWeight;
+    protected _dataMaxWeight;
+    constructor() {
+        super();
+        I2DAggrChart.call(this);
+        this.tooltipValueFormat_default(",.0f");
+        ITooltip.call(this);
+        this.tooltipHTML(d => {
+            const seriesExtent = d3Extent<{ label: any, value: any }>(d, d => d.label);
+            const labelExtent = d3Extent<{ label: any, value: any }>(d, d => d.value);
+            return this.tooltipFormat({
+                series: seriesExtent[0] === seriesExtent[1] ? seriesExtent[0] : `${seriesExtent[0]} -> ${seriesExtent[1]}`,
+                label: labelExtent[0] === labelExtent[1] ? labelExtent[0] : `${labelExtent[0]} -> ${labelExtent[1]}`,
+                value: d.length
+            });
+        });
+        this._hexbin = d3HexBin()
+            .x(d => d.x)
+            .y(d => d.y)
+            ;
+        this
+            .xAxisGuideLines_default(false)
+            .yAxisGuideLines_default(false)
+            .xAxisType_default("linear")
+            ;
+    }
+
+    xPos(host: XYAxis, d) {
+        return host.orientation() === "horizontal" ? host.dataPos(d.label) : host.valuePos(d.value);
+    }
+
+    yPos(host: XYAxis, d) {
+        return host.orientation() === "horizontal" ? host.valuePos(d.value) : host.dataPos(d.label);
+    }
+
+    layerUpdate(host: XYAxis, element, duration: number = 250) {
+        super.layerUpdate(host, element, duration);
+        const context = this;
+
+        this._palette = this._palette.switch(this.paletteID());
+        if (this.useClonedPalette()) {
+            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
+        }
+
+        this._hexbin
+            .extent([0, 0], [this.width(), this.height()])
+            .radius(this.binSize())
+            ;
+
+        const flatData = this.flattenData();
+        const dataPoints = flatData.map(d => {
+            return {
+                x: context.xPos(host, d),
+                y: context.yPos(host, d),
+                label: host.parseData(d.label),
+                value: host.parseValue(d.value),
+                origRow: d
+            };
+        });
+        const hexBinPoints = this._hexbin(dataPoints);
+        const minBinPoints = d3Min(hexBinPoints, function (d: any) { return d.length; });
+        const maxBinPoints = d3Max(hexBinPoints, function (d: any) { return d.length; });
+        this._dataMinWeight = minBinPoints;
+        this._dataMaxWeight = maxBinPoints;
+
+        const points = element.selectAll(".hexagon").data(hexBinPoints, function (d) { return d.i + "_" + d.j; });
+        points.enter().append("path")
+            .attr("class", "hexagon")
+            .call(host._selection.enter.bind(host._selection))
+            .on("click", function (d: any) {
+                const data = context.data();
+                context.click(d.map(row => host.rowToObj(data[row.origRow.rowIdx])), context.columns()[1], host._selection.selected(this));
+            })
+            .on("dblclick", function (d: any) {
+                const data = context.data();
+                context.dblclick(d.map(row => host.rowToObj(data[row.origRow.rowIdx])), context.columns()[1], host._selection.selected(this));
+            })
+            .on("mouseout.tooltip", context.tooltip.hide)
+            .on("mousemove.tooltip", context.tooltip.show)
+            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")scale(0)"; })
+            .merge(points).transition().duration(duration)
+            .attr("d", this._hexbin.hexagon())
+            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")scale(1)"; })
+            .style("fill", function (d) { return context._palette(d.length, minBinPoints, maxBinPoints); })
+            ;
+        points.exit().transition().duration(duration)
+            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")scale(0)"; })
+            .remove()
+            ;
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    //  Events  ---
+    click(row: object[], column, selected) {
+        // console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
+    }
+    dblclick(row: object[], column, selected) {
+        // console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
+    }
+}
+HexBin.prototype._class += " chart_HexBin";
+HexBin.prototype.implements(I2DAggrChart.prototype);
+HexBin.prototype.implements(ITooltip.prototype);
+
+export interface HexBin {
+    //  ITooltip
+    tooltip;
+    tooltipHTML(_): string;
+    tooltipFormat(_): string;
+    tooltipValueFormat(_): string;
+    tooltipValueFormat_default(_): string;
+
+    paletteID(): string;
+    paletteID(_: string): this;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+    binSize(): number;
+    binSize(_: number): this;
+}
+
+HexBin.prototype.publish("paletteID", "Blues", "set", "Color palette for this widget", HexBin.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
+HexBin.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
+HexBin.prototype.publish("binSize", 20, "number", "Bin radius", null, { range: { min: 1, max: 300, step: 1 } });

package/src/Line.css

@@ -1,5 +1,5 @@
-.chart_Line .dataLine {
-  fill: none;
-  stroke: steelblue;
-  stroke-width: 1.5px;
+.chart_Line .dataLine {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
 }