@fusedashlabs/widgets 0.5.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-area-grouped-bar-chart.js","sources":["../../../../src/components/area-grouped-bar-chart/element/ui9000-area-grouped-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, type ChartLegendEntry } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { WidgetScale } from '../../../types/index.js';\nimport {\n  getAreaGroupedBarChartDimensions,\n  parseJsonAttr,\n} from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatAgbValue,\n  normalizeAreaGroupedBarData,\n  type AreaGroupedBarChartInput,\n  type AreaGroupedBarModel,\n} from '../lib/index.js';\nimport { renderAreaGroupedBarChart } from '../render/draw.js';\nimport { areaGroupedBarChartStyles } from './styles.js';\n\n@customElement('ui9000-area-grouped-bar-chart')\nexport class Ui9000AreaGroupedBarChart extends Ui9000ChartElement {\n  static override styles = [areaGroupedBarChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\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: { x: number; y: number; lines: string[] } | 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(): AreaGroupedBarModel {\n    const raw = parseJsonAttr<AreaGroupedBarChartInput>(this.dataJson, null);\n    return normalizeAreaGroupedBarData(raw);\n  }\n\n  private legendEntries(model: AreaGroupedBarModel): ChartLegendEntry[] {\n    const entries: ChartLegendEntry[] = [];\n    if (model.lineField) {\n      entries.push({\n        label: model.lineLabel || model.lineField,\n        swatch: { kind: 'line', color: model.lineColor },\n      });\n    }\n    for (const g of model.groups) {\n      entries.push({\n        label: g.label,\n        swatch: { kind: 'swatch', color: g.color, opacity: 0.85 },\n      });\n    }\n    return entries;\n  }\n\n  private renderLegend(model: AreaGroupedBarModel) {\n    if (!this.showLegend) return nothing;\n    const entries = this.legendEntries(model);\n    if (entries.length <= 1) return nothing;\n    return renderChartLegend(entries);\n  }\n\n  private tooltipLines(model: AreaGroupedBarModel, category: string): string[] {\n    const xLabel = model.axisDetails?.[model.xField]?.label ?? model.xField;\n    const lines: string[] = [`${xLabel}: ${category}`];\n\n    const gMap = model.barsByCategory[category] ?? {};\n    let barsSum = 0;\n    for (const g of model.groups) {\n      const v = gMap[g.key];\n      if (!Number.isFinite(v)) continue;\n      barsSum += v;\n      lines.push(`${g.label}: ${formatAgbValue(v)}`);\n    }\n\n    const linePt = model.linePoints.find((p) => p.x === category);\n    const lineValue = linePt?.y ?? barsSum;\n    if (Number.isFinite(lineValue)) {\n      const aLabel = model.lineLabel || model.lineField;\n      lines.push(`${aLabel}: ${formatAgbValue(lineValue)}`);\n    }\n    return lines;\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 =\n      model.categories.length === 0 &&\n      model.linePoints.length === 0 &&\n      model.groups.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getAreaGroupedBarChartDimensions(root);\n\n    renderAreaGroupedBarChart(root, {\n      model,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ category, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              lines: this.tooltipLines(model, category),\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 ? null : this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${model ? this.renderLegend(model) : nothing}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></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                ${this._tooltip.lines.map((line) => html`<div>${line}</div>`)}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-area-grouped-bar-chart': Ui9000AreaGroupedBarChart;\n  }\n}\n\nexport function registerAreaGroupedBarChart(): void {\n  if (!customElements.get('ui9000-area-grouped-bar-chart')) {\n    customElements.define('ui9000-area-grouped-bar-chart', Ui9000AreaGroupedBarChart);\n  }\n}\n\nregisterAreaGroupedBarChart();\n"],"names":["areaGroupedBarChartStyles"],"mappings":"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"}
+{"version":3,"file":"ui9000-area-grouped-bar-chart.js","sources":["../../../../src/components/area-grouped-bar-chart/element/ui9000-area-grouped-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, type ChartLegendEntry } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { WidgetScale } from '../../../types/index.js';\nimport {\n  getAreaGroupedBarChartDimensions,\n  parseJsonAttr,\n} from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatAgbValue,\n  normalizeAreaGroupedBarData,\n  type AreaGroupedBarChartInput,\n  type AreaGroupedBarModel,\n} from '../lib/index.js';\nimport { renderAreaGroupedBarChart } from '../render/draw.js';\nimport { areaGroupedBarChartStyles } from './styles.js';\n\n@customElement('ui9000-area-grouped-bar-chart')\nexport class Ui9000AreaGroupedBarChart extends Ui9000ChartElement {\n  static override styles = [areaGroupedBarChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\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(): AreaGroupedBarModel {\n    const raw = parseJsonAttr<AreaGroupedBarChartInput>(this.dataJson, null);\n    return normalizeAreaGroupedBarData(raw);\n  }\n\n  private legendEntries(model: AreaGroupedBarModel): ChartLegendEntry[] {\n    const entries: ChartLegendEntry[] = [];\n    if (model.lineField) {\n      entries.push({\n        label: model.lineLabel || model.lineField,\n        swatch: { kind: 'line', color: model.lineColor },\n      });\n    }\n    for (const g of model.groups) {\n      entries.push({\n        label: g.label,\n        swatch: { kind: 'swatch', color: g.color, opacity: 0.85 },\n      });\n    }\n    return entries;\n  }\n\n  private renderLegend(model: AreaGroupedBarModel) {\n    if (!this.showLegend) return nothing;\n    const entries = this.legendEntries(model);\n    if (entries.length <= 1) return nothing;\n    return renderChartLegend(entries);\n  }\n\n  private tooltipContent(\n    model: AreaGroupedBarModel,\n    category: string,\n  ): { rows: { label: string; value: string }[] } {\n    const xLabel = model.axisDetails?.[model.xField]?.label ?? model.xField;\n    const rows: { label: string; value: string }[] = [\n      { label: xLabel, value: category },\n    ];\n\n    const gMap = model.barsByCategory[category] ?? {};\n    let barsSum = 0;\n    for (const g of model.groups) {\n      const v = gMap[g.key];\n      if (!Number.isFinite(v)) continue;\n      barsSum += v;\n      rows.push({ label: g.label, value: formatAgbValue(v) });\n    }\n\n    const linePt = model.linePoints.find((p) => p.x === category);\n    const lineValue = linePt?.y ?? barsSum;\n    if (Number.isFinite(lineValue)) {\n      const aLabel = model.lineLabel || model.lineField;\n      rows.push({ label: aLabel, value: formatAgbValue(lineValue) });\n    }\n    return { rows };\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 =\n      model.categories.length === 0 &&\n      model.linePoints.length === 0 &&\n      model.groups.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getAreaGroupedBarChartDimensions(root);\n\n    renderAreaGroupedBarChart(root, {\n      model,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ category, event }) => {\n            this.openTooltip(event, this.tooltipContent(model, category));\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 ? null : this.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${model ? this.renderLegend(model) : nothing}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></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-area-grouped-bar-chart': Ui9000AreaGroupedBarChart;\n  }\n}\n\nexport function registerAreaGroupedBarChart(): void {\n  if (!customElements.get('ui9000-area-grouped-bar-chart')) {\n    customElements.define('ui9000-area-grouped-bar-chart', Ui9000AreaGroupedBarChart);\n  }\n}\n\nregisterAreaGroupedBarChart();\n"],"names":["areaGroupedBarChartStyles"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { registerAreaGroupedBarChart } from "./element/ui9000-area-grouped-bar-chart.js";
 import { Ui9000AreaGroupedBarChart } from "./element/ui9000-area-grouped-bar-chart.js";
 import { renderAreaGroupedBarChart } from "./render/draw.js";
+import { normalizeAreaGroupedBarData } from "./lib/normalize.js";
 import { default as default2 } from "./metadata.json.js";
 import { areaGroupedBarYDomain } from "./lib/domain.js";
 import { formatAgbAxisTick, formatAgbValue } from "./lib/format.js";
-import { normalizeAreaGroupedBarData } from "./lib/normalize.js";
 export {
   Ui9000AreaGroupedBarChart,
   default2 as areaGroupedBarChartMetadata,

package/dist/components/bar-chart/element/styles.js

@@ -5,7 +5,7 @@ const barChartStyles = css`
     position: relative;
     width: 100%;
     height: 100%;
-    min-height: 220px;
+    min-height: var(--ui9000-host-min-height, 220px);
     color: var(--ui9000-color-text, #111827);
     font-family: var(--ui9000-font-family, system-ui, sans-serif);
     box-sizing: border-box;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/bar-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const barChartStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n  .chart-body {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 240px);\n    display: flex;\n    flex-direction: column;\n  }\n  .chart-scroll {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 200px);\n    overflow-y: auto;\n    overflow-x: hidden;\n    position: relative;\n  }\n  .chart-x-axis {\n    flex-shrink: 0;\n    width: 100%;\n    min-height: 21px;\n    overflow: hidden;\n  }\n  .chart-root {\n    width: 100%;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 12px));\n    white-space: nowrap;\n  }\n  .tooltip .category {\n    font-weight: 600;\n    margin-bottom: 2px;\n  }\n  .tooltip .row {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .tooltip .swatch {\n    width: 8px;\n    height: 8px;\n    border-radius: 2px;\n    flex: none;\n  }\n  .tooltip .value {\n    margin-left: auto;\n    font-variant-numeric: tabular-nums;\n  }\n  .empty {\n    display: grid;\n    place-items: center;\n    height: 100%;\n    min-height: inherit;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/bar-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const barChartStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: var(--ui9000-host-min-height, 220px);\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n  .chart-body {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 240px);\n    display: flex;\n    flex-direction: column;\n  }\n  .chart-scroll {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 200px);\n    overflow-y: auto;\n    overflow-x: hidden;\n    position: relative;\n  }\n  .chart-x-axis {\n    flex-shrink: 0;\n    width: 100%;\n    min-height: 21px;\n    overflow: hidden;\n  }\n  .chart-root {\n    width: 100%;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 12px));\n    white-space: nowrap;\n  }\n  .tooltip .category {\n    font-weight: 600;\n    margin-bottom: 2px;\n  }\n  .tooltip .row {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .tooltip .swatch {\n    width: 8px;\n    height: 8px;\n    border-radius: 2px;\n    flex: none;\n  }\n  .tooltip .value {\n    margin-left: auto;\n    font-variant-numeric: tabular-nums;\n  }\n  .empty {\n    display: grid;\n    place-items: center;\n    height: 100%;\n    min-height: inherit;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/bar-chart/element/ui9000-bar-chart.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-bar-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/bar-chart/element/ui9000-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAI7F,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtE,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,cAAc,EAEpB,MAAM,iBAAiB,CAAC;AAIzB,qBACa,cAAe,SAAQ,kBAAkB;IACpD,OAAgB,MAAM,4BAAsC;IAG5D,KAAK,EAAE,WAAW,CAAa;IAG/B,WAAW,EAAE,cAAc,CAAc;IAEzC,8EAA8E;IAE9E,MAAM,EAAE,SAAS,CAAa;IAG9B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,4EAA4E;IAE5E,cAAc,UAAS;IAGvB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,OAAO,CAAC,QAAQ,CAKA;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;IAQzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAUtC,YAAY,IAAI,IAAI;IAS7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IA+BpB,OAAO,CAAC,IAAI;IA0EH,MAAM;CAwChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC"}
+{"version":3,"file":"ui9000-bar-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/bar-chart/element/ui9000-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAI7F,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtE,OAAO,EAML,KAAK,SAAS,EACd,KAAK,cAAc,EAEpB,MAAM,iBAAiB,CAAC;AAIzB,qBACa,cAAe,SAAQ,kBAAkB;IACpD,OAAgB,MAAM,4BAAsC;IAG5D,KAAK,EAAE,WAAW,CAAa;IAG/B,WAAW,EAAE,cAAc,CAAc;IAEzC,8EAA8E;IAE9E,MAAM,EAAE,SAAS,CAAa;IAG9B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,4EAA4E;IAE5E,cAAc,UAAS;IAGvB,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;IAQzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAUtC,YAAY,IAAI,IAAI;IAS7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IA+BpB,OAAO,CAAC,IAAI;IAsEH,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC"}

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

@@ -7,12 +7,12 @@ import { parseJsonAttr, getBarChartDimensions } from "../../../utils/chart-helpe
 import { lineLegendEntries, resolveSeriesLegendColor } from "../../../utils/chart-legend.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
 import { FD } from "../../../utils/fusedash-visual.js";
-import { renderBarChart } from "../render/draw.js";
-import { barChartStyles } from "./styles.js";
 import { normalizeBarData } from "../lib/normalize.js";
 import { collectBarCategories } from "../lib/domain.js";
 import { barHorizontalMinSpan } from "../lib/layout.js";
 import { formatCompact } from "../lib/format.js";
+import { renderBarChart } from "../render/draw.js";
+import { barChartStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -36,7 +36,6 @@ let Ui9000BarChart = class extends Ui9000ChartElement {
     this.cumulativeLine = false;
     this.xLabel = "";
     this.yLabel = "";
-    this._tooltip = null;
     this._empty = false;
     this._fixedXAxis = false;
     this._raf = 0;
@@ -153,17 +152,15 @@ let Ui9000BarChart = class extends Ui9000ChartElement {
       xAxisContainer: needsFixedXAxis ? xAxisRoot : null,
       ...this.axisLabelHandlers(),
       onHover: this.showTooltip ? ({ category, entries, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          category,
-          entries
-        };
+        this.openTooltip(event, {
+          title: category,
+          rows: entries.map((entry) => ({
+            label: entry.seriesName,
+            value: formatCompact(entry.value)
+          }))
+        });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
     if (xAxisRoot && !needsFixedXAxis) {
       xAxisRoot.replaceChildren();
@@ -188,20 +185,6 @@ let Ui9000BarChart = 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="category">${this._tooltip.category}</div>
-                ${this._tooltip.entries.map(
-      (entry) => html`<div class="row">
-                    <span class="swatch" style="background:${entry.color}"></span>
-                    <span>${entry.seriesName}</span>
-                    <span class="value">${formatCompact(entry.value)}</span>
-                  </div>`
-    )}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -236,9 +219,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "y-label" })
 ], Ui9000BarChart.prototype, "yLabel", 2);
-__decorateClass([
-  state()
-], Ui9000BarChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000BarChart.prototype, "_empty", 2);

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

@@ -46,6 +46,12 @@ declare const _default: {
       "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": [

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

@@ -12,7 +12,7 @@ const usageConditions = { "host": "mcp-chat", "notFor": "fusedash-editor", "maps
 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." }];
+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." };

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);