@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-VVI3OBPJ.mjs

@@ -0,0 +1,524 @@
+import { CHAR_WIDTH_RATIO } from './chunk-XTVE4P3L.mjs';
+import { DEFAULT_TREEMAP_PADDING, DEFAULT_TREEMAP_GROUP_LABEL_HEIGHT, DEFAULT_TREEMAP_GROUP_COLORS, DEFAULT_TREEMAP_CELL_COLOR, DEFAULT_TREEMAP_HEADER_BG } from './chunk-NKUYIWAP.mjs';
+import { resquarify, sliceDiceLayout, diceLayout, sliceLayout } from './chunk-BETFQBM2.mjs';
+import { resolveColorScaleRange, interpolateColor } from './chunk-QS76E3TD.mjs';
+import { FIELD_DEFAULTS, resolveAccessor, makeItemContext } from './chunk-O2X6FF45.mjs';
+
+// src/series/treemap/geometry.layout.ts
+function interpolateColor2(colorScale, colorRange, value) {
+  return interpolateColor(colorScale, colorRange, value, DEFAULT_TREEMAP_CELL_COLOR);
+}
+function resolveField(item, field) {
+  if (!field) return void 0;
+  return item[field];
+}
+function runLayout(algorithm, items, x, y, w, h, depth, previousLayout) {
+  switch (algorithm) {
+    case "slice":
+      return sliceLayout(items, x, y, w, h);
+    case "dice":
+      return diceLayout(items, x, y, w, h);
+    case "sliceDice":
+      return sliceDiceLayout(items, x, y, w, h, depth);
+    default:
+      return resquarify(items, x, y, w, h, previousLayout ?? null);
+  }
+}
+function getLevelConfig(levels, depth) {
+  if (!levels) return void 0;
+  return levels.find((l) => l.depth === depth);
+}
+function calculateTreemapLayout(props, chartArea, theme, previousLayout) {
+  const {
+    data,
+    categoryField = FIELD_DEFAULTS.categoryField,
+    valueField = FIELD_DEFAULTS.valueField,
+    nodeId: nodeIdField,
+    parentField,
+    colorValueField,
+    colorScale,
+    colorRange,
+    color: colorProp,
+    layout: algorithm,
+    spacing: padding = DEFAULT_TREEMAP_PADDING,
+    groupPadding: groupPaddingProp,
+    showGroupLabel,
+    groupLabelHeight = DEFAULT_TREEMAP_GROUP_LABEL_HEIGHT,
+    secondaryLabelField,
+    levels,
+    drilldown,
+    drilldownMode = "nested",
+    drilldownParentId
+  } = props;
+  if (!data || data.length === 0) return { cells: [], groupHeaders: [], groupBackgrounds: [] };
+  const cells = [];
+  const groupHeaders = [];
+  const groupBackgrounds = [];
+  let topLevelRects;
+  const hasHierarchy = !!nodeIdField && !!parentField;
+  let resolvedColorScale = colorScale;
+  let resolvedColorRange = colorRange;
+  let resolvedValueRange;
+  if (colorValueField && (colorRange || colorScale)) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const item of data) {
+      const cv = resolveField(item, colorValueField);
+      if (typeof cv === "number" && isFinite(cv)) {
+        if (cv < min) min = cv;
+        if (cv > max) max = cv;
+      }
+    }
+    if (isFinite(min) && isFinite(max)) {
+      resolvedValueRange = [min, max];
+      const result = resolveColorScaleRange({ colorScale, colorRange }, min, max);
+      if (result) {
+        resolvedColorScale = result.colorScale;
+        resolvedColorRange = result.colorRange;
+      }
+    }
+  }
+  const resolveColor = (item, index, groupIndex, hasParent) => {
+    if (colorValueField && resolvedColorScale && resolvedColorRange) {
+      const cv = resolveField(item, colorValueField);
+      if (typeof cv === "number") {
+        return interpolateColor2(resolvedColorScale, resolvedColorRange, cv);
+      }
+    }
+    if (colorProp != null) {
+      const cellValue = Number(resolveField(item, valueField));
+      const cat = resolveField(item, categoryField);
+      const extras = {
+        value: Number.isFinite(cellValue) ? cellValue : null,
+        category: cat == null ? void 0 : String(cat),
+        // Single-dataset series identity (defaults 0 / '').
+        seriesIndex: props.order ?? 0,
+        seriesId: props.id ?? ""
+      };
+      const resolved = resolveAccessor(colorProp, makeItemContext(item, hasParent ? groupIndex : index, extras));
+      if (typeof resolved === "string") return resolved;
+    }
+    if (hasParent) return DEFAULT_TREEMAP_GROUP_COLORS[groupIndex % DEFAULT_TREEMAP_GROUP_COLORS.length];
+    return theme?.treemapCell ?? DEFAULT_TREEMAP_CELL_COLOR;
+  };
+  if (hasHierarchy) {
+    let getAggregate2 = function(id) {
+      if (aggregateCache.has(id)) return aggregateCache.get(id);
+      const node = nodeMap.get(id);
+      if (!node) return 0;
+      const ownValue = Number(resolveField(node.item, valueField)) || 0;
+      if (node.children.length === 0) {
+        aggregateCache.set(id, ownValue);
+        return ownValue;
+      }
+      let childSum = 0;
+      for (const childId of node.children) {
+        childSum += getAggregate2(childId);
+      }
+      const agg = ownValue > 0 ? ownValue : childSum;
+      aggregateCache.set(id, agg);
+      return agg;
+    }, getAggregateColorValue2 = function(id) {
+      if (aggregateColorValueCache.has(id)) return aggregateColorValueCache.get(id);
+      const node = nodeMap.get(id);
+      if (!node) return void 0;
+      if (node.children.length === 0) {
+        if (colorValueField) {
+          const cv = resolveField(node.item, colorValueField);
+          if (typeof cv === "number") {
+            aggregateColorValueCache.set(id, cv);
+            return cv;
+          }
+        }
+        return void 0;
+      }
+      let totalWeight = 0;
+      let weightedSum = 0;
+      for (const childId of node.children) {
+        const childCV = getAggregateColorValue2(childId);
+        const childVal = aggregateCache.get(childId) ?? 0;
+        if (childCV !== void 0 && childVal > 0) {
+          weightedSum += childCV * childVal;
+          totalWeight += childVal;
+        }
+      }
+      if (totalWeight > 0) {
+        const avg = weightedSum / totalWeight;
+        aggregateColorValueCache.set(id, avg);
+        return avg;
+      }
+      return void 0;
+    }, getAbsoluteDepth2 = function(id) {
+      if (depthCache.has(id)) return depthCache.get(id);
+      const pid = childToParent.get(id);
+      const d = pid ? getAbsoluteDepth2(pid) + 1 : 0;
+      depthCache.set(id, d);
+      return d;
+    };
+    const nodeMap = /* @__PURE__ */ new Map();
+    const childToParent = /* @__PURE__ */ new Map();
+    for (let i = 0; i < data.length; i++) {
+      const item = data[i];
+      const id = String(resolveField(item, nodeIdField) ?? i);
+      if (!nodeMap.has(id)) {
+        nodeMap.set(id, { item, index: i, children: [] });
+      } else {
+        const existing = nodeMap.get(id);
+        existing.item = item;
+        existing.index = i;
+      }
+      const pid = resolveField(item, parentField);
+      if (pid != null) {
+        const parentIdStr = String(pid);
+        childToParent.set(id, parentIdStr);
+        if (!nodeMap.has(parentIdStr)) {
+          nodeMap.set(parentIdStr, { item: null, index: -1, children: [] });
+        }
+        nodeMap.get(parentIdStr).children.push(id);
+      }
+    }
+    const aggregateCache = /* @__PURE__ */ new Map();
+    for (const id of nodeMap.keys()) {
+      getAggregate2(id);
+    }
+    const aggregateColorValueCache = /* @__PURE__ */ new Map();
+    if (colorValueField && resolvedColorScale && resolvedColorRange) {
+      for (const id of nodeMap.keys()) {
+        getAggregateColorValue2(id);
+      }
+    }
+    const depthCache = /* @__PURE__ */ new Map();
+    for (const id of nodeMap.keys()) {
+      getAbsoluteDepth2(id);
+    }
+    const currentParentId = drilldownParentId ?? null;
+    let visibleIds;
+    if (currentParentId === null) {
+      visibleIds = [];
+      for (const [id] of nodeMap) {
+        if (!childToParent.has(id)) {
+          visibleIds.push(id);
+        }
+      }
+    } else {
+      const parentNode = nodeMap.get(currentParentId);
+      visibleIds = parentNode ? parentNode.children : [];
+    }
+    const visibleDepth = currentParentId === null ? 0 : (() => {
+      let depth = 0;
+      let pid = currentParentId;
+      while (pid && childToParent.has(pid)) {
+        pid = childToParent.get(pid);
+        depth++;
+      }
+      return depth;
+    })();
+    const parentNodes = [];
+    const leafNodes = [];
+    for (const id of visibleIds) {
+      const node = nodeMap.get(id);
+      if (!node || !node.item) continue;
+      const agg = aggregateCache.get(id) ?? 0;
+      if (agg <= 0) continue;
+      if (node.children.length > 0) {
+        parentNodes.push({ id, item: node.item, index: node.index, aggValue: agg });
+      } else {
+        leafNodes.push({ id, item: node.item, index: node.index, value: agg });
+      }
+    }
+    const levelConfig = getLevelConfig(levels, visibleDepth);
+    const effectiveAlgorithm = levelConfig?.layout ?? algorithm;
+    const effectivePadding = levelConfig?.spacing ?? padding;
+    if (parentNodes.length > 0 && drilldown && drilldownMode === "flat") {
+      const allItems = [...parentNodes.map((p) => ({ id: p.id, item: p.item, index: p.index, value: p.aggValue, hasChildren: true })), ...leafNodes.map((l) => ({ id: l.id, item: l.item, index: l.index, value: l.value, hasChildren: false }))];
+      const squarifyItems = allItems.map((item, i) => ({
+        value: item.value,
+        index: i
+      }));
+      const rects = runLayout(effectiveAlgorithm, squarifyItems, chartArea.x, chartArea.y, chartArea.width, chartArea.height, visibleDepth, previousLayout);
+      topLevelRects = rects;
+      for (const r of rects) {
+        const item = allItems[r.index];
+        cells.push({
+          x: r.x + effectivePadding / 2,
+          y: r.y + effectivePadding / 2,
+          width: Math.max(0, r.width - effectivePadding),
+          height: Math.max(0, r.height - effectivePadding),
+          color: resolveColor(item.item, item.index, r.index, false),
+          label: String(resolveField(item.item, categoryField) ?? ""),
+          secondaryLabel: secondaryLabelField ? String(resolveField(item.item, secondaryLabelField) ?? "") : void 0,
+          value: item.value,
+          index: item.index,
+          nodeId: item.id,
+          hasChildren: item.hasChildren,
+          depth: getAbsoluteDepth2(item.id)
+        });
+      }
+    } else if (parentNodes.length > 0) {
+      let layoutRecursive2 = function(nodeIds, areaX, areaY, areaW, areaH, depth, groupColorIndex) {
+        const parents = [];
+        const leaves = [];
+        for (const id of nodeIds) {
+          const node = nodeMap.get(id);
+          if (!node || !node.item) continue;
+          const agg = aggregateCache.get(id) ?? 0;
+          if (agg <= 0) continue;
+          if (node.children.length > 0) {
+            parents.push({ id, item: node.item, index: node.index, aggValue: agg });
+          } else {
+            leaves.push({ id, item: node.item, index: node.index, value: agg });
+          }
+        }
+        if (parents.length === 0 && leaves.length === 0) return;
+        const depthConfig = getLevelConfig(levels, depth);
+        const depthAlgorithm = depthConfig?.layout ?? algorithm;
+        const depthPadding = depthConfig?.spacing ?? padding;
+        const depthShowHeaders = depthConfig?.showHeader ?? showGroupLabel ?? parents.length > 0;
+        const depthHeaderHeight = depthShowHeaders ? depthConfig?.headerHeight ?? groupLabelHeight : 0;
+        if (parents.length === 0) {
+          const sqItems2 = leaves.map((l, i) => ({ value: l.value, index: i }));
+          const rects = runLayout(depthAlgorithm, sqItems2, areaX, areaY, areaW, areaH, depth);
+          for (const r of rects) {
+            const leaf = leaves[r.index];
+            cells.push({
+              x: r.x + depthPadding / 2,
+              y: r.y + depthPadding / 2,
+              width: Math.max(0, r.width - depthPadding),
+              height: Math.max(0, r.height - depthPadding),
+              color: resolveColor(leaf.item, leaf.index, groupColorIndex + r.index, depth > 0),
+              label: String(resolveField(leaf.item, categoryField) ?? ""),
+              secondaryLabel: secondaryLabelField ? String(resolveField(leaf.item, secondaryLabelField) ?? "") : void 0,
+              value: leaf.value,
+              index: leaf.index,
+              nodeId: leaf.id,
+              hasChildren: false,
+              depth: getAbsoluteDepth2(leaf.id)
+            });
+          }
+          return;
+        }
+        const allItems = [...parents.map((p) => ({ id: p.id, item: p.item, index: p.index, value: p.aggValue, isParent: true })), ...leaves.map((l) => ({ id: l.id, item: l.item, index: l.index, value: l.value, isParent: false }))];
+        const sqItems = allItems.map((item, i) => ({ value: item.value, index: i }));
+        const containerRects = runLayout(depthAlgorithm, sqItems, areaX, areaY, areaW, areaH, depth);
+        for (const cr of containerRects) {
+          const item = allItems[cr.index];
+          const gapHalf = effectiveGroupPadding / 2;
+          if (!item.isParent) {
+            cells.push({
+              x: cr.x + gapHalf,
+              y: cr.y + gapHalf,
+              width: Math.max(0, cr.width - effectiveGroupPadding),
+              height: Math.max(0, cr.height - effectiveGroupPadding),
+              color: resolveColor(item.item, item.index, groupColorIndex + cr.index, depth > 0),
+              label: String(resolveField(item.item, categoryField) ?? ""),
+              secondaryLabel: secondaryLabelField ? String(resolveField(item.item, secondaryLabelField) ?? "") : void 0,
+              value: item.value,
+              index: item.index,
+              nodeId: item.id,
+              hasChildren: false,
+              depth: getAbsoluteDepth2(item.id)
+            });
+            continue;
+          }
+          const groupColor = resolveColor(item.item, item.index, groupColorIndex + cr.index, true);
+          const containerX = cr.x + gapHalf;
+          const containerY = cr.y + gapHalf;
+          const containerW = Math.max(0, cr.width - effectiveGroupPadding);
+          const containerH = Math.max(0, cr.height - effectiveGroupPadding);
+          if (containerW <= 0 || containerH <= 0) continue;
+          let containerColor = groupColor;
+          if (colorValueField && resolvedColorScale && resolvedColorRange) {
+            const aggCV = aggregateColorValueCache.get(item.id);
+            if (aggCV !== void 0) {
+              containerColor = interpolateColor2(resolvedColorScale, resolvedColorRange, aggCV);
+            }
+          }
+          groupBackgrounds.push({
+            x: containerX,
+            y: containerY,
+            width: containerW,
+            height: containerH,
+            color: containerColor,
+            depth: getAbsoluteDepth2(item.id),
+            nodeId: item.id,
+            label: String(resolveField(item.item, categoryField) ?? item.id),
+            value: item.value,
+            index: item.index
+          });
+          const internalPad = Math.max(1, depthPadding);
+          const innerX = containerX + internalPad;
+          const innerY = containerY + internalPad + depthHeaderHeight;
+          const innerW = containerW - internalPad * 2;
+          const innerH = containerH - internalPad * 2 - depthHeaderHeight;
+          if (depthShowHeaders && containerW > 20 && containerH > depthHeaderHeight + 10) {
+            const headerColor = depth === 0 ? theme?.treemapHeaderBg ?? DEFAULT_TREEMAP_HEADER_BG : containerColor;
+            groupHeaders.push({
+              x: containerX,
+              y: containerY,
+              width: containerW,
+              height: depthHeaderHeight,
+              label: String(resolveField(item.item, categoryField) ?? item.id),
+              color: headerColor,
+              value: item.value,
+              index: item.index,
+              nodeId: item.id,
+              depth: getAbsoluteDepth2(item.id)
+            });
+          }
+          if (innerW <= 0 || innerH <= 0) continue;
+          const childIds = nodeMap.get(item.id)?.children ?? [];
+          layoutRecursive2(childIds, innerX, innerY, innerW, innerH, depth + 1, groupColorIndex + cr.index);
+        }
+      };
+      const effectiveGroupPadding = groupPaddingProp ?? 3;
+      layoutRecursive2(visibleIds, chartArea.x, chartArea.y, chartArea.width, chartArea.height, visibleDepth, 0);
+    } else if (leafNodes.length > 0) {
+      let drilldownGroupOffset = 0;
+      if (currentParentId !== null) {
+        const chain = [];
+        let cur = currentParentId;
+        while (cur) {
+          chain.unshift(cur);
+          cur = childToParent.get(cur);
+        }
+        let levelIds = [];
+        for (const [id] of nodeMap) {
+          if (!childToParent.has(id)) levelIds.push(id);
+        }
+        for (const targetAtLevel of chain) {
+          const parents = [];
+          const leaves = [];
+          for (const id of levelIds) {
+            const node = nodeMap.get(id);
+            if (!node || !node.item) continue;
+            const agg = aggregateCache.get(id) ?? 0;
+            if (agg <= 0) continue;
+            if (node.children.length > 0) parents.push(id);
+            else leaves.push(id);
+          }
+          const orderedIds = [...parents, ...leaves];
+          const pos = orderedIds.indexOf(targetAtLevel);
+          if (pos < 0) break;
+          drilldownGroupOffset += pos;
+          levelIds = nodeMap.get(targetAtLevel)?.children ?? [];
+        }
+      }
+      const squarifyItems = leafNodes.map((l, i) => ({
+        value: l.value,
+        index: i
+      }));
+      const rects = runLayout(effectiveAlgorithm, squarifyItems, chartArea.x, chartArea.y, chartArea.width, chartArea.height, visibleDepth, previousLayout);
+      topLevelRects = rects;
+      for (const r of rects) {
+        const leaf = leafNodes[r.index];
+        const hasParent = currentParentId !== null;
+        const groupIndex = hasParent ? drilldownGroupOffset + r.index : r.index;
+        cells.push({
+          x: r.x + effectivePadding / 2,
+          y: r.y + effectivePadding / 2,
+          width: Math.max(0, r.width - effectivePadding),
+          height: Math.max(0, r.height - effectivePadding),
+          color: resolveColor(leaf.item, leaf.index, groupIndex, hasParent),
+          label: String(resolveField(leaf.item, categoryField) ?? ""),
+          secondaryLabel: secondaryLabelField ? String(resolveField(leaf.item, secondaryLabelField) ?? "") : void 0,
+          value: leaf.value,
+          index: leaf.index,
+          nodeId: leaf.id,
+          hasChildren: false,
+          depth: getAbsoluteDepth2(leaf.id)
+        });
+      }
+    }
+  } else {
+    const items = [];
+    for (let i = 0; i < data.length; i++) {
+      const val = Number(resolveField(data[i], valueField)) || 0;
+      if (val <= 0) continue;
+      items.push({ value: val, index: i });
+    }
+    const rects = runLayout(algorithm, items, chartArea.x, chartArea.y, chartArea.width, chartArea.height, 0, previousLayout);
+    topLevelRects = rects;
+    for (const r of rects) {
+      const item = data[r.index];
+      const cellValue = Number(resolveField(item, valueField)) || 0;
+      cells.push({
+        x: r.x + padding / 2,
+        y: r.y + padding / 2,
+        width: Math.max(0, r.width - padding),
+        height: Math.max(0, r.height - padding),
+        color: resolveColor(item, r.index, 0, false),
+        label: String(resolveField(item, categoryField) ?? ""),
+        secondaryLabel: secondaryLabelField ? String(resolveField(item, secondaryLabelField) ?? "") : void 0,
+        value: cellValue,
+        index: r.index,
+        depth: 0,
+        nodeId: item?.id
+      });
+    }
+  }
+  return { cells, groupHeaders, groupBackgrounds, resolvedColorScale, resolvedColorRange, valueRange: resolvedValueRange, _squarifyRects: topLevelRects };
+}
+
+// src/series/treemap/geometry.labels.ts
+var LABEL_TIERS = [
+  { minArea: 25e3, minWidth: 100, minHeight: 60, fontSize: 16, secondaryFontSize: 12, showSecondary: true },
+  { minArea: 1e4, minWidth: 70, minHeight: 45, fontSize: 14, secondaryFontSize: 10, showSecondary: true },
+  { minArea: 4e3, minWidth: 50, minHeight: 35, fontSize: 12, secondaryFontSize: 9, showSecondary: true },
+  { minArea: 1500, minWidth: 38, minHeight: 26, fontSize: 10, secondaryFontSize: 8, showSecondary: true },
+  { minArea: 600, minWidth: 28, minHeight: 20, fontSize: 9, secondaryFontSize: 0, showSecondary: false },
+  { minArea: 250, minWidth: 22, minHeight: 14, fontSize: 8, secondaryFontSize: 0, showSecondary: false }
+];
+function getCellLabelInfo(cell, labelMinSize) {
+  const area = cell.width * cell.height;
+  const none = { fontSize: 0, secondaryFontSize: 0, showPrimary: false, showSecondary: false, cx: 0, cy: 0, primaryY: 0, secondaryY: 0 };
+  const minSize = labelMinSize ?? 30;
+  if (cell.width < minSize || cell.height < minSize) return none;
+  for (const tier of LABEL_TIERS) {
+    if (area >= tier.minArea && cell.width >= tier.minWidth && cell.height >= tier.minHeight) {
+      const primaryTextWidth = cell.label.length * CHAR_WIDTH_RATIO * tier.fontSize;
+      if (primaryTextWidth > cell.width - 8) {
+        continue;
+      }
+      let showSec = tier.showSecondary && !!cell.secondaryLabel;
+      if (showSec) {
+        const secTextWidth = (cell.secondaryLabel?.length ?? 0) * CHAR_WIDTH_RATIO * tier.secondaryFontSize;
+        if (secTextWidth > cell.width - 8) {
+          showSec = false;
+        }
+      }
+      const cx = cell.x + cell.width / 2;
+      const cy = cell.y + cell.height / 2;
+      return {
+        fontSize: tier.fontSize,
+        secondaryFontSize: tier.secondaryFontSize,
+        showPrimary: true,
+        showSecondary: showSec,
+        cx,
+        cy,
+        primaryY: showSec ? cy - tier.fontSize * 0.4 : cy,
+        secondaryY: cy + tier.fontSize * 0.6
+      };
+    }
+  }
+  return none;
+}
+function buildCellExtras(props, item, layout, idx) {
+  const seriesIndex = props.order ?? 0;
+  const seriesId = props.id ?? "";
+  const cell = layout.cells.find((c) => c.index === idx);
+  if (cell) {
+    return { value: cell.value, category: cell.label, seriesIndex, seriesId };
+  }
+  const valueField = props.valueField ?? FIELD_DEFAULTS.valueField;
+  const categoryField = props.categoryField ?? FIELD_DEFAULTS.categoryField;
+  const v = Number(resolveField(item, valueField));
+  const cat = resolveField(item, categoryField);
+  return {
+    value: Number.isFinite(v) ? v : null,
+    category: cat == null ? void 0 : String(cat),
+    seriesIndex,
+    seriesId
+  };
+}
+
+export { buildCellExtras, calculateTreemapLayout, getCellLabelInfo };

