@aceshooting/lyra-ui 13.0.1 → 14.0.0

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

@@ -1,5 +1,5 @@
-var __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--)(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{nextId,srOnly}from"../../../internal/a11y.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{loadChartJs}from"./chart-core-loader.js";import{styles}from"./box-plot.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{getListFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{resolveCanvasColor,seriesPalette}from"./chart-colors.js";import{createForcedColorPattern,forcedColorEncoding,forcedColorsActive}from"./chart-forced-colors.js";import{specialistTokens}from"../../../internal/specialist-tokens.styles.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{legendVisibilityDetail,normalizeHiddenDatasets}from"./chart-legend-visibility.js";import{sampleChartTableIndexes}from"./chart-table-sampling.js";import{escapeCsvField}from"../../utility/export-button/csv.js";import{chartChromeLegendPlacement,normalizeChartChromeLegendPosition}from"./chart-chrome.js";import{LYRA_DEFAULT_boxPlot,LYRA_DEFAULT_boxPlotData,LYRA_DEFAULT_boxPlotMax,LYRA_DEFAULT_boxPlotMedian,LYRA_DEFAULT_boxPlotMin,LYRA_DEFAULT_boxPlotMissingLibrary,LYRA_DEFAULT_boxPlotQ1,LYRA_DEFAULT_boxPlotQ3,LYRA_DEFAULT_boxPlotSeriesSummary,LYRA_DEFAULT_boxPlotSummaryEmpty,LYRA_DEFAULT_boxPlotSummaryWithData,LYRA_DEFAULT_chartCategory,LYRA_DEFAULT_chartDataSampled,LYRA_DEFAULT_chartPointLabel,LYRA_DEFAULT_chartSeriesLabel,LYRA_DEFAULT_chartSeriesNoData,LYRA_DEFAULT_chartSummarySeparator,LYRA_DEFAULT_chartTrendDecreasing,LYRA_DEFAULT_chartTrendFlat,LYRA_DEFAULT_chartTrendIncreasing,LYRA_DEFAULT_chartValueLabel,LYRA_DEFAULT_liteChartMarkSummary,LYRA_DEFAULT_loading}from"../../../internal/default-strings.generated.js";function isBoxPlotSeries(value){try{return typeof value=="object"&&value!==null&&!Array.isArray(value)&&Array.isArray(value.data)}catch{return!1}}function normalizeBoxPlotSeries(value){try{return Object.freeze(Array.isArray(value)?value.filter(isBoxPlotSeries):[])}catch{return Object.freeze([])}}const FALLBACK_GRID_COLOR="#8a8a90",FALLBACK_TICK_COLOR="#6b7280",FALLBACK_LEGEND_COLOR="#1a1a1a",FALLBACK_TOOLTIP_BG="#fff",FALLBACK_TOOLTIP_TEXT="#1a1a1a";function summaryOf(point){return{min:point.min,q1:point.q1,median:point.median,q3:point.q3,max:point.max}}let boxPlotPlugin;function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingBoxPlotCapability(candidate){if(typeof candidate!="object"&&typeof candidate!="function"||candidate===null)return"module namespace";const module=candidate;if(!isConstructor(module.BoxPlotController))return"BoxPlotController";if(!isConstructor(module.BoxAndWiskers))return"BoxAndWiskers"}function isBoxPlotModule(candidate){return missingBoxPlotCapability(candidate)===void 0}function resolveBoxPlotModule(value){const module=resolveOptionalPeerCapability(value,isBoxPlotModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingBoxPlotCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`@sgratzl/chartjs-chart-boxplot\`: missing or invalid \`${missing}\` constructor.`)}async function loadBoxPlotAndRegister(loadChart=loadChartJs,importBoxPlot=()=>import("@sgratzl/chartjs-chart-boxplot")){try{const[chartMod,imported]=await Promise.all([loadChart(),importBoxPlot()]);if(!chartMod)return null;const boxMod=resolveBoxPlotModule(imported);return chartMod.Chart.register(boxMod.BoxPlotController,boxMod.BoxAndWiskers),boxMod}catch(error){return console.warn("<lr-box-plot> needs the optional peer dependency `@sgratzl/chartjs-chart-boxplot` \u2014 install it with `pnpm add @sgratzl/chartjs-chart-boxplot`.",error),null}}function loadBoxPlotPlugin(){return boxPlotPlugin||(boxPlotPlugin=loadBoxPlotAndRegister()),boxPlotPlugin}class LyraBoxPlot extends LyraElement{static{this.defaultStrings={...super.defaultStrings,boxPlot:LYRA_DEFAULT_boxPlot,boxPlotData:LYRA_DEFAULT_boxPlotData,boxPlotMax:LYRA_DEFAULT_boxPlotMax,boxPlotMedian:LYRA_DEFAULT_boxPlotMedian,boxPlotMin:LYRA_DEFAULT_boxPlotMin,boxPlotMissingLibrary:LYRA_DEFAULT_boxPlotMissingLibrary,boxPlotQ1:LYRA_DEFAULT_boxPlotQ1,boxPlotQ3:LYRA_DEFAULT_boxPlotQ3,boxPlotSeriesSummary:LYRA_DEFAULT_boxPlotSeriesSummary,boxPlotSummaryEmpty:LYRA_DEFAULT_boxPlotSummaryEmpty,boxPlotSummaryWithData:LYRA_DEFAULT_boxPlotSummaryWithData,chartCategory:LYRA_DEFAULT_chartCategory,chartDataSampled:LYRA_DEFAULT_chartDataSampled,chartPointLabel:LYRA_DEFAULT_chartPointLabel,chartSeriesLabel:LYRA_DEFAULT_chartSeriesLabel,chartSeriesNoData:LYRA_DEFAULT_chartSeriesNoData,chartSummarySeparator:LYRA_DEFAULT_chartSummarySeparator,chartTrendDecreasing:LYRA_DEFAULT_chartTrendDecreasing,chartTrendFlat:LYRA_DEFAULT_chartTrendFlat,chartTrendIncreasing:LYRA_DEFAULT_chartTrendIncreasing,chartValueLabel:LYRA_DEFAULT_chartValueLabel,liteChartMarkSummary:LYRA_DEFAULT_liteChartMarkSummary,loading:LYRA_DEFAULT_loading}}static{this.ownedCollectionProperties=Object.freeze(["labels","datasets","hiddenDatasets"])}static{this.styles=[LyraElement.styles,specialistTokens,styles,srOnly]}static{this.immutableEventDetails=Object.freeze(["lr-before-legend-visibility-change","lr-legend-visibility-change"])}constructor(){super(),this.labels=[],this._datasets=Object.freeze([]),this.legend=!1,this.legendPosition="bottom",this.height="280px",this.yLabel="",this.beginAtZero=!0,this.label=null,this.description=null,this.showDataTable=!1,this.dataTableToggle=!1,this.dataTableExpandedOverride=null,this.dataTableId=nextId("box-plot-data-table"),this.loading=!0,this.loadFailed=!1,this.visible=!0,this.keyboardDatumIndex=0,this.keyboardDatumAnnouncement="",this.intersectionGeneration=0,this.loadGeneration=0,this.descriptionId=nextId("box-plot-description"),this.lastDataTruncationAnnouncement="",this.isMounting=!0,this.onReducedMotionChange=()=>{!this.isConnected||this.ownerWindow!==this.reducedMotionWindow||this.drawIfVisible()},new ThemeWatcher(this,()=>{this.chart&&this.refreshTheme()})}get datasets(){return this._datasets}set datasets(value){const previous=this._datasets;this._datasets=normalizeBoxPlotSeries(value),this.requestUpdate("datasets",previous)}get dataTableVisible(){return this.dataTableToggle?this.dataTableExpandedOverride??this.showDataTable:this.showDataTable}toggleDataTable(){this.dataTableExpandedOverride=!this.dataTableVisible}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSinks(),this.visible=!0,this.armReducedMotionWatcher();const generation=++this.loadGeneration;loadBoxPlotPlugin().then(boxMod=>this.onBoxPlotPluginLoaded(boxMod,generation));const IntersectionObserverCtor=this.ownerWindow?.IntersectionObserver;if(IntersectionObserverCtor){const ownerWindow=this.ownerWindow,observerGeneration=++this.intersectionGeneration,observer=new IntersectionObserverCtor(entries=>{if(observerGeneration!==this.intersectionGeneration||this.intersectionObserver!==observer||!this.isConnected||this.ownerWindow!==ownerWindow)return;const wasVisible=this.visible;this.visible=entries[0]?.isIntersecting??!0,this.visible&&!wasVisible&&this.drawIfVisible()});this.intersectionObserver=observer,observer.observe(this)}}async onBoxPlotPluginLoaded(boxMod,generation=this.loadGeneration){if(generation!==this.loadGeneration||!this.isConnected)return;try{await this.updateComplete}catch{return}if(await new Promise(resolve=>this.updateBrowserDerivedState(resolve)),generation!==this.loadGeneration||!this.isConnected)return;if(this.loading=!1,!boxMod){this.loadFailed=!0,this.chart?.destroy(),this.chart=void 0,this.chartJsModule=void 0;return}this.loadFailed=!1;const chartMod=await loadChartJs();generation!==this.loadGeneration||!this.isConnected||(this.chartJsModule=chartMod??void 0,this.drawIfVisible())}disconnectedCallback(){super.disconnectedCallback(),this.releaseAnnouncementSinks(),this.lastDataTruncationAnnouncement="",this.isMounting=!0,this.loadGeneration+=1,this.chart?.destroy(),this.chart=void 0,this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0,this.intersectionGeneration+=1,this.visible=!0,this.disarmReducedMotionWatcher()}adoptedCallback(){super.adoptedCallback(),this.releaseAnnouncementSinks(),this.syncAnnouncementSinks(),this.armReducedMotionWatcher()}armReducedMotionWatcher(){const ownerWindow=this.ownerWindow;ownerWindow?.matchMedia&&(this.reducedMotionWindow===ownerWindow&&this.reducedMotionQuery||(this.disarmReducedMotionWatcher(),this.reducedMotionWindow=ownerWindow,this.reducedMotionQuery=ownerWindow.matchMedia("(prefers-reduced-motion: reduce)"),this.reducedMotionQuery.addEventListener("change",this.onReducedMotionChange)))}disarmReducedMotionWatcher(){this.reducedMotionQuery?.removeEventListener("change",this.onReducedMotionChange),this.reducedMotionQuery=void 0,this.reducedMotionWindow=void 0}syncAnnouncementSinks(){this.isConnected&&(this.politeAnnouncementSink?.element.ownerDocument===this.ownerDocument&&this.assertiveAnnouncementSink?.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSinks(),this.politeAnnouncementSink=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.assertiveAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})))}releaseAnnouncementSinks(){this.politeAnnouncementSink?.release(),this.politeAnnouncementSink=void 0,this.assertiveAnnouncementSink?.release(),this.assertiveAnnouncementSink=void 0}get ownerWindow(){return this.ownerDocument?.defaultView??void 0}effectiveHiddenDatasetIndexes(){return normalizeHiddenDatasets(this.hiddenDatasets,this.datasets.length)??[]}applyDatasetVisibility(){if(!this.chart)return!1;const datasetCount=this.chart.data.datasets?.length??0,sourceSeriesIndexes=this.dataTableSample().seriesIndexes,controlled=normalizeHiddenDatasets(this.hiddenDatasets,this.datasets.length);if(controlled===void 0){for(let index=0;index<datasetCount;index++){const metadata=this.chart.getDatasetMeta?.(index);metadata&&(metadata.hidden=null)}return datasetCount>0}const hidden=new Set(controlled);for(let index=0;index<datasetCount;index++)this.chart.setDatasetVisibility(index,!hidden.has(sourceSeriesIndexes[index]??index));return datasetCount>0}updated(changed){if(super.updated(changed),!this.isConnected)return;const wasMounting=this.isMounting;this.isMounting=!1,changed.has("keyboardDatumAnnouncement")&&changed.get("keyboardDatumAnnouncement")!==void 0&&this.keyboardDatumAnnouncement!==""&&this.politeAnnouncementSink?.announce(this.keyboardDatumAnnouncement),changed.has("loadFailed")&&changed.get("loadFailed")!==void 0&&this.loadFailed&&this.assertiveAnnouncementSink?.announce(this.localize("boxPlotMissingLibrary"));const dataTruncation=this.dataTruncationMessage();if(wasMounting&&(this.lastDataTruncationAnnouncement=dataTruncation),!this.loading&&!this.loadFailed&&!wasMounting&&dataTruncation!==this.lastDataTruncationAnnouncement&&(this.lastDataTruncationAnnouncement=dataTruncation,dataTruncation&&this.politeAnnouncementSink?.announce(dataTruncation)),this.setAttribute("aria-busy",String(this.loading)),changed.has("height")){const height=sanitizeCssLength(this.height,"height");height?this.style.setProperty("--_lr-chart-height",height):this.style.removeProperty("--_lr-chart-height")}if(this.loading)return;const contentChanged=["labels","datasets","hiddenDatasets","legend","legendPosition","height","yLabel","beginAtZero","label","description","valueFormatter","formatter","locale","strings","loading"].some(name=>changed.has(name)),direction=this.effectiveDirection,locale=this.effectiveLocale,contextChanged=this.lastDrawnDirection!==void 0&&this.lastDrawnDirection!==direction||this.lastDrawnLocale!==void 0&&this.lastDrawnLocale!==locale;this.lastDrawnDirection=direction,this.lastDrawnLocale=locale,!(!contentChanged&&!contextChanged)&&this.drawIfVisible()}themeColors(){const view=this.ownerWindow,cs=view?view.getComputedStyle(this):this.style;return{grid:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-grid-color").trim()||cs.getPropertyValue("--_lr-chart-grid-color").trim(),FALLBACK_GRID_COLOR),tick:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-tick-color").trim()||cs.getPropertyValue("--_lr-chart-tick-color").trim(),FALLBACK_TICK_COLOR),legend:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-legend-color").trim()||cs.getPropertyValue("--_lr-chart-legend-color").trim(),FALLBACK_LEGEND_COLOR),tooltipBg:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-tooltip-bg").trim()||cs.getPropertyValue("--_lr-chart-tooltip-bg").trim(),FALLBACK_TOOLTIP_BG),tooltipText:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-tooltip-text").trim()||cs.getPropertyValue("--_lr-chart-tooltip-text").trim(),FALLBACK_TOOLTIP_TEXT)}}seriesColor(index,palette=seriesPalette(this)){const fallback=palette[index%palette.length]??"transparent",series=this.datasets[index];return series?.color?resolveCanvasColor(this,series.color,fallback):fallback}forcedColorFill(index,background){return!this.ownerWindow||!forcedColorsActive(this.ownerWindow)?background:createForcedColorPattern(this.ownerDocument,index,background,this.styleColor("--lr-color-surface",FALLBACK_TOOLTIP_BG))}styleColor(name,fallback){const view=this.ownerWindow,value=(view?view.getComputedStyle(this):this.style).getPropertyValue(name).trim();return value?resolveCanvasColor(this,value,fallback):fallback}buildConfig(){const theme=this.themeColors(),palette=seriesPalette(this),sample=this.dataTableSample();return{type:"boxplot",data:{labels:sample.rowIndexes.map(index=>this.labels[index]??""),datasets:sample.seriesIndexes.map(sourceIndex=>{const s=this.datasets[sourceIndex],color=this.seriesColor(sourceIndex,palette);return{label:s.label,data:sample.rowIndexes.map(index=>{const point=s.data[index];return this.validPoint(point)?summaryOf(point):null}),backgroundColor:this.forcedColorFill(sourceIndex,color),borderColor:color}})},options:{locale:this.effectiveLocale,responsive:!0,maintainAspectRatio:!1,animation:prefersReducedMotion(this.ownerWindow)?!1:void 0,onClick:(event,_elements,chart)=>this.handlePointClick(event,chart),plugins:{legend:{display:!1,labels:{color:theme.legend}},tooltip:{backgroundColor:theme.tooltipBg,titleColor:theme.tooltipText,bodyColor:theme.tooltipText,...this.formatter||this.valueFormatter?{callbacks:{label:context=>{const raw=context.raw,point=this.validPoint(raw)?raw:void 0;if(!point)return;const value=this.formatValue(point.median,"tooltip"),label=String(context.dataset?.label??"");return label?this.localize("chartValueLabel",void 0,{label,value}):value}}}:{}}},scales:{x:{ticks:{color:theme.tick},grid:{color:theme.grid}},y:{position:this.effectiveDirection==="rtl"?"right":"left",beginAtZero:this.beginAtZero,title:{display:!!this.yLabel,text:this.yLabel,color:theme.tick},ticks:{color:theme.tick,...this.formatter||this.valueFormatter?{callback:value=>this.formatValue(Number(value),"tick")}:{}},grid:{color:theme.grid}}}}}}draw(){if(!this.chartJsModule||!this.canvasEl)return;const config=this.buildConfig();if(this.chart){this.chart.data=config.data,this.chart.options=config.options??{},this.applyDatasetVisibility(),this.chart.update("none");return}this.chart=new this.chartJsModule.Chart(this.canvasEl,config),this.hiddenDatasets!==void 0&&(this.applyDatasetVisibility(),this.chart.update("none"))}drawIfVisible(){!this.isConnected||!this.visible||this.draw()}refreshTheme(){this.drawIfVisible(),this.legend&&this.requestUpdate()}formatValue(value,surface){const legacyContext=surface==="export"||surface==="spoken"?"table":surface==="visual"?void 0:surface;return this.formatter?.({value,surface})??(legacyContext?this.valueFormatter?.(value,legacyContext):void 0)??getNumberFormat(this.effectiveLocale).format(value)}exportData(format){if(format==="png")return this.chart?.toBase64Image?.()??"";const header=["category","series","min","q1","median","q3","max"].map(escapeCsvField).join(","),rows=[];return this.datasets.forEach(series=>{series.data.forEach((point,index)=>{this.validPoint(point)&&rows.push([this.labels[index]??"",series.label,this.formatValue(point.min,"export"),this.formatValue(point.q1,"export"),this.formatValue(point.median,"export"),this.formatValue(point.q3,"export"),this.formatValue(point.max,"export")].map(escapeCsvField).join(","))})}),[header,...rows].join(`\r
-`)}boxPlotDescription(){if(this.description)return this.description;const summaries=this.dataTableSample().seriesIndexes.map(index=>{const series=this.datasets[index];let count=0,first=0,last=0,min=0,max=0;for(const point of series.data)this.validPoint(point)&&(count===0&&(first=point.median,min=point.median,max=point.median),last=point.median,min=Math.min(min,point.median),max=Math.max(max,point.median),count++);if(count===0)return this.localize("chartSeriesNoData",void 0,{label:series.label});const trend=last>first?this.localize("chartTrendIncreasing"):last<first?this.localize("chartTrendDecreasing"):this.localize("chartTrendFlat");return this.localize("boxPlotSeriesSummary",void 0,{label:series.label,count:getNumberFormat(this.effectiveLocale).format(count),min:this.formatValue(min,"spoken"),max:this.formatValue(max,"spoken"),trend})});return summaries.length?this.localize("boxPlotSummaryWithData",void 0,{summaries:summaries.join(this.localize("chartSummarySeparator"))}):this.localize("boxPlotSummaryEmpty")}boxDatums(){const sample=this.dataTableSample(),datums=[];for(const datasetIndex of sample.seriesIndexes){const series=this.datasets[datasetIndex];if(series)for(const index of sample.rowIndexes){const point=series.data[index];this.validPoint(point)&&datums.push({datasetIndex,index,label:this.labels[index]||void 0,value:summaryOf(point)})}}return datums}boxAnnouncement(datum,position,total){const numberFormat=getNumberFormat(this.effectiveLocale),point=datum.value,summary=(point?[[this.localize("boxPlotMin"),point.min],[this.localize("boxPlotQ1"),point.q1],[this.localize("boxPlotMedian"),point.median],[this.localize("boxPlotQ3"),point.q3],[this.localize("boxPlotMax"),point.max]]:[]).filter(([,value])=>Number.isFinite(value)).map(([label,value])=>this.localize("chartValueLabel",void 0,{label,value:numberFormat.format(value)})).join(this.localize("chartSummarySeparator"));return this.localize("liteChartMarkSummary",void 0,{series:this.datasets[datum.datasetIndex]?.label||this.localize("chartSeriesLabel"),label:datum.label??this.localize("chartPointLabel",void 0,{n:numberFormat.format(datum.index+1)}),value:summary,index:numberFormat.format(position+1),total:numberFormat.format(total)})}activateBox(datum){const datums=this.boxDatums(),position=datums.findIndex(candidate=>candidate.datasetIndex===datum.datasetIndex&&candidate.index===datum.index);position>=0&&(this.keyboardDatumIndex=position,this.keyboardDatumAnnouncement=this.boxAnnouncement(datum,position,datums.length)),this.emit("lr-datum-activate",{...datum,kind:"box"}),this.emit("lr-point-click",datum)}handlePointClick(event,chart){const hit=chart.getElementsAtEventForMode?.(event,"nearest",{intersect:!0},!0)?.[0];if(!hit)return;const sample=this.dataTableSample(),datasetIndex=sample.seriesIndexes[hit.datasetIndex],index=sample.rowIndexes[hit.index];if(datasetIndex===void 0||index===void 0)return;const point=this.datasets[datasetIndex]?.data[index];this.activateBox({datasetIndex,index,label:this.labels[index]||void 0,value:this.validPoint(point)?summaryOf(point):null})}onCanvasFocus(){const datums=this.boxDatums();datums.length&&(this.keyboardDatumIndex=Math.min(this.keyboardDatumIndex,datums.length-1),this.keyboardDatumAnnouncement=this.boxAnnouncement(datums[this.keyboardDatumIndex],this.keyboardDatumIndex,datums.length))}onCanvasKeyDown(event){const datums=this.boxDatums();if(!datums.length)return;if(this.keyboardDatumIndex=Math.min(this.keyboardDatumIndex,datums.length-1),event.key==="Enter"||event.key===" "){event.preventDefault(),this.activateBox(datums[this.keyboardDatumIndex]);return}const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";let next=this.keyboardDatumIndex;if(event.key===forward||event.key==="ArrowDown")next=Math.min(datums.length-1,next+1);else if(event.key===backward||event.key==="ArrowUp")next=Math.max(0,next-1);else if(event.key==="Home")next=0;else if(event.key==="End")next=datums.length-1;else return;event.preventDefault(),this.keyboardDatumIndex=next,this.keyboardDatumAnnouncement=this.boxAnnouncement(datums[next],next,datums.length)}validPoint(point){return!!point&&[point.min,point.q1,point.median,point.q3,point.max].every(Number.isFinite)&&point.min<=point.q1&&point.q1<=point.median&&point.median<=point.q3&&point.q3<=point.max}accessibleName(fallback){return this.getAttribute("aria-label")??this.label??fallback}dataTableSample(){let rowCount=this.labels.length;for(const series of this.datasets)rowCount=Math.max(rowCount,series.data.length);const indexes=sampleChartTableIndexes(rowCount,this.datasets.length);return{rowCount,seriesCount:this.datasets.length,...indexes}}generatedDataIsSampled(){if(this.hasCustomDataTable())return!1;const sample=this.dataTableSample();return sample.rowCount===0||sample.seriesCount===0?!1:sample.rowIndexes.length<sample.rowCount||sample.seriesIndexes.length<sample.seriesCount}dataTruncationMessage(){return this.generatedDataIsSampled()?this.localize("chartDataSampled"):""}renderDataTable(){const numberFormat=getNumberFormat(this.effectiveLocale),sample=this.dataTableSample();return html`
+var __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--)(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{nextId,srOnly}from"../../../internal/a11y.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{loadChartJs}from"./chart-core-loader.js";import{onAnnotationPluginRegistered}from"../../../internal/chart-annotation-registration.js";import{styles}from"./box-plot.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{getListFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{resolveCanvasColor,seriesPalette}from"./chart-colors.js";import{createForcedColorPattern,forcedColorEncoding,forcedColorsActive}from"./chart-forced-colors.js";import{specialistTokens}from"../../../internal/specialist-tokens.styles.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{legendVisibilityDetail,normalizeHiddenDatasets}from"./chart-legend-visibility.js";import{sampleChartTableIndexes}from"./chart-table-sampling.js";import{escapeCsvField}from"../../utility/export-button/csv.js";import{chartChromeLegendPlacement,normalizeChartChromeLegendPosition}from"./chart-chrome.js";import{LYRA_DEFAULT_boxPlot,LYRA_DEFAULT_boxPlotData,LYRA_DEFAULT_boxPlotMax,LYRA_DEFAULT_boxPlotMedian,LYRA_DEFAULT_boxPlotMin,LYRA_DEFAULT_boxPlotMissingLibrary,LYRA_DEFAULT_boxPlotQ1,LYRA_DEFAULT_boxPlotQ3,LYRA_DEFAULT_boxPlotSeriesSummary,LYRA_DEFAULT_boxPlotSummaryEmpty,LYRA_DEFAULT_boxPlotSummaryWithData,LYRA_DEFAULT_chartCategory,LYRA_DEFAULT_chartDataSampled,LYRA_DEFAULT_chartPointLabel,LYRA_DEFAULT_chartSeriesLabel,LYRA_DEFAULT_chartSeriesNoData,LYRA_DEFAULT_chartSummarySeparator,LYRA_DEFAULT_chartTrendDecreasing,LYRA_DEFAULT_chartTrendFlat,LYRA_DEFAULT_chartTrendIncreasing,LYRA_DEFAULT_chartValueLabel,LYRA_DEFAULT_liteChartMarkSummary,LYRA_DEFAULT_loading}from"../../../internal/default-strings.generated.js";function isBoxPlotSeries(value){try{return typeof value=="object"&&value!==null&&!Array.isArray(value)&&Array.isArray(value.data)}catch{return!1}}function normalizeBoxPlotSeries(value){try{return Object.freeze(Array.isArray(value)?value.filter(isBoxPlotSeries):[])}catch{return Object.freeze([])}}const FALLBACK_GRID_COLOR="#8a8a90",FALLBACK_TICK_COLOR="#6b7280",FALLBACK_LEGEND_COLOR="#1a1a1a",FALLBACK_TOOLTIP_BG="#fff",FALLBACK_TOOLTIP_TEXT="#1a1a1a";function summaryOf(point){return{min:point.min,q1:point.q1,median:point.median,q3:point.q3,max:point.max}}let boxPlotPlugin;function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingBoxPlotCapability(candidate){if(typeof candidate!="object"&&typeof candidate!="function"||candidate===null)return"module namespace";const module=candidate;if(!isConstructor(module.BoxPlotController))return"BoxPlotController";if(!isConstructor(module.BoxAndWiskers))return"BoxAndWiskers"}function isBoxPlotModule(candidate){return missingBoxPlotCapability(candidate)===void 0}function resolveBoxPlotModule(value){const module=resolveOptionalPeerCapability(value,isBoxPlotModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingBoxPlotCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`@sgratzl/chartjs-chart-boxplot\`: missing or invalid \`${missing}\` constructor.`)}async function loadBoxPlotAndRegister(loadChart=loadChartJs,importBoxPlot=()=>import("@sgratzl/chartjs-chart-boxplot")){try{const[chartMod,imported]=await Promise.all([loadChart(),importBoxPlot()]);if(!chartMod)return null;const boxMod=resolveBoxPlotModule(imported);return chartMod.Chart.register(boxMod.BoxPlotController,boxMod.BoxAndWiskers),boxMod}catch(error){return console.warn("<lr-box-plot> needs the optional peer dependency `@sgratzl/chartjs-chart-boxplot` — install it with `pnpm add @sgratzl/chartjs-chart-boxplot`.",error),null}}function loadBoxPlotPlugin(){return boxPlotPlugin||(boxPlotPlugin=loadBoxPlotAndRegister()),boxPlotPlugin}class LyraBoxPlot extends LyraElement{static{this.defaultStrings={...super.defaultStrings,boxPlot:LYRA_DEFAULT_boxPlot,boxPlotData:LYRA_DEFAULT_boxPlotData,boxPlotMax:LYRA_DEFAULT_boxPlotMax,boxPlotMedian:LYRA_DEFAULT_boxPlotMedian,boxPlotMin:LYRA_DEFAULT_boxPlotMin,boxPlotMissingLibrary:LYRA_DEFAULT_boxPlotMissingLibrary,boxPlotQ1:LYRA_DEFAULT_boxPlotQ1,boxPlotQ3:LYRA_DEFAULT_boxPlotQ3,boxPlotSeriesSummary:LYRA_DEFAULT_boxPlotSeriesSummary,boxPlotSummaryEmpty:LYRA_DEFAULT_boxPlotSummaryEmpty,boxPlotSummaryWithData:LYRA_DEFAULT_boxPlotSummaryWithData,chartCategory:LYRA_DEFAULT_chartCategory,chartDataSampled:LYRA_DEFAULT_chartDataSampled,chartPointLabel:LYRA_DEFAULT_chartPointLabel,chartSeriesLabel:LYRA_DEFAULT_chartSeriesLabel,chartSeriesNoData:LYRA_DEFAULT_chartSeriesNoData,chartSummarySeparator:LYRA_DEFAULT_chartSummarySeparator,chartTrendDecreasing:LYRA_DEFAULT_chartTrendDecreasing,chartTrendFlat:LYRA_DEFAULT_chartTrendFlat,chartTrendIncreasing:LYRA_DEFAULT_chartTrendIncreasing,chartValueLabel:LYRA_DEFAULT_chartValueLabel,liteChartMarkSummary:LYRA_DEFAULT_liteChartMarkSummary,loading:LYRA_DEFAULT_loading}}static{this.ownedCollectionProperties=Object.freeze(["labels","datasets","hiddenDatasets"])}static{this.styles=[LyraElement.styles,specialistTokens,styles,srOnly]}static{this.immutableEventDetails=Object.freeze(["lr-before-legend-visibility-change","lr-legend-visibility-change"])}constructor(){super(),this.labels=[],this._datasets=Object.freeze([]),this.legend=!1,this.legendPosition="bottom",this.height="280px",this.yLabel="",this.beginAtZero=!0,this.label=null,this.description=null,this.showDataTable=!1,this.dataTableToggle=!1,this.dataTableExpandedOverride=null,this.dataTableId=nextId("box-plot-data-table"),this.loading=!0,this.loadFailed=!1,this.visible=!0,this.keyboardDatumIndex=0,this.keyboardDatumAnnouncement="",this.intersectionGeneration=0,this.loadGeneration=0,this.descriptionId=nextId("box-plot-description"),this.lastDataTruncationAnnouncement="",this.isMounting=!0,this.onReducedMotionChange=()=>{!this.isConnected||this.ownerWindow!==this.reducedMotionWindow||this.drawIfVisible()},new ThemeWatcher(this,()=>{this.chart&&this.refreshTheme()})}get datasets(){return this._datasets}set datasets(value){const previous=this._datasets;this._datasets=normalizeBoxPlotSeries(value),this.requestUpdate("datasets",previous)}get dataTableVisible(){return this.dataTableToggle?this.dataTableExpandedOverride??this.showDataTable:this.showDataTable}toggleDataTable(){this.dataTableExpandedOverride=!this.dataTableVisible}connectedCallback(){super.connectedCallback(),this.stopAnnotationRegistrationWatch?.(),this.stopAnnotationRegistrationWatch=onAnnotationPluginRegistered(()=>this.rebuildAfterAnnotationRegistration()),this.syncAnnouncementSinks(),this.visible=!0,this.armReducedMotionWatcher();const generation=++this.loadGeneration;loadBoxPlotPlugin().then(boxMod=>this.onBoxPlotPluginLoaded(boxMod,generation));const IntersectionObserverCtor=this.ownerWindow?.IntersectionObserver;if(IntersectionObserverCtor){const ownerWindow=this.ownerWindow,observerGeneration=++this.intersectionGeneration,observer=new IntersectionObserverCtor(entries=>{if(observerGeneration!==this.intersectionGeneration||this.intersectionObserver!==observer||!this.isConnected||this.ownerWindow!==ownerWindow)return;const wasVisible=this.visible;this.visible=entries[0]?.isIntersecting??!0,this.visible&&!wasVisible&&this.drawIfVisible()});this.intersectionObserver=observer,observer.observe(this)}}async onBoxPlotPluginLoaded(boxMod,generation=this.loadGeneration){if(generation!==this.loadGeneration||!this.isConnected)return;try{await this.updateComplete}catch{return}if(await new Promise(resolve=>this.updateBrowserDerivedState(resolve)),generation!==this.loadGeneration||!this.isConnected)return;if(this.loading=!1,!boxMod){this.loadFailed=!0,this.chart?.destroy(),this.chart=void 0,this.chartJsModule=void 0;return}this.loadFailed=!1;const chartMod=await loadChartJs();generation!==this.loadGeneration||!this.isConnected||(this.chartJsModule=chartMod??void 0,this.drawIfVisible())}disconnectedCallback(){super.disconnectedCallback(),this.stopAnnotationRegistrationWatch?.(),this.stopAnnotationRegistrationWatch=void 0,this.releaseAnnouncementSinks(),this.lastDataTruncationAnnouncement="",this.isMounting=!0,this.loadGeneration+=1,this.chart?.destroy(),this.chart=void 0,this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0,this.intersectionGeneration+=1,this.visible=!0,this.disarmReducedMotionWatcher()}adoptedCallback(){super.adoptedCallback(),this.releaseAnnouncementSinks(),this.syncAnnouncementSinks(),this.armReducedMotionWatcher()}armReducedMotionWatcher(){const ownerWindow=this.ownerWindow;ownerWindow?.matchMedia&&(this.reducedMotionWindow===ownerWindow&&this.reducedMotionQuery||(this.disarmReducedMotionWatcher(),this.reducedMotionWindow=ownerWindow,this.reducedMotionQuery=ownerWindow.matchMedia("(prefers-reduced-motion: reduce)"),this.reducedMotionQuery.addEventListener("change",this.onReducedMotionChange)))}disarmReducedMotionWatcher(){this.reducedMotionQuery?.removeEventListener("change",this.onReducedMotionChange),this.reducedMotionQuery=void 0,this.reducedMotionWindow=void 0}syncAnnouncementSinks(){this.isConnected&&(this.politeAnnouncementSink?.element.ownerDocument===this.ownerDocument&&this.assertiveAnnouncementSink?.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSinks(),this.politeAnnouncementSink=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.assertiveAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})))}releaseAnnouncementSinks(){this.politeAnnouncementSink?.release(),this.politeAnnouncementSink=void 0,this.assertiveAnnouncementSink?.release(),this.assertiveAnnouncementSink=void 0}get ownerWindow(){return this.ownerDocument?.defaultView??void 0}effectiveHiddenDatasetIndexes(){return normalizeHiddenDatasets(this.hiddenDatasets,this.datasets.length)??[]}applyDatasetVisibility(){if(!this.chart)return!1;const datasetCount=this.chart.data.datasets?.length??0,sourceSeriesIndexes=this.dataTableSample().seriesIndexes,controlled=normalizeHiddenDatasets(this.hiddenDatasets,this.datasets.length);if(controlled===void 0){for(let index=0;index<datasetCount;index++){const metadata=this.chart.getDatasetMeta?.(index);metadata&&(metadata.hidden=null)}return datasetCount>0}const hidden=new Set(controlled);for(let index=0;index<datasetCount;index++)this.chart.setDatasetVisibility(index,!hidden.has(sourceSeriesIndexes[index]??index));return datasetCount>0}updated(changed){if(super.updated(changed),!this.isConnected)return;const wasMounting=this.isMounting;this.isMounting=!1,changed.has("keyboardDatumAnnouncement")&&changed.get("keyboardDatumAnnouncement")!==void 0&&this.keyboardDatumAnnouncement!==""&&this.politeAnnouncementSink?.announce(this.keyboardDatumAnnouncement),changed.has("loadFailed")&&changed.get("loadFailed")!==void 0&&this.loadFailed&&this.assertiveAnnouncementSink?.announce(this.localize("boxPlotMissingLibrary"));const dataTruncation=this.dataTruncationMessage();if(wasMounting&&(this.lastDataTruncationAnnouncement=dataTruncation),!this.loading&&!this.loadFailed&&!wasMounting&&dataTruncation!==this.lastDataTruncationAnnouncement&&(this.lastDataTruncationAnnouncement=dataTruncation,dataTruncation&&this.politeAnnouncementSink?.announce(dataTruncation)),this.setAttribute("aria-busy",String(this.loading)),changed.has("height")){const height=sanitizeCssLength(this.height,"height");height?this.style.setProperty("--_lr-chart-height",height):this.style.removeProperty("--_lr-chart-height")}if(this.loading)return;const contentChanged=["labels","datasets","hiddenDatasets","legend","legendPosition","height","yLabel","beginAtZero","label","description","valueFormatter","formatter","locale","strings","loading"].some(name=>changed.has(name)),direction=this.effectiveDirection,locale=this.effectiveLocale,contextChanged=this.lastDrawnDirection!==void 0&&this.lastDrawnDirection!==direction||this.lastDrawnLocale!==void 0&&this.lastDrawnLocale!==locale;this.lastDrawnDirection=direction,this.lastDrawnLocale=locale,!(!contentChanged&&!contextChanged)&&this.drawIfVisible()}themeColors(){const view=this.ownerWindow,cs=view?view.getComputedStyle(this):this.style;return{grid:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-grid-color").trim()||cs.getPropertyValue("--_lr-chart-grid-color").trim(),FALLBACK_GRID_COLOR),tick:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-tick-color").trim()||cs.getPropertyValue("--_lr-chart-tick-color").trim(),FALLBACK_TICK_COLOR),legend:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-legend-color").trim()||cs.getPropertyValue("--_lr-chart-legend-color").trim(),FALLBACK_LEGEND_COLOR),tooltipBg:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-tooltip-bg").trim()||cs.getPropertyValue("--_lr-chart-tooltip-bg").trim(),FALLBACK_TOOLTIP_BG),tooltipText:resolveCanvasColor(this,cs.getPropertyValue("--lr-chart-tooltip-text").trim()||cs.getPropertyValue("--_lr-chart-tooltip-text").trim(),FALLBACK_TOOLTIP_TEXT)}}seriesColor(index,palette=seriesPalette(this)){const fallback=palette[index%palette.length]??"transparent",series=this.datasets[index];return series?.color?resolveCanvasColor(this,series.color,fallback):fallback}forcedColorFill(index,background){return!this.ownerWindow||!forcedColorsActive(this.ownerWindow)?background:createForcedColorPattern(this.ownerDocument,index,background,this.styleColor("--lr-color-surface",FALLBACK_TOOLTIP_BG))}styleColor(name,fallback){const view=this.ownerWindow,value=(view?view.getComputedStyle(this):this.style).getPropertyValue(name).trim();return value?resolveCanvasColor(this,value,fallback):fallback}buildConfig(){const theme=this.themeColors(),palette=seriesPalette(this),sample=this.dataTableSample();return{type:"boxplot",data:{labels:sample.rowIndexes.map(index=>this.labels[index]??""),datasets:sample.seriesIndexes.map(sourceIndex=>{const s=this.datasets[sourceIndex],color=this.seriesColor(sourceIndex,palette);return{label:s.label,data:sample.rowIndexes.map(index=>{const point=s.data[index];return this.validPoint(point)?summaryOf(point):null}),backgroundColor:this.forcedColorFill(sourceIndex,color),borderColor:color}})},options:{locale:this.effectiveLocale,responsive:!0,maintainAspectRatio:!1,animation:prefersReducedMotion(this.ownerWindow)?!1:void 0,onClick:(event,_elements,chart)=>this.handlePointClick(event,chart),plugins:{legend:{display:!1,labels:{color:theme.legend}},tooltip:{backgroundColor:theme.tooltipBg,titleColor:theme.tooltipText,bodyColor:theme.tooltipText,...this.formatter||this.valueFormatter?{callbacks:{label:context=>{const raw=context.raw,point=this.validPoint(raw)?raw:void 0;if(!point)return;const value=this.formatValue(point.median,"tooltip"),label=String(context.dataset?.label??"");return label?this.localize("chartValueLabel",void 0,{label,value}):value}}}:{}}},scales:{x:{ticks:{color:theme.tick},grid:{color:theme.grid}},y:{position:this.effectiveDirection==="rtl"?"right":"left",beginAtZero:this.beginAtZero,title:{display:!!this.yLabel,text:this.yLabel,color:theme.tick},ticks:{color:theme.tick,...this.formatter||this.valueFormatter?{callback:value=>this.formatValue(Number(value),"tick")}:{}},grid:{color:theme.grid}}}}}}draw(){if(!this.chartJsModule||!this.canvasEl)return;const config=this.buildConfig();if(this.chart){this.chart.data=config.data,this.chart.options=config.options??{},this.applyDatasetVisibility(),this.chart.update("none");return}this.chart=new this.chartJsModule.Chart(this.canvasEl,config),this.hiddenDatasets!==void 0&&(this.applyDatasetVisibility(),this.chart.update("none"))}drawIfVisible(){!this.isConnected||!this.visible||this.draw()}rebuildAfterAnnotationRegistration(){this.chart&&(this.chart.destroy(),this.chart=void 0,this.drawIfVisible())}refreshTheme(){this.drawIfVisible(),this.legend&&this.requestUpdate()}formatValue(value,surface,metadata={}){const legacyContext=surface==="export"||surface==="spoken"?"table":surface==="visual"?void 0:surface;return this.formatter?.({value,surface,...metadata})??(legacyContext?this.valueFormatter?.(value,legacyContext):void 0)??getNumberFormat(this.effectiveLocale).format(value)}exportData(format){if(format==="png")return this.chart?.toBase64Image?.()??"";const header=["category","series","min","q1","median","q3","max"].map(escapeCsvField).join(","),rows=[];return this.datasets.forEach((series,datasetIndex)=>{series.data.forEach((point,index)=>{if(!this.validPoint(point))return;const metadata={datasetIndex,index,label:this.labels[index]||void 0,seriesLabel:series.label};rows.push([this.labels[index]??"",series.label,this.formatValue(point.min,"export",{...metadata,statistic:"min"}),this.formatValue(point.q1,"export",{...metadata,statistic:"q1"}),this.formatValue(point.median,"export",{...metadata,statistic:"median"}),this.formatValue(point.q3,"export",{...metadata,statistic:"q3"}),this.formatValue(point.max,"export",{...metadata,statistic:"max"})].map(escapeCsvField).join(","))})}),[header,...rows].join(`\r
+`)}boxPlotDescription(){if(this.description)return this.description;const summaries=this.dataTableSample().seriesIndexes.map(index=>{const series=this.datasets[index];let count=0,first=0,last=0,min=0,minIndex=0,max=0,maxIndex=0;for(const[pointIndex,point]of series.data.entries())this.validPoint(point)&&(count===0&&(first=point.median,min=point.median,minIndex=pointIndex,max=point.median,maxIndex=pointIndex),last=point.median,point.median<min&&(min=point.median,minIndex=pointIndex),point.median>max&&(max=point.median,maxIndex=pointIndex),count++);if(count===0)return this.localize("chartSeriesNoData",void 0,{label:series.label});const trend=last>first?this.localize("chartTrendIncreasing"):last<first?this.localize("chartTrendDecreasing"):this.localize("chartTrendFlat");return this.localize("boxPlotSeriesSummary",void 0,{label:series.label,count:getNumberFormat(this.effectiveLocale).format(count),min:this.formatValue(min,"spoken",{datasetIndex:index,index:minIndex,label:this.labels[minIndex]||void 0,seriesLabel:series.label,statistic:"median"}),max:this.formatValue(max,"spoken",{datasetIndex:index,index:maxIndex,label:this.labels[maxIndex]||void 0,seriesLabel:series.label,statistic:"median"}),trend})});return summaries.length?this.localize("boxPlotSummaryWithData",void 0,{summaries:summaries.join(this.localize("chartSummarySeparator"))}):this.localize("boxPlotSummaryEmpty")}boxDatums(){const sample=this.dataTableSample(),datums=[];for(const datasetIndex of sample.seriesIndexes){const series=this.datasets[datasetIndex];if(series)for(const index of sample.rowIndexes){const point=series.data[index];this.validPoint(point)&&datums.push({datasetIndex,index,label:this.labels[index]||void 0,value:summaryOf(point)})}}return datums}boxAnnouncement(datum,position,total){const numberFormat=getNumberFormat(this.effectiveLocale),point=datum.value,summary=(point?[["min",this.localize("boxPlotMin"),point.min],["q1",this.localize("boxPlotQ1"),point.q1],["median",this.localize("boxPlotMedian"),point.median],["q3",this.localize("boxPlotQ3"),point.q3],["max",this.localize("boxPlotMax"),point.max]]:[]).filter(([,,value])=>Number.isFinite(value)).map(([statistic,label,value])=>this.localize("chartValueLabel",void 0,{label,value:this.formatValue(value,"spoken",{datasetIndex:datum.datasetIndex,index:datum.index,label:datum.label,seriesLabel:this.datasets[datum.datasetIndex]?.label,statistic})})).join(this.localize("chartSummarySeparator"));return this.localize("liteChartMarkSummary",void 0,{series:this.datasets[datum.datasetIndex]?.label||this.localize("chartSeriesLabel"),label:datum.label??this.localize("chartPointLabel",void 0,{n:numberFormat.format(datum.index+1)}),value:summary,index:numberFormat.format(position+1),total:numberFormat.format(total)})}activateBox(datum){const datums=this.boxDatums(),position=datums.findIndex(candidate=>candidate.datasetIndex===datum.datasetIndex&&candidate.index===datum.index);position>=0&&(this.keyboardDatumIndex=position,this.keyboardDatumAnnouncement=this.boxAnnouncement(datum,position,datums.length)),this.emit("lr-datum-activate",{...datum,kind:"box"}),this.emit("lr-point-click",datum)}handlePointClick(event,chart){const hit=chart.getElementsAtEventForMode?.(event,"nearest",{intersect:!0},!0)?.[0];if(!hit)return;const sample=this.dataTableSample(),datasetIndex=sample.seriesIndexes[hit.datasetIndex],index=sample.rowIndexes[hit.index];if(datasetIndex===void 0||index===void 0)return;const point=this.datasets[datasetIndex]?.data[index];this.activateBox({datasetIndex,index,label:this.labels[index]||void 0,value:this.validPoint(point)?summaryOf(point):null})}onCanvasFocus(){const datums=this.boxDatums();datums.length&&(this.keyboardDatumIndex=Math.min(this.keyboardDatumIndex,datums.length-1),this.keyboardDatumAnnouncement=this.boxAnnouncement(datums[this.keyboardDatumIndex],this.keyboardDatumIndex,datums.length))}onCanvasKeyDown(event){const datums=this.boxDatums();if(!datums.length)return;if(this.keyboardDatumIndex=Math.min(this.keyboardDatumIndex,datums.length-1),event.key==="Enter"||event.key===" "){event.preventDefault(),this.activateBox(datums[this.keyboardDatumIndex]);return}const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";let next=this.keyboardDatumIndex;if(event.key===forward||event.key==="ArrowDown")next=Math.min(datums.length-1,next+1);else if(event.key===backward||event.key==="ArrowUp")next=Math.max(0,next-1);else if(event.key==="Home")next=0;else if(event.key==="End")next=datums.length-1;else return;event.preventDefault(),this.keyboardDatumIndex=next,this.keyboardDatumAnnouncement=this.boxAnnouncement(datums[next],next,datums.length)}validPoint(point){return!!point&&[point.min,point.q1,point.median,point.q3,point.max].every(Number.isFinite)&&point.min<=point.q1&&point.q1<=point.median&&point.median<=point.q3&&point.q3<=point.max}accessibleName(fallback){return this.getAttribute("aria-label")??this.label??fallback}dataTableSample(){let rowCount=this.labels.length;for(const series of this.datasets)rowCount=Math.max(rowCount,series.data.length);const indexes=sampleChartTableIndexes(rowCount,this.datasets.length);return{rowCount,seriesCount:this.datasets.length,...indexes}}generatedDataIsSampled(){if(this.hasCustomDataTable())return!1;const sample=this.dataTableSample();return sample.rowCount===0||sample.seriesCount===0?!1:sample.rowIndexes.length<sample.rowCount||sample.seriesIndexes.length<sample.seriesCount}dataTruncationMessage(){return this.generatedDataIsSampled()?this.localize("chartDataSampled"):""}renderDataTable(){const numberFormat=getNumberFormat(this.effectiveLocale),sample=this.dataTableSample();return html`
       <table class=${this.dataTableVisible?"":"sr-only"}>
         <caption>${this.accessibleName(this.localize("boxPlotData"))}</caption>
         <thead>
@@ -14,15 +14,15 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           </tr>
         </thead>
         <tbody>
-          ${sample.seriesIndexes.flatMap(seriesIndex=>{const series=this.datasets[seriesIndex];return sample.rowIndexes.map(index=>{const point=series.data[index];return this.validPoint(point)?html`
+          ${sample.seriesIndexes.flatMap(seriesIndex=>{const series=this.datasets[seriesIndex];return sample.rowIndexes.map(index=>{const point=series.data[index],metadata={datasetIndex:seriesIndex,index,label:this.labels[index]||void 0,seriesLabel:series.label};return this.validPoint(point)?html`
                 <tr>
                   <th scope="row">${this.labels[index]??this.localize("chartPointLabel",void 0,{n:numberFormat.format(index+1)})}</th>
                   <td>${series.label}</td>
-                  <td>${this.formatValue(point.min,"table")}</td>
-                  <td>${this.formatValue(point.q1,"table")}</td>
-                  <td>${this.formatValue(point.median,"table")}</td>
-                  <td>${this.formatValue(point.q3,"table")}</td>
-                  <td>${this.formatValue(point.max,"table")}</td>
+                  <td>${this.formatValue(point.min,"table",{...metadata,statistic:"min"})}</td>
+                  <td>${this.formatValue(point.q1,"table",{...metadata,statistic:"q1"})}</td>
+                  <td>${this.formatValue(point.median,"table",{...metadata,statistic:"median"})}</td>
+                  <td>${this.formatValue(point.q3,"table",{...metadata,statistic:"q3"})}</td>
+                  <td>${this.formatValue(point.max,"table",{...metadata,statistic:"max"})}</td>
                 </tr>
               `:nothing})})}
         </tbody>
@@ -87,7 +87,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         <div
           id=${this.dataTableId}
           part="data-table"
-          ?data-visually-hidden=${!hasCustomDataTable&&!this.dataTableVisible}
+          ?data-visually-hidden=${!this.dataTableVisible}
         >
           <slot name="data-table" @slotchange=${()=>this.requestUpdate()}></slot>
           ${hasCustomDataTable?nothing:this.renderDataTable()}

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

@@ -1 +1 @@
-import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-colors.js";const styles=css` :host { display: block; position: relative; inline-size: 100%; min-inline-size: 0; min-block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); block-size: auto; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-chart-grid-color: var(--lr-color-border); --_lr-chart-tick-color: var(--lr-color-text-quiet); --_lr-chart-legend-color: var(--lr-color-text); --_lr-chart-tooltip-bg: var(--lr-color-surface); --_lr-chart-tooltip-text: var(--lr-color-text); } [part='base'] { position: relative; inline-size: 100%; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'plot' 'legend' 'notice' 'table'; } [part='plot'] { grid-area: plot; position: relative; inline-size: 100%; block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); min-inline-size: 0; } [part='data-table'] { grid-area: table; min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; overflow-y: hidden; } [part='data-table'][data-visually-hidden] { position: absolute; inline-size: var(--lr-size-1px); block-size: var(--lr-size-1px); overflow: clip; clip-path: inset(50%); white-space: nowrap; } [part='data-table'] table { max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-truncation'] { grid-area: notice; margin: 0; padding: var(--lr-space-xs); color: var(--lr-color-warning); font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='legend'] { grid-area: legend; display: flex; flex-wrap: wrap; gap: var(--lr-space-xs); min-inline-size: 0; max-inline-size: 100%; padding-block: var(--lr-space-xs); } [part~='legend-item'] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); max-inline-size: 100%; border: 0; border-radius: var(--lr-radius); padding: var(--lr-space-2xs); gap: var(--lr-space-2xs); background: transparent; color: var(--lr-chart-legend-color, var(--_lr-chart-legend-color)); font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; } [part~='legend-item']:where(:hover) { background: var(--lr-chart-legend-item-hover-bg, var(--lr-color-brand-quiet)); } [part~='legend-item']:where(:active) { background: var( --lr-chart-legend-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part~='legend-item']:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='legend-item']:where([part~='legend-item-hidden']) { text-decoration-line: line-through; text-decoration-thickness: var(--lr-border-width-medium); } [part='legend-swatch'] { inline-size: var(--lr-space-s); block-size: var(--lr-space-s); flex: 0 0 auto; border-radius: var(--lr-radius-xs); } ${forcedColorLegendSwatchStyles} [part='base']:where([data-legend-position='top']) { grid-template-areas: 'legend' 'plot' 'notice' 'table'; } [part='base']:where([data-legend-position='inline-start']) { grid-template-areas: 'legend plot' 'notice notice' 'table table'; grid-template-columns: minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))) minmax(0, 1fr); } [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot legend' 'notice notice' 'table table'; grid-template-columns: minmax(0, 1fr) minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))); } @container (max-width: 479px) { [part='base']:where([data-legend-position='inline-start']), [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot' 'legend' 'notice' 'table'; grid-template-columns: minmax(0, 1fr); } } lr-skeleton { --lr-skeleton-w: 100%; --lr-skeleton-h: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); } canvas { inline-size: 100% !important; block-size: 100% !important; } [part='canvas'] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); } [part='canvas']:hover { outline: var(--lr-chart-canvas-hover-outline-width, var(--lr-border-width-thin)) solid var(--lr-chart-grid-color, var(--_lr-chart-grid-color)); outline-offset: var(--lr-focus-ring-offset); } [part='canvas']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='error'] { margin: 0; padding: var(--lr-space-l); color: var(--lr-color-danger); font-size: var(--lr-font-size-md-sm); text-align: center; max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-table-toggle'] { align-self: flex-start; font: inherit; font-size: var(--lr-font-size-xs); min-block-size: var(--lr-icon-button-size); padding: var(--lr-size-0-15rem) var(--lr-size-0-5rem); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); max-inline-size: 100%; white-space: normal; overflow-wrap: break-word; cursor: pointer; } [part='data-table-toggle']:hover { background: var(--lr-box-plot-data-table-toggle-hover-bg, var(--lr-color-brand-quiet)); } [part='data-table-toggle']:active { background: var( --lr-box-plot-data-table-toggle-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part='data-table-toggle']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } `;export{styles};
+import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-colors.js";const styles=css` :host { display: block; position: relative; inline-size: 100%; min-inline-size: 0; min-block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); block-size: auto; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-chart-grid-color: var(--lr-color-border); --_lr-chart-tick-color: var(--lr-color-text-quiet); --_lr-chart-legend-color: var(--lr-color-text); --_lr-chart-tooltip-bg: var(--lr-color-surface); --_lr-chart-tooltip-text: var(--lr-color-text); } [part='base'] { position: relative; inline-size: 100%; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'plot' 'legend' 'notice' 'table'; } [part='plot'] { grid-area: plot; position: relative; inline-size: 100%; block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); min-inline-size: 0; } [part='data-table'] { grid-area: table; min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; overflow-y: hidden; } [part='data-table'][data-visually-hidden] { position: absolute; inline-size: var(--lr-size-1px); block-size: var(--lr-size-1px); overflow: clip; clip-path: inset(50%); white-space: nowrap; } [part='data-table'] table { max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-truncation'] { grid-area: notice; margin: 0; padding: var(--lr-space-xs); color: var(--lr-color-warning); font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='legend'] { grid-area: legend; display: flex; flex-wrap: wrap; gap: var(--lr-space-xs); min-inline-size: 0; max-inline-size: 100%; padding-block: var(--lr-space-xs); } [part~='legend-item'] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); max-inline-size: 100%; border: 0; border-radius: var(--lr-radius); padding: var(--lr-space-2xs); gap: var(--lr-space-2xs); background: transparent; color: var(--lr-chart-legend-color, var(--_lr-chart-legend-color)); font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; } [part~='legend-item']:where(:hover) { background: var(--lr-chart-legend-item-hover-bg, var(--lr-color-brand-quiet)); } [part~='legend-item']:where(:active) { background: var( --lr-chart-legend-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part~='legend-item']:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='legend-item']:where([part~='legend-item-hidden']) { text-decoration-line: line-through; text-decoration-thickness: var(--lr-border-width-medium); } [part='legend-swatch'] { inline-size: var(--lr-space-s); block-size: var(--lr-space-s); flex: 0 0 auto; border-radius: var(--lr-radius-xs); } ${forcedColorLegendSwatchStyles} [part='base']:where([data-legend-position='top']) { grid-template-areas: 'legend' 'plot' 'notice' 'table'; } [part='base']:where([data-legend-position='inline-start']) { grid-template-areas: 'legend plot' 'notice notice' 'table table'; grid-template-columns: minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))) minmax(0, 1fr); } [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot legend' 'notice notice' 'table table'; grid-template-columns: minmax(0, 1fr) minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))); } @container (max-width: 479px) { [part='base']:where([data-legend-position='inline-start']), [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot' 'legend' 'notice' 'table'; grid-template-columns: minmax(0, 1fr); } } lr-skeleton { --lr-skeleton-w: 100%; --lr-skeleton-h: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); } canvas { inline-size: 100% !important; block-size: 100% !important; } [part='canvas'] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); } [part='canvas']:hover { outline: var(--lr-chart-canvas-hover-outline-width, var(--lr-border-width-thin)) solid var( --lr-chart-canvas-hover-outline-color, var(--lr-chart-grid-color, var(--_lr-chart-grid-color)) ); outline-offset: var(--lr-focus-ring-offset); } [part='canvas']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='error'] { margin: 0; padding: var(--lr-space-l); color: var(--lr-color-danger); font-size: var(--lr-font-size-md-sm); text-align: center; max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-table-toggle'] { align-self: flex-start; font: inherit; font-size: var(--lr-font-size-xs); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-size-0-15rem) var(--lr-size-0-5rem); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); max-inline-size: 100%; white-space: normal; overflow-wrap: break-word; cursor: pointer; } [part='data-table-toggle']:hover { background: var(--lr-box-plot-data-table-toggle-hover-bg, var(--lr-color-brand-quiet)); } [part='data-table-toggle']:active { background: var( --lr-box-plot-data-table-toggle-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part='data-table-toggle']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } `;export{styles};

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

@@ -1 +1 @@
-import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const CHART_REGISTERABLE_KEYS=["LineController","BarController","ScatterController","DoughnutController","PieController","RadarController","PolarAreaController","BubbleController","LineElement","PointElement","BarElement","ArcElement","LinearScale","CategoryScale","RadialLinearScale","LogarithmicScale","Filler","Tooltip","Legend"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingChartCapability(candidate){if(!isObjectLike(candidate))return"module namespace";if(!isConstructor(candidate.Chart))return"Chart";if(typeof candidate.Chart.register!="function")return"Chart.register";if(!isObjectLike(candidate.defaults))return"defaults";for(const key of CHART_REGISTERABLE_KEYS)if(!isObjectLike(candidate[key]))return key}function isChartJsModule(candidate){return missingChartCapability(candidate)===void 0}function resolveChartJsModule(value){const module=resolveOptionalPeerCapability(value,isChartJsModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingChartCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`chart.js\`: missing or invalid \`${missing}\` capability.`)}let chartJs,registered=!1;async function loadChartModule(importChart=()=>import("chart.js")){try{return resolveChartJsModule(await importChart())}catch(err){return console.warn("<lr-chart> needs the optional peer dependency `chart.js` \u2014 install it with `pnpm add chart.js`:",err),null}}function registerCore(mod){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.LogarithmicScale,mod.Filler,mod.Tooltip,mod.Legend),registered=!0)}async function loadAndRegisterChartModule(importChart=()=>import("chart.js"),register=registerCore){const mod=await loadChartModule(importChart);if(!mod)return null;try{return register(mod),mod}catch(error){return console.warn("<lr-chart> could not register the optional `chart.js` peer:",error),null}}function loadChartJs(){return chartJs||(chartJs=loadAndRegisterChartModule()),chartJs}export{loadAndRegisterChartModule,loadChartJs,loadChartModule};
+import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const CHART_REGISTERABLE_KEYS=["LineController","BarController","ScatterController","DoughnutController","PieController","RadarController","PolarAreaController","BubbleController","LineElement","PointElement","BarElement","ArcElement","LinearScale","CategoryScale","RadialLinearScale","LogarithmicScale","Filler","Tooltip","Legend"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingChartCapability(candidate){if(!isObjectLike(candidate))return"module namespace";if(!isConstructor(candidate.Chart))return"Chart";if(typeof candidate.Chart.register!="function")return"Chart.register";if(!isObjectLike(candidate.defaults))return"defaults";for(const key of CHART_REGISTERABLE_KEYS)if(!isObjectLike(candidate[key]))return key}function isChartJsModule(candidate){return missingChartCapability(candidate)===void 0}function resolveChartJsModule(value){const module=resolveOptionalPeerCapability(value,isChartJsModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingChartCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`chart.js\`: missing or invalid \`${missing}\` capability.`)}let chartJs,registered=!1;async function loadChartModule(importChart=()=>import("chart.js")){try{return resolveChartJsModule(await importChart())}catch(err){return console.warn("<lr-chart> needs the optional peer dependency `chart.js` — install it with `pnpm add chart.js`:",err),null}}function registerCore(mod){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.LogarithmicScale,mod.Filler,mod.Tooltip,mod.Legend),registered=!0)}async function loadAndRegisterChartModule(importChart=()=>import("chart.js"),register=registerCore){const mod=await loadChartModule(importChart);if(!mod)return null;try{return register(mod),mod}catch(error){return console.warn("<lr-chart> could not register the optional `chart.js` peer:",error),null}}function loadChartJs(){return chartJs||(chartJs=loadAndRegisterChartModule()),chartJs}export{loadAndRegisterChartModule,loadChartJs,loadChartModule};

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

