@aceshooting/lyra-ui 4.2.0 → 5.0.0

package/dist/components/charts/chart/chart.class.js

@@ -0,0 +1,911 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { LyraElement } from '../../../internal/lyra-element.js';
+import { nextId, srOnly } from '../../../internal/a11y.js';
+import { prefersReducedMotion } from '../../../internal/motion.js';
+import { loadChartJs, loadChartJsWithZoom } from './chart-loader.js';
+import { styles } from './chart.styles.js';
+import '../../overlays/skeleton/skeleton.class.js';
+import { getNumberFormat } from '../../../internal/intl-cache.js';
+const CHART_TYPES = new Set([
+    'line',
+    'bar',
+    'scatter',
+    'pie',
+    'doughnut',
+    'radar',
+    'polarArea',
+    'bubble',
+]);
+const CHART_TYPE_MESSAGE_KEYS = {
+    line: 'chartTypeLine',
+    bar: 'chartTypeBar',
+    scatter: 'chartTypeScatter',
+    pie: 'chartTypePie',
+    doughnut: 'chartTypeDoughnut',
+    radar: 'chartTypeRadar',
+    polarArea: 'chartTypePolarArea',
+    bubble: 'chartTypeBubble',
+};
+function normalizeChartType(value) {
+    return typeof value === 'string' && CHART_TYPES.has(value)
+        ? value
+        : 'line';
+}
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+// Keys that would let a JSON-sourced `config` (e.g. parsed from an API
+// response) reach up through the merge and mutate `Object.prototype` —
+// skipped unconditionally regardless of `base`'s own shape.
+const UNSAFE_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+// Defensive JS-side fallbacks for themeColors() below, mirroring the
+// light-mode default of each `--lr-chart-*` token's own fallback chain
+// (see chart.styles.ts) — only reached if getComputedStyle somehow can't
+// resolve the custom property at all (e.g. host detached from the document).
+const FALLBACK_GRID_COLOR = '#8a8a90';
+const FALLBACK_TICK_COLOR = '#6b7280';
+const FALLBACK_LEGEND_COLOR = '#1a1a1a';
+const FALLBACK_TOOLTIP_BG = '#fff';
+const FALLBACK_TOOLTIP_TEXT = '#1a1a1a';
+/**
+ * Recursively merges `override` onto `base`, matching JSON-merge semantics:
+ * plain objects are merged key-by-key at every depth; arrays, functions, and
+ * any other value type are replaced wholesale by `override`'s value. Used to
+ * deep-merge the raw `config` passthrough over the `Series`-generated config
+ * in `buildConfig()` so a nested key (e.g. `config.options.scales.y`) only
+ * overrides the keys it sets, rather than clobbering the whole generated
+ * sibling object (e.g. the rest of the generated `y` axis config).
+ */
+// `seen` guards against a circular `override` (e.g. `override.self = override`) recursing forever --
+// it must only cover the *active* recursion stack, not every override object ever merged. Entries
+// are removed once a call's own subtree finishes (see the `finally` below), so the guard only fires
+// while `override` is genuinely an ancestor of itself in the current call. Without that removal, the
+// same override object legitimately reused at two unrelated, already-finished config positions (e.g.
+// a shared axis-options object applied to both the x and y scale) would incorrectly reuse the first
+// position's merged result for the second, even though each was merged against a different base.
+function deepMerge(base, override, seen = new WeakMap()) {
+    if (typeof override === 'object' && override !== null) {
+        const previous = seen.get(override);
+        if (previous !== undefined)
+            return previous;
+    }
+    if (!isPlainObject(base) || !isPlainObject(override)) {
+        return (override === undefined ? base : override);
+    }
+    const result = { ...base };
+    seen.set(override, result);
+    try {
+        for (const key of Object.keys(override)) {
+            if (UNSAFE_KEYS.has(key))
+                continue;
+            result[key] = deepMerge(base[key], override[key], seen);
+        }
+    }
+    finally {
+        seen.delete(override);
+    }
+    return result;
+}
+/**
+ * `<lr-chart>` — the core Chart.js wrapper every other `lr-*-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. `lr-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 lr-chart
+ * @event lr-zoom - `detail: { zoomed }`.
+ * @event lr-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.
+ * @csspart center - The chart-area-centered overlay wrapper for the `center` slot.
+ * @slot data-table - An optional consumer-provided accessible table alternative.
+ * @slot center - Optional overlay content positioned at the chart area's center. Useful for
+ *   doughnut and pie totals.
+ */
+export class LyraChart extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'line';
+        this.labels = [];
+        this.datasets = [];
+        this.legend = false;
+        /** Legend placement. `auto` uses a right legend above 480px and a bottom legend below it. */
+        this.legendPosition = 'top';
+        this.area = false;
+        this.zoom = false;
+        this.height = '280px';
+        this.xLabel = '';
+        this.yLabel = '';
+        this.y2Label = '';
+        this.beginAtZero = true;
+        /** Accessible name applied to the canvas. A host `aria-label` wins, then this falls back to the dataset labels. */
+        this.accessibleLabel = '';
+        /** Accessible description for the canvas. When unset, a concise data/trend summary is generated. */
+        this.accessibleDescription = '';
+        /** Makes the generated data table visible; it remains screen-reader available when false. */
+        this.showDataTable = false;
+        /** Sets `options.indexAxis = 'y'`, Chart.js's own mechanism for horizontal bars (also applies to line/area types). */
+        this.horizontal = false;
+        /** Stacks the `x`/`y`(/`y2`) scale entries `buildScales()` returns; only meaningful for `bar` and `line` types. */
+        this.stacked = false;
+        /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
+        this.loading = true;
+        this.zoomed = false;
+        this.visible = true;
+        this.autoLegendPosition = 'right';
+        this.chartAreaUpdateQueued = false;
+        // `chartjs-plugin-zoom`'s own `resetZoom()` synchronously re-invokes the
+        // `onZoomComplete` callback below as part of its reset, which would emit a
+        // stale `{zoomed: true}` right before `resetZoom()` emits the real
+        // `{zoomed: false}`. Set while this component's own `resetZoom()` is
+        // driving the plugin so that re-entrant callback is ignored.
+        this.suppressZoomComplete = false;
+        this.descriptionId = nextId('chart-description');
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateAutoLegendPosition();
+                this.draw();
+            });
+            this.resizeObserver.observe(this);
+        }
+        this.updateAutoLegendPosition();
+        const load = this.zoom ? loadChartJsWithZoom() : loadChartJs();
+        void load.then((mod) => {
+            if (!this.isConnected)
+                return;
+            this.loading = false;
+            if (!mod)
+                return;
+            this.chartJsModule = mod;
+            this.draw();
+        });
+        if (typeof IntersectionObserver !== 'undefined') {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                const wasVisible = this.visible;
+                this.visible = entries[0]?.isIntersecting ?? true;
+                if (this.visible && !wasVisible)
+                    this.draw();
+            });
+            this.intersectionObserver.observe(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.chart?.destroy();
+        this.chart = undefined;
+        this.intersectionObserver?.disconnect();
+    }
+    /**
+     * 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.
+     */
+    willUpdate() {
+        if (!this.zoomed)
+            return;
+        if (this.effectiveType() !== this.builtType) {
+            this.zoomed = false;
+        }
+    }
+    updated(changed) {
+        // Disconnected between the property change that scheduled this update
+        // and Lit's (microtask-deferred) processing of it — e.g. a property
+        // changes and the element is removed in the same synchronous tick, so
+        // `disconnectedCallback()` (which already destroyed `this.chart`) runs
+        // *before* this method does. Nothing below should run in that case:
+        // this method's own unconditional `draw()` call further down would
+        // otherwise construct a brand-new `Chart` bound to the now-detached
+        // canvas — `draw()`'s own guard (`!chartJsModule || !canvasEl`) doesn't
+        // catch this, since both persist on a disconnected-but-intact element.
+        // If the component is reconnected later, `connectedCallback()` re-kicks
+        // its own load/draw sequence, so nothing is lost by bailing out here.
+        if (!this.isConnected)
+            return;
+        if (this.loading)
+            this.setAttribute('aria-busy', 'true');
+        else
+            this.removeAttribute('aria-busy');
+        // `--lr-chart-height` is read by `:host`'s `block-size` in
+        // `chart.styles.ts`. Custom properties only cascade downward (host ->
+        // shadow tree), never upward from a shadow-tree descendant back to the
+        // host, so this must be set on the host element itself, not on the
+        // `[part="base"]` div inside the shadow root.
+        if (changed.has('height')) {
+            this.style.setProperty('--lr-chart-height', this.height);
+        }
+        // While `chart.js` is still loading, `draw()` would no-op anyway (no
+        // `chartJsModule`/`canvasEl` yet) — bail before touching `lastSignature`
+        // so that phantom "no-op" update doesn't get cached as the baseline and
+        // silently swallow the real first draw once loading finishes with no
+        // other property having changed in the meantime.
+        if (this.loading)
+            return;
+        // `zoom` can also turn on after connect (it was false at
+        // `connectedCallback()` time, so only the core `loadChartJs()` load was
+        // kicked off) — load the zoom plugin on demand now and redraw once it's
+        // registered. Mirrors the same `isConnected` guard `connectedCallback()`
+        // uses: this method already bailed out above if *already* disconnected,
+        // but the element can *also* disconnect during the gap while this
+        // dynamic import is in flight — without this guard, `draw()` would
+        // construct a new, leaked `Chart` bound to the now-detached canvas once
+        // the import resolves.
+        if (changed.has('zoom') && this.zoom) {
+            void loadChartJsWithZoom().then(() => {
+                if (!this.isConnected)
+                    return;
+                this.draw();
+            });
+        }
+        const contentChanged = [
+            'type',
+            'labels',
+            'datasets',
+            'legend',
+            'legendPosition',
+            'autoLegendPosition',
+            'valueFormatter',
+            'area',
+            'height',
+            'xLabel',
+            'yLabel',
+            'y2Label',
+            'beginAtZero',
+            'horizontal',
+            'stacked',
+            'config',
+            'zoom',
+            'locale',
+            'strings',
+            'loading',
+        ].some((name) => changed.has(name));
+        if (!contentChanged)
+            return;
+        if (!this.visible)
+            return; // becoming visible again triggers its own draw() via the observer above
+        this.draw();
+    }
+    seriesToDataset(s) {
+        const colors = Array.isArray(s.color) ? s.color : s.color ? [s.color] : undefined;
+        return {
+            label: s.label,
+            data: s.points ?? s.data ?? [],
+            // Leave unset rather than defaulting to `this.type`: Chart.js already
+            // falls back to the chart-level (effective) type for any dataset that
+            // doesn't set its own `type`, and forcing `this.type` here unconditionally
+            // used to be harmless (it normally matched the effective type anyway) —
+            // but it actively breaks a `config.type` override to a different chart
+            // family (e.g. attribute `type="line"` + `config.type: 'radar'`): every
+            // dataset would carry an explicit `type: 'line'` under a chart whose
+            // scales are built for `radar` (a single radial `r` scale, no `x`/`y`),
+            // which Chart.js can't reconcile — it hangs the page trying to lay out
+            // a cartesian-scale controller against a radial-only scale set. Only
+            // `s.type` (an explicit per-series mixed-type override, e.g. a line
+            // series over a bar chart of the *same* effective family) is passed
+            // through.
+            type: s.type,
+            fill: s.fill ?? this.area,
+            borderWidth: s.width ?? 2,
+            borderDash: s.dash ? [4, 4] : undefined,
+            backgroundColor: colors,
+            borderColor: colors?.[0],
+            pointBackgroundColor: s.pointColors,
+            pointRadius: s.pointRadius,
+            yAxisID: s.axis === 'y2' ? 'y2' : 'y',
+        };
+    }
+    /**
+     * Resolves the `--lr-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.
+     */
+    themeColors() {
+        const cs = getComputedStyle(this);
+        return {
+            grid: cs.getPropertyValue('--lr-chart-grid-color').trim() || FALLBACK_GRID_COLOR,
+            tick: cs.getPropertyValue('--lr-chart-tick-color').trim() || FALLBACK_TICK_COLOR,
+            legend: cs.getPropertyValue('--lr-chart-legend-color').trim() || FALLBACK_LEGEND_COLOR,
+            tooltipBg: cs.getPropertyValue('--lr-chart-tooltip-bg').trim() || FALLBACK_TOOLTIP_BG,
+            tooltipText: cs.getPropertyValue('--lr-chart-tooltip-text').trim() || FALLBACK_TOOLTIP_TEXT,
+        };
+    }
+    tickOptions(theme) {
+        return {
+            color: theme.tick,
+            ...(this.valueFormatter
+                ? { callback: (value) => this.formatValue(value, 'tick') }
+                : {}),
+        };
+    }
+    /**
+     * 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.
+     */
+    buildScales(effectiveType, theme) {
+        if (effectiveType === 'pie' || effectiveType === 'doughnut')
+            return {};
+        if (effectiveType === 'radar' || effectiveType === 'polarArea') {
+            return {
+                r: {
+                    beginAtZero: this.beginAtZero,
+                    ticks: this.tickOptions(theme),
+                    grid: { color: theme.grid },
+                    angleLines: { color: theme.grid },
+                    pointLabels: { color: theme.tick },
+                },
+            };
+        }
+        const hasY2 = this.datasets.some((s) => s.axis === 'y2');
+        const rtl = this.effectiveDirection === 'rtl';
+        // `stacked` only applies to bar/line-family charts sharing a categorical
+        // axis, per the design spec — scatter/bubble's linear x scale and the
+        // radial r scale above are out of scope.
+        const stacked = this.stacked && (effectiveType === 'bar' || effectiveType === 'line');
+        return {
+            x: {
+                type: effectiveType === 'scatter' || effectiveType === 'bubble' ? 'linear' : 'category',
+                title: { display: !!this.xLabel, text: this.xLabel, color: theme.tick },
+                ticks: this.tickOptions(theme),
+                grid: { color: theme.grid },
+                stacked,
+            },
+            y: {
+                position: rtl ? 'right' : 'left',
+                beginAtZero: this.beginAtZero,
+                title: { display: !!this.yLabel, text: this.yLabel, color: theme.tick },
+                ticks: this.tickOptions(theme),
+                grid: { color: theme.grid },
+                stacked,
+            },
+            ...(hasY2
+                ? {
+                    y2: {
+                        position: rtl ? 'left' : 'right',
+                        grid: { drawOnChartArea: false, color: theme.grid },
+                        title: { display: !!this.y2Label, text: this.y2Label, color: theme.tick },
+                        ticks: this.tickOptions(theme),
+                        stacked,
+                    },
+                }
+                : {}),
+        };
+    }
+    /**
+     * `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.
+     */
+    handlePointClick(event, chart) {
+        // Chart.js's own `onClick` handler hands us its `ChartEvent` wrapper, but
+        // `getElementsAtEventForMode()`'s .d.ts (inaccurately) types its first
+        // param as a DOM `Event` — at runtime Chart.js only reads `.x`/`.y` off
+        // whatever is passed (see chart.js/src/helpers/helpers.dom.ts
+        // `getRelativePosition()`), which `ChartEvent` already has, so the cast
+        // here is a type-only correction, not a behavior change.
+        const elements = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
+        const hit = elements[0];
+        if (!hit)
+            return;
+        const { datasetIndex, index } = hit;
+        const label = chart.data.labels?.[index];
+        const value = chart.data.datasets[datasetIndex]?.data?.[index] ?? null;
+        this.emit('lr-point-click', { datasetIndex, index, label, value });
+    }
+    /**
+     * `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).
+     */
+    effectiveType() {
+        return (this.config?.type ?? normalizeChartType(this.type));
+    }
+    /** Localized chart-type name for `chartDescription()`'s sr-only summary. `effectiveType()` can
+     *  return a raw Chart.js type string a consumer set through the `config` passthrough (including a
+     *  custom registered controller name beyond this library's own `LyraChartType` union) -- that's
+     *  caller-supplied data, not library copy, so it passes through untranslated rather than through
+     *  `localize()`, matching every other known type's localized label. */
+    localizedChartType() {
+        const type = this.effectiveType();
+        const key = CHART_TYPE_MESSAGE_KEYS[type];
+        return key ? this.localize(key) : String(type);
+    }
+    formatValue(value, context) {
+        const numeric = typeof value === 'number' ? value : Number(value);
+        return this.valueFormatter && Number.isFinite(numeric) ? this.valueFormatter(numeric, context) : value;
+    }
+    legendValue(item, chart) {
+        const data = chart.data.datasets?.[item.datasetIndex]?.data;
+        if (!data)
+            return undefined;
+        const indexed = Number.isInteger(item.index) ? Number(data[item.index]) : NaN;
+        if (Number.isFinite(indexed))
+            return indexed;
+        const values = data.map(Number).filter(Number.isFinite);
+        return values.length ? values.reduce((sum, value) => sum + value, 0) : undefined;
+    }
+    legendLabels(chart) {
+        const generateLabels = this.chartJsModule?.defaults?.plugins?.legend?.labels?.generateLabels;
+        const labels = (generateLabels && chart.legend && chart.options ? generateLabels(chart) : undefined) ??
+            (chart.data.datasets ?? []).map((dataset, index) => ({
+                text: dataset.label ?? String(index + 1),
+                datasetIndex: index,
+            }));
+        return labels.map((item) => {
+            const value = this.legendValue(item, chart);
+            const formatted = this.formatValue(value, 'legend');
+            return formatted === value || formatted === undefined ? item : { ...item, text: `${item.text}: ${formatted}` };
+        });
+    }
+    tooltipLabel(context) {
+        const parsed = context.parsed;
+        const rawValue = typeof parsed === 'object' && parsed !== null ? parsed.y ?? parsed.r ?? parsed.x : parsed ?? context.raw;
+        const formatted = this.formatValue(rawValue, 'tooltip');
+        if (formatted === rawValue || formatted === undefined)
+            return undefined;
+        return context.dataset?.label ? `${context.dataset.label}: ${formatted}` : String(formatted);
+    }
+    updateAutoLegendPosition() {
+        const width = this.getBoundingClientRect().width || this.clientWidth;
+        const next = width > 0 && width < 480 ? 'bottom' : 'right';
+        if (next !== this.autoLegendPosition)
+            this.autoLegendPosition = next;
+    }
+    legendPositionForConfig() {
+        return this.legendPosition === 'auto' ? this.autoLegendPosition : this.legendPosition;
+    }
+    updateChartArea(chart = this.chart) {
+        const area = chart?.chartArea;
+        if (!area)
+            return;
+        const next = {
+            top: Number(area.top),
+            left: Number(area.left),
+            right: Number(area.right),
+            bottom: Number(area.bottom),
+            width: Number(area.width),
+            height: Number(area.height),
+        };
+        if (Object.values(next).some((value) => !Number.isFinite(value)))
+            return;
+        const previous = this.resolvedChartArea;
+        if (previous &&
+            Object.keys(next).every((key) => previous[key] === next[key])) {
+            return;
+        }
+        this.resolvedChartArea = next;
+        if (!this.chartAreaUpdateQueued) {
+            this.chartAreaUpdateQueued = true;
+            queueMicrotask(() => {
+                this.chartAreaUpdateQueued = false;
+                if (this.isConnected)
+                    this.requestUpdate();
+            });
+        }
+    }
+    /** The current Chart.js chart-area geometry in canvas-local coordinates. */
+    get chartArea() {
+        return this.resolvedChartArea;
+    }
+    buildConfig() {
+        const theme = this.themeColors();
+        // Resolve the effective type up front: `config.type` (if set) overrides
+        // the attribute `type` post-merge, so scales/interaction must be built
+        // for *that* type, not `this.type` — otherwise a config.type override
+        // (e.g. line -> radar) ships with the wrong axis shape (categorical x/y
+        // instead of a radial r scale).
+        const effectiveType = this.effectiveType();
+        const generated = {
+            type: effectiveType,
+            data: {
+                labels: this.labels,
+                datasets: this.datasets.map((s) => this.seriesToDataset(s)),
+            },
+            options: {
+                locale: this.effectiveLocale,
+                responsive: true,
+                maintainAspectRatio: false,
+                // Chart.js's own mechanism for horizontal bars (also flips line/area
+                // types onto a horizontal category axis).
+                indexAxis: this.horizontal ? 'y' : undefined,
+                // Chart.js's own default ~1000ms draw-in animation only ever fires
+                // from `new Chart()` (chart/type-change construction) — every
+                // in-place update in `draw()` already passes `'none'` to
+                // `Chart#update()`. A CSS media query can't reach that
+                // canvas-internal animation loop, so `prefersReducedMotion()` is
+                // checked here instead and fed into `options.animation`.
+                animation: prefersReducedMotion() ? false : undefined,
+                interaction: { intersect: false, mode: effectiveType === 'scatter' ? 'nearest' : 'index' },
+                onClick: (event, _elements, chart) => this.handlePointClick(event, chart),
+                plugins: {
+                    legend: {
+                        display: this.legend,
+                        position: this.legendPositionForConfig(),
+                        labels: {
+                            color: theme.legend,
+                            ...(this.valueFormatter
+                                ? { generateLabels: (chart) => this.legendLabels(chart) }
+                                : {}),
+                        },
+                    },
+                    tooltip: {
+                        backgroundColor: theme.tooltipBg,
+                        titleColor: theme.tooltipText,
+                        bodyColor: theme.tooltipText,
+                        ...(this.valueFormatter ? { label: (context) => this.tooltipLabel(context) } : {}),
+                        // Chart.js's tooltip plugin has no per-dataset `tooltip.enabled`
+                        // — `Series.noTooltip` is implemented here instead, via the one
+                        // mechanism the core tooltip plugin actually reads.
+                        filter: (item) => !this.datasets[item.datasetIndex]?.noTooltip,
+                    },
+                    zoom: this.zoom
+                        ? {
+                            pan: { enabled: false },
+                            zoom: {
+                                wheel: { enabled: true },
+                                drag: { enabled: true },
+                                pinch: { enabled: true },
+                                mode: 'x',
+                                onZoomComplete: () => {
+                                    if (this.suppressZoomComplete)
+                                        return;
+                                    this.zoomed = true;
+                                    this.emit('lr-zoom', { zoomed: true });
+                                },
+                            },
+                            limits: { x: { min: 'original', max: 'original' } },
+                        }
+                        : undefined,
+                },
+                onResize: (chart) => this.updateChartArea(chart),
+                scales: this.buildScales(effectiveType, theme),
+            },
+        };
+        if (!this.config)
+            return generated;
+        // Raw Chart.js passthrough (mirrors `wa-chart`'s `config` property) —
+        // deep-merge `config` over the `Series`-derived config at every nesting
+        // level (see `deepMerge` above), letting consumers override or extend a
+        // single nested key (e.g. `config.options.scales.y.min`) without
+        // clobbering the rest of the generated sibling object.
+        return deepMerge(generated, this.config);
+    }
+    draw() {
+        if (!this.chartJsModule || !this.canvasEl)
+            return;
+        const config = this.buildConfig();
+        const effectiveType = config.type;
+        if (this.chart && this.builtType === effectiveType) {
+            // Chart.js tracks per-dataset legend-toggled visibility by dataset INDEX against its own
+            // internal metadata, separate from `chart.data.datasets` itself -- a full reassignment of
+            // `chart.data` on every reactive update (as every live-polling consumer's parent naturally
+            // produces) would otherwise silently reset every hidden series back to visible.
+            // Only snapshot indices the chart already has metadata for -- `this.datasets` reflects the
+            // *new* series count, so mapping over it (instead of the chart's own prior dataset count)
+            // would query isDatasetVisible() for a not-yet-existing index, get back its "not explicitly
+            // visible" default, and then setDatasetVisibility(i, false) below would enforce that default
+            // as a real hidden state -- permanently hiding a series the moment it's added.
+            const priorDatasetCount = this.chart.data.datasets?.length ?? 0;
+            const priorVisibility = Array.from({ length: priorDatasetCount }, (_, i) => this.chart.isDatasetVisible(i));
+            this.chart.data = config.data;
+            this.chart.options = config.options ?? {};
+            this.chart.update('none');
+            this.updateChartArea(this.chart);
+            // The mirror-image guard of the one above: a shrinking update can leave `priorVisibility`
+            // longer than the new dataset list, and Chart.js fabricates metadata for an out-of-range index
+            // instead of throwing -- skip any index the shrunk list no longer has instead of polluting
+            // internal per-dataset state for a series that's gone.
+            const currentDatasetCount = this.chart.data.datasets?.length ?? 0;
+            let restoredHiddenState = false;
+            priorVisibility.forEach((visible, i) => {
+                if (i >= currentDatasetCount)
+                    return;
+                if (!visible) {
+                    this.chart.setDatasetVisibility(i, false);
+                    restoredHiddenState = true;
+                }
+            });
+            // setDatasetVisibility() only flips internal metadata -- it does not repaint on its own (unlike
+            // hide()/show()) -- so without a follow-up update() the canvas would keep showing the series as
+            // visible until some unrelated future draw() call happens to run.
+            if (restoredHiddenState)
+                this.chart.update('none');
+            return;
+        }
+        this.chart?.destroy();
+        this.chart = new this.chartJsModule.Chart(this.canvasEl, config);
+        this.builtType = effectiveType;
+        this.updateChartArea(this.chart);
+    }
+    /** Reset any active zoom/pan back to the original view. */
+    resetZoom() {
+        this.suppressZoomComplete = true;
+        try {
+            this.chart?.resetZoom?.();
+        }
+        finally {
+            this.suppressZoomComplete = false;
+        }
+        this.zoomed = false;
+        this.emit('lr-zoom', { zoomed: false });
+    }
+    /**
+     * Forces a redraw so `themeColors()` re-reads the `--lr-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 `lr-chart` property, so Lit's reactive
+     * update loop has nothing of its own to trigger `draw()` on.
+     */
+    refreshTheme() {
+        this.draw();
+    }
+    seriesValues(series) {
+        if (series.points)
+            return series.points.map((point) => point.y).filter((value) => Number.isFinite(value));
+        return (series.data ?? []).filter((value) => value != null && Number.isFinite(value));
+    }
+    formatSummaryValue(value) {
+        return getNumberFormat(this.effectiveLocale).format(value);
+    }
+    accessibleName(fallback) {
+        return this.getAttribute('aria-label') || this.accessibleLabel || fallback;
+    }
+    chartDescription() {
+        if (this.accessibleDescription)
+            return this.accessibleDescription;
+        const summaries = this.datasets.map((series) => {
+            const values = this.seriesValues(series);
+            if (!values.length)
+                return this.localize('chartSeriesNoData', undefined, { label: series.label });
+            const first = values[0];
+            const last = values[values.length - 1];
+            const trend = last > first
+                ? this.localize('chartTrendIncreasing')
+                : last < first
+                    ? this.localize('chartTrendDecreasing')
+                    : this.localize('chartTrendFlat');
+            let min = values[0];
+            let max = values[0];
+            for (const value of values) {
+                min = Math.min(min, value);
+                max = Math.max(max, value);
+            }
+            return this.localize('chartSummary', undefined, {
+                label: series.label,
+                count: values.length,
+                min: this.formatSummaryValue(min),
+                max: this.formatSummaryValue(max),
+                trend,
+            });
+        });
+        return summaries.length
+            ? this.localize('chartSummaryWithData', undefined, {
+                type: this.localizedChartType(),
+                // the sentence separator is a message of its own since not every
+                // language delimits sentences with a period-space pair
+                summaries: summaries.join(this.localize('chartSummarySeparator')),
+            })
+            : this.localize('chartSummaryEmpty', undefined, { type: this.localizedChartType() });
+    }
+    renderDataTable() {
+        const rowCount = Math.max(this.labels.length, ...this.datasets.map((series) => (series.points ? series.points.length : series.data?.length ?? 0)), 0);
+        return html `
+      <table class=${this.showDataTable ? nothing : 'sr-only'}>
+        <caption>${this.accessibleName(this.localize('chartData'))}</caption>
+        <thead>
+          <tr>
+            <th scope="col">${this.localize('chartCategory')}</th>
+            ${this.datasets.map((series) => html `<th scope="col">${series.label}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${Array.from({ length: rowCount }, (_, index) => html `
+            <tr>
+              <th scope="row">${this.labels[index] ?? this.localize('chartPointLabel', undefined, { n: index + 1 })}</th>
+              ${this.datasets.map((series) => {
+            const value = series.points ? series.points[index]?.y : series.data?.[index];
+            return html `<td>${value == null || !Number.isFinite(value) ? this.localize('noData') : value}</td>`;
+        })}
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    `;
+    }
+    render() {
+        if (this.loading) {
+            return html `
+        <div part="base">
+          <lr-skeleton variant="rect"></lr-skeleton>
+        </div>
+      `;
+        }
+        const label = this.accessibleName(this.datasets.map((d) => d.label).join(', ') || this.localize('chart'));
+        const description = this.chartDescription();
+        return html `
+      <div part="base">
+        <canvas part="canvas" role="img" aria-label=${label} aria-describedby=${this.descriptionId}></canvas>
+        <div
+          part="center"
+          style=${styleMap(this.resolvedChartArea
+            ? {
+                left: `${this.resolvedChartArea.left + this.resolvedChartArea.width / 2}px`,
+                top: `${this.resolvedChartArea.top + this.resolvedChartArea.height / 2}px`,
+            }
+            : { left: '50%', top: '50%' })}
+        >
+          <slot name="center"></slot>
+        </div>
+        <p part="description" id=${this.descriptionId} class="sr-only">${description}</p>
+        <div part="data-table">
+          <slot name="data-table"></slot>
+          ${this.renderDataTable()}
+        </div>
+        ${this.zoom && this.zoomed
+            ? html `<button part="reset-zoom-button" type="button" @click=${() => this.resetZoom()}>
+              ${this.localize('resetZoom')}
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ converter: { fromAttribute: (value) => normalizeChartType(value) } })
+], LyraChart.prototype, "type", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChart.prototype, "labels", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChart.prototype, "datasets", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraChart.prototype, "legend", void 0);
+__decorate([
+    property({ attribute: 'legend-position' })
+], LyraChart.prototype, "legendPosition", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChart.prototype, "valueFormatter", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraChart.prototype, "area", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraChart.prototype, "zoom", void 0);
+__decorate([
+    property()
+], LyraChart.prototype, "height", void 0);
+__decorate([
+    property({ attribute: 'x-label' })
+], LyraChart.prototype, "xLabel", void 0);
+__decorate([
+    property({ attribute: 'y-label' })
+], LyraChart.prototype, "yLabel", void 0);
+__decorate([
+    property({ attribute: 'y2-label' })
+], LyraChart.prototype, "y2Label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'begin-at-zero' })
+], LyraChart.prototype, "beginAtZero", void 0);
+__decorate([
+    property({ attribute: 'accessible-label' })
+], LyraChart.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ attribute: 'accessible-description' })
+], LyraChart.prototype, "accessibleDescription", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-data-table' })
+], LyraChart.prototype, "showDataTable", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraChart.prototype, "horizontal", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraChart.prototype, "stacked", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChart.prototype, "config", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "loading", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "zoomed", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "visible", void 0);
+__decorate([
+    query('canvas')
+], LyraChart.prototype, "canvasEl", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "autoLegendPosition", void 0);
+/**
+ * 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
+ * `lr-*-chart` subclass (bar/line/pie/doughnut/scatter/bubble/radar/
+ * polarArea) plus `lr-histogram`, replacing what used to be an identical
+ * ~16-line `Object.defineProperty` block copy-pasted into each file.
+ */
+export function lockChartType(ctor, value) {
+    Object.defineProperty(ctor.prototype, 'type', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return value;
+        },
+        set(_v) {
+            /* locked to `value`; direct writes are ignored */
+        },
+    });
+}
+//# sourceMappingURL=chart.class.js.map