@fusedashlabs/widgets 0.2.0 → 0.3.1

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

@@ -0,0 +1,79 @@
+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.",
+  "chartTypeKeys": ["polarAreaChart"],
+  "source": "client/libs/shared/components/src/Widgets/PolarAreaChart/",
+  "stack": "d3",
+  "lazyImport": "@fusedashlabs/widgets/lazy/polar-area-chart",
+  "entry": "@fusedashlabs/widgets/polar-area-chart",
+  "usageConditions": {
+    "host": "mcp-chat",
+    "notFor": "fusedash-editor",
+    "mapsExcluded": true
+  },
+  "allowedActions": ["hover", "resize"],
+  "propsSchema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "type": "object",
+    "properties": {
+      "data": {
+        "oneOf": [
+          {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "required": ["label", "value"],
+              "properties": {
+                "label": { "type": "string" },
+                "value": { "type": "number" },
+                "color": { "type": "string" }
+              }
+            }
+          },
+          {
+            "type": "object",
+            "description": "Chat points payload",
+            "required": ["points"],
+            "properties": {
+              "points": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "required": ["x", "y"],
+                  "properties": {
+                    "x": { "type": ["string", "number"] },
+                    "y": { "type": "number" }
+                  }
+                }
+              }
+            }
+          },
+          {
+            "type": "object",
+            "description": "FuseDash WidgetItem-shaped payload",
+            "properties": {
+              "chartType": { "type": "string" },
+              "xAxe": { "type": "array", "items": { "type": "string" } },
+              "yAxe": { "type": "array", "items": { "type": "string" } },
+              "uniqueValues": { "type": "object" },
+              "formatting": { "type": "array" },
+              "data": { "type": "array" }
+            }
+          }
+        ]
+      },
+      "show-grid": { "type": "boolean" },
+      "show-legend": { "type": "boolean" },
+      "show-tooltip": { "type": "boolean" },
+      "scale": {
+        "type": "string",
+        "enum": ["compact", "default", "comfortable"]
+      }
+    }
+  }
+}
+;
+
+export default _default;

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

