@aceshooting/lyra-ui 0.1.1 → 0.1.3

package/dist/components/chart/chart.js

@@ -0,0 +1,275 @@
+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 { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { loadChartJs } from './chart-loader.js';
+import { styles } from './chart.styles.js';
+import '../skeleton/skeleton.js';
+/**
+ * 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).
+ */
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function deepMerge(base, override) {
+    if (!isPlainObject(base) || !isPlainObject(override)) {
+        return (override === undefined ? base : override);
+    }
+    const result = { ...base };
+    for (const key of Object.keys(override)) {
+        result[key] = deepMerge(base[key], override[key]);
+    }
+    return result;
+}
+/**
+ * `<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 (Task 0):** 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 }`.
+ * @csspart base, canvas, reset-zoom-button
+ */
+export class LyraChart extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'line';
+        this.labels = [];
+        this.datasets = [];
+        this.legend = false;
+        this.area = false;
+        this.zoom = false;
+        this.height = '280px';
+        this.xLabel = '';
+        this.yLabel = '';
+        this.y2Label = '';
+        this.beginAtZero = true;
+        /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
+        this.loading = true;
+        this.zoomed = false;
+        this.onThemeChange = () => this.draw();
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('lyra-theme', this.onThemeChange);
+        void loadChartJs().then((mod) => {
+            this.loading = false;
+            if (!mod)
+                return;
+            this.chartJsModule = mod;
+            this.draw();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('lyra-theme', this.onThemeChange);
+        this.chart?.destroy();
+        this.chart = undefined;
+    }
+    updated(changed) {
+        if (this.loading)
+            this.setAttribute('aria-busy', 'true');
+        else
+            this.removeAttribute('aria-busy');
+        // `--lyra-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('--lyra-chart-height', this.height);
+        }
+        const onlyZoomChanged = changed.size === 1 && changed.has('zoomed');
+        if (!onlyZoomChanged)
+            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 ?? [],
+            type: s.type ?? this.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',
+            tooltip: s.noTooltip ? { enabled: false } : undefined,
+        };
+    }
+    buildConfig() {
+        const hasY2 = this.datasets.some((s) => s.axis === 'y2');
+        const generated = {
+            type: this.type,
+            data: {
+                labels: this.labels,
+                datasets: this.datasets.map((s) => this.seriesToDataset(s)),
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                interaction: { intersect: false, mode: this.type === 'scatter' ? 'nearest' : 'index' },
+                plugins: {
+                    legend: { display: this.legend },
+                    zoom: this.zoom
+                        ? {
+                            pan: { enabled: false },
+                            zoom: {
+                                wheel: { enabled: true },
+                                drag: { enabled: true },
+                                pinch: { enabled: true },
+                                mode: 'x',
+                                onZoomComplete: () => {
+                                    this.zoomed = true;
+                                    this.emit('lyra-zoom', { zoomed: true });
+                                },
+                            },
+                            limits: { x: { min: 'original', max: 'original' } },
+                        }
+                        : undefined,
+                },
+                scales: {
+                    x: {
+                        type: this.type === 'scatter' ? 'linear' : 'category',
+                        title: { display: !!this.xLabel, text: this.xLabel },
+                    },
+                    y: { beginAtZero: this.beginAtZero, title: { display: !!this.yLabel, text: this.yLabel } },
+                    ...(hasY2
+                        ? {
+                            y2: {
+                                position: 'right',
+                                grid: { drawOnChartArea: false },
+                                title: { display: !!this.y2Label, text: this.y2Label },
+                            },
+                        }
+                        : {}),
+                },
+            },
+        };
+        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) {
+            this.chart.data = config.data;
+            this.chart.options = config.options ?? {};
+            this.chart.update('none');
+            return;
+        }
+        this.chart?.destroy();
+        this.chart = new this.chartJsModule.Chart(this.canvasEl, config);
+        this.builtType = effectiveType;
+    }
+    /** Reset any active zoom/pan back to the original view. */
+    resetZoom() {
+        this.chart?.resetZoom?.();
+        this.zoomed = false;
+        this.emit('lyra-zoom', { zoomed: false });
+    }
+    render() {
+        if (this.loading) {
+            return html `
+        <div part="base">
+          <lyra-skeleton variant="rect"></lyra-skeleton>
+        </div>
+      `;
+        }
+        const label = this.datasets.map((d) => d.label).join(', ') || 'Chart';
+        return html `
+      <div part="base">
+        <canvas part="canvas" role="img" aria-label=${label}></canvas>
+        ${this.zoom && this.zoomed
+            ? html `<button part="reset-zoom-button" type="button" @click=${() => this.resetZoom()}>
+              Reset zoom
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], 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({ 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: false })
+], LyraChart.prototype, "config", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "loading", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "zoomed", void 0);
+__decorate([
+    query('canvas')
+], LyraChart.prototype, "canvasEl", void 0);
+defineElement('chart', LyraChart);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/chart/chart.styles.js

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    block-size: var(--lyra-chart-height, 280px);
+  }
+  [part='base'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  lyra-skeleton {
+    --lyra-skeleton-w: 100%;
+    --lyra-skeleton-h: 100%;
+  }
+  canvas {
+    inline-size: 100% !important;
+    block-size: 100% !important;
+  }
+  [part='reset-zoom-button'] {
+    position: absolute;
+    inset-block-start: var(--lyra-space-xs);
+    inset-inline-end: var(--lyra-space-xs);
+    font-size: 0.75rem;
+    padding: 0.15rem 0.5rem;
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    cursor: pointer;
+  }
+`;

package/dist/components/chart/doughnut-chart.d.ts

@@ -0,0 +1,15 @@
+import { LyraChart } from './chart.js';
+import type { LyraChartType } from './chart.js';
+/**
+ * `<lyra-doughnut-chart>` — `<lyra-chart>` with `type` locked to `"doughnut"`.
+ *
+ * @customElement lyra-doughnut-chart
+ */
+export declare class LyraDoughnutChart extends LyraChart {
+    type: LyraChartType;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-doughnut-chart': LyraDoughnutChart;
+    }
+}

package/dist/components/chart/doughnut-chart.js

@@ -0,0 +1,14 @@
+import { LyraChart } from './chart.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-doughnut-chart>` — `<lyra-chart>` with `type` locked to `"doughnut"`.
+ *
+ * @customElement lyra-doughnut-chart
+ */
+export class LyraDoughnutChart extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'doughnut';
+    }
+}
+defineElement('doughnut-chart', LyraDoughnutChart);

