@hpcc-js/chart 2.75.0 → 2.78.0

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
+```

package/src/Pie.ts

@@ -112,6 +112,29 @@ export class Pie extends SVGWidget {
         }
         return label;
     }
+
+    selection(): any[]; // any[] === single row
+    selection(_: any[]): this;
+    selection(_?: any[]): any[] | this {
+        if (!arguments.length) {
+            try {
+                return this._selection.selection2()[0]?.data;
+            } catch (e) {
+                return undefined;
+            }
+        }
+        //  Stringify to enable a deep equal
+        const strRow = JSON.stringify(_);
+        this._selection.selection2(d => strRow === JSON.stringify(d.data));
+    }
+
+    selectByLabel(_: string) {
+        const row = this.data().filter(row => row[0] === _)[0];
+        if (row) {
+            this.selection(row);
+        }
+    }
+
     _slices;
     _labels;
     enter(_domNode, element) {

package/src/QuarterPie.md

@@ -0,0 +1,61 @@
+# QuarterPie
+
+<!--meta
+
+-->
+
+[Pie](./Pie.md), [HalfPie](./HalfPie.md) and QuarterPie 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 { QuarterPie } from "@hpcc-js/chart";
+
+      new QuarterPie()
+          .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 { QuarterPie } from "@hpcc-js/chart";
+
+      new QuarterPie()
+          .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:QuarterPie
+```

package/src/QuartileCandlestick.md

@@ -0,0 +1,129 @@
+# QuartileCandlestick
+
+<!--meta
+
+-->
+
+QuartileCandlestick displays a five number summary of a range of numeric values. The five-number summary is the minimum, first quartile, median, third quartile, and maximum.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { QuartileCandlestick } from "@hpcc-js/chart";
+
+      new QuartileCandlestick()
+          .target("placeholder")
+          .columns(["Min","25%","50%","75%","Max"])
+          .data([100,250,350,400,500])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+_orientation_ can be used to render this chart either vertically or horizontally.
+
+_lineWidth_ and _candleWidth_ can be used to set the pixel width of the lines and the overall pixel width of the drawn portion of this chart respectively. _candleWidth_ also controls the height of the drawn portion while using 'horizontal' orientation.
+
+_edgePadding_ sets the pixel padding between the edges of the containing element and the minimum/maximum lines.
+
+_roundedCorners_ sets the pixel radius of the drawn lines.
+
+_upperTextRotation_ and _lowerTextRotation_ sets the degrees of rotation for the column labels and column values respectively.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { QuartileCandlestick } from "@hpcc-js/chart";
+
+      new QuartileCandlestick()
+          .target("placeholder")
+          .columns(["Min","25%","50%","75%","Max"])
+          .data([100,200,300,400,500])
+          .orientation("vertical")
+          .lineWidth(2)
+          .candleWidth(80)
+          .edgePadding(20)
+          .roundedCorners(0)
+          .upperTextRotation(-90)
+          .lowerTextRotation(-90)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_lineColor_ sets the fill color of the lines.
+
+_textColor_ sets the fill color of the labels and values.
+
+_innerRectColor_ sets the fill color of the inner rectangles between the first and third quartiles.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { QuartileCandlestick } from "@hpcc-js/chart";
+
+      new QuartileCandlestick()
+          .target("placeholder")
+          .columns(["Min","25%","50%","75%","Max"])
+          .data([100,250,350,400,500])
+          .orientation("vertical")
+          .lineColor("#999")
+          .textColor("#555")
+          .innerRectColor("#000")
+          .lineWidth(2)
+          .candleWidth(80)
+          .edgePadding(20)
+          .roundedCorners(0)
+          .upperTextRotation(-90)
+          .lowerTextRotation(-90)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_showLabels_ and _showValues_ are true by default but can be used to hide the labels and values.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { QuartileCandlestick } from "@hpcc-js/chart";
+
+      new QuartileCandlestick()
+          .target("placeholder")
+          .columns(["Min","25%","50%","75%","Max"])
+          .data([1,497,498,499,500])
+          .showLabels(false)
+          .showValues(false)
+          .lineColor("#999")
+          .innerRectColor("#000")
+          .lineWidth(2)
+          .candleWidth(80)
+          .edgePadding(20)
+          .roundedCorners(0)
+          .upperTextRotation(-90)
+          .lowerTextRotation(-90)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:QuartileCandlestick
+```

package/src/Radar.md

@@ -0,0 +1,104 @@
+# Radar
+
+<!--meta
+
+-->
+
+Radar displays continuous data across n-number of categories (rows) and n-number of series (columns).
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Radar } from "@hpcc-js/chart";
+
+      new Radar()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_fontFamily_ and _fontSize_ can be used to control the font family and size used for the labels and guidelines.
+
+_pointShape_ and _pointSize_ can be used to control the shape and size of the data points. 
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Radar } from "@hpcc-js/chart";
+
+      new Radar()
+          .target("placeholder")
+          .columns(["Hour", "Value"])
+          .data([
+              ["Dec", 134],
+              ["Jan", 95],
+              ["Feb", 80],
+              ["Mar", 65],
+              ["Apr", 59],
+              ["May", 51],
+              ["Jun", 58],
+              ["Jul", 72],
+              ["Aug", 79],
+              ["Sep", 104],
+              ["Oct", 134],
+              ["Nov", 124]
+          ])
+          .fontFamily("Verdana")
+          .fontSize(14)
+          .pointShape("circle")
+          .pointSize(3)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_fillOpacity_ can be used to control the opacity of the background color created by each series.
+
+_valueGuideRatios_ can be used to control placement, and count, of the guide lines.
+
+_labelPaddingRatio_ shrinks the chart's visible area between its column labels.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Radar } from "@hpcc-js/chart";
+
+      new Radar()
+          .target("placeholder")
+          .columns(["Category", "Value 1", "Value 2"])
+          .data([
+              ["A", 34, 190],
+              ["B", 55, 150],
+              ["C", 89, 35],
+              ["D", 144, 36]
+          ])
+          .valueGuideRatios([0.5, 1.0])
+          .labelPaddingRatio(0.8)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Radar
+```

