@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/chart/lite-chart.class.js

@@ -0,0 +1,757 @@
+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, svg, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { srOnly } from '../../internal/a11y.js';
+import { styles } from './lite-chart.styles.js';
+// The semantic variables are resolved by SVG/CSS at paint time, so changing a
+// theme or color-scheme does not require a second JS-side draw pass.
+const DEFAULT_PALETTE = [
+    'var(--lyra-chart-color-1)',
+    'var(--lyra-chart-color-2)',
+    'var(--lyra-chart-color-3)',
+    'var(--lyra-chart-color-4)',
+    'var(--lyra-chart-color-5)',
+    'var(--lyra-chart-color-6)',
+    'var(--lyra-chart-color-7)',
+    'var(--lyra-chart-color-8)',
+];
+const PAD_LEFT = 36;
+const PAD_RIGHT = 8;
+const PAD_TOP = 8;
+const PAD_BOTTOM = 20;
+const AXIS_TITLE_SPACE = 14;
+const TICK_COUNT = 4;
+const BAR_GROUP_GAP = 0.2; // fraction of a category slot left as gap between categories
+const BAR_GAP = 0.08; // fraction of a category slot left as gap between grouped bars
+const BAR_CORNER_RADIUS = 4; // px, used only when roundedBars is true
+/**
+ * Picks a "nice" (1/2/5 × 10^n) step size for an axis spanning `span` over
+ * roughly `count` ticks — the standard Heckbert nice-numbers approach, so
+ * axis labels read as 0/25/50/75/100 rather than 0/23.4/46.8/70.2/93.6.
+ */
+function niceStep(span, count) {
+    if (span <= 0)
+        return 1;
+    const rough = span / Math.max(1, count);
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const residual = rough / magnitude;
+    const niceResidual = residual < 1.5 ? 1 : residual < 3 ? 2 : residual < 7 ? 5 : 10;
+    return niceResidual * magnitude;
+}
+/** Nice-rounded [lo, hi, ticks[]] for an axis covering `dataLo..dataHi`. */
+function niceDomain(dataLo, dataHi, beginAtZero, count) {
+    let lo = beginAtZero ? Math.min(0, dataLo) : dataLo;
+    let hi = beginAtZero ? Math.max(0, dataHi) : dataHi;
+    if (lo === hi) {
+        lo -= 1;
+        hi += 1;
+    }
+    const step = niceStep(hi - lo, count);
+    lo = Math.floor(lo / step) * step;
+    hi = Math.ceil(hi / step) * step;
+    const ticks = [];
+    for (let v = lo; v <= hi + step / 2; v += step)
+        ticks.push(Math.round(v / step) * step);
+    return { lo, hi, ticks };
+}
+export class LyraLiteChart extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'bar';
+        this.labels = [];
+        this.datasets = [];
+        this.legend = false;
+        this.height = '280px';
+        this.xLabel = '';
+        this.yLabel = '';
+        this.beginAtZero = true;
+        /** Stacks each category's bars into one segmented bar. Ignored for `type="line"`. */
+        this.stacked = false;
+        /** `'fit'` (default) squeezes the plot into the measured host width, unchanged from before this
+         *  property existed. `'scroll'` gives every bar a fixed `barWidth` instead, letting the plot's
+         *  content width exceed the host's — the host becomes horizontally scrollable
+         *  (`overflow-x: auto`) so every bar stays exactly `barWidth` wide regardless of category count.
+         *  Reflects to the `layout` attribute (e.g. for `:host([layout='scroll'])` host styling). */
+        this.layout = 'fit';
+        /** Fixed per-category bar width in px, used only when `layout="scroll"`. Ignored (as before this
+         *  property existed) in `layout="fit"`, the default. */
+        this.barWidth = 32;
+        /** `type="bar"` only: draws each bar as a rounded-top-corner shape instead of the default
+         *  square-cornered rect. Default `false` renders exactly today's plain `<rect>`. */
+        this.roundedBars = false;
+        /** `type="bar"` only: omits a bar entirely (no mark, no `tabindex`, no tooltip) for a value that
+         *  is exactly `0` — `null`/non-finite values are always skipped regardless of this flag. Default
+         *  `false` preserves today's behavior of a zero-height but focusable/titled bar. */
+        this.skipZero = false;
+        /** `type="bar"` only (no effect on `type="line"`): `'linear'` (default) maps a bar's value to
+         *  height via the standard `niceDomain`-based fraction, unchanged from before this property
+         *  existed. `'sqrt'` instead maps via `Math.sqrt(value / domainMax)` (mirroring `lyra-heatmap`'s
+         *  matrix-mode `sqrt` scale), boosting smaller values relative to one dominant value so a skewed
+         *  dataset's smaller bars don't get washed out. Gridlines/tick labels stay on the linear domain
+         *  either way — only the bar marks' own height mapping changes. */
+        this.scale = 'linear';
+        /** Suppresses `renderGrid()` entirely — no gridlines, no y-axis tick labels. x-axis category
+         *  labels (rendered separately) are unaffected. Default `false` preserves today's behavior. */
+        this.hideAxis = false;
+        this.plotWidth = 0;
+        this.plotHeight = 0;
+        this.visible = true;
+        /** One roving tab stop across all bar/point marks. */
+        this.activeMarkIndex = 0;
+        this.liveText = '';
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const box = entries[0]?.contentBoxSize?.[0];
+            if (box) {
+                this.plotWidth = box.inlineSize;
+                this.plotHeight = box.blockSize;
+            }
+            else {
+                const rect = this.svgEl?.getBoundingClientRect();
+                if (rect) {
+                    this.plotWidth = rect.width;
+                    this.plotHeight = rect.height;
+                }
+            }
+        });
+        if (typeof IntersectionObserver !== 'undefined') {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                this.visible = entries[0]?.isIntersecting ?? true;
+            });
+            this.intersectionObserver.observe(this);
+        }
+        // A reconnect re-creates the observer above but the `<svg>` render root
+        // content survives across disconnect/reconnect (Lit doesn't tear down the
+        // shadow root) — re-observe it here (firstUpdated() only ever runs once,
+        // on the very first render, so it can't be relied on for a reconnect).
+        if (this.svgEl)
+            this.resizeObserver.observe(this.svgEl);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+    }
+    // The first draw is queued because connectedCallback() fires *before* Lit's
+    // first render, so on
+    // the very first mount `this.svgEl` (a `@query('svg')`) is still
+    // undefined there and its guarded `observe()` call is a no-op — verified
+    // empirically: deleting firstUpdated() here hung every existing test that
+    // waits for the ResizeObserver's initial measurement. firstUpdated() runs
+    // once, after that first render, and is what actually arms the observer
+    // for the initial mount; connectedCallback()'s own observe() call (added
+    // above) only ever succeeds on a *reconnect*, when the shadow DOM (and
+    // svgEl) already exists from before the disconnect. Together the two
+    // cover first-mount and reconnect without ever double-observing the same
+    // element from the same callback path.
+    firstUpdated() {
+        if (this.svgEl)
+            this.resizeObserver?.observe(this.svgEl);
+    }
+    updated(changed) {
+        if (changed.has('height')) {
+            this.style.setProperty('--lyra-chart-height', this.height);
+        }
+    }
+    colorFor(index, series) {
+        return series.color ?? DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
+    }
+    /** Dispatches to the host-provided `pointText` formatter when set, otherwise `undefined` (the
+     *  caller falls back to its own built-in template) — mirrors `lyra-heatmap`'s `resolveCellText()`. */
+    resolvePointText(label, value, datasetIndex) {
+        return this.pointText?.(label, value, datasetIndex);
+    }
+    /** The ordered set of visible marks used by both keyboard navigation and
+     * the screen-reader data alternative. */
+    interactiveMarks() {
+        const marks = [];
+        if (this.type === 'bar') {
+            for (let index = 0; index < this.labels.length; index++) {
+                for (let datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
+                    const value = this.datasets[datasetIndex]?.data[index];
+                    if (value == null || !Number.isFinite(value) || (this.skipZero && value === 0))
+                        continue;
+                    marks.push({ datasetIndex, index, label: this.labels[index] ?? '', value });
+                }
+            }
+        }
+        else {
+            this.datasets.forEach((series, datasetIndex) => {
+                series.data.forEach((value, index) => {
+                    if (value == null || !Number.isFinite(value))
+                        return;
+                    marks.push({ datasetIndex, index, label: this.labels[index] ?? '', value });
+                });
+            });
+        }
+        return marks;
+    }
+    markIndexMap() {
+        return new Map(this.interactiveMarks().map((mark, index) => [`${mark.datasetIndex}:${mark.index}`, index]));
+    }
+    normalizedMarkIndex(marks = this.interactiveMarks()) {
+        return marks.length ? Math.min(Math.max(this.activeMarkIndex, 0), marks.length - 1) : -1;
+    }
+    markAnnouncement(index, marks = this.interactiveMarks()) {
+        const mark = marks[index];
+        if (!mark)
+            return '';
+        const series = this.datasets[mark.datasetIndex]?.label ?? 'Series';
+        const custom = this.resolvePointText(mark.label, mark.value, mark.datasetIndex);
+        return `${custom ?? `${series}, ${mark.label}: ${mark.value}`} (${index + 1} of ${marks.length})`;
+    }
+    onMarkFocus(index) {
+        const marks = this.interactiveMarks();
+        if (!marks[index])
+            return;
+        this.activeMarkIndex = index;
+        this.liveText = this.markAnnouncement(index, marks);
+    }
+    focusMark(index) {
+        const marks = this.interactiveMarks();
+        if (!marks[index])
+            return;
+        this.activeMarkIndex = index;
+        this.liveText = this.markAnnouncement(index, marks);
+        void this.updateComplete.then(() => {
+            const markEls = Array.from(this.renderRoot.querySelectorAll('[part="bar"], [part="point"]'));
+            markEls[index]?.focus();
+        });
+    }
+    /**
+     * A value-to-y-pixel mapping for a bar's top/bottom edge. `'linear'` (the
+     * default) is the standard `niceDomain`-fraction formula. `'sqrt'`
+     * compresses via `Math.sqrt(value / domainMax)`, clamping `value` to
+     * `[0, hi]` first since a negative input has no real square root.
+     *
+     * NOT used for the `stacked && scale === 'sqrt'` case — that combination's
+     * proportionality (compress the bar's *total* height once, then split it
+     * linearly by each segment's share) is computed directly in `renderBars()`,
+     * since a per-segment call here (compressing each segment's absolute
+     * cumulative stack position independently) is exactly the non-proportional
+     * bug this method's stacked callers used to have.
+     */
+    barValueToY(value, plotY, plotH, lo, hi) {
+        if (this.scale === 'sqrt') {
+            const domainMax = hi > 0 ? hi : 1;
+            const frac = Math.sqrt(Math.min(domainMax, Math.max(0, value)) / domainMax);
+            return plotY + plotH - frac * plotH;
+        }
+        const span = hi - lo || 1;
+        return plotY + plotH - ((value - lo) / span) * plotH;
+    }
+    /**
+     * A rounded-top-corners `<path>` `d` string for a bar occupying
+     * `[x, y, x+w, y+h]` — an SVG `<rect>` can only express a uniform radius
+     * on all four corners, so `roundedBars` switches the mark to a path
+     * instead of adding `rx`/`ry` to keep the bottom edge square against the
+     * baseline. `r` is clamped so it never exceeds half the bar's width or its
+     * full height (a thin/short bar degrades to a plain rectangle path rather
+     * than self-intersecting).
+     */
+    roundedBarPath(x, y, w, h) {
+        const r = Math.max(0, Math.min(BAR_CORNER_RADIUS, w / 2, h));
+        if (r <= 0)
+            return `M${x},${y} h${w} v${h} h${-w} Z`;
+        return `M${x},${y + r} Q${x},${y} ${x + r},${y} H${x + w - r} Q${x + w},${y} ${x + w},${y + r} V${y + h} H${x} Z`;
+    }
+    domain() {
+        let lo = Infinity;
+        let hi = -Infinity;
+        if (this.type === 'bar' && this.stacked) {
+            // Stacked bars: each category's extent is the sum of its (signed)
+            // positive/negative segments, not the max single value.
+            for (let i = 0; i < this.labels.length; i++) {
+                let pos = 0;
+                let neg = 0;
+                for (const s of this.datasets) {
+                    const v = s.data[i];
+                    if (v == null)
+                        continue;
+                    if (v >= 0)
+                        pos += v;
+                    else
+                        neg += v;
+                }
+                lo = Math.min(lo, neg);
+                hi = Math.max(hi, pos);
+            }
+        }
+        else {
+            for (const s of this.datasets) {
+                for (const v of s.data) {
+                    if (v == null)
+                        continue;
+                    lo = Math.min(lo, v);
+                    hi = Math.max(hi, v);
+                }
+            }
+        }
+        if (!Number.isFinite(lo) || !Number.isFinite(hi)) {
+            lo = 0;
+            hi = 1;
+        }
+        return niceDomain(lo, hi, this.beginAtZero, TICK_COUNT);
+    }
+    emitPoint(datasetIndex, index) {
+        const label = this.labels[index];
+        const value = this.datasets[datasetIndex]?.data[index] ?? null;
+        this.emit('lyra-point-click', { datasetIndex, index, label, value });
+    }
+    onPointKeyDown(e, datasetIndex, index, markIndex) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.onMarkFocus(markIndex);
+            this.emitPoint(datasetIndex, index);
+            return;
+        }
+        const marks = this.interactiveMarks();
+        if (!marks.length)
+            return;
+        let next = markIndex;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
+            next = Math.min(marks.length - 1, markIndex + 1);
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+            next = Math.max(0, markIndex - 1);
+        else if (e.key === 'Home')
+            next = 0;
+        else if (e.key === 'End')
+            next = marks.length - 1;
+        else
+            return;
+        e.preventDefault();
+        this.focusMark(next);
+    }
+    renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi) {
+        const span = hi - lo || 1;
+        return ticks.map((t) => {
+            const y = plotY + plotH - ((t - lo) / span) * plotH;
+            return svg `
+        <line part="grid-line" x1=${plotX} y1=${y} x2=${plotX + plotW} y2=${y}></line>
+        <text part="axis-label" x=${plotX - 6} y=${y} text-anchor="end" dominant-baseline="middle">${this.tickFormat ? this.tickFormat(t) : formatTick(t)}</text>
+      `;
+        });
+    }
+    /**
+     * `slot` is the per-category width to lay bars out against — either the
+     * measured-width-derived `plotW / n` (`layout="fit"`) or the fixed
+     * `barWidth` (`layout="scroll"`), computed once by the caller
+     * (`renderChart()`) and handed to both this method and the category-label
+     * x-position calc so the two can never drift apart from each other.
+     */
+    renderBars(plotX, plotY, plotH, slot, lo, hi) {
+        const n = this.labels.length;
+        const groupCount = this.stacked ? 1 : Math.max(1, this.datasets.length);
+        const groupGap = this.barGapRatio ?? BAR_GROUP_GAP;
+        const groupW = slot * (1 - groupGap);
+        const barW = (groupW - BAR_GAP * slot * (groupCount - 1)) / groupCount;
+        const markIndexes = this.markIndexMap();
+        const activeMarkIndex = this.normalizedMarkIndex();
+        // Only meaningful for stacked + scale="sqrt": each category's *positive*
+        // and *negative* stack totals, sqrt-compressed once per category (not
+        // per segment) -- see barValueToY()'s doc for why this has to be a
+        // per-category pre-pass rather than a per-segment computation.
+        const stackedSqrt = this.stacked && this.scale === 'sqrt';
+        const domainMax = hi > 0 ? hi : 1;
+        const posTotals = [];
+        const negTotals = [];
+        if (stackedSqrt) {
+            for (let i = 0; i < n; i++) {
+                let pos = 0;
+                let neg = 0;
+                for (const s of this.datasets) {
+                    const v = s.data[i];
+                    if (v == null || !Number.isFinite(v))
+                        continue;
+                    if (this.skipZero && v === 0)
+                        continue;
+                    if (v >= 0)
+                        pos += v;
+                    else
+                        neg += v;
+                }
+                posTotals.push(pos);
+                negTotals.push(neg);
+            }
+        }
+        const bars = [];
+        for (let i = 0; i < n; i++) {
+            // `this.barX`, when set, overrides just the category's own x-origin
+            // (what an unset `barX` would compute as `plotX + i * slot`) -- the
+            // group-centering/per-dataset-offset math below still layers on top of
+            // it, same as it does on top of the internal formula.
+            const origin = this.barX ? this.barX(i) : plotX + i * slot;
+            const slotStart = origin + (slot - groupW) / 2;
+            let stackPos = 0; // running positive-side offset (in value units) for stacked bars
+            let stackNeg = 0; // running negative-side offset
+            // sqrt-compressed pixel height of this category's positive/negative
+            // stack total, computed once per category (not per segment) -- see
+            // barValueToY()'s doc comment for why this differs from the old,
+            // buggy per-segment-cumulative-position sqrt.
+            const posCompressedH = stackedSqrt ? Math.sqrt(Math.min(domainMax, posTotals[i]) / domainMax) * plotH : 0;
+            const negCompressedH = stackedSqrt ? Math.sqrt(Math.min(domainMax, -negTotals[i]) / domainMax) * plotH : 0;
+            this.datasets.forEach((s, di) => {
+                const v = s.data[i];
+                if (v == null || !Number.isFinite(v))
+                    return;
+                if (this.skipZero && v === 0)
+                    return;
+                const color = this.colorFor(di, s);
+                let rectX;
+                let y1;
+                let y2;
+                if (this.stacked && stackedSqrt) {
+                    rectX = slotStart;
+                    if (v >= 0) {
+                        // Split the category's already-compressed total height linearly
+                        // by this segment's share of the category's own positive total
+                        // -- proportional by construction, unlike compressing each
+                        // segment's absolute cumulative position independently.
+                        const total = posTotals[i];
+                        const shareLo = total > 0 ? stackPos / total : 0;
+                        const shareHi = total > 0 ? (stackPos + v) / total : 0;
+                        y1 = plotY + plotH - shareHi * posCompressedH;
+                        y2 = plotY + plotH - shareLo * posCompressedH;
+                        stackPos += v;
+                    }
+                    else {
+                        const total = -negTotals[i];
+                        const shareLo = total > 0 ? -stackNeg / total : 0;
+                        const shareHi = total > 0 ? (-stackNeg - v) / total : 0;
+                        y1 = plotY + plotH + shareLo * negCompressedH;
+                        y2 = plotY + plotH + shareHi * negCompressedH;
+                        stackNeg += v;
+                    }
+                }
+                else if (this.stacked) {
+                    rectX = slotStart;
+                    let barValLo;
+                    let barValHi;
+                    if (v >= 0) {
+                        barValLo = stackPos;
+                        barValHi = stackPos + v;
+                        stackPos += v;
+                    }
+                    else {
+                        barValLo = stackNeg + v;
+                        barValHi = stackNeg;
+                        stackNeg += v;
+                    }
+                    y1 = this.barValueToY(barValHi, plotY, plotH, lo, hi);
+                    y2 = this.barValueToY(barValLo, plotY, plotH, lo, hi);
+                }
+                else {
+                    rectX = slotStart + di * (barW + BAR_GAP * slot);
+                    const zeroClamped = Math.min(hi, Math.max(lo, 0));
+                    const barValLo = Math.min(zeroClamped, v);
+                    const barValHi = Math.max(zeroClamped, v);
+                    y1 = this.barValueToY(barValHi, plotY, plotH, lo, hi);
+                    y2 = this.barValueToY(barValLo, plotY, plotH, lo, hi);
+                }
+                const label = this.labels[i];
+                const custom = this.resolvePointText(label, v, di);
+                const ariaLabel = custom ?? `${s.label}, ${label}: ${v}`;
+                const titleText = custom ?? `${s.label} — ${label}: ${v}`;
+                const w = Math.max(0, barW);
+                let h = Math.max(0, y2 - y1);
+                // A nonzero value's segment can round to sub-pixel and become
+                // visually/indistinguishable from absent -- minBarHeight floors it,
+                // pulling y1 upward by the same amount so the segment still
+                // terminates at its correct baseline (a floored segment "pushes" any
+                // segments stacked after it, the same tradeoff a hand-rolled
+                // Math.max(2, scaleToLength(...)) floor accepts).
+                if (this.minBarHeight != null && v !== 0 && h < this.minBarHeight) {
+                    const extra = this.minBarHeight - h;
+                    y1 -= extra;
+                    h = this.minBarHeight;
+                }
+                const markIndex = markIndexes.get(`${di}:${i}`);
+                bars.push(this.roundedBars
+                    ? svg `
+          <path
+            part="bar"
+            d=${this.roundedBarPath(rectX, y1, w, h)}
+            fill=${color}
+            tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
+            role="button"
+            aria-label=${ariaLabel}
+            @click=${() => this.emitPoint(di, i)}
+            @focus=${() => this.onMarkFocus(markIndex)}
+            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+          ><title>${titleText}</title></path>
+        `
+                    : svg `
+          <rect
+            part="bar"
+            x=${rectX}
+            y=${y1}
+            width=${w}
+            height=${h}
+            fill=${color}
+            tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
+            role="button"
+            aria-label=${ariaLabel}
+            @click=${() => this.emitPoint(di, i)}
+            @focus=${() => this.onMarkFocus(markIndex)}
+            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+          ><title>${titleText}</title></rect>
+        `);
+            });
+        }
+        return bars;
+    }
+    renderLines(plotX, plotY, plotW, plotH, lo, hi) {
+        const span = hi - lo || 1;
+        const n = this.labels.length;
+        const xFor = (i) => plotX + (n > 1 ? (i / (n - 1)) * plotW : plotW / 2);
+        const yFor = (v) => plotY + plotH - ((v - lo) / span) * plotH;
+        const markIndexes = this.markIndexMap();
+        const activeMarkIndex = this.normalizedMarkIndex();
+        return this.datasets.map((s, di) => {
+            const color = this.colorFor(di, s);
+            let d = '';
+            let penDown = false;
+            s.data.forEach((v, i) => {
+                if (v == null || !Number.isFinite(v)) {
+                    penDown = false;
+                    return;
+                }
+                const cmd = penDown ? 'L' : 'M';
+                d += `${cmd}${xFor(i)},${yFor(v)} `;
+                penDown = true;
+            });
+            const dots = s.data.map((v, i) => {
+                if (v == null || !Number.isFinite(v))
+                    return nothing;
+                const label = this.labels[i];
+                const custom = this.resolvePointText(label, v, di);
+                const ariaLabel = custom ?? `${s.label}, ${label}: ${v}`;
+                const titleText = custom ?? `${s.label} — ${label}: ${v}`;
+                const markIndex = markIndexes.get(`${di}:${i}`);
+                return svg `
+          <circle
+            part="point"
+            cx=${xFor(i)}
+            cy=${yFor(v)}
+            r="4"
+            fill=${color}
+            tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
+            role="button"
+            aria-label=${ariaLabel}
+            @click=${() => this.emitPoint(di, i)}
+            @focus=${() => this.onMarkFocus(markIndex)}
+            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+          ><title>${titleText}</title></circle>
+        `;
+            });
+            return svg `<path part="line" d=${d.trim()} stroke=${color}></path>${dots}`;
+        });
+    }
+    render() {
+        // Lit already tracks every reactive input, including function-valued
+        // properties such as `tickFormat` and `barX`. Returning a cached
+        // TemplateResult here would make callback replacement invisible and
+        // serializing arbitrary data would throw for circular objects/BigInt.
+        // Rendering this small SVG template is cheaper and more correct than a
+        // lossy content fingerprint.
+        return this.renderChart();
+    }
+    /**
+     * Step size for `maxLabels` decimation: 1 (show every label, today's
+     * unchanged default) when `maxLabels` is unset or already >= the label
+     * count, otherwise the ceil-divide spacing that lands close to
+     * `maxLabels` shown labels while always keeping index 0 and the last
+     * index (enforced by the caller, not here).
+     */
+    labelStep(n) {
+        const max = this.maxLabels;
+        if (max == null || n <= max)
+            return 1;
+        return Math.max(1, Math.ceil((n - 1) / Math.max(1, max - 1)));
+    }
+    renderChart() {
+        const n = this.labels.length;
+        const h = this.plotHeight || 200;
+        const padLeft = (this.padLeft ?? PAD_LEFT) + (this.yLabel ? AXIS_TITLE_SPACE : 0);
+        const padBottom = PAD_BOTTOM + (this.xLabel ? AXIS_TITLE_SPACE : 0);
+        const plotX = padLeft;
+        const plotY = PAD_TOP;
+        const plotH = Math.max(0, h - plotY - padBottom);
+        let w;
+        let plotW;
+        let slot;
+        if (this.layout === 'scroll') {
+            // Fixed-width bars: content width is driven by category count ×
+            // barWidth instead of the measured host width, and CAN exceed it --
+            // the svg gets an explicit inline-size below (not 100%) and
+            // `:host([layout='scroll']) [part='base']` (lite-chart.styles.ts)
+            // turns on `overflow-x: auto` so the host scrolls to reveal the rest.
+            slot = this.barWidth;
+            plotW = Math.max(0, n * slot);
+            w = plotX + plotW + PAD_RIGHT;
+        }
+        else {
+            // 'fit' (default): squeeze to the measured host width, byte-for-byte
+            // the same computation as before `layout` existed.
+            w = this.plotWidth || 400;
+            plotW = Math.max(0, w - plotX - PAD_RIGHT);
+            slot = n > 0 ? plotW / n : 0;
+        }
+        const { lo, hi, ticks } = this.domain();
+        const grid = this.hideAxis ? [] : this.renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi);
+        const marks = this.type === 'bar'
+            ? this.renderBars(plotX, plotY, plotH, slot, lo, hi)
+            : this.renderLines(plotX, plotY, plotW, plotH, lo, hi);
+        const step = this.labelStep(n);
+        const categoryLabels = this.labels.map((label, i) => {
+            if (i !== 0 && i !== n - 1 && i % step !== 0)
+                return nothing; // maxLabels decimation
+            const x = this.type === 'bar' && n > 0
+                ? (this.barX ? this.barX(i) : plotX + i * slot) + slot / 2 // matches renderBars()'s own per-category slot center (or the barX override, when set)
+                : plotX + (n > 1 ? (i / (n - 1)) * plotW : plotW / 2);
+            return svg `<text part="axis-label" x=${x} y=${plotY + plotH + 14} text-anchor="middle">${label}</text>`;
+        });
+        const chartLabel = this.chartLabel ?? (this.datasets.map((d) => d.label).join(', ') || 'Chart');
+        const marksForA11y = this.interactiveMarks();
+        const activeMark = this.normalizedMarkIndex(marksForA11y);
+        return html `
+      <div part="base">
+        <svg
+          viewBox="0 0 ${w} ${h}"
+          style=${this.layout === 'scroll' ? `inline-size: ${w}px` : nothing}
+          role="group"
+          aria-label=${chartLabel}
+          tabindex=${marksForA11y.length ? '-1' : '0'}
+        >
+          ${grid}
+          ${categoryLabels}
+          ${marks}
+          ${this.yLabel
+            ? svg `<text part="axis-title" x=${12} y=${plotY + plotH / 2} text-anchor="middle" transform="rotate(-90, 12, ${plotY + plotH / 2})">${this.yLabel}</text>`
+            : nothing}
+          ${this.xLabel
+            ? svg `<text part="axis-title" x=${plotX + plotW / 2} y=${plotY + plotH + padBottom - 2} text-anchor="middle">${this.xLabel}</text>`
+            : nothing}
+        </svg>
+        <div part="live-region" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+          ${activeMark >= 0 ? this.liveText || this.markAnnouncement(activeMark, marksForA11y) : ''}
+        </div>
+        <ul part="data-list" class="sr-only" aria-label="Chart data">
+          ${marksForA11y.map((mark, index) => html `<li>${this.markAnnouncement(index, marksForA11y)}</li>`)}
+        </ul>
+        ${this.legend
+            ? html `<div part="legend">
+              ${this.datasets.map((s, i) => html `
+                  <span part="legend-item">
+                    <span part="legend-swatch" style="background:${this.colorFor(i, s)}"></span>
+                    ${s.label}
+                  </span>
+                `)}
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraLiteChart.prototype, "type", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "labels", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "datasets", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraLiteChart.prototype, "legend", void 0);
+__decorate([
+    property()
+], LyraLiteChart.prototype, "height", void 0);
+__decorate([
+    property({ attribute: 'x-label' })
+], LyraLiteChart.prototype, "xLabel", void 0);
+__decorate([
+    property({ attribute: 'y-label' })
+], LyraLiteChart.prototype, "yLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'begin-at-zero' })
+], LyraLiteChart.prototype, "beginAtZero", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraLiteChart.prototype, "stacked", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "tickFormat", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraLiteChart.prototype, "layout", void 0);
+__decorate([
+    property({ type: Number, attribute: 'bar-width' })
+], LyraLiteChart.prototype, "barWidth", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-labels' })
+], LyraLiteChart.prototype, "maxLabels", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "barX", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "pointText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'rounded-bars' })
+], LyraLiteChart.prototype, "roundedBars", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'skip-zero' })
+], LyraLiteChart.prototype, "skipZero", void 0);
+__decorate([
+    property({ type: Number, attribute: 'pad-left' })
+], LyraLiteChart.prototype, "padLeft", void 0);
+__decorate([
+    property({ type: Number, attribute: 'bar-gap-ratio' })
+], LyraLiteChart.prototype, "barGapRatio", void 0);
+__decorate([
+    property()
+], LyraLiteChart.prototype, "scale", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-axis' })
+], LyraLiteChart.prototype, "hideAxis", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-bar-height' })
+], LyraLiteChart.prototype, "minBarHeight", void 0);
+__decorate([
+    property({ attribute: 'chart-label' })
+], LyraLiteChart.prototype, "chartLabel", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "plotWidth", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "plotHeight", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "visible", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "activeMarkIndex", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "liveText", void 0);
+__decorate([
+    query('svg')
+], LyraLiteChart.prototype, "svgEl", void 0);
+function formatTick(v) {
+    // Avoid float noise (e.g. 0.30000000000000004) from the niceStep() math
+    // above without hardcoding a fixed decimal count that'd butcher large ints.
+    return Number(v.toFixed(6)).toString();
+}
+//# sourceMappingURL=lite-chart.class.js.map