package/dist/components/chart/histogram-bin.d.ts

@@ -0,0 +1,6 @@
+export interface HistogramBucket {
+    label: string;
+    count: number;
+}
+/** Splits `values` into `binCount` equal-width buckets and counts membership. */
+export declare function binValues(values: number[], binCount: number): HistogramBucket[];

package/dist/components/chart/histogram-bin.js

@@ -0,0 +1,19 @@
+/** Splits `values` into `binCount` equal-width buckets and counts membership. */
+export function binValues(values, binCount) {
+    if (values.length === 0 || binCount <= 0)
+        return [];
+    const lo = Math.min(...values);
+    const hi = Math.max(...values);
+    const span = hi - lo || 1;
+    const width = span / binCount;
+    const buckets = Array.from({ length: binCount }, (_, i) => {
+        const bLo = lo + i * width;
+        const bHi = lo + (i + 1) * width;
+        return { label: `${bLo.toFixed(1)}–${bHi.toFixed(1)}`, count: 0 };
+    });
+    for (const v of values) {
+        const index = v === hi ? binCount - 1 : Math.floor((v - lo) / width);
+        buckets[Math.min(binCount - 1, Math.max(0, index))].count++;
+    }
+    return buckets;
+}

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

@@ -0,0 +1,20 @@
+import { LyraChart } from './chart.js';
+/**
+ * `<lyra-histogram>` — bins `values` into `bins` equal-width buckets and
+ * renders them as a bar chart. No Chart.js histogram controller exists in
+ * any surveyed seed; this composes `binValues()` with the plain `bar` type.
+ *
+ * @customElement lyra-histogram
+ */
+export declare class LyraHistogram extends LyraChart {
+    static styles: import("lit").CSSResultGroup[];
+    type: 'bar';
+    bins: number;
+    values: number[];
+    label: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-histogram': LyraHistogram;
+    }
+}