@@ -1 +1 @@
-import{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{loadChartJs,loadChartModule}from"./chart-core-loader.js";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isChartPlugin(candidate){return isObjectLike(candidate)&&typeof candidate.id=="string"&&candidate.id.trim().length>0}function resolveChartPlugin(value,packageName){const plugin=resolveOptionalPeerCapability(value,isChartPlugin);if(plugin)return plugin;throw new Error(`Invalid optional peer \`${packageName}\`: expected a plugin with a non-empty string \`id\`.`)}let zoomResultLoad,dataLabelsResultLoad,annotationResultLoad,zoomLoad,dataLabelsLoad;async function loadChartAndZoom(importChart=()=>import("chart.js"),importZoom=()=>import("chartjs-plugin-zoom"),needsZoom=!1){const mod=await loadChartModule(importChart);if(!mod)return null;if(!needsZoom)return{mod,zoomPlugin:void 0};let zoomPlugin;try{zoomPlugin=resolveChartPlugin(await importZoom(),"chartjs-plugin-zoom")}catch(err){console.warn("<lr-chart> zoom support needs the optional peer dependency `chartjs-plugin-zoom` \u2014 charts still render without it, but the `zoom` attribute has no effect until it is installed with `pnpm add chartjs-plugin-zoom`:",err)}return{mod,zoomPlugin}}async function loadChartAndRegisterZoom(loadChart,importZoom=()=>import("chartjs-plugin-zoom")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const zoomPlugin=(await loadChartAndZoom(()=>Promise.resolve(mod),importZoom,!0))?.zoomPlugin;if(!zoomPlugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(zoomPlugin)}catch(err){return console.warn("<lr-chart> zoom support could not be enabled \u2014 charts still render without it, but the `zoom` attribute has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin:zoomPlugin}}function loadChartJsWithZoomResult(importZoom=()=>import("chartjs-plugin-zoom")){return zoomResultLoad??=loadChartAndRegisterZoom(loadChartJs,importZoom)}function loadChartJsWithZoom(importZoom=()=>import("chartjs-plugin-zoom")){return zoomLoad??=loadChartJsWithZoomResult(importZoom).then(result=>result.kind==="core-unavailable"?null:result.mod)}async function loadDataLabelsPlugin(importDataLabels=()=>import("chartjs-plugin-datalabels")){try{return resolveChartPlugin(await importDataLabels(),"chartjs-plugin-datalabels")}catch(err){console.warn("<lr-chart> data labels need the optional peer dependency `chartjs-plugin-datalabels` \u2014 charts still render without it, but the `data-labels`/`stack-totals` attributes have no effect until it is installed with `pnpm add chartjs-plugin-datalabels`:",err);return}}async function loadChartAndDataLabels(loadChart,importDataLabels=()=>import("chartjs-plugin-datalabels")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadDataLabelsPlugin(importDataLabels);return plugin?{kind:"available",mod,plugin}:{kind:"feature-unavailable",mod}}function loadChartJsWithDataLabelsResult(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsResultLoad??=loadChartAndDataLabels(loadChartJs,importDataLabels)}function loadChartJsWithDataLabels(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsLoad??=loadChartJsWithDataLabelsResult(importDataLabels).then(result=>result.kind==="core-unavailable"?null:{mod:result.mod,plugin:result.kind==="available"?result.plugin:void 0})}async function loadAnnotationPlugin(importAnnotation=()=>import("chartjs-plugin-annotation")){try{return resolveChartPlugin(await importAnnotation(),"chartjs-plugin-annotation")}catch(err){console.warn("<lr-chart> annotations need the optional peer dependency `chartjs-plugin-annotation` \u2014 charts still render without it, but the `annotations` property has no effect until it is installed with `pnpm add chartjs-plugin-annotation`:",err);return}}async function loadChartAndAnnotation(loadChart,importAnnotation=()=>import("chartjs-plugin-annotation")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadAnnotationPlugin(importAnnotation);if(!plugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(plugin)}catch(err){return console.warn("<lr-chart> annotations could not be enabled \u2014 charts still render without them, but the `annotations` property has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin}}function loadChartJsWithAnnotationResult(importAnnotation=()=>import("chartjs-plugin-annotation")){return annotationResultLoad??=loadChartAndAnnotation(loadChartJs,importAnnotation)}export{loadAnnotationPlugin,loadChartAndAnnotation,loadChartAndDataLabels,loadChartAndRegisterZoom,loadChartAndZoom,loadChartJsWithAnnotationResult,loadChartJsWithDataLabels,loadChartJsWithDataLabelsResult,loadChartJsWithZoom,loadChartJsWithZoomResult,loadDataLabelsPlugin};
+import{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{loadChartJs,loadChartModule}from"./chart-core-loader.js";import{notifyAnnotationPluginRegistered}from"../../../internal/chart-annotation-registration.js";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isChartPlugin(candidate){return isObjectLike(candidate)&&typeof candidate.id=="string"&&candidate.id.trim().length>0}function resolveChartPlugin(value,packageName){const plugin=resolveOptionalPeerCapability(value,isChartPlugin);if(plugin)return plugin;throw new Error(`Invalid optional peer \`${packageName}\`: expected a plugin with a non-empty string \`id\`.`)}let zoomResultLoad,dataLabelsResultLoad,annotationResultLoad,zoomLoad,dataLabelsLoad;async function loadChartAndZoom(importChart=()=>import("chart.js"),importZoom=()=>import("chartjs-plugin-zoom"),needsZoom=!1){const mod=await loadChartModule(importChart);if(!mod)return null;if(!needsZoom)return{mod,zoomPlugin:void 0};let zoomPlugin;try{zoomPlugin=resolveChartPlugin(await importZoom(),"chartjs-plugin-zoom")}catch(err){console.warn("<lr-chart> zoom support needs the optional peer dependency `chartjs-plugin-zoom` — charts still render without it, but the `zoom` attribute has no effect until it is installed with `pnpm add chartjs-plugin-zoom`:",err)}return{mod,zoomPlugin}}async function loadChartAndRegisterZoom(loadChart,importZoom=()=>import("chartjs-plugin-zoom")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const zoomPlugin=(await loadChartAndZoom(()=>Promise.resolve(mod),importZoom,!0))?.zoomPlugin;if(!zoomPlugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(zoomPlugin)}catch(err){return console.warn("<lr-chart> zoom support could not be enabled — charts still render without it, but the `zoom` attribute has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin:zoomPlugin}}function loadChartJsWithZoomResult(importZoom=()=>import("chartjs-plugin-zoom")){return zoomResultLoad??=loadChartAndRegisterZoom(loadChartJs,importZoom)}function loadChartJsWithZoom(importZoom=()=>import("chartjs-plugin-zoom")){return zoomLoad??=loadChartJsWithZoomResult(importZoom).then(result=>result.kind==="core-unavailable"?null:result.mod)}async function loadDataLabelsPlugin(importDataLabels=()=>import("chartjs-plugin-datalabels")){try{return resolveChartPlugin(await importDataLabels(),"chartjs-plugin-datalabels")}catch(err){console.warn("<lr-chart> data labels need the optional peer dependency `chartjs-plugin-datalabels` — charts still render without it, but the `data-labels`/`stack-totals` attributes have no effect until it is installed with `pnpm add chartjs-plugin-datalabels`:",err);return}}async function loadChartAndDataLabels(loadChart,importDataLabels=()=>import("chartjs-plugin-datalabels")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadDataLabelsPlugin(importDataLabels);return plugin?{kind:"available",mod,plugin}:{kind:"feature-unavailable",mod}}function loadChartJsWithDataLabelsResult(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsResultLoad??=loadChartAndDataLabels(loadChartJs,importDataLabels)}function loadChartJsWithDataLabels(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsLoad??=loadChartJsWithDataLabelsResult(importDataLabels).then(result=>result.kind==="core-unavailable"?null:{mod:result.mod,plugin:result.kind==="available"?result.plugin:void 0})}async function loadAnnotationPlugin(importAnnotation=()=>import("chartjs-plugin-annotation")){try{return resolveChartPlugin(await importAnnotation(),"chartjs-plugin-annotation")}catch(err){console.warn("<lr-chart> annotations need the optional peer dependency `chartjs-plugin-annotation` — charts still render without it, but the `annotations` property has no effect until it is installed with `pnpm add chartjs-plugin-annotation`:",err);return}}async function loadChartAndAnnotation(loadChart,importAnnotation=()=>import("chartjs-plugin-annotation")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadAnnotationPlugin(importAnnotation);if(!plugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(plugin)}catch(err){return console.warn("<lr-chart> annotations could not be enabled — charts still render without them, but the `annotations` property has no effect:",err),{kind:"feature-unavailable",mod}}return notifyAnnotationPluginRegistered(),{kind:"available",mod,plugin}}function loadChartJsWithAnnotationResult(importAnnotation=()=>import("chartjs-plugin-annotation")){return annotationResultLoad??=loadChartAndAnnotation(loadChartJs,importAnnotation)}export{loadAnnotationPlugin,loadChartAndAnnotation,loadChartAndDataLabels,loadChartAndRegisterZoom,loadChartAndZoom,loadChartJsWithAnnotationResult,loadChartJsWithDataLabels,loadChartJsWithDataLabelsResult,loadChartJsWithZoom,loadChartJsWithZoomResult,loadDataLabelsPlugin};

package/dist/components/charts/chart/chart-preload.d.ts

@@ -1,4 +1,4 @@
-export interface LyraChartPreloadOptions{readonly zoom?:boolean;readonly dataLabels?:boolean;readonly boxPlot?:boolean;}export interface LyraChartPreloadResult{readonly core:boolean;readonly zoom?:boolean;readonly dataLabels?:boolean;readonly boxPlot?:boolean;}
+export interface LyraChartPreloadOptions{readonly zoom?:boolean;readonly dataLabels?:boolean;readonly annotations?:boolean;readonly boxPlot?:boolean;}export interface LyraChartPreloadResult{readonly core:boolean;readonly zoom?:boolean;readonly dataLabels?:boolean;readonly annotations?:boolean;readonly boxPlot?:boolean;}
 /**
 * Preloads the chart peer capabilities a route is about to use. Core Chart.js is always loaded;
 * optional feature peers are requested only when their corresponding flag is true. Every loader

package/dist/components/charts/chart/chart-preload.js

@@ -1 +1 @@
-import{loadChartJs}from"./chart-core-loader.js";import{loadChartJsWithDataLabelsResult,loadChartJsWithZoomResult}from"./chart-feature-loader.js";let boxPlotPreload;async function preloadBoxPlot(){const{loadBoxPlotAndRegister}=await import("./box-plot.class.js");return await loadBoxPlotAndRegister()!==null}async function preloadCharts(options={}){const[core,zoom,dataLabels,boxPlot]=await Promise.all([loadChartJs(),options.zoom?loadChartJsWithZoomResult():void 0,options.dataLabels?loadChartJsWithDataLabelsResult():void 0,options.boxPlot?boxPlotPreload??=preloadBoxPlot():void 0]);return{core:core!==null,...options.zoom?{zoom:zoom?.kind==="available"}:{},...options.dataLabels?{dataLabels:dataLabels?.kind==="available"}:{},...options.boxPlot?{boxPlot}:{}}}export{preloadCharts};
+import{loadChartJs}from"./chart-core-loader.js";import{loadChartJsWithAnnotationResult,loadChartJsWithDataLabelsResult,loadChartJsWithZoomResult}from"./chart-feature-loader.js";let boxPlotPreload;async function preloadBoxPlot(){const{loadBoxPlotAndRegister}=await import("./box-plot.class.js");return await loadBoxPlotAndRegister()!==null}async function preloadCharts(options={}){const[core,zoom,dataLabels,annotations,boxPlot]=await Promise.all([loadChartJs(),options.zoom?loadChartJsWithZoomResult():void 0,options.dataLabels?loadChartJsWithDataLabelsResult():void 0,options.annotations?loadChartJsWithAnnotationResult():void 0,options.boxPlot?boxPlotPreload??=preloadBoxPlot():void 0]);return{core:core!==null,...options.zoom?{zoom:zoom?.kind==="available"}:{},...options.dataLabels?{dataLabels:dataLabels?.kind==="available"}:{},...options.annotations?{annotations:annotations?.kind==="available"}:{},...options.boxPlot?{boxPlot}:{}}}export{preloadCharts};

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

@@ -29,7 +29,9 @@ export type LyraChartScaleType='linear'|'logarithmic';
 * numbers, is dropped rather than handed to Chart.js, where it would silently render nothing or
 * throw. `axis` defaults to `'y'`, the value axis for the common threshold case.
 */
-export interface LyraChartAnnotation{readonly axis?:LyraChartIndexAxis;readonly value?:number;readonly from?:number;readonly to?:number;readonly label?:string;readonly tone?:LyraVariant;}export type LyraChartLayoutPosition='left'|'top'|'right'|'bottom'|'center'|'chartArea'|{[scaleId:string]:number;};export type LyraChartLegendPosition=LyraChartLayoutPosition|'start'|'end'|'auto';export type LyraChartValueFormatterContext='tick'|'tooltip'|'legend'|'table';export type LyraChartValueFormatter=(value:number,context:LyraChartValueFormatterContext)=>string;export type LyraChartFormatSurface=LyraChartValueFormatterContext|'visual'|'spoken'|'export';export interface LyraChartFormatterContext{readonly value:number;readonly surface:LyraChartFormatSurface;readonly datasetIndex?:number;readonly index?:number;readonly label?:string;readonly seriesLabel?:string;readonly statistic?:'min'|'q1'|'median'|'q3'|'max'|'total';}export type LyraChartFormatter=(context:LyraChartFormatterContext)=>string;export type LyraChartExportFormat='csv'|'png';export interface LyraChartArea{readonly top:number;readonly left:number;readonly right:number;readonly bottom:number;readonly width:number;readonly height:number;}
+export interface LyraChartAnnotation{readonly axis?:LyraChartIndexAxis;readonly value?:number;readonly from?:number;readonly to?:number;readonly label?:string;readonly tone?:LyraVariant;}export type LyraChartLayoutPosition='left'|'top'|'right'|'bottom'|'center'|'chartArea'|{[scaleId:string]:number;};export type LyraChartLegendPosition=LyraChartLayoutPosition|'start'|'end'|'auto';export type LyraChartValueFormatterContext='tick'|'tooltip'|'legend'|'table';export type LyraChartValueFormatter=(value:number,context:LyraChartValueFormatterContext)=>string;export type LyraChartFormatSurface=LyraChartValueFormatterContext|'visual'|'spoken'|'export';
+/** Identifies which numeric component of a structured datum the formatter receives. */
+export type LyraChartStatistic='x'|'y'|'r'|'min'|'q1'|'median'|'q3'|'max'|'total';export interface LyraChartFormatterContext{readonly value:number;readonly surface:LyraChartFormatSurface;readonly datasetIndex?:number;readonly index?:number;readonly label?:string;readonly seriesLabel?:string;readonly statistic?:LyraChartStatistic;}export type LyraChartFormatter=(context:LyraChartFormatterContext)=>string;export type LyraChartExportFormat='csv'|'png';export interface LyraChartArea{readonly top:number;readonly left:number;readonly right:number;readonly bottom:number;readonly width:number;readonly height:number;}
 /** A Chart.js-compatible plugin shape without making `chart.js` a type dependency for consumers. */
 export interface LyraChartPlugin{readonly id:string;}
 /** Dataset configuration accepted by the raw `config` passthrough. */
@@ -139,7 +141,9 @@ export interface LyraChartDatumActivateDetail<TKind extends LyraChartDatumKind=L
 * @cssprop [--lr-chart-tooltip-text=var(--lr-color-text)] - Tooltip text color. Resolved via
 *   `getComputedStyle` on every draw.
 * @cssprop [--lr-chart-canvas-hover-outline-width=var(--lr-border-width-thin)] - Width of the
-*   `[part='canvas']` hover-state outline (its color is `--lr-chart-grid-color`, above).
+*   `[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.
 * @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 every series collapses to
 *   one system color and the stripe/crosshatch pattern becomes the only channel keeping series
@@ -172,7 +176,9 @@ export interface LyraChartDatumActivateDetail<TKind extends LyraChartDatumKind=L
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraChart extends LyraElement<LyraChartEventMap>{protected static readonly immutableEventDetails:readonly string[];static styles:import("lit").CSSResultGroup[];constructor();type:LyraChartType;labels:string[];private _datasets;private datasetsSource;
+export declare class LyraChart extends LyraElement<LyraChartEventMap>{protected static readonly immutableEventDetails:readonly string[];static styles:import("lit").CSSResultGroup[];constructor();type:LyraChartType;labels:string[];private labelsSnapshot?;private annotationsSnapshot?;private hiddenDatasetsSnapshot?;
+/** Public collection identities remain observable; internal computation uses these one-read copies. */
+private canonicalLabels;private canonicalAnnotations;private canonicalHiddenDatasets;private _datasets;private datasetsSource;
 /** Simplified chart series. Non-record entries are dropped while valid sibling series remain. */
 get datasets():readonly LyraChartSeries[];set datasets(value:readonly LyraChartSeries[]);
 /**
@@ -235,9 +241,10 @@ annotations:readonly LyraChartAnnotation[];
 /** Maximum value-axis bound. Non-finite values are ignored. */
 max:number|null;
 /** Minimum value-axis bound. Non-finite values are ignored. */
-min:number|null;
-/** Chart.js plugins attached to this chart instance. */
-plugins:LyraChartPlugin[];
+min:number|null;private _plugins;private pluginsSource;
+/** Chart.js plugins attached to this chart instance. Valid plugins retain their opaque identity.
+* @default [] */
+get plugins():readonly LyraChartPlugin[];set plugins(value:readonly LyraChartPlugin[]);
 /**
 * Formats numeric (value-axis) ticks, tooltip values, legend values, and generated accessible
 * table cells from one callback.
@@ -316,7 +323,7 @@ stackTotals:boolean;
 * model for canvas rendering, append mutation, CSV export, the accessible name/summary, keyboard
 * navigation/events, the DOM legend, and the fallback data table.
 */
-config?:LyraChartConfiguration;private slottedConfig?;
+private _config?;private configSource;get config():LyraChartConfiguration|undefined;set config(value:LyraChartConfiguration|undefined);private slottedConfig?;
 /** Subclass hook for removing raw peer keys that contradict a derived public contract. */
 protected normalizeEffectiveConfig(config:LyraChartConfiguration|undefined):LyraChartConfiguration|undefined;private effectiveConfig;private onConfigSlotChange;
 /**
@@ -325,6 +332,10 @@ protected normalizeEffectiveConfig(config:LyraChartConfiguration|undefined):Lyra
 * while an omitted member falls back to the simplified property surface.
 */
 private effectiveData;
+/** Validates peer callback indexes against the visual data sent to Chart.js. */
+private callbackDatasetIndex;
+/** Validates a peer callback's visual row as well as its visual dataset. */
+private callbackIndexes;
 /** The public controlled snapshot when supplied, otherwise the effective configuration default. */
 private effectiveHiddenDatasetIndexes;
 /** Applies the public controlled state to the live Chart.js metadata after any data replacement. */
@@ -348,7 +359,7 @@ private loading;
 * True once the optional `chart.js` peer failed to load (not installed) -- `render()` fails
 * closed into a visible `part="error"` and announces through the document-level sink.
 */
-private loadFailed;private loadLibrary;private loadZoomFeature;private loadDataLabelsFeature;private loadAnnotationFeature;private loadGeneration;private zoomLoadGeneration;private dataLabelsLoadGeneration;private annotationLoadGeneration;private zoomFeatureState;private dataLabelsFeatureState;private annotationFeatureState;private dataLabelsPlugin?;private annotationPlugin?;private zoomed;private visible;private intersectionObserver?;private intersectionGeneration;private reducedMotionQuery?;private reducedMotionWindow?;private canvasEl?;
+private loadFailed;private loadLibrary;private loadZoomFeature;private loadDataLabelsFeature;private loadAnnotationFeature;private loadGeneration;private zoomLoadGeneration;private dataLabelsLoadGeneration;private annotationLoadGeneration;private zoomFeatureState;private dataLabelsFeatureState;private annotationFeatureState;private dataLabelsPlugin?;private annotationPlugin?;private stopAnnotationRegistrationWatch?;private zoomed;private visible;private intersectionObserver?;private intersectionGeneration;private reducedMotionQuery?;private reducedMotionWindow?;private canvasEl?;
 /** The current Chart.js instance. Read it only while the element is connected and loaded. */
 chart?:LyraChartInstance;private chartJsModule?;private resizeObserver?;private resizeDrawFrame?;private resizeDrawFrameOwner?;private lastObservedInlineSize?;private autoLegendPosition;private resolvedChartArea?;private chartAreaUpdateQueued;private builtType?;private builtPlugins;private visualDatasetSourceIndexes?;private visualRowSourceIndexes?;private suppressZoomComplete;private descriptionId;private keyboardDatumIndex;private keyboardDatumAnnouncement;
 /** Shared document-level regions that carry announcements. The visually hidden datum copy is an
@@ -375,7 +386,14 @@ private applyDataLabelsPlugin;private get zoomFeatureAvailable();private feature
 * through `chart.update()`. Force reconstruction so the next `draw()` takes the `new Chart()`
 * branch that reads `config.plugins`.
 */
-private applyAnnotationPlugin;private requestDataLabelsFeature;
+private applyAnnotationPlugin;
+/**
+* `chartjs-plugin-annotation` creates its per-chart state only in `beforeInit`, so once it is
+* registered globally every chart constructed earlier throws inside the plugin on its next
+* update. A chart that requested the feature rebuilds through `applyAnnotationPlugin()`; every
+* other live chart rebuilds here so a sibling's annotations cannot break it.
+*/
+private rebuildAfterAnnotationRegistration;private requestDataLabelsFeature;
 /**
 * Resets a stale `zoomed` flag before the render pass that's about to call
 * `draw()`: a `type` (or `config.type` override) change that lands on a