@sentropic/design-system-angular 0.36.54

package/dist/CalendarHeatmapChart.js

@@ -0,0 +1,318 @@
+import { NgFor } from "@angular/common";
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+const MARGIN = { top: 24, right: 8, bottom: 8, left: 24 };
+const DAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function normalizedScale(value) {
+    return value === "categorical" ? "categorical" : "sequential";
+}
+function parseUTCDate(dateStr) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateStr);
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    if (month < 1 || month > 12 || day < 1 || day > 31)
+        return null;
+    const ts = Date.UTC(year, month - 1, day);
+    const check = new Date(ts).toISOString().slice(0, 10);
+    if (check !== dateStr)
+        return null;
+    return { year, month, day, ts };
+}
+function daysDiff(tsA, tsB) {
+    return Math.round((tsB - tsA) / 86400000);
+}
+function toneForValue(value, min, max) {
+    if (!Number.isFinite(value) || max <= min)
+        return "category1";
+    const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(((value - min) / (max - min)) * TONES.length)));
+    return TONES[index];
+}
+export class CalendarHeatmapChart {
+    static stComponentName = "CalendarHeatmapChart";
+    componentName = "CalendarHeatmapChart";
+    margin = MARGIN;
+    visibleDayLabels = DAY_LABELS.map((label, index) => ({ label, index })).filter((day) => day.index % 2 === 1);
+    data = [];
+    label;
+    scale;
+    width;
+    height;
+    classInput;
+    hoveredDate = null;
+    get resolvedScale() {
+        return normalizedScale(this.scale);
+    }
+    get resolvedWidth() {
+        return this.width ?? 480;
+    }
+    get resolvedHeight() {
+        return this.height ?? 140;
+    }
+    get viewBox() {
+        return `0 0 ${this.resolvedWidth} ${this.resolvedHeight}`;
+    }
+    get hostClass() {
+        return classNames("st-calendarHeatmapChart", `st-calendarHeatmapChart--${this.resolvedScale}`, this.classInput);
+    }
+    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 grid() {
+        const data = this.data ?? [];
+        if (data.length === 0)
+            return { cells: [], weeks: 0, monthLabels: [] };
+        const validData = data.filter((datum) => parseUTCDate(datum.date) !== null && Number.isFinite(datum.value));
+        if (validData.length === 0)
+            return { cells: [], weeks: 0, monthLabels: [] };
+        const sorted = [...validData].sort((a, b) => a.date.localeCompare(b.date));
+        const firstParsed = parseUTCDate(sorted[0].date);
+        const lastParsed = parseUTCDate(sorted[sorted.length - 1].date);
+        const values = sorted.map((datum) => datum.value);
+        const minValue = Math.min(...values);
+        const maxValue = Math.max(...values);
+        const valueMap = new Map();
+        for (const datum of sorted)
+            valueMap.set(datum.date, datum.value);
+        const firstDate = new Date(firstParsed.ts);
+        const lastDate = new Date(lastParsed.ts);
+        const gridStartTs = firstParsed.ts - firstDate.getUTCDay() * 86400000;
+        const gridEndTs = lastParsed.ts + (6 - lastDate.getUTCDay()) * 86400000;
+        const totalDays = daysDiff(gridStartTs, gridEndTs) + 1;
+        const weeks = Math.ceil(totalDays / 7);
+        const cellWidth = this.plotWidth / Math.max(weeks, 1);
+        const cellHeight = this.plotHeight / 7;
+        const cells = [];
+        const monthLabelMap = new Map();
+        for (let dayIndex = 0; dayIndex < totalDays; dayIndex++) {
+            const currentTs = gridStartTs + dayIndex * 86400000;
+            const currentDate = new Date(currentTs);
+            const dayOfWeek = currentDate.getUTCDay();
+            const week = Math.floor(dayIndex / 7);
+            const date = currentDate.toISOString().slice(0, 10);
+            const value = valueMap.get(date) ?? null;
+            const x = MARGIN.left + week * cellWidth;
+            const y = MARGIN.top + dayOfWeek * cellHeight;
+            const tone = value !== null && Number.isFinite(value) ? toneForValue(value, minValue, maxValue) : null;
+            cells.push({
+                date,
+                value,
+                tone,
+                x,
+                y,
+                w: Math.max(cellWidth - 2, 1),
+                h: Math.max(cellHeight - 2, 1),
+            });
+            const monthKey = `${currentDate.getUTCFullYear()}-${currentDate.getUTCMonth()}`;
+            if (!monthLabelMap.has(monthKey))
+                monthLabelMap.set(monthKey, x);
+        }
+        const monthLabels = Array.from(monthLabelMap.entries()).map(([key, x]) => {
+            const [, month] = key.split("-").map(Number);
+            return { label: MONTH_ABBR[month], x };
+        });
+        return { cells, weeks, monthLabels };
+    }
+    get dataValueItems() {
+        return (this.data ?? [])
+            .filter((datum) => parseUTCDate(datum.date) !== null && Number.isFinite(datum.value))
+            .map((datum) => `${datum.date}: ${datum.value}`);
+    }
+    get hoveredCell() {
+        return this.hoveredDate !== null ? this.grid.cells.find((cell) => cell.date === this.hoveredDate) ?? null : null;
+    }
+    get tooltipLeft() {
+        const cell = this.hoveredCell;
+        return cell ? `${((cell.x + cell.w / 2) / this.resolvedWidth) * 100}%` : "0%";
+    }
+    get tooltipTop() {
+        const cell = this.hoveredCell;
+        return cell ? `${((cell.y + cell.h / 2) / this.resolvedHeight) * 100}%` : "0%";
+    }
+    get tooltipLabel() {
+        return this.hoveredCell?.date ?? "";
+    }
+    get tooltipValue() {
+        return this.hoveredCell?.value !== null && this.hoveredCell?.value !== undefined ? String(this.hoveredCell.value) : "";
+    }
+    cellClass(cell) {
+        return classNames("st-calendarHeatmapChart__cell", cell.tone ? `st-calendarHeatmapChart__cell--${cell.tone}` : "st-calendarHeatmapChart__cell--empty", this.hoveredDate !== null && this.hoveredDate !== cell.date ? "st-calendarHeatmapChart__cell--dim" : undefined);
+    }
+    handlePointerMove(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            this.hoveredDate = null;
+            return;
+        }
+        this.hoveredDate = target.getAttribute("data-chart-date") ?? null;
+    }
+    handleLeave() {
+        this.hoveredDate = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarHeatmapChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: CalendarHeatmapChart, isStandalone: true, selector: "st-calendar-heatmap-chart", inputs: { data: "data", label: "label", scale: "scale", width: "width", height: "height", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-calendarHeatmapChart__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"
+        >
+          <text
+            *ngFor="let day of visibleDayLabels"
+            class="st-calendarHeatmapChart__dayLabel"
+            [attr.x]="margin.left - 4"
+            [attr.y]="margin.top + day.index * (plotHeight / 7) + plotHeight / 14"
+            text-anchor="end"
+            dominant-baseline="middle"
+          >{{ day.label }}</text>
+
+          <text
+            *ngFor="let monthLabel of grid.monthLabels"
+            class="st-calendarHeatmapChart__monthLabel"
+            [attr.x]="monthLabel.x"
+            [attr.y]="margin.top - 6"
+            dominant-baseline="auto"
+          >{{ monthLabel.label }}</text>
+
+          <rect
+            *ngFor="let cell of grid.cells"
+            [attr.class]="cellClass(cell)"
+            [attr.x]="cell.x"
+            [attr.y]="cell.y"
+            [attr.width]="cell.w"
+            [attr.height]="cell.h"
+            rx="2"
+            [attr.data-chart-date]="cell.date"
+          ></rect>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="label + ' data'">
+        <li *ngFor="let item of dataValueItems">{{ item }}</li>
+      </ul>
+
+      <div
+        class="st-calendarHeatmapChart__tooltip"
+        role="presentation"
+        [style.display]="hoveredCell && hoveredCell.value !== null ? 'inline-flex' : 'none'"
+        [style.left]="tooltipLeft"
+        [style.top]="tooltipTop"
+      >
+        <span class="st-calendarHeatmapChart__tooltipLabel">{{ tooltipLabel }}</span>
+        <span class="st-calendarHeatmapChart__tooltipValue">{{ tooltipValue }}</span>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarHeatmapChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-calendar-heatmap-chart",
+                    standalone: true,
+                    imports: [NgFor],
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-calendarHeatmapChart__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"
+        >
+          <text
+            *ngFor="let day of visibleDayLabels"
+            class="st-calendarHeatmapChart__dayLabel"
+            [attr.x]="margin.left - 4"
+            [attr.y]="margin.top + day.index * (plotHeight / 7) + plotHeight / 14"
+            text-anchor="end"
+            dominant-baseline="middle"
+          >{{ day.label }}</text>
+
+          <text
+            *ngFor="let monthLabel of grid.monthLabels"
+            class="st-calendarHeatmapChart__monthLabel"
+            [attr.x]="monthLabel.x"
+            [attr.y]="margin.top - 6"
+            dominant-baseline="auto"
+          >{{ monthLabel.label }}</text>
+
+          <rect
+            *ngFor="let cell of grid.cells"
+            [attr.class]="cellClass(cell)"
+            [attr.x]="cell.x"
+            [attr.y]="cell.y"
+            [attr.width]="cell.w"
+            [attr.height]="cell.h"
+            rx="2"
+            [attr.data-chart-date]="cell.date"
+          ></rect>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="label + ' data'">
+        <li *ngFor="let item of dataValueItems">{{ item }}</li>
+      </ul>
+
+      <div
+        class="st-calendarHeatmapChart__tooltip"
+        role="presentation"
+        [style.display]="hoveredCell && hoveredCell.value !== null ? 'inline-flex' : 'none'"
+        [style.left]="tooltipLeft"
+        [style.top]="tooltipTop"
+      >
+        <span class="st-calendarHeatmapChart__tooltipLabel">{{ tooltipLabel }}</span>
+        <span class="st-calendarHeatmapChart__tooltipValue">{{ tooltipValue }}</span>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], scale: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=CalendarHeatmapChart.js.map

package/dist/CalendarHeatmapChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeatmapChart.js","sourceRoot":"","sources":["../src/CalendarHeatmapChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;AAsC7C,MAAM,KAAK,GAA0B;IACnC,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACZ,CAAC;AACF,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAW,CAAC;AACnE,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAC;AAC9E,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAC;AAEjH,SAAS,eAAe,CAAC,KAA4C;IACnE,OAAO,KAAK,KAAK,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;AAChE,CAAC;AAED,SAAS,YAAY,CAAC,OAAe;IACnC,MAAM,KAAK,GAAG,2BAA2B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxD,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE,IAAI,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,EAAE;QAAE,OAAO,IAAI,CAAC;IAChE,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtD,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,IAAI,CAAC;IACnC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;AAClC,CAAC;AAED,SAAS,QAAQ,CAAC,GAAW,EAAE,GAAW;IACxC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,YAAY,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAC3D,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,GAAG;QAAE,OAAO,WAAW,CAAC;IAC9D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAChH,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC;AACtB,CAAC;AAsED,MAAM,OAAO,oBAAoB;IAC/B,MAAM,CAAU,eAAe,GAAG,sBAAsB,CAAC;IAChD,aAAa,GAAG,sBAAsB,CAAC;IACvC,MAAM,GAAG,MAAM,CAAC;IAChB,gBAAgB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3G,IAAI,GAAgC,EAAE,CAAC;IACvC,KAAK,CAAU;IACf,KAAK,CAA6B;IAClC,KAAK,CAAU;IACf,MAAM,CAAU;IACT,UAAU,CAAU;IAEtC,WAAW,GAAkB,IAAI,CAAC;IAElC,IAAI,aAAa;QACf,OAAO,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC;IAC3B,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;IAC5B,CAAC;IAED,IAAI,OAAO;QACT,OAAO,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,yBAAyB,EAAE,4BAA4B,IAAI,CAAC,aAAa,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAClH,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACtE,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACvE,CAAC;IAED,IAAI,IAAI;QACN,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC;QAEvE,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5G,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC;QAE5E,MAAM,MAAM,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAE,CAAC;QAClD,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAE,CAAC;QACjE,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QAErC,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;QAC3C,KAAK,MAAM,KAAK,IAAI,MAAM;YAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QAElE,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,WAAW,CAAC,EAAE,GAAG,SAAS,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAC;QACtE,MAAM,SAAS,GAAG,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,GAAG,QAAQ,CAAC;QACxE,MAAM,SAAS,GAAG,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QACvD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;QACvC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACtD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QAEvC,MAAM,KAAK,GAA0B,EAAE,CAAC;QACxC,MAAM,aAAa,GAAG,IAAI,GAAG,EAAkB,CAAC;QAEhD,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,SAAS,EAAE,QAAQ,EAAE,EAAE,CAAC;YACxD,MAAM,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;YACpD,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;YACxC,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,EAAE,CAAC;YAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACtC,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;YACzC,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;YACzC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,GAAG,UAAU,CAAC;YAC9C,MAAM,IAAI,GAAG,KAAK,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEvG,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI;gBACJ,KAAK;gBACL,IAAI;gBACJ,CAAC;gBACD,CAAC;gBACD,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC,CAAC;gBAC7B,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC;aAC/B,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,GAAG,WAAW,CAAC,cAAc,EAAE,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,CAAC;YAChF,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC;gBAAE,aAAa,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE;YACvE,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC7C,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC;QAEH,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IACvC,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;aACrB,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aACpF,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACnH,CAAC;IAED,IAAI,WAAW;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,OAAO,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAChF,CAAC;IAED,IAAI,UAAU;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,OAAO,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;IACtC,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACzH,CAAC;IAED,SAAS,CAAC,IAAyB;QACjC,OAAO,UAAU,CACf,+BAA+B,EAC/B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAkC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,sCAAsC,EAClG,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,SAAS,CAC/G,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,KAAmB;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC;IACpE,CAAC;IAED,WAAW;QACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;wGAxJU,oBAAoB;4FAApB,oBAAoB,sNAhErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DT,4DA/DS,KAAK;;4FAiEJ,oBAAoB;kBApEhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,2BAA2B;oBACrC,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,KAAK,CAAC;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DT;iBACF;;sBAOE,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/CandlestickChart.d.ts

@@ -0,0 +1,118 @@
+import { type ChartAnnotation, type ResolvedAnnotation } from "./chartAnnotations.js";
+import { type DataLabelsProp } from "./chartDataLabels.js";
+import * as i0 from "@angular/core";
+export type CandlestickChartDatum = {
+    label: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+};
+export type CandlestickChartProps = {
+    data: CandlestickChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    annotations?: ChartAnnotation[];
+    dataLabels?: DataLabelsProp;
+    hoverKey?: string | null;
+    onHoverKeyChange?: (key: string | null) => void;
+    keyboardNav?: boolean;
+    onSelectKey?: (key: string | null) => void;
+    class?: string;
+};
+type CandleGeom = {
+    datum: CandlestickChartDatum;
+    index: number;
+    bullish: boolean;
+    centerX: number;
+    band: number;
+    bodyX: number;
+    bodyY: number;
+    bodyW: number;
+    bodyH: number;
+    wickHighY: number;
+    wickLowY: number;
+    tooltipY: number;
+};
+type CandleDataLabelItem = {
+    key: string;
+    x: number;
+    y: number;
+    text: string;
+};
+type CandleAnnotationRegion = Extract<ResolvedAnnotation, {
+    kind: "region";
+}>;
+type CandleAnnotationAbove = Extract<ResolvedAnnotation, {
+    kind: "line" | "shape" | "point" | "label";
+}>;
+export declare class CandlestickChart {
+    static readonly stComponentName = "CandlestickChart";
+    readonly componentName = "CandlestickChart";
+    readonly margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    private navDatumElements?;
+    private hoveredIndex;
+    private focusedIndex;
+    data: CandlestickChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    annotations?: ChartAnnotation[];
+    dataLabels?: DataLabelsProp;
+    hoverKey?: string | null;
+    onHoverKeyChange?: (key: string | null) => void;
+    keyboardNav?: boolean;
+    onSelectKey?: (key: string | null) => void;
+    classInput?: string;
+    get hostClass(): string;
+    get widthValue(): number;
+    get heightValue(): number;
+    get viewBox(): string;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get validData(): CandlestickChartDatum[];
+    get domainBounds(): {
+        rawMin: number;
+        rawMax: number;
+    };
+    get ticks(): number[];
+    get domainMin(): number;
+    get domainMax(): number;
+    get candles(): CandleGeom[];
+    get hoverKeys(): string[];
+    get activeIndex(): number;
+    get activeCandle(): CandleGeom | null;
+    get navEnabled(): boolean;
+    get resolvedAnnotations(): ResolvedAnnotation[];
+    get annotationRegions(): CandleAnnotationRegion[];
+    get annotationAbove(): CandleAnnotationAbove[];
+    get dataLabelItems(): CandleDataLabelItem[];
+    get dataValueItems(): string[];
+    tickY(tick: number): number;
+    formatTickLabel(tick: number): string;
+    wickClass(c: CandleGeom): string;
+    bodyClass(c: CandleGeom): string;
+    polygonPointsFor(a: CandleAnnotationAbove & {
+        kind: "shape";
+    }): string;
+    tooltipLeft(c: CandleGeom): number;
+    tooltipTop(c: CandleGeom): number;
+    rovingTabIndexFor(index: number): number;
+    ohlcAriaLabel(d: CandlestickChartDatum): string;
+    private emitHoverKey;
+    handleLeave(): void;
+    handlePointerMove(event: PointerEvent): void;
+    handleDatapointFocus(index: number): void;
+    focusDatum(index: number): void;
+    handleDatapointKeyDown(event: KeyboardEvent, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CandlestickChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CandlestickChart, "st-candlestick-chart", never, { "data": { "alias": "data"; "required": false; }; "label": { "alias": "label"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "annotations": { "alias": "annotations"; "required": false; }; "dataLabels": { "alias": "dataLabels"; "required": false; }; "hoverKey": { "alias": "hoverKey"; "required": false; }; "onHoverKeyChange": { "alias": "onHoverKeyChange"; "required": false; }; "keyboardNav": { "alias": "keyboardNav"; "required": false; }; "onSelectKey": { "alias": "onSelectKey"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=CandlestickChart.d.ts.map

package/dist/CandlestickChart.d.ts.map

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