package/dist/components/chart/histogram.js

@@ -0,0 +1,70 @@
+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 { property } from 'lit/decorators.js';
+import { LyraChart } from './chart.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { binValues } from './histogram-bin.js';
+import { styles } from './histogram.styles.js';
+/**
+ * `<lyra-histogram>` — bins `values` into `bins` equal-width buckets and
+ * renders them as a bar chart. No Chart.js histogram controller exists in
+ * any surveyed seed; this composes `binValues()` with the plain `bar` type.
+ *
+ * @customElement lyra-histogram
+ */
+export class LyraHistogram extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'bar';
+        this.bins = 10;
+        this.values = [];
+        this.label = 'Frequency';
+    }
+    // Explicit rather than relying on `LyraChart`'s inherited `static styles` —
+    // `histogram.styles.ts` re-exports the same `chart.styles.ts` sheet, so
+    // this is behaviorally identical, but it keeps the per-component styles
+    // file meaningful instead of dead weight.
+    static { this.styles = [LyraElement.styles, styles]; }
+}
+__decorate([
+    property({ type: Number })
+], LyraHistogram.prototype, "bins", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraHistogram.prototype, "values", void 0);
+__decorate([
+    property()
+], LyraHistogram.prototype, "label", void 0);
+// `labels`/`datasets` are computed from `values`/`bins` rather than settable
+// props. `LyraChart` declares both as plain (decorator-managed) class
+// fields, 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.
+Object.defineProperty(LyraHistogram.prototype, 'labels', {
+    configurable: true,
+    enumerable: true,
+    get() {
+        return binValues(this.values, this.bins).map((b) => b.label);
+    },
+    set(_v) {
+        /* derived from `values`/`bins`; direct writes are ignored */
+    },
+});
+Object.defineProperty(LyraHistogram.prototype, 'datasets', {
+    configurable: true,
+    enumerable: true,
+    get() {
+        return [{ label: this.label, data: binValues(this.values, this.bins).map((b) => b.count) }];
+    },
+    set(_v) {
+        /* derived from `values`/`bins`; direct writes are ignored */
+    },
+});
+defineElement('histogram', LyraHistogram);

package/dist/components/chart/histogram.styles.d.ts

@@ -0,0 +1 @@
+export { styles } from './chart.styles.js';

package/dist/components/chart/histogram.styles.js

@@ -0,0 +1 @@
+export { styles } from './chart.styles.js';

package/dist/components/chart/line-chart.d.ts

@@ -0,0 +1,14 @@
+import { LyraChart } from './chart.js';
+/**
+ * `<lyra-line-chart>` — `<lyra-chart>` with `type` locked to `"line"`.
+ *
+ * @customElement lyra-line-chart
+ */
+export declare class LyraLineChart extends LyraChart {
+    type: 'line';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-line-chart': LyraLineChart;
+    }
+}

package/dist/components/chart/line-chart.js

@@ -0,0 +1,14 @@
+import { LyraChart } from './chart.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-line-chart>` — `<lyra-chart>` with `type` locked to `"line"`.
+ *
+ * @customElement lyra-line-chart
+ */
+export class LyraLineChart extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'line';
+    }
+}
+defineElement('line-chart', LyraLineChart);

