import type{LyraEventDetailSnapshot}from'../../../internal/lyra-element.js';import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import'../../overlays/skeleton/skeleton.class.js';import{type LyraChartLegendVisibilityChangeDetail}from'./chart-legend-visibility.js';import type{LyraChartValueFormatter,LyraChartDatumActivateDetail,LyraChartFormatter}from'./chart.class.js';import{type LyraChartChromeLegendPosition}from'./chart-chrome.js';export interface LyraBoxPlotSummary{readonly min:number;readonly q1:number;readonly median:number;readonly q3:number;readonly max:number;}export interface LyraBoxPlotSeries{readonly label:string;readonly data:readonly LyraBoxPlotSummary[];readonly color?:string;} /** One addressable box: a series/category pair plus the five-number summary it renders. */ export interface LyraBoxPlotPointDetail{datasetIndex:number;index:number;label:string|undefined;value:LyraBoxPlotSummary|null;}export interface LyraBoxPlotEventMap{'lr-point-click':CustomEvent;'lr-before-legend-visibility-change':CustomEvent>;'lr-legend-visibility-change':CustomEvent>;'lr-datum-activate':CustomEvent>;} /** * `` — 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 — useful for summarizing distributions. * With IntersectionObserver available, canvas construction waits for the first delivered * visibility decision; without it, drawing starts as soon as the peers and canvas are ready. * * Public collection properties take bounded, clone-owned readonly snapshots. Create a new * collection and reassign it after changes; mutating the assigned array does not update the view. * * @customElement lr-box-plot * @csspart base - The chart wrapper. * @csspart plot - The fixed-height canvas region. * @csspart canvas - The box-plot canvas. A keyboard-navigable surface: Arrow keys/Home/End walk * the individual boxes and Enter/Space activates the current one, mirroring ``. * @csspart legend - The wrapping DOM legend rendered when `legend` is set. * @csspart legend-item - A keyboard-operable series visibility toggle. * @csspart legend-item-hidden - Added to a `legend-item` while its box series is hidden. * @csspart legend-swatch - The resolved series-color swatch in a legend item. * @csspart description - The accessible box-plot summary. * @csspart data-table - The optional generated or slotted data table. * @csspart data-table-toggle - The disclosure button rendered by `dataTableToggle`. * @cssprop [--lr-box-plot-data-table-toggle-hover-bg=var(--lr-color-brand-quiet)] - Hover * background of the `dataTableToggle` disclosure button. * @cssprop --lr-box-plot-data-table-toggle-active-bg - Pressed background of the `dataTableToggle` * disclosure button; defaults to a mix of the hover background with the shared active mix * partner. * @cssprop [--lr-box-plot-border-width=var(--lr-border-width-thin)] - Canvas box-outline stroke * width, in pixels. Same override mechanism as ``'s `--border-width`. * @cssprop [--lr-box-plot-item-radius=0] - Radius, in pixels, of the individual raw-sample dots * drawn alongside each box; `0` (the default) disables them. * @cssprop [--lr-box-plot-border-color-1=var(--lr-color-chart-1)] - First series box-outline color. * @cssprop [--lr-box-plot-border-color-2=var(--lr-color-chart-2)] - Second series box-outline color. * @cssprop [--lr-box-plot-border-color-3=var(--lr-color-chart-3)] - Third series box-outline color. * @cssprop [--lr-box-plot-border-color-4=var(--lr-color-chart-4)] - Fourth series box-outline color. * @cssprop [--lr-box-plot-border-color-5=var(--lr-color-chart-5)] - Fifth series box-outline color. * @cssprop [--lr-box-plot-border-color-6=var(--lr-color-chart-6)] - Sixth series box-outline color. * @cssprop [--lr-box-plot-border-color-7=var(--lr-color-chart-7)] - Seventh series box-outline color. * @cssprop [--lr-box-plot-border-color-8=var(--lr-color-chart-8)] - Eighth series box-outline color. * @cssprop [--lr-box-plot-fill-color-1=var(--lr-color-chart-1)] - First series box-fill and * legend-swatch color. * @cssprop [--lr-box-plot-fill-color-2=var(--lr-color-chart-2)] - Second series box-fill and * legend-swatch color. * @cssprop [--lr-box-plot-fill-color-3=var(--lr-color-chart-3)] - Third series box-fill and * legend-swatch color. * @cssprop [--lr-box-plot-fill-color-4=var(--lr-color-chart-4)] - Fourth series box-fill and * legend-swatch color. * @cssprop [--lr-box-plot-fill-color-5=var(--lr-color-chart-5)] - Fifth series box-fill and * legend-swatch color. * @cssprop [--lr-box-plot-fill-color-6=var(--lr-color-chart-6)] - Sixth series box-fill and * legend-swatch color. * @cssprop [--lr-box-plot-fill-color-7=var(--lr-color-chart-7)] - Seventh series box-fill and * legend-swatch color. * @cssprop [--lr-box-plot-fill-color-8=var(--lr-color-chart-8)] - Eighth series box-fill and * legend-swatch color. * @csspart error - Static visible error shown instead of the canvas when the optional box-plot * peer fails to load; its transition is announced through a shared light-DOM alert. * @csspart data-truncation - Explanation shown when the generated accessible alternative samples * more than 1,000 records. * @event lr-before-legend-visibility-change - Cancelable proposed DOM legend visibility change. * @event lr-legend-visibility-change - Committed DOM legend visibility change. * @event lr-point-click - Fired when pointer input lands on a box, or when Enter/Space activates * the keyboard-current box. `detail: { datasetIndex: number, index: number, label: string | * undefined, value: LyraBoxPlotSummary | null }`, where `value` is that box's complete five-number * summary. Mirrors ``/``'s event of the same name. * @event lr-datum-activate - Family-normalized box activation; the legacy detail plus `kind: 'box'`. * @slot data-table - An optional consumer-provided complete/paginated accessible table alternative. * @cssprop [--lr-chart-height=var(--lr-size-280px)] - Consumer-owned chart height. The `height` * property supplies only a private fallback, so this public token always wins when set. * @cssprop [--lr-chart-grid-color=var(--lr-color-border)] - Canvas grid-line color. * @cssprop [--lr-chart-tick-color=var(--lr-color-text-quiet)] - Canvas tick and axis-title color. * @cssprop [--lr-chart-tick-font-size=var(--lr-font-size-xs)] - Canvas axis tick-label font size. * Same token name and default as `lr-chart`'s equivalent, so theming either retunes both; * `--lr-font-size-xs` (12px at the standard root) matches Chart.js's OWN built-in tick font * size, which is what box-plot rendered before this token existed. * @cssprop [--lr-chart-legend-color=var(--lr-color-text)] - DOM legend label color. * @cssprop [--lr-chart-tooltip-bg=var(--lr-color-surface)] - Canvas tooltip background. * @cssprop [--lr-chart-tooltip-text=var(--lr-color-text)] - Canvas tooltip text color. * @cssprop [--lr-chart-legend-side-max=var(--lr-size-15rem)] - Maximum side-legend track size. * @cssprop [--lr-chart-legend-item-hover-bg=var(--lr-color-brand-quiet)] - Legend-item hover background. * @cssprop --lr-chart-legend-item-active-bg - Legend-item pressed background. * @cssprop [--lr-chart-canvas-hover-outline-width=var(--lr-border-width-thin)] - Width of the * `[part='canvas']` hover-state outline. * @cssprop [--lr-chart-canvas-hover-outline-color=var(--lr-chart-grid-color)] - Color of the * `[part='canvas']` hover-state outline. Same token and default as ``. * @cssprop [--lr-chart-pattern-step=var(--lr-space-2xs)] - Tile size of the texture painted on * `[part='legend-swatch']` while `forced-colors: active` matches, where the eight-color series * ramp collapses onto a repeating system-color cycle and the stripe/crosshatch pattern becomes * the only channel keeping series apart. Declared on the swatch part rather than the host; the * stripe width within a tile stays `--lr-border-width-thin`, so a larger step spaces the stripes * further apart. Shared verbatim with `` and ``. * @status stable * @since 4.0.0 */ export declare class LyraBoxPlot extends LyraElement{protected static readonly ownedCollectionProperties:readonly string[];static styles:import("lit").CSSResultGroup[];protected static readonly immutableEventDetails:readonly string[];constructor();labels:readonly string[];private _datasets; /** Series with an array `data` payload. Malformed entries are dropped without hiding siblings. */ get datasets():readonly LyraBoxPlotSeries[];set datasets(value:readonly LyraBoxPlotSeries[]); /** Complete controlled legend visibility state. `undefined` keeps the default all-visible state. */ hiddenDatasets?:readonly number[]; /** * Deliberately opt-in (default `false`), unlike `lr-chart`'s negative-polarity * `withoutLegend` (legend shown by default): a box plot's single/few-series comparison usage is * more often legend-redundant (category labels already identify each box) than `lr-chart`'s * typical multi-dataset case. */ legend:boolean; /** Logical placement for the optional DOM legend. Deliberately `'bottom'`, unlike `lr-chart`'s * `'top'` default -- shared with `lr-lite-chart` via `chart-chrome.ts`'s * `normalizeChartChromeLegendPosition()` default. */ legendPosition:LyraChartChromeLegendPosition;height:string;yLabel:string;beginAtZero:boolean; /** Accessible chart name. A host `aria-label` wins. */ label:string|null; /** Accessible chart description. A generated five-number summary is used when unset. */ description:string|null; /** Makes the generated data table visible; it remains screen-reader available when false. */ showDataTable:boolean; /** * Render a disclosure button above the accessible data table so a sighted reader can reveal the * numbers behind the plot on demand. `showDataTable` alone is all-or-nothing -- the table is * either permanently screen-reader-only or permanently visible -- which left a consumer wrapping * a duplicated table in their own `
`. * * With this set, `showDataTable` becomes the disclosure's *initial* state rather than its whole * behavior. The table stays in the DOM in both states, so assistive technology never loses it. * @default false */ dataTableToggle:boolean; /** * Live disclosure state. Null until the reader actually toggles, so an untouched control keeps * following `showDataTable` (including a later change to it) instead of freezing a seeded copy. */ private dataTableExpandedOverride;private readonly dataTableId; /** Whether the data table is currently visible. Identical to `showDataTable` whenever * `dataTableToggle` is off, which is what keeps the unset path byte-identical to before. */ private get dataTableVisible();private toggleDataTable; /** Formats numeric axes, tooltips, generated table cells, summaries, and CSV export. */ valueFormatter?:LyraChartValueFormatter; /** Unified context-object formatter shared with the other chart surfaces. */ formatter?:LyraChartFormatter; /** * True until the lazy-loaded `chart.js` + `@sgratzl/chartjs-chart-boxplot` * peer dependencies have settled (success or failure) — mirrors * `LyraChart`'s `loading` state. */ private loading;private loadFailed;private visible; /** Position of the keyboard cursor within `boxDatums()`; clamped on every read, never persisted. */ private keyboardDatumIndex;private keyboardDatumAnnouncement;private intersectionObserver?;private intersectionGeneration;private reducedMotionQuery?;private reducedMotionWindow?;private canvasEl?;private chart?;private stopAnnotationRegistrationWatch?;private chartJsModule?;private loadGeneration;private descriptionId;private lastDrawnDirection?;private lastDrawnLocale?;private politeAnnouncementSink?;private assertiveAnnouncementSink?;private lastDataTruncationAnnouncement; /** Gates the sampling notice so an initially supplied large dataset is described, not announced. */ private isMounting;connectedCallback():void;private onBoxPlotPluginLoaded;disconnectedCallback():void;adoptedCallback():void;private readonly onReducedMotionChange;private armReducedMotionWatcher;private disarmReducedMotionWatcher;private syncAnnouncementSinks;private releaseAnnouncementSinks;private get ownerWindow();private effectiveHiddenDatasetIndexes; /** Synchronizes the public controlled visibility snapshot with Chart.js after data replacement. */ private applyDatasetVisibility;protected updated(changed:PropertyValues):void; /** * Resolves the `--lr-chart-*` theme tokens (declared in * `box-plot.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 `chart.ts`'s * `themeColors()` documents — so this is called fresh from `buildConfig()` * on every draw rather than cached. Each computed value is also round-tripped * through a CSS color probe; invalid expressions fail to a concrete semantic * fallback instead of silently preserving an earlier canvas paint. */ private themeColors; /** The series color for a box index, honoring an explicit per-series `color` override. */ private seriesColor; /** * `seriesColor()`, then layered with a `--lr-box-plot-border-color-N` CSS override (`N` 1-8, * wrapping like the underlying `--lr-color-chart-N` ramp) — mirrors ``'s * `--border-color-N`/`--fill-color-N` palette-override mechanism for the canvas box outline. */ private seriesBorderColor; /** * `seriesColor()`, then layered with a `--lr-box-plot-fill-color-N` CSS override for the canvas * box fill and the matching legend swatch. */ private seriesFillColor; /** * The forced-colors texture painted over a box's fill, or `undefined` while the user is on a * normal palette. Mirrors ``'s accommodation for its proportional types: forced-colors * mode collapses the eight-color `--lr-color-chart-*` ramp onto a repeating three-value system * cycle, so series 1/4/7 paint in the same color and only texture keeps them apart. Box-and- * whisker elements read `backgroundColor` straight into `ctx.fillStyle`, so a `CanvasPattern` is * the channel available here — the peer's element has no border-dash or point-style option to * cycle the way a Chart.js line dataset does. */ private forcedColorFill;private styleColor; /** * Resolves a themeable numeric geometry token the same way `themeColors()`/`styleColor()` * resolve color tokens — via `getComputedStyle` on every draw, since the peer renders to canvas * and can't consume a CSS `var()` directly. `fallbackToken`, when given, is tried before the * hard-coded `fallback` so the token can itself default to a `--lr-*` design token (mirrors * `LyraChart.styleNumber()`). */ private styleNumber;private buildConfig;private draw;private drawIfVisible; /** * A sibling `` registering `chartjs-plugin-annotation` globally leaves this instance * without the plugin's per-chart state (created only in `beforeInit`), so the plugin would throw * on the next update. Rebuild from the current configuration instead. */ private rebuildAfterAnnotationRegistration; /** Re-reads canvas theme custom properties after an out-of-band ancestor theme change. */ refreshTheme():void; /** A blank/missing `series.label` must never reach an accessible name (legend toggle) or a * rendered cell as empty text -- mirrors `LyraChart.datasetLabel()`'s fallback shape, reusing * this file's own existing `chartSeriesLabel` fallback (see `markAnnouncement()`). */ private seriesDisplayLabel;private formatValue; /** Returns a spreadsheet-safe CSV snapshot or the current canvas PNG data URL. */ exportData(format:'csv'|'png'):string;private boxPlotDescription; /** * The addressable boxes, in the same series-major order the generated data table lists them. * Built from the table's bounded planner rather than a raw scan so the keyboard alternative can * never turn a very wide consumer data set into an unbounded pass. */ private boxDatums; /** * A box's spoken summary. The five numbers are the whole content of a box, so each is labeled * with its own existing localized term and joined through the shared separator — the same * composition `boxPlotDescription()` already uses — then interpolated into the family's mark * summary as that mark's value. */ private boxAnnouncement;private activateBox; /** * `options.onClick`, wired in `buildConfig()`. Resolving which single box was clicked needs its * own `getElementsAtEventForMode('nearest', { intersect: true }, true)` lookup, so a click that * lands off every box reports nothing rather than firing for whatever happens to be nearest. */ private handlePointClick;private onCanvasFocus;private onCanvasKeyDown;private validPoint;private accessibleName;private dataTableSample;private generatedDataIsSampled;private dataTruncationMessage;private renderDataTable;private hasCustomDataTable;private toggleDataset;private renderLegend;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-box-plot':LyraBoxPlot;}}