@fusedashlabs/widgets 0.4.5 → 0.6.0

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

@@ -7,9 +7,9 @@ import { parseJsonAttr, getRadarDimensions } from "../../../utils/chart-helpers.
 import { swatchLegendEntries, resolveSeriesLegendColor } from "../../../utils/chart-legend.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
 import { axisLabel, formatRadarValue } from "../lib/format.js";
+import { normalizeRadarData } from "../lib/normalize.js";
 import { renderRadarChart } from "../render/draw.js";
 import { radarChartStyles } from "./styles.js";
-import { normalizeRadarData } from "../lib/normalize.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -28,7 +28,6 @@ let Ui9000RadarChart = class extends Ui9000ChartElement {
     this.showGrid = true;
     this.showLegend = true;
     this.showTooltip = true;
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -94,19 +93,14 @@ let Ui9000RadarChart = class extends Ui9000ChartElement {
       showGrid: this.showGrid,
       showTooltip: this.showTooltip,
       onPointHover: this.showTooltip ? ({ category, value, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          xLabel,
-          yLabel,
-          xValue: category,
-          yValue: formatRadarValue(value)
-        };
+        this.openTooltip(event, {
+          rows: [
+            { label: xLabel, value: category },
+            { label: yLabel, value: formatRadarValue(value) }
+          ]
+        });
       } : void 0,
-      onPointLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onPointLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -119,14 +113,6 @@ let Ui9000RadarChart = class extends Ui9000ChartElement {
           ${this.renderLegend(model.series, model.groupBy)}
           <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>${this._tooltip.xLabel}: ${this._tooltip.xValue}</div>
-                <div>${this._tooltip.yLabel}: ${this._tooltip.yValue}</div>
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -146,9 +132,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-tooltip" })
 ], Ui9000RadarChart.prototype, "showTooltip", 2);
