@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-B4FTADAZ.mjs

@@ -0,0 +1,561 @@
+import { computeSliceGeometry, buildPieDataLabelLayout, drawCanvasStraightLeaderLine, drawCanvasLeaderLine, drawCanvasLabelLines } from './chunk-4C6EVJ54.mjs';
+import { buildSvgArcPath, CLIP_PIXEL_MARGIN } from './chunk-LVMDQ4OJ.mjs';
+import { computeSliceHoverEffects, applySvgHoverFill, applySvgHoverStroke, computeLeaderLineHoverEffects } from './chunk-BZN2QHGP.mjs';
+import { createDrawImage } from './chunk-7CMVDIOU.mjs';
+import { DEFAULT_FALLBACK_COLOR, DEFAULT_HOVER_BRIGHTNESS } from './chunk-NKUYIWAP.mjs';
+import { getDefaultColor, makeItemContext, resolveAccessor, getColor, isGradientColor, remapStopsForDonut, createSvgGradientFromColor } from './chunk-O2X6FF45.mjs';
+import { adjustBrightness, svgNode, svgClass, withCanvasState, brightenGradientStops } from './chunk-SSLTFJ3U.mjs';
+import { toRad, pointOnCircle } from './chunk-RQ3CKQOX.mjs';
+
+// src/renderers/circular/svg.ts
+function buildSliceRenderContext(slice, renderInfo, position, geo, theme, chartCenter, fontFamily) {
+  const item = renderInfo.data[slice.originalIndex];
+  const angle = slice.endAngle - slice.rotation;
+  const sliceCtx = makeItemContext(item, slice.originalIndex);
+  const originalValue = Number(resolveAccessor(renderInfo.props.valueField, sliceCtx)) || slice.value;
+  const sliceLabel = String(resolveAccessor(renderInfo.props.categoryField, sliceCtx) ?? "");
+  return {
+    index: slice.originalIndex,
+    data: item,
+    value: originalValue,
+    percentage: slice.percentage,
+    label: sliceLabel,
+    color: slice.color ?? getColor(renderInfo.props, slice.originalIndex, item, theme, { value: originalValue, category: sliceLabel }),
+    center: chartCenter ?? position,
+    x: position.x,
+    y: position.y,
+    angle: geo.midAngle,
+    isHovered: geo.isHovered,
+    isVisible: angle > 0.1,
+    fontFamily: fontFamily ?? "sans-serif"
+  };
+}
+function applyGradientBrightness(pathEl, brightness) {
+  const fill = pathEl.getAttribute("fill") || "";
+  const match = fill.match(/url\(#([^)]+)\)/);
+  if (!match) return;
+  const svgEl = pathEl.ownerSVGElement;
+  const gradientEl = svgEl?.querySelector(`#${match[1]}`);
+  if (!gradientEl) return;
+  const stops = gradientEl.querySelectorAll("stop");
+  stops.forEach((stop) => {
+    if (!stop.hasAttribute("data-original-color")) {
+      stop.setAttribute("data-original-color", stop.getAttribute("stop-color") || "");
+    }
+    const originalColor = stop.getAttribute("data-original-color") || "";
+    if (originalColor) {
+      stop.setAttribute("stop-color", adjustBrightness(originalColor, brightness));
+    }
+  });
+}
+function restoreGradientBrightness(pathEl) {
+  const fill = pathEl.getAttribute("data-original-fill") || pathEl.getAttribute("fill") || "";
+  const match = fill.match(/url\(#([^)]+)\)/);
+  if (!match) return;
+  const svgEl = pathEl.ownerSVGElement;
+  const gradientEl = svgEl?.querySelector(`#${match[1]}`);
+  if (!gradientEl) return;
+  const stops = gradientEl.querySelectorAll("stop");
+  stops.forEach((stop) => {
+    const originalColor = stop.getAttribute("data-original-color");
+    if (originalColor) {
+      stop.setAttribute("stop-color", originalColor);
+    }
+  });
+}
+function updateSvgSlices(frame, refs, hoverConfig, theme, fontFamily) {
+  const { slices, center, fullCircle, hoverState } = frame;
+  const hasAnyHover = hoverState.index !== null;
+  const activeCustomKeys = /* @__PURE__ */ new Set();
+  for (const slice of slices) {
+    const key = `${slice.datasetIndex}-${slice.originalIndex}`;
+    const angle = slice.endAngle - slice.rotation;
+    const geo = computeSliceGeometry(slice, slice.rotation, frame);
+    const pathEl = refs.pathElements.get(key);
+    if (pathEl && angle > 1e-3) {
+      const pathD = buildSvgArcPath(
+        {
+          rotation: geo.renderRotation,
+          endAngle: geo.renderRotation + geo.renderAngle,
+          outerRadius: geo.sliceOuterRadius,
+          innerRadius: geo.sliceInnerRadius,
+          borderRadius: slice.borderRadius
+        },
+        fullCircle
+      );
+      pathEl.setAttribute("d", pathD);
+      const sliceGroup2 = refs.sliceGroups.get(key);
+      if (sliceGroup2) {
+        const strokePath = sliceGroup2.querySelector("[data-stroke-path]");
+        if (strokePath) {
+          strokePath.setAttribute("d", pathD);
+          const {
+            borderStrokeWidth: bw,
+            borderColor: computedBorderColor,
+            borderDash: hoverBorderDash
+          } = computeSliceHoverEffects(slice.color ?? DEFAULT_FALLBACK_COLOR, slice.borderColor ?? "transparent", slice.borderStrokeWidth ?? 0, geo.isHovered, hasAnyHover, hoverConfig, theme);
+          const bc = geo.isHovered && slice.hoverBorderColor ? slice.hoverBorderColor : computedBorderColor;
+          const isInner = (frame.borderAlign ?? "inner") === "inner";
+          if (bw > 0 && bc !== "transparent") {
+            const joinStyle = frame.borderJoinStyle ?? "miter";
+            strokePath.setAttribute("stroke", bc);
+            strokePath.setAttribute("stroke-width", String(isInner ? bw * 2 : bw));
+            strokePath.setAttribute("stroke-linejoin", joinStyle);
+            const bd = hoverBorderDash ?? slice.borderDash;
+            if (bd && bd.length > 0) {
+              strokePath.setAttribute("stroke-dasharray", bd.join(" "));
+              strokePath.setAttribute("stroke-dashoffset", String(slice.borderDashOffset ?? 0));
+            } else {
+              strokePath.removeAttribute("stroke-dasharray");
+              strokePath.removeAttribute("stroke-dashoffset");
+            }
+            if (isInner) {
+              const clipId = strokePath.getAttribute("data-clip-id");
+              if (clipId && !strokePath.getAttribute("clip-path")) {
+                strokePath.setAttribute("clip-path", `url(#${clipId})`);
+              }
+            } else {
+              strokePath.removeAttribute("clip-path");
+            }
+          } else {
+            strokePath.setAttribute("stroke", "transparent");
+            strokePath.setAttribute("stroke-width", "0");
+            strokePath.removeAttribute("stroke-dasharray");
+            strokePath.removeAttribute("stroke-dashoffset");
+          }
+          const clipRef = strokePath.getAttribute("clip-path");
+          const clipMatch = clipRef?.match(/url\(#([^)]+)\)/);
+          if (clipMatch) {
+            const svgEl = strokePath.ownerSVGElement;
+            const clipPathEl = svgEl?.querySelector(`#${clipMatch[1]} path`);
+            if (clipPathEl) {
+              const PIXEL_MARGIN = CLIP_PIXEL_MARGIN;
+              const angleDelta = geo.sliceOuterRadius > 0 ? PIXEL_MARGIN / geo.sliceOuterRadius * (180 / Math.PI) : 0;
+              const expandedPath = buildSvgArcPath(
+                {
+                  rotation: geo.renderRotation - angleDelta,
+                  endAngle: geo.renderRotation + geo.renderAngle + angleDelta,
+                  outerRadius: geo.sliceOuterRadius,
+                  innerRadius: geo.sliceInnerRadius,
+                  borderRadius: slice.borderRadius
+                },
+                fullCircle
+              );
+              clipPathEl.setAttribute("d", expandedPath);
+            }
+          }
+        }
+      }
+    }
+    const sliceGroup = refs.sliceGroups.get(key);
+    if (sliceGroup) {
+      sliceGroup.style.opacity = angle < 0.1 ? "0" : String(slice.userOpacity ?? 1);
+      const hasOffset = geo.offsetX !== 0 || geo.offsetY !== 0;
+      const hasScale = geo.scale !== 1;
+      if (hasOffset || hasScale) {
+        const parts = [];
+        if (hasOffset) parts.push(`translate(${geo.offsetX}, ${geo.offsetY})`);
+        if (hasScale) parts.push(`scale(${geo.scale})`);
+        sliceGroup.setAttribute("transform", parts.join(" "));
+      } else {
+        sliceGroup.removeAttribute("transform");
+      }
+      if (pathEl) {
+        const fillHoverConfig = geo.isHovered && slice.hoverColor ? { ...hoverConfig, backgroundColor: slice.hoverColor } : hoverConfig;
+        applySvgHoverFill(pathEl, geo.isHovered, hasAnyHover, fillHoverConfig, applyGradientBrightness, restoreGradientBrightness, theme);
+        applySvgHoverStroke(pathEl, geo.isHovered, hoverConfig);
+      }
+    }
+    const contentSlot = refs.contentSlots.get(key);
+    if (contentSlot) {
+      const x = Math.cos(toRad(geo.midAngle)) * geo.midRadius;
+      const y = Math.sin(toRad(geo.midAngle)) * geo.midRadius;
+      contentSlot.setAttribute("transform", `translate(${x}, ${y})`);
+      contentSlot.style.opacity = angle < 0.1 ? "0" : "1";
+    }
+    const customEl = refs.customContent.get(key);
+    if (customEl) {
+      const pt = pointOnCircle(center.x + geo.offsetX, center.y + geo.offsetY, geo.midAngle, geo.midRadius);
+      customEl.setAttribute("transform", `translate(${pt.x}, ${pt.y})`);
+      customEl.style.opacity = String(Math.min(1, angle / 10));
+      activeCustomKeys.add(key);
+      let renderInfo;
+      for (const [, info] of refs.renderFns) {
+        if (info.datasetIndex === slice.datasetIndex) {
+          renderInfo = info;
+          break;
+        }
+      }
+      if (renderInfo && renderInfo.data[slice.originalIndex]) {
+        const result = renderInfo.fn(buildSliceRenderContext(slice, renderInfo, pt, geo, theme, void 0, fontFamily));
+        if (result && typeof result === "object" && "text" in result) {
+          const textEl = customEl.querySelector("text");
+          if (textEl) {
+            textEl.textContent = result.text;
+          }
+        }
+      }
+    }
+  }
+  if (activeCustomKeys.size > 0) {
+    for (const [key, el] of refs.customContent) {
+      if (!activeCustomKeys.has(key)) {
+        el.style.opacity = "0";
+      }
+    }
+  }
+}
+function updatePieCustomContent(frame, refs, theme, fontFamily) {
+  const { slices, center } = frame;
+  const activeCustomKeys = /* @__PURE__ */ new Set();
+  for (const slice of slices) {
+    const key = `${slice.datasetIndex}-${slice.originalIndex}`;
+    const angle = slice.endAngle - slice.rotation;
+    const geo = computeSliceGeometry(slice, slice.rotation, frame);
+    const customEl = refs.customContent.get(key);
+    if (!customEl) continue;
+    const pt = pointOnCircle(center.x + geo.offsetX, center.y + geo.offsetY, geo.midAngle, geo.midRadius);
+    customEl.setAttribute("transform", `translate(${pt.x}, ${pt.y})`);
+    customEl.style.opacity = String(Math.min(1, angle / 10));
+    activeCustomKeys.add(key);
+    let renderInfo;
+    for (const [, info] of refs.renderFns) {
+      if (info.datasetIndex === slice.datasetIndex) {
+        renderInfo = info;
+        break;
+      }
+    }
+    if (renderInfo && renderInfo.data[slice.originalIndex]) {
+      const result = renderInfo.fn(buildSliceRenderContext(slice, renderInfo, pt, geo, theme, void 0, fontFamily));
+      if (result && typeof result === "object" && "text" in result) {
+        const textEl = customEl.querySelector("text");
+        if (textEl) {
+          textEl.textContent = result.text;
+        }
+      }
+    }
+  }
+  if (activeCustomKeys.size > 0) {
+    for (const [key, el] of refs.customContent) {
+      if (!activeCustomKeys.has(key)) {
+        el.style.opacity = "0";
+      }
+    }
+  }
+}
+function resolveSliceFillDescriptor(slice, isHovered, hasAnyHover, hoverConfig, theme, gradientId, innerRadius, outerRadius) {
+  const colorValue = slice.colorValue;
+  const isGradient = colorValue !== void 0 && isGradientColor(colorValue);
+  let baseFill;
+  if (isGradient) {
+    baseFill = `url(#${gradientId})`;
+  } else if (typeof colorValue === "string") {
+    baseFill = colorValue;
+  } else if (typeof slice.color === "string") {
+    baseFill = slice.color;
+  } else {
+    baseFill = theme.series[slice.originalIndex % theme.series.length];
+  }
+  const originalFill = baseFill;
+  const fillHoverConfig = isHovered && slice.hoverColor ? { ...hoverConfig, backgroundColor: slice.hoverColor } : hoverConfig;
+  let fill = baseFill;
+  let opacityAttr;
+  let gradStops = isGradient ? colorValue.stops : void 0;
+  if (!fillHoverConfig) {
+    fill = baseFill;
+  } else {
+    const brightness = fillHoverConfig.brightness ?? theme.hoverBrightness ?? DEFAULT_HOVER_BRIGHTNESS;
+    if (isHovered) {
+      if (fillHoverConfig.backgroundColor) {
+        fill = fillHoverConfig.backgroundColor;
+      } else if (isGradient) {
+        gradStops = brightenGradientStops(colorValue, brightness).stops;
+        fill = baseFill;
+      } else {
+        fill = adjustBrightness(baseFill, brightness);
+      }
+    } else if (hasAnyHover && fillHoverConfig.dimOpacity !== void 0 && fillHoverConfig.dimOpacity < 1) {
+      opacityAttr = String(fillHoverConfig.dimOpacity);
+      fill = baseFill;
+    } else {
+      fill = baseFill;
+    }
+  }
+  let gradientDef;
+  if (isGradient) {
+    const cv = colorValue;
+    const remapped = innerRadius > 0 && cv.radialGradient ? remapStopsForDonut(gradStops ?? cv.stops, innerRadius / outerRadius) : gradStops ?? cv.stops;
+    const gradientColor = { ...cv, stops: remapped };
+    gradientDef = createSvgGradientFromColor(gradientColor, gradientId, { x: 0, y: 0 }, outerRadius);
+  }
+  return { fill, opacityAttr, originalFill, gradientDef };
+}
+function buildPieSvgChildren(frame, hoverConfig, theme, chartId, datasetIndex) {
+  const { fullCircle, hoverState } = frame;
+  const hasAnyHover = hoverState.index !== null;
+  const defsChildren = [];
+  const sliceGroups = [];
+  for (const slice of frame.slices) {
+    if (slice.datasetIndex !== datasetIndex) continue;
+    const dataIndex = slice.originalIndex;
+    const angle = slice.endAngle - slice.rotation;
+    const geo = computeSliceGeometry(slice, slice.rotation, frame);
+    const isHovered = geo.isHovered;
+    const gradientId = `${chartId}-pie-${datasetIndex}-grad-${dataIndex}`;
+    const clipId = `${chartId}-pie-${datasetIndex}-clip-${dataIndex}`;
+    const pathD = buildSvgArcPath(
+      {
+        rotation: geo.renderRotation,
+        endAngle: geo.renderRotation + geo.renderAngle,
+        outerRadius: geo.sliceOuterRadius,
+        innerRadius: geo.sliceInnerRadius,
+        borderRadius: slice.borderRadius
+      },
+      fullCircle
+    );
+    const PIXEL_MARGIN = CLIP_PIXEL_MARGIN;
+    const angleDelta = geo.sliceOuterRadius > 0 ? PIXEL_MARGIN / geo.sliceOuterRadius * (180 / Math.PI) : 0;
+    const expandedClipPath = buildSvgArcPath(
+      {
+        rotation: geo.renderRotation - angleDelta,
+        endAngle: geo.renderRotation + geo.renderAngle + angleDelta,
+        outerRadius: geo.sliceOuterRadius,
+        innerRadius: geo.sliceInnerRadius,
+        borderRadius: slice.borderRadius
+      },
+      fullCircle
+    );
+    defsChildren.push(svgNode("clipPath", { id: clipId }, [svgNode("path", { d: expandedClipPath })]));
+    const { fill, opacityAttr, originalFill, gradientDef } = resolveSliceFillDescriptor(slice, isHovered, hasAnyHover, hoverConfig, theme, gradientId, frame.innerRadius, frame.outerRadius);
+    if (gradientDef) defsChildren.push(gradientDef);
+    const {
+      borderStrokeWidth: bw,
+      borderColor: computedBorderColor,
+      borderDash: hoverBorderDash
+    } = computeSliceHoverEffects(slice.color ?? DEFAULT_FALLBACK_COLOR, slice.borderColor ?? "transparent", slice.borderStrokeWidth ?? 0, isHovered, hasAnyHover, hoverConfig, theme);
+    const bc = isHovered && slice.hoverBorderColor ? slice.hoverBorderColor : computedBorderColor;
+    const isInner = (frame.borderAlign ?? "inner") === "inner";
+    const joinStyle = frame.borderJoinStyle ?? "miter";
+    const strokeAttrs = {
+      d: pathD,
+      fill: "none",
+      "stroke-linejoin": joinStyle,
+      "data-stroke-path": "true",
+      "data-clip-id": clipId,
+      ...isInner ? { "clip-path": `url(#${clipId})` } : {}
+    };
+    if (bw > 0 && bc !== "transparent") {
+      strokeAttrs.stroke = bc;
+      strokeAttrs["stroke-width"] = String(isInner ? bw * 2 : bw);
+      const bd = hoverBorderDash ?? slice.borderDash;
+      if (bd && bd.length > 0) {
+        strokeAttrs["stroke-dasharray"] = bd.join(" ");
+        strokeAttrs["stroke-dashoffset"] = String(slice.borderDashOffset ?? 0);
+      }
+    } else {
+      strokeAttrs.stroke = "transparent";
+      strokeAttrs["stroke-width"] = "0";
+    }
+    const colorClassN = `p-chart-color-${dataIndex % 10}`;
+    const usesColorClass = slice.colorValue === getDefaultColor(slice.originalIndex, theme);
+    const fillCls = svgClass("p-chart-arc", `p-chart-series-${dataIndex}`, usesColorClass && colorClassN);
+    const fillAttrs = {
+      d: pathD,
+      fill,
+      "data-index": dataIndex,
+      class: fillCls,
+      "data-fill-path": "true",
+      // applySvgHoverFill / applySvgHoverStroke bookkeeping (only written when a hoverConfig is
+      // present). applySvgHoverStroke runs on the FILL path (updateSvgSlices:286); on its first
+      // call it seeds `data-original-stroke` / `data-original-stroke-width` from the fill path's
+      // (absent) stroke attrs → empty strings. `data-original-stroke-dasharray` is only seeded
+      // when a base dasharray exists (the fill path never has one), so it stays absent here.
+      ...hoverConfig ? { "data-original-fill": originalFill, "data-original-stroke": "", "data-original-stroke-width": "" } : {},
+      ...opacityAttr !== void 0 ? { opacity: opacityAttr } : {}
+    };
+    if (isHovered && hoverConfig && (hoverConfig.borderColor || hoverConfig.borderStrokeWidth !== void 0)) {
+      if (hoverConfig.borderColor) fillAttrs.stroke = hoverConfig.borderColor;
+      if (hoverConfig.borderStrokeWidth !== void 0) fillAttrs["stroke-width"] = String(hoverConfig.borderStrokeWidth * 2);
+      if (hoverConfig.borderDash) fillAttrs["stroke-dasharray"] = hoverConfig.borderDash.join(" ");
+      fillAttrs["paint-order"] = "stroke fill";
+    }
+    const fillPath = svgNode("path", fillAttrs);
+    const strokePath = svgNode("path", strokeAttrs);
+    const slotX = Math.cos(toRad(geo.midAngle)) * geo.midRadius;
+    const slotY = Math.sin(toRad(geo.midAngle)) * geo.midRadius;
+    const contentSlot = svgNode("g", {
+      class: "slice-content",
+      "data-content-index": dataIndex,
+      transform: `translate(${slotX}, ${slotY})`,
+      opacity: angle < 0.1 ? "0" : "1"
+    });
+    const hasOffset = geo.offsetX !== 0 || geo.offsetY !== 0;
+    const hasScale = geo.scale !== 1;
+    const transformParts = [];
+    if (hasOffset) transformParts.push(`translate(${geo.offsetX}, ${geo.offsetY})`);
+    if (hasScale) transformParts.push(`scale(${geo.scale})`);
+    const groupAttrs = {
+      "data-slice-index": dataIndex,
+      "data-index": dataIndex,
+      // userOpacity + span<0.1 hide, as an ATTRIBUTE (normalized vs style in the parity test).
+      opacity: angle < 0.1 ? "0" : String(slice.userOpacity ?? 1),
+      ...transformParts.length > 0 ? { transform: transformParts.join(" ") } : {}
+    };
+    sliceGroups.push(svgNode("g", groupAttrs, [fillPath, strokePath, contentSlot]));
+  }
+  return defsChildren.length > 0 ? [svgNode("defs", void 0, defsChildren), ...sliceGroups] : sliceGroups;
+}
+
+// src/renderers/circular/shared.ts
+function buildSliceRenderContext2(slice, renderInfo, position, geo, chartCenter, fontFamily) {
+  const item = renderInfo.data[slice.originalIndex];
+  const angle = slice.endAngle - slice.rotation;
+  const sliceCtx = makeItemContext(item, slice.originalIndex);
+  const originalValue = Number(resolveAccessor(renderInfo.props.valueField, sliceCtx)) || slice.value;
+  return {
+    index: slice.originalIndex,
+    data: item,
+    value: originalValue,
+    percentage: slice.percentage,
+    label: String(resolveAccessor(renderInfo.props.categoryField, sliceCtx) ?? ""),
+    color: slice.color ?? getColor(renderInfo.props, slice.originalIndex, item),
+    center: chartCenter ?? position,
+    x: position.x,
+    y: position.y,
+    angle: geo.midAngle,
+    isHovered: geo.isHovered,
+    isVisible: angle > 0.1,
+    fontFamily: fontFamily ?? "sans-serif"
+  };
+}
+
+// src/renderers/circular/canvas.ts
+function buildSliceRenderContext3(slice, renderInfo, position, geo, theme, chartCenter, fontFamily) {
+  const item = renderInfo.data[slice.originalIndex];
+  const angle = slice.endAngle - slice.rotation;
+  const sliceCtx = makeItemContext(item, slice.originalIndex);
+  const originalValue = Number(resolveAccessor(renderInfo.props.valueField, sliceCtx)) || slice.value;
+  const sliceLabel = String(resolveAccessor(renderInfo.props.categoryField, sliceCtx) ?? "");
+  return {
+    index: slice.originalIndex,
+    data: item,
+    value: originalValue,
+    percentage: slice.percentage,
+    label: sliceLabel,
+    color: slice.color ?? getColor(renderInfo.props, slice.originalIndex, item, theme, { value: originalValue, category: sliceLabel }),
+    center: position,
+    x: position.x,
+    y: position.y,
+    angle: geo.midAngle,
+    isHovered: geo.isHovered,
+    isVisible: angle > 0.1,
+    fontFamily: fontFamily ?? "sans-serif"
+  };
+}
+function renderCanvasDataLabels(ctx, frame, viewportBounds, labelConfig, textColor, datasetPropsMap, hoverConfig, theme, onImageLoad) {
+  const { center, hoverState } = frame;
+  const built = buildPieDataLabelLayout(frame, labelConfig, { width: viewportBounds.width, height: viewportBounds.height }, datasetPropsMap);
+  if (!built) return;
+  const { labelLayout, configsByIndex: labelConfigByIndex, labelSlices: sliceMap } = built;
+  const hasAnyHover = hoverState.index !== null;
+  const drawOptions = {
+    fontSize: labelConfig.fontSize,
+    fontFamily: labelConfig.fontFamily,
+    fontWeight: labelConfig.fontWeight,
+    lineHeight: labelConfig.lineHeight,
+    textOffset: labelConfig.textOffset,
+    centered: labelConfig.lineStyle === "none"
+  };
+  for (const labelItem of labelLayout.labels) {
+    const { index, color: lineColor, side } = labelItem;
+    const slice = sliceMap.get(index);
+    const isSliceHovered = slice ? hoverState.datasetIndex === slice.datasetIndex && hoverState.index === slice.originalIndex : false;
+    const { strokeColor, strokeWidth } = computeLeaderLineHoverEffects(lineColor, isSliceHovered, hasAnyHover, hoverConfig, theme);
+    const absLeaderLine = {
+      x1: center.x + labelItem.leaderLine.x1,
+      y1: center.y + labelItem.leaderLine.y1,
+      x2: center.x + labelItem.leaderLine.x2,
+      y2: center.y + labelItem.leaderLine.y2,
+      x3: center.x + labelItem.leaderLine.x3,
+      y3: center.y + labelItem.leaderLine.y3
+    };
+    if (labelConfig.render) {
+      const originalConfig = labelConfigByIndex.get(index);
+      const textX = center.x + labelItem.x + (side === "right" ? drawOptions.textOffset : -drawOptions.textOffset);
+      const textY = center.y + labelItem.y;
+      let handled = false;
+      withCanvasState(ctx, () => {
+        ctx.translate(textX, textY);
+        const renderContext = {
+          index,
+          value: originalConfig?.value ?? 0,
+          percentage: originalConfig?.percentage ?? 0,
+          formattedText: originalConfig?.text ?? "",
+          label: originalConfig?.label ?? "",
+          // Per-label color override wins over the leader-line/slice color in the custom render context.
+          color: labelItem.textColor ?? textColor ?? lineColor,
+          x: textX,
+          y: textY,
+          side,
+          leaderLine: absLeaderLine,
+          center: { x: center.x, y: center.y },
+          ctx,
+          drawImage: onImageLoad ? createDrawImage(ctx, onImageLoad) : void 0
+        };
+        labelConfig.render(renderContext);
+        handled = true;
+      });
+      if (handled) continue;
+    }
+    const lineStrokeColor = labelItem.connectorColor ?? strokeColor;
+    const lineStrokeWidth = labelItem.connectorWidth ?? strokeWidth;
+    if (labelConfig.lineStyle === "straight") {
+      drawCanvasStraightLeaderLine(ctx, labelItem, center.x, center.y, lineStrokeColor, lineStrokeWidth);
+    } else if (labelConfig.lineStyle !== "none") {
+      drawCanvasLeaderLine(ctx, labelItem, center.x, center.y, lineStrokeColor, lineStrokeWidth);
+    }
+    const perLabelDrawOptions = labelItem.fontSize !== void 0 ? { ...drawOptions, fontSize: labelItem.fontSize } : drawOptions;
+    const perLabelTextColor = labelItem.textColor ?? textColor;
+    drawCanvasLabelLines(ctx, labelItem, center.x, center.y, perLabelTextColor, perLabelDrawOptions);
+  }
+}
+function renderCanvasCustomContent(ctx, frame, canvasRenderFns, onImageLoad, theme, fontFamily) {
+  const { slices, center } = frame;
+  for (const slice of slices) {
+    let renderInfo;
+    for (const [, info] of canvasRenderFns) {
+      if (info.datasetIndex === slice.datasetIndex) {
+        renderInfo = info;
+        break;
+      }
+    }
+    if (renderInfo && renderInfo.data[slice.originalIndex]) {
+      const angle = slice.endAngle - slice.rotation;
+      const geo = computeSliceGeometry(slice, slice.rotation, frame);
+      const x = center.x + Math.cos(toRad(geo.midAngle)) * geo.midRadius + geo.offsetX;
+      const y = center.y + Math.sin(toRad(geo.midAngle)) * geo.midRadius + geo.offsetY;
+      const opacity = Math.min(1, angle / 10);
+      const renderContext = buildSliceRenderContext3(slice, renderInfo, { x, y }, geo, theme, void 0, fontFamily);
+      if (renderContext.isVisible) {
+        withCanvasState(ctx, () => {
+          ctx.globalAlpha = opacity;
+          ctx.translate(x, y);
+          renderContext.ctx = ctx;
+          renderContext.drawImage = createDrawImage(ctx, onImageLoad);
+          const result = renderInfo.fn(renderContext);
+          if (result && typeof result === "object" && "text" in result) {
+            const { text, style } = result;
+            const ff = style?.fontFamily ?? fontFamily ?? "sans-serif";
+            ctx.font = `${style?.fontWeight ?? "normal"} ${style?.fontSize ?? "12px"} ${ff}`;
+            ctx.fillStyle = style?.fill ?? style?.color ?? "#fff";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(text, 0, 0);
+          }
+        });
+      }
+    }
+  }
+}
+
+export { applyGradientBrightness, buildPieSvgChildren, buildSliceRenderContext2 as buildSliceRenderContext, renderCanvasCustomContent, renderCanvasDataLabels, restoreGradientBrightness, updatePieCustomContent, updateSvgSlices };