@fusedashlabs/widgets 0.5.0 → 0.6.0

package/dist/components/step-line-chart/element/ui9000-step-line-chart.js

@@ -8,10 +8,10 @@ import { lineLegendEntries } from "../../../utils/chart-legend.js";
 import { isFuseWidgetPayload, xDomainHintFromWidget } from "../../../utils/fuse-widget.js";
 import { FD } from "../../../utils/fusedash-visual.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { renderStepLineChart } from "../render/draw.js";
-import { stepLineChartStyles } from "./styles.js";
 import { normalizeStepLineData } from "../lib/normalize.js";
 import { formatCompact } from "../lib/format.js";
+import { renderStepLineChart } from "../render/draw.js";
+import { stepLineChartStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -33,7 +33,6 @@ let Ui9000StepLineChart = class extends Ui9000ChartElement {
     this.showTooltip = true;
     this.xLabel = "";
     this.yLabel = "";
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -107,17 +106,15 @@ let Ui9000StepLineChart = class extends Ui9000ChartElement {
       yLabel: this.yLabel || void 0,
       ...this.axisLabelHandlers(),
       onHover: this.showTooltip ? ({ xLabel, entries, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          xLabel,
-          entries
-        };
+        this.openTooltip(event, {
+          title: xLabel,
+          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
     });
   }
   render() {
@@ -130,20 +127,6 @@ let Ui9000StepLineChart = class extends Ui9000ChartElement {
           ${this.renderLegend(series)}
           <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">
-                    <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>
@@ -172,9 +155,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "y-label" })
 ], Ui9000StepLineChart.prototype, "yLabel", 2);
-__decorateClass([
-  state()
-], Ui9000StepLineChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000StepLineChart.prototype, "_empty", 2);

package/dist/components/step-line-chart/element/ui9000-step-line-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-step-line-chart.js","sources":["../../../../src/components/step-line-chart/element/ui9000-step-line-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 type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getStepLineDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport {\n  isFuseWidgetPayload,\n  xDomainHintFromWidget,\n  type FuseWidgetLike,\n} from '../../../utils/fuse-widget.js';\nimport { FD } from '../../../utils/fusedash-visual.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCompact,\n  normalizeStepLineData,\n  type StepLineChartData,\n  type StepLineGrafType,\n  type StepLineHoverEntry,\n  type StepLineSeries,\n} from '../lib/index.js';\nimport { renderStepLineChart } from '../render/draw.js';\nimport { stepLineChartStyles } from './styles.js';\n\n@customElement('ui9000-step-line-chart')\nexport class Ui9000StepLineChart extends Ui9000ChartElement {\n  static override styles = [stepLineChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: String, attribute: 'graf-type' })\n  grafType: StepLineGrafType = 'none';\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    xLabel: string;\n    entries: StepLineHoverEntry[];\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(): StepLineSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | StepLineChartData | StepLineSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeStepLineData(raw);\n  }\n\n  private xDomainHint(): string[] | undefined {\n    const raw = parseJsonAttr<unknown>(this.dataJson, null);\n    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);\n    return undefined;\n  }\n\n  private renderLegend(series: StepLineSeries[]) {\n    const overlay =\n      this.grafType === 'curve'\n        ? { label: 'Ideal', kind: 'line' as const, color: FD.stepIdealColor }\n        : this.grafType === 'line'\n          ? { label: 'Random guessing', kind: 'dashed-line' as const, color: '' }\n          : null;\n    const itemCount = series.length + (overlay ? 1 : 0);\n    if (!this.showLegend || itemCount <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const entries = lineLegendEntries(series, theme);\n    if (overlay) {\n      entries.push({\n        label: overlay.label,\n        swatch:\n          overlay.kind === 'dashed-line'\n            ? { kind: 'dashed-line', color: theme.textMuted }\n            : { kind: 'line', color: overlay.color },\n      });\n    }\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!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      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getStepLineDimensions(root);\n\n    renderStepLineChart(root, {\n      series,\n      width,\n      height,\n      margin,\n      theme,\n      grafType: this.grafType,\n      showGrid: this.showGrid,\n      xDomainHint: this.xDomainHint(),\n      showTooltip: this.showTooltip,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ xLabel, entries, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              xLabel,\n              entries,\n            };\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => { this._tooltip = null; } : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const series =\n      this._empty ? [] : this.parseData().filter((s) => s.points.length > 0);\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(series)}\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\">\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-step-line-chart': Ui9000StepLineChart;\n  }\n}\n\nexport function registerStepLineChart(): void {\n  if (!customElements.get('ui9000-step-line-chart')) {\n    customElements.define('ui9000-step-line-chart', Ui9000StepLineChart);\n  }\n}\n\nregisterStepLineChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-step-line-chart.js","sources":["../../../../src/components/step-line-chart/element/ui9000-step-line-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 type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getStepLineDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport {\n  isFuseWidgetPayload,\n  xDomainHintFromWidget,\n  type FuseWidgetLike,\n} from '../../../utils/fuse-widget.js';\nimport { FD } from '../../../utils/fusedash-visual.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCompact,\n  normalizeStepLineData,\n  type StepLineChartData,\n  type StepLineGrafType,\n  type StepLineSeries,\n} from '../lib/index.js';\nimport { renderStepLineChart } from '../render/draw.js';\nimport { stepLineChartStyles } from './styles.js';\n\n@customElement('ui9000-step-line-chart')\nexport class Ui9000StepLineChart extends Ui9000ChartElement {\n  static override styles = [stepLineChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: String, attribute: 'graf-type' })\n  grafType: StepLineGrafType = 'none';\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  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(): StepLineSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | StepLineChartData | StepLineSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeStepLineData(raw);\n  }\n\n  private xDomainHint(): string[] | undefined {\n    const raw = parseJsonAttr<unknown>(this.dataJson, null);\n    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);\n    return undefined;\n  }\n\n  private renderLegend(series: StepLineSeries[]) {\n    const overlay =\n      this.grafType === 'curve'\n        ? { label: 'Ideal', kind: 'line' as const, color: FD.stepIdealColor }\n        : this.grafType === 'line'\n          ? { label: 'Random guessing', kind: 'dashed-line' as const, color: '' }\n          : null;\n    const itemCount = series.length + (overlay ? 1 : 0);\n    if (!this.showLegend || itemCount <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const entries = lineLegendEntries(series, theme);\n    if (overlay) {\n      entries.push({\n        label: overlay.label,\n        swatch:\n          overlay.kind === 'dashed-line'\n            ? { kind: 'dashed-line', color: theme.textMuted }\n            : { kind: 'line', color: overlay.color },\n      });\n    }\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!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      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getStepLineDimensions(root);\n\n    renderStepLineChart(root, {\n      series,\n      width,\n      height,\n      margin,\n      theme,\n      grafType: this.grafType,\n      showGrid: this.showGrid,\n      xDomainHint: this.xDomainHint(),\n      showTooltip: this.showTooltip,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ xLabel, entries, event }) => {\n            this.openTooltip(event, {\n              title: xLabel,\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\n  override render() {\n    const title = this.headerTitle();\n    const series =\n      this._empty ? [] : this.parseData().filter((s) => s.points.length > 0);\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(series)}\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-step-line-chart': Ui9000StepLineChart;\n  }\n}\n\nexport function registerStepLineChart(): void {\n  if (!customElements.get('ui9000-step-line-chart')) {\n    customElements.define('ui9000-step-line-chart', Ui9000StepLineChart);\n  }\n}\n\nregisterStepLineChart();\n"],"names":[],"mappings":"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"}

