@aceshooting/lyra-ui 0.1.0 → 0.1.2

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

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

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

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

package/dist/components/chart/box-plot.d.ts

@@ -0,0 +1,46 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface BoxPlotPoint {
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+}
+export interface BoxPlotSeries {
+    label: string;
+    data: BoxPlotPoint[];
+    color?: string;
+}
+/**
+ * `<lyra-box-plot>` — a box-and-whisker chart from precomputed five-number
+ * summaries (no raw sample data is shipped to the browser). Beyond Web
+ * Awesome's chart set — heavily used across ML/clustering dashboards.
+ *
+ * @customElement lyra-box-plot
+ * @csspart base, canvas
+ */
+export declare class LyraBoxPlot extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    labels: string[];
+    boxes: BoxPlotSeries[];
+    legend: boolean;
+    height: string;
+    yLabel: string;
+    beginAtZero: boolean;
+    private canvasEl?;
+    private chart?;
+    private chartJsModule?;
+    connectedCallback(): void;
+    private onBoxPlotPluginLoaded;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private buildConfig;
+    private draw;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-box-plot': LyraBoxPlot;
+    }
+}

package/dist/components/chart/box-plot.js

@@ -0,0 +1,145 @@
+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 } from 'lit';
+import { property, query } 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 './box-plot.styles.js';
+let boxPlotPlugin;
+/**
+ * Lazily loads `@sgratzl/chartjs-chart-boxplot` and registers its controller
+ * only when a `<lyra-box-plot>` connects — kept separate from the base
+ * `chart-loader.ts` so importing `lyra-chart.js` alone never pulls this in.
+ */
+function loadBoxPlotPlugin() {
+    if (!boxPlotPlugin) {
+        boxPlotPlugin = Promise.all([loadChartJs(), import('@sgratzl/chartjs-chart-boxplot')])
+            .then(([chartMod, boxMod]) => {
+            if (!chartMod)
+                return null;
+            chartMod.Chart.register(boxMod.BoxPlotController, boxMod.BoxAndWiskers);
+            return boxMod;
+        })
+            .catch(() => {
+            console.warn('<lyra-box-plot> needs the optional peer dependency `@sgratzl/chartjs-chart-boxplot` ' +
+                '— install it with `pnpm add @sgratzl/chartjs-chart-boxplot`.');
+            return null;
+        });
+    }
+    return boxPlotPlugin;
+}
+/**
+ * `<lyra-box-plot>` — a box-and-whisker chart from precomputed five-number
+ * summaries (no raw sample data is shipped to the browser). Beyond Web
+ * Awesome's chart set — heavily used across ML/clustering dashboards.
+ *
+ * @customElement lyra-box-plot
+ * @csspart base, canvas
+ */
+export class LyraBoxPlot extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.labels = [];
+        this.boxes = [];
+        this.legend = false;
+        this.height = '280px';
+        this.yLabel = '';
+        this.beginAtZero = true;
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        void loadBoxPlotPlugin().then((boxMod) => this.onBoxPlotPluginLoaded(boxMod));
+    }
+    // Split out from `connectedCallback()` so the partial-peer-dependency-
+    // failure path (chart.js loads fine, `@sgratzl/chartjs-chart-boxplot`
+    // doesn't) is directly testable: `loadBoxPlotPlugin()` resolves to `null`
+    // without ever registering `BoxPlotController`/`BoxAndWiskers` in that
+    // case, so this must gate on its resolved value — mirroring the correct,
+    // established pattern in `LyraChart.connectedCallback()` — instead of
+    // unconditionally re-awaiting the already-cached `loadChartJs()` promise.
+    async onBoxPlotPluginLoaded(boxMod) {
+        if (!boxMod)
+            return;
+        this.chartJsModule = (await loadChartJs()) ?? undefined;
+        this.draw();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.chart?.destroy();
+        this.chart = undefined;
+    }
+    updated(changed) {
+        // `--lyra-chart-height` is read by `:host`'s `block-size` in
+        // `chart.styles.ts` (shared with `lyra-chart`). Custom properties only
+        // cascade downward (host -> shadow tree), 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);
+        }
+        this.draw();
+    }
+    buildConfig() {
+        return {
+            // boxplot isn't in chart.js's static ChartType union — same cast the seed uses.
+            type: 'boxplot',
+            data: {
+                labels: this.labels,
+                datasets: this.boxes.map((s) => ({
+                    label: s.label,
+                    data: s.data,
+                    backgroundColor: s.color,
+                    borderColor: s.color,
+                })),
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: this.legend } },
+                scales: { y: { beginAtZero: this.beginAtZero, title: { display: !!this.yLabel, text: this.yLabel } } },
+            },
+        };
+    }
+    draw() {
+        if (!this.chartJsModule || !this.canvasEl)
+            return;
+        this.chart?.destroy();
+        this.chart = new this.chartJsModule.Chart(this.canvasEl, this.buildConfig());
+    }
+    render() {
+        const label = this.boxes.map((b) => b.label).join(', ') || 'Box plot';
+        return html `
+      <div part="base">
+        <canvas part="canvas" role="img" aria-label=${label}></canvas>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraBoxPlot.prototype, "labels", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraBoxPlot.prototype, "boxes", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraBoxPlot.prototype, "legend", void 0);
+__decorate([
+    property()
+], LyraBoxPlot.prototype, "height", void 0);
+__decorate([
+    property({ attribute: 'y-label' })
+], LyraBoxPlot.prototype, "yLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'begin-at-zero' })
+], LyraBoxPlot.prototype, "beginAtZero", void 0);
+__decorate([
+    query('canvas')
+], LyraBoxPlot.prototype, "canvasEl", void 0);
+defineElement('box-plot', LyraBoxPlot);

package/dist/components/chart/box-plot.styles.d.ts

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

package/dist/components/chart/box-plot.styles.js

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+// Deliberately its own sheet rather than a wholesale re-export of
+// `chart.styles.ts`: unlike `lyra-histogram`, `LyraBoxPlot` doesn't extend
+// `LyraChart`, has no `zoom` property, and its `render()` never emits a
+// `part="reset-zoom-button"` element — so that rule (and any other
+// `lyra-chart`-only chrome) has no home here.
+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%;
+  }
+  canvas {
+    inline-size: 100% !important;
+    block-size: 100% !important;
+  }
+`;

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

@@ -0,0 +1,19 @@
+import { LyraChart } from './chart.js';
+import type { LyraChartType } from './chart.js';
+/**
+ * `<lyra-bubble-chart>` — `<lyra-chart>` with `type` locked to `"bubble"`. Feed
+ * points via `Series.points`, each needing an `x`/`y`/`r` (radius) triple —
+ * cast the array through `as unknown as Series['points']` (or a local
+ * `BubblePoint` type) when constructing it, since `Series.points` itself is
+ * typed as `{ x; y; label? }[]` with no `r` field.
+ *
+ * @customElement lyra-bubble-chart
+ */
+export declare class LyraBubbleChart extends LyraChart {
+    type: LyraChartType;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-bubble-chart': LyraBubbleChart;
+    }
+}

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