-__decorateClass([
-  state()
-], Ui9000RadarChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000RadarChart.prototype, "_empty", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-radar-chart.js","sources":["../../../../src/components/radar-chart/element/ui9000-radar-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 { CSS_VARS, readCssVar, readThemeFromElement } from '../../../context/widget-context.js';\nimport type { WidgetScale } from '../../../types/index.js';\nimport { getRadarDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries, resolveSeriesLegendColor } from '../../../utils/chart-legend.js';\nimport type { FuseWidgetLike } from '../../../utils/fuse-widget.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { formatRadarValue, axisLabel } from '../lib/format.js';\nimport {\n  normalizeRadarData,\n  type RadarChartData,\n  type RadarModel,\n  type RadarSeries,\n} from '../lib/index.js';\nimport { renderRadarChart } from '../render/draw.js';\nimport { radarChartStyles } from './styles.js';\n\n@customElement('ui9000-radar-chart')\nexport class Ui9000RadarChart extends Ui9000ChartElement {\n  static override styles = [radarChartStyles, 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: {\n    x: number;\n    y: number;\n    xLabel: string;\n    yLabel: string;\n    xValue: string;\n    yValue: 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  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): RadarModel {\n    const raw = parseJsonAttr<\n      RadarChartData | FuseWidgetLike | Array<{ label: string; value: number }>\n    >(this.dataJson, []);\n    return normalizeRadarData(raw);\n  }\n\n  private themeMode(): 'light' | 'dark' {\n    const mode = readCssVar(this, CSS_VARS.mode, 'light');\n    return mode === 'dark' ? 'dark' : 'light';\n  }\n\n  private renderLegend(series: RadarSeries[], groupBy?: string) {\n    if (!this.showLegend || !groupBy || series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(\n        series.map((s) => s.name ?? s.id),\n        theme,\n        (_group, i) => resolveSeriesLegendColor(series[i], i, theme),\n      ),\n    );\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 || model.categories.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getRadarDimensions(root);\n    const xLabel = axisLabel(model.xField, model.axisDetails);\n    const yLabel = axisLabel(model.yField, model.axisDetails);\n\n    renderRadarChart(root, {\n      series: model.series,\n      categories: model.categories,\n      width,\n      height,\n      margin,\n      theme,\n      themeMode: this.themeMode(),\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      onPointHover: this.showTooltip\n        ? ({ category, value, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              xLabel,\n              yLabel,\n              xValue: category,\n              yValue: formatRadarValue(value),\n            };\n          }\n        : undefined,\n      onPointLeave: this.showTooltip ? () => { this._tooltip = null; } : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const model = this._empty ? { series: [], categories: [], xField: '', yField: '' } : 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.series, model.groupBy)}\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>${this._tooltip.xLabel}: ${this._tooltip.xValue}</div>\n                <div>${this._tooltip.yLabel}: ${this._tooltip.yValue}</div>\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-radar-chart': Ui9000RadarChart;\n  }\n}\n\nexport function registerRadarChart(): void {\n  if (!customElements.get('ui9000-radar-chart')) {\n    customElements.define('ui9000-radar-chart', Ui9000RadarChart);\n  }\n}\n\nregisterRadarChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-radar-chart.js","sources":["../../../../src/components/radar-chart/element/ui9000-radar-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 { CSS_VARS, readCssVar, readThemeFromElement } from '../../../context/widget-context.js';\nimport type { WidgetScale } from '../../../types/index.js';\nimport { getRadarDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries, resolveSeriesLegendColor } from '../../../utils/chart-legend.js';\nimport type { FuseWidgetLike } from '../../../utils/fuse-widget.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { formatRadarValue, axisLabel } from '../lib/format.js';\nimport {\n  normalizeRadarData,\n  type RadarChartData,\n  type RadarModel,\n  type RadarSeries,\n} from '../lib/index.js';\nimport { renderRadarChart } from '../render/draw.js';\nimport { radarChartStyles } from './styles.js';\n\n@customElement('ui9000-radar-chart')\nexport class Ui9000RadarChart extends Ui9000ChartElement {\n  static override styles = [radarChartStyles, 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(): RadarModel {\n    const raw = parseJsonAttr<\n      RadarChartData | FuseWidgetLike | Array<{ label: string; value: number }>\n    >(this.dataJson, []);\n    return normalizeRadarData(raw);\n  }\n\n  private themeMode(): 'light' | 'dark' {\n    const mode = readCssVar(this, CSS_VARS.mode, 'light');\n    return mode === 'dark' ? 'dark' : 'light';\n  }\n\n  private renderLegend(series: RadarSeries[], groupBy?: string) {\n    if (!this.showLegend || !groupBy || series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(\n        series.map((s) => s.name ?? s.id),\n        theme,\n        (_group, i) => resolveSeriesLegendColor(series[i], i, theme),\n      ),\n    );\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 || model.categories.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getRadarDimensions(root);\n    const xLabel = axisLabel(model.xField, model.axisDetails);\n    const yLabel = axisLabel(model.yField, model.axisDetails);\n\n    renderRadarChart(root, {\n      series: model.series,\n      categories: model.categories,\n      width,\n      height,\n      margin,\n      theme,\n      themeMode: this.themeMode(),\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      onPointHover: this.showTooltip\n        ? ({ category, value, event }) => {\n            this.openTooltip(event, {\n              rows: [\n                { label: xLabel, value: category },\n                { label: yLabel, value: formatRadarValue(value) },\n              ],\n            });\n          }\n        : undefined,\n      onPointLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const model = this._empty ? { series: [], categories: [], xField: '', yField: '' } : 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.series, model.groupBy)}\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-radar-chart': Ui9000RadarChart;\n  }\n}\n\nexport function registerRadarChart(): void {\n  if (!customElements.get('ui9000-radar-chart')) {\n    customElements.define('ui9000-radar-chart', Ui9000RadarChart);\n  }\n}\n\nregisterRadarChart();\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { registerRadarChart } from "./element/ui9000-radar-chart.js";
 import { Ui9000RadarChart } from "./element/ui9000-radar-chart.js";
 import { renderRadarChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
+import { normalizeRadarData } from "./lib/normalize.js";
 import { collectRadarValues, hasRoomForRadialTicks, integerRange, radialScale } from "./lib/domain.js";
 import { formatRadarTick, formatRadarValue } from "./lib/format.js";
-import { normalizeRadarData } from "./lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000RadarChart,
   collectRadarValues,

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

@@ -7,7 +7,6 @@ export declare class Ui9000RadialBarChart extends Ui9000ChartElement {
     showGrid: boolean;
     showLegend: boolean;
     showTooltip: boolean;
-    private _tooltip;
     private _empty;
     /**
      * Model from the last draw. `render()` reads it for the legend so a paint

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-radial-bar-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/radial-bar-chart/element/ui9000-radial-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAc3D,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,MAAM,4BAA4C;IAGlE,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAKA;IAGhB,OAAO,CAAC,MAAM,CAAS;IAEvB;;;;OAIG;IAEH,OAAO,CAAC,MAAM,CAA+B;IAE7C,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;IAYpB,OAAO,CAAC,IAAI;IAkDH,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}
+{"version":3,"file":"ui9000-radial-bar-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/radial-bar-chart/element/ui9000-radial-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAc3D,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,MAAM,4BAA4C;IAGlE,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAEvB;;;;OAIG;IAEH,OAAO,CAAC,MAAM,CAA+B;IAE7C,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;IAYpB,OAAO,CAAC,IAAI;IAiDH,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}

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

@@ -6,10 +6,10 @@ import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { parseJsonAttr, getRadialBarDimensions } from "../../../utils/chart-helpers.js";
 import { swatchLegendEntries } from "../../../utils/chart-legend.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { renderRadialBarChart } from "../render/draw.js";
-import { radialBarChartStyles } from "./styles.js";
 import { normalizeRadialBarData } from "../lib/normalize.js";
 import { formatRadialBarCategory, formatRadialBarValue } from "../lib/format.js";
+import { renderRadialBarChart } from "../render/draw.js";
+import { radialBarChartStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -28,7 +28,6 @@ let Ui9000RadialBarChart = class extends Ui9000ChartElement {
     this.showGrid = true;
     this.showLegend = true;
     this.showTooltip = true;
-    this._tooltip = null;
     this._empty = false;
     this._model = null;
     this._raf = 0;
@@ -94,22 +93,23 @@ let Ui9000RadialBarChart = class extends Ui9000ChartElement {
       ...this.axisLabelHandlers(),
       onHover: this.showTooltip ? ({ bar, event }) => {
         var _a2, _b;
-        const rect = this.getBoundingClientRect();
         const xDetail = xField ? (_a2 = model.axisDetails) == null ? void 0 : _a2[xField] : void 0;
         const yDetail = yField ? (_b = model.axisDetails) == null ? void 0 : _b[yField] : void 0;
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
+        this.openTooltip(event, {
           title: formatRadialBarCategory(bar.label),
-          lines: [
-            `${(xDetail == null ? void 0 : xDetail.label) ?? xField ?? "Category"}: ${formatRadialBarCategory(bar.label, xDetail)}`,
-            `${(yDetail == null ? void 0 : yDetail.label) ?? yField ?? "Value"}: ${formatRadialBarValue(bar.value, yDetail)}`
+          rows: [
+            {
+              label: (xDetail == null ? void 0 : xDetail.label) ?? xField ?? "Category",
+              value: formatRadialBarCategory(bar.label, xDetail)
+            },
+            {
+              label: (yDetail == null ? void 0 : yDetail.label) ?? yField ?? "Value",
+              value: formatRadialBarValue(bar.value, yDetail)
+            }
           ]
-        };
+        });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -122,14 +122,6 @@ let Ui9000RadialBarChart = class extends Ui9000ChartElement {
           ${model ? this.renderLegend(model) : nothing}
           <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="tooltip-title">${this._tooltip.title}</div>
-                ${this._tooltip.lines.map((line) => html`<div>${line}</div>`)}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -149,9 +141,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-tooltip" })
 ], Ui9000RadialBarChart.prototype, "showTooltip", 2);
-__decorateClass([
-  state()
-], Ui9000RadialBarChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000RadialBarChart.prototype, "_empty", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-radial-bar-chart.js","sources":["../../../../src/components/radial-bar-chart/element/ui9000-radial-bar-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 type { WidgetScale } from '../../../types/index.js';\nimport { getRadialBarDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatRadialBarCategory,\n  formatRadialBarValue,\n  normalizeRadialBarData,\n  type RadialBarChartData,\n  type RadialBarModel,\n} from '../lib/index.js';\nimport { renderRadialBarChart } from '../render/draw.js';\nimport { radialBarChartStyles } from './styles.js';\n\n@customElement('ui9000-radial-bar-chart')\nexport class Ui9000RadialBarChart extends Ui9000ChartElement {\n  static override styles = [radialBarChartStyles, 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: {\n    x: number;\n    y: number;\n    title: string;\n    lines: string[];\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  /**\n   * Model from the last draw. `render()` reads it for the legend so a paint\n   * never re-parses the `data` attribute; `_`-prefixed state is ignored by\n   * `chartPropsChanged`, so assigning it cannot loop back into a redraw.\n   */\n  @state()\n  private _model: RadialBarModel | null = null;\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(): RadialBarModel {\n    const raw = parseJsonAttr<RadialBarChartData>(this.dataJson, null);\n    return normalizeRadialBarData(raw);\n  }\n\n  private renderLegend(model: RadialBarModel) {\n    if (!this.showLegend || !model.legend.length) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(\n        model.legend.map((bar) => bar.label),\n        theme,\n        (_label, index) => model.legend[index]?.color ?? theme.primary,\n      ),\n    );\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._model = model;\n    this._empty = model.bars.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getRadialBarDimensions(root, this.scale);\n    const xField = model.xField;\n    const yField = model.yField;\n\n    renderRadialBarChart(root, {\n      bars: model.bars,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ bar, event }) => {\n            const rect = this.getBoundingClientRect();\n            const xDetail = xField ? model.axisDetails?.[xField] : undefined;\n            const yDetail = yField ? model.axisDetails?.[yField] : undefined;\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              title: formatRadialBarCategory(bar.label),\n              lines: [\n                `${xDetail?.label ?? xField ?? 'Category'}: ${formatRadialBarCategory(bar.label, xDetail)}`,\n                `${yDetail?.label ?? yField ?? 'Value'}: ${formatRadialBarValue(bar.value, yDetail)}`,\n              ],\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._model;\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 ? 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=\"tooltip-title\">${this._tooltip.title}</div>\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-radial-bar-chart': Ui9000RadialBarChart;\n  }\n}\n\nexport function registerRadialBarChart(): void {\n  if (!customElements.get('ui9000-radial-bar-chart')) {\n    customElements.define('ui9000-radial-bar-chart', Ui9000RadialBarChart);\n  }\n}\n\nregisterRadialBarChart();\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"ui9000-radial-bar-chart.js","sources":["../../../../src/components/radial-bar-chart/element/ui9000-radial-bar-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 type { WidgetScale } from '../../../types/index.js';\nimport { getRadialBarDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatRadialBarCategory,\n  formatRadialBarValue,\n  normalizeRadialBarData,\n  type RadialBarChartData,\n  type RadialBarModel,\n} from '../lib/index.js';\nimport { renderRadialBarChart } from '../render/draw.js';\nimport { radialBarChartStyles } from './styles.js';\n\n@customElement('ui9000-radial-bar-chart')\nexport class Ui9000RadialBarChart extends Ui9000ChartElement {\n  static override styles = [radialBarChartStyles, 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  /**\n   * Model from the last draw. `render()` reads it for the legend so a paint\n   * never re-parses the `data` attribute; `_`-prefixed state is ignored by\n   * `chartPropsChanged`, so assigning it cannot loop back into a redraw.\n   */\n  @state()\n  private _model: RadialBarModel | null = null;\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(): RadialBarModel {\n    const raw = parseJsonAttr<RadialBarChartData>(this.dataJson, null);\n    return normalizeRadialBarData(raw);\n  }\n\n  private renderLegend(model: RadialBarModel) {\n    if (!this.showLegend || !model.legend.length) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(\n        model.legend.map((bar) => bar.label),\n        theme,\n        (_label, index) => model.legend[index]?.color ?? theme.primary,\n      ),\n    );\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._model = model;\n    this._empty = model.bars.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getRadialBarDimensions(root, this.scale);\n    const xField = model.xField;\n    const yField = model.yField;\n\n    renderRadialBarChart(root, {\n      bars: model.bars,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ bar, event }) => {\n            const xDetail = xField ? model.axisDetails?.[xField] : undefined;\n            const yDetail = yField ? model.axisDetails?.[yField] : undefined;\n            this.openTooltip(event, {\n              title: formatRadialBarCategory(bar.label),\n              rows: [\n                {\n                  label: xDetail?.label ?? xField ?? 'Category',\n                  value: formatRadialBarCategory(bar.label, xDetail),\n                },\n                {\n                  label: yDetail?.label ?? yField ?? 'Value',\n                  value: formatRadialBarValue(bar.value, yDetail),\n                },\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 ? null : this._model;\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 ? 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-radial-bar-chart': Ui9000RadialBarChart;\n  }\n}\n\nexport function registerRadialBarChart(): void {\n  if (!customElements.get('ui9000-radial-bar-chart')) {\n    customElements.define('ui9000-radial-bar-chart', Ui9000RadialBarChart);\n  }\n}\n\nregisterRadialBarChart();\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqBO,IAAM,uBAAN,cAAmC,mBAAmB;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AAIL,SAAA,QAAqB;AAGrB,SAAA,WAAW;AAGX,SAAA,aAAa;AAGb,SAAA,cAAc;AAGd,SAAQ,SAAS;AAQjB,SAAQ,SAAgC;AAGxC,SAAQ,OAAO;AAAA,EAAA;AAAA,EAEN,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,kBAAkB,IAAI,eAAe,MAAM,KAAK,cAAc;AACnE,SAAK,gBAAgB,QAAQ,IAAI;AAAA,EACnC;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;AAAA,EACvC;AAAA,EAEQ,eAAqB;AAC3B,yBAAqB,KAAK,IAAI;AAC9B,SAAK,OAAO,sBAAsB,MAAM,KAAK,MAAM;AAAA,EACrD;AAAA,EAEQ,YAA4B;AAClC,UAAM,MAAM,cAAkC,KAAK,UAAU,IAAI;AACjE,WAAO,uBAAuB,GAAG;AAAA,EACnC;AAAA,EAEQ,aAAa,OAAuB;AAC1C,QAAI,CAAC,KAAK,cAAc,CAAC,MAAM,OAAO,OAAQ,QAAO;AACrD,UAAM,QAAQ,qBAAqB,IAAI;AACvC,WAAO;AAAA,MACL;AAAA,QACE,MAAM,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK;AAAA,QACnC;AAAA,QACA,CAAC,QAAQ;;AAAU,8BAAM,OAAO,KAAK,MAAlB,mBAAqB,UAAS,MAAM;AAAA;AAAA,MAAA;AAAA,IACzD;AAAA,EAEJ;AAAA,EAEQ,OAAa;;AACnB,UAAM,QAAO,UAAK,eAAL,mBAAiB,cAAc;AAC5C,QAAI,CAAC,KAAM;AAEX,UAAM,QAAQ,KAAK,UAAA;AACnB,SAAK,SAAS;AACd,SAAK,SAAS,MAAM,KAAK,WAAW;AACpC,QAAI,KAAK,QAAQ;AACf,WAAK,gBAAA;AACL;AAAA,IACF;AAEc,yBAAqB,IAAI;AACvC,UAAM,EAAE,OAAO,QAAQ,OAAA,IAAW,uBAAuB,MAAM,KAAK,KAAK;AACzE,UAAM,SAAS,MAAM;AACrB,UAAM,SAAS,MAAM;AAErB,yBAAqB,MAAM;AAAA,MACzB,MAAM,MAAM;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAU,KAAK;AAAA,MACf,aAAa,KAAK;AAAA,MAClB,GAAG,KAAK,kBAAA;AAAA,MACR,SAAS,KAAK,cACV,CAAC,EAAE,KAAK,YAAY;;AAClB,cAAM,UAAU,UAASA,MAAA,MAAM,gBAAN,gBAAAA,IAAoB,UAAU;AACvD,cAAM,UAAU,UAAS,WAAM,gBAAN,mBAAoB,UAAU;AACvD,aAAK,YAAY,OAAO;AAAA,UACtB,OAAO,wBAAwB,IAAI,KAAK;AAAA,UACxC,MAAM;AAAA,YACJ;AAAA,cACE,QAAO,mCAAS,UAAS,UAAU;AAAA,cACnC,OAAO,wBAAwB,IAAI,OAAO,OAAO;AAAA,YAAA;AAAA,YAEnD;AAAA,cACE,QAAO,mCAAS,UAAS,UAAU;AAAA,cACnC,OAAO,qBAAqB,IAAI,OAAO,OAAO;AAAA,YAAA;AAAA,UAChD;AAAA,QACF,CACD;AAAA,MACH,IACA;AAAA,MACJ,SAAS,KAAK,cAAc,MAAM,KAAK,iBAAiB;AAAA,IAAA,CACzD;AAAA,EACH;AAAA,EAES,SAAS;AAChB,UAAM,QAAQ,KAAK,YAAA;AACnB,UAAM,QAAQ,KAAK,SAAS,OAAO,KAAK;AACxC,WAAO;AAAA;AAAA,UAED,KAAK,kBAAkB,KAAK,CAAC;AAAA;AAAA,YAE3B,QAAQ,KAAK,aAAa,KAAK,IAAI,OAAO;AAAA,yDACG,KAAK,MAAM;AAAA,YACxD,KAAK,SAAS,sDAAsD,OAAO;AAAA,YAC3E,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIxC;AACF;AAnIa,qBACK,SAAS,CAAC,sBAAsB,gBAAgB;AAGhE,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,SAAS;AAAA,GAHnC,qBAIX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GANxC,qBAOX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe;AAAA,GAT1C,qBAUX,WAAA,cAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAAA,GAZ3C,qBAaX,WAAA,eAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAfI,qBAgBH,WAAA,UAAA,CAAA;AAQA,gBAAA;AAAA,EADP,MAAA;AAAM,GAvBI,qBAwBH,WAAA,UAAA,CAAA;AAxBG,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;AA2IN,SAAS,yBAA+B;AAC7C,MAAI,CAAC,eAAe,IAAI,yBAAyB,GAAG;AAClD,mBAAe,OAAO,2BAA2B,oBAAoB;AAAA,EACvE;AACF;AAEA,uBAAA;"}

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

@@ -1,10 +1,10 @@
 import { registerRadialBarChart } from "./element/ui9000-radial-bar-chart.js";
 import { Ui9000RadialBarChart } from "./element/ui9000-radial-bar-chart.js";
-import { default as default2 } from "./metadata.json.js";
+import { renderRadialBarChart } from "./render/draw.js";
+import { normalizeRadialBarData } from "./lib/normalize.js";
 import { RADIAL_BAR_SWEEP, radialBarAngleScale, radialBarArcWidth, radialBarLabelLimit } from "./lib/domain.js";
 import { formatRadialBarCategory, formatRadialBarValue } from "./lib/format.js";
-import { normalizeRadialBarData } from "./lib/normalize.js";
-import { renderRadialBarChart } from "./render/draw.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   RADIAL_BAR_SWEEP,
   Ui9000RadialBarChart,

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

@@ -8,7 +8,6 @@ export declare class Ui9000SankeyChart extends Ui9000ChartElement {
     sourceLabel: string;
     /** Overrides the header above the right column. */
     targetLabel: string;
-    private _tooltip;
     private _view;
     private _resizeObserver?;
     private _raf;
@@ -19,8 +18,6 @@ export declare class Ui9000SankeyChart extends Ui9000ChartElement {
     private parseData;
     private renderLegend;
     private draw;
-    private setTooltip;
-    private clearTooltip;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-sankey-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAoC7F,qBACa,iBAAkB,SAAQ,kBAAkB;IACvD,OAAgB,MAAM,4BAAoC;IAG1D,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,kDAAkD;IAElD,WAAW,SAAM;IAEjB,mDAAmD;IAEnD,WAAW,SAAM;IAGjB,OAAO,CAAC,QAAQ,CAA6D;IAG7E,OAAO,CAAC,KAAK,CAA0B;IAEvC,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;IAIjB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;IAiDZ,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAIX,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C"}
+{"version":3,"file":"ui9000-sankey-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AA+B7F,qBACa,iBAAkB,SAAQ,kBAAkB;IACvD,OAAgB,MAAM,4BAAoC;IAG1D,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,kDAAkD;IAElD,WAAW,SAAM;IAEjB,mDAAmD;IAEnD,WAAW,SAAM;IAGjB,OAAO,CAAC,KAAK,CAA0B;IAEvC,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;IAIjB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;IA0DH,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C"}

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

@@ -5,12 +5,12 @@ import { renderPaletteLegend } from "../../../element/chart-legend-render.js";
 import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { parseJsonAttr, getSankeyDimensions } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { renderSankeyChart } from "../render/draw.js";
-import { sankeyStyles } from "./styles.js";
 import { normalizeSankeyData } from "../lib/normalize.js";
 import { buildColorRanges } from "../lib/domain.js";
-import { formatCapitalizedWords } from "../../../utils/format-text.js";
 import { formatSankeyValue } from "../lib/format.js";
+import { renderSankeyChart } from "../render/draw.js";
+import { sankeyStyles } from "./styles.js";
+import { formatCapitalizedWords } from "../../../utils/format-text.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -36,7 +36,6 @@ let Ui9000SankeyChart = class extends Ui9000ChartElement {
     this.showTooltip = true;
     this.sourceLabel = "";
     this.targetLabel = "";
-    this._tooltip = null;
     this._view = EMPTY_VIEW;
     this._raf = 0;
   }
@@ -96,28 +95,25 @@ let Ui9000SankeyChart = class extends Ui9000ChartElement {
       height,
       theme,
       onLinkHover: this.showTooltip ? ({ sourceLabel, targetLabel, value, event }) => {
-        this.setTooltip(event, [
-          { key: this._view.sourceLabel, value: formatCapitalizedWords(sourceLabel) },
-          { key: model.valueLabel, value: formatSankeyValue(value) },
-          { key: this._view.targetLabel, value: formatCapitalizedWords(targetLabel) }
-        ]);
+        this.openTooltip(event, {
+          rows: [
+            {
+              label: this._view.sourceLabel,
+              value: formatCapitalizedWords(sourceLabel)
+            },
+            { label: model.valueLabel, value: formatSankeyValue(value) },
+            {
+              label: this._view.targetLabel,
+              value: formatCapitalizedWords(targetLabel)
+            }
+          ]
+        });
       } : void 0,
-      onLinkLeave: this.showTooltip ? () => this.clearTooltip() : void 0,
-      onLabelHover: this.showTooltip ? ({ label, event }) => this.setTooltip(event, [{ key: "", value: label }]) : void 0,
-      onLabelLeave: this.showTooltip ? () => this.clearTooltip() : void 0
+      onLinkLeave: this.showTooltip ? () => this.closeTooltip() : void 0,
+      onLabelHover: this.showTooltip ? ({ label, event }) => this.openTooltip(event, { rows: [{ label: "", value: label }] }) : void 0,
+      onLabelLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
-  setTooltip(event, rows) {
-    const rect = this.getBoundingClientRect();
-    this._tooltip = {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
-      rows
-    };
-  }
-  clearTooltip() {
-    this._tooltip = null;
-  }
   render() {
     const { empty, circular, sourceLabel, targetLabel } = this._view;
     const showHeaders = !empty && Boolean(sourceLabel || targetLabel);
@@ -137,17 +133,6 @@ let Ui9000SankeyChart = class extends Ui9000ChartElement {
                 ${circular ? "Circular dependency detected in the data — this cannot be drawn as a Sankey." : "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.rows.map(
-      (row) => html`<div>
-                      ${row.key ? html`<span class="key">${row.key}:</span> ` : nothing}${row.value}
-                    </div>`
-    )}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -167,9 +152,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "target-label" })
 ], Ui9000SankeyChart.prototype, "targetLabel", 2);
-__decorateClass([
-  state()
-], Ui9000SankeyChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000SankeyChart.prototype, "_view", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-sankey-chart.js","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-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 { getSankeyDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  buildColorRanges,\n  formatCapitalizedWords,\n  formatSankeyValue,\n  normalizeSankeyData,\n  type SankeyColorRange,\n  type SankeyInput,\n  type SankeyModel,\n} from '../lib/index.js';\nimport { renderSankeyChart } from '../render/draw.js';\nimport { sankeyStyles } from './styles.js';\n\ninterface TooltipRow {\n  key: string;\n  value: string;\n}\n\ninterface SankeyView {\n  empty: boolean;\n  circular: boolean;\n  sourceLabel: string;\n  targetLabel: string;\n  colorRanges: SankeyColorRange[];\n}\n\nconst EMPTY_VIEW: SankeyView = {\n  empty: true,\n  circular: false,\n  sourceLabel: '',\n  targetLabel: '',\n  colorRanges: [],\n};\n\n@customElement('ui9000-sankey-chart')\nexport class Ui9000SankeyChart extends Ui9000ChartElement {\n  static override styles = [sankeyStyles, 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  /** Overrides the header above the left column. */\n  @property({ type: String, attribute: 'source-label' })\n  sourceLabel = '';\n\n  /** Overrides the header above the right column. */\n  @property({ type: String, attribute: 'target-label' })\n  targetLabel = '';\n\n  @state()\n  private _tooltip: { x: number; y: number; rows: TooltipRow[] } | null = null;\n\n  @state()\n  private _view: SankeyView = EMPTY_VIEW;\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(): SankeyModel {\n    return normalizeSankeyData(parseJsonAttr<SankeyInput>(this.dataJson, []));\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._view.empty || !this._view.colorRanges.length) {\n      return nothing;\n    }\n    return renderPaletteLegend(this._view.colorRanges.map((range) => range.color));\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    const colorRanges = buildColorRanges(\n      model.links.map((l) => l.value),\n      model.colors,\n    );\n\n    this._view = {\n      empty: model.links.length === 0,\n      circular: model.circular,\n      sourceLabel: this.sourceLabel || model.sourceLabel,\n      targetLabel: this.targetLabel || model.targetLabel,\n      colorRanges,\n    };\n\n    if (!model.links.length) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getSankeyDimensions(root);\n\n    renderSankeyChart(root, {\n      model,\n      colorRanges,\n      width,\n      height,\n      theme,\n      onLinkHover: this.showTooltip\n        ? ({ sourceLabel, targetLabel, value, event }) => {\n            this.setTooltip(event, [\n              { key: this._view.sourceLabel, value: formatCapitalizedWords(sourceLabel) },\n              { key: model.valueLabel, value: formatSankeyValue(value) },\n              { key: this._view.targetLabel, value: formatCapitalizedWords(targetLabel) },\n            ]);\n          }\n        : undefined,\n      onLinkLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n      onLabelHover: this.showTooltip\n        ? ({ label, event }) => this.setTooltip(event, [{ key: '', value: label }])\n        : undefined,\n      onLabelLeave: this.showTooltip ? () => this.clearTooltip() : undefined,\n    });\n  }\n\n  private setTooltip(event: MouseEvent, rows: TooltipRow[]): void {\n    const rect = this.getBoundingClientRect();\n    this._tooltip = {\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n      rows,\n    };\n  }\n\n  private clearTooltip(): void {\n    this._tooltip = null;\n  }\n\n  override render() {\n    const { empty, circular, sourceLabel, targetLabel } = this._view;\n    const showHeaders = !empty && Boolean(sourceLabel || targetLabel);\n\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          ${this.renderLegend()}\n          ${showHeaders\n            ? html`<div class=\"axis-labels\" part=\"axis-labels\">\n                <div>${sourceLabel}</div>\n                <div>${targetLabel}</div>\n              </div>`\n            : nothing}\n\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${empty}></div>\n\n          ${empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                ${circular\n                  ? 'Circular dependency detected in the data — this cannot be drawn as a Sankey.'\n                  : 'No data'}\n              </div>`\n            : nothing}\n\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.rows.map(\n                  (row) =>\n                    html`<div>\n                      ${row.key ? html`<span class=\"key\">${row.key}:</span> ` : nothing}${row.value}\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-sankey-chart': Ui9000SankeyChart;\n  }\n}\n\nexport function registerSankeyChart(): void {\n  if (!customElements.get('ui9000-sankey-chart')) {\n    customElements.define('ui9000-sankey-chart', Ui9000SankeyChart);\n  }\n}\n\nregisterSankeyChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-sankey-chart.js","sources":["../../../../src/components/sankey-chart/element/ui9000-sankey-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 { getSankeyDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  buildColorRanges,\n  formatCapitalizedWords,\n  formatSankeyValue,\n  normalizeSankeyData,\n  type SankeyColorRange,\n  type SankeyInput,\n  type SankeyModel,\n} from '../lib/index.js';\nimport { renderSankeyChart } from '../render/draw.js';\nimport { sankeyStyles } from './styles.js';\n\ninterface SankeyView {\n  empty: boolean;\n  circular: boolean;\n  sourceLabel: string;\n  targetLabel: string;\n  colorRanges: SankeyColorRange[];\n}\n\nconst EMPTY_VIEW: SankeyView = {\n  empty: true,\n  circular: false,\n  sourceLabel: '',\n  targetLabel: '',\n  colorRanges: [],\n};\n\n@customElement('ui9000-sankey-chart')\nexport class Ui9000SankeyChart extends Ui9000ChartElement {\n  static override styles = [sankeyStyles, 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  /** Overrides the header above the left column. */\n  @property({ type: String, attribute: 'source-label' })\n  sourceLabel = '';\n\n  /** Overrides the header above the right column. */\n  @property({ type: String, attribute: 'target-label' })\n  targetLabel = '';\n\n  @state()\n  private _view: SankeyView = EMPTY_VIEW;\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(): SankeyModel {\n    return normalizeSankeyData(parseJsonAttr<SankeyInput>(this.dataJson, []));\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._view.empty || !this._view.colorRanges.length) {\n      return nothing;\n    }\n    return renderPaletteLegend(this._view.colorRanges.map((range) => range.color));\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    const colorRanges = buildColorRanges(\n      model.links.map((l) => l.value),\n      model.colors,\n    );\n\n    this._view = {\n      empty: model.links.length === 0,\n      circular: model.circular,\n      sourceLabel: this.sourceLabel || model.sourceLabel,\n      targetLabel: this.targetLabel || model.targetLabel,\n      colorRanges,\n    };\n\n    if (!model.links.length) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getSankeyDimensions(root);\n\n    renderSankeyChart(root, {\n      model,\n      colorRanges,\n      width,\n      height,\n      theme,\n      onLinkHover: this.showTooltip\n        ? ({ sourceLabel, targetLabel, value, event }) => {\n            this.openTooltip(event, {\n              rows: [\n                {\n                  label: this._view.sourceLabel,\n                  value: formatCapitalizedWords(sourceLabel),\n                },\n                { label: model.valueLabel, value: formatSankeyValue(value) },\n                {\n                  label: this._view.targetLabel,\n                  value: formatCapitalizedWords(targetLabel),\n                },\n              ],\n            });\n          }\n        : undefined,\n      onLinkLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n      onLabelHover: this.showTooltip\n        ? ({ label, event }) =>\n            this.openTooltip(event, { rows: [{ label: '', value: label }] })\n        : undefined,\n      onLabelLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  override render() {\n    const { empty, circular, sourceLabel, targetLabel } = this._view;\n    const showHeaders = !empty && Boolean(sourceLabel || targetLabel);\n\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          ${this.renderLegend()}\n          ${showHeaders\n            ? html`<div class=\"axis-labels\" part=\"axis-labels\">\n                <div>${sourceLabel}</div>\n                <div>${targetLabel}</div>\n              </div>`\n            : nothing}\n\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${empty}></div>\n\n          ${empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                ${circular\n                  ? 'Circular dependency detected in the data — this cannot be drawn as a Sankey.'\n                  : 'No data'}\n              </div>`\n            : nothing}\n\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-sankey-chart': Ui9000SankeyChart;\n  }\n}\n\nexport function registerSankeyChart(): void {\n  if (!customElements.get('ui9000-sankey-chart')) {\n    customElements.define('ui9000-sankey-chart', Ui9000SankeyChart);\n  }\n}\n\nregisterSankeyChart();\n"],"names":[],"mappings":"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"}

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

@@ -1,12 +1,12 @@
 import { registerSankeyChart } from "./element/ui9000-sankey-chart.js";
 import { Ui9000SankeyChart } from "./element/ui9000-sankey-chart.js";
-import { default as default2 } from "./metadata.json.js";
+import { renderSankeyChart } from "./render/draw.js";
 import { MAX_SANKEY_LINKS, normalizeSankeyData } from "./lib/normalize.js";
-import { NODE_LABEL_MAX, formatSankeyValue, truncateNodeLabel } from "./lib/format.js";
 import { buildColorRanges, pickRangeColor } from "./lib/domain.js";
+import { NODE_LABEL_MAX, formatSankeyValue, truncateNodeLabel } from "./lib/format.js";
+import { default as default2 } from "./metadata.json.js";
 import { formatCapitalizedWords } from "../../utils/format-text.js";
 import { generateBreakPoints } from "../../utils/breakpoints.js";
-import { renderSankeyChart } from "./render/draw.js";
 export {
   MAX_SANKEY_LINKS,
   NODE_LABEL_MAX,

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

@@ -8,7 +8,6 @@ export declare class Ui9000ScatterPlot extends Ui9000ChartElement {
     showLegend: boolean;
     showTooltip: boolean;
     showReferenceLine: boolean;
-    private _tooltip;
     private _empty;
     private _resizeObserver?;
     private _raf;

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-scatter-plot.d.ts","sourceRoot":"","sources":["../../../../src/components/scatter-plot-chart/element/ui9000-scatter-plot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAY3D,qBACa,iBAAkB,SAAQ,kBAAkB;IACvD,OAAgB,MAAM,4BAAyC;IAG/D,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,iBAAiB,UAAS;IAG1B,OAAO,CAAC,QAAQ,CAA0D;IAG1E,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;IAYpB,OAAO,CAAC,IAAI;IAgDH,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C"}
+{"version":3,"file":"ui9000-scatter-plot.d.ts","sourceRoot":"","sources":["../../../../src/components/scatter-plot-chart/element/ui9000-scatter-plot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAY3D,qBACa,iBAAkB,SAAQ,kBAAkB;IACvD,OAAgB,MAAM,4BAAyC;IAG/D,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,iBAAiB,UAAS;IAG1B,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;IAYpB,OAAO,CAAC,IAAI;IA8CH,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAI1C"}

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

@@ -6,9 +6,9 @@ import { readThemeFromElement } from "../../../context/widget-context.js";
 import { parseJsonAttr, getScatterPlotDimensions } from "../../../utils/chart-helpers.js";
 import { swatchLegendEntries } from "../../../utils/chart-legend.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { normalizeScatterData } from "../lib/normalize.js";
 import { renderScatterPlot } from "../render/draw.js";
 import { scatterPlotStyles } from "./styles.js";
-import { normalizeScatterData } from "../lib/normalize.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -28,7 +28,6 @@ let Ui9000ScatterPlot = class extends Ui9000ChartElement {
     this.showLegend = true;
     this.showTooltip = true;
     this.showReferenceLine = false;
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -93,23 +92,19 @@ let Ui9000ScatterPlot = class extends Ui9000ChartElement {
       showTooltip: this.showTooltip,
       onHover: this.showTooltip ? ({ point, event }) => {
         var _a2, _b, _c, _d, _e, _f;
-        const rect = this.getBoundingClientRect();
         const xLabel = ((_b = (_a2 = model.axisDetails) == null ? void 0 : _a2[model.xField]) == null ? void 0 : _b.label) ?? model.xField;
         const yLabel = ((_d = (_c = model.axisDetails) == null ? void 0 : _c[model.yField]) == null ? void 0 : _d.label) ?? model.yField;
-        const lines = [`${xLabel}: ${point.x}`, `${yLabel}: ${point.y}`];
+        const rows = [
+          { label: xLabel, value: String(point.x) },
+          { label: yLabel, value: String(point.y) }
+        ];
         if (model.groupField) {
           const groupLabel = ((_f = (_e = model.axisDetails) == null ? void 0 : _e[model.groupField]) == null ? void 0 : _f.label) ?? model.groupField;
-          lines.push(`${groupLabel}: ${point.groupKey}`);
+          rows.push({ label: groupLabel, value: String(point.groupKey) });
         }
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          lines
-        };
+        this.openTooltip(event, { rows });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -124,13 +119,6 @@ let Ui9000ScatterPlot = class extends Ui9000ChartElement {
           ${this._empty ? html`<div class="empty" part="empty">
                 Scatterplot requires two numeric fields. Pick numeric X and Y axes.
               </div>` : nothing}
-          ${this._tooltip ? html`<div
-                class="tooltip"
-                part="tooltip"
-                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-              >
-                ${this._tooltip.lines.map((line) => html`<div>${line}</div>`)}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -153,9 +141,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-reference-line" })
 ], Ui9000ScatterPlot.prototype, "showReferenceLine", 2);
-__decorateClass([
-  state()
-], Ui9000ScatterPlot.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000ScatterPlot.prototype, "_empty", 2);