@aceshooting/lyra-ui 28.1.0 → 28.1.2

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

@@ -1,5 +1,15 @@
-import{__decorate}from"tslib";import{collectionSupport,snapshotPublicCollection}from"../../../internal/collection-snapshot.js";import{boundChartSeriesValues}from"./chart-series-bounds.js";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{createReducedMotionWatch}from"./chart-surface-shared.js";import{loadChartJs}from"./chart-core-loader.js";import{loadBoxPlotAndRegister}from"./box-plot-loader.js";import{loadBoxPlotAndRegister as loadBoxPlotAndRegister2}from"./box-plot-loader.js";import{onAnnotationPluginRegistered}from"../../../internal/chart-annotation-registration.js";import{styles}from"./box-plot.styles.js";import{chartSurfaceStyles}from"./chart-surface.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{getListFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{formatChartValue}from"./chart-number-format.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{showChartActiveDatum}from"./chart-active-datum.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{FALLBACK_GRID_COLOR,FALLBACK_LEGEND_COLOR,FALLBACK_TICK_COLOR,FALLBACK_TICK_FONT_SIZE,FALLBACK_TOOLTIP_BG,FALLBACK_TOOLTIP_TEXT}from"./chart-colors.js";import{ChartTokenCache}from"./chart-token-cache.js";import{chartDataTableVisible,hasSlottedChartDataTable,hasArraySeriesData}from"./chart-data-table.js";import{createForcedColorPattern,forcedColorEncoding,forcedColorsActive}from"./chart-forced-colors.js";import{specialistTokens}from"../../../internal/specialist-host-tokens.styles.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{legendVisibilityDetail,normalizeHiddenDatasets}from"./chart-legend-visibility.js";import{sampleChartTableIndexes}from"./chart-table-sampling.js";import{canvasSentence,isolateCanvasLabel,isolateScaleTickLabels,tooltipIsolationHook,bidiStyles,isolateHtml}from"./chart-bidi.js";import{escapeCsvField}from"../../utility/export-button/csv.js";import{chartChromeLegendPlacement,normalizeChartChromeLegendPosition}from"./chart-chrome.js";import{CSS_NUMBER_SOURCE}from"../../../internal/css-number.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_chartPlotSampled,LYRA_DEFAULT_chartPointLabel,LYRA_DEFAULT_chartRenderUnavailable,LYRA_DEFAULT_chartSeriesLabel,LYRA_DEFAULT_chartSeriesNoData,LYRA_DEFAULT_chartSummarySeparator,LYRA_DEFAULT_chartTrendDecreasing,LYRA_DEFAULT_chartTrendFlat,LYRA_DEFAULT_chartTrendIncreasing,LYRA_DEFAULT_liteChartMarkSummary}from"../../../internal/default-strings/charts.generated.js";import{LYRA_DEFAULT_chartValueLabel,LYRA_DEFAULT_loading}from"../../../internal/default-strings/shared.generated.js";const DIRECT_PIXEL_NUMBER=new RegExp(`^(${CSS_NUMBER_SOURCE})(?:px)?$`,"i");function isBoxPlotSeries(value){return hasArraySeriesData(value)}function normalizeBoxPlotSeries(value){try{return Object.freeze(Array.isArray(value)?value.filter(isBoxPlotSeries):[])}catch{return Object.freeze([])}}function summaryOf(point){return{min:point.min,q1:point.q1,median:point.median,q3:point.q3,max:point.max}}let boxPlotPlugin;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,chartPlotSampled:LYRA_DEFAULT_chartPlotSampled,chartPointLabel:LYRA_DEFAULT_chartPointLabel,chartRenderUnavailable:LYRA_DEFAULT_chartRenderUnavailable,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.collectionSupport=collectionSupport}static{this.ownedCollectionProperties=Object.freeze(["labels","hiddenDatasets"])}static{this.styles=[LyraElement.styles,specialistTokens,chartSurfaceStyles,styles,srOnly,bidiStyles]}static{this.immutableEventDetails=Object.freeze(["lr-legend-visibility-change-request","lr-legend-visibility-change"])}constructor(){super(),this.canvasTokens=new ChartTokenCache(this),this.labels=[],this._datasets=Object.freeze([]),this.datasetsSource=this._datasets,this.withLegend=!1,this.legendPosition="bottom",this.height="280px",this.xLabel="",this.yLabel="",this.withoutZeroBaseline=!1,this.label=null,this.description=null,this.withDataTable=!1,this.dataTableToggle=!1,this.dataTableExpandedOverride=null,this.dataTableId=nextId("box-plot-data-table"),this.loading=!0,this.loadFailed=!1,this.canvasUnavailable=!1,this.visible=!0,this.keyboardDatumIndex=0,this.keyboardDatumAnnouncement="",this.intersectionGeneration=0,this.reducedMotionWatch=createReducedMotionWatch(this,()=>this.drawIfVisible()),this.loadGeneration=0,this.descriptionId=nextId("box-plot-description"),this.announcements=new AnnouncementSinkController(this),this.lastDataTruncationAnnouncement="",this.isMounting=!0,this.tooltipIsolationPlugin={id:"lyra-box-plot-bidi",beforeTooltipDraw:tooltipIsolationHook(()=>this.effectiveDirection)},this.keyboardBoxShown=!1,this.onCanvasBlur=()=>{this.showKeyboardBox(void 0)},new ThemeWatcher(this,()=>{this.chart&&this.canvasTokens.hasThemeChanged()&&this.refreshTheme()})}get datasets(){return this._datasets}set datasets(value){if(Object.is(value,this.datasetsSource)||Object.is(value,this._datasets))return;const previous=this._datasets;this.datasetsSource=value,this._datasets=normalizeBoxPlotSeries(snapshotPublicCollection(boundChartSeriesValues(value,6)??value,this.ownerDocument?.defaultView)),this.requestUpdate("datasets",previous)}get dataTableVisible(){return chartDataTableVisible(this.withDataTable,this.dataTableToggle,this.dataTableExpandedOverride)}toggleDataTable(){this.dataTableExpandedOverride=!this.dataTableVisible}connectedCallback(){super.connectedCallback(),this.stopAnnotationRegistrationWatch?.(),this.stopAnnotationRegistrationWatch=onAnnotationPluginRegistered(()=>this.rebuildAfterAnnotationRegistration()),this.visible=!this.ownerWindow?.IntersectionObserver,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.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(){this.canvasTokens.clear(),super.adoptedCallback(),this.announcements.adopted(),this.disarmReducedMotionWatcher(),this.armReducedMotionWatcher()}armReducedMotionWatcher(){this.reducedMotionWatch.arm()}disarmReducedMotionWatcher(){this.reducedMotionWatch.disarm()}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.announcements.announcePolite(this.keyboardDatumAnnouncement),changed.has("loadFailed")&&changed.get("loadFailed")!==void 0&&this.loadFailed&&this.announcements.announceAssertive(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.announcements.announcePolite(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","withLegend","legendPosition","height","xLabel","yLabel","withoutZeroBaseline","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 cs=this.canvasTokens.sync()??this.style;return{grid:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-grid-color").trim()||cs.getPropertyValue("--_lr-chart-grid-color").trim(),FALLBACK_GRID_COLOR),tick:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-tick-color").trim()||cs.getPropertyValue("--_lr-chart-tick-color").trim(),FALLBACK_TICK_COLOR),tickFontSize:this.styleNumber("--lr-chart-tick-font-size",FALLBACK_TICK_FONT_SIZE,"--_lr-chart-tick-font-size"),legend:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-legend-color").trim()||cs.getPropertyValue("--_lr-chart-legend-color").trim(),FALLBACK_LEGEND_COLOR),tooltipBg:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-tooltip-bg").trim()||cs.getPropertyValue("--_lr-chart-tooltip-bg").trim(),FALLBACK_TOOLTIP_BG),tooltipText:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-tooltip-color").trim()||cs.getPropertyValue("--_lr-chart-tooltip-color").trim(),FALLBACK_TOOLTIP_TEXT)}}seriesColor(index,palette=this.canvasTokens.palette()){const fallback=palette[index%palette.length]??"transparent",series=this.datasets[index];return series?.color?this.canvasTokens.resolve(series.color,fallback):fallback}seriesBorderColor(index,palette=this.canvasTokens.palette()){const base=this.seriesColor(index,palette);return this.styleColor(`--lr-box-plot-border-color-${index%8+1}`,base)}seriesFillColor(index,palette=this.canvasTokens.palette()){const base=this.seriesColor(index,palette);return this.styleColor(`--lr-box-plot-fill-color-${index%8+1}`,base)}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?this.canvasTokens.resolve(value,fallback):fallback}styleNumber(name,fallback,fallbackToken){const view=this.ownerWindow,cs=view?view.getComputedStyle(this):this.style,value=cs.getPropertyValue(name).trim()||(fallbackToken?cs.getPropertyValue(fallbackToken).trim():""),direct=DIRECT_PIXEL_NUMBER.exec(value);if(direct){const resolved2=Number.parseFloat(direct[1]);if(Number.isFinite(resolved2)&&resolved2>=0)return resolved2}if(!value||!view)return fallback;const resolved=this.canvasTokens.length(value,()=>{const probe=this.ownerDocument.createElement("span");probe.hidden=!0,probe.setAttribute("aria-hidden","true"),probe.style.inlineSize=value,(this.shadowRoot??this).append(probe);try{return Number.parseFloat(view.getComputedStyle(probe).inlineSize)}finally{probe.remove()}});return Number.isFinite(resolved)&&resolved>=0?resolved:fallback}buildConfig(){const theme=this.themeColors(),palette=this.canvasTokens.palette(),sample=this.dataTableSample(),direction=this.effectiveDirection==="rtl"?"rtl":"ltr",afterTickToLabelConversion=scale=>isolateScaleTickLabels(scale,direction);return{type:"boxplot",data:{labels:sample.rowIndexes.map(index=>this.labels[index]??""),datasets:sample.seriesIndexes.map(sourceIndex=>{const s=this.datasets[sourceIndex],fillColor=this.seriesFillColor(sourceIndex,palette),borderColor=this.seriesBorderColor(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,fillColor),borderColor}})},options:{locale:this.effectiveLocale,responsive:!0,maintainAspectRatio:!1,animation:prefersReducedMotion(this)?!1:void 0,onClick:(event,_elements,chart)=>this.handlePointClick(event,chart),elements:{boxandwhiskers:{borderWidth:this.styleNumber("--lr-box-plot-border-width",1,"--lr-border-width-thin"),itemRadius:this.styleNumber("--lr-box-plot-item-radius",0)}},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 datasetIndex=Number.isInteger(context.datasetIndex)?sample.seriesIndexes[context.datasetIndex]:void 0,index=Number.isInteger(context.dataIndex)?sample.rowIndexes[context.dataIndex]:void 0,lines=this.boxStatistics(point).map(([statistic,name,value])=>canvasSentence(sentenceValue=>this.localize("chartValueLabel",void 0,{label:name,value:sentenceValue}),this.formatValue(value,"tooltip",{...datasetIndex===void 0?{}:{datasetIndex},...index===void 0?{}:{index,label:this.labels[index]||void 0},...datasetIndex===void 0?{}:{seriesLabel:this.datasets[datasetIndex]?.label},statistic,axis:"y"}))),label=String(context.dataset?.label??"");return label?[label,...lines]:lines}}}:{}}},scales:{x:{afterTickToLabelConversion,title:{display:!!this.xLabel,text:isolateCanvasLabel(this.xLabel,direction),color:theme.tick},ticks:{color:theme.tick,font:{size:theme.tickFontSize}},grid:{color:theme.grid}},y:{afterTickToLabelConversion,position:this.effectiveDirection==="rtl"?"right":"left",beginAtZero:!this.withoutZeroBaseline,title:{display:!!this.yLabel,text:isolateCanvasLabel(this.yLabel,direction),color:theme.tick},ticks:{color:theme.tick,font:{size:theme.tickFontSize},...this.formatter||this.valueFormatter?{callback:value=>this.formatValue(Number(value),"tick",{axis:"y"})}:{}},grid:{color:theme.grid}}}}}}draw(){if(!this.chartJsModule||!this.canvasEl)return;if(!this.chart&&!this.canvasEl.getContext("2d")){this.setCanvasUnavailable(!0);return}this.canvasTokens.beginThemeDraw();const config=this.buildConfig();if(this.chart){this.chart.data=config.data,this.chart.options=config.options??{},this.applyDatasetVisibility(),this.chart.update("none"),this.canvasTokens.rememberTheme();return}const candidate=new this.chartJsModule.Chart(this.canvasEl,{...config,plugins:[this.tooltipIsolationPlugin]}),context=candidate;if(context.canvas===null||context.ctx===null){candidate.destroy(),this.setCanvasUnavailable(!0);return}this.chart=candidate,this.setCanvasUnavailable(!1),this.hiddenDatasets!==void 0&&(this.applyDatasetVisibility(),this.chart.update("none")),this.canvasTokens.rememberTheme()}setCanvasUnavailable(unavailable){this.canvasUnavailable!==unavailable&&(this.canvasUnavailable=unavailable,queueMicrotask(()=>{this.isConnected&&this.requestUpdate()}),unavailable&&this.announcements.announceAssertive(this.localize("chartRenderUnavailable")))}drawIfVisible(){!this.isConnected||!this.visible||this.draw()}rebuildAfterAnnotationRegistration(){this.chart&&(this.chart.destroy(),this.chart=void 0,this.drawIfVisible())}refreshTheme(){this.canvasTokens.clear(),this.drawIfVisible(),this.withLegend&&this.requestUpdate()}seriesDisplayLabel(series){return series.label||this.localize("chartSeriesLabel")}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)??formatChartValue(value,this.effectiveLocale)}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,axis:"y"};rows.push([this.labels[index]??"",this.seriesDisplayLabel(series),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:this.seriesDisplayLabel(series)});const trend=last>first?this.localize("chartTrendIncreasing"):last<first?this.localize("chartTrendDecreasing"):this.localize("chartTrendFlat");return this.localize("boxPlotSeriesSummary",void 0,{label:this.seriesDisplayLabel(series),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",axis:"y"}),max:this.formatValue(max,"spoken",{datasetIndex:index,index:maxIndex,label:this.labels[maxIndex]||void 0,seriesLabel:series.label,statistic:"median",axis:"y"}),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}boxStatistics(point){return[["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]]}boxAnnouncement(datum,position,total){const numberFormat=getNumberFormat(this.effectiveLocale),point=datum.value,summary=(point?this.boxStatistics(point):[]).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,axis:"y"})})).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-activate",{...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})}showKeyboardBox(datum){if(!this.chart||!datum&&!this.keyboardBoxShown)return;const sample=this.dataTableSample();this.keyboardBoxShown=showChartActiveDatum(this.chart,datum&&{datasetIndex:sample.seriesIndexes.indexOf(datum.datasetIndex),index:sample.rowIndexes.indexOf(datum.index)})}onCanvasFocus(event){const datums=this.boxDatums();datums.length&&(this.keyboardDatumIndex=Math.min(this.keyboardDatumIndex,datums.length-1),isKeyboardFocusEvent(event)&&this.showKeyboardBox(datums[this.keyboardDatumIndex]),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.showKeyboardBox(datums[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(){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.hasCustomDataTable()?this.localize("chartPlotSampled"):this.localize("chartDataSampled"):""}renderDataTable(){const numberFormat=getNumberFormat(this.effectiveLocale),direction=this.effectiveDirection==="rtl"?"rtl":"ltr",sample=this.dataTableSample();return html`
+import{__decorate}from"tslib";import{collectionSupport,snapshotPublicCollection}from"../../../internal/collection-snapshot.js";import{boundChartSeriesValues}from"./chart-series-bounds.js";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{createReducedMotionWatch}from"./chart-surface-shared.js";import{loadChartJs}from"./chart-core-loader.js";import{loadBoxPlotAndRegister}from"./box-plot-loader.js";import{loadBoxPlotAndRegister as loadBoxPlotAndRegister2}from"./box-plot-loader.js";import{onAnnotationPluginRegistered}from"../../../internal/chart-annotation-registration.js";import{styles}from"./box-plot.styles.js";import{chartSurfaceStyles}from"./chart-surface.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{getListFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{formatChartValue}from"./chart-number-format.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{showChartActiveDatum}from"./chart-active-datum.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{FALLBACK_GRID_COLOR,FALLBACK_LEGEND_COLOR,FALLBACK_TICK_COLOR,FALLBACK_TICK_FONT_SIZE,FALLBACK_TOOLTIP_BG,FALLBACK_TOOLTIP_TEXT}from"./chart-colors.js";import{ChartTokenCache}from"./chart-token-cache.js";import{chartDataTableVisible,hasSlottedChartDataTable,hasArraySeriesData}from"./chart-data-table.js";import{createForcedColorPattern,forcedColorEncoding,forcedColorsActive}from"./chart-forced-colors.js";import{specialistTokens}from"../../../internal/specialist-host-tokens.styles.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{legendVisibilityDetail,normalizeHiddenDatasets}from"./chart-legend-visibility.js";import{sampleChartTableIndexes}from"./chart-table-sampling.js";import{canvasSentence,isolateCanvasLabel,isolateScaleTickLabels,tooltipIsolationHook,bidiStyles,isolateHtml}from"./chart-bidi.js";import{escapeCsvField}from"../../utility/export-button/csv.js";import{chartChromeLegendPlacement,normalizeChartChromeLegendPosition}from"./chart-chrome.js";import{CSS_NUMBER_SOURCE}from"../../../internal/css-number.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_chartPlotSampled,LYRA_DEFAULT_chartPointLabel,LYRA_DEFAULT_chartRenderUnavailable,LYRA_DEFAULT_chartSeriesLabel,LYRA_DEFAULT_chartSeriesNoData,LYRA_DEFAULT_chartSummarySeparator,LYRA_DEFAULT_chartTrendDecreasing,LYRA_DEFAULT_chartTrendFlat,LYRA_DEFAULT_chartTrendIncreasing,LYRA_DEFAULT_liteChartMarkSummary}from"../../../internal/default-strings/charts.generated.js";import{LYRA_DEFAULT_chartValueLabel,LYRA_DEFAULT_loading}from"../../../internal/default-strings/shared.generated.js";const DIRECT_PIXEL_NUMBER=new RegExp(`^(${CSS_NUMBER_SOURCE})(?:px)?$`,"i");function isBoxPlotSeries(value){return hasArraySeriesData(value)}function normalizeBoxPlotSeries(value){try{return Object.freeze(Array.isArray(value)?value.filter(isBoxPlotSeries):[])}catch{return Object.freeze([])}}function summaryOf(point){return{min:point.min,q1:point.q1,median:point.median,q3:point.q3,max:point.max}}let boxPlotPlugin;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,chartPlotSampled:LYRA_DEFAULT_chartPlotSampled,chartPointLabel:LYRA_DEFAULT_chartPointLabel,chartRenderUnavailable:LYRA_DEFAULT_chartRenderUnavailable,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.collectionSupport=collectionSupport}static{this.ownedCollectionProperties=Object.freeze(["labels","hiddenDatasets"])}static{this.styles=[LyraElement.styles,specialistTokens,chartSurfaceStyles,styles,srOnly,bidiStyles]}static{this.immutableEventDetails=Object.freeze(["lr-legend-visibility-change-request","lr-legend-visibility-change"])}constructor(){super(),this.canvasTokens=new ChartTokenCache(this),this.labels=[],this._datasets=Object.freeze([]),this.datasetsSource=this._datasets,this.withLegend=!1,this.legendPosition="bottom",this.height="280px",this.xLabel="",this.yLabel="",this.withoutZeroBaseline=!1,this.label=null,this.description=null,this.withDataTable=!1,this.dataTableToggle=!1,this.dataTableExpandedOverride=null,this.dataTableId=nextId("box-plot-data-table"),this.loading=!0,this.loadFailed=!1,this.canvasUnavailable=!1,this.visible=!0,this.keyboardDatumIndex=0,this.keyboardDatumAnnouncement="",this.intersectionGeneration=0,this.reducedMotionWatch=createReducedMotionWatch(this,()=>this.drawIfVisible()),this.loadGeneration=0,this.descriptionId=nextId("box-plot-description"),this.announcements=new AnnouncementSinkController(this),this.lastDataTruncationAnnouncement="",this.isMounting=!0,this.tooltipIsolationPlugin={id:"lyra-box-plot-bidi",beforeTooltipDraw:tooltipIsolationHook(()=>this.effectiveDirection)},this.keyboardBoxShown=!1,this.onCanvasBlur=()=>{this.showKeyboardBox(void 0)},new ThemeWatcher(this,()=>{this.chart&&this.canvasTokens.hasThemeChanged()&&this.refreshTheme()})}get datasets(){return this._datasets}set datasets(value){if(Object.is(value,this.datasetsSource)||Object.is(value,this._datasets))return;const previous=this._datasets;this.datasetsSource=value,this._datasets=normalizeBoxPlotSeries(snapshotPublicCollection(boundChartSeriesValues(value,6)??value,this.ownerDocument?.defaultView)),this.requestUpdate("datasets",previous)}get dataTableVisible(){return chartDataTableVisible(this.withDataTable,this.dataTableToggle,this.dataTableExpandedOverride)}toggleDataTable(){this.dataTableExpandedOverride=!this.dataTableVisible}connectedCallback(){super.connectedCallback(),this.stopAnnotationRegistrationWatch?.(),this.stopAnnotationRegistrationWatch=onAnnotationPluginRegistered(()=>this.rebuildAfterAnnotationRegistration()),this.visible=!this.ownerWindow?.IntersectionObserver,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.appliedLegendVisibility=void 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.lastDataTruncationAnnouncement="",this.isMounting=!0,this.loadGeneration+=1,this.appliedLegendVisibility=void 0,this.chart?.destroy(),this.chart=void 0,this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0,this.intersectionGeneration+=1,this.visible=!0,this.disarmReducedMotionWatcher()}adoptedCallback(){this.canvasTokens.clear(),super.adoptedCallback(),this.announcements.adopted(),this.disarmReducedMotionWatcher(),this.armReducedMotionWatcher()}armReducedMotionWatcher(){this.reducedMotionWatch.arm()}disarmReducedMotionWatcher(){this.reducedMotionWatch.disarm()}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){super.updated(changed);const appliedVisibility=this.appliedLegendVisibility;if(this.appliedLegendVisibility=void 0,!this.isConnected)return;const wasMounting=this.isMounting;this.isMounting=!1,changed.has("keyboardDatumAnnouncement")&&changed.get("keyboardDatumAnnouncement")!==void 0&&this.keyboardDatumAnnouncement!==""&&this.announcements.announcePolite(this.keyboardDatumAnnouncement),changed.has("loadFailed")&&changed.get("loadFailed")!==void 0&&this.loadFailed&&this.announcements.announceAssertive(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.announcements.announcePolite(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 visibilityAlreadyApplied=appliedVisibility!==void 0&&appliedVisibility.chart===this.chart&&appliedVisibility.hidden===this.hiddenDatasets,contentChanged=["labels","datasets","hiddenDatasets","withLegend","legendPosition","height","xLabel","yLabel","withoutZeroBaseline","valueFormatter","formatter","locale","strings","loading"].some(name=>changed.has(name)&&(name!=="hiddenDatasets"||!visibilityAlreadyApplied)),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 cs=this.canvasTokens.sync()??this.style;return{grid:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-grid-color").trim()||cs.getPropertyValue("--_lr-chart-grid-color").trim(),FALLBACK_GRID_COLOR),tick:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-tick-color").trim()||cs.getPropertyValue("--_lr-chart-tick-color").trim(),FALLBACK_TICK_COLOR),tickFontSize:this.styleNumber("--lr-chart-tick-font-size",FALLBACK_TICK_FONT_SIZE,"--_lr-chart-tick-font-size"),legend:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-legend-color").trim()||cs.getPropertyValue("--_lr-chart-legend-color").trim(),FALLBACK_LEGEND_COLOR),tooltipBg:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-tooltip-bg").trim()||cs.getPropertyValue("--_lr-chart-tooltip-bg").trim(),FALLBACK_TOOLTIP_BG),tooltipText:this.canvasTokens.resolve(cs.getPropertyValue("--lr-chart-tooltip-color").trim()||cs.getPropertyValue("--_lr-chart-tooltip-color").trim(),FALLBACK_TOOLTIP_TEXT)}}seriesColor(index,palette=this.canvasTokens.palette()){const fallback=palette[index%palette.length]??"transparent",series=this.datasets[index];return series?.color?this.canvasTokens.resolve(series.color,fallback):fallback}seriesBorderColor(index,palette=this.canvasTokens.palette()){const base=this.seriesColor(index,palette);return this.styleColor(`--lr-box-plot-border-color-${index%8+1}`,base)}seriesFillColor(index,palette=this.canvasTokens.palette()){const base=this.seriesColor(index,palette);return this.styleColor(`--lr-box-plot-fill-color-${index%8+1}`,base)}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?this.canvasTokens.resolve(value,fallback):fallback}styleNumber(name,fallback,fallbackToken){const view=this.ownerWindow,cs=view?view.getComputedStyle(this):this.style,value=cs.getPropertyValue(name).trim()||(fallbackToken?cs.getPropertyValue(fallbackToken).trim():""),direct=DIRECT_PIXEL_NUMBER.exec(value);if(direct){const resolved2=Number.parseFloat(direct[1]);if(Number.isFinite(resolved2)&&resolved2>=0)return resolved2}if(!value||!view)return fallback;const resolved=this.canvasTokens.length(value,()=>{const probe=this.ownerDocument.createElement("span");probe.hidden=!0,probe.setAttribute("aria-hidden","true"),probe.style.inlineSize=value,(this.shadowRoot??this).append(probe);try{return Number.parseFloat(view.getComputedStyle(probe).inlineSize)}finally{probe.remove()}});return Number.isFinite(resolved)&&resolved>=0?resolved:fallback}buildConfig(){const theme=this.themeColors(),palette=this.canvasTokens.palette(),sample=this.dataTableSample(),direction=this.effectiveDirection==="rtl"?"rtl":"ltr",afterTickToLabelConversion=scale=>isolateScaleTickLabels(scale,direction);return{type:"boxplot",data:{labels:sample.rowIndexes.map(index=>this.labels[index]??""),datasets:sample.seriesIndexes.map(sourceIndex=>{const s=this.datasets[sourceIndex],fillColor=this.seriesFillColor(sourceIndex,palette),borderColor=this.seriesBorderColor(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,fillColor),borderColor}})},options:{locale:this.effectiveLocale,responsive:!0,maintainAspectRatio:!1,animation:prefersReducedMotion(this)?!1:void 0,onClick:(event,_elements,chart)=>this.handlePointClick(event,chart),elements:{boxandwhiskers:{borderWidth:this.styleNumber("--lr-box-plot-border-width",1,"--lr-border-width-thin"),itemRadius:this.styleNumber("--lr-box-plot-item-radius",0)}},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 datasetIndex=Number.isInteger(context.datasetIndex)?sample.seriesIndexes[context.datasetIndex]:void 0,index=Number.isInteger(context.dataIndex)?sample.rowIndexes[context.dataIndex]:void 0,lines=this.boxStatistics(point).map(([statistic,name,value])=>canvasSentence(sentenceValue=>this.localize("chartValueLabel",void 0,{label:name,value:sentenceValue}),this.formatValue(value,"tooltip",{...datasetIndex===void 0?{}:{datasetIndex},...index===void 0?{}:{index,label:this.labels[index]||void 0},...datasetIndex===void 0?{}:{seriesLabel:this.datasets[datasetIndex]?.label},statistic,axis:"y"}))),label=String(context.dataset?.label??"");return label?[label,...lines]:lines}}}:{}}},scales:{x:{afterTickToLabelConversion,title:{display:!!this.xLabel,text:isolateCanvasLabel(this.xLabel,direction),color:theme.tick},ticks:{color:theme.tick,font:{size:theme.tickFontSize}},grid:{color:theme.grid}},y:{afterTickToLabelConversion,position:this.effectiveDirection==="rtl"?"right":"left",beginAtZero:!this.withoutZeroBaseline,title:{display:!!this.yLabel,text:isolateCanvasLabel(this.yLabel,direction),color:theme.tick},ticks:{color:theme.tick,font:{size:theme.tickFontSize},...this.formatter||this.valueFormatter?{callback:value=>this.formatValue(Number(value),"tick",{axis:"y"})}:{}},grid:{color:theme.grid}}}}}}draw(){if(!this.chartJsModule||!this.canvasEl)return;if(!this.chart&&!this.canvasEl.getContext("2d")){this.setCanvasUnavailable(!0);return}this.canvasTokens.beginThemeDraw();const config=this.buildConfig();if(this.chart){this.chart.data=config.data,this.chart.options=config.options??{},this.applyDatasetVisibility(),this.chart.update("none"),this.canvasTokens.rememberTheme();return}const candidate=new this.chartJsModule.Chart(this.canvasEl,{...config,plugins:[this.tooltipIsolationPlugin]}),context=candidate;if(context.canvas===null||context.ctx===null){candidate.destroy(),this.setCanvasUnavailable(!0);return}this.chart=candidate,this.setCanvasUnavailable(!1),this.hiddenDatasets!==void 0&&(this.applyDatasetVisibility(),this.chart.update("none")),this.canvasTokens.rememberTheme()}setCanvasUnavailable(unavailable){this.canvasUnavailable!==unavailable&&(this.canvasUnavailable=unavailable,queueMicrotask(()=>{this.isConnected&&this.requestUpdate()}),unavailable&&this.announcements.announceAssertive(this.localize("chartRenderUnavailable")))}drawIfVisible(){!this.isConnected||!this.visible||this.draw()}rebuildAfterAnnotationRegistration(){this.chart&&(this.appliedLegendVisibility=void 0,this.chart.destroy(),this.chart=void 0,this.drawIfVisible())}refreshTheme(){this.canvasTokens.clear(),this.drawIfVisible(),this.withLegend&&this.requestUpdate()}seriesDisplayLabel(series){return series.label||this.localize("chartSeriesLabel")}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)??formatChartValue(value,this.effectiveLocale)}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,axis:"y"};rows.push([this.labels[index]??"",this.seriesDisplayLabel(series),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:this.seriesDisplayLabel(series)});const trend=last>first?this.localize("chartTrendIncreasing"):last<first?this.localize("chartTrendDecreasing"):this.localize("chartTrendFlat");return this.localize("boxPlotSeriesSummary",void 0,{label:this.seriesDisplayLabel(series),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",axis:"y"}),max:this.formatValue(max,"spoken",{datasetIndex:index,index:maxIndex,label:this.labels[maxIndex]||void 0,seriesLabel:series.label,statistic:"median",axis:"y"}),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}boxStatistics(point){return[["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]]}boxAnnouncement(datum,position,total){const numberFormat=getNumberFormat(this.effectiveLocale),point=datum.value,summary=(point?this.boxStatistics(point):[]).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,axis:"y"})})).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-activate",{...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})}showKeyboardBox(datum){if(!this.chart||!datum&&!this.keyboardBoxShown)return;const sample=this.dataTableSample();this.keyboardBoxShown=showChartActiveDatum(this.chart,datum&&{datasetIndex:sample.seriesIndexes.indexOf(datum.datasetIndex),index:sample.rowIndexes.indexOf(datum.index)})}onCanvasFocus(event){const datums=this.boxDatums();datums.length&&(this.keyboardDatumIndex=Math.min(this.keyboardDatumIndex,datums.length-1),isKeyboardFocusEvent(event)&&this.showKeyboardBox(datums[this.keyboardDatumIndex]),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.showKeyboardBox(datums[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(){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.hasCustomDataTable()?this.localize("chartPlotSampled"):this.localize("chartDataSampled"):""}requestUpdate(...args){args[0]!=="keyboardDatumAnnouncement"&&(this.dataTableRows=void 0),super.requestUpdate(...args)}renderDataTableRows(){if(this.dataTableRows)return this.dataTableRows;const numberFormat=getNumberFormat(this.effectiveLocale),direction=this.effectiveDirection==="rtl"?"rtl":"ltr",sample=this.dataTableSample();return this.dataTableRows=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,axis:"y"};return this.validPoint(point)?html`
+          <tr>
+            <th scope="row">${isolateHtml(this.labels[index]||this.localize("chartPointLabel",void 0,{n:numberFormat.format(index+1)}),direction)}</th>
+            <td>${isolateHtml(this.seriesDisplayLabel(series),direction)}</td>
+            <td>${isolateHtml(this.formatValue(point.min,"table",{...metadata,statistic:"min"}),direction)}</td>
+            <td>${isolateHtml(this.formatValue(point.q1,"table",{...metadata,statistic:"q1"}),direction)}</td>
+            <td>${isolateHtml(this.formatValue(point.median,"table",{...metadata,statistic:"median"}),direction)}</td>
+            <td>${isolateHtml(this.formatValue(point.q3,"table",{...metadata,statistic:"q3"}),direction)}</td>
+            <td>${isolateHtml(this.formatValue(point.max,"table",{...metadata,statistic:"max"}),direction)}</td>
+          </tr>
+        `:nothing})})}renderDataTable(){return html`
       <table class=${this.dataTableVisible?"":"sr-only"}>
         <caption>${this.accessibleName(this.localize("boxPlotData"))}</caption>
         <thead>
@@ -14,20 +24,10 @@ import{__decorate}from"tslib";import{collectionSupport,snapshotPublicCollection}
           </tr>
         </thead>
         <tbody>
-          ${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,axis:"y"};return this.validPoint(point)?html`
-                <tr>
-                  <th scope="row">${isolateHtml(this.labels[index]||this.localize("chartPointLabel",void 0,{n:numberFormat.format(index+1)}),direction)}</th>
-                  <td>${isolateHtml(this.seriesDisplayLabel(series),direction)}</td>
-                  <td>${isolateHtml(this.formatValue(point.min,"table",{...metadata,statistic:"min"}),direction)}</td>
-                  <td>${isolateHtml(this.formatValue(point.q1,"table",{...metadata,statistic:"q1"}),direction)}</td>
-                  <td>${isolateHtml(this.formatValue(point.median,"table",{...metadata,statistic:"median"}),direction)}</td>
-                  <td>${isolateHtml(this.formatValue(point.q3,"table",{...metadata,statistic:"q3"}),direction)}</td>
-                  <td>${isolateHtml(this.formatValue(point.max,"table",{...metadata,statistic:"max"}),direction)}</td>
-                </tr>
-              `:nothing})})}
+          ${this.renderDataTableRows()}
         </tbody>
       </table>
-    `}hasCustomDataTable(){return hasSlottedChartDataTable(this)}toggleDataset(index){if(!this.chart||index<0||index>=this.datasets.length)return;const hidden=this.effectiveHiddenDatasetIndexes(),wasHidden=hidden.includes(index),nextHidden=wasHidden?hidden.filter(candidate=>candidate!==index):[...hidden,index].sort((left,right)=>left-right),visible=wasHidden;this.emit("lr-legend-visibility-change-request",legendVisibilityDetail(index,visible,nextHidden),{cancelable:!0}).defaultPrevented||(this.hiddenDatasets=nextHidden,this.applyDatasetVisibility(),this.chart.update("none"),this.requestUpdate(),this.emit("lr-legend-visibility-change",legendVisibilityDetail(index,visible,nextHidden)))}renderLegend(){if(!this.withLegend)return nothing;const palette=this.canvasTokens.palette(),forced=forcedColorsActive(this.ownerWindow),controlledHidden=normalizeHiddenDatasets(this.hiddenDatasets,this.datasets.length),controlledHiddenSet=controlledHidden===void 0?void 0:new Set(controlledHidden),sample=this.dataTableSample();return html`
+    `}hasCustomDataTable(){return hasSlottedChartDataTable(this)}toggleDataset(index){if(!this.chart||index<0||index>=this.datasets.length)return;const hidden=this.effectiveHiddenDatasetIndexes(),wasHidden=hidden.includes(index),nextHidden=wasHidden?hidden.filter(candidate=>candidate!==index):[...hidden,index].sort((left,right)=>left-right),visible=wasHidden;if(this.emit("lr-legend-visibility-change-request",legendVisibilityDetail(index,visible,nextHidden),{cancelable:!0}).defaultPrevented)return;this.hiddenDatasets=nextHidden;const appliedVisibility={chart:this.chart,hidden:this.hiddenDatasets};this.applyDatasetVisibility(),this.chart.update("none"),this.appliedLegendVisibility=appliedVisibility,this.requestUpdate(),this.emit("lr-legend-visibility-change",legendVisibilityDetail(index,visible,nextHidden))}renderLegend(){if(!this.withLegend)return nothing;const palette=this.canvasTokens.palette(),forced=forcedColorsActive(this.ownerWindow),controlledHidden=normalizeHiddenDatasets(this.hiddenDatasets,this.datasets.length),controlledHiddenSet=controlledHidden===void 0?void 0:new Set(controlledHidden),sample=this.dataTableSample();return html`
       <div part="legend" role="group" aria-label=${this.accessibleName(this.localize("boxPlot"))}>
         ${sample.seriesIndexes.map(index=>{const series=this.datasets[index],color=this.seriesFillColor(index,palette),visible=controlledHiddenSet===void 0||!controlledHiddenSet.has(index),encoding=forced?forcedColorEncoding(index).name:void 0;return html`
             <button

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

@@ -281,7 +281,7 @@ export interface LyraChartDatumActivateDetail<TKind extends LyraChartDatumKind=L
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraChart extends LyraElement<LyraChartEventMap>{protected static collectionSupport:import("../../../internal/lyra-element.js").LyraCollectionSupport;protected static readonly immutableEventDetails:readonly string[];protected static readonly ownedCollectionProperties:readonly string[];static styles:import("lit").CSSResultGroup[];constructor();private readonly canvasTokens;type:LyraChartType;labels:string[];private labelsSnapshot?;private annotationsSnapshot?;private hiddenDatasetsSnapshot?;private canonicalLabels;private canonicalAnnotations;private canonicalHiddenDatasets;private _datasets;private datasetsSource;
+export declare class LyraChart extends LyraElement<LyraChartEventMap>{protected static collectionSupport:import("../../../internal/lyra-element.js").LyraCollectionSupport;protected static readonly immutableEventDetails:readonly string[];protected static readonly ownedCollectionProperties:readonly string[];static styles:import("lit").CSSResultGroup[];constructor();private readonly canvasTokens;type:LyraChartType;labels:string[];private labelsSnapshot?;private annotationsSnapshot?;private appliedLegendVisibility?;private hiddenDatasetsSnapshot?;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[]);
 /**
@@ -574,4 +574,4 @@ resetZoom():void;
 * observe (e.g. a same-attribute value swap the observer already covers is
 * handled, but a fully out-of-band restyle is not).
 */
-refreshTheme():void;private summarizeSeries;private formatSummaryValue;private formatTableValue;private formatExportValue;private formatSpokenValue;private tableStackAxes;private tableStackTotalLabel;private accessibleName;private chartDescription;private dataTableSample;private dataTableSampleMemo?;private generatedDataIsSampled;private dataTruncationMessage;private renderDataTable;private hasCustomDataTable;private legendMessage;private legendTextContent;private legendColor;private toggleDataset;private toggleDatum;private renderLegend;render():TemplateResult;private get showsLegend();}declare global{interface HTMLElementTagNameMap{'lr-chart':LyraChart;}}
+refreshTheme():void;private summarizeSeries;private formatSummaryValue;private formatTableValue;private formatExportValue;private formatSpokenValue;private tableStackAxes;private tableStackTotalLabel;private accessibleName;private chartDescription;private dataTableSample;private dataTableSampleMemo?;private generatedDataIsSampled;private dataTruncationMessage;private renderDataTable;private dataTableRows?;requestUpdate(...args:Parameters<LyraElement['requestUpdate']>):void;private renderDataTableRows;private hasCustomDataTable;private legendMessage;private legendTextContent;private legendColor;private toggleDataset;private toggleDatum;private renderLegend;render():TemplateResult;private get showsLegend();}declare global{interface HTMLElementTagNameMap{'lr-chart':LyraChart;}}