@hpcc-js/chart 2.77.0 → 2.78.0

package/src/Gantt.md

@@ -0,0 +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
+```

package/src/Gauge.md

@@ -0,0 +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
+```

package/src/HalfPie.md

@@ -0,0 +1,62 @@
+# HalfPie
+
+<!--meta
+
+-->
+
+[Pie](./Pie.md), HalfPie and [QuarterPie](./QuarterPie.md) are effectively the same class, but have different starting and ending angles. They support all of the same properties.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { HalfPie } from "@hpcc-js/chart";
+
+      new HalfPie()
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .target("placeholder")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { HalfPie } from "@hpcc-js/chart";
+
+      new HalfPie()
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .target("placeholder")
+          .innerRadius(62)
+          .showSeriesPercentage(true)
+          .showSeriesValue(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:HalfPie
+```

package/src/Heat.md

@@ -0,0 +1 @@
+# Heat

package/src/HexBin.md

@@ -0,0 +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
+```

package/src/Line.md

@@ -0,0 +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
+```

package/src/Pie.md

@@ -0,0 +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
+```