@hpcc-js/chart 2.75.0 → 2.78.0

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

package/src/Step.md

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

package/src/Summary.md

@@ -0,0 +1,219 @@
+# Summary
+
+<!--meta
+
+-->
+
+Summary is commonly used to emphasize significant data points within a dashboard. It requires _labelColumn_ and _valueColumn_ to be specified.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Summary } from "@hpcc-js/chart";
+
+      new Summary()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Cars", 128]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_icon_ can be set to an empty string to prevent the default icon from displaying.
+
+_hideMoreWrapper_ can hide the 'more info' section.
+
+_textFontSize_ can be used to set the label font size.
+
+_headerFontSize_ can be used to set the value font size.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Summary } from "@hpcc-js/chart";
+
+      new Summary()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Cars", 128]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("")
+          .hideMoreWrapper(true)
+          .headerFontSize(120)
+          .textFontSize(20)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_icon_ can also be used to specify a class to be given to the icon's html element. In the example below a FontAwesome class is assigned.
+
+_colorFill_ sets the background color.
+
+_colorStroke_ sets the text and icon color.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Summary } from "@hpcc-js/chart";
+
+      new Summary()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Users", 256]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("fa-users")
+          .colorFill("#eeeeee")
+          .colorStroke("#30336b")
+          .hideMoreWrapper(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_moreIcon_ can be used to specify a class to be given to the 'more info' icon's html element. In the example below a FontAwesome class is assigned.
+
+_moreText_ can be used to specify content for the 'more info' section.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Summary } from "@hpcc-js/chart";
+
+      new Summary()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Users", 256]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("fa-users")
+          .colorFill("#eeeeee")
+          .colorStroke("#30336b")
+          .moreIcon("fa-user-md")
+          .moreText("32 doctors")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_moreIcon_ can also be set to an empty string to prevent the default icon from displaying.
+
+If _moreTextHTML_ is set to _true_ then the content within _moreText_ will be rendered as HTML.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Summary } from "@hpcc-js/chart";
+
+      new Summary()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Tweets", 512]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("fa-twitter")
+          .colorFill("#eeeeee")
+          .colorStroke("#30336b")
+          .moreIcon("")
+          .moreText("<button onclick=\"alert('More info here')\">Click for more info</button>")
+          .moreTextHTML(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_playInterval_ can be used to cycle through multiple data rows. In the below example the play interval is set to 2000 milliseconds (two seconds).
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Summary } from "@hpcc-js/chart";
+
+      new Summary()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Cars", 128],
+              ["Trucks", 64]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("")
+          .hideMoreWrapper(true)
+          .headerFontSize(120)
+          .textFontSize(20)
+          .playInterval(2000)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_iconColumn_, _moreIconColumn_, _moreTextColumn_, _colorFillColumn_ and _colorStrokeColumn_ can be set to designate data row columns for these properties. This allows the properties to change for each data row.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Summary } from "@hpcc-js/chart";
+
+      new Summary()
+          .target("placeholder")
+          .columns(["Summary", "Score", "Icon", "MoreIcon", "Details", "Background", "TextColor"])
+          .data([
+              ["Cars", 128, "fa-automobile", "fa-truck", "64 Trucks", "grey", "black"],
+              ["Cold days", 256, "fa-thermometer-empty", "fa-thermometer", "16 Hot days", "#30336b", "white"]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .iconColumn("Icon")
+          .moreTextColumn("Details")
+          .moreIconColumn("MoreIcon")
+          .colorFillColumn("Background")
+          .colorStrokeColumn("TextColor")
+          .playInterval(2000)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+
+```@hpcc-js/chart:Summary
+```

package/src/SummaryC.md

@@ -0,0 +1,154 @@
+# SummaryC
+
+<!--meta
+
+-->
+
+SummaryC is commonly used to emphasize significant data points within a dashboard. It requires _labelColumn_ and _valueColumn_ to be specified.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Cars", 128]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_icon_ can be set to an empty string to prevent the default icon from displaying.
+
+_fontSizeRatio_ can be used to set the font size ration between the value size and the label size.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Cars", 128]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("")
+          .fontSizeRatio(0.38)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_icon_ can also be used to assign a FontAwesome icon by class.
+
+_iconSizeRatio_ can be used to control the icon's size relative to the overall height.
+
+_colorFill_ sets the background color.
+
+_colorStroke_ sets the text and icon color.
+
+_iconBaseline_ controls the vertical placement of the icon.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score"])
+          .data([
+              ["Users", 256]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .icon("fa-users")
+          .colorFill("#eeeeee")
+          .colorStroke("#30336b")
+          .iconSizeRatio(0.5)
+          .iconBaseline("middle")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_playInterval_ can be used to cycle through multiple data rows. In the below example the play interval is set to 2000 milliseconds (two seconds).
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score", "Icon"])
+          .data([
+              ["Cars", 128, "fa-automobile"],
+              ["Trucks", 64, "fa-truck"]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .iconColumn("Icon")
+          .playInterval(2000)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+_iconColumn_, _colorFillColumn_ and _colorStrokeColumn_ can be set to designate data row columns for these properties. This allows the properties to change for each data row.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { SummaryC } from "@hpcc-js/chart";
+
+      new SummaryC()
+          .target("placeholder")
+          .columns(["Summary", "Score", "Icon", "Background", "TextColor"])
+          .data([
+              ["Cold days", 56, "fa-thermometer-0", "#95a5a6", "#34495e"],
+              ["Cool days", 120, "fa-thermometer-1", "white", "#2980b9"],
+              ["Warm days", 130, "fa-thermometer-2", "#f1c40f", "#d35400"],
+              ["Hot days", 59, "fa-thermometer-3", "#c0392b", "#ecf0f1"]
+          ])
+          .labelColumn("Summary")
+          .valueColumn("Score")
+          .iconColumn("Icon")
+          .colorFillColumn("Background")
+          .colorStrokeColumn("TextColor")
+          .playInterval(2000)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+
+```@hpcc-js/chart:SummaryC
+```