@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/donut-chart/donut-chart.js

@@ -0,0 +1,639 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useId, useMemo, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { DECORATIVE } from "../core/a11y.js";
+import { ChartBreadcrumb } from "../core/breadcrumb.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { ChartDataTable } from "../core/data-table.js";
+import { formatPercent, resolveFormat } from "../core/format.js";
+import { ChartLegend } from "../core/legend.js";
+import {
+  EASE_OUT,
+  easeOutCubic,
+  fadeIn,
+  useEntryAnimation,
+  useReducedMotion
+} from "../core/motion.js";
+import { monochromeByValue, seriesColor } from "../core/palette.js";
+import { arcPath, degToRad, polarPoint, sliceAngles, spreadLabels, TAU } from "../core/polar.js";
+import { ChartTooltip } from "../core/tooltip.js";
+import { resolveLabels } from "../core/types.js";
+import { useIndexNavigation } from "../core/use-index-navigation.js";
+import { useSeriesState } from "../core/use-series-state.js";
+import { fitCenterText } from "./center-fit.js";
+function labelMode(value) {
+  if (!value) return null;
+  return value === true ? "both" : value;
+}
+function truncate(text, maxChars) {
+  if (text.length <= maxChars) return text;
+  return `${text.slice(0, Math.max(1, maxChars - 1)).trimEnd()}\u2026`;
+}
+function DonutChart({
+  title,
+  description,
+  data,
+  variant = "donut",
+  semi = false,
+  innerRadius = 0.62,
+  cornerRadius = 6,
+  gap = 3,
+  explode = 8,
+  startAngle = 0,
+  monochrome = false,
+  fill = "solid",
+  drilldown = true,
+  rootLabel,
+  breadcrumbLabel = "Drill-down path",
+  height = 300,
+  aspectRatio,
+  valueFormat,
+  centerLabel,
+  centerValue,
+  outsideLabels = false,
+  legend,
+  tooltip = true,
+  loading = false,
+  animate = true,
+  initialHidden,
+  onSliceClick,
+  labels: labelsProp,
+  className
+}) {
+  const labels = resolveLabels(labelsProp);
+  const state = useSeriesState(initialHidden);
+  const [trail, setTrail] = useState([]);
+  const drillable = drilldown && data.some((datum) => datum.children?.length);
+  const level = useMemo(() => {
+    const crumbs = [{ id: "", name: rootLabel ?? title }];
+    let current = data;
+    let base;
+    if (drillable) {
+      for (const id of trail) {
+        const index = current.findIndex((datum) => datum.id === id);
+        const next = current[index];
+        if (!next?.children?.length) break;
+        crumbs.push({ id, name: next.name });
+        base = seriesColor(index, next.color);
+        current = next.children;
+      }
+    }
+    return { data: current, crumbs, base };
+  }, [data, trail, drillable, rootLabel, title]);
+  const resolved = useMemo(() => {
+    const hue = typeof monochrome === "string" ? monochrome : level.base;
+    const shades = monochrome || level.base ? monochromeByValue(
+      level.data.map((datum) => Math.max(0, datum.value || 0)),
+      hue
+    ) : null;
+    return level.data.map((datum, index) => ({
+      datum,
+      color: datum.color ?? shades?.[index] ?? seriesColor(index),
+      format: resolveFormat(datum.format ?? valueFormat)
+    }));
+  }, [level, valueFormat, monochrome]);
+  const openSlice = (datum) => {
+    if (drillable && datum.children?.length)
+      setTrail([...level.crumbs.slice(1).map((c) => c.id), datum.id]);
+    onSliceClick?.(datum);
+  };
+  const goTo = (id) => {
+    const at = level.crumbs.findIndex((crumb) => crumb.id === id);
+    setTrail(level.crumbs.slice(1, at + 1).map((crumb) => crumb.id));
+  };
+  const empty = resolved.every((item) => !(item.datum.value > 0));
+  const legendPlacement = legend === false ? null : legend === true || legend == null ? "bottom" : legend;
+  const legendItems = resolved.map((item) => ({
+    id: item.datum.id,
+    name: item.datum.name,
+    color: item.color,
+    shape: "dot",
+    hidden: state.isHidden(item.datum.id)
+  }));
+  const total = resolved.reduce((sum, item) => sum + Math.max(0, item.datum.value || 0), 0);
+  const table = /* @__PURE__ */ jsx(
+    ChartDataTable,
+    {
+      caption: description ? `${title}. ${description}` : title,
+      categoryHeader: labels.category,
+      categories: resolved.map((item) => item.datum.name),
+      columns: [
+        {
+          id: "value",
+          name: labels.value,
+          values: resolved.map((item) => item.format(item.datum.value))
+        },
+        {
+          id: "share",
+          name: labels.share,
+          values: resolved.map(
+            (item) => formatPercent(total > 0 ? Math.max(0, item.datum.value) / total : 0, { decimals: 1 })
+          )
+        }
+      ]
+    }
+  );
+  const frame = /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height,
+      aspectRatio,
+      legendAside: true,
+      labels,
+      loading,
+      empty,
+      skeleton: "ring",
+      legend: legendPlacement ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          align: "center",
+          items: legendItems,
+          onToggle: state.toggle,
+          onHighlight: state.setHighlighted
+        }
+      ) : void 0,
+      legendPosition: legendPlacement ?? "bottom",
+      table,
+      className: drillable ? void 0 : className,
+      children: (width, measuredHeight) => /* @__PURE__ */ jsx(
+        DonutPlot,
+        {
+          width,
+          height: measuredHeight,
+          title,
+          items: resolved,
+          state,
+          variant,
+          semi,
+          innerRatio: innerRadius,
+          cornerRadius,
+          gap,
+          explode,
+          startAngle,
+          fill,
+          centerLabel: centerLabel ?? labels.total,
+          centerValue,
+          outside: labelMode(outsideLabels),
+          tooltip,
+          animate,
+          labels,
+          onSliceClick: drillable || onSliceClick ? openSlice : void 0,
+          onUp: drillable && level.crumbs.length > 1 ? () => goTo(level.crumbs[level.crumbs.length - 2]?.id ?? "") : void 0,
+          valueFormat
+        }
+      )
+    }
+  );
+  if (!drillable) return frame;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-2", height === "fill" && "h-full"), children: [
+    /* @__PURE__ */ jsx(ChartBreadcrumb, { items: level.crumbs, onSelect: goTo, label: breadcrumbLabel }),
+    /* @__PURE__ */ jsx("div", { className: cn("min-w-0", height === "fill" && "min-h-0 flex-1"), children: frame })
+  ] });
+}
+const LABEL_ELBOW = 14;
+const LABEL_RUN = 30;
+function DonutPlot({
+  width,
+  height,
+  title,
+  items,
+  state,
+  variant,
+  semi,
+  innerRatio,
+  cornerRadius,
+  gap,
+  explode,
+  startAngle,
+  fill,
+  centerLabel,
+  centerValue,
+  outside: outsideProp,
+  tooltip,
+  animate,
+  labels,
+  onSliceClick,
+  onUp,
+  valueFormat
+}) {
+  const uid = useId().replace(/:/g, "");
+  const shown = useTweenedValues(items, !animate);
+  const outside = width < 440 ? null : outsideProp;
+  const svgRef = useRef(null);
+  const format = useMemo(() => resolveFormat(valueFormat), [valueFormat]);
+  const geometry = useMemo(() => {
+    const visible2 = items.map((item, index) => ({ item, index })).filter(({ item, index }) => !state.isHidden(item.datum.id) && (shown[index] ?? 0) > 0);
+    const sum2 = visible2.reduce((acc, { index }) => acc + (shown[index] ?? 0), 0);
+    const edge2 = explode + 6;
+    const labelSpace = outside ? Math.min(170, Math.max(96, width * 0.28)) : 0;
+    const fitWidth = width / 2 - labelSpace - edge2;
+    const fitHeight = semi ? height - edge2 * 2 - 4 : height / 2 - edge2 - (outside ? 6 : 0);
+    const radius2 = Math.max(24, Math.min(fitWidth, fitHeight));
+    const cx2 = width / 2;
+    const cy2 = semi ? (height + radius2) / 2 : height / 2;
+    const inner2 = variant === "pie" ? 0 : radius2 * Math.min(0.9, Math.max(0.2, innerRatio));
+    const from = semi ? -Math.PI / 2 : degToRad(startAngle);
+    const to = semi ? Math.PI / 2 : from + TAU;
+    const pad = gap / Math.max(1, (inner2 + radius2) / (variant === "pie" ? 1.6 : 2));
+    const slices2 = sliceAngles(
+      items.map(
+        (_, index) => visible2.some((entry) => entry.index === index) ? shown[index] ?? 0 : 0
+      ),
+      { startAngle: from, endAngle: to, padAngle: pad }
+    );
+    return { visible: visible2.map((entry) => entry.index), sum: sum2, radius: radius2, inner: inner2, cx: cx2, cy: cy2, slices: slices2 };
+  }, [
+    items,
+    shown,
+    state,
+    width,
+    height,
+    semi,
+    outside,
+    explode,
+    variant,
+    innerRatio,
+    gap,
+    startAngle
+  ]);
+  const { visible, sum, radius, inner, cx, cy, slices } = geometry;
+  const nav = useIndexNavigation(visible.length, { wrap: true });
+  const activeIndex = nav.active != null ? visible[nav.active] ?? null : null;
+  const legendIndex = state.highlighted ? items.findIndex((item) => item.datum.id === state.highlighted) : -1;
+  const focusIndex = activeIndex ?? (legendIndex >= 0 ? legendIndex : null);
+  const paths = useMemo(
+    () => slices.map(
+      (slice) => slice.fraction > 0 ? arcPath({
+        cx,
+        cy,
+        innerRadius: inner,
+        outerRadius: radius,
+        startAngle: slice.start,
+        endAngle: slice.end,
+        cornerRadius
+      }) : ""
+    ),
+    [slices, cx, cy, inner, radius, cornerRadius]
+  );
+  const outsideLabels = useMemo(() => {
+    if (!outside) return [];
+    const lines = outside === "both" ? 2 : 1;
+    const boxHeight = lines === 2 ? 30 : 15;
+    const sides = { "1": [], "-1": [] };
+    for (const index of visible) {
+      const slice = slices[index];
+      const item = items[index];
+      if (!slice || !item || slice.fraction < 0.02) continue;
+      const side = Math.sin(slice.mid) >= 0 ? 1 : -1;
+      const anchor2 = polarPoint(cx, cy, radius + 2, slice.mid);
+      const elbow = polarPoint(cx, cy, radius + LABEL_ELBOW, slice.mid);
+      sides[String(side)].push({
+        id: item.datum.id,
+        side,
+        anchor: anchor2,
+        elbow,
+        x: cx + side * (radius + LABEL_RUN),
+        y: elbow.y,
+        name: item.datum.name,
+        percent: formatPercent(slice.fraction, { decimals: 0 }),
+        lines
+      });
+    }
+    const out = [];
+    for (const group of Object.values(sides)) {
+      const ys = spreadLabels(
+        group.map((entry) => ({ y: entry.y, height: boxHeight })),
+        4,
+        height - 4,
+        3
+      );
+      group.forEach((entry, i) => {
+        out.push({ ...entry, y: ys[i] ?? entry.y });
+      });
+    }
+    return out;
+  }, [outside, visible, slices, items, cx, cy, radius, height]);
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      root.querySelectorAll("[data-slice]").forEach((node, i) => {
+        node.animate(
+          [
+            { opacity: 0, transform: "rotate(-24deg) scale(.88)" },
+            { opacity: 1, transform: "rotate(0deg) scale(1)" }
+          ],
+          { duration: 760, delay: i * 70, easing: EASE_OUT, fill: "backwards" }
+        );
+      });
+      root.querySelectorAll("[data-fade]").forEach((node) => {
+        fadeIn(node, 420, 420);
+      });
+    },
+    { disabled: !animate }
+  );
+  const activeItem = focusIndex != null ? items[focusIndex] : void 0;
+  const activeSlice = focusIndex != null ? slices[focusIndex] : void 0;
+  const showCenter = variant === "donut" && inner > 18;
+  const centerMain = activeItem ? activeItem.format(activeItem.datum.value) : centerValue ?? format(sum);
+  const centerCaption = activeItem ? `${activeItem.datum.name}${activeSlice ? ` \xB7 ${formatPercent(activeSlice.fraction, { decimals: 0 })}` : ""}` : centerLabel;
+  const fit = fitCenterText(inner, centerMain.length, centerCaption.length, semi);
+  const { valueSize, captionSize, block } = fit;
+  const top = semi ? cy - 6 - block : cy - block / 2;
+  const tipItem = activeIndex != null ? items[activeIndex] : null;
+  const tipSlice = activeIndex != null ? slices[activeIndex] : null;
+  const edge = tipSlice ? polarPoint(cx, cy, radius + explode + 6, tipSlice.mid) : null;
+  const anchor = edge ? { x: edge.x, y: Math.max(20, Math.min(height - 20, edge.y + (edge.y <= cy ? -44 : 44))) } : null;
+  const tipSide = anchor && anchor.x < cx ? "left" : "right";
+  const rows = tipItem && tipSlice ? [
+    {
+      id: tipItem.datum.id,
+      name: tipItem.datum.name,
+      value: tipItem.format(tipItem.datum.value),
+      color: tipItem.color,
+      shape: "dot",
+      note: formatPercent(tipSlice.fraction, { decimals: 1 })
+    }
+  ] : [];
+  const valueText = activeItem ? `${activeItem.datum.name}: ${activeItem.format(activeItem.datum.value)}, ${formatPercent(
+    activeSlice?.fraction ?? 0,
+    { decimals: 1 }
+  )}` : title;
+  return /* @__PURE__ */ jsxs("div", { ref: nav.ref, className: "relative", style: { width, height }, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": title,
+        width,
+        height,
+        className: "block overflow-visible",
+        children: [
+          fill !== "solid" ? /* @__PURE__ */ jsx("defs", { children: items.map(
+            (item, index) => fill === "gradient" ? /* @__PURE__ */ jsxs(
+              "radialGradient",
+              {
+                id: `${uid}-${index}`,
+                gradientUnits: "userSpaceOnUse",
+                cx,
+                cy,
+                r: Math.max(1, radius),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: Math.min(0.95, inner / Math.max(1, radius)),
+                      style: { stopColor: `color-mix(in oklab, ${item.color} 42%, var(--surface))` }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("stop", { offset: 1, style: { stopColor: item.color } })
+                ]
+              },
+              item.datum.id
+            ) : /* @__PURE__ */ jsx(
+              SlicePattern,
+              {
+                id: `${uid}-${index}`,
+                kind: index,
+                color: item.color
+              },
+              item.datum.id
+            )
+          ) }) : null,
+          slices.map((slice, index) => {
+            const item = items[index];
+            const path = paths[index];
+            if (!item || !path) return null;
+            const position = visible.indexOf(index);
+            const focused = focusIndex === index;
+            const dimmed = focusIndex != null && !focused;
+            const shift = focused ? polarPoint(0, 0, explode, slice.mid) : { x: 0, y: 0 };
+            return /* @__PURE__ */ jsx(
+              SliceMark,
+              {
+                d: path,
+                paint: fill === "solid" ? item.color : `url(#${uid}-${index})`,
+                dimmed,
+                dx: shift.x,
+                dy: shift.y,
+                originX: cx,
+                originY: cy,
+                clickable: onSliceClick != null,
+                onEnter: (event) => nav.hover(position, event),
+                onLeave: nav.leave,
+                onClick: onSliceClick ? () => onSliceClick(item.datum) : void 0
+              },
+              item.datum.id
+            );
+          }),
+          outsideLabels.map((label) => {
+            const dimmed = focusIndex != null && items[focusIndex]?.datum.id !== label.id;
+            const avail = Math.max(24, (label.side > 0 ? width - label.x : label.x) - 6);
+            const maxChars = Math.floor(avail / (11 * 0.58));
+            const end = { x: label.x - label.side * 4, y: label.y };
+            return /* @__PURE__ */ jsxs(
+              "g",
+              {
+                "data-fade": "",
+                className: "motion-safe:transition-opacity motion-safe:duration-150",
+                style: { opacity: dimmed ? 0.35 : 1 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "polyline",
+                    {
+                      fill: "none",
+                      strokeWidth: 1,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      points: `${label.anchor.x},${label.anchor.y} ${label.elbow.x},${label.elbow.y} ${end.x},${end.y}`,
+                      style: { stroke: "var(--ink-3)", strokeOpacity: 0.55 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: label.x,
+                      y: label.y,
+                      textAnchor: label.side > 0 ? "start" : "end",
+                      className: "text-[11px]",
+                      children: label.lines === 2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("tspan", { x: label.x, dy: "-0.25em", className: "fill-ink-2 font-medium", children: truncate(label.name, maxChars) }),
+                        /* @__PURE__ */ jsx("tspan", { x: label.x, dy: "1.35em", className: "fill-ink font-bold tabular-nums", children: label.percent })
+                      ] }) : /* @__PURE__ */ jsx(
+                        "tspan",
+                        {
+                          dy: "0.34em",
+                          className: cn(
+                            "tabular-nums",
+                            outside === "percent" ? "fill-ink font-bold" : "fill-ink-2 font-medium"
+                          ),
+                          children: outside === "percent" ? label.percent : truncate(label.name, maxChars)
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              label.id
+            );
+          }),
+          showCenter ? /* @__PURE__ */ jsxs("g", { "data-fade": "", ...DECORATIVE, textAnchor: "middle", className: "pointer-events-none", children: [
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cx,
+                y: top + valueSize * 0.82,
+                className: "fill-ink font-bold tabular-nums",
+                style: { fontSize: valueSize },
+                children: centerMain
+              }
+            ),
+            fit.captionChars > 0 ? /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cx,
+                y: top + valueSize + 4 + captionSize * 0.82,
+                className: "fill-ink-3 font-semibold",
+                style: { fontSize: captionSize },
+                children: truncate(centerCaption, fit.captionChars)
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "slider",
+        "aria-label": labels.explore,
+        "aria-valuemin": 1,
+        "aria-valuemax": Math.max(1, visible.length),
+        "aria-valuenow": (nav.active ?? 0) + 1,
+        "aria-valuetext": valueText,
+        tabIndex: 0,
+        ...nav.sliderProps,
+        onKeyDown: (event) => {
+          const picked = nav.active != null ? visible[nav.active] : void 0;
+          const datum = picked != null ? items[picked]?.datum : void 0;
+          if ((event.key === "Enter" || event.key === " ") && datum && onSliceClick) {
+            event.preventDefault();
+            onSliceClick(datum);
+          } else if ((event.key === "Escape" || event.key === "Backspace") && onUp) {
+            event.preventDefault();
+            onUp();
+          } else nav.sliderProps.onKeyDown(event);
+        },
+        className: "pointer-events-none absolute inset-0 rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2"
+      }
+    ),
+    tooltip && anchor && rows.length ? /* @__PURE__ */ jsx(ChartTooltip, { x: anchor.x, y: anchor.y, containerWidth: width, rows, side: tipSide }) : null
+  ] });
+}
+const SliceMark = memo(function SliceMark2({
+  d,
+  paint,
+  dimmed,
+  dx,
+  dy,
+  originX,
+  originY,
+  clickable,
+  onEnter,
+  onLeave,
+  onClick
+}) {
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: pointer hover only; keyboard goes through the chart slider.
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-slice": "",
+        d,
+        onPointerEnter: onEnter,
+        onPointerMove: onEnter,
+        onPointerLeave: onLeave,
+        onPointerUp: onClick,
+        onClick: (event) => {
+          if (event.detail === 0) onClick?.();
+        },
+        className: cn(
+          "motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-out",
+          clickable && "cursor-pointer"
+        ),
+        style: {
+          fill: paint,
+          opacity: dimmed ? 0.4 : 1,
+          transform: `translate(${Math.round(dx * 100) / 100}px, ${Math.round(dy * 100) / 100}px)`,
+          transformOrigin: `${originX}px ${originY}px`
+        }
+      }
+    )
+  );
+});
+const PATTERN_KINDS = 5;
+function SlicePattern({ id, kind, color }) {
+  const motif = { fill: "var(--surface)", fillOpacity: 0.5 };
+  const line = { stroke: "var(--surface)", strokeOpacity: 0.5 };
+  const which = kind % PATTERN_KINDS;
+  return /* @__PURE__ */ jsxs(
+    "pattern",
+    {
+      id,
+      patternUnits: "userSpaceOnUse",
+      width: 8,
+      height: 8,
+      patternTransform: which === 0 || which === 3 ? "rotate(45)" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: 8, height: 8, style: { fill: color } }),
+        which === 0 ? /* @__PURE__ */ jsx("rect", { width: 8, height: 3, style: motif }) : null,
+        which === 1 ? /* @__PURE__ */ jsx("circle", { cx: 4, cy: 4, r: 1.6, style: motif }) : null,
+        which === 2 ? /* @__PURE__ */ jsx("path", { d: "M0 0H8M0 0V8", strokeWidth: 1.4, fill: "none", style: line }) : null,
+        which === 3 ? /* @__PURE__ */ jsx("rect", { width: 8, height: 1.4, y: 3.3, style: motif }) : null,
+        which === 4 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("rect", { width: 4, height: 4, style: motif }),
+          /* @__PURE__ */ jsx("rect", { x: 4, y: 4, width: 4, height: 4, style: motif })
+        ] }) : null
+      ]
+    }
+  );
+}
+function useTweenedValues(items, disabled) {
+  const reduced = useReducedMotion();
+  const key = items.map((item) => `${item.datum.id}:${item.datum.value}`).join("|");
+  const [shown, setShown] = useState(
+    () => Object.fromEntries(items.map((item) => [item.datum.id, item.datum.value]))
+  );
+  const current = useRef(shown);
+  current.current = shown;
+  const mounted = useRef(false);
+  useEffect(() => {
+    const target = Object.fromEntries(items.map((item) => [item.datum.id, item.datum.value]));
+    const first = !mounted.current;
+    mounted.current = true;
+    if (disabled || reduced || first || typeof requestAnimationFrame !== "function") {
+      setShown(target);
+      return;
+    }
+    const from = current.current;
+    const started = performance.now();
+    let frame = 0;
+    const step = (now) => {
+      const t = easeOutCubic(Math.min(1, (now - started) / 700));
+      const next = {};
+      for (const id of Object.keys(target)) {
+        const start = from[id] ?? 0;
+        next[id] = start + (target[id] - start) * t;
+      }
+      setShown(next);
+      if (t < 1) frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [key, disabled, reduced]);
+  return items.map((item) => shown[item.datum.id] ?? (mounted.current ? 0 : item.datum.value));
+}
+export {
+  DonutChart
+};

package/dist/charts/donut-chart/index.d.ts

@@ -0,0 +1 @@
+export * from "./donut-chart.js";

package/dist/charts/donut-chart/index.js

@@ -0,0 +1 @@
+export * from "./donut-chart.js";