package/dist/chunk-VWF57TS3.mjs

@@ -0,0 +1,62 @@
+import { computeSliceRenderStates } from './chunk-53HW45JB.mjs';
+import { drawCanvasArc, CLIP_PIXEL_MARGIN } from './chunk-LVMDQ4OJ.mjs';
+import { isGradientColor, remapStopsForDonut, createCanvasGradientFromColor } from './chunk-O2X6FF45.mjs';
+import { withCanvasState } from './chunk-SSLTFJ3U.mjs';
+
+// src/series/pie/canvas/index.ts
+function renderPieCanvas(props, layout, ctx, context) {
+  const renderStates = computeSliceRenderStates(props, layout, context.theme);
+  const { slices: sliceStates, center, outerRadius, innerRadius, isFullCircle: fullCircle } = renderStates;
+  const borderJoinStyle = props.borderJoinStyle ?? "miter";
+  const borderAlign = props.borderAlign ?? "inner";
+  withCanvasState(ctx, () => {
+    for (const state of sliceStates) {
+      const { effectColor, effectBorderColor, effectBorderWidth, effectBorderDash, effectBorderDashOffset, opacity, offset, scale, arcConfig } = state;
+      const { dx, dy } = offset;
+      const cx = center.x + dx;
+      const cy = center.y + dy;
+      ctx.save();
+      if (scale !== 1) {
+        ctx.translate(cx, cy);
+        ctx.scale(scale, scale);
+        ctx.translate(-cx, -cy);
+      }
+      if (isGradientColor(effectColor)) {
+        const gradientColor = innerRadius > 0 && effectColor.radialGradient ? { ...effectColor, stops: remapStopsForDonut(effectColor.stops, innerRadius / outerRadius) } : effectColor;
+        ctx.fillStyle = createCanvasGradientFromColor(ctx, gradientColor, { x: cx, y: cy }, outerRadius);
+      } else {
+        ctx.fillStyle = effectColor;
+      }
+      ctx.globalAlpha = opacity;
+      drawCanvasArc(ctx, cx, cy, arcConfig, fullCircle);
+      ctx.fill();
+      if (effectBorderWidth > 0 && effectBorderColor !== "transparent") {
+        ctx.strokeStyle = typeof effectBorderColor === "string" ? effectBorderColor : context.theme.borderColor;
+        ctx.lineJoin = borderJoinStyle;
+        if (effectBorderDash && effectBorderDash.length > 0) {
+          ctx.setLineDash(effectBorderDash);
+          ctx.lineDashOffset = effectBorderDashOffset;
+        } else {
+          ctx.setLineDash([]);
+        }
+        if (borderAlign === "inner") {
+          ctx.save();
+          const _angleDeltaCanvas = arcConfig.outerRadius > 0 ? CLIP_PIXEL_MARGIN / arcConfig.outerRadius * (180 / Math.PI) : 0;
+          drawCanvasArc(ctx, cx, cy, { ...arcConfig, rotation: arcConfig.rotation - _angleDeltaCanvas, endAngle: arcConfig.endAngle + _angleDeltaCanvas }, fullCircle);
+          ctx.clip();
+          ctx.lineWidth = effectBorderWidth * 2;
+          drawCanvasArc(ctx, cx, cy, arcConfig, fullCircle);
+          ctx.stroke();
+          ctx.restore();
+        } else {
+          ctx.lineWidth = effectBorderWidth;
+          drawCanvasArc(ctx, cx, cy, arcConfig, fullCircle);
+          ctx.stroke();
+        }
+      }
+      ctx.restore();
+    }
+  });
+}
+
+export { renderPieCanvas };