@fusedashlabs/widgets 0.3.1 → 0.4.0

package/dist/components/polar-area-chart/lib/types.d.ts

@@ -1,8 +1,10 @@
 import { FuseWidgetLike } from '../../../utils/fuse-widget.js';
 /** One filled wedge of the disc — a single row of the (sorted) chart data. */
 export interface PolarAreaSector {
-    /** Category value (`widget.xAxe[0]`) — also the color / legend key. */
+    /** Category value (`widget.xAxe[0]`). */
     key: string;
+    /** Group key when `groupBy` is set — also the color / legend key. */
+    group?: string;
     label: string;
     value: number;
     color: string;
@@ -21,8 +23,11 @@ export interface PolarAreaModel {
     categories: string[];
     legend: PolarAreaLegendEntry[];
     maxValue: number;
+    /** True when wedges are split by `groupBy` inside each category. */
+    grouped?: boolean;
     xField?: string;
     yField?: string;
+    groupField?: string;
     axisDetails?: Record<string, {
         label?: string;
         measure_unit_symbol?: string;

package/dist/components/polar-area-chart/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/polar-area-chart/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEpE,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B;;;OAGG;IACH,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,mBAAmB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChF;AAED,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnF,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAC1B,mBAAmB,EAAE,GACrB;IAAE,MAAM,EAAE,cAAc,EAAE,CAAA;CAAE,GAC5B,cAAc,GACd,cAAc,GACd,IAAI,GACJ,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/polar-area-chart/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEpE,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B;;;OAGG;IACH,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,mBAAmB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChF;AAED,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnF,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAC1B,mBAAmB,EAAE,GACrB;IAAE,MAAM,EAAE,cAAc,EAAE,CAAA;CAAE,GAC5B,cAAc,GACd,cAAc,GACd,IAAI,GACJ,SAAS,CAAC"}

package/dist/components/polar-area-chart/metadata.json.d.ts

@@ -2,7 +2,7 @@ declare const _default: {
   "id": "polar-area-chart",
   "tag": "ui9000-polar-area-chart",
   "title": "Polar Area Chart",
-  "description": "Chat-optimized polar area (coxcomb) chart rewritten in D3. Equal-angle wedges scaled by value, no Redux.",
+  "description": "Chat-optimized polar area (coxcomb) chart rewritten in D3. Single (client aggregated) or grouped by groupBy. Legend above the plot.",
   "chartTypeKeys": ["polarAreaChart"],
   "source": "client/libs/shared/components/src/Widgets/PolarAreaChart/",
   "stack": "d3",

package/dist/components/polar-area-chart/metadata.json.js

@@ -1,7 +1,7 @@
 const id = "polar-area-chart";
 const tag = "ui9000-polar-area-chart";
 const title = "Polar Area Chart";
-const description = "Chat-optimized polar area (coxcomb) chart rewritten in D3. Equal-angle wedges scaled by value, no Redux.";
+const description = "Chat-optimized polar area (coxcomb) chart rewritten in D3. Single (client aggregated) or grouped by groupBy. Legend above the plot.";
 const chartTypeKeys = ["polarAreaChart"];
 const source = "client/libs/shared/components/src/Widgets/PolarAreaChart/";
 const stack = "d3";

package/dist/components/polar-area-chart/render/draw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/components/polar-area-chart/render/draw.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,+BAA+B,CAAC;AASvC,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,WAAW,2BAA4B,SAAQ,wBAAwB;IAC3E,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,eAAe,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA8JD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,2BAA2B,GACnC,IAAI,CA+GN"}
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/components/polar-area-chart/render/draw.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,+BAA+B,CAAC;AAUvC,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,WAAW,2BAA4B,SAAQ,wBAAwB;IAC3E,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,eAAe,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA8JD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,2BAA2B,GACnC,IAAI,CAiHN"}

package/dist/components/polar-area-chart/render/draw.js

@@ -3,7 +3,7 @@ import { select } from "d3-selection";
 import { arc } from "d3-shape";
 import { decorateManualAxisLabel } from "../../../utils/axis-labels.js";
 import { FD, formatCompactNumber } from "../../../utils/fusedash-visual.js";
-import { polarLabelGutter, polarRadialTicks, polarSectorAngles, polarOuterRadius, polarLabelAnchor } from "../lib/domain.js";
+import { polarLabelGutter, polarRadialTicks, polarGroupedSectorAngles, polarSectorAngles, polarOuterRadius, polarLabelAnchor } from "../lib/domain.js";
 const SECTOR_CLASS = "polar-area-path";
 const TICK_CLASS = "polar-tick-group";
 function measureText(node, text, fontSize, cx, cy) {
@@ -93,7 +93,7 @@ function renderPolarAreaChart(container, options) {
       { onAxisLabelHover, onAxisLabelLeave }
     );
   }
-  const angles = polarSectorAngles(model.sectors.length);
+  const angles = model.grouped ? polarGroupedSectorAngles(model.categories, model.sectors) : polarSectorAngles(model.sectors.length);
   const arcGen = arc().innerRadius(0).outerRadius((d) => radial(d.sector.value)).startAngle((d) => d.startAngle).endAngle((d) => d.endAngle);
   const stroke = themeMode === "dark" ? FD.donutSliceStrokeDark : FD.donutSliceStroke;
   const sectors = root.append("g").attr("class", "polar-sectors").selectAll("path").data(model.sectors.map((sector, i) => ({ sector, ...angles[i] }))).enter().append("path").attr("class", SECTOR_CLASS).attr("d", arcGen).attr("fill", (d) => d.sector.color).attr("opacity", FD.polarSectorOpacity).attr("stroke", stroke).attr("stroke-width", FD.donutSliceStrokeWidth);

package/dist/components/polar-area-chart/render/draw.js.map

@@ -1 +1 @@
-{"version":3,"file":"draw.js","sources":["../../../../src/components/polar-area-chart/render/draw.ts"],"sourcesContent":["import { scaleLinear } from 'd3-scale';\nimport { select, type Selection } from 'd3-selection';\nimport { arc } from 'd3-shape';\n\nimport type { ChartDimensions, WidgetTheme } from '../../../types/index.js';\nimport {\n  decorateManualAxisLabel,\n  type AxisLabelTooltipHandlers,\n} from '../../../utils/axis-labels.js';\nimport { FD, formatCompactNumber } from '../../../utils/fusedash-visual.js';\nimport {\n  polarLabelAnchor,\n  polarLabelGutter,\n  polarOuterRadius,\n  polarRadialTicks,\n  polarSectorAngles,\n} from '../lib/domain.js';\nimport type { PolarAreaModel, PolarAreaSector } from '../lib/types.js';\n\nexport interface RenderPolarAreaChartOptions extends AxisLabelTooltipHandlers {\n  model: PolarAreaModel;\n  width: number;\n  height: number;\n  margin: ChartDimensions['margin'];\n  theme: WidgetTheme;\n  themeMode?: 'light' | 'dark';\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  onHover?: (payload: { sector: PolarAreaSector; event: MouseEvent }) => void;\n  onLeave?: () => void;\n}\n\nconst SECTOR_CLASS = 'polar-area-path';\nconst TICK_CLASS = 'polar-tick-group';\n\n/**\n * getBBox is unavailable on detached / non-rendering hosts — fall back to a\n * character estimate around the anchor (`text-anchor: middle` + central\n * baseline), which is where getBBox would report the box.\n */\nfunction measureText(\n  node: SVGTextElement | null,\n  text: string,\n  fontSize: number,\n  cx: number,\n  cy: number,\n): { x: number; y: number; width: number; height: number } {\n  const box = node?.getBBox?.();\n  if (box && box.width > 0) return box;\n  const width = text.length * fontSize * 0.6;\n  return { x: cx - width / 2, y: cy - fontSize / 2, width, height: fontSize };\n}\n\nfunction drawGridRings(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  ticks: number[],\n  radial: (value: number) => number,\n): void {\n  parent\n    .selectAll('circle')\n    .data(ticks)\n    .enter()\n    .append('circle')\n    .attr('r', (d) => radial(d))\n    .attr('fill', 'none')\n    .attr('stroke', FD.polarGridStroke)\n    .attr('stroke-opacity', (_d, i) => (i + 1) * FD.polarGridStepOpacity);\n}\n\nfunction drawSpokes(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  categories: string[],\n  outer: number,\n): void {\n  const slice = (Math.PI * 2) / categories.length;\n  for (let i = 0; i < categories.length; i += 1) {\n    // Angle 0 is 12 o'clock, matching the sector arcs.\n    const angle = slice * i - Math.PI / 2;\n    const x = outer * Math.cos(angle);\n    const y = outer * Math.sin(angle);\n\n    parent\n      .append('line')\n      .attr('x1', 0)\n      .attr('y1', 0)\n      .attr('x2', x)\n      .attr('y2', y)\n      .attr('stroke', FD.polarGridStroke)\n      .attr('stroke-linejoin', 'round')\n      .attr('stroke-linecap', 'round')\n      .attr('stroke-dasharray', FD.polarSpokeDash);\n\n    parent\n      .append('circle')\n      .attr('cx', x)\n      .attr('cy', y)\n      .attr('r', FD.polarSpokeCapRadius)\n      .attr('fill', FD.polarGridStroke);\n  }\n}\n\nfunction drawCategoryLabels(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  categories: string[],\n  outer: number,\n  halfWidth: number,\n  handlers: AxisLabelTooltipHandlers,\n): void {\n  const slice = (Math.PI * 2) / categories.length;\n  const radius = outer + FD.polarCategoryLabelOffset;\n\n  categories.forEach((category, i) => {\n    const labelAngle = slice * i - Math.PI / 2 + slice / 2;\n    const x = radius * Math.cos(labelAngle);\n    const anchor = polarLabelAnchor(labelAngle);\n    // Room left between the label anchor and the SVG edge it grows towards.\n    const slotWidth =\n      anchor === 'start'\n        ? halfWidth - x\n        : anchor === 'end'\n          ? halfWidth + x\n          : 2 * Math.min(halfWidth - x, halfWidth + x);\n\n    const text = parent\n      .append('text')\n      .attr('x', x)\n      .attr('y', radius * Math.sin(labelAngle))\n      .attr('text-anchor', anchor)\n      .attr('font-size', FD.polarCategoryLabelSize)\n      .attr('dominant-baseline', 'central')\n      .attr('fill', FD.polarCategoryLabelFill);\n\n    decorateManualAxisLabel(text, category, {\n      ...handlers,\n      slotWidth,\n      fontSize: FD.polarCategoryLabelSize,\n    });\n  });\n}\n\nfunction drawRadialTicks(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  ticks: number[],\n  radial: (value: number) => number,\n  theme: WidgetTheme,\n  themeMode: 'light' | 'dark',\n): void {\n  const pillFill =\n    theme.background && theme.background !== 'transparent'\n      ? theme.background\n      : themeMode === 'dark'\n        ? FD.polarTickPillDark\n        : FD.polarTickPill;\n\n  parent\n    .selectAll<SVGGElement, number>('g')\n    .data(ticks)\n    .enter()\n    .append('g')\n    .attr('class', TICK_CLASS)\n    .each(function (value) {\n      const group = select(this);\n      const label = formatCompactNumber(value, 2);\n\n      const cy = -radial(value);\n      const text = group\n        .append('text')\n        .attr('x', 0)\n        .attr('y', cy)\n        .attr('font-size', FD.polarCategoryLabelSize)\n        .attr('text-anchor', 'middle')\n        .attr('dominant-baseline', 'central')\n        .attr('fill', theme.text)\n        .text(label);\n\n      const box = measureText(text.node(), label, FD.polarCategoryLabelSize, 0, cy);\n      group\n        .insert('rect', 'text')\n        .attr('x', box.x - FD.polarTickPillPadX)\n        .attr('y', box.y - FD.polarTickPillPadY)\n        .attr('width', box.width + FD.polarTickPillPadX * 2)\n        .attr('height', box.height + FD.polarTickPillPadY * 2)\n        .attr('rx', FD.polarTickPillRadius)\n        .attr('ry', FD.polarTickPillRadius)\n        .attr('fill', pillFill);\n    });\n}\n\n/**\n * FuseDash PolarAreaChart — D3 rewrite.\n * One wedge per category, each reaching the radius of its value; the legend\n * lives in the Lit shell.\n */\nexport function renderPolarAreaChart(\n  container: HTMLElement,\n  options: RenderPolarAreaChartOptions,\n): void {\n  const {\n    model,\n    width,\n    height,\n    margin,\n    theme,\n    themeMode = 'light',\n    showGrid = true,\n    showTooltip = true,\n    onHover,\n    onLeave,\n    onAxisLabelHover,\n    onAxisLabelLeave,\n  } = options;\n\n  container.replaceChildren();\n\n  const plotWidth = width - margin.left - margin.right;\n  const plotHeight = height - margin.top - margin.bottom;\n  const labelGutter = polarLabelGutter(model.categories, plotWidth);\n  const outerRadius = polarOuterRadius(plotWidth, plotHeight, labelGutter);\n  if (!model.sectors.length || outerRadius <= 0 || !model.maxValue) return;\n\n  const radial = scaleLinear()\n    .domain([0, model.maxValue])\n    .rangeRound([0, outerRadius])\n    .nice();\n  const gridOuter = radial(model.maxValue);\n  const ticks = polarRadialTicks(model.maxValue, FD.polarRadialSteps);\n\n  const svg = select(container)\n    .append('svg')\n    .attr('width', width)\n    .attr('height', height)\n    .attr('viewBox', `0 0 ${width} ${height}`);\n\n  const root = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);\n\n  if (showGrid) {\n    const gridGroup = root\n      .append('g')\n      .attr('class', 'polar-grid')\n      .attr('pointer-events', 'none');\n    drawGridRings(gridGroup, ticks, radial);\n    drawSpokes(gridGroup, model.categories, gridOuter);\n  }\n  if (outerRadius >= FD.polarMinLabelRadius) {\n    drawCategoryLabels(\n      root.append('g').attr('class', 'polar-category-labels'),\n      model.categories,\n      gridOuter,\n      width / 2,\n      { onAxisLabelHover, onAxisLabelLeave },\n    );\n  }\n\n  const angles = polarSectorAngles(model.sectors.length);\n  const arcGen = arc<{ sector: PolarAreaSector; startAngle: number; endAngle: number }>()\n    .innerRadius(0)\n    .outerRadius((d) => radial(d.sector.value))\n    .startAngle((d) => d.startAngle)\n    .endAngle((d) => d.endAngle);\n\n  const stroke = themeMode === 'dark' ? FD.donutSliceStrokeDark : FD.donutSliceStroke;\n  const sectors = root\n    .append('g')\n    .attr('class', 'polar-sectors')\n    .selectAll('path')\n    .data(model.sectors.map((sector, i) => ({ sector, ...angles[i] })))\n    .enter()\n    .append('path')\n    .attr('class', SECTOR_CLASS)\n    .attr('d', arcGen)\n    .attr('fill', (d) => d.sector.color)\n    .attr('opacity', FD.polarSectorOpacity)\n    .attr('stroke', stroke)\n    .attr('stroke-width', FD.donutSliceStrokeWidth);\n\n  // Client hides the radial tick pills when they would stack on top of each\n  // other. It tests the box height; here the disc no longer fills the box, so\n  // the ring spacing itself is what has to clear a pill row.\n  const fitsTicks = outerRadius >= FD.polarRadialSteps * FD.polarTickPillRowHeight;\n  if (showGrid && fitsTicks) {\n    drawRadialTicks(\n      root.append('g').attr('class', 'polar-ticks').attr('pointer-events', 'none'),\n      ticks,\n      radial,\n      theme,\n      themeMode,\n    );\n  }\n\n  if (!showTooltip || !onHover) return;\n\n  const dimmable = root.selectAll(`.${SECTOR_CLASS}, .${TICK_CLASS}`);\n  sectors\n    .style('cursor', 'pointer')\n    .on('mouseenter', function (event: MouseEvent, datum) {\n      dimmable.attr('opacity', FD.polarSectorOpacityDimmed);\n      select(this).attr('opacity', 1);\n      onHover({ sector: datum.sector, event });\n    })\n    .on('mousemove', (event: MouseEvent, datum) => {\n      onHover({ sector: datum.sector, event });\n    })\n    .on('mouseleave', () => {\n      sectors.attr('opacity', FD.polarSectorOpacity);\n      root.selectAll(`.${TICK_CLASS}`).attr('opacity', 1);\n      onLeave?.();\n    });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"draw.js","sources":["../../../../src/components/polar-area-chart/render/draw.ts"],"sourcesContent":["import { scaleLinear } from 'd3-scale';\nimport { select, type Selection } from 'd3-selection';\nimport { arc } from 'd3-shape';\n\nimport type { ChartDimensions, WidgetTheme } from '../../../types/index.js';\nimport {\n  decorateManualAxisLabel,\n  type AxisLabelTooltipHandlers,\n} from '../../../utils/axis-labels.js';\nimport { FD, formatCompactNumber } from '../../../utils/fusedash-visual.js';\nimport {\n  polarGroupedSectorAngles,\n  polarLabelAnchor,\n  polarLabelGutter,\n  polarOuterRadius,\n  polarRadialTicks,\n  polarSectorAngles,\n} from '../lib/domain.js';\nimport type { PolarAreaModel, PolarAreaSector } from '../lib/types.js';\n\nexport interface RenderPolarAreaChartOptions extends AxisLabelTooltipHandlers {\n  model: PolarAreaModel;\n  width: number;\n  height: number;\n  margin: ChartDimensions['margin'];\n  theme: WidgetTheme;\n  themeMode?: 'light' | 'dark';\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  onHover?: (payload: { sector: PolarAreaSector; event: MouseEvent }) => void;\n  onLeave?: () => void;\n}\n\nconst SECTOR_CLASS = 'polar-area-path';\nconst TICK_CLASS = 'polar-tick-group';\n\n/**\n * getBBox is unavailable on detached / non-rendering hosts — fall back to a\n * character estimate around the anchor (`text-anchor: middle` + central\n * baseline), which is where getBBox would report the box.\n */\nfunction measureText(\n  node: SVGTextElement | null,\n  text: string,\n  fontSize: number,\n  cx: number,\n  cy: number,\n): { x: number; y: number; width: number; height: number } {\n  const box = node?.getBBox?.();\n  if (box && box.width > 0) return box;\n  const width = text.length * fontSize * 0.6;\n  return { x: cx - width / 2, y: cy - fontSize / 2, width, height: fontSize };\n}\n\nfunction drawGridRings(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  ticks: number[],\n  radial: (value: number) => number,\n): void {\n  parent\n    .selectAll('circle')\n    .data(ticks)\n    .enter()\n    .append('circle')\n    .attr('r', (d) => radial(d))\n    .attr('fill', 'none')\n    .attr('stroke', FD.polarGridStroke)\n    .attr('stroke-opacity', (_d, i) => (i + 1) * FD.polarGridStepOpacity);\n}\n\nfunction drawSpokes(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  categories: string[],\n  outer: number,\n): void {\n  const slice = (Math.PI * 2) / categories.length;\n  for (let i = 0; i < categories.length; i += 1) {\n    // Angle 0 is 12 o'clock, matching the sector arcs.\n    const angle = slice * i - Math.PI / 2;\n    const x = outer * Math.cos(angle);\n    const y = outer * Math.sin(angle);\n\n    parent\n      .append('line')\n      .attr('x1', 0)\n      .attr('y1', 0)\n      .attr('x2', x)\n      .attr('y2', y)\n      .attr('stroke', FD.polarGridStroke)\n      .attr('stroke-linejoin', 'round')\n      .attr('stroke-linecap', 'round')\n      .attr('stroke-dasharray', FD.polarSpokeDash);\n\n    parent\n      .append('circle')\n      .attr('cx', x)\n      .attr('cy', y)\n      .attr('r', FD.polarSpokeCapRadius)\n      .attr('fill', FD.polarGridStroke);\n  }\n}\n\nfunction drawCategoryLabels(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  categories: string[],\n  outer: number,\n  halfWidth: number,\n  handlers: AxisLabelTooltipHandlers,\n): void {\n  const slice = (Math.PI * 2) / categories.length;\n  const radius = outer + FD.polarCategoryLabelOffset;\n\n  categories.forEach((category, i) => {\n    const labelAngle = slice * i - Math.PI / 2 + slice / 2;\n    const x = radius * Math.cos(labelAngle);\n    const anchor = polarLabelAnchor(labelAngle);\n    // Room left between the label anchor and the SVG edge it grows towards.\n    const slotWidth =\n      anchor === 'start'\n        ? halfWidth - x\n        : anchor === 'end'\n          ? halfWidth + x\n          : 2 * Math.min(halfWidth - x, halfWidth + x);\n\n    const text = parent\n      .append('text')\n      .attr('x', x)\n      .attr('y', radius * Math.sin(labelAngle))\n      .attr('text-anchor', anchor)\n      .attr('font-size', FD.polarCategoryLabelSize)\n      .attr('dominant-baseline', 'central')\n      .attr('fill', FD.polarCategoryLabelFill);\n\n    decorateManualAxisLabel(text, category, {\n      ...handlers,\n      slotWidth,\n      fontSize: FD.polarCategoryLabelSize,\n    });\n  });\n}\n\nfunction drawRadialTicks(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  ticks: number[],\n  radial: (value: number) => number,\n  theme: WidgetTheme,\n  themeMode: 'light' | 'dark',\n): void {\n  const pillFill =\n    theme.background && theme.background !== 'transparent'\n      ? theme.background\n      : themeMode === 'dark'\n        ? FD.polarTickPillDark\n        : FD.polarTickPill;\n\n  parent\n    .selectAll<SVGGElement, number>('g')\n    .data(ticks)\n    .enter()\n    .append('g')\n    .attr('class', TICK_CLASS)\n    .each(function (value) {\n      const group = select(this);\n      const label = formatCompactNumber(value, 2);\n\n      const cy = -radial(value);\n      const text = group\n        .append('text')\n        .attr('x', 0)\n        .attr('y', cy)\n        .attr('font-size', FD.polarCategoryLabelSize)\n        .attr('text-anchor', 'middle')\n        .attr('dominant-baseline', 'central')\n        .attr('fill', theme.text)\n        .text(label);\n\n      const box = measureText(text.node(), label, FD.polarCategoryLabelSize, 0, cy);\n      group\n        .insert('rect', 'text')\n        .attr('x', box.x - FD.polarTickPillPadX)\n        .attr('y', box.y - FD.polarTickPillPadY)\n        .attr('width', box.width + FD.polarTickPillPadX * 2)\n        .attr('height', box.height + FD.polarTickPillPadY * 2)\n        .attr('rx', FD.polarTickPillRadius)\n        .attr('ry', FD.polarTickPillRadius)\n        .attr('fill', pillFill);\n    });\n}\n\n/**\n * FuseDash PolarAreaChart — D3 rewrite.\n * One wedge per category, each reaching the radius of its value; the legend\n * lives in the Lit shell.\n */\nexport function renderPolarAreaChart(\n  container: HTMLElement,\n  options: RenderPolarAreaChartOptions,\n): void {\n  const {\n    model,\n    width,\n    height,\n    margin,\n    theme,\n    themeMode = 'light',\n    showGrid = true,\n    showTooltip = true,\n    onHover,\n    onLeave,\n    onAxisLabelHover,\n    onAxisLabelLeave,\n  } = options;\n\n  container.replaceChildren();\n\n  const plotWidth = width - margin.left - margin.right;\n  const plotHeight = height - margin.top - margin.bottom;\n  const labelGutter = polarLabelGutter(model.categories, plotWidth);\n  const outerRadius = polarOuterRadius(plotWidth, plotHeight, labelGutter);\n  if (!model.sectors.length || outerRadius <= 0 || !model.maxValue) return;\n\n  const radial = scaleLinear()\n    .domain([0, model.maxValue])\n    .rangeRound([0, outerRadius])\n    .nice();\n  const gridOuter = radial(model.maxValue);\n  const ticks = polarRadialTicks(model.maxValue, FD.polarRadialSteps);\n\n  const svg = select(container)\n    .append('svg')\n    .attr('width', width)\n    .attr('height', height)\n    .attr('viewBox', `0 0 ${width} ${height}`);\n\n  const root = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);\n\n  if (showGrid) {\n    const gridGroup = root\n      .append('g')\n      .attr('class', 'polar-grid')\n      .attr('pointer-events', 'none');\n    drawGridRings(gridGroup, ticks, radial);\n    drawSpokes(gridGroup, model.categories, gridOuter);\n  }\n  if (outerRadius >= FD.polarMinLabelRadius) {\n    drawCategoryLabels(\n      root.append('g').attr('class', 'polar-category-labels'),\n      model.categories,\n      gridOuter,\n      width / 2,\n      { onAxisLabelHover, onAxisLabelLeave },\n    );\n  }\n\n  const angles = model.grouped\n    ? polarGroupedSectorAngles(model.categories, model.sectors)\n    : polarSectorAngles(model.sectors.length);\n  const arcGen = arc<{ sector: PolarAreaSector; startAngle: number; endAngle: number }>()\n    .innerRadius(0)\n    .outerRadius((d) => radial(d.sector.value))\n    .startAngle((d) => d.startAngle)\n    .endAngle((d) => d.endAngle);\n\n  const stroke = themeMode === 'dark' ? FD.donutSliceStrokeDark : FD.donutSliceStroke;\n  const sectors = root\n    .append('g')\n    .attr('class', 'polar-sectors')\n    .selectAll('path')\n    .data(model.sectors.map((sector, i) => ({ sector, ...angles[i] })))\n    .enter()\n    .append('path')\n    .attr('class', SECTOR_CLASS)\n    .attr('d', arcGen)\n    .attr('fill', (d) => d.sector.color)\n    .attr('opacity', FD.polarSectorOpacity)\n    .attr('stroke', stroke)\n    .attr('stroke-width', FD.donutSliceStrokeWidth);\n\n  // Client hides the radial tick pills when they would stack on top of each\n  // other. It tests the box height; here the disc no longer fills the box, so\n  // the ring spacing itself is what has to clear a pill row.\n  const fitsTicks = outerRadius >= FD.polarRadialSteps * FD.polarTickPillRowHeight;\n  if (showGrid && fitsTicks) {\n    drawRadialTicks(\n      root.append('g').attr('class', 'polar-ticks').attr('pointer-events', 'none'),\n      ticks,\n      radial,\n      theme,\n      themeMode,\n    );\n  }\n\n  if (!showTooltip || !onHover) return;\n\n  const dimmable = root.selectAll(`.${SECTOR_CLASS}, .${TICK_CLASS}`);\n  sectors\n    .style('cursor', 'pointer')\n    .on('mouseenter', function (event: MouseEvent, datum) {\n      dimmable.attr('opacity', FD.polarSectorOpacityDimmed);\n      select(this).attr('opacity', 1);\n      onHover({ sector: datum.sector, event });\n    })\n    .on('mousemove', (event: MouseEvent, datum) => {\n      onHover({ sector: datum.sector, event });\n    })\n    .on('mouseleave', () => {\n      sectors.attr('opacity', FD.polarSectorOpacity);\n      root.selectAll(`.${TICK_CLASS}`).attr('opacity', 1);\n      onLeave?.();\n    });\n}\n"],"names":[],"mappings":";;;;;;AAiCA,MAAM,eAAe;AACrB,MAAM,aAAa;AAOnB,SAAS,YACP,MACA,MACA,UACA,IACA,IACyD;;AACzD,QAAM,OAAM,kCAAM,YAAN;AACZ,MAAI,OAAO,IAAI,QAAQ,EAAG,QAAO;AACjC,QAAM,QAAQ,KAAK,SAAS,WAAW;AACvC,SAAO,EAAE,GAAG,KAAK,QAAQ,GAAG,GAAG,KAAK,WAAW,GAAG,OAAO,QAAQ,SAAA;AACnE;AAEA,SAAS,cACP,QACA,OACA,QACM;AACN,SACG,UAAU,QAAQ,EAClB,KAAK,KAAK,EACV,MAAA,EACA,OAAO,QAAQ,EACf,KAAK,KAAK,CAAC,MAAM,OAAO,CAAC,CAAC,EAC1B,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,GAAG,eAAe,EACjC,KAAK,kBAAkB,CAAC,IAAI,OAAO,IAAI,KAAK,GAAG,oBAAoB;AACxE;AAEA,SAAS,WACP,QACA,YACA,OACM;AACN,QAAM,QAAS,KAAK,KAAK,IAAK,WAAW;AACzC,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK,GAAG;AAE7C,UAAM,QAAQ,QAAQ,IAAI,KAAK,KAAK;AACpC,UAAM,IAAI,QAAQ,KAAK,IAAI,KAAK;AAChC,UAAM,IAAI,QAAQ,KAAK,IAAI,KAAK;AAEhC,WACG,OAAO,MAAM,EACb,KAAK,MAAM,CAAC,EACZ,KAAK,MAAM,CAAC,EACZ,KAAK,MAAM,CAAC,EACZ,KAAK,MAAM,CAAC,EACZ,KAAK,UAAU,GAAG,eAAe,EACjC,KAAK,mBAAmB,OAAO,EAC/B,KAAK,kBAAkB,OAAO,EAC9B,KAAK,oBAAoB,GAAG,cAAc;AAE7C,WACG,OAAO,QAAQ,EACf,KAAK,MAAM,CAAC,EACZ,KAAK,MAAM,CAAC,EACZ,KAAK,KAAK,GAAG,mBAAmB,EAChC,KAAK,QAAQ,GAAG,eAAe;AAAA,EACpC;AACF;AAEA,SAAS,mBACP,QACA,YACA,OACA,WACA,UACM;AACN,QAAM,QAAS,KAAK,KAAK,IAAK,WAAW;AACzC,QAAM,SAAS,QAAQ,GAAG;AAE1B,aAAW,QAAQ,CAAC,UAAU,MAAM;AAClC,UAAM,aAAa,QAAQ,IAAI,KAAK,KAAK,IAAI,QAAQ;AACrD,UAAM,IAAI,SAAS,KAAK,IAAI,UAAU;AACtC,UAAM,SAAS,iBAAiB,UAAU;AAE1C,UAAM,YACJ,WAAW,UACP,YAAY,IACZ,WAAW,QACT,YAAY,IACZ,IAAI,KAAK,IAAI,YAAY,GAAG,YAAY,CAAC;AAEjD,UAAM,OAAO,OACV,OAAO,MAAM,EACb,KAAK,KAAK,CAAC,EACX,KAAK,KAAK,SAAS,KAAK,IAAI,UAAU,CAAC,EACvC,KAAK,eAAe,MAAM,EAC1B,KAAK,aAAa,GAAG,sBAAsB,EAC3C,KAAK,qBAAqB,SAAS,EACnC,KAAK,QAAQ,GAAG,sBAAsB;AAEzC,4BAAwB,MAAM,UAAU;AAAA,MACtC,GAAG;AAAA,MACH;AAAA,MACA,UAAU,GAAG;AAAA,IAAA,CACd;AAAA,EACH,CAAC;AACH;AAEA,SAAS,gBACP,QACA,OACA,QACA,OACA,WACM;AACN,QAAM,WACJ,MAAM,cAAc,MAAM,eAAe,gBACrC,MAAM,aACN,cAAc,SACZ,GAAG,oBACH,GAAG;AAEX,SACG,UAA+B,GAAG,EAClC,KAAK,KAAK,EACV,MAAA,EACA,OAAO,GAAG,EACV,KAAK,SAAS,UAAU,EACxB,KAAK,SAAU,OAAO;AACrB,UAAM,QAAQ,OAAO,IAAI;AACzB,UAAM,QAAQ,oBAAoB,OAAO,CAAC;AAE1C,UAAM,KAAK,CAAC,OAAO,KAAK;AACxB,UAAM,OAAO,MACV,OAAO,MAAM,EACb,KAAK,KAAK,CAAC,EACX,KAAK,KAAK,EAAE,EACZ,KAAK,aAAa,GAAG,sBAAsB,EAC3C,KAAK,eAAe,QAAQ,EAC5B,KAAK,qBAAqB,SAAS,EACnC,KAAK,QAAQ,MAAM,IAAI,EACvB,KAAK,KAAK;AAEb,UAAM,MAAM,YAAY,KAAK,KAAA,GAAQ,OAAO,GAAG,wBAAwB,GAAG,EAAE;AAC5E,UACG,OAAO,QAAQ,MAAM,EACrB,KAAK,KAAK,IAAI,IAAI,GAAG,iBAAiB,EACtC,KAAK,KAAK,IAAI,IAAI,GAAG,iBAAiB,EACtC,KAAK,SAAS,IAAI,QAAQ,GAAG,oBAAoB,CAAC,EAClD,KAAK,UAAU,IAAI,SAAS,GAAG,oBAAoB,CAAC,EACpD,KAAK,MAAM,GAAG,mBAAmB,EACjC,KAAK,MAAM,GAAG,mBAAmB,EACjC,KAAK,QAAQ,QAAQ;AAAA,EAC1B,CAAC;AACL;AAOO,SAAS,qBACd,WACA,SACM;AACN,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,YAAU,gBAAA;AAEV,QAAM,YAAY,QAAQ,OAAO,OAAO,OAAO;AAC/C,QAAM,aAAa,SAAS,OAAO,MAAM,OAAO;AAChD,QAAM,cAAc,iBAAiB,MAAM,YAAY,SAAS;AAChE,QAAM,cAAc,iBAAiB,WAAW,YAAY,WAAW;AACvE,MAAI,CAAC,MAAM,QAAQ,UAAU,eAAe,KAAK,CAAC,MAAM,SAAU;AAElE,QAAM,SAAS,YAAA,EACZ,OAAO,CAAC,GAAG,MAAM,QAAQ,CAAC,EAC1B,WAAW,CAAC,GAAG,WAAW,CAAC,EAC3B,KAAA;AACH,QAAM,YAAY,OAAO,MAAM,QAAQ;AACvC,QAAM,QAAQ,iBAAiB,MAAM,UAAU,GAAG,gBAAgB;AAElE,QAAM,MAAM,OAAO,SAAS,EACzB,OAAO,KAAK,EACZ,KAAK,SAAS,KAAK,EACnB,KAAK,UAAU,MAAM,EACrB,KAAK,WAAW,OAAO,KAAK,IAAI,MAAM,EAAE;AAE3C,QAAM,OAAO,IAAI,OAAO,GAAG,EAAE,KAAK,aAAa,aAAa,QAAQ,CAAC,KAAK,SAAS,CAAC,GAAG;AAEvF,MAAI,UAAU;AACZ,UAAM,YAAY,KACf,OAAO,GAAG,EACV,KAAK,SAAS,YAAY,EAC1B,KAAK,kBAAkB,MAAM;AAChC,kBAAc,WAAW,OAAO,MAAM;AACtC,eAAW,WAAW,MAAM,YAAY,SAAS;AAAA,EACnD;AACA,MAAI,eAAe,GAAG,qBAAqB;AACzC;AAAA,MACE,KAAK,OAAO,GAAG,EAAE,KAAK,SAAS,uBAAuB;AAAA,MACtD,MAAM;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,MACR,EAAE,kBAAkB,iBAAA;AAAA,IAAiB;AAAA,EAEzC;AAEA,QAAM,SAAS,MAAM,UACjB,yBAAyB,MAAM,YAAY,MAAM,OAAO,IACxD,kBAAkB,MAAM,QAAQ,MAAM;AAC1C,QAAM,SAAS,MACZ,YAAY,CAAC,EACb,YAAY,CAAC,MAAM,OAAO,EAAE,OAAO,KAAK,CAAC,EACzC,WAAW,CAAC,MAAM,EAAE,UAAU,EAC9B,SAAS,CAAC,MAAM,EAAE,QAAQ;AAE7B,QAAM,SAAS,cAAc,SAAS,GAAG,uBAAuB,GAAG;AACnE,QAAM,UAAU,KACb,OAAO,GAAG,EACV,KAAK,SAAS,eAAe,EAC7B,UAAU,MAAM,EAChB,KAAK,MAAM,QAAQ,IAAI,CAAC,QAAQ,OAAO,EAAE,QAAQ,GAAG,OAAO,CAAC,EAAA,EAAI,CAAC,EACjE,MAAA,EACA,OAAO,MAAM,EACb,KAAK,SAAS,YAAY,EAC1B,KAAK,KAAK,MAAM,EAChB,KAAK,QAAQ,CAAC,MAAM,EAAE,OAAO,KAAK,EAClC,KAAK,WAAW,GAAG,kBAAkB,EACrC,KAAK,UAAU,MAAM,EACrB,KAAK,gBAAgB,GAAG,qBAAqB;AAKhD,QAAM,YAAY,eAAe,GAAG,mBAAmB,GAAG;AAC1D,MAAI,YAAY,WAAW;AACzB;AAAA,MACE,KAAK,OAAO,GAAG,EAAE,KAAK,SAAS,aAAa,EAAE,KAAK,kBAAkB,MAAM;AAAA,MAC3E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEA,MAAI,CAAC,eAAe,CAAC,QAAS;AAE9B,QAAM,WAAW,KAAK,UAAU,IAAI,YAAY,MAAM,UAAU,EAAE;AAClE,UACG,MAAM,UAAU,SAAS,EACzB,GAAG,cAAc,SAAU,OAAmB,OAAO;AACpD,aAAS,KAAK,WAAW,GAAG,wBAAwB;AACpD,WAAO,IAAI,EAAE,KAAK,WAAW,CAAC;AAC9B,YAAQ,EAAE,QAAQ,MAAM,QAAQ,OAAO;AAAA,EACzC,CAAC,EACA,GAAG,aAAa,CAAC,OAAmB,UAAU;AAC7C,YAAQ,EAAE,QAAQ,MAAM,QAAQ,OAAO;AAAA,EACzC,CAAC,EACA,GAAG,cAAc,MAAM;AACtB,YAAQ,KAAK,WAAW,GAAG,kBAAkB;AAC7C,SAAK,UAAU,IAAI,UAAU,EAAE,EAAE,KAAK,WAAW,CAAC;AAClD;AAAA,EACF,CAAC;AACL;"}

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

@@ -2,7 +2,7 @@ declare const _default: {
   "id": "punchcard-chart",
   "tag": "ui9000-punchcard-chart",
   "title": "Punchcard Chart",
-  "description": "Chat-optimized punchcard rewritten in D3 (Visx → D3). Bubble matrix by x/y categories, no Redux.",
+  "description": "Chat-optimized punchcard rewritten in D3. Single (no groupBy) or Grouped (groupBy as Y rows). Sequential bubble matrix, no Redux.",
   "chartTypeKeys": ["punchcardChart"],
   "source": "client/libs/shared/components/src/Widgets/PunchcardChart/",
   "stack": "d3",

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

@@ -1,7 +1,7 @@
 const id = "punchcard-chart";
 const tag = "ui9000-punchcard-chart";
 const title = "Punchcard Chart";
-const description = "Chat-optimized punchcard rewritten in D3 (Visx → D3). Bubble matrix by x/y categories, no Redux.";
+const description = "Chat-optimized punchcard rewritten in D3. Single (no groupBy) or Grouped (groupBy as Y rows). Sequential bubble matrix, no Redux.";
 const chartTypeKeys = ["punchcardChart"];
 const source = "client/libs/shared/components/src/Widgets/PunchcardChart/";
 const stack = "d3";

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/element/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA6ExB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sankey-chart/element/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAyDxB,CAAC"}

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

@@ -1,8 +1,7 @@
 import { css } from "lit";
 const sankeyStyles = css`
   :host {
-    display: flex;
-    flex-direction: column;
+    display: block;
     position: relative;
     width: 100%;
     height: 100%;
@@ -11,45 +10,26 @@ const sankeyStyles = css`
     font-family: var(--ui9000-font-family, system-ui, sans-serif);
     box-sizing: border-box;
   }
+
+  /* Client BlockLabelAxe / LabelAxe — source | target above the plot. */
   .axis-labels {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    flex-shrink: 0;
     margin: 0 3px 8px 3px;
     font-size: 12px;
     font-weight: 500;
     line-height: 14px;
-    color: var(--ui9000-color-text-muted, #6c7584);
+    color: var(--ui9000-color-text, #111827);
   }
+
   .chart-root {
     flex: 1 1 auto;
     min-height: 0;
     width: 100%;
   }
-  .legend {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding-top: 8px;
-    font-size: 12px;
-    color: var(--ui9000-color-text-muted, #6c7584);
-  }
-  .swatches {
-    display: flex;
-    align-items: center;
-  }
-  .swatch {
-    width: 14px;
-    height: 8px;
-  }
-  .swatch:first-child {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
-  .swatch:last-child {
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
+
   .tooltip {
     position: absolute;
     pointer-events: none;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/sankey-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sankeyStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n  .axis-labels {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    margin: 0 3px 8px 3px;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 14px;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n  .chart-root {\n    flex: 1 1 auto;\n    min-height: 0;\n    width: 100%;\n  }\n  .legend {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-top: 8px;\n    font-size: 12px;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n  .swatches {\n    display: flex;\n    align-items: center;\n  }\n  .swatch {\n    width: 14px;\n    height: 8px;\n  }\n  .swatch:first-child {\n    border-top-left-radius: 8px;\n    border-bottom-left-radius: 8px;\n  }\n  .swatch:last-child {\n    border-top-right-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 10px));\n    white-space: nowrap;\n  }\n  .tooltip .key {\n    font-weight: 600;\n  }\n  .empty {\n    display: grid;\n    place-items: center;\n    flex: 1 1 auto;\n    padding: 20px;\n    text-align: center;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/sankey-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sankeyStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n\n  /* Client BlockLabelAxe / LabelAxe — source | target above the plot. */\n  .axis-labels {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    flex-shrink: 0;\n    margin: 0 3px 8px 3px;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 14px;\n    color: var(--ui9000-color-text, #111827);\n  }\n\n  .chart-root {\n    flex: 1 1 auto;\n    min-height: 0;\n    width: 100%;\n  }\n\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 10px));\n    white-space: nowrap;\n  }\n  .tooltip .key {\n    font-weight: 600;\n  }\n  .empty {\n    display: grid;\n    place-items: center;\n    flex: 1 1 auto;\n    padding: 20px;\n    text-align: center;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,8 +1,7 @@
-import { LitElement, PropertyValues } from 'lit';
-export declare class Ui9000SankeyChart extends LitElement {
-    static styles: import('lit').CSSResult;
-    /** JSON: FuseDash widget payload | { nodes?, links } | SankeyLink[] */
-    dataJson: string;
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+export declare class Ui9000SankeyChart extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
     showLegend: boolean;
     showTooltip: boolean;
     /** Overrides the header above the left column. */
@@ -18,6 +17,7 @@ export declare class Ui9000SankeyChart extends LitElement {
     updated(changed: PropertyValues): void;
     private scheduleDraw;
     private parseData;
+    private renderLegend;
     private draw;
     private setTooltip;
     private clearTooltip;

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,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAuCrE,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAgB;IAEtC,uEAAuE;IAEvE,QAAQ,SAAQ;IAGhB,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,IAAI;IAiDZ,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAIX,MAAM;CAmDhB;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;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"}

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

@@ -1,6 +1,8 @@
-import { LitElement, nothing, html } from "lit";
+import { nothing, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { readThemeFromElement } from "../../../context/widget-context.js";
+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";
@@ -9,6 +11,7 @@ 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 { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -26,10 +29,9 @@ const EMPTY_VIEW = {
   targetLabel: "",
   colorRanges: []
 };
-let Ui9000SankeyChart = class extends LitElement {
+let Ui9000SankeyChart = class extends Ui9000ChartElement {
   constructor() {
     super(...arguments);
-    this.dataJson = "[]";
     this.showLegend = true;
     this.showTooltip = true;
     this.sourceLabel = "";
@@ -59,6 +61,12 @@ let Ui9000SankeyChart = class extends LitElement {
   parseData() {
     return normalizeSankeyData(parseJsonAttr(this.dataJson, []));
   }
+  renderLegend() {
+    if (!this.showLegend || this._view.empty || !this._view.colorRanges.length) {
+      return nothing;
+    }
+    return renderPaletteLegend(this._view.colorRanges.map((range) => range.color));
+  }
   draw() {
     var _a;
     const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
@@ -111,48 +119,42 @@ let Ui9000SankeyChart = class extends LitElement {
     this._tooltip = null;
   }
   render() {
-    const { empty, circular, sourceLabel, targetLabel, colorRanges } = this._view;
+    const { empty, circular, sourceLabel, targetLabel } = this._view;
     const showHeaders = !empty && Boolean(sourceLabel || targetLabel);
     return html`
-      ${showHeaders ? html`<div class="axis-labels" part="axis-labels">
-            <div>${sourceLabel}</div>
-            <div>${targetLabel}</div>
-          </div>` : nothing}
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(this.headerTitle())}
+        <div class="widget-body">
+          ${this.renderLegend()}
+          ${showHeaders ? html`<div class="axis-labels" part="axis-labels">
+                <div>${sourceLabel}</div>
+                <div>${targetLabel}</div>
+              </div>` : nothing}
 
-      <div class="chart-root" part="chart" ?hidden=${empty}></div>
+          <div class="chart-root" part="chart" ?hidden=${empty}></div>
 
-      ${empty ? html`<div class="empty" part="empty">
-            ${circular ? "Circular dependency detected in the data — this cannot be drawn as a Sankey." : "No data"}
-          </div>` : nothing}
+          ${empty ? html`<div class="empty" part="empty">
+                ${circular ? "Circular dependency detected in the data — this cannot be drawn as a Sankey." : "No data"}
+              </div>` : nothing}
 
-      ${!empty && this.showLegend && colorRanges.length ? html`<div class="legend" part="legend">
-            <span>Low</span>
-            <div class="swatches">
-              ${colorRanges.map(
-      (range) => html`<div class="swatch" style="background-color:${range.color}"></div>`
-    )}
-            </div>
-            <span>High</span>
-          </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(
+          ${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>`
+                      ${row.key ? html`<span class="key">${row.key}:</span> ` : nothing}${row.value}
+                    </div>`
     )}
-          </div>` : nothing}
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
     `;
   }
 };
-Ui9000SankeyChart.styles = sankeyStyles;
-__decorateClass([
-  property({ type: String, attribute: "data" })
-], Ui9000SankeyChart.prototype, "dataJson", 2);
+Ui9000SankeyChart.styles = [sankeyStyles, chartShellStyles];
 __decorateClass([
   property({ type: Boolean, attribute: "show-legend" })
 ], Ui9000SankeyChart.prototype, "showLegend", 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 { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.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 LitElement {\n  static override styles = sankeyStyles;\n\n  /** JSON: FuseDash widget payload | { nodes?, links } | SankeyLink[] */\n  @property({ type: String, attribute: 'data' })\n  dataJson = '[]';\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 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, colorRanges } = this._view;\n    const showHeaders = !empty && Boolean(sourceLabel || targetLabel);\n\n    return html`\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      ${!empty && this.showLegend && colorRanges.length\n        ? html`<div class=\"legend\" part=\"legend\">\n            <span>Low</span>\n            <div class=\"swatches\">\n              ${colorRanges.map(\n                (range) =>\n                  html`<div class=\"swatch\" style=\"background-color:${range.color}\"></div>`,\n              )}\n            </div>\n            <span>High</span>\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    `;\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 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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"}

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

@@ -0,0 +1,2 @@
+export declare const treemapChartStyles: import('lit').CSSResult;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/element/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAuI9B,CAAC"}

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

@@ -0,0 +1,141 @@
+import { css } from "lit";
+const treemapChartStyles = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 220px;
+    color: var(--ui9000-color-text, #111827);
+    font-family: var(--ui9000-font-family, system-ui, sans-serif);
+    box-sizing: border-box;
+  }
+
+  .chart-root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .chart-root[hidden] {
+    display: none;
+  }
+
+  /* Grouped mode — client TreemapGroupsContainer */
+  .treemap-groups {
+    display: grid;
+    gap: 8px;
+    margin-top: 10px;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    overflow: auto;
+  }
+
+  .treemap-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    padding: 8px;
+    border-radius: 8px;
+    background: var(--ui9000-color-surface-muted, #f7f8fa);
+  }
+
+  .treemap-card-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    padding-bottom: 8px;
+    flex-shrink: 0;
+  }
+
+  .treemap-card-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The group name owns the header — the field caption gives up space first. */
+  .treemap-card-subtitle {
+    flex: 0 100 auto;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .treemap-card-plot {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+  }
+
+  /* Tile label — client TextBox / TextName / TextValue */
+  .tile-label {
+    padding: 4px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .tile-name {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tile-value {
+    display: block;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 1.35;
+    background: var(--ui9000-color-text, #111827);
+    color: #fff;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+    transform: translate(-50%, calc(-100% - 10px));
+    white-space: nowrap;
+  }
+
+  .tooltip-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+  }
+
+  .empty {
+    display: grid;
+    place-items: center;
+    height: 100%;
+    min-height: inherit;
+    color: var(--ui9000-color-text-muted, #6b7280);
+    font-size: 0.875rem;
+  }
+`;
+export {
+  treemapChartStyles
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/treemap-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const treemapChartStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n\n  .chart-root {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .chart-root[hidden] {\n    display: none;\n  }\n\n  /* Grouped mode — client TreemapGroupsContainer */\n  .treemap-groups {\n    display: grid;\n    gap: 8px;\n    margin-top: 10px;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    overflow: auto;\n  }\n\n  .treemap-card {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    min-height: 0;\n    padding: 8px;\n    border-radius: 8px;\n    background: var(--ui9000-color-surface-muted, #f7f8fa);\n  }\n\n  .treemap-card-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n    padding-bottom: 8px;\n    flex-shrink: 0;\n  }\n\n  .treemap-card-title {\n    flex: 1 1 auto;\n    min-width: 0;\n    font-size: 14px;\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* The group name owns the header — the field caption gives up space first. */\n  .treemap-card-subtitle {\n    flex: 0 100 auto;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 16px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .treemap-card-plot {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n  }\n\n  /* Tile label — client TextBox / TextName / TextValue */\n  .tile-label {\n    padding: 4px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  .tile-name {\n    display: block;\n    font-size: 14px;\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tile-value {\n    display: block;\n    font-size: 12px;\n    line-height: 16px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 2;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 12px;\n    line-height: 1.35;\n    background: var(--ui9000-color-text, #111827);\n    color: #fff;\n    box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n    transform: translate(-50%, calc(-100% - 10px));\n    white-space: nowrap;\n  }\n\n  .tooltip-title {\n    font-weight: 600;\n    margin-bottom: 2px;\n  }\n\n  .empty {\n    display: grid;\n    place-items: center;\n    height: 100%;\n    min-height: inherit;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}