@hpcc-js/chart 3.7.4 → 3.7.6

package/src/Gantt.md

@@ -1,119 +1,119 @@
-# Gantt
-
-<!--meta
-
--->
-
-Gantt compares ranges of continuous data. Each range is represented by an array of two numeric values. The first column of each data row must contain a string or number to represent that row's category. Each additional column must contain an array of two numbers.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gantt } from "@hpcc-js/chart";
-
-      new Gantt()
-          .target("placeholder")
-          .columns(["Category", "Range"])
-          .data([
-              ["A", [34, 90]],
-              ["B", [55, 75]],
-              ["C", [75, 89]],
-              ["D", [66, 99]]
-          ])
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-Gantt also supports multiple ranges per data row.
-
-The _orientation_ is set to 'horizontal' by default so _yAxisTitle_ is used to assign the horizontal axis' label.
-
-_xAxisSeriesPaddingInner_ can be used to set the ratio between white space and bar size (per series).
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gantt } from "@hpcc-js/chart";
-
-      new Gantt()
-          .target("placeholder")
-          .columns(["State Changes", "Iron", "Aluminum", "Lead", "Gold"])
-          .data([
-              ["Solid", [0, 1811], [0, 933], [0, 600], [0,1337]],
-              ["Liquid", [1811, 3134], [933, 2743], [600, 2022], [1337, 3243]],
-              ["Gas", [3134, 5000], [2743, 5000], [2022, 5000], [3243, 5000]]
-          ])
-        .xAxisSeriesPaddingInner(0.3)
-          .yAxisTitle("Kelvin")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-It also supports duplicate category values.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gantt } from "@hpcc-js/chart";
-
-      new Gantt()
-          .target("placeholder")
-          .columns(["Category", "Range"])
-          .data([
-              ["A", [34, 90]],
-              ["B", [55, 75]],
-              ["A", [95, 120]],
-              ["B", [85, 175]]
-          ])
-          .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 { Gantt } from "@hpcc-js/chart";
-
-      new Gantt()
-          .target("placeholder")
-          .columns(["Project", "Date Range"])
-          .data([
-              ["Docs", ["2012-09-09", "2012-10-09"]],
-              ["Coding", ["2011-08-09", "2012-09-09"]],
-              ["Specs", ["2010-07-09", "2011-08-09"]]
-          ])
-          .yAxisType("time")
-          .yAxisTypeTimePattern("%Y-%m-%d")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-## API
-
-## Published Properties
-```@hpcc-js/chart:Gantt
-```
+# Gantt
+
+<!--meta
+
+-->
+
+Gantt compares ranges of continuous data. Each range is represented by an array of two numeric values. The first column of each data row must contain a string or number to represent that row's category. Each additional column must contain an array of two numbers.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gantt } from "@hpcc-js/chart";
+
+      new Gantt()
+          .target("placeholder")
+          .columns(["Category", "Range"])
+          .data([
+              ["A", [34, 90]],
+              ["B", [55, 75]],
+              ["C", [75, 89]],
+              ["D", [66, 99]]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+Gantt also supports multiple ranges per data row.
+
+The _orientation_ is set to 'horizontal' by default so _yAxisTitle_ is used to assign the horizontal axis' label.
+
+_xAxisSeriesPaddingInner_ can be used to set the ratio between white space and bar size (per series).
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gantt } from "@hpcc-js/chart";
+
+      new Gantt()
+          .target("placeholder")
+          .columns(["State Changes", "Iron", "Aluminum", "Lead", "Gold"])
+          .data([
+              ["Solid", [0, 1811], [0, 933], [0, 600], [0,1337]],
+              ["Liquid", [1811, 3134], [933, 2743], [600, 2022], [1337, 3243]],
+              ["Gas", [3134, 5000], [2743, 5000], [2022, 5000], [3243, 5000]]
+          ])
+        .xAxisSeriesPaddingInner(0.3)
+          .yAxisTitle("Kelvin")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+It also supports duplicate category values.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gantt } from "@hpcc-js/chart";
+
+      new Gantt()
+          .target("placeholder")
+          .columns(["Category", "Range"])
+          .data([
+              ["A", [34, 90]],
+              ["B", [55, 75]],
+              ["A", [95, 120]],
+              ["B", [85, 175]]
+          ])
+          .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 { Gantt } from "@hpcc-js/chart";
+
+      new Gantt()
+          .target("placeholder")
+          .columns(["Project", "Date Range"])
+          .data([
+              ["Docs", ["2012-09-09", "2012-10-09"]],
+              ["Coding", ["2011-08-09", "2012-09-09"]],
+              ["Specs", ["2010-07-09", "2011-08-09"]]
+          ])
+          .yAxisType("time")
+          .yAxisTypeTimePattern("%Y-%m-%d")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Gantt
+```

package/src/Gantt.ts

@@ -1,14 +1,14 @@
-import { Bar } from "./Bar.ts";
-
-export class Gantt extends Bar {
-    constructor() {
-        super();
-
-        this
-            .orientation_default("vertical")
-            .xAxisType_default("ordinal")
-            .yAxisType_default("time")
-            ;
-    }
-}
-Gantt.prototype._class += " chart_Gantt";
+import { Bar } from "./Bar.ts";
+
+export class Gantt extends Bar {
+    constructor() {
+        super();
+
+        this
+            .orientation_default("vertical")
+            .xAxisType_default("ordinal")
+            .yAxisType_default("time")
+            ;
+    }
+}
+Gantt.prototype._class += " chart_Gantt";

package/src/Gauge.md

@@ -1,148 +1,148 @@
-# Gauge
-
-<!--meta
-
--->
-
-A gauge chart displays a value between 0 and 1 as a percentage.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gauge } from "@hpcc-js/chart";
-
-      var gauge = new Gauge()
-          .target("placeholder")
-          .title("Example")
-          .value(.38)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-_tickValue_ can be used to display a point of interest. _showTick_ must be set to _true_ in order for the tick to be visible.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gauge } from "@hpcc-js/chart";
-
-      var gauge = new Gauge()
-          .target("placeholder")
-          .title("Gauge w/ Tick")
-          .value(.38)
-          .showTick(true)
-          .tickValue(.62)
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-_titleDescription_, _valueDescription_ and _tickValueDescription_ can be used to specify hover text that displays while the cursor hovers the title, value or tick respectively.
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gauge } from "@hpcc-js/chart";
-
-      var gauge = new Gauge()
-          .target("placeholder")
-          .title("Tick & Descriptions")
-          .titleDescription("My Title Description")
-          .value(.38)
-          .valueDescription("My Value Description")
-          .showTick(true)
-          .tickValue(.62)
-          .tickValueDescription("My Tick Description")
-          .render()
-          ;
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-Custom colors can be specified using two properties. _colorRange_ expects an array of valid css color style strings. _colorDomain_ expects an array of threshold values from 0 to 1. For the best results these two arrays should have the same number of elements.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gauge } from "@hpcc-js/chart";
-
-      var gauge = new Gauge()
-          .target("placeholder")
-          .title("Custom Color Gauge")
-          .value(0)
-          .tickValue(0.5)
-          .showTick(true)
-          .colorDomain([0,0.25,0.5,0.75,1])
-          .colorRange(["#0000FF","dodgerblue","goldenrod","orange","rgb(255,0,0)"])
-          .emptyColor("#FFFFFF")
-          .tickColor("red")
-          .render()
-          ;
-
-      setInterval(function () {
-          const v = gauge.value() + 0.25;
-          gauge
-              .value(v <= 1 ? v : 0)
-              .lazyRender()
-              ;
-      }, 1000);
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-
-When the values change, the gauge animates to display the new values.
-
-
-<ClientOnly>
-  <hpcc-vitepress style="width:100%;height:600px">
-    <div id="placeholder" style="height:400px">
-    </div>
-    <script type="module">
-      import { Gauge } from "@hpcc-js/chart";
-
-      var gauge = new Gauge()
-          .target("placeholder")
-          .title("My Gauge")
-          .titleDescription("@hpcc-js/chart")
-          .value(.66)
-          .valueDescription("Main")
-          .showTick(true)
-          .tickValue(.33)
-          .tickValueDescription("Average")
-          .render()
-          ;
-
-      setInterval(function () {
-          gauge
-              .value(Math.random())
-              .tickValue(Math.random())
-              .lazyRender()
-              ;
-      }, 3000);
-    </script>
-  </hpcc-vitepress>
-</ClientOnly>
-
-## API
-
-## Published Properties
-```@hpcc-js/chart:Gauge
-```
+# Gauge
+
+<!--meta
+
+-->
+
+A gauge chart displays a value between 0 and 1 as a percentage.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gauge } from "@hpcc-js/chart";
+
+      var gauge = new Gauge()
+          .target("placeholder")
+          .title("Example")
+          .value(.38)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+_tickValue_ can be used to display a point of interest. _showTick_ must be set to _true_ in order for the tick to be visible.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gauge } from "@hpcc-js/chart";
+
+      var gauge = new Gauge()
+          .target("placeholder")
+          .title("Gauge w/ Tick")
+          .value(.38)
+          .showTick(true)
+          .tickValue(.62)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+_titleDescription_, _valueDescription_ and _tickValueDescription_ can be used to specify hover text that displays while the cursor hovers the title, value or tick respectively.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gauge } from "@hpcc-js/chart";
+
+      var gauge = new Gauge()
+          .target("placeholder")
+          .title("Tick & Descriptions")
+          .titleDescription("My Title Description")
+          .value(.38)
+          .valueDescription("My Value Description")
+          .showTick(true)
+          .tickValue(.62)
+          .tickValueDescription("My Tick Description")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+Custom colors can be specified using two properties. _colorRange_ expects an array of valid css color style strings. _colorDomain_ expects an array of threshold values from 0 to 1. For the best results these two arrays should have the same number of elements.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gauge } from "@hpcc-js/chart";
+
+      var gauge = new Gauge()
+          .target("placeholder")
+          .title("Custom Color Gauge")
+          .value(0)
+          .tickValue(0.5)
+          .showTick(true)
+          .colorDomain([0,0.25,0.5,0.75,1])
+          .colorRange(["#0000FF","dodgerblue","goldenrod","orange","rgb(255,0,0)"])
+          .emptyColor("#FFFFFF")
+          .tickColor("red")
+          .render()
+          ;
+
+      setInterval(function () {
+          const v = gauge.value() + 0.25;
+          gauge
+              .value(v <= 1 ? v : 0)
+              .lazyRender()
+              ;
+      }, 1000);
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+When the values change, the gauge animates to display the new values.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Gauge } from "@hpcc-js/chart";
+
+      var gauge = new Gauge()
+          .target("placeholder")
+          .title("My Gauge")
+          .titleDescription("@hpcc-js/chart")
+          .value(.66)
+          .valueDescription("Main")
+          .showTick(true)
+          .tickValue(.33)
+          .tickValueDescription("Average")
+          .render()
+          ;
+
+      setInterval(function () {
+          gauge
+              .value(Math.random())
+              .tickValue(Math.random())
+              .lazyRender()
+              ;
+      }, 3000);
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Gauge
+```