@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-4C6EVJ54.mjs

@@ -0,0 +1,362 @@
+import { formatDataLabelText } from './chunk-OXTFAWSK.mjs';
+import { wrapText, calculateWrappedTextWidth, calculateWrappedTextHeight } from './chunk-XTVE4P3L.mjs';
+import { DEFAULT_FALLBACK_COLOR } from './chunk-NKUYIWAP.mjs';
+import { makeItemContext, resolveAccessor } from './chunk-O2X6FF45.mjs';
+import { withCanvasState } from './chunk-SSLTFJ3U.mjs';
+import { toRad, pointOnCircle } from './chunk-RQ3CKQOX.mjs';
+
+// src/circular/radial.helpers.ts
+function computeSliceGeometry(slice, currentAngle, frame) {
+  const { outerRadius, innerRadius, willBeSingleSlice, currentRingRadii, hoverState, hoverOffset, hoverScale } = frame;
+  const ringRadii = currentRingRadii.get(String(slice.datasetIndex));
+  const baseOuterRadius = ringRadii?.outer ?? outerRadius;
+  const sliceInnerRadius = ringRadii?.inner ?? innerRadius;
+  const sliceOuterRadius = sliceInnerRadius + (baseOuterRadius - sliceInnerRadius) * slice.radiusRatio;
+  const spacing = slice.spacing ?? 0;
+  const spacingAngle = spacing > 0 && sliceOuterRadius > 0 ? spacing / sliceOuterRadius * (180 / Math.PI) : 0;
+  const halfSpacing = spacingAngle / 2;
+  const angle = slice.endAngle - slice.rotation;
+  const isFullCircleSlice = willBeSingleSlice || slice.targetAngle >= 355 || angle >= 355;
+  const midAngle = currentAngle + angle / 2;
+  const midRadius = (sliceOuterRadius + sliceInnerRadius) / 2;
+  const isHovered = hoverState.datasetIndex === slice.datasetIndex && hoverState.index === slice.originalIndex;
+  const sliceHoverOffset = isHovered && !isFullCircleSlice ? hoverOffset : 0;
+  const hoverOffsetX = sliceHoverOffset > 0 ? Math.cos(toRad(midAngle)) * sliceHoverOffset : 0;
+  const hoverOffsetY = sliceHoverOffset > 0 ? Math.sin(toRad(midAngle)) * sliceHoverOffset : 0;
+  const baseOffset = slice.baseOffset ?? 0;
+  const baseOffsetX = baseOffset !== 0 ? Math.cos(toRad(midAngle)) * baseOffset : 0;
+  const baseOffsetY = baseOffset !== 0 ? Math.sin(toRad(midAngle)) * baseOffset : 0;
+  const scale = isHovered && !isFullCircleSlice && hoverScale > 1 ? hoverScale : 1;
+  return {
+    sliceOuterRadius,
+    sliceInnerRadius,
+    isFullCircleSlice,
+    midAngle,
+    midRadius,
+    isHovered,
+    offsetX: hoverOffsetX + baseOffsetX,
+    offsetY: hoverOffsetY + baseOffsetY,
+    scale,
+    renderRotation: isFullCircleSlice ? currentAngle : currentAngle + halfSpacing,
+    renderAngle: isFullCircleSlice ? angle : Math.max(0, angle - spacingAngle)
+  };
+}
+
+// src/circular/label.utils.ts
+function getLabelSide(angle) {
+  const normalized = (angle % 360 + 360) % 360;
+  return Math.cos(toRad(normalized)) >= 0 ? "right" : "left";
+}
+function drawCanvasLeaderLine(ctx, layout, centerX, centerY, strokeColor, strokeWidth) {
+  const { leaderLine } = layout;
+  ctx.beginPath();
+  ctx.moveTo(centerX + leaderLine.x1, centerY + leaderLine.y1);
+  ctx.lineTo(centerX + leaderLine.x2, centerY + leaderLine.y2);
+  ctx.lineTo(centerX + leaderLine.x3, centerY + leaderLine.y3);
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = strokeWidth;
+  ctx.stroke();
+}
+function drawCanvasStraightLeaderLine(ctx, layout, centerX, centerY, strokeColor, strokeWidth) {
+  const { leaderLine } = layout;
+  ctx.beginPath();
+  ctx.moveTo(centerX + leaderLine.x1, centerY + leaderLine.y1);
+  ctx.lineTo(centerX + leaderLine.x3, centerY + leaderLine.y3);
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = strokeWidth;
+  ctx.stroke();
+}
+function drawCanvasLabelLines(ctx, layout, centerX, centerY, textColor, options) {
+  const { lines, side, x, y } = layout;
+  const textX = options.centered ? centerX + x : centerX + x + (side === "right" ? options.textOffset : -options.textOffset);
+  const textY = centerY + y;
+  const lineHeight = options.fontSize * options.lineHeight;
+  const totalHeight = lines.length * lineHeight;
+  const startY = textY - totalHeight / 2 + lineHeight / 2;
+  withCanvasState(ctx, () => {
+    ctx.font = `${options.fontWeight} ${options.fontSize}px ${options.fontFamily}`;
+    ctx.fillStyle = textColor;
+    ctx.textAlign = options.centered ? "center" : side === "right" ? "left" : "right";
+    ctx.textBaseline = "middle";
+    for (let i = 0; i < lines.length; i++) {
+      ctx.fillText(lines[i], textX, startY + i * lineHeight);
+    }
+  });
+}
+
+// src/circular/labelLayout.utils.ts
+var DEFAULT_LABEL_LAYOUT_OPTIONS = {
+  fontSize: 12,
+  fontWeight: "normal",
+  fontFamily: "Arial",
+  leaderOffset: 10,
+  horizontalOffset: 15,
+  textOffset: 4,
+  lineHeight: 1.2,
+  minRadius: 50,
+  alignTo: "labelLine",
+  lineStyle: "angled"
+};
+var radialOffset = (radius, angleDeg) => pointOnCircle(0, 0, angleDeg, radius);
+function getAvailableLabelWidth(side, bounds, radius, options) {
+  const leaderLength = options.leaderOffset + options.horizontalOffset + options.textOffset;
+  if (side === "right") {
+    return bounds.right - bounds.centerX - radius - leaderLength;
+  }
+  return bounds.centerX - radius - leaderLength - bounds.left;
+}
+function createLabelLayoutItem(config, radius, bounds, maxWidth, options) {
+  const side = getLabelSide(config.angle);
+  const fontSize = config.fontSize ?? options.fontSize;
+  const lines = wrapText(config.text, maxWidth, fontSize, options.fontFamily, options.fontWeight);
+  const innerR = options.innerRadius ?? 0;
+  const sliceRadius = innerR + (radius - innerR) * (config.radiusRatio ?? 1);
+  const pieEdge = radialOffset(sliceRadius, config.angle);
+  const horizontalDir = side === "right" ? 1 : -1;
+  const textWidth = calculateWrappedTextWidth(lines, fontSize, options.fontFamily, options.fontWeight);
+  const textHeight = calculateWrappedTextHeight(lines, fontSize, options.lineHeight);
+  let elbow;
+  let textAnchor;
+  if (options.lineStyle === "none") {
+    const totalOffset = options.leaderOffset + options.horizontalOffset + options.textOffset;
+    const pos = radialOffset(radius + totalOffset, config.angle);
+    const absoluteX2 = bounds.centerX + pos.x - textWidth / 2;
+    const absoluteY2 = bounds.centerY + pos.y - textHeight / 2;
+    return {
+      text: config.text,
+      lines,
+      angle: config.angle,
+      side,
+      x: pos.x,
+      y: pos.y,
+      boundingBox: { x: absoluteX2, y: absoluteY2, width: textWidth, height: textHeight },
+      leaderLine: { x1: pieEdge.x, y1: pieEdge.y, x2: pos.x, y2: pos.y, x3: pos.x, y3: pos.y },
+      index: config.index,
+      value: config.value,
+      percentage: config.percentage,
+      color: config.color,
+      fontSize: config.fontSize,
+      textColor: config.textColor,
+      connectorColor: config.connectorColor,
+      connectorWidth: config.connectorWidth
+    };
+  }
+  if (options.lineStyle === "straight") {
+    const lineEnd = pieEdge.x + horizontalDir * (options.leaderOffset + options.horizontalOffset);
+    elbow = { x: pieEdge.x, y: pieEdge.y };
+    textAnchor = { x: lineEnd, y: pieEdge.y };
+  } else if (options.alignTo === "edge") {
+    elbow = radialOffset(radius + options.leaderOffset, config.angle);
+    const edgeX = side === "right" ? bounds.right - bounds.centerX - options.textOffset - textWidth : bounds.left - bounds.centerX + options.textOffset + textWidth;
+    textAnchor = { x: edgeX, y: elbow.y };
+  } else {
+    elbow = radialOffset(radius + options.leaderOffset, config.angle);
+    textAnchor = {
+      x: elbow.x + horizontalDir * options.horizontalOffset,
+      y: elbow.y
+    };
+  }
+  const absoluteX = bounds.centerX + textAnchor.x + (side === "right" ? options.textOffset : -options.textOffset - textWidth);
+  const absoluteY = bounds.centerY + textAnchor.y - textHeight / 2;
+  return {
+    text: config.text,
+    lines,
+    angle: config.angle,
+    side,
+    x: textAnchor.x,
+    y: textAnchor.y,
+    boundingBox: {
+      x: absoluteX,
+      y: absoluteY,
+      width: textWidth,
+      height: textHeight
+    },
+    leaderLine: {
+      x1: pieEdge.x,
+      y1: pieEdge.y,
+      x2: elbow.x,
+      y2: elbow.y,
+      x3: textAnchor.x,
+      y3: textAnchor.y
+    },
+    // Include original data for custom rendering
+    index: config.index,
+    value: config.value,
+    percentage: config.percentage,
+    color: config.color,
+    fontSize: config.fontSize,
+    textColor: config.textColor,
+    connectorColor: config.connectorColor,
+    connectorWidth: config.connectorWidth
+  };
+}
+function createLabelsAtRadius(labelConfigs, radius, bounds, opts) {
+  const availableWidthRight = getAvailableLabelWidth("right", bounds, radius, opts);
+  const availableWidthLeft = getAvailableLabelWidth("left", bounds, radius, opts);
+  return labelConfigs.map((config) => {
+    const side = getLabelSide(config.angle);
+    const maxWidth = side === "right" ? availableWidthRight : availableWidthLeft;
+    return createLabelLayoutItem(config, radius, bounds, Math.max(maxWidth, 30), opts);
+  });
+}
+function buildResult(labels, radius) {
+  const leftLabels = labels.filter((l) => l.side === "left");
+  const rightLabels = labels.filter((l) => l.side === "right");
+  return {
+    labels,
+    radius,
+    maxLabelWidthLeft: leftLabels.length > 0 ? Math.max(...leftLabels.map((l) => l.boundingBox.width)) : 0,
+    maxLabelWidthRight: rightLabels.length > 0 ? Math.max(...rightLabels.map((l) => l.boundingBox.width)) : 0
+  };
+}
+function computeLabelAwareRadius(labelConfigs, initialRadius, bounds, options = {}) {
+  if (labelConfigs.length === 0) return initialRadius;
+  const opts = { ...DEFAULT_LABEL_LAYOUT_OPTIONS, ...options };
+  const chartWidth = bounds.right - bounds.left;
+  const chartHeight = bounds.bottom - bounds.top;
+  const minChartDim = Math.min(chartWidth, chartHeight);
+  const scale = Math.min(1, minChartDim / 300);
+  const halfWidth = Math.min(bounds.centerX - bounds.left, bounds.right - bounds.centerX);
+  const halfHeight = Math.min(bounds.centerY - bounds.top, bounds.bottom - bounds.centerY);
+  if (opts.lineStyle === "none") {
+    const totalOffset = opts.leaderOffset * scale + opts.horizontalOffset * scale + opts.textOffset;
+    let maxTextWidth2 = 0;
+    let maxTextHeight = 0;
+    for (const config of labelConfigs) {
+      const fontSize = config.fontSize ?? opts.fontSize;
+      const lines = wrapText(config.text, halfWidth, fontSize, opts.fontFamily, opts.fontWeight);
+      maxTextWidth2 = Math.max(maxTextWidth2, calculateWrappedTextWidth(lines, fontSize, opts.fontFamily, opts.fontWeight));
+      maxTextHeight = Math.max(maxTextHeight, calculateWrappedTextHeight(lines, fontSize, opts.lineHeight));
+    }
+    const maxRadiusH = halfWidth - totalOffset - maxTextWidth2 / 2;
+    const maxRadiusV = halfHeight - totalOffset - maxTextHeight / 2;
+    return Math.max(Math.min(initialRadius, maxRadiusH, maxRadiusV), opts.minRadius);
+  }
+  const leaderLength = opts.leaderOffset * scale + opts.horizontalOffset * scale + opts.textOffset;
+  let maxTextWidth = 0;
+  for (const config of labelConfigs) {
+    const fontSize = config.fontSize ?? opts.fontSize;
+    const lines = wrapText(config.text, halfWidth, fontSize, opts.fontFamily, opts.fontWeight);
+    const w = calculateWrappedTextWidth(lines, fontSize, opts.fontFamily, opts.fontWeight);
+    maxTextWidth = Math.max(maxTextWidth, w);
+  }
+  const margin = 4;
+  const maxAllowableRadius = halfWidth - leaderLength - maxTextWidth - margin;
+  return Math.max(Math.min(initialRadius, maxAllowableRadius), opts.minRadius);
+}
+function calculateLabelLayout(labelConfigs, initialRadius, bounds, options = {}) {
+  const opts = { ...DEFAULT_LABEL_LAYOUT_OPTIONS, ...options };
+  if (labelConfigs.length === 0) {
+    return { labels: [], radius: initialRadius, maxLabelWidthLeft: 0, maxLabelWidthRight: 0 };
+  }
+  const chartWidth = bounds.right - bounds.left;
+  const chartHeight = bounds.bottom - bounds.top;
+  const minChartDim = Math.min(chartWidth, chartHeight);
+  const scale = Math.min(1, minChartDim / 300);
+  const effectiveOpts = {
+    ...opts,
+    leaderOffset: opts.leaderOffset * scale,
+    horizontalOffset: opts.horizontalOffset * scale
+  };
+  const labels = createLabelsAtRadius(labelConfigs, initialRadius, bounds, effectiveOpts);
+  if (opts.lineStyle === "angled" || opts.lineStyle === "none") {
+    const margin = 2;
+    const sides = ["left", "right"];
+    const extendByIndex = /* @__PURE__ */ new Map();
+    for (const side of sides) {
+      const sideLabels = labels.filter((l) => l.side === side).sort((a, b) => a.boundingBox.y - b.boundingBox.y);
+      for (let i = 1; i < sideLabels.length; i++) {
+        const prev = sideLabels[i - 1];
+        const curr = sideLabels[i];
+        const overlap = prev.boundingBox.y + prev.boundingBox.height + margin - curr.boundingBox.y;
+        if (overlap > 0) {
+          const target = Math.abs(curr.y) <= Math.abs(prev.y) ? curr : prev;
+          const existing = extendByIndex.get(target.index) ?? 0;
+          extendByIndex.set(target.index, Math.max(existing, overlap * 1.5));
+        }
+      }
+    }
+    if (extendByIndex.size > 0) {
+      const availableWidthRight = getAvailableLabelWidth("right", bounds, initialRadius, effectiveOpts);
+      const availableWidthLeft = getAvailableLabelWidth("left", bounds, initialRadius, effectiveOpts);
+      for (let i = 0; i < labels.length; i++) {
+        const extra = extendByIndex.get(labels[i].index);
+        if (!extra) continue;
+        const config = labelConfigs[i];
+        const side = getLabelSide(config.angle);
+        const maxW = side === "right" ? availableWidthRight : availableWidthLeft;
+        const extendedOpts = { ...effectiveOpts, horizontalOffset: effectiveOpts.horizontalOffset + extra };
+        labels[i] = createLabelLayoutItem(config, initialRadius, bounds, Math.max(maxW, 30), extendedOpts);
+      }
+    }
+  }
+  return buildResult(labels, initialRadius);
+}
+function boxAreaToBounds(area) {
+  return {
+    left: area.x,
+    right: area.x + area.width,
+    top: area.y,
+    bottom: area.y + area.height,
+    centerX: area.x + area.width / 2,
+    centerY: area.y + area.height / 2
+  };
+}
+function buildPieDataLabelLayout(frame, labelConfig, viewport, datasetPropsMap) {
+  const configs = [];
+  const labelSlices = /* @__PURE__ */ new Map();
+  for (const slice of frame.slices) {
+    const angle = slice.endAngle - slice.rotation;
+    if (angle < 0.5) continue;
+    const percentage = slice.targetPercentage;
+    if (percentage < (labelConfig.minPercentage ?? 0)) continue;
+    const datasetProps = datasetPropsMap.get(slice.datasetIndex);
+    const dataItem = datasetProps?.data?.[slice.originalIndex];
+    const labelCtx = makeItemContext(dataItem, slice.originalIndex);
+    const sliceLabel = String(resolveAccessor(datasetProps?.label, labelCtx) ?? `Item ${slice.originalIndex + 1}`);
+    const text = formatDataLabelText(slice.value, percentage, labelConfig.display, labelConfig.formatter, sliceLabel);
+    if (!text) continue;
+    const perLabelFontSize = labelConfig.fontSizeAccessor ? resolveAccessor(labelConfig.fontSizeAccessor, labelCtx, { arrayMode: "cycle" }) : void 0;
+    const perLabelColorRaw = labelConfig.colorAccessor ? resolveAccessor(labelConfig.colorAccessor, labelCtx, { arrayMode: "cycle" }) : void 0;
+    const perLabelColor = typeof perLabelColorRaw === "string" ? perLabelColorRaw : void 0;
+    const perLabelConnectorColorRaw = labelConfig.connectorColorAccessor ? resolveAccessor(labelConfig.connectorColorAccessor, labelCtx, { arrayMode: "cycle" }) : void 0;
+    const perLabelConnectorColor = typeof perLabelConnectorColorRaw === "string" ? perLabelConnectorColorRaw : void 0;
+    const perLabelConnectorWidth = labelConfig.connectorWidthAccessor ? resolveAccessor(labelConfig.connectorWidthAccessor, labelCtx, { arrayMode: "clip" }) : void 0;
+    configs.push({
+      text,
+      // Live animated midpoint — matches the drawn slice through entry/reorder animations.
+      angle: (slice.rotation + slice.endAngle) / 2,
+      index: slice.originalIndex,
+      value: slice.value,
+      percentage,
+      color: slice.color ?? DEFAULT_FALLBACK_COLOR,
+      label: sliceLabel,
+      radiusRatio: slice.radiusRatio,
+      fontSize: perLabelFontSize,
+      textColor: perLabelColor,
+      connectorColor: perLabelConnectorColor,
+      connectorWidth: perLabelConnectorWidth
+    });
+    labelSlices.set(slice.originalIndex, slice);
+  }
+  if (configs.length === 0) return null;
+  const bounds = { ...boxAreaToBounds({ x: 0, y: 0, width: viewport.width, height: viewport.height }), centerX: frame.center.x, centerY: frame.center.y };
+  const layoutOptions = {
+    fontSize: labelConfig.fontSize,
+    fontWeight: labelConfig.fontWeight,
+    fontFamily: labelConfig.fontFamily,
+    leaderOffset: labelConfig.leaderOffset,
+    horizontalOffset: labelConfig.horizontalOffset,
+    textOffset: labelConfig.textOffset,
+    lineHeight: labelConfig.lineHeight,
+    alignTo: labelConfig.alignTo,
+    lineStyle: labelConfig.lineStyle,
+    innerRadius: frame.innerRadius
+  };
+  const labelLayout = calculateLabelLayout(configs, frame.outerRadius, bounds, layoutOptions);
+  const configsByIndex = /* @__PURE__ */ new Map();
+  for (const config of configs) configsByIndex.set(config.index, config);
+  return { labelLayout, configsByIndex, labelSlices };
+}
+
+export { DEFAULT_LABEL_LAYOUT_OPTIONS, boxAreaToBounds, buildPieDataLabelLayout, calculateLabelLayout, computeLabelAwareRadius, computeSliceGeometry, drawCanvasLabelLines, drawCanvasLeaderLine, drawCanvasStraightLeaderLine, getLabelSide };

