@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/chart/chart.class.d.ts

@@ -0,0 +1,209 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import type { OptionalPeerApi } from '../../internal/optional-peer-types.js';
+import '../skeleton/skeleton.class.js';
+export interface Series {
+    label: string;
+    data?: (number | null)[];
+    points?: {
+        x: number;
+        y: number;
+        label?: string;
+    }[];
+    color?: string | string[];
+    fill?: boolean;
+    width?: number;
+    dash?: boolean;
+    noTooltip?: boolean;
+    axis?: 'y' | 'y2';
+    pointColors?: string[];
+    pointRadius?: number;
+    type?: 'line' | 'bar';
+}
+export type LyraChartType = 'line' | 'bar' | 'scatter' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | 'bubble';
+/**
+ * `<lyra-chart>` — the core Chart.js wrapper every other `lyra-*-chart` tag
+ * subclasses. Requires the optional peer deps `chart.js` + `chartjs-plugin-zoom`.
+ *
+ * **API mirror note:** the real `wa-chart` docs page
+ * (https://webawesome.com/docs/components/chart/) documents a `config:
+ * ChartJS['config']` property alongside its simplified attributes — "a
+ * flexible wrapper around Chart.js" supporting *both* simplified attributes
+ * and full Chart.js configuration passthrough, not a `data`/`options` prop
+ * pair. `lyra-chart` mirrors that dual surface: the `Series`-based
+ * `datasets`/`labels`/`type`/`legend`/`xLabel`/`yLabel`/`zoom` attributes
+ * below are the simplified surface (compatible with WA's `type`, `xLabel`,
+ * `yLabel`, `withoutLegend`-equivalent `legend`, etc.), and the additional
+ * `config` property is the raw-passthrough escape hatch — a
+ * `Partial<ChartConfiguration>` deep-merged over the generated config in
+ * `buildConfig()`, mirroring WA's `config` property without discarding the
+ * `Series` shape the rest of this component family (subclasses, box-plot,
+ * histogram) is built on.
+ *
+ * @customElement lyra-chart
+ * @event lyra-zoom - `detail: { zoomed }`.
+ * @event lyra-point-click - Fired when a click lands on (or nearest,
+ *   intersect-only — see `handlePointClick()`) a data point/segment.
+ *   `detail: { datasetIndex: number, index: number, label: string |
+ *   undefined, value: unknown }`.
+ * @csspart base - The chart wrapper.
+ * @csspart canvas - The Chart.js canvas.
+ * @csspart reset-zoom-button - The reset-zoom control when zoom is active.
+ * @csspart description - The accessible chart summary.
+ * @csspart data-table - The optional generated or slotted data table.
+ * @slot data-table - An optional consumer-provided accessible table alternative.
+ */
+export interface LyraChartEventMap {
+    'lyra-point-click': CustomEvent<{
+        datasetIndex: number;
+        index: number;
+        label: string | undefined;
+        value: unknown;
+    }>;
+    'lyra-zoom': CustomEvent<{
+        zoomed: boolean;
+    }>;
+}
+export declare class LyraChart extends LyraElement<LyraChartEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    type: LyraChartType;
+    labels: string[];
+    datasets: Series[];
+    legend: boolean;
+    area: boolean;
+    zoom: boolean;
+    height: string;
+    xLabel: string;
+    yLabel: string;
+    y2Label: string;
+    beginAtZero: boolean;
+    /** Accessible name applied to the canvas. Falls back to the dataset labels. */
+    accessibleLabel: string;
+    /** Accessible description for the canvas. When unset, a concise data/trend summary is generated. */
+    accessibleDescription: string;
+    /** Makes the generated data table visible; it remains screen-reader available when false. */
+    showDataTable: boolean;
+    /** Sets `options.indexAxis = 'y'`, Chart.js's own mechanism for horizontal bars (also applies to line/area types). */
+    horizontal: boolean;
+    /** Stacks the `x`/`y`(/`y2`) scale entries `buildScales()` returns; only meaningful for `bar` and `line` types. */
+    stacked: boolean;
+    /**
+     * Raw Chart.js configuration passthrough — mirrors `wa-chart`'s `config`
+     * property. Recursively deep-merged over the `Series`-derived config in
+     * `buildConfig()` (any key at any nesting depth — e.g.
+     * `config.options.scales.y.min` — wins over the generated equivalent
+     * without discarding sibling keys the generated config set), for consumers
+     * who need full Chart.js control beyond the simplified `Series` shape.
+     */
+    config?: OptionalPeerApi;
+    /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
+    private loading;
+    private zoomed;
+    private visible;
+    private intersectionObserver?;
+    private canvasEl?;
+    private chart?;
+    private chartJsModule?;
+    private builtType?;
+    private suppressZoomComplete;
+    private descriptionId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Resets a stale `zoomed` flag before the render pass that's about to call
+     * `draw()`: a `type` (or `config.type` override) change that lands on a
+     * *different* effective Chart.js type makes `draw()` destroy the old
+     * `Chart` instance and construct a brand-new one, which was never zoomed —
+     * without this, `render()`'s reset-zoom-button stays visible for an
+     * instance that has no zoom/pan state left to reset. Computed here (before
+     * render), not in `updated()`/`draw()`, because setting `zoomed` — a
+     * reactive `@state` property — from `updated()` would schedule a second,
+     * redundant update pass; `willUpdate()` runs before this cycle's render is
+     * considered complete, so the same set just folds into the render already
+     * in progress. Same rationale as `toast-item.ts`'s `willUpdate()`-vs-
+     * `updated()` split.
+     */
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    private seriesToDataset;
+    /**
+     * Resolves the `--lyra-chart-*` theme tokens (declared in
+     * `chart.styles.ts`, each layered over an existing semantic token) via
+     * `getComputedStyle`. Chart.js renders to canvas, not the DOM, so it can't
+     * consume CSS `var()` directly — same constraint documented on
+     * `heatmap.ts`'s `labelColor()`/`noDataFill()`/`scaleEndpoints()` — so this
+     * is called fresh from `buildConfig()` on every draw rather than cached.
+     */
+    private themeColors;
+    /**
+     * Builds `options.scales` for the effective chart type: no scale at all for
+     * pie/doughnut (a proportional-area chart has no axis), the single radial
+     * `r` scale Chart.js v4 uses for radar/polarArea, and the cartesian
+     * `x`/`y`(/`y2`) block for every other (line/bar/scatter/bubble) type — with
+     * `x` itself further split within that block: scatter and bubble datasets
+     * carry raw numeric `{x, y(, r)}` points (via `Series.points`) and need a
+     * linear `x` scale, while line/bar plot against `labels` and need the
+     * default categorical one. `theme` (from `themeColors()`) drives every
+     * scale's `ticks.color`/`grid.color`/axis `title.color` so grid lines and
+     * labels retheme instead of sitting at Chart.js's own hardcoded defaults.
+     */
+    private buildScales;
+    /**
+     * `options.onClick` handler wired in `buildConfig()`. The chart-wide
+     * `interaction` mode above (`'index'`/`'nearest'`, `intersect: false`) is
+     * tuned for hover tooltips — resolving which single point/segment was
+     * actually clicked needs its own `getElementsAtEventForMode('nearest', {
+     * intersect: true }, true)` lookup instead, so a click landing off any
+     * point/segment reports nothing (`elements` empty) rather than firing for
+     * whatever's nearest. Covers the per-bar/per-segment click ask for any
+     * chart type (bar/line/pie/doughnut/etc.), not just bars.
+     */
+    private handlePointClick;
+    /**
+     * `config.type` (if set) overrides the attribute `type` post-merge — this
+     * is the one place that resolution logic lives, shared by `buildConfig()`
+     * (which needs it to build scales/interaction for the right type) and
+     * `willUpdate()` (which needs it to detect a type change against the last
+     * *actually built* type, `this.builtType`, before the render pass that
+     * would rebuild the `Chart` instance).
+     */
+    private effectiveType;
+    private buildConfig;
+    private draw;
+    /** Reset any active zoom/pan back to the original view. */
+    resetZoom(): void;
+    /**
+     * Forces a redraw so `themeColors()` re-reads the `--lyra-chart-*` custom
+     * properties from the current computed style. No global theme-broadcast
+     * event exists anywhere in lyra-ui (nothing to subscribe to here) — this
+     * is the escape hatch for a consumer's own theme-toggle handler to call
+     * directly when it flips e.g. a `data-theme` attribute upstream that
+     * doesn't otherwise change any `lyra-chart` property, so Lit's reactive
+     * update loop has nothing of its own to trigger `draw()` on.
+     */
+    refreshTheme(): void;
+    private seriesValues;
+    private chartDescription;
+    private renderDataTable;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chart': LyraChart;
+    }
+}
+/**
+ * Installs a read-only `type` accessor pair on a `LyraChart` subclass's
+ * prototype, locking it to `value` — assigning `.type` afterwards (attribute
+ * or property) is silently ignored. `LyraChart` declares `type` as a plain
+ * (decorator-managed) class field, and TypeScript forbids a subclass from
+ * re-declaring a base field as a getter/setter pair via ordinary class
+ * syntax (TS2611), so the accessor pair is installed directly on the
+ * prototype instead, which is runtime-equivalent (same shadowing semantics
+ * as a class-syntax override) without tripping that check. Shared by every
+ * `lyra-*-chart` subclass (bar/line/pie/doughnut/scatter/bubble/radar/
+ * polarArea) plus `lyra-histogram`, replacing what used to be an identical
+ * ~16-line `Object.defineProperty` block copy-pasted into each file.
+ */
+export declare function lockChartType(ctor: Function, value: string): void;
+//# sourceMappingURL=chart.class.d.ts.map

package/dist/components/chart/chart.class.d.ts.map

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