@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -0,0 +1,237 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface LiteSeries {
+    label: string;
+    data: (number | null)[];
+    /** Defaults to a semantic categorical color, keyed by dataset index. */
+    color?: string;
+}
+export type LyraLiteChartType = 'bar' | 'line';
+/**
+ * `'fit'` (default) squeezes the whole plot into the measured host width,
+ * exactly as this component always behaved. `'scroll'` gives every bar a
+ * fixed `barWidth` instead and lets the plot's content width exceed the
+ * host's, making the host horizontally scrollable.
+ */
+export type LyraLiteChartLayout = 'fit' | 'scroll';
+/**
+ * `<lyra-lite-chart>` — a dependency-free bar/line chart, plain SVG/DOM
+ * rendering with zero peer dependencies (unlike `lyra-chart`, which wraps
+ * `chart.js`). For a project whose architecture forbids a charting
+ * dependency outright, this covers the common bar/line case: grouped or
+ * stacked bars, multi-series lines, per-point click, and hover tooltips
+ * (native SVG `<title>`, no positioning JS needed) — not a full `lyra-chart`
+ * replacement (no zoom/pan, no pie/doughnut/radar/scatter/bubble types, no
+ * horizontal/dual-y-axis, no raw-config passthrough).
+ *
+ * Because this renders real DOM (not canvas), it reuses `lyra-chart`'s
+ * `--lyra-chart-*` theme tokens directly via CSS `var()` — no
+ * `getComputedStyle()`-based re-theming step is needed the way `chart.ts`
+ * needs one for its canvas.
+ *
+ * By default (`layout="fit"`) the plot always squeezes to the measured host
+ * width. Three independent, opt-in escape hatches for dense/aligned data:
+ * `layout="scroll"` (+ `barWidth`) gives every bar a fixed pixel width and
+ * lets the plot overflow the host horizontally (scrollable) instead of
+ * squeezing; `maxLabels` decimates which x-axis text labels render (bars
+ * always still render) once there are more categories than that; and
+ * `barX` lets a consumer hand in its own per-category x-coordinate function
+ * — e.g. to pixel-align this chart's bars with a sibling `lyra-heatmap`'s
+ * calendar columns — overriding the internal slot math for both bars and
+ * their labels. All three are additive and no-ops when left unset.
+ *
+ * Seven further additive, opt-in properties: `pointText` overrides the
+ * per-bar/per-point `<title>`/`aria-label` tooltip text (mirrors
+ * `lyra-heatmap`'s `cellText` hook), falling back to the built-in raw-value
+ * template when unset; `roundedBars` draws bars as a rounded-top path
+ * instead of a square-cornered rect; `skipZero` omits a bar entirely (not
+ * just zero-height) for an exactly-`0` value; `padLeft`/`barGapRatio`
+ * override the internal `PAD_LEFT`/`BAR_GROUP_GAP` layout constants; `scale`
+ * (`type="bar"` only) switches the bar-height mapping from the default
+ * linear `niceDomain` fraction to a `Math.sqrt(value / domainMax)`
+ * compression (mirroring `lyra-heatmap`'s matrix-mode `sqrt` scale) so a
+ * skewed dataset's smaller bars don't get washed out by one dominant value
+ * — gridlines/tick labels stay on the linear domain regardless, only the bar
+ * marks' own height changes, and `type="line"` ignores `scale` entirely; and
+ * `hideAxis` suppresses `renderGrid()`'s gridlines/tick labels altogether
+ * (x-axis category labels, rendered separately, are unaffected).
+ *
+ * @customElement lyra-lite-chart
+ * @event lyra-point-click - Fired when a bar/point is activated (click, or
+ *   Enter/Space while focused). `detail: { datasetIndex: number, index:
+ *   number, label: string | undefined, value: number | null }` — same shape
+ *   as `lyra-chart`'s `lyra-point-click`.
+ * @csspart base - The host's flex layout wrapper.
+ * @csspart grid-line - Each horizontal gridline.
+ * @csspart axis-label - Each axis tick label.
+ * @csspart axis-title - The x/y axis title text, when set.
+ * @csspart bar - Each bar rect (type="bar").
+ * @csspart line - Each series' stroked line path (type="line").
+ * @csspart point - Each series' per-point hit target (type="line").
+ * @csspart legend - The legend row, when `legend` is set.
+ * @csspart legend-item - Each legend entry.
+ * @csspart legend-swatch - Each legend entry's color swatch.
+ * @csspart live-region - The current mark announcement for keyboard users.
+ * @csspart data-list - A visually hidden list of all plotted data points.
+ */
+export interface LyraLiteChartEventMap {
+    'lyra-point-click': CustomEvent<{
+        datasetIndex: number;
+        index: number;
+        label: string | undefined;
+        value: number | null;
+    }>;
+}
+export declare class LyraLiteChart extends LyraElement<LyraLiteChartEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    type: LyraLiteChartType;
+    labels: string[];
+    datasets: LiteSeries[];
+    legend: boolean;
+    height: string;
+    xLabel: string;
+    yLabel: string;
+    beginAtZero: boolean;
+    /** Stacks each category's bars into one segmented bar. Ignored for `type="line"`. */
+    stacked: boolean;
+    /** Formats a y-axis tick value for display (e.g. `(v) => \`$${v.toFixed(2)}\``). Falls back to the
+     *  built-in nice-number formatter when unset. */
+    tickFormat?: (value: number) => string;
+    /** `'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). */
+    layout: LyraLiteChartLayout;
+    /** Fixed per-category bar width in px, used only when `layout="scroll"`. Ignored (as before this
+     *  property existed) in `layout="fit"`, the default. */
+    barWidth: number;
+    /** Caps how many x-axis category labels render text once `this.labels.length` exceeds it,
+     *  decimating roughly evenly while always keeping the first and last label. Bars themselves
+     *  always render regardless — only the axis text is decimated. Unset (the default) renders every
+     *  label, unchanged from before this property existed. Works in either `layout` mode. */
+    maxLabels?: number;
+    /** Overrides the x-origin `renderBars()`/the category labels would otherwise compute internally
+     *  for a given category index, for `type="bar"` only (bars and their axis labels stay
+     *  consistent with each other either way). Lets a consumer pixel-align this chart's bars with,
+     *  e.g., a sibling `lyra-heatmap`'s calendar columns by handing both components the same
+     *  coordinate function. Unset (the default) uses the existing internal per-category slot math,
+     *  unchanged from before this property existed. */
+    barX?: (index: number) => number;
+    /** Formats the per-bar/per-point `<title>`/`aria-label` tooltip text — receives the category
+     *  label, the raw value, and the dataset index. Falls back to the built-in raw-value template
+     *  when unset (mirrors `lyra-heatmap`'s `cellText` hook). */
+    pointText?: (label: string, value: number, datasetIndex: number) => string;
+    /** `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>`. */
+    roundedBars: boolean;
+    /** `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. */
+    skipZero: boolean;
+    /** Overrides the internal `PAD_LEFT` (36px) plot-left-padding constant. Unset (the default) keeps
+     *  today's fixed 36px. */
+    padLeft?: number;
+    /** Overrides the internal `BAR_GROUP_GAP` (0.2) fraction of a category slot left as a gap between
+     *  categories. Unset (the default) keeps today's fixed 0.2. */
+    barGapRatio?: number;
+    /** `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. */
+    scale: 'linear' | 'sqrt';
+    /** Suppresses `renderGrid()` entirely — no gridlines, no y-axis tick labels. x-axis category
+     *  labels (rendered separately) are unaffected. Default `false` preserves today's behavior. */
+    hideAxis: boolean;
+    /** A pixel floor for a bar/stacked-segment's rendered height, for a nonzero value that would
+     *  otherwise round to sub-pixel and become visually indistinguishable from absent (while still
+     *  being focusable/tab-stoppable/announced) — a real accessibility/visibility gap for
+     *  heterogeneous-magnitude stacked data. `type="bar"` only; a value of exactly `0` is unaffected
+     *  (that's `skipZero`'s job, not this one's). Unset (the default) reproduces today's
+     *  `Math.max(0, y2 - y1)` exactly, with no floor. */
+    minBarHeight?: number;
+    /** Overrides the `<svg>`'s auto-derived `aria-label` (`datasets.map(d => d.label).join(', ') ||
+     *  'Chart'`) — for a consumer with a real, localized chart description. Unset (the default)
+     *  keeps today's auto-derived (English-fallback) label exactly. */
+    chartLabel?: string;
+    private plotWidth;
+    private plotHeight;
+    private visible;
+    /** One roving tab stop across all bar/point marks. */
+    private activeMarkIndex;
+    private liveText;
+    private svgEl?;
+    private resizeObserver?;
+    private intersectionObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    private colorFor;
+    /** 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()`. */
+    private resolvePointText;
+    /** The ordered set of visible marks used by both keyboard navigation and
+     * the screen-reader data alternative. */
+    private interactiveMarks;
+    private markIndexMap;
+    private normalizedMarkIndex;
+    private markAnnouncement;
+    private onMarkFocus;
+    private focusMark;
+    /**
+     * 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.
+     */
+    private barValueToY;
+    /**
+     * 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).
+     */
+    private roundedBarPath;
+    private domain;
+    private emitPoint;
+    private onPointKeyDown;
+    private renderGrid;
+    /**
+     * `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.
+     */
+    private renderBars;
+    private renderLines;
+    render(): TemplateResult;
+    /**
+     * 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).
+     */
+    private labelStep;
+    private renderChart;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-lite-chart': LyraLiteChart;
+    }
+}
+//# sourceMappingURL=lite-chart.class.d.ts.map

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

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