@hpcc-js/chart 3.7.2 → 3.7.4

package/src/Contour.md

@@ -1,88 +1,88 @@
-# Contour
-
-<!--meta
-
--->
-
-Contour and [HexBin](./HexBin.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 { Contour } from "@hpcc-js/chart";
-
-      new Contour()
-          .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>
-
-
-_contourBandwidth_ can be used to control the standard deviation of the contour algorithm. 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 { Contour } from "@hpcc-js/chart";
-
-      let bandwidth = 10;
-
-      const widget = new Contour()
-          .target("placeholder")
-          .columns(["X-Value", "Y-Value"])
-          .data(randomData(1000))
-          .xAxisType("linear")
-          .xAxisTickCount(10)
-          .contourBandwidth(bandwidth)
-          .render()
-          ;
-
-      function randomData(count){
-          return Array(count).fill(1).map((n,x)=>{
-              const y = Math.sqrt(x) * Math.random();
-              return [x,y];
-          });
-      }
-      let interval = 10;
-      setInterval(function(){
-          const next = bandwidth + interval;
-          if(next > 100 || next <= 0){
-              interval *= -1;
-          }
-          bandwidth += interval;
-          widget
-              .xAxisTitle("bandwidth = " + bandwidth)
-              .contourBandwidth(bandwidth)
-              .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:Contour
-```
+# Contour
+
+<!--meta
+
+-->
+
+Contour and [HexBin](./HexBin.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 { Contour } from "@hpcc-js/chart";
+
+      new Contour()
+          .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>
+
+
+_contourBandwidth_ can be used to control the standard deviation of the contour algorithm. 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 { Contour } from "@hpcc-js/chart";
+
+      let bandwidth = 10;
+
+      const widget = new Contour()
+          .target("placeholder")
+          .columns(["X-Value", "Y-Value"])
+          .data(randomData(1000))
+          .xAxisType("linear")
+          .xAxisTickCount(10)
+          .contourBandwidth(bandwidth)
+          .render()
+          ;
+
+      function randomData(count){
+          return Array(count).fill(1).map((n,x)=>{
+              const y = Math.sqrt(x) * Math.random();
+              return [x,y];
+          });
+      }
+      let interval = 10;
+      setInterval(function(){
+          const next = bandwidth + interval;
+          if(next > 100 || next <= 0){
+              interval *= -1;
+          }
+          bandwidth += interval;
+          widget
+              .xAxisTitle("bandwidth = " + bandwidth)
+              .contourBandwidth(bandwidth)
+              .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:Contour
+```

package/src/Contour.ts

@@ -1,97 +1,97 @@
-import { I1DChart } from "@hpcc-js/api";
-import { InputField } from "@hpcc-js/common";
-import { contourDensity as d3ContourDensity } from "d3-contour";
-import { geoPath } from "d3-geo";
-import { XYAxis } from "./XYAxis.ts";
-
-export class Contour extends XYAxis {
-    static __inputs: InputField[] = [{
-        id: "x",
-        type: "any"
-    }, {
-        id: "y",
-        type: "number"
-    }];
-
-    protected _dataMinWeight;
-    protected _dataMaxWeight;
-    constructor() {
-        super();
-        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);
-    }
-
-    layerEnter(host: XYAxis, element, duration: number = 250) {
-        super.layerEnter(host, element, duration);
-    }
-
-    layerUpdate(host: XYAxis, element, duration: number = 250) {
-        super.layerUpdate(host, element, duration);
-
-        this._palette = this._palette.switch(this.paletteID());
-
-        const data = this.flattenData(this.layerColumns(host), this.layerData(host));
-        const contourData = d3ContourDensity()
-            .x(d => this.xPos(host, d))
-            .y(d => this.yPos(host, d))
-            .size([this.width(), this.height()])
-            .bandwidth(this.contourBandwidth())(data)
-            ;
-        const _vals = contourData.map(d => d.value);
-        const minValue = Math.min.apply(this, _vals);
-        const maxValue = Math.max.apply(this, _vals);
-        this._dataMinWeight = minValue;
-        this._dataMaxWeight = maxValue;
-        const lines = element.selectAll("path").data(contourData);
-        lines.enter().append("path")
-            .merge(lines)
-            .attr("d", geoPath())
-            .attr("fill", d => this.showContourFill() ? this._palette(d.value, minValue, maxValue) : "none")
-            .attr("stroke", this.contourStrokeColor())
-            .attr("stroke-linejoin", "round")
-            .attr("stroke-width", this.contourStrokeWidth())
-            ;
-        lines.exit().remove();
-    }
-
-    exit(_domNode, _element) {
-        super.exit(_domNode, _element);
-    }
-}
-Contour.prototype._class += " chart_Contour";
-Contour.prototype.implements(I1DChart.prototype);
-
-export interface Contour {
-    paletteID(): string;
-    paletteID(_: string): this;
-    useClonedPalette(): boolean;
-    useClonedPalette(_: boolean): this;
-    showContourFill(): boolean;
-    showContourFill(_: boolean): this;
-    showContour(): boolean;
-    showContour(_: boolean): this;
-    contourBandwidth(): number;
-    contourBandwidth(_: number): this;
-    contourStrokeColor(): string;
-    contourStrokeColor(_: string): this;
-    contourStrokeWidth(): number;
-    contourStrokeWidth(_: number): this;
-}
-Contour.prototype.publish("paletteID", "YlGnBu", "string", "Color palette for this widget");
-Contour.prototype.publish("useClonedPalette", true, "boolean", "Enable or disable using a cloned palette");
-Contour.prototype.publish("showContourFill", true, "boolean", "Show/hide the contour background colors");
-Contour.prototype.publish("showContour", true, "boolean", "Show/hide the contour border lines");
-Contour.prototype.publish("contourBandwidth", 40, "number", "Controls the sensitivity of the contour grouping algorithm");
-Contour.prototype.publish("contourStrokeColor", "#2C3A47", "html-color", "Color of the contour border lines");
-Contour.prototype.publish("contourStrokeWidth", 1, "number", "Width of the contour border lines");
+import { I1DChart } from "@hpcc-js/api";
+import { InputField } from "@hpcc-js/common";
+import { contourDensity as d3ContourDensity } from "d3-contour";
+import { geoPath } from "d3-geo";
+import { XYAxis } from "./XYAxis.ts";
+
+export class Contour extends XYAxis {
+    static __inputs: InputField[] = [{
+        id: "x",
+        type: "any"
+    }, {
+        id: "y",
+        type: "number"
+    }];
+
+    protected _dataMinWeight;
+    protected _dataMaxWeight;
+    constructor() {
+        super();
+        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);
+    }
+
+    layerEnter(host: XYAxis, element, duration: number = 250) {
+        super.layerEnter(host, element, duration);
+    }
+
+    layerUpdate(host: XYAxis, element, duration: number = 250) {
+        super.layerUpdate(host, element, duration);
+
+        this._palette = this._palette.switch(this.paletteID());
+
+        const data = this.flattenData(this.layerColumns(host), this.layerData(host));
+        const contourData = d3ContourDensity()
+            .x(d => this.xPos(host, d))
+            .y(d => this.yPos(host, d))
+            .size([this.width(), this.height()])
+            .bandwidth(this.contourBandwidth())(data)
+            ;
+        const _vals = contourData.map(d => d.value);
+        const minValue = Math.min.apply(this, _vals);
+        const maxValue = Math.max.apply(this, _vals);
+        this._dataMinWeight = minValue;
+        this._dataMaxWeight = maxValue;
+        const lines = element.selectAll("path").data(contourData);
+        lines.enter().append("path")
+            .merge(lines)
+            .attr("d", geoPath())
+            .attr("fill", d => this.showContourFill() ? this._palette(d.value, minValue, maxValue) : "none")
+            .attr("stroke", this.contourStrokeColor())
+            .attr("stroke-linejoin", "round")
+            .attr("stroke-width", this.contourStrokeWidth())
+            ;
+        lines.exit().remove();
+    }
+
+    exit(_domNode, _element) {
+        super.exit(_domNode, _element);
+    }
+}
+Contour.prototype._class += " chart_Contour";
+Contour.prototype.implements(I1DChart.prototype);
+
+export interface Contour {
+    paletteID(): string;
+    paletteID(_: string): this;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+    showContourFill(): boolean;
+    showContourFill(_: boolean): this;
+    showContour(): boolean;
+    showContour(_: boolean): this;
+    contourBandwidth(): number;
+    contourBandwidth(_: number): this;
+    contourStrokeColor(): string;
+    contourStrokeColor(_: string): this;
+    contourStrokeWidth(): number;
+    contourStrokeWidth(_: number): this;
+}
+Contour.prototype.publish("paletteID", "YlGnBu", "string", "Color palette for this widget");
+Contour.prototype.publish("useClonedPalette", true, "boolean", "Enable or disable using a cloned palette");
+Contour.prototype.publish("showContourFill", true, "boolean", "Show/hide the contour background colors");
+Contour.prototype.publish("showContour", true, "boolean", "Show/hide the contour border lines");
+Contour.prototype.publish("contourBandwidth", 40, "number", "Controls the sensitivity of the contour grouping algorithm");
+Contour.prototype.publish("contourStrokeColor", "#2C3A47", "html-color", "Color of the contour border lines");
+Contour.prototype.publish("contourStrokeWidth", 1, "number", "Width of the contour border lines");