@hpcc-js/chart 2.86.1 → 2.86.3

package/src/QuarterPie.md

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

@@ -1,35 +1,35 @@
-import { Pie } from "./Pie";
-
-export class QuarterPie extends Pie {
-    constructor() {
-        super();
-    }
-    postUpdate(domNode, element) {
-        super.postUpdate(domNode, element);
-        let x = this.orientation() === "left" ? 0 : this._size.width;
-        let y = this._size.height;
-        if (this._drawStartPos === "origin" && this._target instanceof SVGElement) {
-            x -= this._size.width / 2;
-            y -= this._size.height / 2;
-        }
-        this._element.attr("transform", "translate(" + x + "," + y + ")scale(" + this._widgetScale + ")");
-    }
-    updateD3Pie() {
-        super.updateD3Pie();
-        this.d3Pie
-            .startAngle(this.orientation() === "left" ? 0 : -Math.PI / 2)
-            .endAngle(this.orientation() === "left" ? Math.PI / 2 : 0)
-            ;
-    }
-    calcOuterRadius() {
-        const maxTextWidth = this.textSize(this.data().map(d => this.getLabelText({ data: d })), "Verdana", 12).width;
-        return Math.min(this._size.width - maxTextWidth - 10, this._size.height - 12 * 3) - 2;
-    }
-}
-QuarterPie.prototype._class += " chart_QuarterPie";
-
-export interface QuarterPie {
-    orientation(): string;
-    orientation(_: string): this;
-}
-QuarterPie.prototype.publish("orientation", "left", "set", "Determines the placement and start/end angle.", ["left", "right"]);
+import { Pie } from "./Pie";
+
+export class QuarterPie extends Pie {
+    constructor() {
+        super();
+    }
+    postUpdate(domNode, element) {
+        super.postUpdate(domNode, element);
+        let x = this.orientation() === "left" ? 0 : this._size.width;
+        let y = this._size.height;
+        if (this._drawStartPos === "origin" && this._target instanceof SVGElement) {
+            x -= this._size.width / 2;
+            y -= this._size.height / 2;
+        }
+        this._element.attr("transform", "translate(" + x + "," + y + ")scale(" + this._widgetScale + ")");
+    }
+    updateD3Pie() {
+        super.updateD3Pie();
+        this.d3Pie
+            .startAngle(this.orientation() === "left" ? 0 : -Math.PI / 2)
+            .endAngle(this.orientation() === "left" ? Math.PI / 2 : 0)
+            ;
+    }
+    calcOuterRadius() {
+        const maxTextWidth = this.textSize(this.data().map(d => this.getLabelText({ data: d })), "Verdana", 12).width;
+        return Math.min(this._size.width - maxTextWidth - 10, this._size.height - 12 * 3) - 2;
+    }
+}
+QuarterPie.prototype._class += " chart_QuarterPie";
+
+export interface QuarterPie {
+    orientation(): string;
+    orientation(_: string): this;
+}
+QuarterPie.prototype.publish("orientation", "left", "set", "Determines the placement and start/end angle.", ["left", "right"]);

package/src/QuartileCandlestick.md

@@ -1,129 +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
-```
+# 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
+```