@hpcc-js/chart 3.6.5 → 3.7.0

package/src/Line.md

@@ -1,170 +1,170 @@
-# Line
-
-<!--meta
-
--->
-
-Line, [Area](./Area.md), [Scatter](./Scatter.md) and [Step](./Step.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 { Line } from "@hpcc-js/chart";
-
-      new Line()
-          .target("placeholder")
-          .columns(["Category", "Value"])
-          .data([
-              ["A", 34],
-              ["B", 55],
-              ["C", 89],
-              ["D", 144]
-          ])
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-Line 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 { Line } from "@hpcc-js/chart";
-
-      new Line()
-          .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 { Line } from "@hpcc-js/chart";
-
-      new Line()
-          .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)
-          .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.
-
-_xAxisDomainPadding_ can be used to reserve a percentage of the left and right edges for white space.
-
-_showValue_ along with _valueBaseline("central")_ places the values at the center of each data point.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Line } from "@hpcc-js/chart";
-
-      new Line()
-          .target("placeholder")
-          .columns(["Value 1", "Value 2"])
-          .data([
-              [144, 90],
-              [89, 50],
-              [55, 75],
-              [34, 66]
-          ])
-          .paletteID("FlatUI_German")
-          .xAxisType("linear")
-          .xAxisDomainPadding(5)
-          .pointShape("rectangle")
-          .pointSize(20)
-          .pointDarken(false)
-          .showValue(true)
-          .valueBaseline("central")
-          .interpolate("monotone")
-          .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 { Line } from "@hpcc-js/chart";
-
-      new Line()
-          .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
-
-## Published Properties
-```@hpcc-js/chart:Line
-```
+# Line
+
+<!--meta
+
+-->
+
+Line, [Area](./Area.md), [Scatter](./Scatter.md) and [Step](./Step.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 { Line } from "@hpcc-js/chart";
+
+      new Line()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+Line 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 { Line } from "@hpcc-js/chart";
+
+      new Line()
+          .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 { Line } from "@hpcc-js/chart";
+
+      new Line()
+          .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)
+          .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.
+
+_xAxisDomainPadding_ can be used to reserve a percentage of the left and right edges for white space.
+
+_showValue_ along with _valueBaseline("central")_ places the values at the center of each data point.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Line } from "@hpcc-js/chart";
+
+      new Line()
+          .target("placeholder")
+          .columns(["Value 1", "Value 2"])
+          .data([
+              [144, 90],
+              [89, 50],
+              [55, 75],
+              [34, 66]
+          ])
+          .paletteID("FlatUI_German")
+          .xAxisType("linear")
+          .xAxisDomainPadding(5)
+          .pointShape("rectangle")
+          .pointSize(20)
+          .pointDarken(false)
+          .showValue(true)
+          .valueBaseline("central")
+          .interpolate("monotone")
+          .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 { Line } from "@hpcc-js/chart";
+
+      new Line()
+          .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
+
+## Published Properties
+```@hpcc-js/chart:Line
+```

package/src/Line.ts

@@ -1,14 +1,14 @@
-import { Scatter } from "./Scatter.ts";
-
-import "../src/Line.css";
-
-export class Line extends Scatter {
-    constructor() {
-        super();
-
-        this
-            .interpolate_default("linear")
-            ;
-    }
-}
-Line.prototype._class += " chart_Line";
+import { Scatter } from "./Scatter.ts";
+
+import "../src/Line.css";
+
+export class Line extends Scatter {
+    constructor() {
+        super();
+
+        this
+            .interpolate_default("linear")
+            ;
+    }
+}
+Line.prototype._class += " chart_Line";

package/src/Pie.css