@@ -0,0 +1,42 @@
+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 chartTypeKeys = ["polarAreaChart"];
+const source = "client/libs/shared/components/src/Widgets/PolarAreaChart/";
+const stack = "d3";
+const lazyImport = "@fusedashlabs/widgets/lazy/polar-area-chart";
+const entry = "@fusedashlabs/widgets/polar-area-chart";
+const usageConditions = { "host": "mcp-chat", "notFor": "fusedash-editor", "mapsExcluded": true };
+const allowedActions = ["hover", "resize"];
+const propsSchema = { "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "data": { "oneOf": [{ "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" }, "color": { "type": "string" } } } }, { "type": "object", "description": "Chat points payload", "required": ["points"], "properties": { "points": { "type": "array", "items": { "type": "object", "required": ["x", "y"], "properties": { "x": { "type": ["string", "number"] }, "y": { "type": "number" } } } } } }, { "type": "object", "description": "FuseDash WidgetItem-shaped payload", "properties": { "chartType": { "type": "string" }, "xAxe": { "type": "array", "items": { "type": "string" } }, "yAxe": { "type": "array", "items": { "type": "string" } }, "uniqueValues": { "type": "object" }, "formatting": { "type": "array" }, "data": { "type": "array" } } }] }, "show-grid": { "type": "boolean" }, "show-legend": { "type": "boolean" }, "show-tooltip": { "type": "boolean" }, "scale": { "type": "string", "enum": ["compact", "default", "comfortable"] } } };
+const polarAreaMeta = {
+  id,
+  tag,
+  title,
+  description,
+  chartTypeKeys,
+  source,
+  stack,
+  lazyImport,
+  entry,
+  usageConditions,
+  allowedActions,
+  propsSchema
+};
+export {
+  allowedActions,
+  chartTypeKeys,
+  polarAreaMeta as default,
+  description,
+  entry,
+  id,
+  lazyImport,
+  propsSchema,
+  source,
+  stack,
+  tag,
+  title,
+  usageConditions
+};
+//# sourceMappingURL=metadata.json.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,25 @@
+import { ChartDimensions, WidgetTheme } from '../../../types/index.js';
+import { AxisLabelTooltipHandlers } from '../../../utils/axis-labels.js';
+import { PolarAreaModel, PolarAreaSector } from '../lib/types.js';
+export interface RenderPolarAreaChartOptions extends AxisLabelTooltipHandlers {
+    model: PolarAreaModel;
+    width: number;
+    height: number;
+    margin: ChartDimensions['margin'];
+    theme: WidgetTheme;
+    themeMode?: 'light' | 'dark';
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    onHover?: (payload: {
+        sector: PolarAreaSector;
+        event: MouseEvent;
+    }) => void;
+    onLeave?: () => void;
+}
+/**
+ * FuseDash PolarAreaChart — D3 rewrite.
+ * One wedge per category, each reaching the radius of its value; the legend
+ * lives in the Lit shell.
+ */
+export declare function renderPolarAreaChart(container: HTMLElement, options: RenderPolarAreaChartOptions): void;
+//# sourceMappingURL=draw.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,127 @@
+import { scaleLinear } from "d3-scale";
+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";
+const SECTOR_CLASS = "polar-area-path";
+const TICK_CLASS = "polar-tick-group";
+function measureText(node, text, fontSize, cx, cy) {
+  var _a;
+  const box = (_a = node == null ? void 0 : node.getBBox) == null ? void 0 : _a.call(node);
+  if (box && box.width > 0) return box;
+  const width = text.length * fontSize * 0.6;
+  return { x: cx - width / 2, y: cy - fontSize / 2, width, height: fontSize };
+}
+function drawGridRings(parent, ticks, radial) {
+  parent.selectAll("circle").data(ticks).enter().append("circle").attr("r", (d) => radial(d)).attr("fill", "none").attr("stroke", FD.polarGridStroke).attr("stroke-opacity", (_d, i) => (i + 1) * FD.polarGridStepOpacity);
+}
+function drawSpokes(parent, categories, outer) {
+  const slice = Math.PI * 2 / categories.length;
+  for (let i = 0; i < categories.length; i += 1) {
+    const angle = slice * i - Math.PI / 2;
+    const x = outer * Math.cos(angle);
+    const y = outer * Math.sin(angle);
+    parent.append("line").attr("x1", 0).attr("y1", 0).attr("x2", x).attr("y2", y).attr("stroke", FD.polarGridStroke).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-dasharray", FD.polarSpokeDash);
+    parent.append("circle").attr("cx", x).attr("cy", y).attr("r", FD.polarSpokeCapRadius).attr("fill", FD.polarGridStroke);
+  }
+}
+function drawCategoryLabels(parent, categories, outer, halfWidth, handlers) {
+  const slice = Math.PI * 2 / categories.length;
+  const radius = outer + FD.polarCategoryLabelOffset;
+  categories.forEach((category, i) => {
+    const labelAngle = slice * i - Math.PI / 2 + slice / 2;
+    const x = radius * Math.cos(labelAngle);
+    const anchor = polarLabelAnchor(labelAngle);
+    const slotWidth = anchor === "start" ? halfWidth - x : anchor === "end" ? halfWidth + x : 2 * Math.min(halfWidth - x, halfWidth + x);
+    const text = parent.append("text").attr("x", x).attr("y", radius * Math.sin(labelAngle)).attr("text-anchor", anchor).attr("font-size", FD.polarCategoryLabelSize).attr("dominant-baseline", "central").attr("fill", FD.polarCategoryLabelFill);
+    decorateManualAxisLabel(text, category, {
+      ...handlers,
+      slotWidth,
+      fontSize: FD.polarCategoryLabelSize
+    });
+  });
+}
+function drawRadialTicks(parent, ticks, radial, theme, themeMode) {
+  const pillFill = theme.background && theme.background !== "transparent" ? theme.background : themeMode === "dark" ? FD.polarTickPillDark : FD.polarTickPill;
+  parent.selectAll("g").data(ticks).enter().append("g").attr("class", TICK_CLASS).each(function(value) {
+    const group = select(this);
+    const label = formatCompactNumber(value, 2);
+    const cy = -radial(value);
+    const text = group.append("text").attr("x", 0).attr("y", cy).attr("font-size", FD.polarCategoryLabelSize).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", theme.text).text(label);
+    const box = measureText(text.node(), label, FD.polarCategoryLabelSize, 0, cy);
+    group.insert("rect", "text").attr("x", box.x - FD.polarTickPillPadX).attr("y", box.y - FD.polarTickPillPadY).attr("width", box.width + FD.polarTickPillPadX * 2).attr("height", box.height + FD.polarTickPillPadY * 2).attr("rx", FD.polarTickPillRadius).attr("ry", FD.polarTickPillRadius).attr("fill", pillFill);
+  });
+}
+function renderPolarAreaChart(container, options) {
+  const {
+    model,
+    width,
+    height,
+    margin,
+    theme,
+    themeMode = "light",
+    showGrid = true,
+    showTooltip = true,
+    onHover,
+    onLeave,
+    onAxisLabelHover,
+    onAxisLabelLeave
+  } = options;
+  container.replaceChildren();
+  const plotWidth = width - margin.left - margin.right;
+  const plotHeight = height - margin.top - margin.bottom;
+  const labelGutter = polarLabelGutter(model.categories, plotWidth);
+  const outerRadius = polarOuterRadius(plotWidth, plotHeight, labelGutter);
+  if (!model.sectors.length || outerRadius <= 0 || !model.maxValue) return;
+  const radial = scaleLinear().domain([0, model.maxValue]).rangeRound([0, outerRadius]).nice();
+  const gridOuter = radial(model.maxValue);
+  const ticks = polarRadialTicks(model.maxValue, FD.polarRadialSteps);
+  const svg = select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`);
+  const root = svg.append("g").attr("transform", `translate(${width / 2}, ${height / 2})`);
+  if (showGrid) {
+    const gridGroup = root.append("g").attr("class", "polar-grid").attr("pointer-events", "none");
+    drawGridRings(gridGroup, ticks, radial);
+    drawSpokes(gridGroup, model.categories, gridOuter);
+  }
+  if (outerRadius >= FD.polarMinLabelRadius) {
+    drawCategoryLabels(
+      root.append("g").attr("class", "polar-category-labels"),
+      model.categories,
+      gridOuter,
+      width / 2,
+      { onAxisLabelHover, onAxisLabelLeave }
+    );
+  }
+  const angles = 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);
+  const fitsTicks = outerRadius >= FD.polarRadialSteps * FD.polarTickPillRowHeight;
+  if (showGrid && fitsTicks) {
+    drawRadialTicks(
+      root.append("g").attr("class", "polar-ticks").attr("pointer-events", "none"),
+      ticks,
+      radial,
+      theme,
+      themeMode
+    );
+  }
+  if (!showTooltip || !onHover) return;
+  const dimmable = root.selectAll(`.${SECTOR_CLASS}, .${TICK_CLASS}`);
+  sectors.style("cursor", "pointer").on("mouseenter", function(event, datum) {
+    dimmable.attr("opacity", FD.polarSectorOpacityDimmed);
+    select(this).attr("opacity", 1);
+    onHover({ sector: datum.sector, event });
+  }).on("mousemove", (event, datum) => {
+    onHover({ sector: datum.sector, event });
+  }).on("mouseleave", () => {
+    sectors.attr("opacity", FD.polarSectorOpacity);
+    root.selectAll(`.${TICK_CLASS}`).attr("opacity", 1);
+    onLeave == null ? void 0 : onLeave();
+  });
+}
+export {
+  renderPolarAreaChart
+};
+//# sourceMappingURL=draw.js.map

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

@@ -0,0 +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":";;;;;;AAgCA,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,kBAAkB,MAAM,QAAQ,MAAM;AACrD,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/polar-area-chart/render/index.d.ts

@@ -0,0 +1,2 @@
+export { renderPolarAreaChart, type RenderPolarAreaChartOptions, } from './draw.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/polar-area-chart/render/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,KAAK,2BAA2B,GACjC,MAAM,WAAW,CAAC"}

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

@@ -18,7 +18,7 @@ export declare class Ui9000PunchcardChart extends Ui9000ChartElement {
     private scheduleDraw;
     private parseData;
     private draw;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -19,7 +19,7 @@ export declare class Ui9000RadarChart extends Ui9000ChartElement {
     private themeMode;
     private renderLegend;
     private draw;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { css } from "lit";
+const radialBarChartStyles = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 260px;
+    color: var(--ui9000-color-text, #111827);
+    font-family: var(--ui9000-font-family, system-ui, sans-serif);
+    box-sizing: border-box;
+  }
+  .chart-root {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .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 {
+  radialBarChartStyles
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/radial-bar-chart/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const radialBarChartStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 260px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n  .chart-root {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    display: flex;\n    align-items: center;\n    justify-content: center;\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-title {\n    font-weight: 600;\n    margin-bottom: 2px;\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,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/radial-bar-chart/element/ui9000-radial-bar-chart.d.ts

@@ -0,0 +1,35 @@
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+import { WidgetScale } from '../../../types/index.js';
+export declare class Ui9000RadialBarChart extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
+    scale: WidgetScale;
+    showGrid: boolean;
+    showLegend: boolean;
+    showTooltip: boolean;
+    private _tooltip;
+    private _empty;
+    /**
+     * Model from the last draw. `render()` reads it for the legend so a paint
+     * never re-parses the `data` attribute; `_`-prefixed state is ignored by
+     * `chartPropsChanged`, so assigning it cannot loop back into a redraw.
+     */
+    private _model;
+    private _resizeObserver?;
+    private _raf;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    private scheduleDraw;
+    private parseData;
+    private renderLegend;
+    private draw;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui9000-radial-bar-chart': Ui9000RadialBarChart;
+    }
+}
+export declare function registerRadialBarChart(): void;
+//# sourceMappingURL=ui9000-radial-bar-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-radial-bar-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/radial-bar-chart/element/ui9000-radial-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAc3D,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,MAAM,4BAA4C;IAGlE,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,QAAQ,CAKA;IAGhB,OAAO,CAAC,MAAM,CAAS;IAEvB;;;;OAIG;IAEH,OAAO,CAAC,MAAM,CAA+B;IAE7C,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,IAAI;IAkDH,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}

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

@@ -0,0 +1,174 @@
+import { nothing, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { readThemeFromElement } from "../../../context/widget-context.js";
+import { renderChartLegend } from "../../../element/chart-legend-render.js";
+import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
+import { parseJsonAttr, getRadialBarDimensions } from "../../../utils/chart-helpers.js";
+import { swatchLegendEntries } from "../../../utils/chart-legend.js";
+import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { renderRadialBarChart } from "../render/draw.js";
+import { radialBarChartStyles } from "./styles.js";
+import { normalizeRadialBarData } from "../lib/normalize.js";
+import { formatRadialBarCategory, formatRadialBarValue } from "../lib/format.js";
+import { chartShellStyles } from "../../../element/chart-shell-styles.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let Ui9000RadialBarChart = class extends Ui9000ChartElement {
+  constructor() {
+    super(...arguments);
+    this.scale = "default";
+    this.showGrid = true;
+    this.showLegend = true;
+    this.showTooltip = true;
+    this._tooltip = null;
+    this._empty = false;
+    this._model = null;
+    this._raf = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    cancelAnimationFrame(this._raf);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (chartPropsChanged(changed)) this.scheduleDraw();
+  }
+  scheduleDraw() {
+    cancelAnimationFrame(this._raf);
+    this._raf = requestAnimationFrame(() => this.draw());
+  }
+  parseData() {
+    const raw = parseJsonAttr(this.dataJson, null);
+    return normalizeRadialBarData(raw);
+  }
+  renderLegend(model) {
+    if (!this.showLegend || !model.legend.length) return nothing;
+    const theme = readThemeFromElement(this);
+    return renderChartLegend(
+      swatchLegendEntries(
+        model.legend.map((bar) => bar.label),
+        theme,
+        (_label, index) => {
+          var _a;
+          return ((_a = model.legend[index]) == null ? void 0 : _a.color) ?? theme.primary;
+        }
+      )
+    );
+  }
+  draw() {
+    var _a;
+    const root = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root");
+    if (!root) return;
+    const model = this.parseData();
+    this._model = model;
+    this._empty = model.bars.length === 0;
+    if (this._empty) {
+      root.replaceChildren();
+      return;
+    }
+    readThemeFromElement(this);
+    const { width, height, margin } = getRadialBarDimensions(root, this.scale);
+    const xField = model.xField;
+    const yField = model.yField;
+    renderRadialBarChart(root, {
+      bars: model.bars,
+      width,
+      height,
+      margin,
+      showGrid: this.showGrid,
+      showTooltip: this.showTooltip,
+      ...this.axisLabelHandlers(),
+      onHover: this.showTooltip ? ({ bar, event }) => {
+        var _a2, _b;
+        const rect = this.getBoundingClientRect();
+        const xDetail = xField ? (_a2 = model.axisDetails) == null ? void 0 : _a2[xField] : void 0;
+        const yDetail = yField ? (_b = model.axisDetails) == null ? void 0 : _b[yField] : void 0;
+        this._tooltip = {
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top,
+          title: formatRadialBarCategory(bar.label),
+          lines: [
+            `${(xDetail == null ? void 0 : xDetail.label) ?? xField ?? "Category"}: ${formatRadialBarCategory(bar.label, xDetail)}`,
+            `${(yDetail == null ? void 0 : yDetail.label) ?? yField ?? "Value"}: ${formatRadialBarValue(bar.value, yDetail)}`
+          ]
+        };
+      } : void 0,
+      onLeave: this.showTooltip ? () => {
+        this._tooltip = null;
+      } : void 0
+    });
+  }
+  render() {
+    const title = this.headerTitle();
+    const model = this._empty ? null : this._model;
+    return html`
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(title)}
+        <div class="widget-body">
+          ${model ? this.renderLegend(model) : nothing}
+          <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
+          ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
+          ${this._tooltip ? html`<div
+                class="tooltip"
+                part="tooltip"
+                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
+              >
+                <div class="tooltip-title">${this._tooltip.title}</div>
+                ${this._tooltip.lines.map((line) => html`<div>${line}</div>`)}
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
+    `;
+  }
+};
+Ui9000RadialBarChart.styles = [radialBarChartStyles, chartShellStyles];
+__decorateClass([
+  property({ type: String, attribute: "scale" })
+], Ui9000RadialBarChart.prototype, "scale", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-grid" })
+], Ui9000RadialBarChart.prototype, "showGrid", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-legend" })
+], Ui9000RadialBarChart.prototype, "showLegend", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-tooltip" })
+], Ui9000RadialBarChart.prototype, "showTooltip", 2);
+__decorateClass([
+  state()
+], Ui9000RadialBarChart.prototype, "_tooltip", 2);
+__decorateClass([
+  state()
+], Ui9000RadialBarChart.prototype, "_empty", 2);
+__decorateClass([
+  state()
+], Ui9000RadialBarChart.prototype, "_model", 2);
+Ui9000RadialBarChart = __decorateClass([
+  customElement("ui9000-radial-bar-chart")
+], Ui9000RadialBarChart);
+function registerRadialBarChart() {
+  if (!customElements.get("ui9000-radial-bar-chart")) {
+    customElements.define("ui9000-radial-bar-chart", Ui9000RadialBarChart);
+  }
+}
+registerRadialBarChart();
+export {
+  Ui9000RadialBarChart,
+  registerRadialBarChart
+};
+//# sourceMappingURL=ui9000-radial-bar-chart.js.map