@hpcc-js/chart 2.77.0 → 2.79.0

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

package/src/WordCloud.md

@@ -0,0 +1,144 @@
+# WordCloud
+
+<!--meta
+
+-->
+
+A word cloud chart displays words with prominence relative to the word’s given weight. The larger the weight value, relative to the other word weights, the bigger it appears in the word cloud.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { WordCloud } from "@hpcc-js/chart";
+
+      new WordCloud()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["Apples", 34],
+              ["Bananas", 55],
+              ["Carrots", 89],
+              ["Danishes", 144],
+              ["Eggs", 60],
+              ["Figs", 72],
+              ["Ginger", 92],
+              ["Hazelnut", 102],
+              ["Incaberries", 52],
+              ["Jambalaya", 42],
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+Use _fontFamily_ to set the font family. _fontSizeFrom_ and _fontSizeTo_ can be used to control the range of font sizes from the minimum word weight to the maximum word weight.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { WordCloud } from "@hpcc-js/chart";
+
+      new WordCloud()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["Apples", 34],
+              ["Bananas", 55],
+              ["Carrots", 89],
+              ["Danishes", 144],
+              ["Eggs", 60],
+              ["Figs", 72],
+              ["Ginger", 92],
+              ["Hazelnut", 102],
+              ["Incaberries", 52],
+              ["Jambalaya", 42],
+          ])
+          .fontFamily("Chilanka")
+          .fontSizeFrom(12)
+          .fontSizeTo(24)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+The rotation of the words are not bound to their weight. Use _angleFrom_ and _angleTo_ to set the minimum and maximum assigned angles. Use _angleCount_ to set the number of potential angles.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { WordCloud } from "@hpcc-js/chart";
+
+      new WordCloud()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["Apples", 34],
+              ["Bananas", 55],
+              ["Carrots", 89],
+              ["Danishes", 144],
+              ["Eggs", 60],
+              ["Figs", 72],
+              ["Ginger", 92],
+              ["Hazelnut", 102],
+              ["Incaberries", 52],
+              ["Jambalaya", 42],
+          ])
+          .angleFrom(90)
+          .angleTo(0)
+          .angleCount(2)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+Below is an example with a single angle of 45 degrees and font sizes ranging from 18 to 28 pixels.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { WordCloud } from "@hpcc-js/chart";
+
+      new WordCloud()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["Apples", 34],
+              ["Bananas", 55],
+              ["Carrots", 89],
+              ["Danishes", 144],
+              ["Eggs", 60],
+              ["Figs", 72],
+              ["Ginger", 92],
+              ["Hazelnut", 102],
+              ["Incaberries", 52],
+              ["Jambalaya", 42],
+          ])
+          .fontFamily("Chilanka")
+          .angleFrom(45)
+          .angleTo(45)
+          .angleCount(1)
+          .fontSizeFrom(18)
+          .fontSizeTo(28)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+
+```@hpcc-js/chart:WordCloud
+```