@hpcc-js/chart 3.7.2 → 3.7.4

package/src/StatChart.ts

@@ -1,261 +1,261 @@
-import { format as d3Format, HTMLWidget, Palette } from "@hpcc-js/common";
-import { QuartileCandlestick } from "./QuartileCandlestick.ts";
-import { Scatter } from "./Scatter.ts";
-
-const rainbow = Palette.rainbow("Blues");
-const palette = Palette.ordinal("Quartile", [rainbow(100, 0, 100), rainbow(50, 0, 100), rainbow(50, 0, 100), rainbow(75, 0, 100)]);
-palette("Std. Dev.");
-palette("MinMax");
-palette("25%");
-palette("50%");
-
-type View = "min_max" | "25_75" | "normal";
-type Tick = { label: string, value: number };
-type Ticks = Tick[];
-type AxisTick = { label: string, value: string };
-type AxisTicks = AxisTick[];
-
-function myFormatter(format: string): (num: number) => string {
-    const formatter = d3Format(format);
-    return function (num: number) {
-        const strVal = (Math.round(num * 100) / 100).toString();
-        if (strVal.length <= 4) return strVal;
-        return formatter(num);
-    };
-}
-
-export type StatChartView = "min_max" | "25_75" | "normal";
-export type Quartiles = [number, number, number, number, number];
-export type Data = [[number, number, number, number, number, number, number]];
-
-export class StatChart extends HTMLWidget {
-
-    protected _selectElement: any;
-    protected _tickFormatter: (_: number) => string;
-
-    protected _bellCurve: Scatter = new Scatter()
-        .columns(["", "Std. Dev."])
-        .paletteID("Quartile")
-        .interpolate_default("basis")
-        .pointSize(0)
-        .xAxisType("linear")
-        .xAxisOverlapMode("none")
-        .xAxisTickFormat(",")
-        .yAxisHidden(true)
-        .yAxisDomainLow(0)
-        .yAxisDomainHigh(110)
-        .yAxisGuideLines(false) as Scatter
-        ;
-
-    protected _candle = new QuartileCandlestick()
-        .columns(["Min", "25%", "50%", "75%", "Max"])
-        .edgePadding(0)
-        .roundedCorners(1)
-        .lineWidth(1)
-        .upperTextRotation(-90)
-        .lowerTextRotation(-90)
-        .labelFontSize(0)
-        .valueFontSize(0)
-        .lineColor(rainbow(90, 0, 100))
-        .innerRectColor(rainbow(10, 0, 100))
-        ;
-
-    constructor() {
-        super();
-        this
-            .columns(["Min", "25%", "50%", "75%", "Max", "Mean", "Std. Dev."])
-            ;
-    }
-
-    protected stdDev(degrees: number): number {
-        return this.mean() + degrees * this.standardDeviation();
-    }
-
-    protected formatStdDev(degrees: number): string {
-        return this._tickFormatter(this.stdDev(degrees));
-    }
-
-    protected quartile(q: 0 | 1 | 2 | 3 | 4): number {
-        return this.quartiles()[q];
-    }
-
-    protected formatQ(q: 0 | 1 | 2 | 3 | 4): string {
-        return this._tickFormatter(this.quartile(q));
-    }
-
-    protected domain(mode: View): [number, number] {
-        switch (mode) {
-            case "25_75":
-                return [this.quartile(1), this.quartile(3)];
-            case "normal":
-                return [this.stdDev(-4), this.stdDev(4)];
-            case "min_max":
-            default:
-                return [this.quartile(0), this.quartile(4)];
-        }
-    }
-
-    protected min(): number {
-        return this.quartile(0);
-    }
-
-    protected max(): number {
-        return this.quartile(4);
-    }
-
-    data(): Data;
-    data(_: Data): this;
-    data(_?: Data): Data | this {
-        if (!arguments.length) return [[...this.quartiles(), this.mean(), this.standardDeviation()]];
-        const row = _[0];
-        this.quartiles([row[0], row[1], row[2], row[3], row[4]]);
-        this.mean(row[5]);
-        this.standardDeviation(row[6]);
-        return this;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        this._bellCurve.target(element.append("div").node());
-
-        this._candle.target(element.append("div").node());
-
-        this._selectElement = element.append("div")
-            .style("position", "absolute")
-            .style("top", "0px")
-            .style("right", "0px").append("select")
-            .on("change", () => {
-                this.view(this._selectElement.node().value);
-                this.lazyRender();
-            })
-            ;
-        this._selectElement.append("option").attr("value", "min_max").text("Min / Max");
-        this._selectElement.append("option").attr("value", "25_75").text("25% / 75%");
-        this._selectElement.append("option").attr("value", "normal").text("Normal");
-    }
-
-    protected bellTicks(mode: View): AxisTicks {
-        let ticks: Ticks;
-        switch (mode) {
-            case "25_75":
-                ticks = [
-                    { label: this.formatQ(1), value: this.quartile(1) },
-                    { label: this.formatQ(2), value: this.quartile(2) },
-                    { label: this.formatQ(3), value: this.quartile(3) }
-                ];
-                break;
-            case "normal":
-                ticks = [
-                    { label: this.formatStdDev(-4), value: this.stdDev(-4) },
-                    { label: "-3σ", value: this.stdDev(-3) },
-                    { label: "-2σ", value: this.stdDev(-2) },
-                    { label: "-1σ", value: this.stdDev(-1) },
-                    { label: this.formatStdDev(0), value: this.stdDev(0) },
-                    { label: "+1σ", value: this.stdDev(1) },
-                    { label: "+2σ", value: this.stdDev(2) },
-                    { label: "+3σ", value: this.stdDev(3) },
-                    { label: this.formatStdDev(4), value: this.stdDev(4) }
-                ];
-                break;
-            case "min_max":
-            default:
-                ticks = [
-                    { label: this.formatQ(0), value: this.quartile(0) },
-                    { label: this.formatQ(1), value: this.quartile(1) },
-                    { label: this.formatQ(2), value: this.quartile(2) },
-                    { label: this.formatQ(3), value: this.quartile(3) },
-                    { label: this.formatQ(4), value: this.quartile(4) }
-                ];
-        }
-
-        const [domainLow, domainHigh] = this.domain(this._selectElement.node().value);
-        return ticks
-            .filter(sd => sd.value >= domainLow && sd.value <= domainHigh)
-            .map(sd => ({ label: sd.label, value: sd.value.toString() }))
-            ;
-    }
-
-    updateScatter() {
-        const mode = this._selectElement.node().value;
-        const [domainLow, domainHigh] = this.domain(mode);
-        const padding = (domainHigh - domainLow) * (this.domainPadding() / 100);
-
-        this._bellCurve
-            .xAxisDomainLow(domainLow - padding)
-            .xAxisDomainHigh(domainHigh + padding)
-            .xAxisTicks(this.bellTicks(mode))
-            .data([
-                [this.stdDev(-4), 0],
-                [this.stdDev(-3), 0.3],
-                [this.stdDev(-2), 5],
-                [this.stdDev(-1), 68],
-                [this.stdDev(0), 100],
-                [this.stdDev(1), 68],
-                [this.stdDev(2), 5],
-                [this.stdDev(3), 0.3],
-                [this.stdDev(4), 0]
-            ])
-            .resize({ width: this.width(), height: this.height() - this.candleHeight() })
-            .render()
-            ;
-    }
-
-    updateCandle() {
-        const candleX = this._bellCurve.dataPos(this.quartile(0));
-        const candleW = this._bellCurve.dataPos(this.quartile(4)) - candleX;
-        this._candle
-            .resize({ width: this.width(), height: this.candleHeight() })
-            .pos({ x: (candleX + candleW / 2) + 2, y: this.candleHeight() / 2 })
-            .width(candleW)
-            .candleWidth(this.candleHeight())
-            .data(this.quartiles())
-            .render()
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        this._tickFormatter = myFormatter(this.tickFormat());
-        this._selectElement.node().value = this.view();
-        this.updateScatter();
-        this.updateCandle();
-    }
-
-    exit(domNode, element) {
-        this._bellCurve.target(null);
-        this._candle.target(null);
-        this._selectElement.remove();
-
-        super.exit(domNode, element);
-    }
-}
-StatChart.prototype._class += " chart_StatChart";
-
-export interface StatChart {
-    view(): StatChartView;
-    view(_: StatChartView): this;
-
-    tickFormat(): string;
-    tickFormat(_: string): this;
-    candleHeight(): number;
-    candleHeight(_: number): this;
-    domainPadding(): number;
-    domainPadding(_: number): this;
-
-    mean(): number;
-    mean(_: number): this;
-    standardDeviation(): number;
-    standardDeviation(_: number): this;
-    quartiles(): Quartiles;
-    quartiles(_: Quartiles): this;
-}
-StatChart.prototype.publish("view", "min_max", "set", "View", ["min_max", "25_75", "normal"]);
-
-StatChart.prototype.publish("tickFormat", ".2e", "string", "X-Axis Tick Format");
-StatChart.prototype.publish("candleHeight", 20, "number", "Height of candle widget (pixels)");
-StatChart.prototype.publish("domainPadding", 10, "number", "Domain value padding");
-
-StatChart.prototype.publish("mean", .5, "number", "Mean");
-StatChart.prototype.publish("standardDeviation", .125, "number", "Standard Deviation (σ)");
-StatChart.prototype.publish("quartiles", [0, .25, .5, .75, 1], "object", "Quartiles (Min, 25%, 50%, 75%, Max)");
+import { format as d3Format, HTMLWidget, Palette } from "@hpcc-js/common";
+import { QuartileCandlestick } from "./QuartileCandlestick.ts";
+import { Scatter } from "./Scatter.ts";
+
+const rainbow = Palette.rainbow("Blues");
+const palette = Palette.ordinal("Quartile", [rainbow(100, 0, 100), rainbow(50, 0, 100), rainbow(50, 0, 100), rainbow(75, 0, 100)]);
+palette("Std. Dev.");
+palette("MinMax");
+palette("25%");
+palette("50%");
+
+type View = "min_max" | "25_75" | "normal";
+type Tick = { label: string, value: number };
+type Ticks = Tick[];
+type AxisTick = { label: string, value: string };
+type AxisTicks = AxisTick[];
+
+function myFormatter(format: string): (num: number) => string {
+    const formatter = d3Format(format);
+    return function (num: number) {
+        const strVal = (Math.round(num * 100) / 100).toString();
+        if (strVal.length <= 4) return strVal;
+        return formatter(num);
+    };
+}
+
+export type StatChartView = "min_max" | "25_75" | "normal";
+export type Quartiles = [number, number, number, number, number];
+export type Data = [[number, number, number, number, number, number, number]];
+
+export class StatChart extends HTMLWidget {
+
+    protected _selectElement: any;
+    protected _tickFormatter: (_: number) => string;
+
+    protected _bellCurve: Scatter = new Scatter()
+        .columns(["", "Std. Dev."])
+        .paletteID("Quartile")
+        .interpolate_default("basis")
+        .pointSize(0)
+        .xAxisType("linear")
+        .xAxisOverlapMode("none")
+        .xAxisTickFormat(",")
+        .yAxisHidden(true)
+        .yAxisDomainLow(0)
+        .yAxisDomainHigh(110)
+        .yAxisGuideLines(false) as Scatter
+        ;
+
+    protected _candle = new QuartileCandlestick()
+        .columns(["Min", "25%", "50%", "75%", "Max"])
+        .edgePadding(0)
+        .roundedCorners(1)
+        .lineWidth(1)
+        .upperTextRotation(-90)
+        .lowerTextRotation(-90)
+        .labelFontSize(0)
+        .valueFontSize(0)
+        .lineColor(rainbow(90, 0, 100))
+        .innerRectColor(rainbow(10, 0, 100))
+        ;
+
+    constructor() {
+        super();
+        this
+            .columns(["Min", "25%", "50%", "75%", "Max", "Mean", "Std. Dev."])
+            ;
+    }
+
+    protected stdDev(degrees: number): number {
+        return this.mean() + degrees * this.standardDeviation();
+    }
+
+    protected formatStdDev(degrees: number): string {
+        return this._tickFormatter(this.stdDev(degrees));
+    }
+
+    protected quartile(q: 0 | 1 | 2 | 3 | 4): number {
+        return this.quartiles()[q];
+    }
+
+    protected formatQ(q: 0 | 1 | 2 | 3 | 4): string {
+        return this._tickFormatter(this.quartile(q));
+    }
+
+    protected domain(mode: View): [number, number] {
+        switch (mode) {
+            case "25_75":
+                return [this.quartile(1), this.quartile(3)];
+            case "normal":
+                return [this.stdDev(-4), this.stdDev(4)];
+            case "min_max":
+            default:
+                return [this.quartile(0), this.quartile(4)];
+        }
+    }
+
+    protected min(): number {
+        return this.quartile(0);
+    }
+
+    protected max(): number {
+        return this.quartile(4);
+    }
+
+    data(): Data;
+    data(_: Data): this;
+    data(_?: Data): Data | this {
+        if (!arguments.length) return [[...this.quartiles(), this.mean(), this.standardDeviation()]];
+        const row = _[0];
+        this.quartiles([row[0], row[1], row[2], row[3], row[4]]);
+        this.mean(row[5]);
+        this.standardDeviation(row[6]);
+        return this;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        this._bellCurve.target(element.append("div").node());
+
+        this._candle.target(element.append("div").node());
+
+        this._selectElement = element.append("div")
+            .style("position", "absolute")
+            .style("top", "0px")
+            .style("right", "0px").append("select")
+            .on("change", () => {
+                this.view(this._selectElement.node().value);
+                this.lazyRender();
+            })
+            ;
+        this._selectElement.append("option").attr("value", "min_max").text("Min / Max");
+        this._selectElement.append("option").attr("value", "25_75").text("25% / 75%");
+        this._selectElement.append("option").attr("value", "normal").text("Normal");
+    }
+
+    protected bellTicks(mode: View): AxisTicks {
+        let ticks: Ticks;
+        switch (mode) {
+            case "25_75":
+                ticks = [
+                    { label: this.formatQ(1), value: this.quartile(1) },
+                    { label: this.formatQ(2), value: this.quartile(2) },
+                    { label: this.formatQ(3), value: this.quartile(3) }
+                ];
+                break;
+            case "normal":
+                ticks = [
+                    { label: this.formatStdDev(-4), value: this.stdDev(-4) },
+                    { label: "-3σ", value: this.stdDev(-3) },
+                    { label: "-2σ", value: this.stdDev(-2) },
+                    { label: "-1σ", value: this.stdDev(-1) },
+                    { label: this.formatStdDev(0), value: this.stdDev(0) },
+                    { label: "+1σ", value: this.stdDev(1) },
+                    { label: "+2σ", value: this.stdDev(2) },
+                    { label: "+3σ", value: this.stdDev(3) },
+                    { label: this.formatStdDev(4), value: this.stdDev(4) }
+                ];
+                break;
+            case "min_max":
+            default:
+                ticks = [
+                    { label: this.formatQ(0), value: this.quartile(0) },
+                    { label: this.formatQ(1), value: this.quartile(1) },
+                    { label: this.formatQ(2), value: this.quartile(2) },
+                    { label: this.formatQ(3), value: this.quartile(3) },
+                    { label: this.formatQ(4), value: this.quartile(4) }
+                ];
+        }
+
+        const [domainLow, domainHigh] = this.domain(this._selectElement.node().value);
+        return ticks
+            .filter(sd => sd.value >= domainLow && sd.value <= domainHigh)
+            .map(sd => ({ label: sd.label, value: sd.value.toString() }))
+            ;
+    }
+
+    updateScatter() {
+        const mode = this._selectElement.node().value;
+        const [domainLow, domainHigh] = this.domain(mode);
+        const padding = (domainHigh - domainLow) * (this.domainPadding() / 100);
+
+        this._bellCurve
+            .xAxisDomainLow(domainLow - padding)
+            .xAxisDomainHigh(domainHigh + padding)
+            .xAxisTicks(this.bellTicks(mode))
+            .data([
+                [this.stdDev(-4), 0],
+                [this.stdDev(-3), 0.3],
+                [this.stdDev(-2), 5],
+                [this.stdDev(-1), 68],
+                [this.stdDev(0), 100],
+                [this.stdDev(1), 68],
+                [this.stdDev(2), 5],
+                [this.stdDev(3), 0.3],
+                [this.stdDev(4), 0]
+            ])
+            .resize({ width: this.width(), height: this.height() - this.candleHeight() })
+            .render()
+            ;
+    }
+
+    updateCandle() {
+        const candleX = this._bellCurve.dataPos(this.quartile(0));
+        const candleW = this._bellCurve.dataPos(this.quartile(4)) - candleX;
+        this._candle
+            .resize({ width: this.width(), height: this.candleHeight() })
+            .pos({ x: (candleX + candleW / 2) + 2, y: this.candleHeight() / 2 })
+            .width(candleW)
+            .candleWidth(this.candleHeight())
+            .data(this.quartiles())
+            .render()
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        this._tickFormatter = myFormatter(this.tickFormat());
+        this._selectElement.node().value = this.view();
+        this.updateScatter();
+        this.updateCandle();
+    }
+
+    exit(domNode, element) {
+        this._bellCurve.target(null);
+        this._candle.target(null);
+        this._selectElement.remove();
+
+        super.exit(domNode, element);
+    }
+}
+StatChart.prototype._class += " chart_StatChart";
+
+export interface StatChart {
+    view(): StatChartView;
+    view(_: StatChartView): this;
+
+    tickFormat(): string;
+    tickFormat(_: string): this;
+    candleHeight(): number;
+    candleHeight(_: number): this;
+    domainPadding(): number;
+    domainPadding(_: number): this;
+
+    mean(): number;
+    mean(_: number): this;
+    standardDeviation(): number;
+    standardDeviation(_: number): this;
+    quartiles(): Quartiles;
+    quartiles(_: Quartiles): this;
+}
+StatChart.prototype.publish("view", "min_max", "set", "View", ["min_max", "25_75", "normal"]);
+
+StatChart.prototype.publish("tickFormat", ".2e", "string", "X-Axis Tick Format");
+StatChart.prototype.publish("candleHeight", 20, "number", "Height of candle widget (pixels)");
+StatChart.prototype.publish("domainPadding", 10, "number", "Domain value padding");
+
+StatChart.prototype.publish("mean", .5, "number", "Mean");
+StatChart.prototype.publish("standardDeviation", .125, "number", "Standard Deviation (σ)");
+StatChart.prototype.publish("quartiles", [0, .25, .5, .75, 1], "object", "Quartiles (Min, 25%, 50%, 75%, Max)");