@sentropic/design-system-angular 0.36.54

package/dist/HistogramChart.js

@@ -0,0 +1,289 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { scaleLinear, niceTicks } from "./chartScale.js";
+import * as i0 from "@angular/core";
+const MARGIN = { top: 14, right: 16, bottom: 36, left: 44 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+export class HistogramChart {
+    static stComponentName = "HistogramChart";
+    componentName = "HistogramChart";
+    MARGIN = MARGIN;
+    hoveredIndex = null;
+    data = [];
+    bins;
+    width;
+    height;
+    label = "";
+    classInput;
+    get hostClass() {
+        return classNames("st-histogramChart", this.classInput);
+    }
+    get widthValue() {
+        return this.width ?? 480;
+    }
+    get heightValue() {
+        return this.height ?? 240;
+    }
+    get viewBox() {
+        return `0 0 ${this.widthValue} ${this.heightValue}`;
+    }
+    get plotWidth() {
+        return Math.max(this.widthValue - MARGIN.left - MARGIN.right, 1);
+    }
+    get plotHeight() {
+        return Math.max(this.heightValue - MARGIN.top - MARGIN.bottom, 1);
+    }
+    isNumberArray(values) {
+        return values.every((value) => typeof value === "number");
+    }
+    formatNumber(value) {
+        if (!Number.isFinite(value))
+            return "0";
+        if (Number.isInteger(value))
+            return String(value);
+        return value.toFixed(2).replace(/\.?0+$/, "");
+    }
+    buildNumericBins(values, count) {
+        const finite = values.filter(Number.isFinite);
+        if (finite.length === 0)
+            return [];
+        const binCount = Math.max(1, Math.floor(count));
+        const min = Math.min(...finite);
+        const max = Math.max(...finite);
+        const step = max === min ? 1 : (max - min) / binCount;
+        const out = Array.from({ length: binCount }, (_, index) => {
+            const start = min + step * index;
+            const end = index === binCount - 1 ? max : min + step * (index + 1);
+            return {
+                label: `${this.formatNumber(start)}-${this.formatNumber(end)}`,
+                value: 0,
+                tone: TONES[index % TONES.length] ?? "category1",
+            };
+        });
+        for (const value of finite) {
+            const index = value === max ? binCount - 1 : Math.max(0, Math.min(binCount - 1, Math.floor((value - min) / step)));
+            out[index].value += 1;
+        }
+        return out;
+    }
+    get normalizedBins() {
+        const safeData = this.data ?? [];
+        if (this.isNumberArray(safeData)) {
+            return this.buildNumericBins(safeData, this.bins ?? 10);
+        }
+        return safeData.map((datum, index) => ({
+            label: datum.label,
+            value: Number.isFinite(datum.value) ? datum.value : 0,
+            tone: datum.tone ?? TONES[index % TONES.length] ?? "category1",
+        }));
+    }
+    get bars() {
+        const bins = this.normalizedBins;
+        const maxValue = Math.max(0, ...bins.map((bin) => bin.value));
+        const safeMax = maxValue > 0 ? maxValue : 1;
+        const band = bins.length > 0 ? this.plotWidth / bins.length : this.plotWidth;
+        const barWidth = Math.max(band * 0.68, 1);
+        return bins.map((bin, index) => {
+            const h = scaleLinear(bin.value, 0, safeMax, 0, this.plotHeight);
+            return {
+                bin,
+                x: MARGIN.left + band * index + (band - barWidth) / 2,
+                y: MARGIN.top + this.plotHeight - h,
+                width: barWidth,
+                height: Math.max(h, 0.5),
+                labelX: MARGIN.left + band * (index + 0.5),
+            };
+        });
+    }
+    get dataValueItems() {
+        return this.normalizedBins.map((bin) => `${bin.label}: ${bin.value}`);
+    }
+    barClass(bar, i) {
+        return classNames("st-histogramChart__bar", `st-histogramChart__bar--${bar.bin.tone}`, this.hoveredIndex !== null && this.hoveredIndex !== i && "st-histogramChart__bar--dim");
+    }
+    tooltipLeft(bar) {
+        return (bar.labelX / this.widthValue) * 100;
+    }
+    tooltipTop(bar) {
+        return (bar.y / this.heightValue) * 100;
+    }
+    handleVisualPointerMove(event) {
+        const target = event.target;
+        const raw = Number(target?.getAttribute?.("data-chart-index"));
+        this.hoveredIndex = Number.isInteger(raw) && !isNaN(raw) ? raw : null;
+    }
+    handleLeave() {
+        this.hoveredIndex = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HistogramChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: HistogramChart, isStandalone: true, selector: "st-histogram-chart", inputs: { data: "data", bins: "bins", width: "width", height: "height", label: "label", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-histogramChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          <line
+            class="st-histogramChart__axis"
+            [attr.x1]="MARGIN.left"
+            [attr.x2]="MARGIN.left"
+            [attr.y1]="MARGIN.top"
+            [attr.y2]="heightValue - MARGIN.bottom"
+          ></line>
+          <line
+            class="st-histogramChart__axis"
+            [attr.x1]="MARGIN.left"
+            [attr.x2]="widthValue - MARGIN.right"
+            [attr.y1]="heightValue - MARGIN.bottom"
+            [attr.y2]="heightValue - MARGIN.bottom"
+          ></line>
+
+          @for (bar of bars; track bar.bin.label; let i = $index) {
+            <rect
+              [class]="barClass(bar, i)"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.data-chart-index]="i"
+            ></rect>
+            <text
+              class="st-histogramChart__label"
+              [attr.x]="bar.labelX"
+              [attr.y]="heightValue - MARGIN.bottom + 16"
+              text-anchor="middle"
+            >{{ bar.bin.label }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredIndex !== null && bars[hoveredIndex]) {
+        <div
+          class="st-histogramChart__tooltip"
+          role="presentation"
+          [style.left.%]="tooltipLeft(bars[hoveredIndex])"
+          [style.top.%]="tooltipTop(bars[hoveredIndex])"
+        >
+          <span class="st-histogramChart__tooltipLabel">{{ bars[hoveredIndex].bin.label }}</span>
+          <span class="st-histogramChart__tooltipValue">{{ bars[hoveredIndex].bin.value }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HistogramChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-histogram-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-histogramChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          <line
+            class="st-histogramChart__axis"
+            [attr.x1]="MARGIN.left"
+            [attr.x2]="MARGIN.left"
+            [attr.y1]="MARGIN.top"
+            [attr.y2]="heightValue - MARGIN.bottom"
+          ></line>
+          <line
+            class="st-histogramChart__axis"
+            [attr.x1]="MARGIN.left"
+            [attr.x2]="widthValue - MARGIN.right"
+            [attr.y1]="heightValue - MARGIN.bottom"
+            [attr.y2]="heightValue - MARGIN.bottom"
+          ></line>
+
+          @for (bar of bars; track bar.bin.label; let i = $index) {
+            <rect
+              [class]="barClass(bar, i)"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.data-chart-index]="i"
+            ></rect>
+            <text
+              class="st-histogramChart__label"
+              [attr.x]="bar.labelX"
+              [attr.y]="heightValue - MARGIN.bottom + 16"
+              text-anchor="middle"
+            >{{ bar.bin.label }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredIndex !== null && bars[hoveredIndex]) {
+        <div
+          class="st-histogramChart__tooltip"
+          role="presentation"
+          [style.left.%]="tooltipLeft(bars[hoveredIndex])"
+          [style.top.%]="tooltipTop(bars[hoveredIndex])"
+        >
+          <span class="st-histogramChart__tooltipLabel">{{ bars[hoveredIndex].bin.label }}</span>
+          <span class="st-histogramChart__tooltipValue">{{ bars[hoveredIndex].bin.value }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], bins: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=HistogramChart.js.map

package/dist/HistogramChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistogramChart.js","sourceRoot":"","sources":["../src/HistogramChart.ts"],"names":[],"mappings":"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"}

package/dist/HollowCandlestickChart.d.ts

@@ -0,0 +1,74 @@
+import * as i0 from "@angular/core";
+export type HollowCandlestickChartDatum = {
+    label: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+};
+export type HollowCandlestickChartProps = {
+    data: HollowCandlestickChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+type Candle = {
+    datum: HollowCandlestickChartDatum;
+    index: number;
+    up: boolean;
+    hollow: boolean;
+    centerX: number;
+    bodyX: number;
+    bodyY: number;
+    bodyW: number;
+    bodyH: number;
+    wickHighY: number;
+    wickLowY: number;
+    tooltipY: number;
+};
+type GridItem = {
+    tick: number;
+    y: number;
+};
+export declare class HollowCandlestickChart {
+    static readonly stComponentName = "HollowCandlestickChart";
+    readonly componentName = "HollowCandlestickChart";
+    readonly margin: {
+        readonly top: 12;
+        readonly right: 16;
+        readonly bottom: 32;
+        readonly left: 52;
+    };
+    private hoveredIndex;
+    data: HollowCandlestickChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    classInput?: string;
+    get hostClass(): string;
+    get widthValue(): number;
+    get heightValue(): number;
+    get viewBox(): string;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get validData(): HollowCandlestickChartDatum[];
+    get ticks(): number[];
+    get domainMin(): number;
+    get domainMax(): number;
+    get gridItems(): GridItem[];
+    get candles(): Candle[];
+    get dataValueItems(): string[];
+    get hoveredCandle(): Candle | null;
+    wickClass(c: Candle): string;
+    candleClass(c: Candle): string;
+    formatTickLabel(tick: number): string;
+    tooltipLeftPct(c: Candle): string;
+    tooltipTopPct(c: Candle): string;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HollowCandlestickChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HollowCandlestickChart, "st-hollow-candlestick-chart", never, { "data": { "alias": "data"; "required": false; }; "label": { "alias": "label"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=HollowCandlestickChart.d.ts.map

package/dist/HollowCandlestickChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HollowCandlestickChart.d.ts","sourceRoot":"","sources":["../src/HollowCandlestickChart.ts"],"names":[],"mappings":";AAMA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,2BAA2B,EAAE,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,2BAA2B,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,OAAO,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,qBAkFa,sBAAsB;IACjC,MAAM,CAAC,QAAQ,CAAC,eAAe,4BAA4B;IAC3D,QAAQ,CAAC,aAAa,4BAA4B;IAClD,QAAQ,CAAC,MAAM;;;;;MAAU;IAEzB,OAAO,CAAC,YAAY,CAAuB;IAEhC,IAAI,EAAE,2BAA2B,EAAE,CAAM;IACzC,KAAK,SAAM;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IACT,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,IAAI,SAAS,IAAI,2BAA2B,EAAE,CAQ7C;IAED,IAAI,KAAK,IAAI,MAAM,EAAE,CAUpB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,IAAI,QAAQ,EAAE,CAK1B;IAED,IAAI,OAAO,IAAI,MAAM,EAAE,CA8BtB;IAED,IAAI,cAAc,IAAI,MAAM,EAAE,CAI7B;IAED,IAAI,aAAa,IAAI,MAAM,GAAG,IAAI,CAEjC;IAED,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAI5B,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAU9B,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAIrC,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAIjC,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAIhC,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;IAM5C,kBAAkB,IAAI,IAAI;yCApJf,sBAAsB;2CAAtB,sBAAsB;CAuJlC"}

package/dist/HollowCandlestickChart.js

@@ -0,0 +1,302 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { formatTick, niceTicks, scaleLinear } from "./chartScale.js";
+import * as i0 from "@angular/core";
+const MARGIN = { top: 12, right: 16, bottom: 32, left: 52 };
+export class HollowCandlestickChart {
+    static stComponentName = "HollowCandlestickChart";
+    componentName = "HollowCandlestickChart";
+    margin = MARGIN;
+    hoveredIndex = null;
+    data = [];
+    label = "";
+    width;
+    height;
+    classInput;
+    get hostClass() {
+        return classNames("st-hollowCandlestickChart", this.classInput);
+    }
+    get widthValue() {
+        return this.width ?? 480;
+    }
+    get heightValue() {
+        return this.height ?? 240;
+    }
+    get viewBox() {
+        return `0 0 ${this.widthValue} ${this.heightValue}`;
+    }
+    get plotWidth() {
+        return Math.max(this.widthValue - MARGIN.left - MARGIN.right, 1);
+    }
+    get plotHeight() {
+        return Math.max(this.heightValue - MARGIN.top - MARGIN.bottom, 1);
+    }
+    get validData() {
+        return this.data.filter((d) => Number.isFinite(d.open) &&
+            Number.isFinite(d.high) &&
+            Number.isFinite(d.low) &&
+            Number.isFinite(d.close));
+    }
+    get ticks() {
+        const allVals = [];
+        for (const d of this.validData) {
+            allVals.push(d.open, d.high, d.low, d.close);
+        }
+        if (allVals.length === 0)
+            return [0, 1];
+        const rawMin = Math.min(...allVals);
+        const rawMax = Math.max(...allVals);
+        const safeMax = rawMax === rawMin ? rawMin + 1 : rawMax;
+        return niceTicks(rawMin, safeMax, 5);
+    }
+    get domainMin() {
+        return this.ticks[0] ?? 0;
+    }
+    get domainMax() {
+        return this.ticks[this.ticks.length - 1] ?? 1;
+    }
+    get gridItems() {
+        return this.ticks.map((tick) => ({
+            tick,
+            y: MARGIN.top + scaleLinear(tick, this.domainMin, this.domainMax, this.plotHeight, 0),
+        }));
+    }
+    get candles() {
+        if (this.validData.length === 0)
+            return [];
+        const band = this.plotWidth / this.validData.length;
+        const bodyW = band * 0.55;
+        return this.validData.map((d, i) => {
+            const clampedHigh = Math.max(d.high, d.open, d.close);
+            const clampedLow = Math.min(d.low, d.open, d.close);
+            const prevClose = i > 0 ? this.validData[i - 1].close : d.open;
+            const up = d.close >= prevClose;
+            const hollow = d.close >= d.open;
+            const centerX = MARGIN.left + band * i + band / 2;
+            const bodyTop = MARGIN.top + scaleLinear(Math.max(d.open, d.close), this.domainMin, this.domainMax, this.plotHeight, 0);
+            const bodyBot = MARGIN.top + scaleLinear(Math.min(d.open, d.close), this.domainMin, this.domainMax, this.plotHeight, 0);
+            const highY = MARGIN.top + scaleLinear(clampedHigh, this.domainMin, this.domainMax, this.plotHeight, 0);
+            const lowY = MARGIN.top + scaleLinear(clampedLow, this.domainMin, this.domainMax, this.plotHeight, 0);
+            return {
+                datum: d,
+                index: i,
+                up,
+                hollow,
+                centerX,
+                bodyX: centerX - bodyW / 2,
+                bodyY: bodyTop,
+                bodyW,
+                bodyH: Math.max(bodyBot - bodyTop, 0.5),
+                wickHighY: highY,
+                wickLowY: lowY,
+                tooltipY: bodyTop,
+            };
+        });
+    }
+    get dataValueItems() {
+        return this.validData.map((d) => `${d.label}: O ${d.open} H ${d.high} L ${d.low} C ${d.close}`);
+    }
+    get hoveredCandle() {
+        return this.hoveredIndex !== null ? (this.candles[this.hoveredIndex] ?? null) : null;
+    }
+    wickClass(c) {
+        return classNames("st-hollowCandlestickChart__wick", `st-hollowCandlestickChart__wick--${c.up ? "up" : "down"}`);
+    }
+    candleClass(c) {
+        const dim = this.hoveredIndex !== null && this.hoveredIndex !== c.index;
+        return classNames("st-hollowCandlestickChart__candle", `st-hollowCandlestickChart__candle--${c.up ? "up" : "down"}`, `st-hollowCandlestickChart__candle--${c.hollow ? "hollow" : "filled"}`, dim && "st-hollowCandlestickChart__candle--dim");
+    }
+    formatTickLabel(tick) {
+        return formatTick(tick);
+    }
+    tooltipLeftPct(c) {
+        return `${(c.centerX / this.widthValue) * 100}%`;
+    }
+    tooltipTopPct(c) {
+        return `${(c.tooltipY / this.heightValue) * 100}%`;
+    }
+    handlePointerMove(event) {
+        const target = event.target;
+        const raw = Number(target?.getAttribute?.("data-chart-index"));
+        this.hoveredIndex = Number.isInteger(raw) ? raw : null;
+    }
+    handlePointerLeave() {
+        this.hoveredIndex = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HollowCandlestickChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: HollowCandlestickChart, isStandalone: true, selector: "st-hollow-candlestick-chart", inputs: { data: "data", label: "label", width: "width", height: "height", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-hollowCandlestickChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handlePointerMove($event)"
+        (pointerleave)="handlePointerLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (item of gridItems; track item.tick) {
+            <line class="st-hollowCandlestickChart__grid" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="item.y" [attr.y2]="item.y"></line>
+            <text
+              class="st-hollowCandlestickChart__tickLabel"
+              [attr.x]="margin.left - 6"
+              [attr.y]="item.y"
+              text-anchor="end"
+              dominant-baseline="middle"
+            >{{ formatTickLabel(item.tick) }}</text>
+          }
+
+          <line class="st-hollowCandlestickChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="heightValue - margin.bottom"></line>
+          <line class="st-hollowCandlestickChart__axis" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="heightValue - margin.bottom" [attr.y2]="heightValue - margin.bottom"></line>
+
+          @for (c of candles; track c.index) {
+            <line
+              [class]="wickClass(c)"
+              [attr.x1]="c.centerX"
+              [attr.x2]="c.centerX"
+              [attr.y1]="c.wickHighY"
+              [attr.y2]="c.wickLowY"
+              [attr.data-chart-index]="c.index"
+            ></line>
+            <rect
+              [class]="candleClass(c)"
+              [attr.x]="c.bodyX"
+              [attr.y]="c.bodyY"
+              [attr.width]="c.bodyW"
+              [attr.height]="c.bodyH"
+              rx="1"
+              [attr.data-chart-index]="c.index"
+            ></rect>
+            <text
+              class="st-hollowCandlestickChart__categoryLabel"
+              [attr.x]="c.centerX"
+              [attr.y]="heightValue - margin.bottom + 16"
+              text-anchor="middle"
+            >{{ c.datum.label }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track $index) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredCandle) {
+        <div
+          class="st-hollowCandlestickChart__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeftPct(hoveredCandle)"
+          [style.top]="tooltipTopPct(hoveredCandle)"
+        >
+          <span class="st-hollowCandlestickChart__tooltipLabel">{{ hoveredCandle.datum.label }}</span>
+          <span class="st-hollowCandlestickChart__tooltipValue">O {{ hoveredCandle.datum.open }} H {{ hoveredCandle.datum.high }} L {{ hoveredCandle.datum.low }} C {{ hoveredCandle.datum.close }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HollowCandlestickChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-hollow-candlestick-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-hollowCandlestickChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handlePointerMove($event)"
+        (pointerleave)="handlePointerLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (item of gridItems; track item.tick) {
+            <line class="st-hollowCandlestickChart__grid" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="item.y" [attr.y2]="item.y"></line>
+            <text
+              class="st-hollowCandlestickChart__tickLabel"
+              [attr.x]="margin.left - 6"
+              [attr.y]="item.y"
+              text-anchor="end"
+              dominant-baseline="middle"
+            >{{ formatTickLabel(item.tick) }}</text>
+          }
+
+          <line class="st-hollowCandlestickChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="heightValue - margin.bottom"></line>
+          <line class="st-hollowCandlestickChart__axis" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="heightValue - margin.bottom" [attr.y2]="heightValue - margin.bottom"></line>
+
+          @for (c of candles; track c.index) {
+            <line
+              [class]="wickClass(c)"
+              [attr.x1]="c.centerX"
+              [attr.x2]="c.centerX"
+              [attr.y1]="c.wickHighY"
+              [attr.y2]="c.wickLowY"
+              [attr.data-chart-index]="c.index"
+            ></line>
+            <rect
+              [class]="candleClass(c)"
+              [attr.x]="c.bodyX"
+              [attr.y]="c.bodyY"
+              [attr.width]="c.bodyW"
+              [attr.height]="c.bodyH"
+              rx="1"
+              [attr.data-chart-index]="c.index"
+            ></rect>
+            <text
+              class="st-hollowCandlestickChart__categoryLabel"
+              [attr.x]="c.centerX"
+              [attr.y]="heightValue - margin.bottom + 16"
+              text-anchor="middle"
+            >{{ c.datum.label }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of dataValueItems; track $index) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredCandle) {
+        <div
+          class="st-hollowCandlestickChart__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeftPct(hoveredCandle)"
+          [style.top]="tooltipTopPct(hoveredCandle)"
+        >
+          <span class="st-hollowCandlestickChart__tooltipLabel">{{ hoveredCandle.datum.label }}</span>
+          <span class="st-hollowCandlestickChart__tooltipValue">O {{ hoveredCandle.datum.open }} H {{ hoveredCandle.datum.high }} L {{ hoveredCandle.datum.low }} C {{ hoveredCandle.datum.close }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=HollowCandlestickChart.js.map