@sentropic/design-system-angular 0.36.54

package/dist/PointAndFigureChart.js

@@ -0,0 +1,238 @@
+import { NgFor, NgIf } from "@angular/common";
+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: 16, right: 18, bottom: 36, left: 52 };
+export class PointAndFigureChart {
+    static stComponentName = "PointAndFigureChart";
+    componentName = "PointAndFigureChart";
+    margin = MARGIN;
+    data = [];
+    boxSize;
+    reversal;
+    label;
+    width;
+    height;
+    size;
+    classInput;
+    hoveredKey = null;
+    get hostClass() { return ["st-pointAndFigureChart", this.classInput].filter(Boolean).join(" "); }
+    get resolvedWidth() { return this.finitePositive(this.width, 640); }
+    get resolvedHeight() { return this.finitePositive(this.height, 320); }
+    get viewBox() { return `0 0 ${this.resolvedWidth} ${this.resolvedHeight}`; }
+    get validData() {
+        return (this.data ?? []).filter((datum) => Boolean(datum) && Number.isFinite(datum.date) && Number.isFinite(datum.close));
+    }
+    get closes() { return this.validData.map((datum) => datum.close); }
+    get baseMin() { return this.closes.length ? Math.min(...this.closes) : 0; }
+    get effectiveBox() {
+        if (typeof this.boxSize === "number" && Number.isFinite(this.boxSize) && this.boxSize > 0)
+            return this.boxSize;
+        if (!this.closes.length)
+            return 1;
+        const span = Math.max(...this.closes) - Math.min(...this.closes);
+        return span > 0 ? span / 20 : 1;
+    }
+    get reversalBoxes() {
+        const value = typeof this.reversal === "number" && Number.isFinite(this.reversal) ? this.reversal : 3;
+        return Math.max(1, Math.floor(value));
+    }
+    get rawColumns() {
+        const raw = [];
+        if (this.validData.length === 0 || this.effectiveBox <= 0)
+            return raw;
+        const boxIndex = (price) => Math.floor((price - this.baseMin) / this.effectiveBox + 1e-9);
+        const firstBoxIndex = boxIndex(this.closes[0]);
+        let mark = null;
+        let low = firstBoxIndex;
+        let high = firstBoxIndex;
+        for (let index = 1; index < this.closes.length; index++) {
+            const current = boxIndex(this.closes[index]);
+            if (mark === null) {
+                if (current >= firstBoxIndex + 1) {
+                    mark = "x";
+                    low = firstBoxIndex;
+                    high = current;
+                }
+                else if (current <= firstBoxIndex - 1) {
+                    mark = "o";
+                    low = current;
+                    high = firstBoxIndex;
+                }
+                continue;
+            }
+            if (mark === "x") {
+                if (current > high) {
+                    high = current;
+                }
+                else if (current <= high - this.reversalBoxes) {
+                    raw.push({ mark, low, high });
+                    mark = "o";
+                    high -= 1;
+                    low = current;
+                }
+            }
+            else if (current < low) {
+                low = current;
+            }
+            else if (current >= low + this.reversalBoxes) {
+                raw.push({ mark, low, high });
+                mark = "x";
+                low += 1;
+                high = current;
+            }
+        }
+        if (mark !== null && high >= low)
+            raw.push({ mark, low, high });
+        return raw;
+    }
+    get pnfColumns() {
+        return this.rawColumns.map((column) => ({
+            ...column,
+            priceLow: this.baseMin + column.low * this.effectiveBox,
+            priceHigh: this.baseMin + (column.high + 1) * this.effectiveBox,
+        }));
+    }
+    get priceMin() {
+        if (!this.pnfColumns.length)
+            return this.closes.length ? Math.min(...this.closes) : 0;
+        return Math.min(...this.pnfColumns.map((column) => column.priceLow));
+    }
+    get priceMax() {
+        if (!this.pnfColumns.length)
+            return this.closes.length ? Math.max(...this.closes) : 0;
+        return Math.max(...this.pnfColumns.map((column) => column.priceHigh));
+    }
+    get yTicks() { return niceTicks(this.priceMin, this.priceMax); }
+    get yMin() { return this.yTicks[0] ?? 0; }
+    get yMax() { return this.yTicks[this.yTicks.length - 1] ?? 1; }
+    get plotWidth() { return Math.max(this.resolvedWidth - MARGIN.left - MARGIN.right, 1); }
+    get plotHeight() { return Math.max(this.resolvedHeight - MARGIN.top - MARGIN.bottom, 1); }
+    get yAxisTicks() {
+        return this.yTicks.map((value) => ({ value, y: MARGIN.top + scaleLinear(value, this.yMin, this.yMax, this.plotHeight, 0) }));
+    }
+    get marks() {
+        const colWidth = this.pnfColumns.length > 0 ? this.plotWidth / this.pnfColumns.length : this.plotWidth;
+        const glyph = Math.min(colWidth, scaleLinear(this.effectiveBox, 0, Math.max(this.yMax - this.yMin, this.effectiveBox), 0, this.plotHeight)) * 0.7;
+        const marks = [];
+        this.pnfColumns.forEach((column, columnIndex) => {
+            const cx = MARGIN.left + colWidth * columnIndex + colWidth / 2;
+            for (let box = column.low; box <= column.high; box++) {
+                const priceMid = this.baseMin + (box + 0.5) * this.effectiveBox;
+                marks.push({
+                    key: `${columnIndex}-${box}`,
+                    mark: column.mark,
+                    cx,
+                    cy: MARGIN.top + scaleLinear(priceMid, this.yMin, this.yMax, this.plotHeight, 0),
+                    r: Math.max(glyph / 2, 2),
+                    priceLow: column.priceLow,
+                    priceHigh: column.priceHigh,
+                });
+            }
+        });
+        return marks;
+    }
+    get dataValueItems() {
+        return this.pnfColumns.map((column) => `${column.mark === "x" ? "X" : "O"} ${formatTick(column.priceLow)} -> ${formatTick(column.priceHigh)}`);
+    }
+    get hoveredMark() { return this.hoveredKey === null ? null : this.marks.find((mark) => mark.key === this.hoveredKey) ?? null; }
+    get tooltipLeft() { const mark = this.hoveredMark; return mark ? `${(mark.cx / this.resolvedWidth) * 100}%` : "0"; }
+    get tooltipTop() { const mark = this.hoveredMark; return mark ? `${(mark.cy / this.resolvedHeight) * 100}%` : "0"; }
+    get tooltipLabel() { const mark = this.hoveredMark; return mark ? (mark.mark === "x" ? "X" : "O") : ""; }
+    get tooltipValue() { const mark = this.hoveredMark; return mark ? `${formatTick(mark.priceLow)} -> ${formatTick(mark.priceHigh)}` : ""; }
+    handlePointerMove(event) { const target = event.target; this.hoveredKey = target instanceof Element ? target.getAttribute("data-chart-key") : null; }
+    handleLeave() { this.hoveredKey = null; }
+    markClass(mark) { return classNames("st-pointAndFigureChart__mark", `st-pointAndFigureChart__mark--${mark.mark}`, this.hoveredKey !== null && this.hoveredKey !== mark.key ? "st-pointAndFigureChart__mark--dim" : undefined); }
+    format(value) { return formatTick(value); }
+    finitePositive(value, fallback) { return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PointAndFigureChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: PointAndFigureChart, isStandalone: true, selector: "st-point-and-figure-chart", inputs: { data: "data", boxSize: "boxSize", reversal: "reversal", label: "label", width: "width", height: "height", size: "size", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div class="st-pointAndFigureChart__visual" role="img" [attr.aria-label]="label" (pointermove)="handlePointerMove($event)" (pointerleave)="handleLeave()">
+        <svg [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
+          <ng-container *ngFor="let tick of yAxisTicks">
+            <line class="st-pointAndFigureChart__grid" [attr.x1]="margin.left" [attr.x2]="resolvedWidth - margin.right" [attr.y1]="tick.y" [attr.y2]="tick.y"></line>
+            <text class="st-pointAndFigureChart__tick" [attr.x]="margin.left - 6" [attr.y]="tick.y" text-anchor="end" dominant-baseline="middle">{{ format(tick.value) }}</text>
+          </ng-container>
+          <line class="st-pointAndFigureChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="resolvedHeight - margin.bottom"></line>
+          <line class="st-pointAndFigureChart__axis" [attr.x1]="margin.left" [attr.x2]="resolvedWidth - margin.right" [attr.y1]="resolvedHeight - margin.bottom" [attr.y2]="resolvedHeight - margin.bottom"></line>
+
+          <ng-container *ngFor="let mark of marks">
+            <g *ngIf="mark.mark === 'x'" [attr.class]="markClass(mark)" [attr.data-chart-key]="mark.key">
+              <line class="st-pointAndFigureChart__glyph" [attr.x1]="mark.cx - mark.r" [attr.y1]="mark.cy - mark.r" [attr.x2]="mark.cx + mark.r" [attr.y2]="mark.cy + mark.r" [attr.data-chart-key]="mark.key"></line>
+              <line class="st-pointAndFigureChart__glyph" [attr.x1]="mark.cx - mark.r" [attr.y1]="mark.cy + mark.r" [attr.x2]="mark.cx + mark.r" [attr.y2]="mark.cy - mark.r" [attr.data-chart-key]="mark.key"></line>
+            </g>
+            <circle *ngIf="mark.mark === 'o'" [attr.class]="markClass(mark) + ' st-pointAndFigureChart__glyph'" [attr.cx]="mark.cx" [attr.cy]="mark.cy" [attr.r]="mark.r" [attr.data-chart-key]="mark.key"></circle>
+          </ng-container>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="(label ?? 'point and figure') + ' data'">
+        <li *ngFor="let item of dataValueItems">{{ item }}</li>
+      </ul>
+
+      <div class="st-pointAndFigureChart__tooltip" role="presentation" [style.display]="hoveredMark ? 'inline-flex' : 'none'" [style.left]="tooltipLeft" [style.top]="tooltipTop">
+        <span class="st-pointAndFigureChart__tooltipLabel">{{ tooltipLabel }}</span>
+        <span class="st-pointAndFigureChart__tooltipValue">{{ tooltipValue }}</span>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PointAndFigureChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-point-and-figure-chart",
+                    standalone: true,
+                    imports: [NgFor, NgIf],
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div class="st-pointAndFigureChart__visual" role="img" [attr.aria-label]="label" (pointermove)="handlePointerMove($event)" (pointerleave)="handleLeave()">
+        <svg [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
+          <ng-container *ngFor="let tick of yAxisTicks">
+            <line class="st-pointAndFigureChart__grid" [attr.x1]="margin.left" [attr.x2]="resolvedWidth - margin.right" [attr.y1]="tick.y" [attr.y2]="tick.y"></line>
+            <text class="st-pointAndFigureChart__tick" [attr.x]="margin.left - 6" [attr.y]="tick.y" text-anchor="end" dominant-baseline="middle">{{ format(tick.value) }}</text>
+          </ng-container>
+          <line class="st-pointAndFigureChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="resolvedHeight - margin.bottom"></line>
+          <line class="st-pointAndFigureChart__axis" [attr.x1]="margin.left" [attr.x2]="resolvedWidth - margin.right" [attr.y1]="resolvedHeight - margin.bottom" [attr.y2]="resolvedHeight - margin.bottom"></line>
+
+          <ng-container *ngFor="let mark of marks">
+            <g *ngIf="mark.mark === 'x'" [attr.class]="markClass(mark)" [attr.data-chart-key]="mark.key">
+              <line class="st-pointAndFigureChart__glyph" [attr.x1]="mark.cx - mark.r" [attr.y1]="mark.cy - mark.r" [attr.x2]="mark.cx + mark.r" [attr.y2]="mark.cy + mark.r" [attr.data-chart-key]="mark.key"></line>
+              <line class="st-pointAndFigureChart__glyph" [attr.x1]="mark.cx - mark.r" [attr.y1]="mark.cy + mark.r" [attr.x2]="mark.cx + mark.r" [attr.y2]="mark.cy - mark.r" [attr.data-chart-key]="mark.key"></line>
+            </g>
+            <circle *ngIf="mark.mark === 'o'" [attr.class]="markClass(mark) + ' st-pointAndFigureChart__glyph'" [attr.cx]="mark.cx" [attr.cy]="mark.cy" [attr.r]="mark.r" [attr.data-chart-key]="mark.key"></circle>
+          </ng-container>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="(label ?? 'point and figure') + ' data'">
+        <li *ngFor="let item of dataValueItems">{{ item }}</li>
+      </ul>
+
+      <div class="st-pointAndFigureChart__tooltip" role="presentation" [style.display]="hoveredMark ? 'inline-flex' : 'none'" [style.left]="tooltipLeft" [style.top]="tooltipTop">
+        <span class="st-pointAndFigureChart__tooltipLabel">{{ tooltipLabel }}</span>
+        <span class="st-pointAndFigureChart__tooltipValue">{{ tooltipValue }}</span>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], boxSize: [{
+                type: NgInput
+            }], reversal: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=PointAndFigureChart.js.map

package/dist/PointAndFigureChart.js.map

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

package/dist/PolygonChart.d.ts

@@ -0,0 +1,69 @@
+import * as i0 from "@angular/core";
+export type PolygonChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type PolygonChartPoint = {
+    x: number;
+    y: number;
+};
+export type PolygonChartProps = {
+    data: PolygonChartPoint[];
+    label: string;
+    tone?: PolygonChartTone;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+type PointGeom = {
+    cx: number;
+    cy: number;
+    datum: PolygonChartPoint;
+    index: number;
+};
+export declare class PolygonChart {
+    static readonly stComponentName = "PolygonChart";
+    readonly componentName = "PolygonChart";
+    readonly margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    private hoveredIndex;
+    data: PolygonChartPoint[];
+    label: string;
+    tone: PolygonChartTone;
+    width?: number;
+    height?: number;
+    classInput?: string;
+    get hostClass(): string;
+    get widthValue(): number;
+    get heightValue(): number;
+    get viewBox(): string;
+    get validData(): PolygonChartPoint[];
+    get scales(): {
+        xTicks: number[];
+        yTicks: number[];
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+        plotW: number;
+        plotH: number;
+    };
+    get points(): PointGeom[];
+    get polygonPointsStr(): string;
+    get polygonClass(): string;
+    get vertexClass(): string;
+    get dataValueItems(): string[];
+    get hoveredPoint(): PointGeom | null;
+    xPixel(t: number): number;
+    yPixel(t: number): number;
+    fmtTick(v: number): string;
+    tooltipLeft(): string;
+    tooltipTop(): string;
+    handleLeave(): void;
+    handleVisualPointerMove(event: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PolygonChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PolygonChart, "st-polygon-chart", never, { "data": { "alias": "data"; "required": false; }; "label": { "alias": "label"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=PolygonChart.d.ts.map

package/dist/PolygonChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolygonChart.d.ts","sourceRoot":"","sources":["../src/PolygonChart.ts"],"names":[],"mappings":";AAIA,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAC,WAAW,GAAC,WAAW,GAAC,WAAW,GAAC,WAAW,GAAC,WAAW,GAAC,WAAW,GAAC,WAAW,CAAC;AAC/H,MAAM,MAAM,iBAAiB,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAGvJ,KAAK,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,iBAAiB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAErF,qBAmCa,YAAY;IACvB,MAAM,CAAC,QAAQ,CAAC,eAAe,kBAAkB;IACjD,QAAQ,CAAC,aAAa,kBAAkB;IACxC,QAAQ,CAAC,MAAM;;;;;MAAU;IACzB,OAAO,CAAC,YAAY,CAAuB;IAChC,IAAI,EAAE,iBAAiB,EAAE,CAAM;IAC/B,KAAK,SAAM;IACX,IAAI,EAAE,gBAAgB,CAAe;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IACT,UAAU,CAAC,EAAE,MAAM,CAAC;IACtC,IAAI,SAAS,IAAI,MAAM,CAA2D;IAClF,IAAI,UAAU,IAAI,MAAM,CAA8B;IACtD,IAAI,WAAW,IAAI,MAAM,CAA+B;IACxD,IAAI,OAAO,IAAI,MAAM,CAAyD;IAC9E,IAAI,SAAS,IAAI,iBAAiB,EAAE,CAEnC;IACD,IAAI,MAAM;;;;;;;;;MAQT;IACD,IAAI,MAAM,IAAI,SAAS,EAAE,CAOxB;IACD,IAAI,gBAAgB,IAAI,MAAM,CAAgE;IAC9F,IAAI,YAAY,IAAI,MAAM,CAA8E;IACxG,IAAI,WAAW,IAAI,MAAM,CAA4E;IACrG,IAAI,cAAc,IAAI,MAAM,EAAE,CAA4D;IAC1F,IAAI,YAAY,IAAI,SAAS,GAAG,IAAI,CAEnC;IACD,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAGzB,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAGzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAI1B,WAAW,IAAI,MAAM;IACrB,UAAU,IAAI,MAAM;IACpB,WAAW,IAAI,IAAI;IACnB,uBAAuB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;yCAvDvC,YAAY;2CAAZ,YAAY;CA4DxB"}

package/dist/PolygonChart.js

@@ -0,0 +1,151 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { niceTicks, scaleLinear } from "./chartScale.js";
+import * as i0 from "@angular/core";
+const MARGIN = { top: 14, right: 18, bottom: 36, left: 48 };
+export class PolygonChart {
+    static stComponentName = "PolygonChart";
+    componentName = "PolygonChart";
+    margin = MARGIN;
+    hoveredIndex = null;
+    data = [];
+    label = "";
+    tone = "category1";
+    width;
+    height;
+    classInput;
+    get hostClass() { return classNames("st-polygonChart", this.classInput); }
+    get widthValue() { return this.width ?? 480; }
+    get heightValue() { return this.height ?? 360; }
+    get viewBox() { return `0 0 ${this.widthValue} ${this.heightValue}`; }
+    get validData() {
+        return (this.data ?? []).filter((d) => Number.isFinite(d.x) && Number.isFinite(d.y));
+    }
+    get scales() {
+        const xs = this.validData.map((d) => d.x);
+        const ys = this.validData.map((d) => d.y);
+        const xTicks = xs.length > 0 ? niceTicks(Math.min(...xs), Math.max(...xs)) : [0, 1];
+        const yTicks = ys.length > 0 ? niceTicks(Math.min(...ys), Math.max(...ys)) : [0, 1];
+        const plotW = Math.max(this.widthValue - MARGIN.left - MARGIN.right, 1);
+        const plotH = Math.max(this.heightValue - MARGIN.top - MARGIN.bottom, 1);
+        return { xTicks, yTicks, xMin: xTicks[0], xMax: xTicks[xTicks.length - 1], yMin: yTicks[0], yMax: yTicks[yTicks.length - 1], plotW, plotH };
+    }
+    get points() {
+        const { xMin, xMax, yMin, yMax, plotW, plotH } = this.scales;
+        return this.validData.map((d, i) => ({
+            cx: MARGIN.left + scaleLinear(d.x, xMin, xMax, 0, plotW),
+            cy: MARGIN.top + scaleLinear(d.y, yMin, yMax, plotH, 0),
+            datum: d, index: i,
+        }));
+    }
+    get polygonPointsStr() { return this.points.map((p) => `${p.cx},${p.cy}`).join(" "); }
+    get polygonClass() { return `st-polygonChart__polygon st-polygonChart__polygon--${this.tone}`; }
+    get vertexClass() { return `st-polygonChart__vertex st-polygonChart__vertex--${this.tone}`; }
+    get dataValueItems() { return this.validData.map((d) => `x ${d.x}, y ${d.y}`); }
+    get hoveredPoint() {
+        return this.hoveredIndex !== null ? (this.points[this.hoveredIndex] ?? null) : null;
+    }
+    xPixel(t) {
+        return MARGIN.left + scaleLinear(t, this.scales.xMin, this.scales.xMax, 0, this.scales.plotW);
+    }
+    yPixel(t) {
+        return MARGIN.top + scaleLinear(t, this.scales.yMin, this.scales.yMax, this.scales.plotH, 0);
+    }
+    fmtTick(v) {
+        if (Math.abs(v) >= 1000)
+            return String(Math.round(v / 1000)) + "k";
+        return Number.isInteger(v) ? String(v) : v.toFixed(1);
+    }
+    tooltipLeft() { const p = this.hoveredPoint; return p ? `${(p.cx / this.widthValue) * 100}%` : "0%"; }
+    tooltipTop() { const p = this.hoveredPoint; return p ? `${(p.cy / this.heightValue) * 100}%` : "0%"; }
+    handleLeave() { this.hoveredIndex = null; }
+    handleVisualPointerMove(event) {
+        const target = event.target;
+        const raw = Number(target?.getAttribute?.("data-chart-index"));
+        this.hoveredIndex = Number.isInteger(raw) && raw >= 0 && raw < this.points.length ? raw : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PolygonChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PolygonChart, isStandalone: true, selector: "st-polygon-chart", inputs: { data: "data", label: "label", tone: "tone", width: "width", height: "height", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div class="st-polygonChart__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">
+          @for (t of scales.yTicks; track t) {
+            <line class="st-polygonChart__grid" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="yPixel(t)" [attr.y2]="yPixel(t)"></line>
+            <text class="st-polygonChart__tick" [attr.x]="margin.left - 6" [attr.y]="yPixel(t)" text-anchor="end" dominant-baseline="middle">{{ fmtTick(t) }}</text>
+          }
+          @for (t of scales.xTicks; track t) {
+            <text class="st-polygonChart__tick" [attr.x]="xPixel(t)" [attr.y]="heightValue - margin.bottom + 16" text-anchor="middle">{{ fmtTick(t) }}</text>
+          }
+          <line class="st-polygonChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="heightValue - margin.bottom"></line>
+          <line class="st-polygonChart__axis" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="heightValue - margin.bottom" [attr.y2]="heightValue - margin.bottom"></line>
+          @if (points.length >= 2) {
+            <polygon [class]="polygonClass" [attr.points]="polygonPointsStr"></polygon>
+          }
+          @for (p of points; track p.index) {
+            <circle [class]="vertexClass" [attr.cx]="p.cx" [attr.cy]="p.cy" r="3.5" [attr.data-chart-index]="p.index"></circle>
+          }
+        </svg>
+      </div>
+      <ul class="st-chartDataList" [attr.aria-label]="label">
+        @for (item of dataValueItems; track $index) { <li>{{ item }}</li> }
+      </ul>
+      @if (hoveredPoint) {
+        <div class="st-polygonChart__tooltip" role="presentation" [style.left]="tooltipLeft()" [style.top]="tooltipTop()">
+          <span class="st-polygonChart__tooltipValue">x {{ hoveredPoint.datum.x }} · y {{ hoveredPoint.datum.y }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PolygonChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-polygon-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div class="st-polygonChart__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">
+          @for (t of scales.yTicks; track t) {
+            <line class="st-polygonChart__grid" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="yPixel(t)" [attr.y2]="yPixel(t)"></line>
+            <text class="st-polygonChart__tick" [attr.x]="margin.left - 6" [attr.y]="yPixel(t)" text-anchor="end" dominant-baseline="middle">{{ fmtTick(t) }}</text>
+          }
+          @for (t of scales.xTicks; track t) {
+            <text class="st-polygonChart__tick" [attr.x]="xPixel(t)" [attr.y]="heightValue - margin.bottom + 16" text-anchor="middle">{{ fmtTick(t) }}</text>
+          }
+          <line class="st-polygonChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="heightValue - margin.bottom"></line>
+          <line class="st-polygonChart__axis" [attr.x1]="margin.left" [attr.x2]="widthValue - margin.right" [attr.y1]="heightValue - margin.bottom" [attr.y2]="heightValue - margin.bottom"></line>
+          @if (points.length >= 2) {
+            <polygon [class]="polygonClass" [attr.points]="polygonPointsStr"></polygon>
+          }
+          @for (p of points; track p.index) {
+            <circle [class]="vertexClass" [attr.cx]="p.cx" [attr.cy]="p.cy" r="3.5" [attr.data-chart-index]="p.index"></circle>
+          }
+        </svg>
+      </div>
+      <ul class="st-chartDataList" [attr.aria-label]="label">
+        @for (item of dataValueItems; track $index) { <li>{{ item }}</li> }
+      </ul>
+      @if (hoveredPoint) {
+        <div class="st-polygonChart__tooltip" role="presentation" [style.left]="tooltipLeft()" [style.top]="tooltipTop()">
+          <span class="st-polygonChart__tooltipValue">x {{ hoveredPoint.datum.x }} · y {{ hoveredPoint.datum.y }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], tone: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=PolygonChart.js.map

package/dist/PolygonChart.js.map

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

package/dist/Popover.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export type PopoverPlacement = "top" | "right" | "bottom" | "left";
+export type PopoverOpenOn = "manual" | "hover";
+export type PopoverProps = {
+    content?: string;
+    label?: string;
+    triggerLabel?: string;
+    open?: boolean;
+    placement?: PopoverPlacement;
+    openOn?: PopoverOpenOn;
+    class?: string;
+};
+export declare class Popover {
+    static readonly stComponentName = "Popover";
+    readonly componentName = "Popover";
+    content?: string;
+    label?: string;
+    triggerLabel?: string;
+    open?: boolean;
+    placement?: PopoverPlacement;
+    openOn?: PopoverOpenOn;
+    classInput?: string;
+    readonly close: EventEmitter<void>;
+    localOpen: boolean;
+    hovered: boolean;
+    get isOpen(): boolean;
+    get popoverClass(): string;
+    onHover(value: boolean): void;
+    onHostClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Popover, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Popover, "st-popover", never, { "content": { "alias": "content"; "required": false; }; "label": { "alias": "label"; "required": false; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; }; "open": { "alias": "open"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "openOn": { "alias": "openOn"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, { "close": "close"; }, never, ["[slot='trigger']", "*"], true, never>;
+}
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../src/Popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA4B,MAAM,eAAe,CAAC;;AAIlF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBA8Ba,OAAO;IAClB,MAAM,CAAC,QAAQ,CAAC,eAAe,aAAa;IAC5C,QAAQ,CAAC,aAAa,aAAa;IAExB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,KAAK,qBAA4B;IAEpD,SAAS,UAAS;IAClB,OAAO,UAAS;IAEhB,IAAI,MAAM,IAAI,OAAO,CAIpB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,WAAW,IAAI,IAAI;yCA/BR,OAAO;2CAAP,OAAO;CAoCnB"}