@hpcc-js/chart 2.86.2 → 2.86.3

package/src/Step.md

@@ -1,163 +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
-```
+# 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/Step.ts

@@ -1,12 +1,12 @@
-import { Scatter } from "./Scatter";
-
-export class Step extends Scatter {
-    constructor() {
-        super();
-
-        this
-            .interpolate_default("step")
-            ;
-    }
-}
-Step.prototype._class += " chart_Step";
+import { Scatter } from "./Scatter";
+
+export class Step extends Scatter {
+    constructor() {
+        super();
+
+        this
+            .interpolate_default("step")
+            ;
+    }
+}
+Step.prototype._class += " chart_Step";

package/src/Summary.css

@@ -1,56 +1,56 @@
-.chart_Summary {
-    width: 225px;
-    height: 150px;
-    font-size: 14px;
-}
-
-.chart_Summary .content h2 {
-    font-weight: bold;
-    font-size: 3em;
-    margin-left: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.chart_Summary .bgIcon:before {
-    position: absolute;
-    font-family: FontAwesome;
-    font-size: 5.5em;
-    opacity: 0.4;
-    top: 0.5em;
-    right: 15px;
-}
-
-.chart_Summary .bgIcon {
-    position: relative;
-}
-    
-.chart_Summary .content {
-    float: left;
-    width: 100%;
-    height: 100%;
-    background-color: #efd752;
-}
-
-.chart_Summary .content div {
-    margin-top: -1.1em;
-    font-size: 1.1em;
-    opacity: 0.8;
-}
-
-.chart_Summary .content .text {
-   padding-left: 10px;
-}
-
-.chart_Summary .content .more {
-    position: absolute;
-    bottom:0px;
-    width: 100%;
-    height: 3em;
-    line-height: 3em;
-}
-
-.chart_Summary .content .more i {
-   padding-left: 10px;
-   padding-right: 0.5em;
-}
+.chart_Summary {
+    width: 225px;
+    height: 150px;
+    font-size: 14px;
+}
+
+.chart_Summary .content h2 {
+    font-weight: bold;
+    font-size: 3em;
+    margin-left: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.chart_Summary .bgIcon:before {
+    position: absolute;
+    font-family: FontAwesome;
+    font-size: 5.5em;
+    opacity: 0.4;
+    top: 0.5em;
+    right: 15px;
+}
+
+.chart_Summary .bgIcon {
+    position: relative;
+}
+    
+.chart_Summary .content {
+    float: left;
+    width: 100%;
+    height: 100%;
+    background-color: #efd752;
+}
+
+.chart_Summary .content div {
+    margin-top: -1.1em;
+    font-size: 1.1em;
+    opacity: 0.8;
+}
+
+.chart_Summary .content .text {
+   padding-left: 10px;
+}
+
+.chart_Summary .content .more {
+    position: absolute;
+    bottom:0px;
+    width: 100%;
+    height: 3em;
+    line-height: 3em;
+}
+
+.chart_Summary .content .more i {
+   padding-left: 10px;
+   padding-right: 0.5em;
+}