package/src/RadialBar.md

@@ -0,0 +1,91 @@
+# RadialBar
+
+<!--meta
+
+-->
+
+RadialBar displays one category and one numeric value per data row.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { RadialBar } from "@hpcc-js/chart";
+
+      new RadialBar()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 144],
+              ["B", 89],
+              ["C", 55],
+              ["D", 34]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_valueMaxAngle_ sets the maximum angle of the largest value in the data that you provide.
+
+_tickCount_ sets the target number of ticks to display along the circular axis. The tick count may be slightly lower or higher than the provided number as the axis attempts to place the ticks in sensible intervals.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { RadialBar } from "@hpcc-js/chart";
+
+      new RadialBar()
+          .target("placeholder")
+          .columns(["Category", "Value 1"])
+          .data([
+              ["A", 144],
+              ["B", 89],
+              ["C", 55],
+              ["D", 34]
+          ])
+          .valueMaxAngle(90)
+          .tickCount(10)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_domainPadding_ sets the ratio of white space to bar width.
+
+_valueDomainHigh_ sets the maximum domain axis value.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { RadialBar } from "@hpcc-js/chart";
+
+      new RadialBar()
+          .target("placeholder")
+          .columns(["Category", "Value 1"])
+          .data([
+              ["A", 144],
+              ["B", 89],
+              ["C", 55],
+              ["D", 34]
+          ])
+          .domainPadding(0.62)
+          .valueDomainHigh(200)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:RadialBar
+```

package/src/Scatter.md

@@ -0,0 +1,163 @@
+# Scatter
+
+<!--meta
+
+-->
+
+Scatter, [Area](./Area.md), [Line](./Line.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 { Scatter } from "@hpcc-js/chart";
+
+      new Scatter()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+Scatter 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 { Scatter } from "@hpcc-js/chart";
+
+      new Scatter()
+          .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 { Scatter } from "@hpcc-js/chart";
+
+      new Scatter()
+          .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 { Scatter } from "@hpcc-js/chart";
+
+      new Scatter()
+          .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 { Scatter } from "@hpcc-js/chart";
+
+      new Scatter()
+          .columns(["Value 1", "Value 2"])
+          .data([
+              [144, 90],
+              [89, 50],
+              [55, 75],
+              [34, 66]
+          ])
+          .target("placeholder")
+          .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:Scatter
+```