@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-ARB5T6MP.mjs

@@ -0,0 +1,326 @@
+import { computeSliceGeometry } from './chunk-4C6EVJ54.mjs';
+import { drawCanvasArc, CLIP_PIXEL_MARGIN } from './chunk-LVMDQ4OJ.mjs';
+import { calculateRadiusAndCenter } from './chunk-NPDZLYIF.mjs';
+import { computeSliceHoverEffects } from './chunk-BZN2QHGP.mjs';
+import { DEFAULT_FALLBACK_COLOR } from './chunk-NKUYIWAP.mjs';
+import { defaultLightTheme, isGradientColor, remapStopsForDonut, createCanvasGradientFromColor, resolveAccessor, makeItemContext, resolveDash, getColorValue, getColor } from './chunk-O2X6FF45.mjs';
+import { withCanvasState } from './chunk-SSLTFJ3U.mjs';
+
+// src/circular/canvas.utils.ts
+function renderCanvasSlices(ctx, frame, hoverConfig, theme) {
+  const { slices, center, fullCircle, hoverState } = frame;
+  const hasAnyHover = hoverState.index !== null;
+  for (const slice of slices) {
+    const angle = slice.endAngle - slice.rotation;
+    if (angle < 1e-3) continue;
+    const geo = computeSliceGeometry(slice, slice.rotation, frame);
+    withCanvasState(ctx, () => {
+      const arcConfig = {
+        rotation: geo.renderRotation,
+        endAngle: geo.renderRotation + geo.renderAngle,
+        outerRadius: geo.sliceOuterRadius,
+        innerRadius: geo.sliceInnerRadius,
+        borderRadius: slice.borderRadius
+      };
+      const cx = center.x + geo.offsetX;
+      const cy = center.y + geo.offsetY;
+      if (geo.scale !== 1) {
+        ctx.translate(cx, cy);
+        ctx.scale(geo.scale, geo.scale);
+        ctx.translate(-cx, -cy);
+      }
+      const { fillColor, opacity } = computeSliceHoverEffects(slice.color ?? DEFAULT_FALLBACK_COLOR, slice.borderColor ?? "transparent", slice.borderStrokeWidth ?? 0, geo.isHovered, hasAnyHover, hoverConfig, theme);
+      if (opacity < 1) {
+        ctx.globalAlpha = opacity;
+      }
+      drawCanvasArc(ctx, cx, cy, arcConfig, fullCircle);
+      const cv = slice.colorValue;
+      if (cv && isGradientColor(cv)) {
+        const gradientColor = geo.sliceInnerRadius > 0 && cv.radialGradient ? { ...cv, stops: remapStopsForDonut(cv.stops, geo.sliceInnerRadius / geo.sliceOuterRadius) } : cv;
+        ctx.fillStyle = createCanvasGradientFromColor(ctx, gradientColor, { x: cx, y: cy }, geo.sliceOuterRadius);
+      } else {
+        ctx.fillStyle = geo.isHovered && slice.hoverColor ? slice.hoverColor : fillColor;
+      }
+      ctx.fill();
+    });
+  }
+  const useInnerBorder = frame.borderAlign === "inner";
+  for (const slice of slices) {
+    const angle = slice.endAngle - slice.rotation;
+    if (angle < 1e-3) continue;
+    const baseBorderWidth = slice.borderStrokeWidth ?? 0;
+    const geo = computeSliceGeometry(slice, slice.rotation, frame);
+    const {
+      borderStrokeWidth,
+      borderColor: computedBorderColor,
+      borderDash: hoverBorderDash,
+      opacity
+    } = computeSliceHoverEffects(slice.color ?? DEFAULT_FALLBACK_COLOR, slice.borderColor ?? "transparent", baseBorderWidth, geo.isHovered, hasAnyHover, hoverConfig, theme);
+    const borderColor = geo.isHovered && slice.hoverBorderColor ? slice.hoverBorderColor : computedBorderColor;
+    if (borderStrokeWidth <= 0 || borderColor === "transparent") continue;
+    withCanvasState(ctx, () => {
+      const arcConfig = {
+        rotation: geo.renderRotation,
+        endAngle: geo.renderRotation + geo.renderAngle,
+        outerRadius: geo.sliceOuterRadius,
+        innerRadius: geo.sliceInnerRadius,
+        borderRadius: slice.borderRadius
+      };
+      const cx = center.x + geo.offsetX;
+      const cy = center.y + geo.offsetY;
+      if (opacity < 1) {
+        ctx.globalAlpha = opacity;
+      }
+      if (borderStrokeWidth > 0 && borderColor !== "transparent") {
+        ctx.strokeStyle = borderColor;
+        ctx.lineJoin = useInnerBorder ? "miter" : "round";
+        const activeDash = hoverBorderDash ?? slice.borderDash;
+        if (activeDash && activeDash.length > 0) {
+          ctx.setLineDash(activeDash);
+          ctx.lineDashOffset = slice.borderDashOffset ?? 0;
+        }
+        if (useInnerBorder) {
+          const PIXEL_MARGIN = CLIP_PIXEL_MARGIN;
+          const angleDelta = arcConfig.outerRadius > 0 ? PIXEL_MARGIN / arcConfig.outerRadius * (180 / Math.PI) : 0;
+          const expandedArc = {
+            ...arcConfig,
+            rotation: arcConfig.rotation - angleDelta,
+            endAngle: arcConfig.endAngle + angleDelta
+          };
+          drawCanvasArc(ctx, cx, cy, expandedArc, fullCircle);
+          ctx.clip();
+          ctx.lineWidth = borderStrokeWidth * 2;
+        } else {
+          ctx.lineWidth = borderStrokeWidth;
+        }
+        drawCanvasArc(ctx, cx, cy, arcConfig, fullCircle);
+        ctx.stroke();
+      }
+    });
+  }
+}
+function buildHitTestStates(slices) {
+  const statesByDataset = /* @__PURE__ */ new Map();
+  for (const slice of slices) {
+    const datasetId = String(slice.datasetIndex);
+    const angle = slice.endAngle - slice.rotation;
+    if (!statesByDataset.has(datasetId)) {
+      statesByDataset.set(datasetId, []);
+    }
+    statesByDataset.get(datasetId).push({
+      originalIndex: slice.originalIndex,
+      rotation: slice.rotation,
+      endAngle: slice.endAngle,
+      angle,
+      visible: angle > 0.5,
+      value: slice.value,
+      percentage: slice.percentage,
+      color: slice.color ?? ""
+    });
+  }
+  return statesByDataset;
+}
+
+// src/circular/pie.layout.ts
+function buildPieVisibilityMap(data, datasetId, isDatasetVisible, isItemVisible) {
+  const actualVisibility = /* @__PURE__ */ new Map();
+  data.forEach((_, i) => {
+    actualVisibility.set(i, isDatasetVisible(datasetId) && isItemVisible(datasetId, i));
+  });
+  return actualVisibility;
+}
+function applyRingLayout(chartArea, ringLayout, props) {
+  if (!ringLayout || ringLayout.outerRadiusRatio <= 0) {
+    return {
+      effectiveChartArea: chartArea,
+      effectiveInnerRadius: props.innerRadius ?? 0
+    };
+  }
+  const { center, radius } = calculateRadiusAndCenter(chartArea, void 0, {
+    rotation: props.startAngle ?? -90,
+    sweepAngle: props.sweepAngle ?? 360
+  });
+  const ringOuterRadius = radius * ringLayout.outerRadiusRatio;
+  const ringInnerRadius = radius * ringLayout.innerRadiusRatio;
+  return {
+    effectiveChartArea: {
+      x: center.x - ringOuterRadius,
+      y: center.y - ringOuterRadius,
+      width: ringOuterRadius * 2,
+      height: ringOuterRadius * 2
+    },
+    effectiveInnerRadius: ringInnerRadius / ringOuterRadius
+  };
+}
+function computeSliceRadiusRatios(data, sliceRadiusValue, actualVisibility) {
+  if (!sliceRadiusValue) return null;
+  const values = [];
+  let maxValue = 0;
+  data.forEach((item, i) => {
+    const raw = resolveAccessor(sliceRadiusValue, makeItemContext(item, i));
+    const val = Math.max(0, Number(raw) || 0);
+    values.push(val);
+    if ((actualVisibility.get(i) ?? true) && val > maxValue) {
+      maxValue = val;
+    }
+  });
+  return values.map((v) => maxValue > 0 ? v / maxValue : 1);
+}
+function buildSliceStyleData(props, item, index, targetAngle, radiusRatio, theme = defaultLightTheme, value, category, seriesIndex = 0, seriesId = "") {
+  const ctx = makeItemContext(item, index, { value, category, seriesIndex, seriesId });
+  return {
+    // Pass the active theme so default (non-user-colored) slices resolve from the
+    // real palette. Without it, getColor falls back to defaultLightTheme and canvas
+    // slices stay on the light palette in dark mode (SVG escapes via the CSS class).
+    // The base-color accessor gets the SAME full context (value + category + series
+    // identity) as the border/hover accessors below, so `color: (ctx) => ctx.category …`
+    // resolves identically to `hoverColor: (ctx) => ctx.category …`.
+    color: getColor(props, index, item, theme, { value, category, seriesIndex, seriesId }),
+    colorValue: getColorValue(props, index, item, theme, { value, category, seriesIndex, seriesId }),
+    borderStrokeWidth: resolveAccessor(props.borderStrokeWidth, ctx),
+    borderColor: resolveAccessor(props.borderColor, ctx),
+    borderRadius: resolveAccessor(props.borderRadius, ctx),
+    borderDash: resolveDash(props.borderDash, ctx),
+    borderDashOffset: props.borderDashOffset,
+    spacing: props.spacing,
+    targetAngle,
+    radiusRatio,
+    hoverColor: resolveAccessor(props.hoverColor, ctx) ?? void 0,
+    hoverBorderColor: resolveAccessor(props.hoverBorderColor, ctx) ?? void 0
+  };
+}
+function buildRingTarget(chartArea, datasetIndex, slices, ringLayouts, datasetId, props, fallbackInnerRadius, fallbackOuterRadius) {
+  const { radius: layoutRadius } = calculateRadiusAndCenter(chartArea, void 0, {
+    rotation: props.startAngle ?? -90,
+    sweepAngle: props.sweepAngle ?? 360
+  });
+  const rl = ringLayouts.find((r) => r.datasetId === datasetId);
+  return {
+    datasetIndex,
+    slices,
+    innerRadius: rl ? layoutRadius * rl.innerRadiusRatio : fallbackInnerRadius,
+    outerRadius: rl ? layoutRadius * rl.outerRadiusRatio : fallbackOuterRadius
+  };
+}
+var DEG_TO_RAD = Math.PI / 180;
+function buildPieSliceContentItems(entries, lastRenderedSlices, ringRadii, animationLayout, hiddenItems, fontFamily, theme = defaultLightTheme) {
+  const result = [];
+  for (const entry of entries) {
+    const props = entry.props;
+    if (!props.renderContent || !props.data) continue;
+    const renderFn = props.renderContent;
+    const datasetIndex = entry.order;
+    const datasetId = entry.id;
+    const isItemVisible = (idx) => !(hiddenItems.get(datasetId)?.has(idx) ?? false);
+    let total = 0;
+    const values = [];
+    props.data.forEach((item, i) => {
+      const value = Number(resolveAccessor(props.valueField, makeItemContext(item, i))) || 0;
+      values.push(value);
+      if (isItemVisible(i)) total += value;
+    });
+    props.data.forEach((item, i) => {
+      if (!isItemVisible(i)) return;
+      const value = values[i];
+      const arcCtr = animationLayout?.center ?? { x: 0, y: 0 };
+      const sliceState = lastRenderedSlices.find((s) => s.datasetIndex === datasetIndex && s.originalIndex === i);
+      const percentage = sliceState?.percentage ?? (total > 0 ? value / total * 100 : 0);
+      const radii = ringRadii.get(String(datasetIndex));
+      const sliceOuter = radii?.outer ?? animationLayout?.outerRadius ?? 0;
+      const sliceInner = radii?.inner ?? animationLayout?.innerRadius ?? 0;
+      const midRadius = (sliceOuter + sliceInner) / 2;
+      let contentX = arcCtr.x;
+      let contentY = arcCtr.y;
+      let midAngle = 0;
+      if (sliceState) {
+        const span = sliceState.endAngle - sliceState.rotation;
+        midAngle = sliceState.rotation + span / 2;
+        contentX = arcCtr.x + Math.cos(midAngle * DEG_TO_RAD) * midRadius;
+        contentY = arcCtr.y + Math.sin(midAngle * DEG_TO_RAD) * midRadius;
+      }
+      result.push({
+        key: `${datasetIndex}-${i}`,
+        datasetKey: `${datasetId}-${i}-content`,
+        datasetId,
+        index: i,
+        contentX,
+        contentY,
+        renderFn,
+        context: {
+          index: i,
+          data: item,
+          value,
+          percentage,
+          label: String(resolveAccessor(props.categoryField, makeItemContext(item, i)) ?? ""),
+          color: getColor(props, i, item, theme, { value }),
+          center: arcCtr,
+          x: contentX,
+          y: contentY,
+          angle: midAngle,
+          isHovered: false,
+          isVisible: true,
+          fontFamily: fontFamily ?? "sans-serif"
+        }
+      });
+    });
+  }
+  return result;
+}
+
+// src/circular/ring.utils.ts
+function calculateRingLayouts(datasets, isDatasetVisible, isItemVisible, baseInnerRadius = 0, gap = 0) {
+  const stackedDatasets = Array.from(datasets.entries()).filter(([, ds]) => ds.props.stackId !== void 0).map(([id, ds]) => {
+    const props = ds.props;
+    const dataLength = props.data?.length ?? 0;
+    let hasVisibleItem = false;
+    if (isDatasetVisible(id) && dataLength > 0) {
+      for (let i = 0; i < dataLength; i++) {
+        if (isItemVisible(id, i)) {
+          hasVisibleItem = true;
+          break;
+        }
+      }
+    }
+    return {
+      id,
+      order: props.order ?? ds.order,
+      visible: hasVisibleItem,
+      innerRadius: props.innerRadius ?? 0
+    };
+  }).sort((a, b) => a.order - b.order);
+  if (stackedDatasets.length === 0) return [];
+  const visibleRings = stackedDatasets.filter((r) => r.visible);
+  if (visibleRings.length === 0) return [];
+  const specifiedInnerRadii = stackedDatasets.map((r) => r.innerRadius).filter((r) => r > 0);
+  if (specifiedInnerRadii.length > 0 && baseInnerRadius === 0) {
+    baseInnerRadius = Math.min(...specifiedInnerRadii);
+  }
+  const n = visibleRings.length;
+  const totalSpace = 1 - baseInnerRadius;
+  const rawTotalGap = gap * Math.max(0, n - 1);
+  const effectiveTotalGap = Math.min(rawTotalGap, totalSpace * 0.8);
+  const effectiveGap = n > 1 ? effectiveTotalGap / (n - 1) : 0;
+  const availableRadius = totalSpace - effectiveTotalGap;
+  const ringWidth = Math.max(0, availableRadius / n);
+  return stackedDatasets.map((r) => {
+    const visibleIndex = visibleRings.findIndex((vr) => vr.id === r.id);
+    if (visibleIndex === -1) {
+      return {
+        datasetId: r.id,
+        ringIndex: r.order,
+        outerRadiusRatio: 0,
+        innerRadiusRatio: 0
+      };
+    }
+    const outerRatio = 1 - visibleIndex * (ringWidth + effectiveGap);
+    const innerRatio = Math.max(baseInnerRadius, outerRatio - ringWidth);
+    return {
+      datasetId: r.id,
+      ringIndex: r.order,
+      outerRadiusRatio: outerRatio,
+      innerRadiusRatio: innerRatio
+    };
+  });
+}
+
+export { applyRingLayout, buildHitTestStates, buildPieSliceContentItems, buildPieVisibilityMap, buildRingTarget, buildSliceStyleData, calculateRingLayouts, computeSliceRadiusRatios, renderCanvasSlices };