@hpcc-js/chart 2.77.0 → 2.79.0

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

package/src/StatChart.md

@@ -0,0 +1,117 @@
+# StatChart
+
+<!--meta
+
+-->
+
+StatChart displays a normal distribution of continuous data.
+
+A single data row containing exactly 7 data points is required.
+
+The _1st_ data point sets the lowest value in the set.
+
+The _2nd_ data point sets the lower quartile (typically the average of the smallest half of values in the set).
+
+The _3rd_ data point sets the middle quartile (typically the median value in the set).
+
+The _4th_ data point sets the upper quartile (typically the average of the largest half of values in a set).
+
+The _5th_ data point sets the largest value in the set.
+
+The _6th_ data point sets the _mean_.
+
+The _7th_ data point sets the _standardDeviation_.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { StatChart } from "@hpcc-js/chart";
+
+      new StatChart()
+          .data([
+              [34,55,89,144,233,90,20]
+          ])
+          .target("placeholder")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+Alternatively, the _mean_ and _standardDeviation_ can be set via chained methods _AFTER_ the _data_ row has been set.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { StatChart } from "@hpcc-js/chart";
+
+      new StatChart()
+          .data([
+              [34,55,89,144,233]
+          ])
+          .mean(90)
+          .standardDeviation(20)
+          .target("placeholder")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_candleHeight_ controls the pixel height of the _QuartileCandlestick_ chart along the bottom.
+
+_domainPadding_ controls the left and right padding of the interpolated _Scatter_ chart (bell curve) along the top.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { StatChart } from "@hpcc-js/chart";
+
+      new StatChart()
+          .data([
+              [34,55,89,144,233]
+          ])
+          .mean(90)
+          .standardDeviation(20)
+          .candleHeight(50)
+          .domainPadding(100)
+          .target("placeholder")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_tickFormat_ can be used to specify a d3 string formatting rule to be applied to the axis tick values (see: [Formatting](../../../docs/Getting%20Started/formatting.md))
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { StatChart } from "@hpcc-js/chart";
+
+      new StatChart()
+          .target("placeholder")
+          .quartiles([34,55,89,144,233])
+          .mean(120)
+          .standardDeviation(130)
+          .tickFormat(".2s")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+
+```@hpcc-js/chart:StatChart
+```