package/dist/components/step-line-chart/index.js

@@ -1,10 +1,10 @@
 import { registerStepLineChart } from "./element/ui9000-step-line-chart.js";
 import { Ui9000StepLineChart } from "./element/ui9000-step-line-chart.js";
 import { renderStepLineChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
+import { normalizeStepLineData } from "./lib/normalize.js";
 import { averageYByX, collectStepXDomain, collectStepYDomain, isDateXDomain, orderStepXDomain, parseXDate } from "./lib/domain.js";
 import { formatCompact, selectTickIndices } from "./lib/format.js";
-import { normalizeStepLineData } from "./lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000StepLineChart,
   averageYByX,

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

@@ -4,7 +4,6 @@ export declare class Ui9000TreemapChart extends Ui9000ChartElement {
     static styles: import('lit').CSSResult[];
     showLegend: boolean;
     showTooltip: boolean;
-    private _tooltip;
     private _empty;
     private _rangeColors;
     private _resizeObserver?;

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-treemap-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/element/ui9000-treemap-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAa7F,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAA0C;IAGhE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAA6E;IAG7F,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,YAAY,CAAgB;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC;;;;OAIG;IACM,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,mEAAmE;IACnE,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,IAAI;IAyCZ,OAAO,CAAC,YAAY;IAKX,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}
+{"version":3,"file":"ui9000-treemap-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/element/ui9000-treemap-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAa7F,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAA0C;IAGhE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,YAAY,CAAgB;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC;;;;OAIG;IACM,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,mEAAmE;IACnE,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,IAAI;IAgCZ,OAAO,CAAC,YAAY;IAKX,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}

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

@@ -27,7 +27,6 @@ let Ui9000TreemapChart = class extends Ui9000ChartElement {
     super(...arguments);
     this.showLegend = true;
     this.showTooltip = true;
-    this._tooltip = null;
     this._empty = false;
     this._rangeColors = [];
     this._raf = 0;
@@ -69,18 +68,18 @@ let Ui9000TreemapChart = class extends Ui9000ChartElement {
     var _a;
     const { tile, group } = payload;
     const rows = [
-      { key: "Value", value: formatTreemapValue(tile.value, model.mode) }
+      { label: "Value", value: formatTreemapValue(tile.value, model.mode) }
     ];
     if (model.mode === "grouped") {
       if (group && model.categoryField) {
-        rows.push({ key: formatCapitalizedText(model.categoryField), value: group.label });
+        rows.push({ label: formatCapitalizedText(model.categoryField), value: group.label });
       }
       return { title: formatCapitalizedWords(tile.label), rows };
     }
     if (model.categoryField) {
       const detail = (_a = model.axisDetails) == null ? void 0 : _a[model.categoryField];
       rows.push({
-        key: (detail == null ? void 0 : detail.label) ?? model.categoryField,
+        label: (detail == null ? void 0 : detail.label) ?? model.categoryField,
         value: formatValueWithUnit(tile.label, detail)
       });
     }
@@ -106,16 +105,9 @@ let Ui9000TreemapChart = class extends Ui9000ChartElement {
       theme,
       showTooltip: this.showTooltip,
       onHover: this.showTooltip ? (payload) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: payload.event.clientX - rect.left,
-          y: payload.event.clientY - rect.top,
-          ...this.tooltipFor(model, payload)
-        };
+        this.openTooltip(payload.event, this.tooltipFor(model, payload));
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   renderLegend() {
@@ -131,14 +123,6 @@ let Ui9000TreemapChart = class extends Ui9000ChartElement {
           ${this.renderLegend()}
           <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"
-              >
-                ${this._tooltip.title ? html`<div class="tooltip-title">${this._tooltip.title}</div>` : nothing}
-                ${this._tooltip.rows.map((row) => html`<div>${row.key}: ${row.value}</div>`)}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -152,9 +136,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-tooltip" })
 ], Ui9000TreemapChart.prototype, "showTooltip", 2);
-__decorateClass([
-  state()
-], Ui9000TreemapChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000TreemapChart.prototype, "_empty", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-treemap-chart.js","sources":["../../../../src/components/treemap-chart/element/ui9000-treemap-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 { renderPaletteLegend } from '../../../element/chart-legend-render.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { getTreemapDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { formatValueWithUnit } from '../../../utils/axis-units.js';\nimport { formatCapitalizedText, formatCapitalizedWords } from '../../../utils/format-text.js';\nimport { formatTreemapValue } from '../lib/format.js';\nimport { normalizeTreemapData } from '../lib/normalize.js';\nimport type { TreemapChartData, TreemapModel } from '../lib/types.js';\nimport { renderTreemapChart, type TreemapHoverPayload } from '../render/draw.js';\nimport { treemapChartStyles } from './styles.js';\n\ntype TooltipRow = { key: string; value: string };\n\n@customElement('ui9000-treemap-chart')\nexport class Ui9000TreemapChart extends Ui9000ChartElement {\n  static override styles = [treemapChartStyles, chartShellStyles];\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; title?: string; rows: TooltipRow[] } | null = null;\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _rangeColors: string[] = [];\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  /**\n   * The palette legend only appears once the data is known, which shortens the\n   * plot — observing the plot box (not just the host) redraws it at the size it\n   * actually got.\n   */\n  override firstUpdated(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root');\n    if (root) this._resizeObserver?.observe(root);\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(): TreemapModel {\n    const raw = parseJsonAttr<TreemapChartData>(this.dataJson, null);\n    return normalizeTreemapData(raw);\n  }\n\n  /** Client tooltip: `Value` plus the dimension the tile encodes. */\n  private tooltipFor(model: TreemapModel, payload: TreemapHoverPayload): {\n    title?: string;\n    rows: TooltipRow[];\n  } {\n    const { tile, group } = payload;\n    const rows: TooltipRow[] = [\n      { key: 'Value', value: formatTreemapValue(tile.value, model.mode) },\n    ];\n\n    if (model.mode === 'grouped') {\n      // The tile is a subgroup value, so the second row names the card it sits\n      // in — the client labels it with `groupBy[0]` but prints the tile again.\n      if (group && model.categoryField) {\n        rows.push({ key: formatCapitalizedText(model.categoryField), value: group.label });\n      }\n      return { title: formatCapitalizedWords(tile.label), rows };\n    }\n\n    if (model.categoryField) {\n      const detail = model.axisDetails?.[model.categoryField];\n      rows.push({\n        key: detail?.label ?? model.categoryField,\n        value: formatValueWithUnit(tile.label, detail),\n      });\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 = model.mode === 'single' ? !model.tiles.length : !model.groups.length;\n    // Grouped cards ramp their own colors, so the shared strip is single-mode only.\n    this._rangeColors = !this._empty && model.mode === 'single' ? model.rangeColors : [];\n\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getTreemapDimensions(root);\n\n    renderTreemapChart(root, {\n      model,\n      width,\n      height,\n      theme,\n      showTooltip: this.showTooltip,\n      onHover: this.showTooltip\n        ? (payload) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: payload.event.clientX - rect.left,\n              y: payload.event.clientY - rect.top,\n              ...this.tooltipFor(model, payload),\n            };\n          }\n        : undefined,\n      onLeave: this.showTooltip\n        ? () => {\n            this._tooltip = null;\n          }\n        : undefined,\n    });\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || !this._rangeColors.length) return nothing;\n    return renderPaletteLegend(this._rangeColors);\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend()}\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                ${this._tooltip.title\n                  ? html`<div class=\"tooltip-title\">${this._tooltip.title}</div>`\n                  : nothing}\n                ${this._tooltip.rows.map((row) => html`<div>${row.key}: ${row.value}</div>`)}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-treemap-chart': Ui9000TreemapChart;\n  }\n}\n\nexport function registerTreemapChart(): void {\n  if (!customElements.get('ui9000-treemap-chart')) {\n    customElements.define('ui9000-treemap-chart', Ui9000TreemapChart);\n  }\n}\n\nregisterTreemapChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-treemap-chart.js","sources":["../../../../src/components/treemap-chart/element/ui9000-treemap-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 { renderPaletteLegend } from '../../../element/chart-legend-render.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { getTreemapDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { formatValueWithUnit } from '../../../utils/axis-units.js';\nimport { formatCapitalizedText, formatCapitalizedWords } from '../../../utils/format-text.js';\nimport { formatTreemapValue } from '../lib/format.js';\nimport { normalizeTreemapData } from '../lib/normalize.js';\nimport type { TreemapChartData, TreemapModel } from '../lib/types.js';\nimport { renderTreemapChart, type TreemapHoverPayload } from '../render/draw.js';\nimport { treemapChartStyles } from './styles.js';\n\ntype TooltipRow = { label: string; value: string };\n\n@customElement('ui9000-treemap-chart')\nexport class Ui9000TreemapChart extends Ui9000ChartElement {\n  static override styles = [treemapChartStyles, chartShellStyles];\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  @state()\n  private _rangeColors: string[] = [];\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  /**\n   * The palette legend only appears once the data is known, which shortens the\n   * plot — observing the plot box (not just the host) redraws it at the size it\n   * actually got.\n   */\n  override firstUpdated(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root');\n    if (root) this._resizeObserver?.observe(root);\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(): TreemapModel {\n    const raw = parseJsonAttr<TreemapChartData>(this.dataJson, null);\n    return normalizeTreemapData(raw);\n  }\n\n  /** Client tooltip: `Value` plus the dimension the tile encodes. */\n  private tooltipFor(model: TreemapModel, payload: TreemapHoverPayload): {\n    title?: string;\n    rows: TooltipRow[];\n  } {\n    const { tile, group } = payload;\n    const rows: TooltipRow[] = [\n      { label: 'Value', value: formatTreemapValue(tile.value, model.mode) },\n    ];\n\n    if (model.mode === 'grouped') {\n      // The tile is a subgroup value, so the second row names the card it sits\n      // in — the client labels it with `groupBy[0]` but prints the tile again.\n      if (group && model.categoryField) {\n        rows.push({ label: formatCapitalizedText(model.categoryField), value: group.label });\n      }\n      return { title: formatCapitalizedWords(tile.label), rows };\n    }\n\n    if (model.categoryField) {\n      const detail = model.axisDetails?.[model.categoryField];\n      rows.push({\n        label: detail?.label ?? model.categoryField,\n        value: formatValueWithUnit(tile.label, detail),\n      });\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 = model.mode === 'single' ? !model.tiles.length : !model.groups.length;\n    // Grouped cards ramp their own colors, so the shared strip is single-mode only.\n    this._rangeColors = !this._empty && model.mode === 'single' ? model.rangeColors : [];\n\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getTreemapDimensions(root);\n\n    renderTreemapChart(root, {\n      model,\n      width,\n      height,\n      theme,\n      showTooltip: this.showTooltip,\n      onHover: this.showTooltip\n        ? (payload) => {\n            this.openTooltip(payload.event, this.tooltipFor(model, payload));\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || !this._rangeColors.length) return nothing;\n    return renderPaletteLegend(this._rangeColors);\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend()}\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-treemap-chart': Ui9000TreemapChart;\n  }\n}\n\nexport function registerTreemapChart(): void {\n  if (!customElements.get('ui9000-treemap-chart')) {\n    customElements.define('ui9000-treemap-chart', Ui9000TreemapChart);\n  }\n}\n\nregisterTreemapChart();\n"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import { registerTreemapChart } from "./element/ui9000-treemap-chart.js";
 import { Ui9000TreemapChart } from "./element/ui9000-treemap-chart.js";
-import { default as default2 } from "./metadata.json.js";
-import { formatTreemapValue } from "./lib/format.js";
-import { hasLightColor, treemapColorForValue, treemapRangeColors, treemapValueRanges } from "./lib/color.js";
-import { normalizeTreemapData } from "./lib/normalize.js";
 import { renderTreemapChart } from "./render/draw.js";
+import { normalizeTreemapData } from "./lib/normalize.js";
+import { hasLightColor, treemapColorForValue, treemapRangeColors, treemapValueRanges } from "./lib/color.js";
 import { treemapGridTemplate } from "./lib/layout.js";
+import { formatTreemapValue } from "./lib/format.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000TreemapChart,
   formatTreemapValue,

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

@@ -4,9 +4,9 @@ import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { readThemeFromElement } from "../../../context/widget-context.js";
 import { parseJsonAttr, getViolinDimensions } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { normalizeViolinData } from "../lib/normalize.js";
 import { renderViolinChart } from "../render/draw.js";
 import { violinStyles } from "./styles.js";
-import { normalizeViolinData } from "../lib/normalize.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,11 +1,11 @@
 import { registerViolinChart } from "./element/ui9000-violin-chart.js";
 import { Ui9000ViolinChart } from "./element/ui9000-violin-chart.js";
 import { renderViolinChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
+import { normalizeViolinData, resolveViolinAxes } from "./lib/normalize.js";
 import { collectGroupIds, collectValueExtent, sampleExtent } from "./lib/domain.js";
 import { densityGrid, kde, quantile, silvermanBandwidth } from "./lib/stats.js";
 import { formatCompact } from "./lib/format.js";
-import { normalizeViolinData, resolveViolinAxes } from "./lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000ViolinChart,
   collectGroupIds,

package/dist/components/violin-chart/render/draw.js

@@ -5,7 +5,7 @@ import { area, curveCatmullRom } from "d3-shape";
 import { resolvePlotLeftMargin, decorateAxisLabels, applyLeftGutterYAxisLabels } from "../../../utils/axis-labels.js";
 import { FD, calculateNumTicks, formatCompactNumber, seriesColor } from "../../../utils/fusedash-visual.js";
 import { collectValueExtent, sampleExtent } from "../lib/domain.js";
-import { densityGrid, silvermanBandwidth, kde, quantile } from "../lib/stats.js";
+import { silvermanBandwidth, kde, densityGrid, quantile } from "../lib/stats.js";
 const BAND_PADDING = 0.2;
 const FILL_OPACITY = 0.18;
 const BOX_OPACITY = 0.25;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-waterfall-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/waterfall-chart/element/ui9000-waterfall-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAM7F,OAAO,EAIL,KAAK,oBAAoB,EAE1B,MAAM,iBAAiB,CAAC;AAIzB,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,MAAM,4BAAuC;IAE7D,mEAAmE;IAEnE,WAAW,EAAE,oBAAoB,CAAgB;IAGjD,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,OAAO,CAAC,QAAQ,CAQA;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;IAItC,YAAY,IAAI,IAAI;IAK7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,IAAI;IAkDH,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}
+{"version":3,"file":"ui9000-waterfall-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/waterfall-chart/element/ui9000-waterfall-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAM7F,OAAO,EAIL,KAAK,oBAAoB,EAE1B,MAAM,iBAAiB,CAAC;AAIzB,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,MAAM,4BAAuC;IAE7D,mEAAmE;IAEnE,WAAW,EAAE,oBAAoB,CAAgB;IAGjD,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,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;IAItC,YAAY,IAAI,IAAI;IAK7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,IAAI;IA6CH,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}

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

@@ -6,9 +6,9 @@ import { readThemeFromElement } from "../../../context/widget-context.js";
 import { parseJsonAttr, getWaterfallDimensions } from "../../../utils/chart-helpers.js";
 import { swatchLegendEntries } from "../../../utils/chart-legend.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { normalizeWaterfallData } from "../lib/normalize.js";
 import { renderWaterfallChart } from "../render/draw.js";
 import { waterfallStyles } from "./styles.js";
-import { normalizeWaterfallData } from "../lib/normalize.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -29,7 +29,6 @@ let Ui9000WaterfallChart = class extends Ui9000ChartElement {
     this.showTooltip = true;
     this.xLabel = "";
     this.yLabel = "";
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -98,20 +97,17 @@ let Ui9000WaterfallChart = class extends Ui9000ChartElement {
       yLabel: this.yLabel || void 0,
       ...this.axisLabelHandlers(),
       onStepHover: this.showTooltip ? ({ step, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          label: step.label,
-          start: step.start,
-          end: step.end,
-          difference: step.difference,
-          vector: step.vector
-        };
+        this.openTooltip(event, {
+          title: step.label,
+          rows: [
+            { label: "Start", value: String(step.start) },
+            { label: "End", value: String(step.end) },
+            { label: "Difference", value: String(step.difference) },
+            { label: "Vector", value: step.vector }
+          ]
+        });
       } : void 0,
-      onStepLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onStepLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -124,17 +120,6 @@ let Ui9000WaterfallChart = 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="name">${this._tooltip.label}</div>
-                <div>Start: ${this._tooltip.start}</div>
-                <div>End: ${this._tooltip.end}</div>
-                <div>Difference: ${this._tooltip.difference}</div>
-                <div>Vector: ${this._tooltip.vector}</div>
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -160,9 +145,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "y-label" })
 ], Ui9000WaterfallChart.prototype, "yLabel", 2);
-__decorateClass([
-  state()
-], Ui9000WaterfallChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000WaterfallChart.prototype, "_empty", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-waterfall-chart.js","sources":["../../../../src/components/waterfall-chart/element/ui9000-waterfall-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 { getWaterfallDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  normalizeWaterfallData,\n  type WaterfallChartData,\n  type WaterfallModel,\n  type WaterfallOrientation,\n  type WaterfallStep,\n} from '../lib/index.js';\nimport { renderWaterfallChart } from '../render/draw.js';\nimport { waterfallStyles } from './styles.js';\n\n@customElement('ui9000-waterfall-chart')\nexport class Ui9000WaterfallChart extends Ui9000ChartElement {\n  static override styles = [waterfallStyles, chartShellStyles];\n\n  /** Client WaterfallChart: horizontal (default mock) | vertical. */\n  @property({ type: String })\n  orientation: WaterfallOrientation = 'horizontal';\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    start: number;\n    end: number;\n    difference: number;\n    vector: string;\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  override firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): WaterfallModel {\n    const raw = parseJsonAttr<WaterfallChartData>(this.dataJson, [] as never);\n    const model = normalizeWaterfallData(raw);\n    if (this.orientation === 'horizontal' || this.orientation === 'vertical') {\n      return { ...model, orientation: this.orientation };\n    }\n    return model;\n  }\n\n  private renderLegend(model: WaterfallModel) {\n    if (!this.showLegend || model.steps.length === 0) return nothing;\n    const theme = readThemeFromElement(this);\n    const keys = ['positive', 'negative'];\n    const colors = [model.colors.positive, model.colors.negative];\n    return renderChartLegend(\n      swatchLegendEntries(keys, theme, (_k, i) => colors[i]!),\n    );\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as\n      | HTMLElement\n      | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    this._empty = model.steps.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const orientation = this.orientation;\n    const { width, height, margin } = getWaterfallDimensions(root, orientation);\n\n    renderWaterfallChart(root, {\n      model,\n      width,\n      height,\n      margin,\n      theme,\n      orientation,\n      showGrid: this.showGrid,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onStepHover: this.showTooltip\n        ? ({ step, event }: { step: WaterfallStep; event: MouseEvent }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              label: step.label,\n              start: step.start,\n              end: step.end,\n              difference: step.difference,\n              vector: step.vector,\n            };\n          }\n        : undefined,\n      onStepLeave: 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.parseData();\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\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\">${this._tooltip.label}</div>\n                <div>Start: ${this._tooltip.start}</div>\n                <div>End: ${this._tooltip.end}</div>\n                <div>Difference: ${this._tooltip.difference}</div>\n                <div>Vector: ${this._tooltip.vector}</div>\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-waterfall-chart': Ui9000WaterfallChart;\n  }\n}\n\nexport function registerWaterfallChart(): void {\n  if (!customElements.get('ui9000-waterfall-chart')) {\n    customElements.define('ui9000-waterfall-chart', Ui9000WaterfallChart);\n  }\n}\n\nregisterWaterfallChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-waterfall-chart.js","sources":["../../../../src/components/waterfall-chart/element/ui9000-waterfall-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 { getWaterfallDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  normalizeWaterfallData,\n  type WaterfallChartData,\n  type WaterfallModel,\n  type WaterfallOrientation,\n  type WaterfallStep,\n} from '../lib/index.js';\nimport { renderWaterfallChart } from '../render/draw.js';\nimport { waterfallStyles } from './styles.js';\n\n@customElement('ui9000-waterfall-chart')\nexport class Ui9000WaterfallChart extends Ui9000ChartElement {\n  static override styles = [waterfallStyles, chartShellStyles];\n\n  /** Client WaterfallChart: horizontal (default mock) | vertical. */\n  @property({ type: String })\n  orientation: WaterfallOrientation = 'horizontal';\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  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  override firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): WaterfallModel {\n    const raw = parseJsonAttr<WaterfallChartData>(this.dataJson, [] as never);\n    const model = normalizeWaterfallData(raw);\n    if (this.orientation === 'horizontal' || this.orientation === 'vertical') {\n      return { ...model, orientation: this.orientation };\n    }\n    return model;\n  }\n\n  private renderLegend(model: WaterfallModel) {\n    if (!this.showLegend || model.steps.length === 0) return nothing;\n    const theme = readThemeFromElement(this);\n    const keys = ['positive', 'negative'];\n    const colors = [model.colors.positive, model.colors.negative];\n    return renderChartLegend(\n      swatchLegendEntries(keys, theme, (_k, i) => colors[i]!),\n    );\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as\n      | HTMLElement\n      | null;\n    if (!root) return;\n\n    const model = this.parseData();\n    this._empty = model.steps.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const orientation = this.orientation;\n    const { width, height, margin } = getWaterfallDimensions(root, orientation);\n\n    renderWaterfallChart(root, {\n      model,\n      width,\n      height,\n      margin,\n      theme,\n      orientation,\n      showGrid: this.showGrid,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onStepHover: this.showTooltip\n        ? ({ step, event }: { step: WaterfallStep; event: MouseEvent }) => {\n            this.openTooltip(event, {\n              title: step.label,\n              rows: [\n                { label: 'Start', value: String(step.start) },\n                { label: 'End', value: String(step.end) },\n                { label: 'Difference', value: String(step.difference) },\n                { label: 'Vector', value: step.vector },\n              ],\n            });\n          }\n        : undefined,\n      onStepLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\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          ${this.renderLegend(model)}\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-waterfall-chart': Ui9000WaterfallChart;\n  }\n}\n\nexport function registerWaterfallChart(): void {\n  if (!customElements.get('ui9000-waterfall-chart')) {\n    customElements.define('ui9000-waterfall-chart', Ui9000WaterfallChart);\n  }\n}\n\nregisterWaterfallChart();\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { registerWaterfallChart } from "./element/ui9000-waterfall-chart.js";
 import { Ui9000WaterfallChart } from "./element/ui9000-waterfall-chart.js";
 import { renderWaterfallChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
+import { normalizeWaterfallData } from "./lib/normalize.js";
 import { collectLabels, collectValueExtent, waterfallLinearDomain } from "./lib/domain.js";
 import { formatCompact, formatSignedDiff } from "./lib/format.js";
-import { normalizeWaterfallData } from "./lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000WaterfallChart,
   collectLabels,

package/dist/element/chart-shell-render.d.ts

@@ -1,8 +1,11 @@
 import { nothing, TemplateResult } from 'lit';
 import { LabelTooltipState } from '../utils/chart-shell.js';
+import { WidgetHeaderHandlers, WidgetHeaderVariant } from './widget-header.js';
 export declare function renderWidgetHeader(options: {
     title: string;
+    variant?: WidgetHeaderVariant;
     menuOpen: boolean;
+    handlers?: WidgetHeaderHandlers;
     onMenuToggle: (e: Event) => void;
     onMenuClose: () => void;
     onDownload?: () => void;

package/dist/element/chart-shell-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-shell-render.d.ts","sourceRoot":"","sources":["../../src/element/chart-shell-render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,GAAG,cAAc,GAAG,OAAO,OAAO,CAoClC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,GAAG,cAAc,GAAG,OAAO,OAAO,CAS9F;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAI7D"}
+{"version":3,"file":"chart-shell-render.d.ts","sourceRoot":"","sources":["../../src/element/chart-shell-render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAYjE,OAAO,EAIL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAS5B,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,GAAG,cAAc,GAAG,OAAO,OAAO,CA0GlC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,GAAG,cAAc,GAAG,OAAO,OAAO,CAS9F;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAE7D"}