package/dist/components/chart/pie-chart.d.ts

@@ -0,0 +1,16 @@
+import { LyraChart } from './chart.js';
+import type { LyraChartType } from './chart.js';
+/**
+ * `<lyra-pie-chart>` — `<lyra-chart>` with `type` locked to `"pie"`. Single-series:
+ * one `Series` with `data: number[]` and `color: string[]` as the slice palette.
+ *
+ * @customElement lyra-pie-chart
+ */
+export declare class LyraPieChart extends LyraChart {
+    type: LyraChartType;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-pie-chart': LyraPieChart;
+    }
+}

package/dist/components/chart/pie-chart.js

@@ -0,0 +1,15 @@
+import { LyraChart } from './chart.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-pie-chart>` — `<lyra-chart>` with `type` locked to `"pie"`. Single-series:
+ * one `Series` with `data: number[]` and `color: string[]` as the slice palette.
+ *
+ * @customElement lyra-pie-chart
+ */
+export class LyraPieChart extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'pie';
+    }
+}
+defineElement('pie-chart', LyraPieChart);

package/dist/components/chart/polar-area-chart.d.ts

@@ -0,0 +1,15 @@
+import { LyraChart } from './chart.js';
+import type { LyraChartType } from './chart.js';
+/**
+ * `<lyra-polar-area-chart>` — `<lyra-chart>` with `type` locked to `"polarArea"`.
+ *
+ * @customElement lyra-polar-area-chart
+ */
+export declare class LyraPolarAreaChart extends LyraChart {
+    type: LyraChartType;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-polar-area-chart': LyraPolarAreaChart;
+    }
+}

package/dist/components/chart/polar-area-chart.js

@@ -0,0 +1,14 @@
+import { LyraChart } from './chart.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-polar-area-chart>` — `<lyra-chart>` with `type` locked to `"polarArea"`.
+ *
+ * @customElement lyra-polar-area-chart
+ */
+export class LyraPolarAreaChart extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'polarArea';
+    }
+}
+defineElement('polar-area-chart', LyraPolarAreaChart);

package/dist/components/chart/radar-chart.d.ts

@@ -0,0 +1,15 @@
+import { LyraChart } from './chart.js';
+import type { LyraChartType } from './chart.js';
+/**
+ * `<lyra-radar-chart>` — `<lyra-chart>` with `type` locked to `"radar"`.
+ *
+ * @customElement lyra-radar-chart
+ */
+export declare class LyraRadarChart extends LyraChart {
+    type: LyraChartType;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-radar-chart': LyraRadarChart;
+    }
+}

package/dist/components/chart/radar-chart.js

@@ -0,0 +1,14 @@
+import { LyraChart } from './chart.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-radar-chart>` — `<lyra-chart>` with `type` locked to `"radar"`.
+ *
+ * @customElement lyra-radar-chart
+ */
+export class LyraRadarChart extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'radar';
+    }
+}
+defineElement('radar-chart', LyraRadarChart);

package/dist/components/chart/scatter-chart.d.ts

@@ -0,0 +1,15 @@
+import { LyraChart } from './chart.js';
+/**
+ * `<lyra-scatter-chart>` — `<lyra-chart>` with `type` locked to `"scatter"`. Feed
+ * points via `Series.points`.
+ *
+ * @customElement lyra-scatter-chart
+ */
+export declare class LyraScatterChart extends LyraChart {
+    type: 'scatter';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-scatter-chart': LyraScatterChart;
+    }
+}

package/dist/components/chart/scatter-chart.js

@@ -0,0 +1,15 @@
+import { LyraChart } from './chart.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-scatter-chart>` — `<lyra-chart>` with `type` locked to `"scatter"`. Feed
+ * points via `Series.points`.
+ *
+ * @customElement lyra-scatter-chart
+ */
+export class LyraScatterChart extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'scatter';
+    }
+}
+defineElement('scatter-chart', LyraScatterChart);