@fusedashlabs/widgets 0.4.5 → 0.6.0

package/dist/components/bar-chart/element/ui9000-bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-bar-chart.js","sources":["../../../../src/components/bar-chart/element/ui9000-bar-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport type { ChartLegendEntry } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getBarChartDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries, resolveSeriesLegendColor } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { FD } from '../../../utils/fusedash-visual.js';\nimport type { FuseWidgetLike } from '../../../utils/fuse-widget.js';\nimport {\n  barHorizontalMinSpan,\n  collectBarCategories,\n  formatCompact,\n  normalizeBarData,\n  type BarChartData,\n  type BarHoverEntry,\n  type BarLayout,\n  type BarOrientation,\n  type BarSeries,\n} from '../lib/index.js';\nimport { renderBarChart } from '../render/draw.js';\nimport { barChartStyles } from './styles.js';\n\n@customElement('ui9000-bar-chart')\nexport class Ui9000BarChart extends Ui9000ChartElement {\n  static override styles = [barChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: String, attribute: 'orientation' })\n  orientation: BarOrientation = 'vertical';\n\n  /** Multi-series only — a single series always renders as a plain bar chart */\n  @property({ type: String, attribute: 'layout' })\n  layout: BarLayout = 'grouped';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Running-total overlay (FuseDash `cumulativeLine`), single series only */\n  @property({ type: Boolean, attribute: 'cumulative-line' })\n  cumulativeLine = false;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _tooltip: {\n    x: number;\n    y: number;\n    category: string;\n    entries: BarHoverEntry[];\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _fixedXAxis = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof ResizeObserver !== 'undefined') {\n      this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n      this._resizeObserver.observe(this);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n    if (changed.has('_fixedXAxis')) {\n      const body = this.shadowRoot?.querySelector('.chart-body');\n      const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n      if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n      if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n    }\n  }\n\n  override firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    const chartBody = this.shadowRoot?.querySelector('.chart-body');\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n    if (chartBody instanceof HTMLElement) this._resizeObserver?.observe(chartBody);\n    if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): BarSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | BarChartData | BarSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeBarData(raw);\n  }\n\n  private renderLegend(series: BarSeries[]): typeof nothing | ReturnType<typeof renderChartLegend> {\n    if (!this.showLegend) return nothing;\n    const theme = readThemeFromElement(this);\n    const multi = series.length > 1;\n    const withCumulative = this.cumulativeLine && !multi;\n\n    if (!multi && !withCumulative) return nothing;\n\n    const entries: ChartLegendEntry[] = multi\n      ? lineLegendEntries(series, theme).map((entry) => ({\n          ...entry,\n          swatch: { kind: 'swatch', color: entry.swatch.color, opacity: 0.8 },\n        }))\n      : [\n          {\n            label: series[0]?.name ?? 'Series',\n            swatch: {\n              kind: 'swatch',\n              color: resolveSeriesLegendColor(series[0], 0, theme),\n              opacity: 0.8,\n            },\n          },\n          {\n            label: 'Cumulative',\n            swatch: { kind: 'line', color: FD.barCumulativeColor },\n          },\n        ];\n\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const chartBody = this.shadowRoot?.querySelector('.chart-body') as\n      | HTMLElement\n      | null;\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as\n      | HTMLElement\n      | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    const xAxisRoot = this.shadowRoot?.querySelector('.chart-x-axis') as\n      | HTMLElement\n      | null;\n    if (!chartBody || !scroll || !root) return;\n\n    const series = this.parseData();\n    this._empty = series.length === 0 || series.every((s) => !s.points.length);\n    if (this._empty) {\n      root.replaceChildren();\n      xAxisRoot?.replaceChildren();\n      this._fixedXAxis = false;\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, margin } = getBarChartDimensions(chartBody, this.scale);\n    const scrollViewportH = scroll.clientHeight || 300;\n    const categories = collectBarCategories(series);\n    const minPlotSpan = barHorizontalMinSpan(\n      categories.length,\n      series.length,\n      this.layout,\n    );\n    const availPlotH = scrollViewportH - margin.top;\n    const needsFixedXAxis =\n      this.orientation === 'horizontal' && minPlotSpan > availPlotH + 1;\n    this._fixedXAxis = needsFixedXAxis;\n\n    renderBarChart(root, {\n      series,\n      width,\n      height: scrollViewportH,\n      margin,\n      theme,\n      orientation: this.orientation,\n      layout: this.layout,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      cumulativeLine: this.cumulativeLine,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      xAxisContainer: needsFixedXAxis ? xAxisRoot : null,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ category, entries, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              category,\n              entries,\n            };\n          }\n        : undefined,\n      onLeave: this.showTooltip\n        ? () => {\n            this._tooltip = null;\n          }\n        : undefined,\n    });\n\n    if (xAxisRoot && !needsFixedXAxis) {\n      xAxisRoot.replaceChildren();\n    }\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const series = this._empty ? [] : this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            ${this.renderLegend(series)}\n            <div class=\"chart-scroll\" part=\"scroll\">\n              <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n            </div>\n            <div\n              class=\"chart-x-axis\"\n              part=\"x-axis\"\n              ?hidden=${!this._fixedXAxis}\n            ></div>\n          </div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                <div class=\"category\">${this._tooltip.category}</div>\n                ${this._tooltip.entries.map(\n                  (entry) => html`<div class=\"row\">\n                    <span class=\"swatch\" style=\"background:${entry.color}\"></span>\n                    <span>${entry.seriesName}</span>\n                    <span class=\"value\">${formatCompact(entry.value)}</span>\n                  </div>`,\n                )}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-bar-chart': Ui9000BarChart;\n  }\n}\n\nexport function registerBarChart(): void {\n  if (!customElements.get('ui9000-bar-chart')) {\n    customElements.define('ui9000-bar-chart', Ui9000BarChart);\n  }\n}\n\nregisterBarChart();\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,IAAM,iBAAN,cAA6B,mBAAmB;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAIL,SAAA,QAAqB;AAGrB,SAAA,cAA8B;AAI9B,SAAA,SAAoB;AAGpB,SAAA,WAAW;AAGX,SAAA,aAAa;AAGb,SAAA,cAAc;AAId,SAAA,iBAAiB;AAGjB,SAAA,SAAS;AAGT,SAAA,SAAS;AAGT,SAAQ,WAKG;AAGX,SAAQ,SAAS;AAGjB,SAAQ,cAAc;AAGtB,SAAQ,OAAO;AAAA,EAAA;AAAA,EAEN,oBAA0B;AACjC,UAAM,kBAAA;AACN,QAAI,OAAO,mBAAmB,aAAa;AACzC,WAAK,kBAAkB,IAAI,eAAe,MAAM,KAAK,cAAc;AACnE,WAAK,gBAAgB,QAAQ,IAAI;AAAA,IACnC;AAAA,EACF;AAAA,EAES,uBAA6B;;AACpC,eAAK,oBAAL,mBAAsB;AACtB,yBAAqB,KAAK,IAAI;AAC9B,UAAM,qBAAA;AAAA,EACR;AAAA,EAES,QAAQ,SAA+B;;AAC9C,QAAI,kBAAkB,OAAO,EAAG,MAAK,aAAA;AACrC,QAAI,QAAQ,IAAI,aAAa,GAAG;AAC9B,YAAM,QAAO,UAAK,eAAL,mBAAiB,cAAc;AAC5C,YAAM,UAAS,UAAK,eAAL,mBAAiB,cAAc;AAC9C,UAAI,gBAAgB,YAAa,YAAK,oBAAL,mBAAsB,QAAQ;AAC/D,UAAI,kBAAkB,YAAa,YAAK,oBAAL,mBAAsB,QAAQ;AAAA,IACnE;AAAA,EACF;AAAA,EAES,eAAqB;;AAC5B,UAAM,QAAO,UAAK,eAAL,mBAAiB,cAAc;AAC5C,UAAM,aAAY,UAAK,eAAL,mBAAiB,cAAc;AACjD,UAAM,UAAS,UAAK,eAAL,mBAAiB,cAAc;AAC9C,QAAI,gBAAgB,YAAa,YAAK,oBAAL,mBAAsB,QAAQ;AAC/D,QAAI,qBAAqB,YAAa,YAAK,oBAAL,mBAAsB,QAAQ;AACpE,QAAI,kBAAkB,YAAa,YAAK,oBAAL,mBAAsB,QAAQ;AAAA,EACnE;AAAA,EAEQ,eAAqB;AAC3B,yBAAqB,KAAK,IAAI;AAC9B,SAAK,OAAO,sBAAsB,MAAM,KAAK,MAAM;AAAA,EACrD;AAAA,EAEQ,YAAyB;AAC/B,UAAM,MAAM;AAAA,MACV,KAAK;AAAA,MACL,CAAA;AAAA,IAAC;AAEH,WAAO,iBAAiB,GAAG;AAAA,EAC7B;AAAA,EAEQ,aAAa,QAA4E;;AAC/F,QAAI,CAAC,KAAK,WAAY,QAAO;AAC7B,UAAM,QAAQ,qBAAqB,IAAI;AACvC,UAAM,QAAQ,OAAO,SAAS;AAC9B,UAAM,iBAAiB,KAAK,kBAAkB,CAAC;AAE/C,QAAI,CAAC,SAAS,CAAC,eAAgB,QAAO;AAEtC,UAAM,UAA8B,QAChC,kBAAkB,QAAQ,KAAK,EAAE,IAAI,CAAC,WAAW;AAAA,MAC/C,GAAG;AAAA,MACH,QAAQ,EAAE,MAAM,UAAU,OAAO,MAAM,OAAO,OAAO,SAAS,IAAA;AAAA,IAAI,EAClE,IACF;AAAA,MACE;AAAA,QACE,SAAO,YAAO,CAAC,MAAR,mBAAW,SAAQ;AAAA,QAC1B,QAAQ;AAAA,UACN,MAAM;AAAA,UACN,OAAO,yBAAyB,OAAO,CAAC,GAAG,GAAG,KAAK;AAAA,UACnD,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,EAAE,MAAM,QAAQ,OAAO,GAAG,mBAAA;AAAA,MAAmB;AAAA,IACvD;AAGN,WAAO,kBAAkB,OAAO;AAAA,EAClC;AAAA,EAEQ,OAAa;;AACnB,UAAM,aAAY,UAAK,eAAL,mBAAiB,cAAc;AAGjD,UAAM,UAAS,UAAK,eAAL,mBAAiB,cAAc;AAG9C,UAAM,QAAO,UAAK,eAAL,mBAAiB,cAAc;AAC5C,UAAM,aAAY,UAAK,eAAL,mBAAiB,cAAc;AAGjD,QAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAM;AAEpC,UAAM,SAAS,KAAK,UAAA;AACpB,SAAK,SAAS,OAAO,WAAW,KAAK,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,MAAM;AACzE,QAAI,KAAK,QAAQ;AACf,WAAK,gBAAA;AACL,6CAAW;AACX,WAAK,cAAc;AACnB;AAAA,IACF;AAEA,UAAM,QAAQ,qBAAqB,IAAI;AACvC,UAAM,EAAE,OAAO,OAAA,IAAW,sBAAsB,WAAW,KAAK,KAAK;AACrE,UAAM,kBAAkB,OAAO,gBAAgB;AAC/C,UAAM,aAAa,qBAAqB,MAAM;AAC9C,UAAM,cAAc;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,KAAK;AAAA,IAAA;AAEP,UAAM,aAAa,kBAAkB,OAAO;AAC5C,UAAM,kBACJ,KAAK,gBAAgB,gBAAgB,cAAc,aAAa;AAClE,SAAK,cAAc;AAEnB,mBAAe,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,aAAa,KAAK;AAAA,MAClB,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf,aAAa,KAAK;AAAA,MAClB,gBAAgB,KAAK;AAAA,MACrB,QAAQ,KAAK,UAAU;AAAA,MACvB,QAAQ,KAAK,UAAU;AAAA,MACvB,gBAAgB,kBAAkB,YAAY;AAAA,MAC9C,GAAG,KAAK,kBAAA;AAAA,MACR,SAAS,KAAK,cACV,CAAC,EAAE,UAAU,SAAS,YAAY;AAChC,cAAM,OAAO,KAAK,sBAAA;AAClB,aAAK,WAAW;AAAA,UACd,GAAG,MAAM,UAAU,KAAK;AAAA,UACxB,GAAG,MAAM,UAAU,KAAK;AAAA,UACxB;AAAA,UACA;AAAA,QAAA;AAAA,MAEJ,IACA;AAAA,MACJ,SAAS,KAAK,cACV,MAAM;AACJ,aAAK,WAAW;AAAA,MAClB,IACA;AAAA,IAAA,CACL;AAED,QAAI,aAAa,CAAC,iBAAiB;AACjC,gBAAU,gBAAA;AAAA,IACZ;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,QAAQ,KAAK,YAAA;AACnB,UAAM,SAAS,KAAK,SAAS,CAAA,IAAK,KAAK,UAAA;AACvC,WAAO;AAAA;AAAA,UAED,KAAK,kBAAkB,KAAK,CAAC;AAAA;AAAA;AAAA,cAGzB,KAAK,aAAa,MAAM,CAAC;AAAA;AAAA,6DAEsB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKhD,CAAC,KAAK,WAAW;AAAA;AAAA;AAAA,YAG7B,KAAK,SAAS,sDAAsD,OAAO;AAAA,YAC3E,KAAK,WACH;AAAA;AAAA;AAAA,8BAGgB,KAAK,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC;AAAA;AAAA,wCAE9B,KAAK,SAAS,QAAQ;AAAA,kBAC5C,KAAK,SAAS,QAAQ;AAAA,MACtB,CAAC,UAAU;AAAA,6DACgC,MAAM,KAAK;AAAA,4BAC5C,MAAM,UAAU;AAAA,0CACF,cAAc,MAAM,KAAK,CAAC;AAAA;AAAA,IAAA,CAEnD;AAAA,wBAEH,OAAO;AAAA,YACT,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIxC;AACF;AAhPa,eACK,SAAS,CAAC,gBAAgB,gBAAgB;AAG1D,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,SAAS;AAAA,GAHnC,eAIX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GANzC,eAOX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,UAAU;AAAA,GAVpC,eAWX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GAbxC,eAcX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe;AAAA,GAhB1C,eAiBX,WAAA,cAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAAA,GAnB3C,eAoBX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB;AAAA,GAvB9C,eAwBX,WAAA,kBAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GA1BrC,eA2BX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GA7BrC,eA8BX,WAAA,UAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAhCI,eAiCH,WAAA,YAAA,CAAA;AAQA,gBAAA;AAAA,EADP,MAAA;AAAM,GAxCI,eAyCH,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GA3CI,eA4CH,WAAA,eAAA,CAAA;AA5CG,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;AAwPN,SAAS,mBAAyB;AACvC,MAAI,CAAC,eAAe,IAAI,kBAAkB,GAAG;AAC3C,mBAAe,OAAO,oBAAoB,cAAc;AAAA,EAC1D;AACF;AAEA,iBAAA;"}
+{"version":3,"file":"ui9000-bar-chart.js","sources":["../../../../src/components/bar-chart/element/ui9000-bar-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport type { ChartLegendEntry } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getBarChartDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries, resolveSeriesLegendColor } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { FD } from '../../../utils/fusedash-visual.js';\nimport type { FuseWidgetLike } from '../../../utils/fuse-widget.js';\nimport {\n  barHorizontalMinSpan,\n  collectBarCategories,\n  formatCompact,\n  normalizeBarData,\n  type BarChartData,\n  type BarLayout,\n  type BarOrientation,\n  type BarSeries,\n} from '../lib/index.js';\nimport { renderBarChart } from '../render/draw.js';\nimport { barChartStyles } from './styles.js';\n\n@customElement('ui9000-bar-chart')\nexport class Ui9000BarChart extends Ui9000ChartElement {\n  static override styles = [barChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: String, attribute: 'orientation' })\n  orientation: BarOrientation = 'vertical';\n\n  /** Multi-series only — a single series always renders as a plain bar chart */\n  @property({ type: String, attribute: 'layout' })\n  layout: BarLayout = 'grouped';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Running-total overlay (FuseDash `cumulativeLine`), single series only */\n  @property({ type: Boolean, attribute: 'cumulative-line' })\n  cumulativeLine = false;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _fixedXAxis = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof ResizeObserver !== 'undefined') {\n      this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n      this._resizeObserver.observe(this);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n    if (changed.has('_fixedXAxis')) {\n      const body = this.shadowRoot?.querySelector('.chart-body');\n      const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n      if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n      if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n    }\n  }\n\n  override firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    const chartBody = this.shadowRoot?.querySelector('.chart-body');\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n    if (chartBody instanceof HTMLElement) this._resizeObserver?.observe(chartBody);\n    if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): BarSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | BarChartData | BarSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeBarData(raw);\n  }\n\n  private renderLegend(series: BarSeries[]): typeof nothing | ReturnType<typeof renderChartLegend> {\n    if (!this.showLegend) return nothing;\n    const theme = readThemeFromElement(this);\n    const multi = series.length > 1;\n    const withCumulative = this.cumulativeLine && !multi;\n\n    if (!multi && !withCumulative) return nothing;\n\n    const entries: ChartLegendEntry[] = multi\n      ? lineLegendEntries(series, theme).map((entry) => ({\n          ...entry,\n          swatch: { kind: 'swatch', color: entry.swatch.color, opacity: 0.8 },\n        }))\n      : [\n          {\n            label: series[0]?.name ?? 'Series',\n            swatch: {\n              kind: 'swatch',\n              color: resolveSeriesLegendColor(series[0], 0, theme),\n              opacity: 0.8,\n            },\n          },\n          {\n            label: 'Cumulative',\n            swatch: { kind: 'line', color: FD.barCumulativeColor },\n          },\n        ];\n\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const chartBody = this.shadowRoot?.querySelector('.chart-body') as\n      | HTMLElement\n      | null;\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as\n      | HTMLElement\n      | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    const xAxisRoot = this.shadowRoot?.querySelector('.chart-x-axis') as\n      | HTMLElement\n      | null;\n    if (!chartBody || !scroll || !root) return;\n\n    const series = this.parseData();\n    this._empty = series.length === 0 || series.every((s) => !s.points.length);\n    if (this._empty) {\n      root.replaceChildren();\n      xAxisRoot?.replaceChildren();\n      this._fixedXAxis = false;\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, margin } = getBarChartDimensions(chartBody, this.scale);\n    const scrollViewportH = scroll.clientHeight || 300;\n    const categories = collectBarCategories(series);\n    const minPlotSpan = barHorizontalMinSpan(\n      categories.length,\n      series.length,\n      this.layout,\n    );\n    const availPlotH = scrollViewportH - margin.top;\n    const needsFixedXAxis =\n      this.orientation === 'horizontal' && minPlotSpan > availPlotH + 1;\n    this._fixedXAxis = needsFixedXAxis;\n\n    renderBarChart(root, {\n      series,\n      width,\n      height: scrollViewportH,\n      margin,\n      theme,\n      orientation: this.orientation,\n      layout: this.layout,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      cumulativeLine: this.cumulativeLine,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      xAxisContainer: needsFixedXAxis ? xAxisRoot : null,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ category, entries, event }) => {\n            this.openTooltip(event, {\n              title: category,\n              rows: entries.map((entry) => ({\n                label: entry.seriesName,\n                value: formatCompact(entry.value),\n              })),\n            });\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n\n    if (xAxisRoot && !needsFixedXAxis) {\n      xAxisRoot.replaceChildren();\n    }\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const series = this._empty ? [] : this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            ${this.renderLegend(series)}\n            <div class=\"chart-scroll\" part=\"scroll\">\n              <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n            </div>\n            <div\n              class=\"chart-x-axis\"\n              part=\"x-axis\"\n              ?hidden=${!this._fixedXAxis}\n            ></div>\n          </div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-bar-chart': Ui9000BarChart;\n  }\n}\n\nexport function registerBarChart(): void {\n  if (!customElements.get('ui9000-bar-chart')) {\n    customElements.define('ui9000-bar-chart', Ui9000BarChart);\n  }\n}\n\nregisterBarChart();\n"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import { registerBarChart } from "./element/ui9000-bar-chart.js";
 import { Ui9000BarChart } from "./element/ui9000-bar-chart.js";
 import { renderBarChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
-import { barHorizontalMinSpan } from "./lib/layout.js";
+import { normalizeBarData } from "./lib/normalize.js";
 import { barPadFactor, collectBarCategories, collectBarValueDomain, cumulativeValues, groupedBarOffset, resolveBaseline, stackTotals, valueAt } from "./lib/domain.js";
+import { barHorizontalMinSpan } from "./lib/layout.js";
 import { formatCompact, selectTickIndices } from "./lib/format.js";
-import { normalizeBarData } from "./lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000BarChart,
   default2 as barChartMetadata,

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

@@ -32,6 +32,65 @@ declare const _default: {
     "context": "theme, scale, and mode come from WidgetContext CSS custom properties; series colors from widget formatting"
   },
   "allowedActions": ["hover", "resize"],
+  "tier": "engine",
+  "intents": ["comparison"],
+  "dataRoles": [
+    {
+      "id": "category",
+      "required": true,
+      "cardinality": "low-medium",
+      "description": "Discrete label per bar (severity, host, rule id)."
+    },
+    {
+      "id": "metric",
+      "required": true,
+      "type": "number",
+      "description": "Count or score aggregated on the category."
+    },
+    {
+      "id": "series",
+      "required": false,
+      "cardinality": "low",
+      "description": "Second category that splits each bar. A different column from category."
+    }
+  ],
+  "eligibility": [
+    {
+      "when": "profile.hasCategory && profile.hasNumericMetric && profile.categoryCardinality <= 30",
+      "reason": "Bar compares a handful of discrete groups on one metric."
+    }
+  ],
+  "disqualify": [
+    {
+      "when": "profile.hasGeo && !profile.hasCategory",
+      "reason": "Spatial-only data belongs on map-chart, not bars."
+    },
+    {
+      "when": "profile.categoryCardinality > 40",
+      "reason": "Too many categories; table or histogram is readable, bars are not."
+    }
+  ],
+  "accessibility": {
+    "nameFrom": "title or xLabel",
+    "keyboard": ["Tab into chart", "hover/focus equivalent on last point"],
+    "shadowBoundary": "Do not use aria-labelledby across the host; set aria-label on the host element."
+  },
+  "evalCases": [
+    {
+      "id": "bar-picks-severity-counts",
+      "intent": "comparison",
+      "profile": { "hasCategory": true, "hasNumericMetric": true, "categoryCardinality": 5 },
+      "expect": "eligible",
+      "reasonIncludes": "discrete groups"
+    },
+    {
+      "id": "bar-rejects-latlng-only",
+      "intent": "spatial",
+      "profile": { "hasGeo": true, "hasCategory": false },
+      "expect": "disqualified",
+      "reasonIncludes": "map-chart"
+    }
+  ],
   "propsSchema": {
     "$schema": "https://json-schema.org/draft/2020-12/schema",
     "type": "object",

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

@@ -10,6 +10,13 @@ const lazyImport = "@ui9000/widgets/lazy/bar-chart";
 const entry = "@ui9000/widgets/bar-chart";
 const usageConditions = { "host": "mcp-chat", "notFor": "fusedash-editor", "mapsExcluded": true, "context": "theme, scale, and mode come from WidgetContext CSS custom properties; series colors from widget formatting" };
 const allowedActions = ["hover", "resize"];
+const tier = "engine";
+const intents = ["comparison"];
+const dataRoles = [{ "id": "category", "required": true, "cardinality": "low-medium", "description": "Discrete label per bar (severity, host, rule id)." }, { "id": "metric", "required": true, "type": "number", "description": "Count or score aggregated on the category." }, { "id": "series", "required": false, "cardinality": "low", "description": "Second category that splits each bar. A different column from category." }];
+const eligibility = [{ "when": "profile.hasCategory && profile.hasNumericMetric && profile.categoryCardinality <= 30", "reason": "Bar compares a handful of discrete groups on one metric." }];
+const disqualify = [{ "when": "profile.hasGeo && !profile.hasCategory", "reason": "Spatial-only data belongs on map-chart, not bars." }, { "when": "profile.categoryCardinality > 40", "reason": "Too many categories; table or histogram is readable, bars are not." }];
+const accessibility = { "nameFrom": "title or xLabel", "keyboard": ["Tab into chart", "hover/focus equivalent on last point"], "shadowBoundary": "Do not use aria-labelledby across the host; set aria-label on the host element." };
+const evalCases = [{ "id": "bar-picks-severity-counts", "intent": "comparison", "profile": { "hasCategory": true, "hasNumericMetric": true, "categoryCardinality": 5 }, "expect": "eligible", "reasonIncludes": "discrete groups" }, { "id": "bar-rejects-latlng-only", "intent": "spatial", "profile": { "hasGeo": true, "hasCategory": false }, "expect": "disqualified", "reasonIncludes": "map-chart" }];
 const propsSchema = { "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "data": { "oneOf": [{ "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" } } } }, { "type": "object", "properties": { "points": { "type": "array", "items": { "type": "object", "required": ["x", "y"], "properties": { "x": { "type": "string" }, "y": { "type": "number" } } } }, "series": { "type": "array", "items": { "type": "object", "required": ["id", "points"], "properties": { "id": { "type": "string" }, "name": { "type": "string" }, "color": { "type": "string" }, "points": { "type": "array", "items": { "type": "object", "required": ["x", "y"], "properties": { "x": { "type": "string" }, "y": { "type": "number" } } } } } } } } }] }, "scale": { "type": "string", "enum": ["compact", "default", "comfortable"], "default": "default" }, "orientation": { "type": "string", "enum": ["vertical", "horizontal"], "default": "vertical", "description": "FuseDash `orientation` — picks the vertical or horizontal variant family." }, "layout": { "type": "string", "enum": ["grouped", "stacked"], "default": "grouped", "description": "FuseDash `stacked`. Only applies with more than one series; a single series always renders as the plain bar chart." }, "showGrid": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true }, "showTooltip": { "type": "boolean", "default": true }, "cumulativeLine": { "type": "boolean", "default": false, "description": "FuseDash `cumulativeLine` — running-total overlay. Vertical single-series only." }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" } }, "required": ["data"] };
 const barChartMeta = {
   id,
@@ -24,21 +31,35 @@ const barChartMeta = {
   entry,
   usageConditions,
   allowedActions,
+  tier,
+  intents,
+  dataRoles,
+  eligibility,
+  disqualify,
+  accessibility,
+  evalCases,
   propsSchema
 };
 export {
+  accessibility,
   allowedActions,
   chartTypeKeys,
   chartTypeMap,
+  dataRoles,
   barChartMeta as default,
   description,
+  disqualify,
+  eligibility,
   entry,
+  evalCases,
   id,
+  intents,
   lazyImport,
   propsSchema,
   source,
   stack,
   tag,
+  tier,
   title,
   usageConditions
 };

package/dist/components/bar-chart/metadata.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"metadata.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/bias-variance-tradeoff-chart/element/styles.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { stepLineChartStyles } from "../../step-line-chart/element/styles.js";
 const biasVarianceHoverStyles = css`
   .tooltip .row.focused {
     font-weight: 600;
@@ -8,6 +9,7 @@ const biasVarianceHoverStyles = css`
   }
 `;
 export {
-  biasVarianceHoverStyles
+  biasVarianceHoverStyles,
+  stepLineChartStyles as biasVarianceTradeoffChartStyles
 };
 //# sourceMappingURL=styles.js.map

package/dist/components/bias-variance-tradeoff-chart/element/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/bias-variance-tradeoff-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport { stepLineChartStyles as biasVarianceTradeoffChartStyles } from '../../step-line-chart/element/styles.js';\n\n/**\n * The crosshair focuses the curve nearest the cursor and dims its siblings in\n * the plot; the tooltip rows follow the same emphasis.\n */\nexport const biasVarianceHoverStyles = css`\n  .tooltip .row.focused {\n    font-weight: 600;\n  }\n  .tooltip .row.dimmed {\n    opacity: 0.65;\n  }\n`;\n"],"names":[],"mappings":";AAQO,MAAM,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/bias-variance-tradeoff-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport { stepLineChartStyles as biasVarianceTradeoffChartStyles } from '../../step-line-chart/element/styles.js';\n\n/**\n * The crosshair focuses the curve nearest the cursor and dims its siblings in\n * the plot; the tooltip rows follow the same emphasis.\n */\nexport const biasVarianceHoverStyles = css`\n  .tooltip .row.focused {\n    font-weight: 600;\n  }\n  .tooltip .row.dimmed {\n    opacity: 0.65;\n  }\n`;\n"],"names":[],"mappings":";;AAQO,MAAM,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.d.ts

@@ -5,7 +5,6 @@ export declare class Ui9000BiasVarianceTradeoffChart extends Ui9000ChartElement
     showGrid: boolean;
     showLegend: boolean;
     showTooltip: boolean;
-    private _tooltip;
     private _empty;
     private _resizeObserver?;
     private _raf;

package/dist/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-bias-variance-tradeoff-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAiB7F,qBACa,+BAAgC,SAAQ,kBAAkB;IACrE,OAAgB,MAAM,4BAIpB;IAGF,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAKA;IAGhB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,IAAI;IAwCH,MAAM;CAoChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qCAAqC,EAAE,+BAA+B,CAAC;KACxE;CACF;AAED,wBAAgB,iCAAiC,IAAI,IAAI,CAOxD"}
+{"version":3,"file":"ui9000-bias-variance-tradeoff-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAgB7F,qBACa,+BAAgC,SAAQ,kBAAkB;IACrE,OAAgB,MAAM,4BAIpB;IAGF,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,IAAI;IAsCH,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qCAAqC,EAAE,+BAA+B,CAAC;KACxE;CACF;AAED,wBAAgB,iCAAiC,IAAI,IAAI,CAOxD"}

package/dist/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.js

@@ -7,10 +7,10 @@ import { parseJsonAttr, getBiasVarianceDimensions } from "../../../utils/chart-h
 import { lineLegendEntries } from "../../../utils/chart-legend.js";
 import { formatCapitalizedWords } from "../../../utils/format-text.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { renderBiasVarianceChart } from "../render/draw.js";
-import { biasVarianceHoverStyles } from "./styles.js";
 import { normalizeBiasVarianceData } from "../lib/normalize.js";
 import { formatTradeoffValue } from "../lib/format.js";
+import { renderBiasVarianceChart } from "../render/draw.js";
+import { biasVarianceHoverStyles } from "./styles.js";
 import { stepLineChartStyles } from "../../step-line-chart/element/styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
@@ -30,7 +30,6 @@ let Ui9000BiasVarianceTradeoffChart = class extends Ui9000ChartElement {
     this.showGrid = true;
     this.showLegend = true;
     this.showTooltip = true;
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -67,7 +66,7 @@ let Ui9000BiasVarianceTradeoffChart = class extends Ui9000ChartElement {
     return renderChartLegend(lineLegendEntries(labelled, theme));
   }
   draw() {
-    var _a;
+    var _a, _b, _c;
     const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
     if (!root) return;
     const model = this.parseData();
@@ -77,6 +76,8 @@ let Ui9000BiasVarianceTradeoffChart = class extends Ui9000ChartElement {
       return;
     }
     const { width, height, margin } = getBiasVarianceDimensions(root);
+    const yField = model.yField;
+    const unit = yField ? (_c = (_b = model.axisDetails) == null ? void 0 : _b[yField]) == null ? void 0 : _c.measure_unit_symbol : void 0;
     renderBiasVarianceChart(root, {
       model,
       width,
@@ -86,25 +87,20 @@ let Ui9000BiasVarianceTradeoffChart = class extends Ui9000ChartElement {
       showGrid: this.showGrid,
       showTooltip: this.showTooltip,
       onHover: this.showTooltip ? ({ x, entries, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          xLabel: formatTradeoffValue(x),
-          entries
-        };
+        this.openTooltip(event, {
+          title: formatTradeoffValue(x),
+          rows: entries.map((entry) => ({
+            label: formatCapitalizedWords(entry.seriesName),
+            value: `${formatTradeoffValue(entry.value)}${unit ? ` ${unit}` : ""}`
+          }))
+        });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
-    var _a, _b;
     const title = this.headerTitle();
     const model = this._empty ? EMPTY_MODEL : this.parseData();
-    const yField = model.yField;
-    const unit = yField ? (_b = (_a = model.axisDetails) == null ? void 0 : _a[yField]) == null ? void 0 : _b.measure_unit_symbol : void 0;
     return html`
       <div class="widget-shell" part="shell">
         ${this.renderShellHeader(title)}
@@ -112,22 +108,6 @@ let Ui9000BiasVarianceTradeoffChart = class extends Ui9000ChartElement {
           ${this.renderLegend(model)}
           <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
           ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
-          ${this._tooltip ? html`<div
-                class="tooltip"
-                part="tooltip"
-                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-              >
-                <div class="x">${this._tooltip.xLabel}</div>
-                ${this._tooltip.entries.map(
-      (entry) => html`<div class="row ${entry.focused ? "focused" : "dimmed"}">
-                    <span class="swatch" style="background:${entry.color}"></span>
-                    <span>${formatCapitalizedWords(entry.seriesName)}</span>
-                    <span class="value"
-                      >${formatTradeoffValue(entry.value)}${unit ? ` ${unit}` : ""}</span
-                    >
-                  </div>`
-    )}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -148,9 +128,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-tooltip" })
 ], Ui9000BiasVarianceTradeoffChart.prototype, "showTooltip", 2);
-__decorateClass([
-  state()
-], Ui9000BiasVarianceTradeoffChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000BiasVarianceTradeoffChart.prototype, "_empty", 2);

package/dist/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-bias-variance-tradeoff-chart.js","sources":["../../../../src/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { getBiasVarianceDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport { formatCapitalizedWords } from '../../../utils/format-text.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatTradeoffValue,\n  normalizeBiasVarianceData,\n  type BiasVarianceChartInput,\n  type BiasVarianceHoverEntry,\n  type BiasVarianceModel,\n} from '../lib/index.js';\nimport { renderBiasVarianceChart } from '../render/draw.js';\nimport { biasVarianceHoverStyles, biasVarianceTradeoffChartStyles } from './styles.js';\n\nconst EMPTY_MODEL: BiasVarianceModel = { series: [], domainsLimits: [] };\n\n@customElement('ui9000-bias-variance-tradeoff-chart')\nexport class Ui9000BiasVarianceTradeoffChart extends Ui9000ChartElement {\n  static override styles = [\n    biasVarianceTradeoffChartStyles,\n    biasVarianceHoverStyles,\n    chartShellStyles,\n  ];\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @state()\n  private _tooltip: {\n    x: number;\n    y: number;\n    xLabel: string;\n    entries: BiasVarianceHoverEntry[];\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): BiasVarianceModel {\n    const raw = parseJsonAttr<BiasVarianceChartInput>(this.dataJson, null);\n    return normalizeBiasVarianceData(raw);\n  }\n\n  private renderLegend(model: BiasVarianceModel) {\n    if (!this.showLegend || model.series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const labelled = model.series.map((s) => ({\n      id: s.id,\n      name: formatCapitalizedWords(s.name ?? s.id),\n      color: s.color,\n    }));\n    return renderChartLegend(lineLegendEntries(labelled, theme));\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    this._empty = model.series.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const { width, height, margin } = getBiasVarianceDimensions(root);\n\n    renderBiasVarianceChart(root, {\n      model,\n      width,\n      height,\n      margin,\n      theme: readThemeFromElement(this),\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      onHover: this.showTooltip\n        ? ({ x, entries, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              xLabel: formatTradeoffValue(x),\n              entries,\n            };\n          }\n        : undefined,\n      onLeave: this.showTooltip\n        ? () => {\n            this._tooltip = null;\n          }\n        : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const model = this._empty ? EMPTY_MODEL : this.parseData();\n    const yField = model.yField;\n    const unit = yField ? model.axisDetails?.[yField]?.measure_unit_symbol : undefined;\n\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(model)}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                <div class=\"x\">${this._tooltip.xLabel}</div>\n                ${this._tooltip.entries.map(\n                  (entry) => html`<div class=\"row ${entry.focused ? 'focused' : 'dimmed'}\">\n                    <span class=\"swatch\" style=\"background:${entry.color}\"></span>\n                    <span>${formatCapitalizedWords(entry.seriesName)}</span>\n                    <span class=\"value\"\n                      >${formatTradeoffValue(entry.value)}${unit ? ` ${unit}` : ''}</span\n                    >\n                  </div>`,\n                )}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-bias-variance-tradeoff-chart': Ui9000BiasVarianceTradeoffChart;\n  }\n}\n\nexport function registerBiasVarianceTradeoffChart(): void {\n  if (!customElements.get('ui9000-bias-variance-tradeoff-chart')) {\n    customElements.define(\n      'ui9000-bias-variance-tradeoff-chart',\n      Ui9000BiasVarianceTradeoffChart,\n    );\n  }\n}\n\nregisterBiasVarianceTradeoffChart();\n"],"names":["biasVarianceTradeoffChartStyles"],"mappings":"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"}
+{"version":3,"file":"ui9000-bias-variance-tradeoff-chart.js","sources":["../../../../src/components/bias-variance-tradeoff-chart/element/ui9000-bias-variance-tradeoff-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { getBiasVarianceDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport { formatCapitalizedWords } from '../../../utils/format-text.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatTradeoffValue,\n  normalizeBiasVarianceData,\n  type BiasVarianceChartInput,\n  type BiasVarianceModel,\n} from '../lib/index.js';\nimport { renderBiasVarianceChart } from '../render/draw.js';\nimport { biasVarianceHoverStyles, biasVarianceTradeoffChartStyles } from './styles.js';\n\nconst EMPTY_MODEL: BiasVarianceModel = { series: [], domainsLimits: [] };\n\n@customElement('ui9000-bias-variance-tradeoff-chart')\nexport class Ui9000BiasVarianceTradeoffChart extends Ui9000ChartElement {\n  static override styles = [\n    biasVarianceTradeoffChartStyles,\n    biasVarianceHoverStyles,\n    chartShellStyles,\n  ];\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): BiasVarianceModel {\n    const raw = parseJsonAttr<BiasVarianceChartInput>(this.dataJson, null);\n    return normalizeBiasVarianceData(raw);\n  }\n\n  private renderLegend(model: BiasVarianceModel) {\n    if (!this.showLegend || model.series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const labelled = model.series.map((s) => ({\n      id: s.id,\n      name: formatCapitalizedWords(s.name ?? s.id),\n      color: s.color,\n    }));\n    return renderChartLegend(lineLegendEntries(labelled, theme));\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    this._empty = model.series.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const { width, height, margin } = getBiasVarianceDimensions(root);\n    const yField = model.yField;\n    const unit = yField ? model.axisDetails?.[yField]?.measure_unit_symbol : undefined;\n\n    renderBiasVarianceChart(root, {\n      model,\n      width,\n      height,\n      margin,\n      theme: readThemeFromElement(this),\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      onHover: this.showTooltip\n        ? ({ x, entries, event }) => {\n            this.openTooltip(event, {\n              title: formatTradeoffValue(x),\n              rows: entries.map((entry) => ({\n                label: formatCapitalizedWords(entry.seriesName),\n                value: `${formatTradeoffValue(entry.value)}${unit ? ` ${unit}` : ''}`,\n              })),\n            });\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const model = this._empty ? EMPTY_MODEL : this.parseData();\n\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(model)}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-bias-variance-tradeoff-chart': Ui9000BiasVarianceTradeoffChart;\n  }\n}\n\nexport function registerBiasVarianceTradeoffChart(): void {\n  if (!customElements.get('ui9000-bias-variance-tradeoff-chart')) {\n    customElements.define(\n      'ui9000-bias-variance-tradeoff-chart',\n      Ui9000BiasVarianceTradeoffChart,\n    );\n  }\n}\n\nregisterBiasVarianceTradeoffChart();\n"],"names":["biasVarianceTradeoffChartStyles"],"mappings":"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"}

package/dist/components/bias-variance-tradeoff-chart/index.js

@@ -1,10 +1,10 @@
 import { registerBiasVarianceTradeoffChart } from "./element/ui9000-bias-variance-tradeoff-chart.js";
 import { Ui9000BiasVarianceTradeoffChart } from "./element/ui9000-bias-variance-tradeoff-chart.js";
-import { default as default2 } from "./metadata.json.js";
+import { renderBiasVarianceChart } from "./render/draw.js";
+import { normalizeBiasVarianceData } from "./lib/normalize.js";
 import { biasVarianceXDomain, biasVarianceXValues, biasVarianceYDomain } from "./lib/domain.js";
 import { formatTradeoffValue } from "./lib/format.js";
-import { normalizeBiasVarianceData } from "./lib/normalize.js";
-import { renderBiasVarianceChart } from "./render/draw.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000BiasVarianceTradeoffChart,
   default2 as biasVarianceTradeoffChartMetadata,

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

@@ -9,7 +9,6 @@ export declare class Ui9000BoxPlotChart extends Ui9000ChartElement {
     showTooltip: boolean;
     xLabel: string;
     yLabel: string;
-    private _tooltip;
     private _empty;
     private _fixedXAxis;
     private _resizeObserver?;

package/dist/components/box-plot-chart/element/ui9000-box-plot-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-box-plot-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/box-plot-chart/element/ui9000-box-plot-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAO7F,OAAO,EAML,KAAK,kBAAkB,EAExB,MAAM,iBAAiB,CAAC;AAIzB,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAAqC;IAG3D,WAAW,EAAE,kBAAkB,CAAc;IAG7C,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,OAAO,CAAC,QAAQ,CAUA;IAGhB,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAUtC,YAAY,IAAI,IAAI;IAS7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,IAAI;IA2EZ,OAAO,CAAC,YAAY;IAWX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}
+{"version":3,"file":"ui9000-box-plot-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/box-plot-chart/element/ui9000-box-plot-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAO7F,OAAO,EAML,KAAK,kBAAkB,EAExB,MAAM,iBAAiB,CAAC;AAIzB,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAAqC;IAG3D,WAAW,EAAE,kBAAkB,CAAc;IAG7C,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAUtC,YAAY,IAAI,IAAI;IAS7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,IAAI;IAyEZ,OAAO,CAAC,YAAY;IAWX,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}

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

@@ -7,10 +7,10 @@ import { parseJsonAttr, getBoxPlotDimensions } from "../../../utils/chart-helper
 import { swatchLegendEntries } from "../../../utils/chart-legend.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
 import { seriesColor } from "../../../utils/fusedash-visual.js";
-import { renderBoxPlotChart } from "../render/draw.js";
-import { boxPlotStyles } from "./styles.js";
 import { normalizeBoxPlotData } from "../lib/normalize.js";
 import { boxPlotMinCategorySpan } from "../lib/layout.js";
+import { renderBoxPlotChart } from "../render/draw.js";
+import { boxPlotStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +31,6 @@ let Ui9000BoxPlotChart = class extends Ui9000ChartElement {
     this.showTooltip = true;
     this.xLabel = "";
     this.yLabel = "";
-    this._tooltip = null;
     this._empty = false;
     this._fixedXAxis = false;
     this._raf = 0;
@@ -115,22 +114,18 @@ let Ui9000BoxPlotChart = class extends Ui9000ChartElement {
       yLabel: this.yLabel || void 0,
       ...this.axisLabelHandlers(),
       onBoxHover: this.showTooltip ? ({ box, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          label: box.label,
-          group: box.group,
-          q1: box.q1,
-          median: box.median,
-          q3: box.q3,
-          min: box.smallestNonOutlier,
-          max: box.biggestNonOutlier
-        };
+        this.openTooltip(event, {
+          title: box.group ? `${box.group} · ${box.label}` : box.label,
+          rows: [
+            { label: "min", value: String(box.smallestNonOutlier) },
+            { label: "25%", value: String(box.q1) },
+            { label: "median", value: String(box.median) },
+            { label: "75%", value: String(box.q3) },
+            { label: "max", value: String(box.biggestNonOutlier) }
+          ]
+        });
       } : void 0,
-      onBoxLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onBoxLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
     if (xAxisRoot && !needsFixedXAxis) {
       xAxisRoot.replaceChildren();
@@ -165,20 +160,6 @@ let Ui9000BoxPlotChart = class extends Ui9000ChartElement {
             ></div>
           </div>
           ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
-          ${this._tooltip ? html`<div
-                class="tooltip"
-                part="tooltip"
-                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-              >
-                <div class="name">
-                  ${this._tooltip.group ? `${this._tooltip.group} · ${this._tooltip.label}` : this._tooltip.label}
-                </div>
-                <div>min: ${this._tooltip.min}</div>
-                <div>25%: ${this._tooltip.q1}</div>
-                <div>median: ${this._tooltip.median}</div>
-                <div>75%: ${this._tooltip.q3}</div>
-                <div>max: ${this._tooltip.max}</div>
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -204,9 +185,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "y-label" })
 ], Ui9000BoxPlotChart.prototype, "yLabel", 2);
-__decorateClass([
-  state()
-], Ui9000BoxPlotChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000BoxPlotChart.prototype, "_empty", 2);

package/dist/components/box-plot-chart/element/ui9000-box-plot-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-box-plot-chart.js","sources":["../../../../src/components/box-plot-chart/element/ui9000-box-plot-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { getBoxPlotDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { seriesColor as fdSeriesColor } from '../../../utils/fusedash-visual.js';\nimport {\n  boxPlotMinCategorySpan,\n  normalizeBoxPlotData,\n  type BoxPlotBox,\n  type BoxPlotBoxesPayload,\n  type BoxPlotModel,\n  type BoxPlotOrientation,\n  type FuseDashBoxPlotPayload,\n} from '../lib/index.js';\nimport { renderBoxPlotChart } from '../render/draw.js';\nimport { boxPlotStyles } from './styles.js';\n\n@customElement('ui9000-box-plot-chart')\nexport class Ui9000BoxPlotChart extends Ui9000ChartElement {\n  static override styles = [boxPlotStyles, chartShellStyles];\n\n  @property({ type: String })\n  orientation: BoxPlotOrientation = 'vertical';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _tooltip: {\n    x: number;\n    y: number;\n    label: string;\n    group?: string;\n    q1: number;\n    median: number;\n    q3: number;\n    min: number;\n    max: number;\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _fixedXAxis = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n    if (changed.has('_fixedXAxis')) {\n      const body = this.shadowRoot?.querySelector('.chart-body');\n      const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n      if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n      if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n    }\n  }\n\n  override firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    const chartBody = this.shadowRoot?.querySelector('.chart-body');\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n    if (chartBody instanceof HTMLElement) this._resizeObserver?.observe(chartBody);\n    if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): BoxPlotModel {\n    const raw = parseJsonAttr<\n      BoxPlotBox[] | BoxPlotBoxesPayload | FuseDashBoxPlotPayload\n    >(this.dataJson, []);\n    const model = normalizeBoxPlotData(raw);\n    if (this.orientation === 'horizontal' || this.orientation === 'vertical') {\n      return { ...model, orientation: this.orientation };\n    }\n    return model;\n  }\n\n  private draw(): void {\n    const chartBody = this.shadowRoot?.querySelector('.chart-body') as\n      | HTMLElement\n      | null;\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as\n      | HTMLElement\n      | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as\n      | HTMLElement\n      | null;\n    const xAxisRoot = this.shadowRoot?.querySelector('.chart-x-axis') as\n      | HTMLElement\n      | null;\n    if (!chartBody || !scroll || !root) return;\n\n    const model = this.parseData();\n    this._empty = model.boxes.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      xAxisRoot?.replaceChildren();\n      this._fixedXAxis = false;\n      return;\n    }\n\n    const labels =\n      model.categoryLabels?.length\n        ? model.categoryLabels\n        : [...new Set(model.boxes.map((b) => b.label))];\n    const groupCount = model.groups.length || 1;\n    const minPlotSpan = boxPlotMinCategorySpan(labels.length, groupCount);\n    const { width, margin } = getBoxPlotDimensions(chartBody);\n    const scrollViewportH = scroll.clientHeight || 300;\n    const availPlotH = scrollViewportH - margin.top;\n    const needsFixedXAxis =\n      model.orientation === 'horizontal' && minPlotSpan > availPlotH + 1;\n    this._fixedXAxis = needsFixedXAxis;\n\n    const theme = readThemeFromElement(this);\n\n    renderBoxPlotChart(root, {\n      model,\n      width,\n      height: scrollViewportH,\n      margin,\n      theme,\n      orientation: this.orientation,\n      showGrid: this.showGrid,\n      xAxisContainer: needsFixedXAxis ? xAxisRoot : null,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onBoxHover: this.showTooltip\n        ? ({ box, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              label: box.label,\n              group: box.group,\n              q1: box.q1,\n              median: box.median,\n              q3: box.q3,\n              min: box.smallestNonOutlier,\n              max: box.biggestNonOutlier,\n            };\n          }\n        : undefined,\n      onBoxLeave: this.showTooltip ? () => { this._tooltip = null; } : undefined,\n    });\n\n    if (xAxisRoot && !needsFixedXAxis) {\n      xAxisRoot.replaceChildren();\n    }\n  }\n\n  private renderLegend(model: BoxPlotModel) {\n    if (!this.showLegend || model.groups.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(model.groups, theme, (group, i) => {\n        const sample = model.boxes.find((b) => (b.group ?? 'default') === group);\n        return sample?.color ?? fdSeriesColor(i);\n      }),\n    );\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const model = this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            ${this.renderLegend(model)}\n            <div class=\"chart-scroll\" part=\"scroll\">\n              <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n            </div>\n            <div\n              class=\"chart-x-axis\"\n              part=\"x-axis\"\n              ?hidden=${!this._fixedXAxis}\n            ></div>\n          </div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">No data</div>`\n            : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                <div class=\"name\">\n                  ${this._tooltip.group\n                    ? `${this._tooltip.group} · ${this._tooltip.label}`\n                    : this._tooltip.label}\n                </div>\n                <div>min: ${this._tooltip.min}</div>\n                <div>25%: ${this._tooltip.q1}</div>\n                <div>median: ${this._tooltip.median}</div>\n                <div>75%: ${this._tooltip.q3}</div>\n                <div>max: ${this._tooltip.max}</div>\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-box-plot-chart': Ui9000BoxPlotChart;\n  }\n}\n\nexport function registerBoxPlotChart(): void {\n  if (!customElements.get('ui9000-box-plot-chart')) {\n    customElements.define('ui9000-box-plot-chart', Ui9000BoxPlotChart);\n  }\n}\n\nregisterBoxPlotChart();\n"],"names":["fdSeriesColor"],"mappings":"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"}
+{"version":3,"file":"ui9000-box-plot-chart.js","sources":["../../../../src/components/box-plot-chart/element/ui9000-box-plot-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { getBoxPlotDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { seriesColor as fdSeriesColor } from '../../../utils/fusedash-visual.js';\nimport {\n  boxPlotMinCategorySpan,\n  normalizeBoxPlotData,\n  type BoxPlotBox,\n  type BoxPlotBoxesPayload,\n  type BoxPlotModel,\n  type BoxPlotOrientation,\n  type FuseDashBoxPlotPayload,\n} from '../lib/index.js';\nimport { renderBoxPlotChart } from '../render/draw.js';\nimport { boxPlotStyles } from './styles.js';\n\n@customElement('ui9000-box-plot-chart')\nexport class Ui9000BoxPlotChart extends Ui9000ChartElement {\n  static override styles = [boxPlotStyles, chartShellStyles];\n\n  @property({ type: String })\n  orientation: BoxPlotOrientation = 'vertical';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _fixedXAxis = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n    if (changed.has('_fixedXAxis')) {\n      const body = this.shadowRoot?.querySelector('.chart-body');\n      const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n      if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n      if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n    }\n  }\n\n  override firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    const chartBody = this.shadowRoot?.querySelector('.chart-body');\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n    if (chartBody instanceof HTMLElement) this._resizeObserver?.observe(chartBody);\n    if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): BoxPlotModel {\n    const raw = parseJsonAttr<\n      BoxPlotBox[] | BoxPlotBoxesPayload | FuseDashBoxPlotPayload\n    >(this.dataJson, []);\n    const model = normalizeBoxPlotData(raw);\n    if (this.orientation === 'horizontal' || this.orientation === 'vertical') {\n      return { ...model, orientation: this.orientation };\n    }\n    return model;\n  }\n\n  private draw(): void {\n    const chartBody = this.shadowRoot?.querySelector('.chart-body') as\n      | HTMLElement\n      | null;\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as\n      | HTMLElement\n      | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as\n      | HTMLElement\n      | null;\n    const xAxisRoot = this.shadowRoot?.querySelector('.chart-x-axis') as\n      | HTMLElement\n      | null;\n    if (!chartBody || !scroll || !root) return;\n\n    const model = this.parseData();\n    this._empty = model.boxes.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      xAxisRoot?.replaceChildren();\n      this._fixedXAxis = false;\n      return;\n    }\n\n    const labels =\n      model.categoryLabels?.length\n        ? model.categoryLabels\n        : [...new Set(model.boxes.map((b) => b.label))];\n    const groupCount = model.groups.length || 1;\n    const minPlotSpan = boxPlotMinCategorySpan(labels.length, groupCount);\n    const { width, margin } = getBoxPlotDimensions(chartBody);\n    const scrollViewportH = scroll.clientHeight || 300;\n    const availPlotH = scrollViewportH - margin.top;\n    const needsFixedXAxis =\n      model.orientation === 'horizontal' && minPlotSpan > availPlotH + 1;\n    this._fixedXAxis = needsFixedXAxis;\n\n    const theme = readThemeFromElement(this);\n\n    renderBoxPlotChart(root, {\n      model,\n      width,\n      height: scrollViewportH,\n      margin,\n      theme,\n      orientation: this.orientation,\n      showGrid: this.showGrid,\n      xAxisContainer: needsFixedXAxis ? xAxisRoot : null,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onBoxHover: this.showTooltip\n        ? ({ box, event }) => {\n            this.openTooltip(event, {\n              title: box.group ? `${box.group} · ${box.label}` : box.label,\n              rows: [\n                { label: 'min', value: String(box.smallestNonOutlier) },\n                { label: '25%', value: String(box.q1) },\n                { label: 'median', value: String(box.median) },\n                { label: '75%', value: String(box.q3) },\n                { label: 'max', value: String(box.biggestNonOutlier) },\n              ],\n            });\n          }\n        : undefined,\n      onBoxLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n\n    if (xAxisRoot && !needsFixedXAxis) {\n      xAxisRoot.replaceChildren();\n    }\n  }\n\n  private renderLegend(model: BoxPlotModel) {\n    if (!this.showLegend || model.groups.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(model.groups, theme, (group, i) => {\n        const sample = model.boxes.find((b) => (b.group ?? 'default') === group);\n        return sample?.color ?? fdSeriesColor(i);\n      }),\n    );\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const model = this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            ${this.renderLegend(model)}\n            <div class=\"chart-scroll\" part=\"scroll\">\n              <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n            </div>\n            <div\n              class=\"chart-x-axis\"\n              part=\"x-axis\"\n              ?hidden=${!this._fixedXAxis}\n            ></div>\n          </div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">No data</div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-box-plot-chart': Ui9000BoxPlotChart;\n  }\n}\n\nexport function registerBoxPlotChart(): void {\n  if (!customElements.get('ui9000-box-plot-chart')) {\n    customElements.define('ui9000-box-plot-chart', Ui9000BoxPlotChart);\n  }\n}\n\nregisterBoxPlotChart();\n"],"names":["fdSeriesColor"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { registerBoxPlotChart } from "./element/ui9000-box-plot-chart.js";
 import { Ui9000BoxPlotChart } from "./element/ui9000-box-plot-chart.js";
 import { renderBoxPlotChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
+import { normalizeBoxPlotData } from "./lib/normalize.js";
 import { boxPlotLinearDomain, collectLabels, collectValueExtent } from "./lib/domain.js";
 import { formatCompact } from "./lib/format.js";
-import { normalizeBoxPlotData } from "./lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000BoxPlotChart,
   default2 as boxPlotChartMetadata,

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

@@ -3,8 +3,8 @@ import { scaleBand, scaleLinear } from "d3-scale";
 import { select } from "d3-selection";
 import { resolvePlotLeftMargin, decorateAxisLabels, applyLeftGutterYAxisLabels } from "../../../utils/axis-labels.js";
 import { FD, formatCompactNumber, calculateNumTicks, seriesColor } from "../../../utils/fusedash-visual.js";
-import { boxPlotMinCategorySpan, BIN_SIZE, boxPlotGroupSpan, BIN_BORDER_RADIUS } from "../lib/layout.js";
 import { collectLabels, boxPlotLinearDomain } from "../lib/domain.js";
+import { boxPlotMinCategorySpan, BIN_SIZE, boxPlotGroupSpan, BIN_BORDER_RADIUS } from "../lib/layout.js";
 const OUTLIER_RADIUS = 3;
 const MEDIAN_STROKE = FD.axisLabelFill;
 const WHISKER_STROKE = FD.axisLabelFill;