@hpcc-js/chart 2.86.2 → 2.86.3

package/src/QuartileCandlestick.ts

@@ -1,349 +1,349 @@
-import { SVGWidget } from "@hpcc-js/common";
-import { scaleLinear as d3ScaleLinear } from "d3-scale";
-
-export class QuartileCandlestick extends SVGWidget {
-    protected _g;
-    protected _leftLine;
-    protected _rightLine;
-    protected _midLine;
-    protected _midOuterRect;
-    protected _midInnerRect1;
-    protected _midInnerRect2;
-    protected _q0text;
-    protected _q1text;
-    protected _q2text;
-    protected _q3text;
-    protected _q4text;
-    protected _q0val;
-    protected _q1val;
-    protected _q2val;
-    protected _q3val;
-    protected _q4val;
-    constructor() {
-        super();
-    }
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._g = element.append("g");
-        this._leftLine = this._g.append("rect");
-        this._rightLine = this._g.append("rect");
-        this._midLine = this._g.append("rect");
-        this._midOuterRect = this._g.append("rect");
-        this._midInnerRect1 = this._g.append("rect");
-        this._midInnerRect2 = this._g.append("rect");
-        this._q0text = this._g.append("text");
-        this._q1text = this._g.append("text");
-        this._q2text = this._g.append("text");
-        this._q3text = this._g.append("text");
-        this._q4text = this._g.append("text");
-        this._q0val = this._g.append("text");
-        this._q1val = this._g.append("text");
-        this._q2val = this._g.append("text");
-        this._q3val = this._g.append("text");
-        this._q4val = this._g.append("text");
-    }
-    update(domNode, element) {
-        super.update(domNode, element);
-        const valueSize = (this.orientation() === "horizontal" ? this.width() : this.height()) - this.lineWidth();
-        const domainSize = this.orientation() === "horizontal" ? this.height() : this.width();
-        const scale = d3ScaleLinear()
-            .domain([
-                this.data()[0],
-                this.data()[4]
-            ])
-            .range([
-                this.edgePadding(),
-                valueSize - this.edgePadding()
-            ])
-            ;
-        const candleWidth = this.candleWidth_exists() ? this.candleWidth() : domainSize;
-        const lineWidth = this.lineWidth();
-        const lineColor = this.lineColor();
-        const roundedCorners = this.roundedCorners();
-        const q0x = this.edgePadding();
-        let q1x = scale(this.data()[1]);
-        let q2x = scale(this.data()[2]);
-        let q3x = scale(this.data()[3]);
-        const dataTop = -candleWidth / 2;
-        const dataBottom = candleWidth / 2;
-        const upperTextRotation = this.upperTextRotation();
-        const lowerTextRotation = this.lowerTextRotation();
-        const padding = this.textPadding();
-        const labelFontSize = this.labelFontSize();
-        const valueFontSize = this.valueFontSize();
-        const sz = Math.max(labelFontSize, valueFontSize);
-        const q4x = valueSize - q0x;
-        if (sz > 0) {
-            while (q1x - q0x < sz) {
-                q1x += sz;
-            }
-            while (q2x - q1x < sz) {
-                q2x += sz;
-            }
-            while (q3x - q2x < sz) {
-                q3x += sz;
-            }
-            while (q4x - q3x < sz) {
-                q3x -= sz;
-            }
-            while (q3x - q2x < sz) {
-                q2x -= sz;
-            }
-            while (q2x - q1x < sz) {
-                q1x -= sz;
-            }
-        }
-        let transX = (-valueSize / 2) - (this.lineWidth() / 2);
-        let transY = 0;
-        let rotate = 0;
-        const s = 1;
-        let textScale = 1;
-        let labelAnchor = "start";
-        let valueAnchor = "end";
-        if (this.orientation() === "vertical") {
-            transX = 0;
-            transY = valueSize / 2 + (this.lineWidth() / 2);
-            rotate = -90;
-            labelAnchor = "end";
-            valueAnchor = "start";
-            textScale = -1;
-        }
-        this._g
-            .style("shape-rendering", "crispEdges")
-            .attr("transform", `translate(${transX},${transY})rotate(${rotate})scale(${s})`)
-            ;
-        this._leftLine
-            .attr("fill", lineColor)
-            .attr("height", candleWidth)
-            .attr("width", lineWidth)
-            .attr("x", q0x)
-            .attr("y", dataTop)
-            .attr("rx", roundedCorners)
-            .attr("ry", roundedCorners)
-            ;
-        this._rightLine
-            .attr("class", "right-line")
-            .attr("fill", lineColor)
-            .attr("height", candleWidth)
-            .attr("width", lineWidth)
-            .attr("x", q4x)
-            .attr("y", dataTop)
-            .attr("rx", roundedCorners)
-            .attr("ry", roundedCorners)
-            ;
-        this._midLine
-            .attr("fill", lineColor)
-            .attr("height", lineWidth)
-            .attr("width", q4x - q0x)
-            .attr("x", q0x)
-            .attr("y", -lineWidth / 2)
-            ;
-        this._midOuterRect
-            .attr("fill", lineColor)
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("x", q1x)
-            .attr("y", dataTop)
-            .attr("rx", roundedCorners)
-            .attr("ry", roundedCorners)
-            ;
-        this._midInnerRect1
-            .attr("fill", this.innerRectColor())
-            .attr("height", candleWidth - (lineWidth * 2))
-            .attr("width", q2x - (q1x + (lineWidth * 2)))
-            .attr("x", q1x + lineWidth)
-            .attr("y", lineWidth - (candleWidth / 2))
-            .attr("rx", roundedCorners * 0.618)
-            .attr("ry", roundedCorners * 0.618)
-            ;
-        this._midInnerRect2
-            .attr("fill", this.innerRectColor())
-            .attr("height", candleWidth - (lineWidth * 2))
-            .attr("width", q3x - q2x - lineWidth)
-            .attr("x", q2x)
-            .attr("y", lineWidth - (candleWidth / 2))
-            .attr("rx", roundedCorners * 0.618)
-            .attr("ry", roundedCorners * 0.618)
-            ;
-        this._q0text
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showLabels() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q0x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
-            .attr("font-size", labelFontSize)
-            .attr("text-anchor", labelAnchor)
-            .attr("alignment-baseline", "hanging")
-            .text(this.columns()[0])
-            ;
-        this._q1text
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showLabels() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q1x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
-            .attr("font-size", labelFontSize)
-            .attr("text-anchor", labelAnchor)
-            .attr("alignment-baseline", "middle")
-            .text(this.columns()[1])
-            ;
-        this._q2text
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showLabels() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q2x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
-            .attr("font-size", labelFontSize)
-            .attr("text-anchor", labelAnchor)
-            .attr("alignment-baseline", "middle")
-            .text(this.columns()[2])
-            ;
-        this._q3text
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showLabels() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q3x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
-            .attr("font-size", labelFontSize)
-            .attr("text-anchor", labelAnchor)
-            .attr("alignment-baseline", "middle")
-            .text(this.columns()[3])
-            ;
-        this._q4text
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showLabels() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q4x + lineWidth}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
-            .attr("font-size", labelFontSize)
-            .attr("text-anchor", labelAnchor)
-            .attr("alignment-baseline", "baseline")
-            .text(this.columns()[4])
-            ;
-        this._q0val
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showValues() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q0x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
-            .attr("font-size", valueFontSize)
-            .attr("text-anchor", valueAnchor)
-            .attr("alignment-baseline", "hanging")
-            .text(this.data()[0])
-            ;
-        this._q1val
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showValues() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q1x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
-            .attr("font-size", valueFontSize)
-            .attr("text-anchor", valueAnchor)
-            .attr("alignment-baseline", "middle")
-            .text(this.data()[1])
-            ;
-        this._q2val
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showValues() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q2x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
-            .attr("font-size", valueFontSize)
-            .attr("text-anchor", valueAnchor)
-            .attr("alignment-baseline", "middle")
-            .text(this.data()[2])
-            ;
-        this._q3val
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showValues() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q3x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
-            .attr("font-size", valueFontSize)
-            .attr("text-anchor", valueAnchor)
-            .attr("alignment-baseline", "middle")
-            .text(this.data()[3])
-            ;
-        this._q4val
-            .attr("height", candleWidth)
-            .attr("width", q3x - q1x)
-            .attr("display", this.showValues() ? null : "none")
-            .attr("fill", this.textColor())
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("transform", `translate(${q4x + lineWidth}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
-            .attr("font-size", valueFontSize)
-            .attr("text-anchor", valueAnchor)
-            .attr("alignment-baseline", "baseline")
-            .text(this.data()[4])
-            ;
-    }
-}
-QuartileCandlestick.prototype._class += " chart_QuartileCandlestick";
-
-export interface QuartileCandlestick {
-    orientation(): "horizontal" | "vertical";
-    orientation(_: "horizontal" | "vertical"): this;
-    textPadding(): number;
-    textPadding(_: number): this;
-    edgePadding(): number;
-    edgePadding(_: number): this;
-    candleWidth(): number;
-    candleWidth(_: number): this;
-    candleWidth_exists(): boolean;
-    lineWidth(): number;
-    lineWidth(_: number): this;
-    lineColor(): string;
-    lineColor(_: string): this;
-    innerRectColor(): string;
-    innerRectColor(_: string): this;
-    lowerTextRotation(): number;
-    lowerTextRotation(_: number): this;
-    upperTextRotation(): number;
-    upperTextRotation(_: number): this;
-    roundedCorners(): number;
-    roundedCorners(_: number): this;
-    labelFontSize(): number;
-    labelFontSize(_: number): this;
-    valueFontSize(): number;
-    valueFontSize(_: number): this;
-    textColor(): string;
-    textColor(_: string): this;
-    showLabels(): boolean;
-    showLabels(_: boolean): this;
-    showValues(): boolean;
-    showValues(_: boolean): this;
-}
-QuartileCandlestick.prototype.publish("textColor", "black", "html-color", "Color of label and value text");
-QuartileCandlestick.prototype.publish("showLabels", true, "boolean", "If true, labels will be shown");
-QuartileCandlestick.prototype.publish("showValues", true, "boolean", "If true, values will be shown");
-QuartileCandlestick.prototype.publish("orientation", "horizontal", "set", "Determines layout", ["horizontal", "vertical"]);
-QuartileCandlestick.prototype.publish("valueFontSize", 12, "number", "Font size of value text (pixels)");
-QuartileCandlestick.prototype.publish("labelFontSize", 12, "number", "Font size of label text (pixels)");
-QuartileCandlestick.prototype.publish("roundedCorners", 8, "number", "Radius of rounded rect corners (pixels)");
-QuartileCandlestick.prototype.publish("lineWidth", 4, "number", "Width of lines (pixels)");
-QuartileCandlestick.prototype.publish("candleWidth", null, "number", "Height of outer rect (pixels)", null, {optional: true});
-QuartileCandlestick.prototype.publish("textPadding", 8, "number", "Padding between outer rect and text (pixels)");
-QuartileCandlestick.prototype.publish("edgePadding", 30, "number", "Padding between outer rect and left/right sides (pixels)");
-QuartileCandlestick.prototype.publish("lineColor", "#333", "html-color", "Color of outer rect and lines");
-QuartileCandlestick.prototype.publish("innerRectColor", "white", "html-color", "Color of the inner rects");
-QuartileCandlestick.prototype.publish("upperTextRotation", -60, "number", "Rotation of label text (degrees)");
-QuartileCandlestick.prototype.publish("lowerTextRotation", -60, "number", "Rotation of value text (degrees)");
+import { SVGWidget } from "@hpcc-js/common";
+import { scaleLinear as d3ScaleLinear } from "d3-scale";
+
+export class QuartileCandlestick extends SVGWidget {
+    protected _g;
+    protected _leftLine;
+    protected _rightLine;
+    protected _midLine;
+    protected _midOuterRect;
+    protected _midInnerRect1;
+    protected _midInnerRect2;
+    protected _q0text;
+    protected _q1text;
+    protected _q2text;
+    protected _q3text;
+    protected _q4text;
+    protected _q0val;
+    protected _q1val;
+    protected _q2val;
+    protected _q3val;
+    protected _q4val;
+    constructor() {
+        super();
+    }
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._g = element.append("g");
+        this._leftLine = this._g.append("rect");
+        this._rightLine = this._g.append("rect");
+        this._midLine = this._g.append("rect");
+        this._midOuterRect = this._g.append("rect");
+        this._midInnerRect1 = this._g.append("rect");
+        this._midInnerRect2 = this._g.append("rect");
+        this._q0text = this._g.append("text");
+        this._q1text = this._g.append("text");
+        this._q2text = this._g.append("text");
+        this._q3text = this._g.append("text");
+        this._q4text = this._g.append("text");
+        this._q0val = this._g.append("text");
+        this._q1val = this._g.append("text");
+        this._q2val = this._g.append("text");
+        this._q3val = this._g.append("text");
+        this._q4val = this._g.append("text");
+    }
+    update(domNode, element) {
+        super.update(domNode, element);
+        const valueSize = (this.orientation() === "horizontal" ? this.width() : this.height()) - this.lineWidth();
+        const domainSize = this.orientation() === "horizontal" ? this.height() : this.width();
+        const scale = d3ScaleLinear()
+            .domain([
+                this.data()[0],
+                this.data()[4]
+            ])
+            .range([
+                this.edgePadding(),
+                valueSize - this.edgePadding()
+            ])
+            ;
+        const candleWidth = this.candleWidth_exists() ? this.candleWidth() : domainSize;
+        const lineWidth = this.lineWidth();
+        const lineColor = this.lineColor();
+        const roundedCorners = this.roundedCorners();
+        const q0x = this.edgePadding();
+        let q1x = scale(this.data()[1]);
+        let q2x = scale(this.data()[2]);
+        let q3x = scale(this.data()[3]);
+        const dataTop = -candleWidth / 2;
+        const dataBottom = candleWidth / 2;
+        const upperTextRotation = this.upperTextRotation();
+        const lowerTextRotation = this.lowerTextRotation();
+        const padding = this.textPadding();
+        const labelFontSize = this.labelFontSize();
+        const valueFontSize = this.valueFontSize();
+        const sz = Math.max(labelFontSize, valueFontSize);
+        const q4x = valueSize - q0x;
+        if (sz > 0) {
+            while (q1x - q0x < sz) {
+                q1x += sz;
+            }
+            while (q2x - q1x < sz) {
+                q2x += sz;
+            }
+            while (q3x - q2x < sz) {
+                q3x += sz;
+            }
+            while (q4x - q3x < sz) {
+                q3x -= sz;
+            }
+            while (q3x - q2x < sz) {
+                q2x -= sz;
+            }
+            while (q2x - q1x < sz) {
+                q1x -= sz;
+            }
+        }
+        let transX = (-valueSize / 2) - (this.lineWidth() / 2);
+        let transY = 0;
+        let rotate = 0;
+        const s = 1;
+        let textScale = 1;
+        let labelAnchor = "start";
+        let valueAnchor = "end";
+        if (this.orientation() === "vertical") {
+            transX = 0;
+            transY = valueSize / 2 + (this.lineWidth() / 2);
+            rotate = -90;
+            labelAnchor = "end";
+            valueAnchor = "start";
+            textScale = -1;
+        }
+        this._g
+            .style("shape-rendering", "crispEdges")
+            .attr("transform", `translate(${transX},${transY})rotate(${rotate})scale(${s})`)
+            ;
+        this._leftLine
+            .attr("fill", lineColor)
+            .attr("height", candleWidth)
+            .attr("width", lineWidth)
+            .attr("x", q0x)
+            .attr("y", dataTop)
+            .attr("rx", roundedCorners)
+            .attr("ry", roundedCorners)
+            ;
+        this._rightLine
+            .attr("class", "right-line")
+            .attr("fill", lineColor)
+            .attr("height", candleWidth)
+            .attr("width", lineWidth)
+            .attr("x", q4x)
+            .attr("y", dataTop)
+            .attr("rx", roundedCorners)
+            .attr("ry", roundedCorners)
+            ;
+        this._midLine
+            .attr("fill", lineColor)
+            .attr("height", lineWidth)
+            .attr("width", q4x - q0x)
+            .attr("x", q0x)
+            .attr("y", -lineWidth / 2)
+            ;
+        this._midOuterRect
+            .attr("fill", lineColor)
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("x", q1x)
+            .attr("y", dataTop)
+            .attr("rx", roundedCorners)
+            .attr("ry", roundedCorners)
+            ;
+        this._midInnerRect1
+            .attr("fill", this.innerRectColor())
+            .attr("height", candleWidth - (lineWidth * 2))
+            .attr("width", q2x - (q1x + (lineWidth * 2)))
+            .attr("x", q1x + lineWidth)
+            .attr("y", lineWidth - (candleWidth / 2))
+            .attr("rx", roundedCorners * 0.618)
+            .attr("ry", roundedCorners * 0.618)
+            ;
+        this._midInnerRect2
+            .attr("fill", this.innerRectColor())
+            .attr("height", candleWidth - (lineWidth * 2))
+            .attr("width", q3x - q2x - lineWidth)
+            .attr("x", q2x)
+            .attr("y", lineWidth - (candleWidth / 2))
+            .attr("rx", roundedCorners * 0.618)
+            .attr("ry", roundedCorners * 0.618)
+            ;
+        this._q0text
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showLabels() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q0x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
+            .attr("font-size", labelFontSize)
+            .attr("text-anchor", labelAnchor)
+            .attr("alignment-baseline", "hanging")
+            .text(this.columns()[0])
+            ;
+        this._q1text
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showLabels() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q1x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
+            .attr("font-size", labelFontSize)
+            .attr("text-anchor", labelAnchor)
+            .attr("alignment-baseline", "middle")
+            .text(this.columns()[1])
+            ;
+        this._q2text
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showLabels() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q2x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
+            .attr("font-size", labelFontSize)
+            .attr("text-anchor", labelAnchor)
+            .attr("alignment-baseline", "middle")
+            .text(this.columns()[2])
+            ;
+        this._q3text
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showLabels() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q3x}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
+            .attr("font-size", labelFontSize)
+            .attr("text-anchor", labelAnchor)
+            .attr("alignment-baseline", "middle")
+            .text(this.columns()[3])
+            ;
+        this._q4text
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showLabels() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q4x + lineWidth}, ${dataTop - padding})rotate(${upperTextRotation})scale(${textScale})`)
+            .attr("font-size", labelFontSize)
+            .attr("text-anchor", labelAnchor)
+            .attr("alignment-baseline", "baseline")
+            .text(this.columns()[4])
+            ;
+        this._q0val
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showValues() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q0x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
+            .attr("font-size", valueFontSize)
+            .attr("text-anchor", valueAnchor)
+            .attr("alignment-baseline", "hanging")
+            .text(this.data()[0])
+            ;
+        this._q1val
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showValues() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q1x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
+            .attr("font-size", valueFontSize)
+            .attr("text-anchor", valueAnchor)
+            .attr("alignment-baseline", "middle")
+            .text(this.data()[1])
+            ;
+        this._q2val
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showValues() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q2x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
+            .attr("font-size", valueFontSize)
+            .attr("text-anchor", valueAnchor)
+            .attr("alignment-baseline", "middle")
+            .text(this.data()[2])
+            ;
+        this._q3val
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showValues() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q3x}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
+            .attr("font-size", valueFontSize)
+            .attr("text-anchor", valueAnchor)
+            .attr("alignment-baseline", "middle")
+            .text(this.data()[3])
+            ;
+        this._q4val
+            .attr("height", candleWidth)
+            .attr("width", q3x - q1x)
+            .attr("display", this.showValues() ? null : "none")
+            .attr("fill", this.textColor())
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("transform", `translate(${q4x + lineWidth}, ${dataBottom + padding})rotate(${lowerTextRotation})scale(${textScale})`)
+            .attr("font-size", valueFontSize)
+            .attr("text-anchor", valueAnchor)
+            .attr("alignment-baseline", "baseline")
+            .text(this.data()[4])
+            ;
+    }
+}
+QuartileCandlestick.prototype._class += " chart_QuartileCandlestick";
+
+export interface QuartileCandlestick {
+    orientation(): "horizontal" | "vertical";
+    orientation(_: "horizontal" | "vertical"): this;
+    textPadding(): number;
+    textPadding(_: number): this;
+    edgePadding(): number;
+    edgePadding(_: number): this;
+    candleWidth(): number;
+    candleWidth(_: number): this;
+    candleWidth_exists(): boolean;
+    lineWidth(): number;
+    lineWidth(_: number): this;
+    lineColor(): string;
+    lineColor(_: string): this;
+    innerRectColor(): string;
+    innerRectColor(_: string): this;
+    lowerTextRotation(): number;
+    lowerTextRotation(_: number): this;
+    upperTextRotation(): number;
+    upperTextRotation(_: number): this;
+    roundedCorners(): number;
+    roundedCorners(_: number): this;
+    labelFontSize(): number;
+    labelFontSize(_: number): this;
+    valueFontSize(): number;
+    valueFontSize(_: number): this;
+    textColor(): string;
+    textColor(_: string): this;
+    showLabels(): boolean;
+    showLabels(_: boolean): this;
+    showValues(): boolean;
+    showValues(_: boolean): this;
+}
+QuartileCandlestick.prototype.publish("textColor", "black", "html-color", "Color of label and value text");
+QuartileCandlestick.prototype.publish("showLabels", true, "boolean", "If true, labels will be shown");
+QuartileCandlestick.prototype.publish("showValues", true, "boolean", "If true, values will be shown");
+QuartileCandlestick.prototype.publish("orientation", "horizontal", "set", "Determines layout", ["horizontal", "vertical"]);
+QuartileCandlestick.prototype.publish("valueFontSize", 12, "number", "Font size of value text (pixels)");
+QuartileCandlestick.prototype.publish("labelFontSize", 12, "number", "Font size of label text (pixels)");
+QuartileCandlestick.prototype.publish("roundedCorners", 8, "number", "Radius of rounded rect corners (pixels)");
+QuartileCandlestick.prototype.publish("lineWidth", 4, "number", "Width of lines (pixels)");
+QuartileCandlestick.prototype.publish("candleWidth", null, "number", "Height of outer rect (pixels)", null, {optional: true});
+QuartileCandlestick.prototype.publish("textPadding", 8, "number", "Padding between outer rect and text (pixels)");
+QuartileCandlestick.prototype.publish("edgePadding", 30, "number", "Padding between outer rect and left/right sides (pixels)");
+QuartileCandlestick.prototype.publish("lineColor", "#333", "html-color", "Color of outer rect and lines");
+QuartileCandlestick.prototype.publish("innerRectColor", "white", "html-color", "Color of the inner rects");
+QuartileCandlestick.prototype.publish("upperTextRotation", -60, "number", "Rotation of label text (degrees)");
+QuartileCandlestick.prototype.publish("lowerTextRotation", -60, "number", "Rotation of value text (degrees)");