@@ -1,51 +1,51 @@
-.chart_Pie path {
-    cursor: pointer;
-}
-
-.chart_Pie>g>text {
-    cursor: pointer;
-}
-
-.chart_Pie .arc path {
-    stroke: transparent;
-    stroke-width: 2px;
-}
-
-.chart_Pie .arc.selected path {
-    stroke: #dc3545 !important;
-    stroke-width: 3px !important;
-    paint-order: fill stroke !important;
-    transition: all 0.2s ease;
-}
-
-.chart_Pie polyline {
-    opacity: .3;
-    stroke: black;
-    stroke-width: 2px;
-    fill: none;
-}
-
-.chart_Pie .arc:hover path {
-    stroke: rgba(108, 117, 125, 0.6);
-    stroke-width: 2px;
-    filter: brightness(1.05);
-}
-
-.chart_Pie .arc:focus path {
-    stroke: #007bff !important;
-    stroke-width: 3px !important;
-    paint-order: fill stroke !important;
-    transition: all 0.2s ease;
-}
-
-.chart_Pie .arc.selected:focus path {
-    stroke: #6f42c1 !important;
-}
-
-.chart_Pie .arc:focus-visible {
-    outline: none;
-}
-
-.chart_Pie .arc:active {
-    outline: none !important;
+.chart_Pie path {
+    cursor: pointer;
+}
+
+.chart_Pie>g>text {
+    cursor: pointer;
+}
+
+.chart_Pie .arc path {
+    stroke: transparent;
+    stroke-width: 2px;
+}
+
+.chart_Pie .arc.selected path {
+    stroke: #dc3545 !important;
+    stroke-width: 3px !important;
+    paint-order: fill stroke !important;
+    transition: all 0.2s ease;
+}
+
+.chart_Pie polyline {
+    opacity: .3;
+    stroke: black;
+    stroke-width: 2px;
+    fill: none;
+}
+
+.chart_Pie .arc:hover path {
+    stroke: rgba(108, 117, 125, 0.6);
+    stroke-width: 2px;
+    filter: brightness(1.05);
+}
+
+.chart_Pie .arc:focus path {
+    stroke: #007bff !important;
+    stroke-width: 3px !important;
+    paint-order: fill stroke !important;
+    transition: all 0.2s ease;
+}
+
+.chart_Pie .arc.selected:focus path {
+    stroke: #6f42c1 !important;
+}
+
+.chart_Pie .arc:focus-visible {
+    outline: none;
+}
+
+.chart_Pie .arc:active {
+    outline: none !important;
 }

package/src/Pie.md

@@ -1,88 +1,88 @@
-# Pie
-
-<!--meta
-
--->
-
-A circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice, is proportional to the quantity it represents. (See also: [HalfPie](./HalfPie.md) and [QuarterPie](./QuarterPie.md) )
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Pie } from "@hpcc-js/chart";
-
-      new Pie()
-          .target("placeholder")
-          .columns(["Category", "Value"])
-          .data([
-              ["A", 34],
-              ["B", 55],
-              ["C", 89],
-              ["D", 144]
-          ])
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-In the below example the 'showSeriesValue' is used to display the value next to each slice label.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Pie } from "@hpcc-js/chart";
-
-      new Pie()
-          .target("placeholder")
-          .columns(["Category", "Value"])
-          .data([
-              ["A", 34],
-              ["B", 55],
-              ["C", 89],
-              ["D", 144]
-          ])
-          .showSeriesValue(true)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-In the below example the 'innerRadius' is used to transform the pie chart into a donut chart.
-'showSeriesPercentage' displays the percentage next to each slice label.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Pie } from "@hpcc-js/chart";
-
-      new Pie()
-          .target("placeholder")
-          .columns(["Category", "Value"])
-          .data([
-              ["A", 34],
-              ["B", 55],
-              ["C", 89],
-              ["D", 144]
-          ])
-          .innerRadius(62)
-          .showSeriesPercentage(true)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-## API
-
-## Published Properties
-
-```@hpcc-js/chart:Pie
-```
+# Pie
+
+<!--meta
+
+-->
+
+A circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice, is proportional to the quantity it represents. (See also: [HalfPie](./HalfPie.md) and [QuarterPie](./QuarterPie.md) )
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Pie } from "@hpcc-js/chart";
+
+      new Pie()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+In the below example the 'showSeriesValue' is used to display the value next to each slice label.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Pie } from "@hpcc-js/chart";
+
+      new Pie()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .showSeriesValue(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+In the below example the 'innerRadius' is used to transform the pie chart into a donut chart.
+'showSeriesPercentage' displays the percentage next to each slice label.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Pie } from "@hpcc-js/chart";
+
+      new Pie()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .innerRadius(62)
+          .showSeriesPercentage(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+
+```@hpcc-js/chart:Pie
+```