@fusedashlabs/widgets 0.5.0 → 0.6.0

package/dist/components/network-graph/element/ui9000-network-graph.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-network-graph.js","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.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 { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  FULL_RANGE,\n  formatLegendValue,\n  legendRanges,\n  normalizeNetworkGraphData,\n  rangeTrackOffset,\n  slideThumb,\n  sliderIndexFromPointer,\n  thumbTrackPercent,\n  visibleNodeIds,\n  type NetworkGraphInput,\n  type NetworkGraphModel,\n  type NetworkLegendRange,\n  type NetworkRange,\n} from '../lib/index.js';\nimport {\n  renderNetworkGraph,\n  resizeNetworkGraph,\n  stopNetworkGraph,\n  updateNetworkGraphVisibility,\n} from '../render/draw.js';\nimport { networkGraphStyles } from './styles.js';\n\n/** Same diameters as map `DEFAULT_BUBBLES_RADIUS` (7 size steps). */\nconst LEGEND_BUBBLE_SIZES = [10, 15, 20, 25, 30, 35, 40];\nconst MUTED_LEGEND_FILL = '#6C758429';\n\n@customElement('ui9000-network-graph')\nexport class Ui9000NetworkGraph extends Ui9000ChartElement {\n  static override styles = [networkGraphStyles, 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 _ranges: NetworkLegendRange[] = [];\n\n  @state()\n  private _range: NetworkRange = { ...FULL_RANGE };\n\n  @state()\n  private _legendOpen = true;\n\n  /** Non-reactive: selection is owned by the draw layer, redrawing would reset it. */\n  private _activeNodeId: string | null = null;\n\n  private _model: NetworkGraphModel | null = null;\n  private _legendDrag?: {\n    thumb: HTMLElement;\n    move: (e: PointerEvent) => void;\n    up: (e: PointerEvent) => void;\n  };\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _resizeRaf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    cancelAnimationFrame(this._resizeRaf);\n    this.stopLegendDrag();\n    const root = this.chartRoot();\n    if (root) stopNetworkGraph(root);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (changed.has('dataJson')) {\n      // New buckets: the old slider window and selection no longer mean anything.\n      this._range = { ...FULL_RANGE };\n      this._activeNodeId = null;\n      this._model = null;\n    }\n    if (changed.has('showTooltip') && !this.showTooltip) {\n      this._labelTooltip = null;\n    }\n    if (this.shouldRedraw(changed)) this.scheduleDraw();\n  }\n\n  /**\n   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force\n   * layout (same class of rule as filter/resize staying in place).\n   */\n  private shouldRedraw(changed: PropertyValues): boolean {\n    if (!chartPropsChanged(changed)) return false;\n    for (const key of changed.keys()) {\n      if (typeof key !== 'string' || key.startsWith('_')) continue;\n      if (key === 'showLegend' || key === 'showTooltip') continue;\n      return true;\n    }\n    return false;\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  /**\n   * A resize only re-frames the settled layout — re-running the force ticks\n   * would reshuffle the graph every time the chat pane changes width.\n   */\n  private scheduleResize(): void {\n    cancelAnimationFrame(this._resizeRaf);\n    this._resizeRaf = requestAnimationFrame(() => {\n      const root = this.chartRoot();\n      if (!root) return;\n      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();\n    });\n  }\n\n  private chartRoot(): HTMLElement | null {\n    return (this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null) ?? null;\n  }\n\n  private model(): NetworkGraphModel {\n    if (!this._model) {\n      this._model = normalizeNetworkGraphData(\n        parseJsonAttr<NetworkGraphInput | null>(this.dataJson, null),\n      );\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const root = this.chartRoot();\n    if (!root) return;\n\n    const model = this.model();\n    this._empty = model.nodes.length === 0;\n    this._ranges = legendRanges(model.breakpoints);\n\n    if (this._empty) {\n      stopNetworkGraph(root);\n      root.replaceChildren();\n      return;\n    }\n\n    renderNetworkGraph(root, {\n      model,\n      visibleIds: visibleNodeIds(model, this._range),\n      width: root.clientWidth,\n      height: root.clientHeight,\n      theme: readThemeFromElement(this),\n      activeNodeId: this._activeNodeId,\n      onSelect: (id) => {\n        this._activeNodeId = id;\n      },\n    });\n  }\n\n  private setRange(edge: 'leftSlider' | 'rightSlider', raw: number): void {\n    const next = slideThumb(this._range, edge, raw, this._ranges.length);\n    if (next.leftSlider === this._range.leftSlider && next.rightSlider === this._range.rightSlider) {\n      return;\n    }\n    this._range = next;\n    const root = this.chartRoot();\n    if (!root) return;\n    const visible = visibleNodeIds(this.model(), next);\n    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();\n  }\n\n  private startThumbDrag(edge: 'leftSlider' | 'rightSlider', e: PointerEvent): void {\n    const thumb = e.currentTarget;\n    if (!(thumb instanceof HTMLElement)) return;\n    const track = thumb.parentElement;\n    if (!track) return;\n    e.preventDefault();\n    e.stopPropagation();\n    thumb.setPointerCapture(e.pointerId);\n    this.stopLegendDrag();\n\n    const move = (ev: PointerEvent) => {\n      const index = sliderIndexFromPointer(\n        ev.clientX,\n        track.getBoundingClientRect(),\n        this._ranges.length,\n      );\n      this.setRange(edge, index);\n    };\n    const up = (ev: PointerEvent) => {\n      if (thumb.hasPointerCapture(ev.pointerId)) thumb.releasePointerCapture(ev.pointerId);\n      this.stopLegendDrag();\n    };\n    thumb.addEventListener('pointermove', move);\n    thumb.addEventListener('pointerup', up);\n    thumb.addEventListener('pointercancel', up);\n    this._legendDrag = { thumb, move, up };\n    move(e);\n  }\n\n  private stopLegendDrag(): void {\n    const drag = this._legendDrag;\n    if (!drag) return;\n    drag.thumb.removeEventListener('pointermove', drag.move);\n    drag.thumb.removeEventListener('pointerup', drag.up);\n    drag.thumb.removeEventListener('pointercancel', drag.up);\n    this._legendDrag = undefined;\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;\n    const { leftSlider, rightSlider } = this._range;\n    const last = this._ranges.length;\n    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();\n\n    return html`\n      <div class=\"graph-legend\" part=\"legend\">\n        <div class=\"legend-panel-header\">\n          <p class=\"legend-kicker\">Legend</p>\n          <button\n            type=\"button\"\n            class=\"legend-chevron\"\n            aria-expanded=${this._legendOpen}\n            aria-label=${this._legendOpen ? 'Collapse legend' : 'Expand legend'}\n            @click=${() => {\n              this._legendOpen = !this._legendOpen;\n            }}\n          ></button>\n        </div>\n        ${this._legendOpen\n          ? html`<div class=\"legend-layers\">\n              <div class=\"legend-layer\">\n                <div class=\"legend-details\">\n                  <div class=\"legend-scale\" data-kind=\"bubbles\">\n                    <div class=\"legend-colors\" data-qualitative>\n                      <div class=\"legend-range\">\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"left:${rangeTrackOffset('left', leftSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Smallest node size shown\"\n                            style=\"left:${thumbTrackPercent(leftSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('leftSlider', e)}\n                          ></button>\n                        </div>\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"right:${rangeTrackOffset('right', rightSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Largest node size shown\"\n                            style=\"left:${thumbTrackPercent(rightSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('rightSlider', e)}\n                          ></button>\n                        </div>\n                      </div>\n                      <div class=\"legend-buckets\">\n                        ${this._ranges.map((_range, index) => {\n                          const muted = !(leftSlider <= index && index < rightSlider);\n                          const bubble = LEGEND_BUBBLE_SIZES[index] ?? 12;\n                          const inner = bubble - 15 > 0 ? bubble - 15 : 0;\n                          return html`<span\n                            class=\"legend-bucket\"\n                            ?data-bubble=${true}\n                            ?data-inner=${inner > 0}\n                            ?data-qualitative=${true}\n                            ?data-muted=${muted}\n                            style=\"background:${MUTED_LEGEND_FILL};--bubble-size:${bubble}px;--inner-size:${inner}px\"\n                          ></span>`;\n                        })}\n                      </div>\n                    </div>\n                    <div class=\"legend-values\">\n                      ${this._ranges.map(\n                        (range) => html`<span\n                          class=\"legend-value\"\n                          @mouseenter=${this.showTooltip\n                            ? (e: MouseEvent) => onAxisLabelHover?.(String(range.start), e)\n                            : undefined}\n                          @mouseleave=${this.showTooltip ? onAxisLabelLeave : undefined}\n                          >${formatLegendValue(range.start, 2)}</span\n                        >`,\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this.renderLegend()}\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Network graph requires a nodes and links payload.\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-network-graph': Ui9000NetworkGraph;\n  }\n}\n\nexport function registerNetworkGraph(): void {\n  if (!customElements.get('ui9000-network-graph')) {\n    customElements.define('ui9000-network-graph', Ui9000NetworkGraph);\n  }\n}\n\nregisterNetworkGraph();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-network-graph.js","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.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 { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  FULL_RANGE,\n  formatLegendValue,\n  legendRanges,\n  normalizeNetworkGraphData,\n  rangeTrackOffset,\n  slideThumb,\n  sliderIndexFromPointer,\n  thumbTrackPercent,\n  visibleNodeIds,\n  type NetworkGraphInput,\n  type NetworkGraphModel,\n  type NetworkLegendRange,\n  type NetworkRange,\n} from '../lib/index.js';\nimport {\n  renderNetworkGraph,\n  resizeNetworkGraph,\n  stopNetworkGraph,\n  updateNetworkGraphVisibility,\n} from '../render/draw.js';\nimport { networkGraphStyles } from './styles.js';\n\n/** Same diameters as map `DEFAULT_BUBBLES_RADIUS` (7 size steps). */\nconst LEGEND_BUBBLE_SIZES = [10, 15, 20, 25, 30, 35, 40];\nconst MUTED_LEGEND_FILL = '#6C758429';\n\n@customElement('ui9000-network-graph')\nexport class Ui9000NetworkGraph extends Ui9000ChartElement {\n  static override styles = [networkGraphStyles, 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 _ranges: NetworkLegendRange[] = [];\n\n  @state()\n  private _range: NetworkRange = { ...FULL_RANGE };\n\n  @state()\n  private _legendOpen = true;\n\n  /** Non-reactive: selection is owned by the draw layer, redrawing would reset it. */\n  private _activeNodeId: string | null = null;\n\n  private _model: NetworkGraphModel | null = null;\n  private _legendDrag?: {\n    thumb: HTMLElement;\n    move: (e: PointerEvent) => void;\n    up: (e: PointerEvent) => void;\n  };\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _resizeRaf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    cancelAnimationFrame(this._resizeRaf);\n    this.stopLegendDrag();\n    const root = this.chartRoot();\n    if (root) stopNetworkGraph(root);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (changed.has('dataJson')) {\n      // New buckets: the old slider window and selection no longer mean anything.\n      this._range = { ...FULL_RANGE };\n      this._activeNodeId = null;\n      this._model = null;\n    }\n    if (changed.has('showTooltip') && !this.showTooltip) {\n      this._labelTooltip = null;\n      this.closeAllTooltips();\n    }\n    if (this.shouldRedraw(changed)) this.scheduleDraw();\n  }\n\n  /**\n   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force\n   * layout (same class of rule as filter/resize staying in place).\n   */\n  private shouldRedraw(changed: PropertyValues): boolean {\n    if (!chartPropsChanged(changed)) return false;\n    for (const key of changed.keys()) {\n      if (typeof key !== 'string' || key.startsWith('_')) continue;\n      if (key === 'showLegend' || key === 'showTooltip') continue;\n      return true;\n    }\n    return false;\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  /**\n   * A resize only re-frames the settled layout — re-running the force ticks\n   * would reshuffle the graph every time the chat pane changes width.\n   */\n  private scheduleResize(): void {\n    cancelAnimationFrame(this._resizeRaf);\n    this._resizeRaf = requestAnimationFrame(() => {\n      const root = this.chartRoot();\n      if (!root) return;\n      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();\n    });\n  }\n\n  private chartRoot(): HTMLElement | null {\n    return (this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null) ?? null;\n  }\n\n  private model(): NetworkGraphModel {\n    if (!this._model) {\n      this._model = normalizeNetworkGraphData(\n        parseJsonAttr<NetworkGraphInput | null>(this.dataJson, null),\n      );\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const root = this.chartRoot();\n    if (!root) return;\n\n    const model = this.model();\n    this._empty = model.nodes.length === 0;\n    this._ranges = legendRanges(model.breakpoints);\n\n    if (this._empty) {\n      stopNetworkGraph(root);\n      root.replaceChildren();\n      return;\n    }\n\n    renderNetworkGraph(root, {\n      model,\n      visibleIds: visibleNodeIds(model, this._range),\n      width: root.clientWidth,\n      height: root.clientHeight,\n      theme: readThemeFromElement(this),\n      activeNodeId: this._activeNodeId,\n      onSelect: (id) => {\n        this._activeNodeId = id;\n      },\n    });\n  }\n\n  private setRange(edge: 'leftSlider' | 'rightSlider', raw: number): void {\n    const next = slideThumb(this._range, edge, raw, this._ranges.length);\n    if (next.leftSlider === this._range.leftSlider && next.rightSlider === this._range.rightSlider) {\n      return;\n    }\n    this._range = next;\n    const root = this.chartRoot();\n    if (!root) return;\n    const visible = visibleNodeIds(this.model(), next);\n    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();\n  }\n\n  private startThumbDrag(edge: 'leftSlider' | 'rightSlider', e: PointerEvent): void {\n    const thumb = e.currentTarget;\n    if (!(thumb instanceof HTMLElement)) return;\n    const track = thumb.parentElement;\n    if (!track) return;\n    e.preventDefault();\n    e.stopPropagation();\n    thumb.setPointerCapture(e.pointerId);\n    this.stopLegendDrag();\n\n    const move = (ev: PointerEvent) => {\n      const index = sliderIndexFromPointer(\n        ev.clientX,\n        track.getBoundingClientRect(),\n        this._ranges.length,\n      );\n      this.setRange(edge, index);\n    };\n    const up = (ev: PointerEvent) => {\n      if (thumb.hasPointerCapture(ev.pointerId)) thumb.releasePointerCapture(ev.pointerId);\n      this.stopLegendDrag();\n    };\n    thumb.addEventListener('pointermove', move);\n    thumb.addEventListener('pointerup', up);\n    thumb.addEventListener('pointercancel', up);\n    this._legendDrag = { thumb, move, up };\n    move(e);\n  }\n\n  private stopLegendDrag(): void {\n    const drag = this._legendDrag;\n    if (!drag) return;\n    drag.thumb.removeEventListener('pointermove', drag.move);\n    drag.thumb.removeEventListener('pointerup', drag.up);\n    drag.thumb.removeEventListener('pointercancel', drag.up);\n    this._legendDrag = undefined;\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;\n    const { leftSlider, rightSlider } = this._range;\n    const last = this._ranges.length;\n    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();\n\n    return html`\n      <div class=\"graph-legend\" part=\"legend\">\n        <div class=\"legend-panel-header\">\n          <p class=\"legend-kicker\">Legend</p>\n          <button\n            type=\"button\"\n            class=\"legend-chevron\"\n            aria-expanded=${this._legendOpen}\n            aria-label=${this._legendOpen ? 'Collapse legend' : 'Expand legend'}\n            @click=${() => {\n              this._legendOpen = !this._legendOpen;\n            }}\n          ></button>\n        </div>\n        ${this._legendOpen\n          ? html`<div class=\"legend-layers\">\n              <div class=\"legend-layer\">\n                <div class=\"legend-details\">\n                  <div class=\"legend-scale\" data-kind=\"bubbles\">\n                    <div class=\"legend-colors\" data-qualitative>\n                      <div class=\"legend-range\">\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"left:${rangeTrackOffset('left', leftSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Smallest node size shown\"\n                            style=\"left:${thumbTrackPercent(leftSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('leftSlider', e)}\n                          ></button>\n                        </div>\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"right:${rangeTrackOffset('right', rightSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Largest node size shown\"\n                            style=\"left:${thumbTrackPercent(rightSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('rightSlider', e)}\n                          ></button>\n                        </div>\n                      </div>\n                      <div class=\"legend-buckets\">\n                        ${this._ranges.map((_range, index) => {\n                          const muted = !(leftSlider <= index && index < rightSlider);\n                          const bubble = LEGEND_BUBBLE_SIZES[index] ?? 12;\n                          const inner = bubble - 15 > 0 ? bubble - 15 : 0;\n                          return html`<span\n                            class=\"legend-bucket\"\n                            ?data-bubble=${true}\n                            ?data-inner=${inner > 0}\n                            ?data-qualitative=${true}\n                            ?data-muted=${muted}\n                            style=\"background:${MUTED_LEGEND_FILL};--bubble-size:${bubble}px;--inner-size:${inner}px\"\n                          ></span>`;\n                        })}\n                      </div>\n                    </div>\n                    <div class=\"legend-values\">\n                      ${this._ranges.map(\n                        (range) => html`<span\n                          class=\"legend-value\"\n                          @mouseenter=${this.showTooltip\n                            ? (e: MouseEvent) => onAxisLabelHover?.(String(range.start), e)\n                            : undefined}\n                          @mouseleave=${this.showTooltip ? onAxisLabelLeave : undefined}\n                          >${formatLegendValue(range.start, 2)}</span\n                        >`,\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this.renderLegend()}\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Network graph requires a nodes and links payload.\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-network-graph': Ui9000NetworkGraph;\n  }\n}\n\nexport function registerNetworkGraph(): void {\n  if (!customElements.get('ui9000-network-graph')) {\n    customElements.define('ui9000-network-graph', Ui9000NetworkGraph);\n  }\n}\n\nregisterNetworkGraph();\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,sBAAsB,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACvD,MAAM,oBAAoB;AAGnB,IAAM,qBAAN,cAAiC,mBAAmB;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA;AAIL,SAAA,aAAa;AAGb,SAAA,cAAc;AAGd,SAAQ,SAAS;AAGjB,SAAQ,UAAgC,CAAA;AAGxC,SAAQ,SAAuB,EAAE,GAAG,WAAA;AAGpC,SAAQ,cAAc;AAGtB,SAAQ,gBAA+B;AAEvC,SAAQ,SAAmC;AAO3C,SAAQ,OAAO;AACf,SAAQ,aAAa;AAAA,EAAA;AAAA,EAEZ,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,kBAAkB,IAAI,eAAe,MAAM,KAAK,gBAAgB;AACrE,SAAK,gBAAgB,QAAQ,IAAI;AAAA,EACnC;AAAA,EAES,uBAA6B;;AACpC,eAAK,oBAAL,mBAAsB;AACtB,yBAAqB,KAAK,IAAI;AAC9B,yBAAqB,KAAK,UAAU;AACpC,SAAK,eAAA;AACL,UAAM,OAAO,KAAK,UAAA;AAClB,QAAI,uBAAuB,IAAI;AAC/B,UAAM,qBAAA;AAAA,EACR;AAAA,EAES,QAAQ,SAA+B;AAC9C,QAAI,QAAQ,IAAI,UAAU,GAAG;AAE3B,WAAK,SAAS,EAAE,GAAG,WAAA;AACnB,WAAK,gBAAgB;AACrB,WAAK,SAAS;AAAA,IAChB;AACA,QAAI,QAAQ,IAAI,aAAa,KAAK,CAAC,KAAK,aAAa;AACnD,WAAK,gBAAgB;AACrB,WAAK,iBAAA;AAAA,IACP;AACA,QAAI,KAAK,aAAa,OAAO,QAAQ,aAAA;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,aAAa,SAAkC;AACrD,QAAI,CAAC,kBAAkB,OAAO,EAAG,QAAO;AACxC,eAAW,OAAO,QAAQ,QAAQ;AAChC,UAAI,OAAO,QAAQ,YAAY,IAAI,WAAW,GAAG,EAAG;AACpD,UAAI,QAAQ,gBAAgB,QAAQ,cAAe;AACnD,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,eAAqB;AAC3B,yBAAqB,KAAK,IAAI;AAC9B,SAAK,OAAO,sBAAsB,MAAM,KAAK,MAAM;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,iBAAuB;AAC7B,yBAAqB,KAAK,UAAU;AACpC,SAAK,aAAa,sBAAsB,MAAM;AAC5C,YAAM,OAAO,KAAK,UAAA;AAClB,UAAI,CAAC,KAAM;AACX,UAAI,CAAC,mBAAmB,MAAM,KAAK,aAAa,KAAK,YAAY,EAAG,MAAK,KAAA;AAAA,IAC3E,CAAC;AAAA,EACH;AAAA,EAEQ,YAAgC;;AACtC,aAAQ,UAAK,eAAL,mBAAiB,cAAc,mBAAyC;AAAA,EAClF;AAAA,EAEQ,QAA2B;AACjC,QAAI,CAAC,KAAK,QAAQ;AAChB,WAAK,SAAS;AAAA,QACZ,cAAwC,KAAK,UAAU,IAAI;AAAA,MAAA;AAAA,IAE/D;AACA,WAAO,KAAK;AAAA,EACd;AAAA,EAEQ,OAAa;AACnB,UAAM,OAAO,KAAK,UAAA;AAClB,QAAI,CAAC,KAAM;AAEX,UAAM,QAAQ,KAAK,MAAA;AACnB,SAAK,SAAS,MAAM,MAAM,WAAW;AACrC,SAAK,UAAU,aAAa,MAAM,WAAW;AAE7C,QAAI,KAAK,QAAQ;AACf,uBAAiB,IAAI;AACrB,WAAK,gBAAA;AACL;AAAA,IACF;AAEA,uBAAmB,MAAM;AAAA,MACvB;AAAA,MACA,YAAY,eAAe,OAAO,KAAK,MAAM;AAAA,MAC7C,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,MACb,OAAO,qBAAqB,IAAI;AAAA,MAChC,cAAc,KAAK;AAAA,MACnB,UAAU,CAAC,OAAO;AAChB,aAAK,gBAAgB;AAAA,MACvB;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEQ,SAAS,MAAoC,KAAmB;AACtE,UAAM,OAAO,WAAW,KAAK,QAAQ,MAAM,KAAK,KAAK,QAAQ,MAAM;AACnE,QAAI,KAAK,eAAe,KAAK,OAAO,cAAc,KAAK,gBAAgB,KAAK,OAAO,aAAa;AAC9F;AAAA,IACF;AACA,SAAK,SAAS;AACd,UAAM,OAAO,KAAK,UAAA;AAClB,QAAI,CAAC,KAAM;AACX,UAAM,UAAU,eAAe,KAAK,MAAA,GAAS,IAAI;AACjD,QAAI,CAAC,6BAA6B,MAAM,OAAO,QAAQ,aAAA;AAAA,EACzD;AAAA,EAEQ,eAAe,MAAoC,GAAuB;AAChF,UAAM,QAAQ,EAAE;AAChB,QAAI,EAAE,iBAAiB,aAAc;AACrC,UAAM,QAAQ,MAAM;AACpB,QAAI,CAAC,MAAO;AACZ,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,UAAM,kBAAkB,EAAE,SAAS;AACnC,SAAK,eAAA;AAEL,UAAM,OAAO,CAAC,OAAqB;AACjC,YAAM,QAAQ;AAAA,QACZ,GAAG;AAAA,QACH,MAAM,sBAAA;AAAA,QACN,KAAK,QAAQ;AAAA,MAAA;AAEf,WAAK,SAAS,MAAM,KAAK;AAAA,IAC3B;AACA,UAAM,KAAK,CAAC,OAAqB;AAC/B,UAAI,MAAM,kBAAkB,GAAG,SAAS,EAAG,OAAM,sBAAsB,GAAG,SAAS;AACnF,WAAK,eAAA;AAAA,IACP;AACA,UAAM,iBAAiB,eAAe,IAAI;AAC1C,UAAM,iBAAiB,aAAa,EAAE;AACtC,UAAM,iBAAiB,iBAAiB,EAAE;AAC1C,SAAK,cAAc,EAAE,OAAO,MAAM,GAAA;AAClC,SAAK,CAAC;AAAA,EACR;AAAA,EAEQ,iBAAuB;AAC7B,UAAM,OAAO,KAAK;AAClB,QAAI,CAAC,KAAM;AACX,SAAK,MAAM,oBAAoB,eAAe,KAAK,IAAI;AACvD,SAAK,MAAM,oBAAoB,aAAa,KAAK,EAAE;AACnD,SAAK,MAAM,oBAAoB,iBAAiB,KAAK,EAAE;AACvD,SAAK,cAAc;AAAA,EACrB;AAAA,EAEQ,eAAe;AACrB,QAAI,CAAC,KAAK,cAAc,KAAK,UAAU,KAAK,QAAQ,SAAS,EAAG,QAAO;AACvE,UAAM,EAAE,YAAY,YAAA,IAAgB,KAAK;AACzC,UAAM,OAAO,KAAK,QAAQ;AAC1B,UAAM,EAAE,kBAAkB,qBAAqB,KAAK,kBAAA;AAEpD,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOiB,KAAK,WAAW;AAAA,yBACnB,KAAK,cAAc,oBAAoB,eAAe;AAAA,qBAC1D,MAAM;AACb,WAAK,cAAc,CAAC,KAAK;AAAA,IAC3B,CAAC;AAAA;AAAA;AAAA,UAGH,KAAK,cACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAQ4B,iBAAiB,QAAQ,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAMxC,kBAAkB,YAAY,IAAI,CAAC;AAAA,2CAClC,CAAC,MAAoB,KAAK,eAAe,cAAc,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yCAK3D,iBAAiB,SAAS,aAAa,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAM3C,kBAAkB,aAAa,IAAI,CAAC;AAAA,2CACnC,CAAC,MAAoB,KAAK,eAAe,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK3E,KAAK,QAAQ,IAAI,CAAC,QAAQ,UAAU;AACpC,YAAM,QAAQ,EAAE,cAAc,SAAS,QAAQ;AAC/C,YAAM,SAAS,oBAAoB,KAAK,KAAK;AAC7C,YAAM,QAAQ,SAAS,KAAK,IAAI,SAAS,KAAK;AAC9C,aAAO;AAAA;AAAA,2CAEU,IAAI;AAAA,0CACL,QAAQ,CAAC;AAAA,gDACH,IAAI;AAAA,0CACV,KAAK;AAAA,gDACC,iBAAiB,kBAAkB,MAAM,mBAAmB,KAAK;AAAA;AAAA,IAEzF,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIF,KAAK,QAAQ;AAAA,MACb,CAAC,UAAU;AAAA;AAAA,wCAEK,KAAK,cACf,CAAC,MAAkB,qDAAmB,OAAO,MAAM,KAAK,GAAG,KAC3D,MAAS;AAAA,wCACC,KAAK,cAAc,mBAAmB,MAAS;AAAA,6BAC1D,kBAAkB,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA,IAAA,CAEvC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMX,OAAO;AAAA;AAAA;AAAA,EAGjB;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,UAED,KAAK,kBAAkB,KAAK,YAAA,CAAa,CAAC;AAAA;AAAA,yDAEK,KAAK,MAAM;AAAA,YACxD,KAAK,cAAc;AAAA,YACnB,KAAK,SACH;AAAA;AAAA,wBAGA,OAAO;AAAA,YACT,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIxC;AACF;AApSa,mBACK,SAAS,CAAC,oBAAoB,gBAAgB;AAG9D,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe;AAAA,GAH1C,mBAIX,WAAA,cAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAAA,GAN3C,mBAOX,WAAA,eAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GATI,mBAUH,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAZI,mBAaH,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAfI,mBAgBH,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAlBI,mBAmBH,WAAA,eAAA,CAAA;AAnBG,qBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,kBAAA;AA4SN,SAAS,uBAA6B;AAC3C,MAAI,CAAC,eAAe,IAAI,sBAAsB,GAAG;AAC/C,mBAAe,OAAO,wBAAwB,kBAAkB;AAAA,EAClE;AACF;AAEA,qBAAA;"}

package/dist/components/network-graph/index.js

@@ -1,10 +1,10 @@
 import { registerNetworkGraph } from "./element/ui9000-network-graph.js";
 import { Ui9000NetworkGraph } from "./element/ui9000-network-graph.js";
-import { default as default2 } from "./metadata.json.js";
-import { FULL_RANGE, LINK_COLORS, NODE_SIZES, NODE_TYPE_COLORS, SIZE_KEYS, isFullRange, legendRanges, networkForces, nodeColor, nodeRadius, nodeSizeKey, rangeIndexOf, scaleLinkWidthByMax, visibleNodeIds } from "./lib/domain.js";
+import { renderNetworkGraph, resizeNetworkGraph, stopNetworkGraph, updateNetworkGraphVisibility } from "./render/draw.js";
 import { MAX_NETWORK_LINKS, MAX_NETWORK_NODES, normalizeNetworkGraphData } from "./lib/normalize.js";
+import { FULL_RANGE, LINK_COLORS, NODE_SIZES, NODE_TYPE_COLORS, SIZE_KEYS, isFullRange, legendRanges, networkForces, nodeColor, nodeRadius, nodeSizeKey, rangeIndexOf, scaleLinkWidthByMax, visibleNodeIds } from "./lib/domain.js";
 import { formatLegendValue, formatLinkValue, formatNodeValue } from "./lib/format.js";
-import { renderNetworkGraph, resizeNetworkGraph, stopNetworkGraph, updateNetworkGraphVisibility } from "./render/draw.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   FULL_RANGE,
   LINK_COLORS,

package/dist/components/parallel-coordinates-chart/element/ui9000-parallel-coordinates-chart.d.ts

@@ -10,7 +10,6 @@ export declare class Ui9000ParallelCoordinatesChart extends Ui9000ChartElement {
     showTooltip: boolean;
     /** Axis whose value colours the lines; clicking an axis changes it. */
     colorKey: string;
-    private _tooltip;
     private _activeColorKey;
     private _empty;
     private _resizeObserver?;

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-parallel-coordinates-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/parallel-coordinates-chart/element/ui9000-parallel-coordinates-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAO7F,OAAO,EAKL,KAAK,8BAA8B,EACpC,MAAM,iBAAiB,CAAC;AAWzB,qBACa,8BAA+B,SAAQ,kBAAkB;IACpE,OAAgB,MAAM,4BAAiD;IAEvE,0EAA0E;IAE1E,WAAW,EAAE,8BAA8B,GAAG,EAAE,CAAM;IAEtD,qEAAqE;IAErE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,uEAAuE;IAEvE,QAAQ,SAAM;IAGd,OAAO,CAAC,QAAQ,CAAsB;IAGtC,OAAO,CAAC,eAAe,CAAM;IAG7B,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAOpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,IAAI;IAmDH,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mCAAmC,EAAE,8BAA8B,CAAC;KACrE;CACF;AAED,wBAAgB,gCAAgC,IAAI,IAAI,CAOvD"}
+{"version":3,"file":"ui9000-parallel-coordinates-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/parallel-coordinates-chart/element/ui9000-parallel-coordinates-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAO7F,OAAO,EAKL,KAAK,8BAA8B,EACpC,MAAM,iBAAiB,CAAC;AAIzB,qBACa,8BAA+B,SAAQ,kBAAkB;IACpE,OAAgB,MAAM,4BAAiD;IAEvE,0EAA0E;IAE1E,WAAW,EAAE,8BAA8B,GAAG,EAAE,CAAM;IAEtD,qEAAqE;IAErE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAEnB,uEAAuE;IAEvE,QAAQ,SAAM;IAGd,OAAO,CAAC,eAAe,CAAM;IAG7B,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAOpB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,IAAI;IA4CH,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mCAAmC,EAAE,8BAA8B,CAAC;KACrE;CACF;AAED,wBAAgB,gCAAgC,IAAI,IAAI,CAOvD"}

package/dist/components/parallel-coordinates-chart/element/ui9000-parallel-coordinates-chart.js

@@ -4,10 +4,10 @@ import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { readThemeFromElement } from "../../../context/widget-context.js";
 import { parseJsonAttr, getParallelCoordinatesDimensions } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { renderParallelCoordinatesChart } from "../render/draw.js";
-import { parallelCoordinatesStyles } from "./styles.js";
 import { normalizeParallelCoordinatesData } from "../lib/normalize.js";
 import { formatTooltipValue } from "../lib/format.js";
+import { renderParallelCoordinatesChart } from "../render/draw.js";
+import { parallelCoordinatesStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,7 +26,6 @@ let Ui9000ParallelCoordinatesChart = class extends Ui9000ChartElement {
     this.showLegend = true;
     this.showTooltip = true;
     this.colorKey = "";
-    this._tooltip = null;
     this._activeColorKey = "";
     this._empty = false;
     this._raf = 0;
@@ -92,20 +91,15 @@ let Ui9000ParallelCoordinatesChart = class extends Ui9000ChartElement {
         this._activeColorKey = key;
       },
       onRowHover: this.showTooltip ? ({ row, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          id: model.idKey ? `${model.idKey}: ${row.id}` : row.id,
+        this.openTooltip(event, {
+          title: row.id,
           rows: model.axes.map((key) => ({
-            key,
+            label: key,
             value: formatTooltipValue(row.values[key])
           }))
-        };
+        });
       } : void 0,
-      onRowLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onRowLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -121,20 +115,6 @@ let Ui9000ParallelCoordinatesChart = class extends Ui9000ChartElement {
             </div>
           </div>
           ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
-          ${this._tooltip ? html`<div
-                class="tooltip"
-                part="tooltip"
-                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-              >
-                <div class="name">${this._tooltip.id}</div>
-                ${this._tooltip.rows.map(
-      (row) => html`<div
-                    class="row ${row.key === (this.colorKey || this._activeColorKey) ? "is-active" : ""}"
-                  >
-                    <span>${row.key}</span><span>${row.value}</span>
-                  </div>`
-    )}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -154,9 +134,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "color-key" })
 ], Ui9000ParallelCoordinatesChart.prototype, "colorKey", 2);
-__decorateClass([
-  state()
-], Ui9000ParallelCoordinatesChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000ParallelCoordinatesChart.prototype, "_activeColorKey", 2);

package/dist/components/parallel-coordinates-chart/element/ui9000-parallel-coordinates-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-parallel-coordinates-chart.js","sources":["../../../../src/components/parallel-coordinates-chart/element/ui9000-parallel-coordinates-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 { readThemeFromElement } from '../../../context/widget-context.js';\nimport {\n  getParallelCoordinatesDimensions,\n  parseJsonAttr,\n} from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatTooltipValue,\n  normalizeParallelCoordinatesData,\n  type ParallelCoordinatesInput,\n  type ParallelCoordinatesModel,\n  type ParallelCoordinatesOrientation,\n} from '../lib/index.js';\nimport { renderParallelCoordinatesChart } from '../render/draw.js';\nimport { parallelCoordinatesStyles } from './styles.js';\n\ntype TooltipState = {\n  x: number;\n  y: number;\n  id: string;\n  rows: Array<{ key: string; value: string }>;\n} | null;\n\n@customElement('ui9000-parallel-coordinates-chart')\nexport class Ui9000ParallelCoordinatesChart extends Ui9000ChartElement {\n  static override styles = [parallelCoordinatesStyles, chartShellStyles];\n\n  /** Overrides the widget's own `orientation` when set to a known value. */\n  @property({ type: String })\n  orientation: ParallelCoordinatesOrientation | '' = '';\n\n  /** Shows the colour ramp for the active axis in the right gutter. */\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Axis whose value colours the lines; clicking an axis changes it. */\n  @property({ type: String, attribute: 'color-key' })\n  colorKey = '';\n\n  @state()\n  private _tooltip: TooltipState = null;\n\n  @state()\n  private _activeColorKey = '';\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 firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n    if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n  }\n\n  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(): ParallelCoordinatesModel {\n    const raw = parseJsonAttr<ParallelCoordinatesInput>(this.dataJson, []);\n    const model = normalizeParallelCoordinatesData(raw);\n    if (this.orientation === 'horizontal' || this.orientation === 'vertical') {\n      return { ...model, orientation: this.orientation };\n    }\n    return model;\n  }\n\n  private draw(): void {\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as HTMLElement | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!scroll || !root) return;\n\n    const model = this.parseData();\n    this._empty = model.axes.length === 0 || model.rows.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const { width, margin } = getParallelCoordinatesDimensions(scroll, model.orientation);\n    const theme = readThemeFromElement(this);\n    const colorKey = this.colorKey || this._activeColorKey || model.colorKey;\n\n    renderParallelCoordinatesChart(root, {\n      model,\n      width,\n      height: scroll.clientHeight || 300,\n      margin,\n      theme,\n      orientation: model.orientation,\n      showLegend: this.showLegend,\n      colorKey,\n      ...this.axisLabelHandlers(),\n      onColorKeyChange: (key) => {\n        this._activeColorKey = key;\n      },\n      onRowHover: this.showTooltip\n        ? ({ row, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              id: model.idKey ? `${model.idKey}: ${row.id}` : row.id,\n              rows: model.axes.map((key) => ({\n                key,\n                value: formatTooltipValue(row.values[key]),\n              })),\n            };\n          }\n        : undefined,\n      onRowLeave: this.showTooltip\n        ? () => {\n            this._tooltip = null;\n          }\n        : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const orientation = this.parseData().orientation;\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            <div class=\"chart-scroll\" part=\"scroll\" data-orientation=${orientation}>\n              <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n            </div>\n          </div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">No data</div>`\n            : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                <div class=\"name\">${this._tooltip.id}</div>\n                ${this._tooltip.rows.map(\n                  (row) => html`<div\n                    class=\"row ${row.key === (this.colorKey || this._activeColorKey)\n                      ? 'is-active'\n                      : ''}\"\n                  >\n                    <span>${row.key}</span><span>${row.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-parallel-coordinates-chart': Ui9000ParallelCoordinatesChart;\n  }\n}\n\nexport function registerParallelCoordinatesChart(): void {\n  if (!customElements.get('ui9000-parallel-coordinates-chart')) {\n    customElements.define(\n      'ui9000-parallel-coordinates-chart',\n      Ui9000ParallelCoordinatesChart,\n    );\n  }\n}\n\nregisterParallelCoordinatesChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-parallel-coordinates-chart.js","sources":["../../../../src/components/parallel-coordinates-chart/element/ui9000-parallel-coordinates-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 { readThemeFromElement } from '../../../context/widget-context.js';\nimport {\n  getParallelCoordinatesDimensions,\n  parseJsonAttr,\n} from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatTooltipValue,\n  normalizeParallelCoordinatesData,\n  type ParallelCoordinatesInput,\n  type ParallelCoordinatesModel,\n  type ParallelCoordinatesOrientation,\n} from '../lib/index.js';\nimport { renderParallelCoordinatesChart } from '../render/draw.js';\nimport { parallelCoordinatesStyles } from './styles.js';\n\n@customElement('ui9000-parallel-coordinates-chart')\nexport class Ui9000ParallelCoordinatesChart extends Ui9000ChartElement {\n  static override styles = [parallelCoordinatesStyles, chartShellStyles];\n\n  /** Overrides the widget's own `orientation` when set to a known value. */\n  @property({ type: String })\n  orientation: ParallelCoordinatesOrientation | '' = '';\n\n  /** Shows the colour ramp for the active axis in the right gutter. */\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  /** Axis whose value colours the lines; clicking an axis changes it. */\n  @property({ type: String, attribute: 'color-key' })\n  colorKey = '';\n\n  @state()\n  private _activeColorKey = '';\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 firstUpdated(): void {\n    const body = this.shadowRoot?.querySelector('.widget-body');\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll');\n    if (body instanceof HTMLElement) this._resizeObserver?.observe(body);\n    if (scroll instanceof HTMLElement) this._resizeObserver?.observe(scroll);\n  }\n\n  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(): ParallelCoordinatesModel {\n    const raw = parseJsonAttr<ParallelCoordinatesInput>(this.dataJson, []);\n    const model = normalizeParallelCoordinatesData(raw);\n    if (this.orientation === 'horizontal' || this.orientation === 'vertical') {\n      return { ...model, orientation: this.orientation };\n    }\n    return model;\n  }\n\n  private draw(): void {\n    const scroll = this.shadowRoot?.querySelector('.chart-scroll') as HTMLElement | null;\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!scroll || !root) return;\n\n    const model = this.parseData();\n    this._empty = model.axes.length === 0 || model.rows.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const { width, margin } = getParallelCoordinatesDimensions(scroll, model.orientation);\n    const theme = readThemeFromElement(this);\n    const colorKey = this.colorKey || this._activeColorKey || model.colorKey;\n\n    renderParallelCoordinatesChart(root, {\n      model,\n      width,\n      height: scroll.clientHeight || 300,\n      margin,\n      theme,\n      orientation: model.orientation,\n      showLegend: this.showLegend,\n      colorKey,\n      ...this.axisLabelHandlers(),\n      onColorKeyChange: (key) => {\n        this._activeColorKey = key;\n      },\n      onRowHover: this.showTooltip\n        ? ({ row, event }) => {\n            this.openTooltip(event, {\n              title: row.id,\n              rows: model.axes.map((key) => ({\n                label: key,\n                value: formatTooltipValue(row.values[key]),\n              })),\n            });\n          }\n        : undefined,\n      onRowLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const orientation = this.parseData().orientation;\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          <div class=\"chart-body\" part=\"chart-body\">\n            <div class=\"chart-scroll\" part=\"scroll\" data-orientation=${orientation}>\n              <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n            </div>\n          </div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">No data</div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-parallel-coordinates-chart': Ui9000ParallelCoordinatesChart;\n  }\n}\n\nexport function registerParallelCoordinatesChart(): void {\n  if (!customElements.get('ui9000-parallel-coordinates-chart')) {\n    customElements.define(\n      'ui9000-parallel-coordinates-chart',\n      Ui9000ParallelCoordinatesChart,\n    );\n  }\n}\n\nregisterParallelCoordinatesChart();\n"],"names":[],"mappings":"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"}

package/dist/components/parallel-coordinates-chart/index.js

@@ -1,10 +1,10 @@
 import { registerParallelCoordinatesChart } from "./element/ui9000-parallel-coordinates-chart.js";
 import { Ui9000ParallelCoordinatesChart } from "./element/ui9000-parallel-coordinates-chart.js";
-import { default as default2 } from "./metadata.json.js";
-import { AXIS_TITLE_MAX, formatAxisTick, formatTooltipValue } from "./lib/format.js";
+import { renderParallelCoordinatesChart } from "./render/draw.js";
 import { MAX_PARALLEL_LINES, normalizeParallelCoordinatesData, resolveParallelFormatting } from "./lib/normalize.js";
 import { axisExtent, axisExtents, tickCountForSpan } from "./lib/domain.js";
-import { renderParallelCoordinatesChart } from "./render/draw.js";
+import { AXIS_TITLE_MAX, formatAxisTick, formatTooltipValue } from "./lib/format.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   AXIS_TITLE_MAX,
   MAX_PARALLEL_LINES,

package/dist/components/partial-dependence-chart/element/ui9000-partial-dependence-chart.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-partial-dependence-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/partial-dependence-chart/element/ui9000-partial-dependence-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;AAiB3D,qBACa,4BAA6B,SAAQ,kBAAkB;IAClE,OAAgB,MAAM,4BAA+C;IAGrE,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,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;IAMjB,oFAAoF;IACpF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;IAkDH,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,4BAA4B,CAAC;KACjE;CACF;AAED,wBAAgB,8BAA8B,IAAI,IAAI,CAIrD"}
+{"version":3,"file":"ui9000-partial-dependence-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/partial-dependence-chart/element/ui9000-partial-dependence-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;AAiB3D,qBACa,4BAA6B,SAAQ,kBAAkB;IAClE,OAAgB,MAAM,4BAA+C;IAGrE,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAMjB,oFAAoF;IACpF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;IA2CH,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,4BAA4B,CAAC;KACjE;CACF;AAED,wBAAgB,8BAA8B,IAAI,IAAI,CAIrD"}

package/dist/components/partial-dependence-chart/element/ui9000-partial-dependence-chart.js

@@ -5,9 +5,9 @@ import { renderChartLegend } from "../../../element/chart-legend-render.js";
 import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { parseJsonAttr, getPartialDependenceDimensions } from "../../../utils/chart-helpers.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { normalizePartialDependenceData } from "../lib/normalize.js";
 import { renderPartialDependenceChart } from "../render/draw.js";
 import { partialDependenceStyles } from "./styles.js";
-import { normalizePartialDependenceData } from "../lib/normalize.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,7 +27,6 @@ let Ui9000PartialDependenceChart = class extends Ui9000ChartElement {
     this.showGrid = true;
     this.showLegend = true;
     this.showTooltip = true;
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -88,19 +87,14 @@ let Ui9000PartialDependenceChart = class extends Ui9000ChartElement {
       showGrid: this.showGrid,
       showTooltip: this.showTooltip,
       onHover: this.showTooltip ? ({ x, y, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          lines: [
-            `${xLabel}: ${x.toFixed(TOOLTIP_DECIMALS)}`,
-            `${yLabel}: ${y == null ? "-" : y.toFixed(TOOLTIP_DECIMALS)}`
+        this.openTooltip(event, {
+          rows: [
+            { label: xLabel, value: x.toFixed(TOOLTIP_DECIMALS) },
+            { label: yLabel, value: y == null ? "-" : y.toFixed(TOOLTIP_DECIMALS) }
           ]
-        };
+        });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -115,13 +109,6 @@ let Ui9000PartialDependenceChart = class extends Ui9000ChartElement {
           ${this._empty ? html`<div class="empty" part="empty">
                 Partial dependence needs numeric X and Y fields with at least one ICE series.
               </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>
@@ -141,9 +128,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-tooltip" })
 ], Ui9000PartialDependenceChart.prototype, "showTooltip", 2);
-__decorateClass([
-  state()
-], Ui9000PartialDependenceChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000PartialDependenceChart.prototype, "_empty", 2);

package/dist/components/partial-dependence-chart/element/ui9000-partial-dependence-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-partial-dependence-chart.js","sources":["../../../../src/components/partial-dependence-chart/element/ui9000-partial-dependence-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { CSS_VARS, readCssVar, 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 {\n  getPartialDependenceDimensions,\n  parseJsonAttr,\n} from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  normalizePartialDependenceData,\n  type PartialDependenceChartData,\n  type PartialDependenceModel,\n} from '../lib/index.js';\nimport { renderPartialDependenceChart } from '../render/draw.js';\nimport { partialDependenceStyles } from './styles.js';\n\n/** Client tooltip prints three decimals for both axes. */\nconst TOOLTIP_DECIMALS = 3;\n\n@customElement('ui9000-partial-dependence-chart')\nexport class Ui9000PartialDependenceChart extends Ui9000ChartElement {\n  static override styles = [partialDependenceStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @state()\n  private _tooltip: { x: number; y: number; lines: string[] } | null = null;\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): PartialDependenceModel {\n    return normalizePartialDependenceData(\n      parseJsonAttr<PartialDependenceChartData>(this.dataJson, null),\n    );\n  }\n\n  /** Client legend carries the single \"Average\" entry; ICE curves stay unlabelled. */\n  private renderLegend(model: PartialDependenceModel) {\n    if (!this.showLegend || !model.averageSeries.length) return nothing;\n    return renderChartLegend([\n      { label: 'Average', swatch: { kind: 'dashed-line', color: model.color } },\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.iceSeries.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const themeMode =\n      readCssVar(this, CSS_VARS.mode, 'light') === 'dark' ? 'dark' : 'light';\n    const { width, height, margin } = getPartialDependenceDimensions(root, this.scale);\n    const xLabel = model.axisDetails?.[model.xField]?.label ?? model.xField;\n    const yLabel = model.axisDetails?.[model.yField]?.label ?? model.yField;\n\n    renderPartialDependenceChart(root, {\n      iceSeries: model.iceSeries,\n      averageSeries: model.averageSeries,\n      width,\n      height,\n      margin,\n      theme,\n      themeMode,\n      color: model.color,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      onHover: this.showTooltip\n        ? ({ x, y, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              lines: [\n                `${xLabel}: ${x.toFixed(TOOLTIP_DECIMALS)}`,\n                `${yLabel}: ${y == null ? '-' : y.toFixed(TOOLTIP_DECIMALS)}`,\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.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${model ? this.renderLegend(model) : nothing}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Partial dependence needs numeric X and Y fields with at least one ICE series.\n              </div>`\n            : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                ${this._tooltip.lines.map((line) => html`<div>${line}</div>`)}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-partial-dependence-chart': Ui9000PartialDependenceChart;\n  }\n}\n\nexport function registerPartialDependenceChart(): void {\n  if (!customElements.get('ui9000-partial-dependence-chart')) {\n    customElements.define('ui9000-partial-dependence-chart', Ui9000PartialDependenceChart);\n  }\n}\n\nregisterPartialDependenceChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-partial-dependence-chart.js","sources":["../../../../src/components/partial-dependence-chart/element/ui9000-partial-dependence-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { CSS_VARS, readCssVar, 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 {\n  getPartialDependenceDimensions,\n  parseJsonAttr,\n} from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  normalizePartialDependenceData,\n  type PartialDependenceChartData,\n  type PartialDependenceModel,\n} from '../lib/index.js';\nimport { renderPartialDependenceChart } from '../render/draw.js';\nimport { partialDependenceStyles } from './styles.js';\n\n/** Client tooltip prints three decimals for both axes. */\nconst TOOLTIP_DECIMALS = 3;\n\n@customElement('ui9000-partial-dependence-chart')\nexport class Ui9000PartialDependenceChart extends Ui9000ChartElement {\n  static override styles = [partialDependenceStyles, 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(): PartialDependenceModel {\n    return normalizePartialDependenceData(\n      parseJsonAttr<PartialDependenceChartData>(this.dataJson, null),\n    );\n  }\n\n  /** Client legend carries the single \"Average\" entry; ICE curves stay unlabelled. */\n  private renderLegend(model: PartialDependenceModel) {\n    if (!this.showLegend || !model.averageSeries.length) return nothing;\n    return renderChartLegend([\n      { label: 'Average', swatch: { kind: 'dashed-line', color: model.color } },\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.iceSeries.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const themeMode =\n      readCssVar(this, CSS_VARS.mode, 'light') === 'dark' ? 'dark' : 'light';\n    const { width, height, margin } = getPartialDependenceDimensions(root, this.scale);\n    const xLabel = model.axisDetails?.[model.xField]?.label ?? model.xField;\n    const yLabel = model.axisDetails?.[model.yField]?.label ?? model.yField;\n\n    renderPartialDependenceChart(root, {\n      iceSeries: model.iceSeries,\n      averageSeries: model.averageSeries,\n      width,\n      height,\n      margin,\n      theme,\n      themeMode,\n      color: model.color,\n      showGrid: this.showGrid,\n      showTooltip: this.showTooltip,\n      onHover: this.showTooltip\n        ? ({ x, y, event }) => {\n            this.openTooltip(event, {\n              rows: [\n                { label: xLabel, value: x.toFixed(TOOLTIP_DECIMALS) },\n                { label: yLabel, value: y == null ? '-' : y.toFixed(TOOLTIP_DECIMALS) },\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.parseData();\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${model ? this.renderLegend(model) : nothing}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Partial dependence needs numeric X and Y fields with at least one ICE series.\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-partial-dependence-chart': Ui9000PartialDependenceChart;\n  }\n}\n\nexport function registerPartialDependenceChart(): void {\n  if (!customElements.get('ui9000-partial-dependence-chart')) {\n    customElements.define('ui9000-partial-dependence-chart', Ui9000PartialDependenceChart);\n  }\n}\n\nregisterPartialDependenceChart();\n"],"names":[],"mappings":"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"}

package/dist/components/partial-dependence-chart/index.js

@@ -1,10 +1,10 @@
 import { registerPartialDependenceChart } from "./element/ui9000-partial-dependence-chart.js";
 import { Ui9000PartialDependenceChart } from "./element/ui9000-partial-dependence-chart.js";
 import { renderPartialDependenceChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
-import { computeAverageSeries, nearestAveragePoint } from "./lib/series.js";
 import { normalizePartialDependenceData } from "./lib/normalize.js";
+import { computeAverageSeries, nearestAveragePoint } from "./lib/series.js";
 import { pdpLinearDomain } from "./lib/domain.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000PartialDependenceChart,
   computeAverageSeries,

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

@@ -6,7 +6,6 @@ export declare class Ui9000PieChart extends Ui9000ChartElement {
     scale: WidgetScale;
     showLegend: boolean;
     showTooltip: boolean;
-    private _tooltip;
     private _empty;
     private _legendSlices;
     private _resizeObserver?;

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-pie-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/pie-chart/element/ui9000-pie-chart.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;AAe3D,qBACa,cAAe,SAAQ,kBAAkB;IACpD,OAAgB,MAAM,4BAAsC;IAG5D,KAAK,EAAE,WAAW,CAAa;IAG/B,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAKA;IAGhB,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,aAAa,CAAkB;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;IAKjB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,IAAI;IAgDH,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC"}
+{"version":3,"file":"ui9000-pie-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/pie-chart/element/ui9000-pie-chart.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;AAe3D,qBACa,cAAe,SAAQ,kBAAkB;IACpD,OAAgB,MAAM,4BAAsC;IAG5D,KAAK,EAAE,WAAW,CAAa;IAG/B,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,aAAa,CAAkB;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;IAKjB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,IAAI;IAkDH,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC"}

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

@@ -6,10 +6,10 @@ import { readThemeFromElement } from "../../../context/widget-context.js";
 import { parseJsonAttr, getPieDimensions } from "../../../utils/chart-helpers.js";
 import { swatchLegendEntries } from "../../../utils/chart-legend.js";
 import { formatPiePercent } from "../lib/format.js";
+import { normalizePieData, legendSlicesFromPieOrder } from "../lib/normalize.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
 import { renderPieChart } from "../render/draw.js";
 import { pieChartStyles } from "./styles.js";
-import { normalizePieData, legendSlicesFromPieOrder } from "../lib/normalize.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,7 +27,6 @@ let Ui9000PieChart = class extends Ui9000ChartElement {
     this.scale = "default";
     this.showLegend = true;
     this.showTooltip = true;
-    this._tooltip = null;
     this._empty = false;
     this._legendSlices = [];
     this._raf = 0;
@@ -92,23 +91,23 @@ let Ui9000PieChart = class extends Ui9000ChartElement {
       },
       onHover: this.showTooltip ? ({ slice, event }) => {
         var _a2, _b, _c, _d, _e, _f;
-        const rect = this.getBoundingClientRect();
         const xField = model.xField ?? "Category";
         const yField = model.yField ?? "Value";
         const xAxeLabel = ((_b = (_a2 = model.axisDetails) == null ? void 0 : _a2[xField]) == null ? void 0 : _b.label) ?? xField;
         const yAxeLabel = ((_d = (_c = model.axisDetails) == null ? void 0 : _c[yField]) == null ? void 0 : _d.label) ?? yField;
         const symbol = ((_f = (_e = model.axisDetails) == null ? void 0 : _e[yField]) == null ? void 0 : _f.measure_unit_symbol) ?? "";
         const valueText = symbol ? `${slice.value.toLocaleString()} ${symbol}`.trim() : slice.value.toLocaleString();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          xLabel: `${xAxeLabel}: ${slice.label}`,
-          yLabel: `${yAxeLabel}: ${valueText} (${formatPiePercent(slice.percentage)}%)`
-        };
+        this.openTooltip(event, {
+          rows: [
+            { label: xAxeLabel, value: slice.label },
+            {
+              label: yAxeLabel,
+              value: `${valueText} (${formatPiePercent(slice.percentage)}%)`
+            }
+          ]
+        });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -120,14 +119,6 @@ let Ui9000PieChart = class extends Ui9000ChartElement {
           <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
           ${this.renderLegend()}
           ${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}</div>
-                <div>${this._tooltip.yLabel}</div>
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -144,9 +135,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-tooltip" })
 ], Ui9000PieChart.prototype, "showTooltip", 2);
-__decorateClass([
-  state()
-], Ui9000PieChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000PieChart.prototype, "_empty", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-pie-chart.js","sources":["../../../../src/components/pie-chart/element/ui9000-pie-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 { WidgetScale } from '../../../types/index.js';\nimport { getPieDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { formatPiePercent } from '../lib/format.js';\nimport {\n  legendSlicesFromPieOrder,\n  normalizePieData,\n  type PieChartData,\n  type PieModel,\n  type PieSlice,\n} from '../lib/index.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { renderPieChart } from '../render/draw.js';\nimport { pieChartStyles } from './styles.js';\n\n@customElement('ui9000-pie-chart')\nexport class Ui9000PieChart extends Ui9000ChartElement {\n  static override styles = [pieChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\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  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _legendSlices: PieSlice[] = [];\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(): PieModel {\n    const raw = parseJsonAttr<PieChartData>(this.dataJson, null);\n    return normalizePieData(raw);\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || !this._legendSlices.length) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(\n        this._legendSlices.map((slice) => `${formatPiePercent(slice.percentage)}% - ${slice.label}`),\n        theme,\n        (_label, index) => this._legendSlices[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._empty = model.slices.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      this._legendSlices = [];\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getPieDimensions(root);\n\n    renderPieChart(root, {\n      slices: model.slices,\n      width,\n      height,\n      theme,\n      innerRadius: 0,\n      showTooltip: this.showTooltip,\n      onLayout: (orderedKeys) => {\n        this._legendSlices = legendSlicesFromPieOrder(model, orderedKeys);\n      },\n      onHover: this.showTooltip\n        ? ({ slice, event }) => {\n            const rect = this.getBoundingClientRect();\n            const xField = model.xField ?? 'Category';\n            const yField = model.yField ?? 'Value';\n            const xAxeLabel = model.axisDetails?.[xField]?.label ?? xField;\n            const yAxeLabel = model.axisDetails?.[yField]?.label ?? yField;\n            const symbol = model.axisDetails?.[yField]?.measure_unit_symbol ?? '';\n            const valueText = symbol\n              ? `${slice.value.toLocaleString()} ${symbol}`.trim()\n              : slice.value.toLocaleString();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              xLabel: `${xAxeLabel}: ${slice.label}`,\n              yLabel: `${yAxeLabel}: ${valueText} (${formatPiePercent(slice.percentage)}%)`,\n            };\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => { this._tooltip = null; } : undefined,\n    });\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          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this.renderLegend()}\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}</div>\n                <div>${this._tooltip.yLabel}</div>\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-pie-chart': Ui9000PieChart;\n  }\n}\n\nexport function registerPieChart(): void {\n  if (!customElements.get('ui9000-pie-chart')) {\n    customElements.define('ui9000-pie-chart', Ui9000PieChart);\n  }\n}\n\nregisterPieChart();\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"ui9000-pie-chart.js","sources":["../../../../src/components/pie-chart/element/ui9000-pie-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 { WidgetScale } from '../../../types/index.js';\nimport { getPieDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { swatchLegendEntries } from '../../../utils/chart-legend.js';\nimport { formatPiePercent } from '../lib/format.js';\nimport {\n  legendSlicesFromPieOrder,\n  normalizePieData,\n  type PieChartData,\n  type PieModel,\n  type PieSlice,\n} from '../lib/index.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport { renderPieChart } from '../render/draw.js';\nimport { pieChartStyles } from './styles.js';\n\n@customElement('ui9000-pie-chart')\nexport class Ui9000PieChart extends Ui9000ChartElement {\n  static override styles = [pieChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\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 _legendSlices: PieSlice[] = [];\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(): PieModel {\n    const raw = parseJsonAttr<PieChartData>(this.dataJson, null);\n    return normalizePieData(raw);\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || !this._legendSlices.length) return nothing;\n    const theme = readThemeFromElement(this);\n    return renderChartLegend(\n      swatchLegendEntries(\n        this._legendSlices.map((slice) => `${formatPiePercent(slice.percentage)}% - ${slice.label}`),\n        theme,\n        (_label, index) => this._legendSlices[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._empty = model.slices.length === 0;\n    if (this._empty) {\n      root.replaceChildren();\n      this._legendSlices = [];\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height } = getPieDimensions(root);\n\n    renderPieChart(root, {\n      slices: model.slices,\n      width,\n      height,\n      theme,\n      innerRadius: 0,\n      showTooltip: this.showTooltip,\n      onLayout: (orderedKeys) => {\n        this._legendSlices = legendSlicesFromPieOrder(model, orderedKeys);\n      },\n      onHover: this.showTooltip\n        ? ({ slice, event }) => {\n            const xField = model.xField ?? 'Category';\n            const yField = model.yField ?? 'Value';\n            const xAxeLabel = model.axisDetails?.[xField]?.label ?? xField;\n            const yAxeLabel = model.axisDetails?.[yField]?.label ?? yField;\n            const symbol = model.axisDetails?.[yField]?.measure_unit_symbol ?? '';\n            const valueText = symbol\n              ? `${slice.value.toLocaleString()} ${symbol}`.trim()\n              : slice.value.toLocaleString();\n            this.openTooltip(event, {\n              rows: [\n                { label: xAxeLabel, value: slice.label },\n                {\n                  label: yAxeLabel,\n                  value: `${valueText} (${formatPiePercent(slice.percentage)}%)`,\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    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this.renderLegend()}\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-pie-chart': Ui9000PieChart;\n  }\n}\n\nexport function registerPieChart(): void {\n  if (!customElements.get('ui9000-pie-chart')) {\n    customElements.define('ui9000-pie-chart', Ui9000PieChart);\n  }\n}\n\nregisterPieChart();\n"],"names":["_a"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import { registerPieChart } from "./element/ui9000-pie-chart.js";
 import { Ui9000PieChart } from "./element/ui9000-pie-chart.js";
 import { renderPieChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
-import { formatPieLegendLabel, formatPiePercent } from "./lib/format.js";
 import { legendSlicesFromPieOrder, normalizePieData } from "./lib/normalize.js";
+import { formatPieLegendLabel, formatPiePercent } from "./lib/format.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000PieChart,
   formatPieLegendLabel,

package/dist/components/pie-chart/lib/normalize.js

@@ -1,5 +1,5 @@
 import { resolveFormattingColor } from "../../../utils/fuse-palette.js";
-import { filterTruthyValues, isFuseWidgetPayload, firstField, rowsOf, xDomainHintFromWidget, resolveUniqueValuesOrder } from "../../../utils/fuse-widget.js";
+import { isFuseWidgetPayload, firstField, rowsOf, xDomainHintFromWidget, filterTruthyValues, resolveUniqueValuesOrder } from "../../../utils/fuse-widget.js";
 const EMPTY = { slices: [], total: 0 };
 function isLabelValueArray(input) {
   if (!Array.isArray(input) || input.length === 0) return false;

package/dist/components/polar-area-chart/element/ui9000-polar-area-chart.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-polar-area-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/polar-area-chart/element/ui9000-polar-area-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;AAmB3D,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,CAAyE;IAGzF,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;IAIjB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,IAAI;IAmDH,MAAM;CAwBhB;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-polar-area-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/polar-area-chart/element/ui9000-polar-area-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;AAmB3D,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,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;IAYpB,OAAO,CAAC,IAAI;IAkDH,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}