package/dist/chunk-53HW45JB.mjs

@@ -0,0 +1,102 @@
+import { computeItemHoverState, applyHoverEffects } from './chunk-BZN2QHGP.mjs';
+import { FIELD_DEFAULTS, getDefaultColor, resolveDash, resolveAccessor, makeItemContext } from './chunk-O2X6FF45.mjs';
+import { toRad } from './chunk-RQ3CKQOX.mjs';
+
+// src/series/pie/shared.ts
+function computeSliceRenderStates(props, layout, theme) {
+  const { interaction, effects } = props;
+  const { visibleSlices, center, outerRadius, innerRadius, colors, borderColors, isFullCircle: fullCircle } = layout;
+  const borderWidth = typeof props.borderStrokeWidth === "number" ? props.borderStrokeWidth : 0;
+  const dataArr = props.data ?? [];
+  const seriesExtras = { seriesIndex: props.order ?? 0, seriesId: props.id ?? "" };
+  const valueAccessor = props.valueField ?? FIELD_DEFAULTS.valueField;
+  const categoryAccessor = props.categoryField ?? props.labelField ?? FIELD_DEFAULTS.categoryField;
+  const ctxFor = (i) => {
+    const value = valueAccessor ? resolveAccessor(valueAccessor, makeItemContext(dataArr[i], i)) ?? null : null;
+    const category = categoryAccessor ? resolveAccessor(categoryAccessor, makeItemContext(dataArr[i], i)) ?? void 0 : void 0;
+    return makeItemContext(dataArr[i], i, { value, category, ...seriesExtras });
+  };
+  const resolveSliceBorderDash = (i) => resolveDash(props.borderDash, ctxFor(i));
+  const resolveSliceBorderDashOffset = (i) => resolveAccessor(props.borderDashOffset, ctxFor(i), { arrayMode: "clip", fallback: 0 }) ?? 0;
+  const resolveSliceOpacity = (i) => resolveAccessor(props.opacity, ctxFor(i), { arrayMode: "clip" });
+  const resolveSliceHoverColor = (i) => resolveAccessor(props.hoverColor, ctxFor(i), { arrayMode: "cycle" });
+  const resolveSliceHoverBorderColor = (i) => resolveAccessor(props.hoverBorderColor, ctxFor(i), { arrayMode: "cycle" });
+  const resolveSliceOffset = (i) => resolveAccessor(props.offset, ctxFor(i), { arrayMode: "clip", fallback: 0 }) ?? 0;
+  const borderRadius = typeof props.borderRadius === "number" ? props.borderRadius : typeof props.borderRadius === "object" && props.borderRadius !== null && !Array.isArray(props.borderRadius) ? props.borderRadius : void 0;
+  const hoverEnabled = effects !== void 0;
+  const slices = visibleSlices.map((slice) => {
+    const dataIndex = slice.dataIndex;
+    const userFill = colors[dataIndex];
+    const borderColor = borderColors[dataIndex];
+    const canvasFill = userFill ?? getDefaultColor(dataIndex, theme);
+    const hoverState = computeItemHoverState(dataIndex, interaction?.hoveredIndex, hoverEnabled);
+    const isInactive = hoverState.hasAnyHover && !hoverState.isHovered;
+    const itemHoverColor = resolveSliceHoverColor(dataIndex);
+    const itemHoverBorderColor = resolveSliceHoverBorderColor(dataIndex);
+    const itemEffects = hoverEnabled && effects && (itemHoverColor !== void 0 || itemHoverBorderColor !== void 0) ? {
+      ...effects,
+      hoverBackgroundColor: itemHoverColor ?? effects.hoverBackgroundColor,
+      hoverBorderColor: itemHoverBorderColor ?? effects.hoverBorderColor
+    } : hoverEnabled ? effects : void 0;
+    const {
+      color: effectColor,
+      opacity: hoverOpacity,
+      borderColor: effectBorderColor,
+      borderStrokeWidth: effectBorderWidth,
+      borderDash: effectBorderDash,
+      borderDashOffset: effectBorderDashOffset
+    } = applyHoverEffects(canvasFill, borderColor, borderWidth, resolveSliceBorderDash(dataIndex), resolveSliceBorderDashOffset(dataIndex), hoverState, itemEffects, theme);
+    const userOpacity = resolveSliceOpacity(dataIndex);
+    const opacity = userOpacity !== void 0 ? hoverOpacity * userOpacity : hoverOpacity;
+    const finalEffectColor = effectColor;
+    const baseSliceOffset = resolveSliceOffset(dataIndex);
+    const offset = baseSliceOffset > 0 || hoverEnabled && effects ? calculateSliceOffset(slice, hoverState.isHovered, hoverEnabled ? effects : void 0, baseSliceOffset) : { dx: 0, dy: 0 };
+    const scale = hoverEnabled && hoverState.isHovered && effects?.hoverScale ? effects.hoverScale : 1;
+    const arcConfig = {
+      rotation: slice.rotation,
+      endAngle: slice.endAngle,
+      outerRadius,
+      innerRadius,
+      borderRadius
+    };
+    return {
+      slice,
+      dataIndex,
+      effectColor: finalEffectColor,
+      effectBorderColor,
+      effectBorderWidth,
+      effectBorderDash,
+      effectBorderDashOffset,
+      opacity,
+      // SVG state — class composition + inline overrides
+      userFill,
+      userBorder: borderColor === "transparent" ? void 0 : borderColor,
+      isInactive,
+      offset,
+      scale,
+      arcConfig,
+      isHovered: hoverState.isHovered
+    };
+  });
+  return {
+    slices,
+    center,
+    outerRadius,
+    innerRadius,
+    isFullCircle: fullCircle
+  };
+}
+function calculateSliceOffset(slice, isHovered, effects, baseOffset = 0) {
+  let offset = baseOffset;
+  if (isHovered && effects?.hoverOffset) {
+    offset = Math.max(offset, effects.hoverOffset);
+  }
+  if (offset === 0) return { dx: 0, dy: 0 };
+  const angleRad = toRad(slice.valueAngle);
+  return {
+    dx: Math.cos(angleRad) * offset,
+    dy: Math.sin(angleRad) * offset
+  };
+}
+
+export { computeSliceRenderStates };