@@ -0,0 +1,18 @@
+import { LyraChart } from './chart.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-bubble-chart>` — `<lyra-chart>` with `type` locked to `"bubble"`. Feed
+ * points via `Series.points`, each needing an `x`/`y`/`r` (radius) triple —
+ * cast the array through `as unknown as Series['points']` (or a local
+ * `BubblePoint` type) when constructing it, since `Series.points` itself is
+ * typed as `{ x; y; label? }[]` with no `r` field.
+ *
+ * @customElement lyra-bubble-chart
+ */
+export class LyraBubbleChart extends LyraChart {
+    constructor() {
+        super(...arguments);
+        this.type = 'bubble';
+    }
+}
+defineElement('bubble-chart', LyraBubbleChart);

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

@@ -0,0 +1,8 @@
+import type * as ChartJsModule from 'chart.js';
+/**
+ * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`)
+ * once per page, registering only the tree-shaken subset this library uses.
+ * Resolves to `null` (with a one-time warning) if chart.js isn't installed —
+ * mirrors `<lyra-flag>`'s peer-dependency pattern.
+ */
+export declare function loadChartJs(): Promise<typeof ChartJsModule | null>;

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

@@ -0,0 +1,26 @@
+let chartJs;
+let registered = false;
+/**
+ * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`)
+ * once per page, registering only the tree-shaken subset this library uses.
+ * Resolves to `null` (with a one-time warning) if chart.js isn't installed —
+ * mirrors `<lyra-flag>`'s peer-dependency pattern.
+ */
+export function loadChartJs() {
+    if (!chartJs) {
+        chartJs = Promise.all([import('chart.js'), import('chartjs-plugin-zoom')])
+            .then(([mod, zoomMod]) => {
+            if (!registered) {
+                mod.Chart.register(mod.LineController, mod.BarController, mod.ScatterController, mod.DoughnutController, mod.PieController, mod.RadarController, mod.PolarAreaController, mod.BubbleController, mod.LineElement, mod.PointElement, mod.BarElement, mod.ArcElement, mod.LinearScale, mod.CategoryScale, mod.RadialLinearScale, mod.Filler, mod.Tooltip, mod.Legend, zoomMod.default);
+                registered = true;
+            }
+            return mod;
+        })
+            .catch(() => {
+            console.warn('<lyra-chart> needs the optional peer dependencies `chart.js` and ' +
+                '`chartjs-plugin-zoom` — install them with `pnpm add chart.js chartjs-plugin-zoom`.');
+            return null;
+        });
+    }
+    return chartJs;
+}

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

@@ -0,0 +1,91 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import type { ChartConfiguration } from 'chart.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../skeleton/skeleton.js';
+export interface Series {
+    label: string;
+    data?: (number | null)[];
+    points?: {
+        x: number;
+        y: number;
+        label?: string;
+    }[];
+    color?: string | string[];
+    fill?: boolean;
+    width?: number;
+    dash?: boolean;
+    noTooltip?: boolean;
+    axis?: 'y' | 'y2';
+    pointColors?: string[];
+    pointRadius?: number;
+    type?: 'line' | 'bar';
+}
+export type LyraChartType = 'line' | 'bar' | 'scatter';
+/**
+ * `<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 declare class LyraChart extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    type: LyraChartType;
+    labels: string[];
+    datasets: Series[];
+    legend: boolean;
+    area: boolean;
+    zoom: boolean;
+    height: string;
+    xLabel: string;
+    yLabel: string;
+    y2Label: string;
+    beginAtZero: boolean;
+    /**
+     * Raw Chart.js configuration passthrough — mirrors `wa-chart`'s `config`
+     * property. Recursively deep-merged over the `Series`-derived config in
+     * `buildConfig()` (any key at any nesting depth — e.g.
+     * `config.options.scales.y.min` — wins over the generated equivalent
+     * without discarding sibling keys the generated config set), for consumers
+     * who need full Chart.js control beyond the simplified `Series` shape.
+     */
+    config?: Partial<ChartConfiguration>;
+    /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
+    private loading;
+    private zoomed;
+    private canvasEl?;
+    private chart?;
+    private chartJsModule?;
+    private builtType?;
+    private onThemeChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private seriesToDataset;
+    private buildConfig;
+    private draw;
+    /** Reset any active zoom/pan back to the original view. */
+    resetZoom(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chart': LyraChart;
+    }
+}