@hpcc-js/chart 3.7.2 → 3.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/chart",
-    "version": "3.7.2",
+    "version": "3.7.4",
     "description": "hpcc-js - Viz Chart",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -37,12 +37,12 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.4.13",
-        "@hpcc-js/common": "^3.7.3",
-        "@hpcc-js/util": "^3.5.2"
+        "@hpcc-js/api": "^3.4.15",
+        "@hpcc-js/common": "^3.7.5",
+        "@hpcc-js/util": "^3.5.4"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.8.5",
+        "@hpcc-js/esbuild-plugins": "^1.8.7",
         "@types/d3-shape": "1.3.12",
         "@types/d3-transition": "1.3.6",
         "d3-array": "^1",
@@ -76,5 +76,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "eab3a48367063ed368bdd82c05de6a822ee308aa"
+    "gitHead": "f8bdd58fc6914054a2313a87bbe1257dc9720545"
 }

package/src/Area.md

@@ -1,176 +1,176 @@
-# Area
-
-<!--meta
-
--->
-
-Area, [Line](./Line.md), [Step](./Step.md) and [Scatter](./Scatter.md) serve a similar purpose. They display continuous data along a categorical or continuous axis.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Area } from "@hpcc-js/chart";
-
-      new Area()
-          .target("placeholder")
-          .columns(["Category", "Value"])
-          .data([
-              ["A", 34],
-              ["B", 55],
-              ["C", 89],
-              ["D", 144]
-          ])
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-Area supports n-number of numeric values per data row. A series is created for each column as needed. 
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Area } from "@hpcc-js/chart";
-
-      new Area()
-          .target("placeholder")
-          .columns(["Category", "Value 1", "Value 2", "Value 3"])
-          .data([
-              ["A", 34, 90, 82],
-              ["B", 55, 50, 65],
-              ["C", 89, 75, 43],
-              ["D", 144, 66, 56]
-          ])
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-_pointShape_ can be used to specify the shape of each data point (see the property list below for potential values).
-
-_pointSize_ can be used to set the size of each data point's shape.
-
-_showValue_ specifies whether or not to display the value above each data point.
-
-_yAxisDomainPadding_ can be used to reserve a percentage of the top and bottom edges for white space.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Area } from "@hpcc-js/chart";
-
-      new Area()
-          .target("placeholder")
-          .columns(["Category", "Value", "Value 2"])
-          .data([
-              ["A", 34, 350],
-              ["B", 55, 380],
-              ["C", 89, 390],
-              ["D", 98, 410]
-          ])
-          .pointShape("circle")
-          .pointSize(2)
-          .showValue(true)
-          .yAxisDomainPadding(10)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-_interpolate_ can be used to specify which line interpolation mode is used to draw the connecting line between data points (see the property list below for potential values).
-
-_pointDarken_ can be set to 'false' to disable the slight darkening effect applied to each data point.
-
-_showValue_ along with _valueBaseline("central")_ places the values at the center of each data point.
-
-_xAxisDomainPadding_ can be used to reserve a percentage of the left and right edges for white space.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Area } from "@hpcc-js/chart";
-
-      new Area()
-          .target("placeholder")
-          .columns(["Value 1", "Value 2"])
-          .data([
-              [144, 90],
-              [89, 50],
-              [55, 75],
-              [34, 66]
-          ])
-          .paletteID("FlatUI_German")
-          .xAxisType("linear")
-          .pointShape("rectangle")
-          .pointSize(20)
-          .pointDarken(false)
-          .showValue(true)
-          .valueBaseline("central")
-          .xAxisDomainPadding(5)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-For documentation on axis-specific properties, like those used in the below example, take a look at the [Axis Documentation](./XYAxis.md).
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Area } from "@hpcc-js/chart";
-
-      new Area()
-          .target("placeholder")
-          .columns(["Value 1", "Value 2"])
-          .data([
-              [144, 90],
-              [89, 50],
-              [55, 75],
-              [34, 66]
-          ])
-          .xAxisType("linear")
-          .xAxisTitle("X-Axis Title")
-          .yAxisTitle("Y-Axis Title")
-          .xAxisTickCount(30)
-          .xAxisOverlapMode("rotate")
-          .xAxisLabelRotation(90)
-          .pointShape("circle")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-## API
-
-<!--meta:Area.target
-
--->
-
-## Published Properties
-```@hpcc-js/chart:Area
-```
+# Area
+
+<!--meta
+
+-->
+
+Area, [Line](./Line.md), [Step](./Step.md) and [Scatter](./Scatter.md) serve a similar purpose. They display continuous data along a categorical or continuous axis.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Area } from "@hpcc-js/chart";
+
+      new Area()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+Area supports n-number of numeric values per data row. A series is created for each column as needed. 
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Area } from "@hpcc-js/chart";
+
+      new Area()
+          .target("placeholder")
+          .columns(["Category", "Value 1", "Value 2", "Value 3"])
+          .data([
+              ["A", 34, 90, 82],
+              ["B", 55, 50, 65],
+              ["C", 89, 75, 43],
+              ["D", 144, 66, 56]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+_pointShape_ can be used to specify the shape of each data point (see the property list below for potential values).
+
+_pointSize_ can be used to set the size of each data point's shape.
+
+_showValue_ specifies whether or not to display the value above each data point.
+
+_yAxisDomainPadding_ can be used to reserve a percentage of the top and bottom edges for white space.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Area } from "@hpcc-js/chart";
+
+      new Area()
+          .target("placeholder")
+          .columns(["Category", "Value", "Value 2"])
+          .data([
+              ["A", 34, 350],
+              ["B", 55, 380],
+              ["C", 89, 390],
+              ["D", 98, 410]
+          ])
+          .pointShape("circle")
+          .pointSize(2)
+          .showValue(true)
+          .yAxisDomainPadding(10)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+_interpolate_ can be used to specify which line interpolation mode is used to draw the connecting line between data points (see the property list below for potential values).
+
+_pointDarken_ can be set to 'false' to disable the slight darkening effect applied to each data point.
+
+_showValue_ along with _valueBaseline("central")_ places the values at the center of each data point.
+
+_xAxisDomainPadding_ can be used to reserve a percentage of the left and right edges for white space.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Area } from "@hpcc-js/chart";
+
+      new Area()
+          .target("placeholder")
+          .columns(["Value 1", "Value 2"])
+          .data([
+              [144, 90],
+              [89, 50],
+              [55, 75],
+              [34, 66]
+          ])
+          .paletteID("FlatUI_German")
+          .xAxisType("linear")
+          .pointShape("rectangle")
+          .pointSize(20)
+          .pointDarken(false)
+          .showValue(true)
+          .valueBaseline("central")
+          .xAxisDomainPadding(5)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+For documentation on axis-specific properties, like those used in the below example, take a look at the [Axis Documentation](./XYAxis.md).
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Area } from "@hpcc-js/chart";
+
+      new Area()
+          .target("placeholder")
+          .columns(["Value 1", "Value 2"])
+          .data([
+              [144, 90],
+              [89, 50],
+              [55, 75],
+              [34, 66]
+          ])
+          .xAxisType("linear")
+          .xAxisTitle("X-Axis Title")
+          .yAxisTitle("Y-Axis Title")
+          .xAxisTickCount(30)
+          .xAxisOverlapMode("rotate")
+          .xAxisLabelRotation(90)
+          .pointShape("circle")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+## API
+
+<!--meta:Area.target
+
+-->
+
+## Published Properties
+```@hpcc-js/chart:Area
+```

