@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-DN6AXQYZ.mjs

@@ -0,0 +1,667 @@
+import { getCategoryLabelAnchor } from './chunk-WCG35U6M.mjs';
+import { resolveBandGeometry, buildWedgePath, buildCircleSvgPath, buildPolygonPath, resolveLineGeometry } from './chunk-TA4MVAEX.mjs';
+import { formatCompactValue, measureFontMetrics, svgAnchorToCanvasAlign } from './chunk-XTVE4P3L.mjs';
+import { resolveAxisColor } from './chunk-NKUYIWAP.mjs';
+import { createSvgGroup, appendChild, createSvgPath, createSvgText, createSvgLine, createSvgCircle, withCanvasState } from './chunk-SSLTFJ3U.mjs';
+import { toRad } from './chunk-RQ3CKQOX.mjs';
+
+// src/renderers/radial-grid.svg.ts
+function renderRadialGridSvg(layout, theme, axisIndex = 0) {
+  const { center, categories, spokeEndpoints, xAxis, yAxis } = layout;
+  const group = createSvgGroup();
+  const gridShape = yAxis?.shape ?? "polygon";
+  const refLabelFontSize = yAxis ? Math.round(yAxis.tickFontSize * 0.83) : 9;
+  if (layout.referenceBands?.length) {
+    for (const band of layout.referenceBands) {
+      const resolved = resolveBandGeometry(band, layout, yAxis);
+      if (!resolved) continue;
+      const { rInner, rOuter, mode: bandMode, angleStartDeg, angleEndDeg } = resolved;
+      const rawFill = band.fill;
+      const fillColor = typeof rawFill === "string" ? rawFill : rawFill?.color ?? theme.bandFill;
+      const fillOpacity = typeof rawFill === "object" && rawFill !== null ? rawFill.opacity ?? 0.15 : band.fillOpacity ?? 0.15;
+      if (bandMode === "wedge") {
+        appendChild(group, createSvgPath(buildWedgePath(center, rInner, rOuter, angleStartDeg, angleEndDeg), { fill: fillColor, "fill-opacity": fillOpacity, "fill-rule": "evenodd", stroke: band.stroke ?? "none" }));
+      } else if (gridShape === "circle") {
+        const outerPath = buildCircleSvgPath(center.x, center.y, rOuter);
+        const innerPath = rInner > 0 ? buildCircleSvgPath(center.x, center.y, rInner) : "";
+        appendChild(group, createSvgPath(innerPath ? `${outerPath} ${innerPath}` : outerPath, { fill: fillColor, "fill-opacity": fillOpacity, "fill-rule": "evenodd", stroke: band.stroke ?? "none" }));
+      } else {
+        const outerPath = buildPolygonPath(center, rOuter, categories.length, layout.angleStep);
+        const innerPath = rInner > 0 ? buildPolygonPath(center, rInner, categories.length, layout.angleStep) : "";
+        appendChild(group, createSvgPath(innerPath ? `${outerPath} ${innerPath}` : outerPath, { fill: fillColor, "fill-opacity": fillOpacity, "fill-rule": "evenodd", stroke: band.stroke ?? "none" }));
+      }
+      if (band.label) {
+        const labelDeg = bandMode === "wedge" ? (angleStartDeg + angleEndDeg) / 2 : -90 + (band.labelAngle ?? layout.angleStep / 2);
+        const angleRad = toRad(labelDeg);
+        const midR = (rInner + rOuter) / 2;
+        const lx = Math.round(center.x + Math.cos(angleRad) * midR);
+        const ly = Math.round(center.y + Math.sin(angleRad) * midR);
+        appendChild(
+          group,
+          createSvgText(lx, ly, band.label, {
+            class: "p-chart-tick-label",
+            "text-anchor": "start",
+            "dominant-baseline": "middle",
+            fill: band.labelColor ?? theme.tickLabel,
+            "font-size": band.labelFontSize ?? refLabelFontSize,
+            "font-family": layout.fontFamily,
+            opacity: 0.75
+          })
+        );
+      }
+    }
+  }
+  if (layout.referenceLines?.length) {
+    for (const line of layout.referenceLines) {
+      const resolved = resolveLineGeometry(line, layout, yAxis);
+      if (!resolved) continue;
+      const lineColor = line.stroke ?? resolveAxisColor(theme, axisIndex);
+      const lineWidth = line.lineStrokeWidth ?? 1.5;
+      const lineDashAttr = {};
+      if (line.strokeDasharray?.length) lineDashAttr["stroke-dasharray"] = line.strokeDasharray.join(" ");
+      if (resolved.mode === "crossbar") {
+        appendChild(group, createSvgLine(resolved.x1, resolved.y1, resolved.x2, resolved.y2, { stroke: lineColor, "stroke-width": lineWidth, ...lineDashAttr }));
+      } else if (gridShape === "circle") {
+        appendChild(group, createSvgCircle(center.x, center.y, resolved.r, { fill: "none", stroke: lineColor, "stroke-width": lineWidth, ...lineDashAttr }));
+      } else {
+        appendChild(group, createSvgPath(buildPolygonPath(center, resolved.r, categories.length, layout.angleStep), { fill: "none", stroke: lineColor, "stroke-width": lineWidth, ...lineDashAttr }));
+      }
+      if (line.label) {
+        let lx;
+        let ly;
+        if (resolved.mode === "crossbar") {
+          lx = Math.round(resolved.x2);
+          ly = Math.round(resolved.y2);
+        } else {
+          const angleDeg = line.labelAngle ?? layout.angleStep / 2;
+          const angleRad = toRad(-90 + angleDeg);
+          lx = Math.round(center.x + Math.cos(angleRad) * (resolved.r + 4));
+          ly = Math.round(center.y + Math.sin(angleRad) * (resolved.r + 4));
+        }
+        appendChild(
+          group,
+          createSvgText(lx, ly, line.label, {
+            "text-anchor": "start",
+            "dominant-baseline": "middle",
+            fill: line.labelColor ?? lineColor,
+            "font-size": line.labelFontSize ?? refLabelFontSize,
+            "font-family": layout.fontFamily,
+            opacity: 0.85
+          })
+        );
+      }
+    }
+  }
+  if (yAxis && yAxis.visible !== false && yAxis.mode === "perSpoke") {
+    const { gridColor, gridStrokeWidth, gridOpacity, gridStyle, shape, referenceRingRadii, tickFontSize, tickColor, spokes } = yAxis;
+    const dashAttrs = {};
+    if (gridStyle === "dashed") dashAttrs["stroke-dasharray"] = "6 4";
+    else if (gridStyle === "dotted") dashAttrs["stroke-dasharray"] = "2 3";
+    const xDrawsPerimeter = !!(xAxis && xAxis.visible !== false && xAxis.showLine !== false);
+    const ringsToDraw = xDrawsPerimeter ? referenceRingRadii : [...referenceRingRadii, layout.radius];
+    if (yAxis.gridLines !== false) {
+      for (const r of ringsToDraw) {
+        if (r <= 0) continue;
+        const ringAttrs = { class: "p-chart-grid-line", fill: "none", "stroke-width": gridStrokeWidth, "stroke-opacity": gridOpacity, ...dashAttrs };
+        if (gridColor) ringAttrs.style = `stroke: ${gridColor}`;
+        if (shape === "circle") {
+          appendChild(group, createSvgCircle(center.x, center.y, r, ringAttrs));
+        } else {
+          appendChild(group, createSvgPath(buildPolygonPath(center, r, categories.length, layout.angleStep), ringAttrs));
+        }
+      }
+    }
+    const spokeAttrs = { class: "p-chart-grid-line", "stroke-width": gridStrokeWidth, "stroke-opacity": gridOpacity, ...dashAttrs };
+    if (gridColor) spokeAttrs.style = `stroke: ${gridColor}`;
+    for (let si = 0; si < spokeEndpoints.length; si++) {
+      if (spokes[si]?.showLine === false) continue;
+      const ep = spokeEndpoints[si];
+      appendChild(group, createSvgLine(center.x, center.y, ep.x, ep.y, spokeAttrs));
+    }
+    const haloColor = theme.tickHalo;
+    for (let ci = 0; ci < spokes.length; ci++) {
+      const entry = spokes[ci];
+      if (entry.showLabels === false) continue;
+      const angleDeg = -90 + ci * layout.angleStep;
+      const angleRad = toRad(angleDeg);
+      const dx = Math.cos(angleRad);
+      const dy = Math.sin(angleRad);
+      const resolvedFontSize = Math.round((entry.tickFontSize ?? tickFontSize) * 0.83);
+      const resolvedColor = entry.tickColor ?? tickColor;
+      const formatter = entry.tickFormat;
+      let rotation = angleDeg + 90;
+      rotation = ((rotation + 180) % 360 + 360) % 360 - 180;
+      if (rotation > 90) rotation -= 180;
+      else if (rotation < -90) rotation += 180;
+      for (let li = 1; li < entry.levelValues.length; li++) {
+        const r = entry.levelRadii[li];
+        if (r <= 0) continue;
+        const val = entry.levelValues[li];
+        const text = formatter ? formatter(val) : formatCompactValue(val);
+        const px = -dy * 4;
+        const py = dx * 4;
+        const cx = center.x + dx * r + px;
+        const cy = center.y + dy * r + py;
+        appendChild(
+          group,
+          createSvgText(cx, cy, text, {
+            class: "p-chart-tick-label",
+            "text-anchor": "middle",
+            "dominant-baseline": "central",
+            transform: `rotate(${rotation.toFixed(2)} ${cx} ${cy})`,
+            fill: resolvedColor ?? theme.tickLabel,
+            stroke: haloColor,
+            "stroke-width": "3",
+            "stroke-linejoin": "round",
+            "paint-order": "stroke fill",
+            "font-size": resolvedFontSize,
+            "font-family": layout.fontFamily,
+            opacity: 0.85
+          })
+        );
+      }
+    }
+  }
+  if (yAxis && yAxis.visible !== false && yAxis.mode === "shared") {
+    const { gridColor, gridStrokeWidth, gridOpacity, gridStyle, levelRadii, levelValues, shape, tickFontSize, tickColor, tickFormat } = yAxis;
+    const dashAttrs = {};
+    if (gridStyle === "dashed") dashAttrs["stroke-dasharray"] = "6 4";
+    else if (gridStyle === "dotted") dashAttrs["stroke-dasharray"] = "2 3";
+    const xDrawsPerimeter = !!(xAxis && xAxis.visible !== false && xAxis.showLine !== false);
+    const innerEnd = xDrawsPerimeter ? levelRadii.length - 1 : levelRadii.length;
+    if (yAxis.gridLines !== false) {
+      for (let li = 0; li < innerEnd; li++) {
+        const r = levelRadii[li];
+        if (r <= 0) continue;
+        const ringAttrs = { class: "p-chart-grid-line", fill: "none", "stroke-width": gridStrokeWidth, "stroke-opacity": gridOpacity, ...dashAttrs };
+        if (gridColor) ringAttrs.style = `stroke: ${gridColor}`;
+        if (shape === "circle") {
+          appendChild(group, createSvgCircle(center.x, center.y, r, ringAttrs));
+        } else {
+          appendChild(group, createSvgPath(buildPolygonPath(center, r, categories.length, layout.angleStep), ringAttrs));
+        }
+      }
+    }
+    if (yAxis.showLine !== false) {
+      const spokeAttrs = { class: "p-chart-grid-line", "stroke-width": gridStrokeWidth, "stroke-opacity": gridOpacity, ...dashAttrs };
+      if (gridColor) spokeAttrs.style = `stroke: ${gridColor}`;
+      for (const ep of spokeEndpoints) {
+        appendChild(group, createSvgLine(center.x, center.y, ep.x, ep.y, spokeAttrs));
+      }
+    }
+    const haloColor = theme.tickHalo;
+    const resolvedTickFontSize = Math.round(tickFontSize * 0.83);
+    const labelEnd = yAxis.showLabels === false ? 0 : xDrawsPerimeter ? levelValues.length - 1 : levelValues.length;
+    for (let li = 1; li < labelEnd; li++) {
+      const r = levelRadii[li];
+      const val = levelValues[li];
+      const label = tickFormat ? tickFormat(val) : formatCompactValue(val);
+      const ly = center.y - r;
+      appendChild(
+        group,
+        createSvgText(center.x + 4, ly + 8, label, {
+          class: "p-chart-tick-label",
+          "text-anchor": "start",
+          fill: tickColor ?? theme.tickLabel,
+          stroke: haloColor,
+          "stroke-width": "3",
+          "stroke-linejoin": "round",
+          "paint-order": "stroke fill",
+          "font-size": resolvedTickFontSize,
+          "font-family": layout.fontFamily,
+          opacity: 0.7
+        })
+      );
+    }
+  }
+  if (xAxis && xAxis.visible !== false) {
+    const ringColor = yAxis?.gridColor ?? xAxis.color;
+    const ringStrokeWidth = yAxis?.gridStrokeWidth ?? 0.5;
+    const ringOpacity = yAxis?.gridOpacity ?? 0.6;
+    const ringStyle = yAxis?.gridStyle ?? "solid";
+    const ringDashAttrs = {};
+    if (ringStyle === "dashed") ringDashAttrs["stroke-dasharray"] = "6 4";
+    else if (ringStyle === "dotted") ringDashAttrs["stroke-dasharray"] = "2 3";
+    const perimeterAttrs = { class: "p-chart-axis-line", fill: "none", "stroke-width": ringStrokeWidth, "stroke-opacity": ringOpacity, ...ringDashAttrs };
+    if (ringColor) perimeterAttrs.style = `stroke: ${ringColor}`;
+    if (xAxis.showLine !== false) {
+      if (xAxis.shape === "circle") {
+        appendChild(group, createSvgCircle(center.x, center.y, layout.radius, perimeterAttrs));
+      } else {
+        appendChild(group, createSvgPath(buildPolygonPath(center, layout.radius, categories.length, layout.angleStep), perimeterAttrs));
+      }
+    }
+    const { midToAlpha } = measureFontMetrics(xAxis.labelFontSize, layout.fontFamily);
+    for (let i = 0; xAxis.showLabels !== false && i < categories.length; i++) {
+      const angleDeg = -90 + i * layout.angleStep;
+      const angleRad = toRad(angleDeg);
+      const lx = Math.round(center.x + Math.cos(angleRad) * (layout.radius + xAxis.labelPadding));
+      const ly = center.y + Math.sin(angleRad) * (layout.radius + xAxis.labelPadding);
+      const finalY = Math.round(ly + midToAlpha);
+      appendChild(
+        group,
+        createSvgText(lx, finalY, categories[i], {
+          class: "p-chart-tick-label",
+          "text-anchor": getCategoryLabelAnchor(angleDeg),
+          "dominant-baseline": "auto",
+          fill: xAxis.color ?? theme.tickLabel,
+          "font-size": xAxis.labelFontSize,
+          "font-family": layout.fontFamily
+        })
+      );
+    }
+  }
+  return group;
+}
+
+// src/renderers/radial-grid.canvas.ts
+function renderRadialGridCanvas(ctx, layout, theme, axisIndex = 0) {
+  const { center, categories, spokeEndpoints, xAxis, yAxis } = layout;
+  const axisColor = resolveAxisColor(theme, axisIndex);
+  const gridShape = yAxis?.shape ?? "polygon";
+  const refLabelFontSize = yAxis ? Math.round(yAxis.tickFontSize * 0.83) : 9;
+  if (layout.referenceBands?.length) {
+    for (const band of layout.referenceBands) {
+      const resolved = resolveBandGeometry(band, layout, yAxis);
+      if (!resolved) continue;
+      const { rInner, rOuter, mode: bandMode, angleStartDeg, angleEndDeg } = resolved;
+      const rawFill = band.fill;
+      const fillColor = typeof rawFill === "string" ? rawFill : rawFill?.color ?? theme.bandFill;
+      const fillOpacity = typeof rawFill === "object" && rawFill !== null ? rawFill.opacity ?? 0.15 : band.fillOpacity ?? 0.15;
+      withCanvasState(ctx, () => {
+        ctx.globalAlpha = fillOpacity;
+        ctx.fillStyle = fillColor;
+        ctx.beginPath();
+        if (bandMode === "wedge") {
+          const a1 = toRad(angleStartDeg);
+          const a2 = toRad(angleEndDeg);
+          if (rInner <= 0) {
+            ctx.moveTo(center.x, center.y);
+            ctx.lineTo(center.x + Math.cos(a1) * rOuter, center.y + Math.sin(a1) * rOuter);
+            ctx.arc(center.x, center.y, rOuter, a1, a2, false);
+            ctx.closePath();
+          } else {
+            ctx.moveTo(center.x + Math.cos(a1) * rInner, center.y + Math.sin(a1) * rInner);
+            ctx.lineTo(center.x + Math.cos(a1) * rOuter, center.y + Math.sin(a1) * rOuter);
+            ctx.arc(center.x, center.y, rOuter, a1, a2, false);
+            ctx.lineTo(center.x + Math.cos(a2) * rInner, center.y + Math.sin(a2) * rInner);
+            ctx.arc(center.x, center.y, rInner, a2, a1, true);
+            ctx.closePath();
+          }
+        } else if (gridShape === "circle") {
+          ctx.arc(center.x, center.y, rOuter, 0, Math.PI * 2, false);
+          if (rInner > 0) ctx.arc(center.x, center.y, rInner, 0, Math.PI * 2, true);
+        } else {
+          for (let i = 0; i < categories.length; i++) {
+            const a = toRad(-90 + i * layout.angleStep);
+            const px = center.x + Math.cos(a) * rOuter;
+            const py = center.y + Math.sin(a) * rOuter;
+            if (i === 0) ctx.moveTo(px, py);
+            else ctx.lineTo(px, py);
+          }
+          ctx.closePath();
+          if (rInner > 0) {
+            for (let i = 0; i < categories.length; i++) {
+              const a = toRad(-90 + i * layout.angleStep);
+              const px = center.x + Math.cos(a) * rInner;
+              const py = center.y + Math.sin(a) * rInner;
+              if (i === 0) ctx.moveTo(px, py);
+              else ctx.lineTo(px, py);
+            }
+            ctx.closePath();
+          }
+        }
+        ctx.fill("evenodd");
+      });
+      if (band.label) {
+        const labelDeg = bandMode === "wedge" ? (angleStartDeg + angleEndDeg) / 2 : -90 + (band.labelAngle ?? layout.angleStep / 2);
+        const angleRad = toRad(labelDeg);
+        const midR = (rInner + rOuter) / 2;
+        const lx = Math.round(center.x + Math.cos(angleRad) * midR);
+        const ly = Math.round(center.y + Math.sin(angleRad) * midR);
+        withCanvasState(ctx, () => {
+          ctx.fillStyle = band.labelColor ?? theme.tickLabel;
+          ctx.globalAlpha = 0.75;
+          ctx.font = `${band.labelFontSize ?? refLabelFontSize}px ${layout.fontFamily}`;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "middle";
+          ctx.fillText(band.label, lx, ly);
+        });
+      }
+    }
+  }
+  if (layout.referenceLines?.length) {
+    for (const line of layout.referenceLines) {
+      const resolved = resolveLineGeometry(line, layout, yAxis);
+      if (!resolved) continue;
+      const lineColor = line.stroke ?? axisColor;
+      const lineWidth = line.lineStrokeWidth ?? 1.5;
+      withCanvasState(ctx, () => {
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+        if (line.strokeDasharray?.length) ctx.setLineDash(line.strokeDasharray);
+        ctx.beginPath();
+        if (resolved.mode === "crossbar") {
+          ctx.moveTo(resolved.x1, resolved.y1);
+          ctx.lineTo(resolved.x2, resolved.y2);
+        } else if (gridShape === "circle") {
+          ctx.arc(center.x, center.y, resolved.r, 0, Math.PI * 2);
+        } else {
+          for (let i = 0; i < categories.length; i++) {
+            const a = toRad(-90 + i * layout.angleStep);
+            const px = center.x + Math.cos(a) * resolved.r;
+            const py = center.y + Math.sin(a) * resolved.r;
+            if (i === 0) ctx.moveTo(px, py);
+            else ctx.lineTo(px, py);
+          }
+          ctx.closePath();
+        }
+        ctx.stroke();
+      });
+      if (line.label) {
+        let lx;
+        let ly;
+        if (resolved.mode === "crossbar") {
+          lx = Math.round(resolved.x2);
+          ly = Math.round(resolved.y2);
+        } else {
+          const angleDeg = line.labelAngle ?? layout.angleStep / 2;
+          const angleRad = toRad(-90 + angleDeg);
+          lx = Math.round(center.x + Math.cos(angleRad) * (resolved.r + 4));
+          ly = Math.round(center.y + Math.sin(angleRad) * (resolved.r + 4));
+        }
+        withCanvasState(ctx, () => {
+          ctx.fillStyle = line.labelColor ?? lineColor;
+          ctx.globalAlpha = 0.85;
+          ctx.font = `${line.labelFontSize ?? refLabelFontSize}px ${layout.fontFamily}`;
+          ctx.textAlign = "left";
+          ctx.textBaseline = "middle";
+          ctx.fillText(line.label, lx, ly);
+        });
+      }
+    }
+  }
+  if (yAxis && yAxis.visible !== false && yAxis.mode === "shared") {
+    const { gridColor, gridStrokeWidth, gridOpacity, gridStyle, levelRadii, levelValues, shape, tickFontSize, tickColor, tickFormat } = yAxis;
+    withCanvasState(ctx, () => {
+      ctx.globalAlpha = gridOpacity;
+      ctx.strokeStyle = gridColor ?? theme.grid;
+      ctx.lineWidth = gridStrokeWidth;
+      if (gridStyle === "dashed") ctx.setLineDash([6, 4]);
+      else if (gridStyle === "dotted") ctx.setLineDash([2, 3]);
+      const innerEnd = yAxis.gridLines === false ? 0 : xAxis && xAxis.visible !== false && xAxis.showLine !== false ? levelRadii.length - 1 : levelRadii.length;
+      for (let li = 0; li < innerEnd; li++) {
+        const r = levelRadii[li];
+        if (r <= 0) continue;
+        if (shape === "circle") {
+          ctx.beginPath();
+          ctx.arc(center.x, center.y, r, 0, Math.PI * 2);
+          ctx.stroke();
+        } else {
+          ctx.beginPath();
+          for (let i = 0; i < categories.length; i++) {
+            const angleRad = toRad(-90 + i * layout.angleStep);
+            const x = center.x + Math.cos(angleRad) * r;
+            const y = center.y + Math.sin(angleRad) * r;
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          ctx.closePath();
+          ctx.stroke();
+        }
+      }
+      if (yAxis.showLine !== false) {
+        for (const ep of spokeEndpoints) {
+          ctx.beginPath();
+          ctx.moveTo(center.x, center.y);
+          ctx.lineTo(ep.x, ep.y);
+          ctx.stroke();
+        }
+      }
+    });
+    withCanvasState(ctx, () => {
+      const resolvedTickFontSize = Math.round(tickFontSize * 0.83);
+      ctx.fillStyle = tickColor ?? theme.tickLabel;
+      ctx.globalAlpha = 0.7;
+      ctx.font = `${resolvedTickFontSize}px ${layout.fontFamily}`;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "alphabetic";
+      ctx.strokeStyle = theme.tickHalo;
+      ctx.lineWidth = 3;
+      ctx.lineJoin = "round";
+      const labelEnd = yAxis.showLabels === false ? 0 : xAxis && xAxis.visible !== false && xAxis.showLine !== false ? levelValues.length - 1 : levelValues.length;
+      for (let li = 1; li < labelEnd; li++) {
+        const r = levelRadii[li];
+        const val = levelValues[li];
+        const label = tickFormat ? tickFormat(val) : formatCompactValue(val);
+        const tx = center.x + 4;
+        const ty = center.y - r + 8;
+        ctx.strokeText(label, tx, ty);
+        ctx.fillText(label, tx, ty);
+      }
+    });
+  }
+  if (yAxis && yAxis.visible !== false && yAxis.mode === "perSpoke") {
+    const { gridColor, gridStrokeWidth, gridOpacity, gridStyle, shape, referenceRingRadii, tickFontSize, tickColor, spokes } = yAxis;
+    withCanvasState(ctx, () => {
+      ctx.globalAlpha = gridOpacity;
+      ctx.strokeStyle = gridColor ?? theme.grid;
+      ctx.lineWidth = gridStrokeWidth;
+      if (gridStyle === "dashed") ctx.setLineDash([6, 4]);
+      else if (gridStyle === "dotted") ctx.setLineDash([2, 3]);
+      const xDrawsPerimeter = !!(xAxis && xAxis.visible !== false && xAxis.showLine !== false);
+      const ringsToDraw = yAxis.gridLines === false ? [] : xDrawsPerimeter ? referenceRingRadii : [...referenceRingRadii, layout.radius];
+      for (const r of ringsToDraw) {
+        if (r <= 0) continue;
+        if (shape === "circle") {
+          ctx.beginPath();
+          ctx.arc(center.x, center.y, r, 0, Math.PI * 2);
+          ctx.stroke();
+        } else {
+          ctx.beginPath();
+          for (let i = 0; i < categories.length; i++) {
+            const angleRad = toRad(-90 + i * layout.angleStep);
+            const x = center.x + Math.cos(angleRad) * r;
+            const y = center.y + Math.sin(angleRad) * r;
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          ctx.closePath();
+          ctx.stroke();
+        }
+      }
+      for (let si = 0; si < spokeEndpoints.length; si++) {
+        if (spokes[si]?.showLine === false) continue;
+        const ep = spokeEndpoints[si];
+        ctx.beginPath();
+        ctx.moveTo(center.x, center.y);
+        ctx.lineTo(ep.x, ep.y);
+        ctx.stroke();
+      }
+    });
+    for (let ci = 0; ci < spokes.length; ci++) {
+      const entry = spokes[ci];
+      if (entry.showLabels === false) continue;
+      const angleDeg = -90 + ci * layout.angleStep;
+      const angleRad = toRad(angleDeg);
+      const dx = Math.cos(angleRad);
+      const dy = Math.sin(angleRad);
+      const resolvedFontSize = Math.round((entry.tickFontSize ?? tickFontSize) * 0.83);
+      const resolvedColor = entry.tickColor ?? tickColor;
+      const formatter = entry.tickFormat;
+      let rotation = angleDeg + 90;
+      rotation = ((rotation + 180) % 360 + 360) % 360 - 180;
+      if (rotation > 90) rotation -= 180;
+      else if (rotation < -90) rotation += 180;
+      withCanvasState(ctx, () => {
+        ctx.fillStyle = resolvedColor ?? theme.tickLabel;
+        ctx.globalAlpha = 0.85;
+        ctx.font = `${resolvedFontSize}px ${layout.fontFamily}`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.strokeStyle = theme.tickHalo;
+        ctx.lineWidth = 3;
+        ctx.lineJoin = "round";
+        for (let li = 1; li < entry.levelValues.length; li++) {
+          const r = entry.levelRadii[li];
+          if (r <= 0) continue;
+          const val = entry.levelValues[li];
+          const text = formatter ? formatter(val) : formatCompactValue(val);
+          const px = -dy * 4;
+          const py = dx * 4;
+          const cx = center.x + dx * r + px;
+          const cy = center.y + dy * r + py;
+          ctx.save();
+          ctx.translate(cx, cy);
+          ctx.rotate(toRad(rotation));
+          ctx.strokeText(text, 0, 0);
+          ctx.fillText(text, 0, 0);
+          ctx.restore();
+        }
+      });
+    }
+  }
+  if (xAxis && xAxis.visible !== false) {
+    withCanvasState(ctx, () => {
+      if (xAxis.showLine === false) return;
+      ctx.strokeStyle = yAxis?.gridColor ?? xAxis.color ?? resolveAxisColor(theme, axisIndex);
+      ctx.lineWidth = yAxis?.gridStrokeWidth ?? 0.5;
+      ctx.globalAlpha = yAxis?.gridOpacity ?? 0.6;
+      const ringStyle = yAxis?.gridStyle ?? "solid";
+      if (ringStyle === "dashed") ctx.setLineDash([6, 4]);
+      else if (ringStyle === "dotted") ctx.setLineDash([2, 3]);
+      ctx.beginPath();
+      if (xAxis.shape === "circle") {
+        ctx.arc(center.x, center.y, layout.radius, 0, Math.PI * 2);
+      } else {
+        for (let i = 0; i < categories.length; i++) {
+          const angleRad = toRad(-90 + i * layout.angleStep);
+          const x = center.x + Math.cos(angleRad) * layout.radius;
+          const y = center.y + Math.sin(angleRad) * layout.radius;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.closePath();
+      }
+      ctx.stroke();
+    });
+    withCanvasState(ctx, () => {
+      const { midToAlpha } = measureFontMetrics(xAxis.labelFontSize, layout.fontFamily);
+      ctx.fillStyle = xAxis.color ?? theme.tickLabel;
+      ctx.font = `${xAxis.labelFontSize}px ${layout.fontFamily}`;
+      ctx.textBaseline = "alphabetic";
+      for (let i = 0; xAxis.showLabels !== false && i < categories.length; i++) {
+        const angleDeg = -90 + i * layout.angleStep;
+        const angleRad = toRad(angleDeg);
+        const lx = Math.round(center.x + Math.cos(angleRad) * (layout.radius + xAxis.labelPadding));
+        const ly = center.y + Math.sin(angleRad) * (layout.radius + xAxis.labelPadding);
+        const finalY = Math.round(ly + midToAlpha);
+        ctx.textAlign = svgAnchorToCanvasAlign(getCategoryLabelAnchor(angleDeg));
+        ctx.fillText(categories[i], lx, finalY);
+      }
+    });
+  }
+}
+function redrawRadialCanvas(ctx, canvas, gridLayout, renderPolarContent, renderRadarContent, theme) {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (gridLayout) {
+    renderRadialGridCanvas(ctx, gridLayout, theme);
+  }
+  renderPolarContent?.(ctx, canvas);
+  renderRadarContent?.(ctx, canvas);
+}
+
+// src/renderers/tooltip.renderer.ts
+function buildTooltipContent(data, isSharedMode, opts = {}) {
+  const { locale, valueFormatter } = opts;
+  if (isSharedMode && data.allSeriesHits && data.allSeriesHits.length > 1) {
+    return {
+      type: "multi-series",
+      label: data.label,
+      series: data.allSeriesHits.map((hit) => {
+        const formatted2 = valueFormatter ? valueFormatter(hit.value, { label: data.label, color: hit.color, datasetId: hit.datasetId }) : void 0;
+        return {
+          datasetId: hit.datasetId,
+          color: hit.color,
+          colorGradient: hit.colorGradient,
+          swatchColor: hit.swatchColor,
+          label: hit.name ?? hit.datasetId,
+          formattedValue: typeof formatted2 === "string" ? formatted2 : hit.formattedValue,
+          ohlc: hit.ohlc
+        };
+      })
+    };
+  }
+  const ctx = { label: data.label, color: data.color, datasetId: data.datasetId ?? "", percentage: data.percentage, index: data.index };
+  const primary = data.value ?? data.yValue ?? data.ohlc?.close ?? 0;
+  const formatted = valueFormatter ? valueFormatter(primary, ctx) : void 0;
+  if (Array.isArray(formatted)) {
+    return { type: "rows", color: data.color, colorGradient: data.colorGradient, swatchColor: data.swatchColor, label: data.label, rows: formatted };
+  }
+  if (data.ohlc) {
+    return {
+      type: "ohlc",
+      color: data.color,
+      colorGradient: data.colorGradient,
+      swatchColor: data.swatchColor,
+      label: data.label,
+      rows: ["open", "high", "low", "close"].map((key) => ({
+        key,
+        value: data.ohlc[key].toLocaleString(locale, { maximumFractionDigits: 4 })
+      }))
+    };
+  }
+  if (data.xValue !== void 0 && data.yValue !== void 0) {
+    return {
+      type: "scatter",
+      color: data.color,
+      colorGradient: data.colorGradient,
+      swatchColor: data.swatchColor,
+      label: data.label,
+      xValue: data.xValue,
+      yValue: data.yValue,
+      bubbleValue: data.bubbleValue
+    };
+  }
+  return {
+    type: "simple",
+    color: data.color,
+    colorGradient: data.colorGradient,
+    swatchColor: data.swatchColor,
+    label: data.label,
+    value: typeof formatted === "string" ? formatted : data.formattedValue ?? data.value,
+    percentage: data.percentage != null ? +data.percentage.toFixed(1) : void 0
+  };
+}
+var TOOLTIP_EDGE_GAP = 8;
+var TOOLTIP_CURSOR_TRANSITION = "transform 80ms ease-out";
+var TOOLTIP_CURSOR_NUDGE = 10;
+function computeTooltipPosition(input) {
+  const { position, cursorX, cursorY, offsetX, offsetY, tooltipWidth: tw, tooltipHeight: th, containerWidth: cw, containerHeight: ch, isSharedMode, rtl } = input;
+  const gap = TOOLTIP_EDGE_GAP;
+  if (position === "top") return { top: `${gap + offsetY}px`, left: "50%", transform: `translateX(calc(-50% + ${offsetX}px))` };
+  if (position === "bottom") return { bottom: `${gap + offsetY}px`, left: "50%", transform: `translateX(calc(-50% + ${offsetX}px))` };
+  if (position === "left") return { left: `${gap + offsetX}px`, top: "50%", transform: `translateY(calc(-50% + ${offsetY}px))` };
+  if (position === "right") return { right: `${gap + offsetX}px`, top: "50%", transform: `translateY(calc(-50% + ${offsetY}px))` };
+  const rawX = cursorX + offsetX;
+  const rawY = cursorY + offsetY;
+  const snapX = cursorX - TOOLTIP_CURSOR_NUDGE;
+  const snapY = cursorY - TOOLTIP_CURSOR_NUDGE;
+  const x = cw > 0 && tw > 0 && rawX + tw + gap > cw ? Math.max(gap, snapX - tw - gap + offsetX) : Math.max(gap, rawX);
+  const y = ch > 0 && th > 0 && rawY + th + gap > ch ? Math.max(gap, snapY - th - gap + offsetY) : Math.max(gap, rawY);
+  if (isSharedMode) {
+    return {
+      left: "0px",
+      top: "0px",
+      transform: rtl ? `translate(calc(${x}px - 100%), ${y}px)` : `translate(${x}px, ${y}px)`,
+      transition: TOOLTIP_CURSOR_TRANSITION
+    };
+  }
+  return {
+    left: `${x}px`,
+    top: `${y}px`,
+    ...rtl ? { transform: "translateX(-100%)" } : {}
+  };
+}
+
+export { buildTooltipContent, computeTooltipPosition, redrawRadialCanvas, renderRadialGridCanvas, renderRadialGridSvg };