@hpcc-js/chart 2.77.0 → 2.78.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/chart",
-    "version": "2.77.0",
+    "version": "2.78.0",
     "description": "hpcc-js - Viz Chart",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -38,9 +38,9 @@
         "update": "npx npm-check-updates -u -t minor"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.9.2",
-        "@hpcc-js/common": "^2.67.0",
-        "@hpcc-js/util": "^2.46.2"
+        "@hpcc-js/api": "^2.10.0",
+        "@hpcc-js/common": "^2.68.0",
+        "@hpcc-js/util": "^2.47.0"
     },
     "devDependencies": {
         "@hpcc-js/bundle": "^2.11.1",
@@ -78,5 +78,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "bd452a4559c9e5790881521a332964eef36153b7"
+    "gitHead": "33aa52bc641400d8fb3bfa51dcd4c94a9599fc90"
 }

package/src/Area.md

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

package/src/Bar.md

@@ -0,0 +1,91 @@
+# Bar
+
+<!--meta
+
+-->
+
+Bar and [Column](./Column) are effectively the same class, but have one different default value - their _orientation_. 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 { Bar } from "@hpcc-js/chart";
+
+      new Bar()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .yAxisDomainLow(0)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+Two or more series are commonly compared with a bar chart.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bar } from "@hpcc-js/chart";
+
+      new Bar()
+          .target("placeholder")
+          .columns(["Category", "Value 1", "Value 2"])
+          .data([
+              ["A", 34, 90],
+              ["B", 55, 50],
+              ["C", 89, 75],
+              ["D", 144, 66]
+          ])
+          .xAxisOrdinalPaddingInner(0.38)
+          .xAxisOrdinalPaddingOuter(0.62)
+          .xAxisFocus(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+A bar chart supports n-number of numeric values per data row. A series is created for each column as needed.  In the below example the series' are stacked together using the _yAxisStacked_ property.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bar } from "@hpcc-js/chart";
+
+      new Bar()
+          .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]
+          ])
+          .showValue(true)
+          .valueCentered(true)
+          .yAxisStacked(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Bar
+```

package/src/Bubble.md

@@ -0,0 +1,69 @@
+# Bubble
+
+<!--meta
+
+-->
+
+A bubble chart represents a categorical data by displaying circles sized relative to each category's value. The circles are sized automatically to fit their target element.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bubble } from "@hpcc-js/chart";
+
+      new Bubble()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+_paletteID_ can be used to assign an ordinal color palette.
+
+_selectionGlowColor_ can be used to change the glow color when a bubble is selected.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bubble } from "@hpcc-js/chart";
+
+      new Bubble()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 1440]
+          ])
+          .paletteID("FlatUI_British")
+          .selectionGlowColor("#00FF00")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+<!-- For documentation on tooltip properties, take a look at the [Tooltip Documentation](../../common/docs/Tooltip.md) -->
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Bubble
+```

package/src/Bullet.md

@@ -0,0 +1,104 @@
+# Bullet
+
+<!--meta
+
+-->
+
+The Bullet chart displays a title and subtitle along with three types of values to the right. Each row's values are placed relative to the other values in that row. Their placement is unaffected by the values in other rows.
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bullet } from "@hpcc-js/chart";
+
+      new Bullet()
+          .target("placeholder")
+          .columns(["title", "subtitle", "measures"])
+          .data([
+              ["Revenue", "US$, in thousands", [220, 270, 345]],
+              ["Profit  ", "%", [21, 23]],
+              ["Order Size", "US$, average", [100, 320, 432]],
+              ["New Customers", "count", [1000, 1650, 1943]],
+              ["Satisfaction", "out of 5", [3.2, 4.7, 4.9]]
+          ])
+          .titleColumn("title")
+          .subtitleColumn("subtitle")
+          .measuresColumn("measures")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+In this example "markers" have been added. 
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bullet } from "@hpcc-js/chart";
+
+      new Bullet()
+          .target("placeholder")
+          .columns(["title", "subtitle", "measures", "markers"])
+          .data([
+              ["Revenue", "US$, in thousands", [220, 270], [250, 25]],
+              ["Profit  ", "%", [21, 23], [26]],
+              ["Order Size", "US$, average", [100, 320], [150, 550]],
+              ["New Customers", "count", [1000, 1650], [190, 540, 750, 850, 2100]],
+              ["Satisfaction", "out of 5", [3.2, 4.7], [4.4]]
+          ])
+          .titleColumn("title")
+          .subtitleColumn("subtitle")
+          .measuresColumn("measures")
+          .markersColumn("markers")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+In this example "ranges" have been added. 
+
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Bullet } from "@hpcc-js/chart";
+
+      new Bullet()
+          .target("placeholder")
+          .columns(["title", "subtitle", "ranges", "measures", "markers"])
+          .data([
+              ["Revenue", "US$, in thousands", [150, 225, 300], [220, 270], [250, 25]],
+              ["Profit  ", "%", [20, 25, 30], [21, 23], [26]],
+              ["Order Size", "US$, average", [350, 500, 600], [100, 320], [550]],
+              ["New Customers", "count", [1400, 2000, 2500], [1000, 1650], 2100],
+              ["Satisfaction", "out of 5", [3.5, 4.25, 5], [3.2, 4.7], [4.4]]
+          ])
+          .titleColumn("title")
+          .subtitleColumn("subtitle")
+          .rangesColumn("ranges")
+          .measuresColumn("measures")
+          .markersColumn("markers")
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Bullet
+```

package/src/Column.md

@@ -0,0 +1,90 @@
+# Column
+
+<!--meta
+
+-->
+
+[Bar](./Bar) and Column are effectively the same class, but have one different default value - their _orientation_. 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 { Column } from "@hpcc-js/chart";
+
+      new Column()
+          .target("placeholder")
+          .columns(["Category", "Value"])
+          .data([
+              ["A", 34],
+              ["B", 55],
+              ["C", 89],
+              ["D", 144]
+          ])
+          .yAxisDomainLow(0)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+Two or more series are commonly compared with a column chart.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Column } from "@hpcc-js/chart";
+
+      new Column()
+          .target("placeholder")
+          .columns(["Category", "Value 1", "Value 2"])
+          .data([
+              ["A", 34, 90],
+              ["B", 55, 50],
+              ["C", 89, 75],
+              ["D", 144, 66]
+          ])
+          .xAxisOrdinalPaddingInner(0.38)
+          .xAxisOrdinalPaddingOuter(0.62)
+          .xAxisFocus(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+A column chart supports n-number of numeric values per data row. A series is created for each column as needed.  In the below example the series' are stacked together using the _yAxisStacked_ property.
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+      import { Column } from "@hpcc-js/chart";
+
+      new Column()
+          .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]
+          ])
+          .showValue(true)
+          .valueCentered(true)
+          .yAxisStacked(true)
+          .render()
+          ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+## API
+
+## Published Properties
+```@hpcc-js/chart:Column
+```

package/src/Contour.md

@@ -0,0 +1,88 @@
+# Contour
+
+<!--meta
+
+-->
+
+Contour and [HexBin](./HexBin.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 { Contour } from "@hpcc-js/chart";
+
+      new Contour()
+          .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>
+
+
+_contourBandwidth_ can be used to control the standard deviation of the contour algorithm. 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 { Contour } from "@hpcc-js/chart";
+
+      let bandwidth = 10;
+
+      const widget = new Contour()
+          .target("placeholder")
+          .columns(["X-Value", "Y-Value"])
+          .data(randomData(1000))
+          .xAxisType("linear")
+          .xAxisTickCount(10)
+          .contourBandwidth(bandwidth)
+          .render()
+          ;
+
+      function randomData(count){
+          return Array(count).fill(1).map((n,x)=>{
+              const y = Math.sqrt(x) * Math.random();
+              return [x,y];
+          });
+      }
+      let interval = 10;
+      setInterval(function(){
+          const next = bandwidth + interval;
+          if(next > 100 || next <= 0){
+              interval *= -1;
+          }
+          bandwidth += interval;
+          widget
+              .xAxisTitle("bandwidth = " + bandwidth)
+              .contourBandwidth(bandwidth)
+              .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:Contour
+```