package/src/Area.ts

@@ -1,12 +1,12 @@
-import { Scatter } from "./Scatter.ts";
-
-export class Area extends Scatter {
-    constructor() {
-        super();
-        this
-            .interpolate_default("linear")
-            .interpolateFill_default(true)
-            ;
-    }
-}
-Area.prototype._class += " chart_Area";
+import { Scatter } from "./Scatter.ts";
+
+export class Area extends Scatter {
+    constructor() {
+        super();
+        this
+            .interpolate_default("linear")
+            .interpolateFill_default(true)
+            ;
+    }
+}
+Area.prototype._class += " chart_Area";

package/src/Axis.css

@@ -1,36 +1,36 @@
-.chart_Axis {
-  fill: black;
-  font: 10px sans-serif;
-}
-
-.chart_Axis .axis .tick>text {
-  font: 10px sans-serif;
-}
-
-.chart_Axis .axis path.domain,
-.chart_Axis .axis .tick line {
-  fill: none;
-  stroke: black;
-}
-
-.chart_Axis .guide path.domain {
-  fill: none;
-  stroke: none;
-}
-
-.chart_Axis .guide .tick line {
-  fill: none;
-  stroke: lightgrey;
-  opacity: 0.7;
-}
-
-.chart_Axis .guide .tick.guide-0 line {
-  stroke: black;
-  stroke-width: 1;
-  stroke-dasharray: 3 5;
-}
-
-.chart_Axis line,
-.chart_Axis path {
-  shape-rendering: crispEdges;
+.chart_Axis {
+  fill: black;
+  font: 10px sans-serif;
+}
+
+.chart_Axis .axis .tick>text {
+  font: 10px sans-serif;
+}
+
+.chart_Axis .axis path.domain,
+.chart_Axis .axis .tick line {
+  fill: none;
+  stroke: black;
+}
+
+.chart_Axis .guide path.domain {
+  fill: none;
+  stroke: none;
+}
+
+.chart_Axis .guide .tick line {
+  fill: none;
+  stroke: lightgrey;
+  opacity: 0.7;
+}
+
+.chart_Axis .guide .tick.guide-0 line {
+  stroke: black;
+  stroke-width: 1;
+  stroke-dasharray: 3 5;
+}
+
+.chart_Axis line,
+.chart_Axis path {
+  shape-rendering: crispEdges;
 }