package/dist/chunk-55Y3WI6S.mjs

@@ -0,0 +1,186 @@
+import { getCellLabelInfo, buildCellExtras } from './chunk-VVI3OBPJ.mjs';
+import { createDrawImage } from './chunk-7CMVDIOU.mjs';
+import { resolveFontFamily, DEFAULT_TREEMAP_CELL_BORDER_COLOR, DEFAULT_TREEMAP_HEADER_TEXT_COLOR, DEFAULT_HOVER_DIM_OPACITY, DEFAULT_HOVER_BRIGHTNESS } from './chunk-NKUYIWAP.mjs';
+import { getContrastColor } from './chunk-QS76E3TD.mjs';
+import { resolveAccessor, makeItemContext, resolveDash } from './chunk-O2X6FF45.mjs';
+import { withCanvasState, adjustBrightness } from './chunk-SSLTFJ3U.mjs';
+
+// src/series/treemap/canvas/index.ts
+function renderTreemapCanvas(props, layout, ctx, context) {
+  const fontFamily = resolveFontFamily(void 0, context?.font);
+  const interaction = context?.interaction;
+  const anyHovered = interaction?.hoveredIndex != null;
+  const treemapDataArr = props.data;
+  const defaultBorderColor = context?.theme.treemapCellBorder ?? DEFAULT_TREEMAP_CELL_BORDER_COLOR;
+  const cellExtras = (idx) => buildCellExtras(props, treemapDataArr?.[idx], layout, idx);
+  const resolveCellBorderColor = (idx) => {
+    const v = resolveAccessor(props.borderColor, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)), { fallback: defaultBorderColor });
+    return typeof v === "string" ? v : defaultBorderColor;
+  };
+  const resolveCellBorderWidth = (idx) => resolveAccessor(props.borderStrokeWidth, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)), { arrayMode: "clip", fallback: 1 }) ?? 1;
+  const resolveCellLabelColor = (idx) => {
+    const v = resolveAccessor(props.labelColor, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)));
+    return typeof v === "string" ? v : void 0;
+  };
+  const resolveCellBorderDash = (idx) => resolveDash(props.borderDash, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)));
+  const resolveCellBorderDashOffset = (idx) => resolveAccessor(props.borderDashOffset, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)), { arrayMode: "clip" });
+  const resolveCellOpacity = (idx) => resolveAccessor(props.opacity, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)), { arrayMode: "clip" });
+  const resolveCellHoverColor = (idx) => {
+    const v = resolveAccessor(props.hoverColor, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)), { arrayMode: "cycle" });
+    return typeof v === "string" ? v : void 0;
+  };
+  const resolveCellHoverBorderColor = (idx) => {
+    const v = resolveAccessor(props.hoverBorderColor, makeItemContext(treemapDataArr?.[idx], idx, cellExtras(idx)), { arrayMode: "cycle" });
+    return typeof v === "string" ? v : void 0;
+  };
+  const borderJoinStyle = props.borderJoinStyle;
+  const borderAlign = props.borderAlign ?? "center";
+  const borderRadius = props.borderRadius ?? 2;
+  for (const gh of layout.groupHeaders) {
+    withCanvasState(ctx, () => {
+      ctx.fillStyle = gh.color;
+      ctx.beginPath();
+      ctx.roundRect(gh.x, gh.y, gh.width, gh.height, 2);
+      ctx.fill();
+      const headerText = gh.label.toUpperCase();
+      const maxChars = Math.floor((gh.width - 16) / 6.5);
+      if (maxChars >= 2) {
+        const displayText = headerText.length <= maxChars ? headerText : headerText.slice(0, maxChars - 1) + "\u2026";
+        ctx.fillStyle = context?.theme.treemapHeaderText ?? DEFAULT_TREEMAP_HEADER_TEXT_COLOR;
+        ctx.font = `700 10px ${fontFamily}`;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.fillText(displayText, gh.x + 8, gh.y + gh.height / 2);
+      }
+    });
+  }
+  for (const cell of layout.cells) {
+    if (cell.width < 1 || cell.height < 1) continue;
+    const isHovered = anyHovered && cell.index === interaction.hoveredIndex;
+    const userCellOpacity = resolveCellOpacity(cell.index);
+    const cellOpacity = (anyHovered && !isHovered ? context?.effects?.dimOpacity ?? context?.theme.dimOpacity ?? DEFAULT_HOVER_DIM_OPACITY : 1) * (userCellOpacity ?? 1);
+    const cellHoverColor = isHovered ? resolveCellHoverColor(cell.index) : void 0;
+    const cellColor = cellHoverColor ?? (isHovered && (context?.effects?.hoverBrightness ?? context?.theme.hoverBrightness) ? adjustBrightness(cell.color, context?.effects?.hoverBrightness ?? context?.theme.hoverBrightness ?? DEFAULT_HOVER_BRIGHTNESS) : cell.color);
+    const cellBorderWidth = resolveCellBorderWidth(cell.index);
+    const cellBorderColor = (isHovered ? resolveCellHoverBorderColor(cell.index) : void 0) ?? resolveCellBorderColor(cell.index);
+    withCanvasState(ctx, () => {
+      if (cellOpacity < 1) ctx.globalAlpha = cellOpacity;
+      const inset = borderAlign === "inner" ? cellBorderWidth / 2 : 0;
+      const cx = cell.x + inset;
+      const cy = cell.y + inset;
+      const cw = cell.width - inset * 2;
+      const ch = cell.height - inset * 2;
+      const r = Math.min(borderRadius, cw / 2, ch / 2);
+      ctx.fillStyle = cellColor;
+      ctx.beginPath();
+      ctx.roundRect(cx, cy, cw, ch, r);
+      ctx.fill();
+      if (cellBorderWidth > 0) {
+        const cellBorderDash = resolveCellBorderDash(cell.index);
+        const cellBorderDashOffset = resolveCellBorderDashOffset(cell.index);
+        ctx.strokeStyle = cellBorderColor;
+        ctx.lineWidth = cellBorderWidth;
+        ctx.setLineDash(cellBorderDash ?? []);
+        if (cellBorderDashOffset) ctx.lineDashOffset = cellBorderDashOffset;
+        if (borderJoinStyle) ctx.lineJoin = borderJoinStyle;
+        ctx.stroke();
+      }
+    });
+    if (!props.renderContent) {
+      const info = getCellLabelInfo(cell, props.labelMinSize);
+      if (info.showPrimary) {
+        const labelFill = resolveCellLabelColor(cell.index) ?? getContrastColor(cellColor);
+        withCanvasState(ctx, () => {
+          if (cellOpacity < 1) ctx.globalAlpha = cellOpacity;
+          ctx.fillStyle = labelFill;
+          ctx.font = `700 ${info.fontSize}px ${fontFamily}`;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(cell.label, info.cx, info.primaryY);
+          if (info.showSecondary) {
+            ctx.globalAlpha = (cellOpacity < 1 ? cellOpacity : 1) * 0.85;
+            ctx.fillStyle = labelFill;
+            ctx.font = `500 ${info.secondaryFontSize}px ${fontFamily}`;
+            ctx.fillText(cell.secondaryLabel, info.cx, info.secondaryY);
+          }
+        });
+      }
+    }
+  }
+}
+function renderCanvasTreemapContent(ctx, layouts, onImageLoad) {
+  for (const [, { props, layout }] of layouts) {
+    const renderFn = props.renderContent;
+    if (!renderFn || !props.data) continue;
+    const drawImage = createDrawImage(ctx, onImageLoad ?? (() => {
+    }));
+    for (const cell of layout.cells) {
+      const dataItem = props.data[cell.index];
+      if (!dataItem) continue;
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(cell.x, cell.y, cell.width, cell.height);
+      ctx.clip();
+      renderFn({
+        data: dataItem,
+        index: cell.index,
+        label: cell.label,
+        secondaryLabel: cell.secondaryLabel,
+        value: cell.value,
+        color: cell.color,
+        x: cell.x,
+        y: cell.y,
+        width: cell.width,
+        height: cell.height,
+        nodeId: cell.nodeId,
+        parentId: cell.parentId,
+        hasChildren: cell.hasChildren,
+        depth: cell.depth,
+        drilldownParentId: props.drilldownParentId ?? null,
+        ctx,
+        drawImage
+      });
+      ctx.restore();
+    }
+  }
+}
+function renderTreemapCanvasClipped(ctx, area, transform, draw) {
+  if (transform?.zoom) {
+    const { tx, ty, sx, sy, progress, direction } = transform.zoom;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(area.x, area.y, area.width, area.height);
+    ctx.clip();
+    ctx.translate(tx, ty);
+    ctx.scale(sx, sy);
+    if (direction === "out") ctx.globalAlpha = progress;
+    draw();
+    ctx.restore();
+    return;
+  }
+  if (transform?.wipe) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(area.x, area.y, area.width * transform.wipe.progress, area.height);
+    ctx.clip();
+    draw();
+    ctx.restore();
+    return;
+  }
+  draw();
+}
+function renderTreemapGroupHoverCanvas(ctx, bg) {
+  ctx.save();
+  ctx.fillStyle = "rgba(0,0,0,0.15)";
+  ctx.beginPath();
+  ctx.roundRect(bg.x, bg.y, bg.width, bg.height, 2);
+  ctx.fill();
+  ctx.strokeStyle = "rgba(255,255,255,0.6)";
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.roundRect(bg.x, bg.y, bg.width, bg.height, 2);
+  ctx.stroke();
+  ctx.restore();
+}
+
+export { renderCanvasTreemapContent, renderTreemapCanvas, renderTreemapCanvasClipped, renderTreemapGroupHoverCanvas };