@stackframe/dashboard-ui-components 2.8.84 → 2.8.86

package/dist/esm/components/analytics-chart/analytics-chart-pie.d.ts

@@ -0,0 +1,67 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Ref } from "react";
+import { AnalyticsChartStrings } from "./strings";
+import { AnalyticsChartPieProps, AnalyticsChartSeries, FormatKind, Point } from "./types";
+
+//#region src/components/analytics-chart/analytics-chart-pie.d.ts
+type SegmentColors = {
+  primary: {
+    light: string[];
+    dark: string[];
+  };
+  compare: {
+    light: string[];
+    dark: string[];
+  };
+};
+type AnalyticsChartPieBodyProps = {
+  wrapperRef: Ref<HTMLDivElement>;
+  primarySegmentSeries: readonly AnalyticsChartSeries[];
+  compareSegmentSeries: readonly AnalyticsChartSeries[];
+  aggregatedPrimarySegments: number[];
+  aggregatedCompareSegments: number[];
+  aggregatedPrimaryTotal: number;
+  aggregatedCompareTotal: number;
+  segmentColors: SegmentColors;
+  showPrimary: boolean;
+  showCompare: boolean;
+  xFormatKind: FormatKind;
+  yFormatKind: FormatKind;
+  hoverKey: string | null;
+  setHoverKey: (k: string | null) => void;
+  zoomRange: [number, number] | null;
+  onResetZoom: () => void;
+  visibleStart: number;
+  visibleEnd: number;
+  fullData: Point[];
+  strings: AnalyticsChartStrings;
+  fmtValue: (value: number, kind: FormatKind) => string;
+  pie: AnalyticsChartPieProps | undefined;
+};
+declare function AnalyticsChartPie({
+  wrapperRef,
+  primarySegmentSeries,
+  compareSegmentSeries,
+  aggregatedPrimarySegments,
+  aggregatedCompareSegments,
+  aggregatedPrimaryTotal,
+  aggregatedCompareTotal,
+  segmentColors,
+  showPrimary,
+  showCompare,
+  xFormatKind,
+  yFormatKind,
+  hoverKey,
+  setHoverKey,
+  zoomRange,
+  onResetZoom,
+  visibleStart,
+  visibleEnd,
+  fullData,
+  strings,
+  fmtValue,
+  pie
+}: AnalyticsChartPieBodyProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AnalyticsChartPie };
+//# sourceMappingURL=analytics-chart-pie.d.ts.map

package/dist/esm/components/analytics-chart/analytics-chart-pie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-chart-pie.d.ts","names":[],"sources":["../../../../src/components/analytics-chart/analytics-chart-pie.tsx"],"mappings":";;;;;;KAgBK,aAAA;EACH,OAAA;IAAW,KAAA;IAAiB,IAAA;EAAA;EAC5B,OAAA;IAAW,KAAA;IAAiB,IAAA;EAAA;AAAA;AAAA,KAGzB,0BAAA;EACH,UAAA,EAAY,GAAA,CAAI,cAAA;EAChB,oBAAA,WAA+B,oBAAA;EAC/B,oBAAA,WAA+B,oBAAA;EAC/B,yBAAA;EACA,yBAAA;EACA,sBAAA;EACA,sBAAA;EACA,aAAA,EAAe,aAAA;EACf,WAAA;EACA,WAAA;EACA,WAAA,EAAa,UAAA;EACb,WAAA,EAAa,UAAA;EACb,QAAA;EACA,WAAA,GAAc,CAAA;EACd,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,QAAA,EAAU,KAAA;EACV,OAAA,EAAS,qBAAA;EACT,QAAA,GAAW,KAAA,UAAe,IAAA,EAAM,UAAA;EAChC,GAAA,EAAK,sBAAA;AAAA;AAAA,iBAKS,iBAAA,CAAA;EACd,UAAA;EACA,oBAAA;EACA,oBAAA;EACA,yBAAA;EACA,yBAAA;EACA,sBAAA;EACA,sBAAA;EACA,aAAA;EACA,WAAA;EACA,WAAA;EACA,WAAA;EACA,WAAA;EACA,QAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;EACA,QAAA;EACA;AAAA,GACC,0BAAA,GAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/analytics-chart/analytics-chart-pie.js

@@ -0,0 +1,251 @@
+import { MagnifyingGlassMinusIcon } from "@phosphor-icons/react";
+import { cn } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Cell, Pie, PieChart } from "recharts";
+import { DesignChartContainer } from "../chart-container.js";
+import { TrendPill } from "./default-analytics-chart-tooltip.js";
+import { formatDelta } from "./format.js";
+import { cssIdent } from "./types.js";
+
+//#region src/components/analytics-chart/analytics-chart-pie.tsx
+const DEFAULT_PIE_CLASSNAME = "aspect-square h-[220px] w-[220px] sm:h-[240px] sm:w-[240px]";
+function AnalyticsChartPie({ wrapperRef, primarySegmentSeries, compareSegmentSeries, aggregatedPrimarySegments, aggregatedCompareSegments, aggregatedPrimaryTotal, aggregatedCompareTotal, segmentColors, showPrimary, showCompare, xFormatKind, yFormatKind, hoverKey, setHoverKey, zoomRange, onResetZoom, visibleStart, visibleEnd, fullData, strings, fmtValue, pie }) {
+	const innerRadius = pie?.innerRadius ?? 60;
+	const outerRadius = pie?.outerRadius ?? 84;
+	const compareInnerRadius = pie?.compareInnerRadius ?? 36;
+	const compareOuterRadius = pie?.compareOuterRadius ?? 52;
+	const containerClassName = pie?.className ?? DEFAULT_PIE_CLASSNAME;
+	const canonicalSeries = primarySegmentSeries.length > 0 ? primarySegmentSeries : compareSegmentSeries;
+	const usePrimaryForCanonical = primarySegmentSeries.length > 0;
+	const compareValueByKey = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		compareSegmentSeries.forEach((s, sIdx) => {
+			m.set(s.key, aggregatedCompareSegments[sIdx] ?? 0);
+		});
+		return m;
+	}, [compareSegmentSeries, aggregatedCompareSegments]);
+	const primaryValueByKey = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		primarySegmentSeries.forEach((s, sIdx) => {
+			m.set(s.key, aggregatedPrimarySegments[sIdx] ?? 0);
+		});
+		return m;
+	}, [primarySegmentSeries, aggregatedPrimarySegments]);
+	const canonicalTotal = usePrimaryForCanonical ? aggregatedPrimaryTotal : aggregatedCompareTotal;
+	const legendRows = useMemo(() => canonicalSeries.map((s, sIdx) => {
+		const value = usePrimaryForCanonical ? aggregatedPrimarySegments[sIdx] ?? 0 : aggregatedCompareSegments[sIdx] ?? 0;
+		const prevValue = usePrimaryForCanonical ? compareValueByKey.get(s.key) ?? 0 : primaryValueByKey.get(s.key) ?? 0;
+		return {
+			key: s.key,
+			label: s.label,
+			sIdx,
+			value,
+			prevValue,
+			pct: canonicalTotal > 0 ? value / canonicalTotal : 0,
+			fill: segmentColors.primary.light[sIdx],
+			fillDark: segmentColors.primary.dark[sIdx],
+			fillCompare: segmentColors.compare.light[sIdx],
+			fillCompareDark: segmentColors.compare.dark[sIdx]
+		};
+	}).sort((a, b) => b.value - a.value), [
+		canonicalSeries,
+		usePrimaryForCanonical,
+		aggregatedPrimarySegments,
+		aggregatedCompareSegments,
+		compareValueByKey,
+		primaryValueByKey,
+		canonicalTotal,
+		segmentColors
+	]);
+	const chartConfig = useMemo(() => {
+		const config = {};
+		canonicalSeries.forEach((s, sIdx) => {
+			config[cssIdent(s.key)] = {
+				label: s.label,
+				theme: {
+					light: segmentColors.primary.light[sIdx],
+					dark: segmentColors.primary.dark[sIdx]
+				}
+			};
+			config[`compare-${cssIdent(s.key)}`] = {
+				label: s.label,
+				theme: {
+					light: segmentColors.compare.light[sIdx],
+					dark: segmentColors.compare.dark[sIdx]
+				}
+			};
+		});
+		return config;
+	}, [canonicalSeries, segmentColors]);
+	const activeRow = hoverKey ? legendRows.find((r) => r.key === hoverKey) ?? null : null;
+	const activeDelta = activeRow ? formatDelta(activeRow.value, activeRow.prevValue) : formatDelta(aggregatedPrimaryTotal, aggregatedCompareTotal);
+	const windowDays = visibleEnd - visibleStart + 1;
+	const startLabel = fmtValue(fullData[visibleStart].ts, xFormatKind);
+	const endLabel = fmtValue(fullData[visibleEnd].ts, xFormatKind);
+	const outerData = legendRows.map((r) => ({
+		name: cssIdent(r.key),
+		hoverKey: r.key,
+		value: r.value,
+		fill: r.fill
+	}));
+	const innerData = legendRows.map((r) => ({
+		name: cssIdent(r.key),
+		hoverKey: r.key,
+		value: r.prevValue,
+		fill: r.fillCompare
+	}));
+	const activeIdx = hoverKey ? legendRows.findIndex((r) => r.key === hoverKey) : -1;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapperRef,
+		className: "relative w-full select-none",
+		onClick: (e) => e.stopPropagation(),
+		children: [zoomRange && /* @__PURE__ */ jsx("div", {
+			className: "absolute right-2 top-2 z-20",
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onResetZoom,
+				className: "inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-wider text-blue-600 ring-1 ring-blue-500/30 transition-colors duration-150 hover:bg-blue-500/15 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 dark:text-blue-300 dark:ring-blue-400/30",
+				children: [/* @__PURE__ */ jsx(MagnifyingGlassMinusIcon, {
+					weight: "bold",
+					className: "size-3",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", { children: strings.resetZoom })]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-[260px] flex-col items-center gap-6 sm:min-h-[320px] sm:flex-row sm:items-center sm:justify-center sm:gap-10",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-col items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(DesignChartContainer, {
+						config: chartConfig,
+						className: containerClassName,
+						children: /* @__PURE__ */ jsxs(PieChart, {
+							role: "img",
+							"aria-label": strings.pieAriaLabel({
+								segmentCount: canonicalSeries.length,
+								windowDays
+							}),
+							children: [showPrimary && /* @__PURE__ */ jsx(Pie, {
+								data: outerData,
+								dataKey: "value",
+								nameKey: "name",
+								cx: "50%",
+								cy: "50%",
+								innerRadius,
+								outerRadius,
+								paddingAngle: 1,
+								startAngle: 90,
+								endAngle: -270,
+								isAnimationActive: false,
+								stroke: "none",
+								children: outerData.map((d, i) => {
+									const inactive = activeIdx >= 0 && activeIdx !== i;
+									return /* @__PURE__ */ jsx(Cell, {
+										fill: `var(--color-${d.name})`,
+										opacity: inactive ? .22 : 1,
+										onMouseEnter: () => setHoverKey(d.hoverKey),
+										onMouseLeave: () => setHoverKey(null)
+									}, `outer-${d.name}`);
+								})
+							}), showCompare && /* @__PURE__ */ jsx(Pie, {
+								data: innerData,
+								dataKey: "value",
+								nameKey: "name",
+								cx: "50%",
+								cy: "50%",
+								innerRadius: compareInnerRadius,
+								outerRadius: compareOuterRadius,
+								paddingAngle: 1,
+								startAngle: 90,
+								endAngle: -270,
+								isAnimationActive: false,
+								stroke: "none",
+								children: innerData.map((d, i) => {
+									const inactive = activeIdx >= 0 && activeIdx !== i;
+									return /* @__PURE__ */ jsx(Cell, {
+										fill: `var(--color-compare-${d.name})`,
+										opacity: inactive ? .22 : .95,
+										onMouseEnter: () => setHoverKey(d.hoverKey),
+										onMouseLeave: () => setHoverKey(null)
+									}, `inner-${d.name}`);
+								})
+							})]
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block max-w-[68px] truncate font-mono text-[9px] uppercase tracking-wider text-muted-foreground",
+							children: activeRow ? activeRow.label : strings.pieTotalCenter
+						}), /* @__PURE__ */ jsx("span", {
+							className: "mt-0.5 block max-w-[72px] truncate font-mono text-xl font-semibold leading-none tabular-nums text-foreground",
+							children: fmtValue(activeRow ? activeRow.value : canonicalTotal, yFormatKind)
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-center",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "font-mono text-[10px] uppercase tracking-wider text-muted-foreground/80",
+						children: [
+							startLabel,
+							" – ",
+							endLabel
+						]
+					}), showCompare && /* @__PURE__ */ jsx(TrendPill, {
+						delta: activeDelta,
+						size: "sm",
+						label: strings.pieVsPrev
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "flex w-full max-w-[380px] flex-col gap-1",
+				children: legendRows.map((r) => {
+					const isActive = hoverKey === r.key;
+					const dimmed = hoverKey != null && !isActive;
+					const rowDelta = formatDelta(r.value, r.prevValue);
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onMouseEnter: () => setHoverKey(r.key),
+						onMouseLeave: () => setHoverKey(null),
+						onFocus: () => setHoverKey(r.key),
+						onBlur: () => setHoverKey(null),
+						className: cn("flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-[background-color,opacity] duration-150 hover:bg-foreground/[0.04] hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20", isActive && "bg-foreground/[0.05]", dimmed && "opacity-50"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "size-2.5 shrink-0 rounded-[3px] bg-[var(--c-l)] dark:bg-[var(--c-d)]",
+								style: {
+									"--c-l": r.fill,
+									"--c-d": r.fillDark
+								}
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate text-[12px] font-medium text-foreground",
+								children: r.label
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground",
+								children: [(r.pct * 100).toFixed(1), "%"]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "shrink-0 min-w-[48px] text-right font-mono text-[11px] font-semibold tabular-nums text-foreground",
+								children: fmtValue(r.value, yFormatKind)
+							}),
+							showCompare && /* @__PURE__ */ jsx("span", {
+								className: "shrink-0",
+								children: /* @__PURE__ */ jsx(TrendPill, {
+									delta: rowDelta,
+									size: "sm"
+								})
+							})
+						]
+					}) }, r.key);
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { AnalyticsChartPie };
+//# sourceMappingURL=analytics-chart-pie.js.map

package/dist/esm/components/analytics-chart/analytics-chart-pie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-chart-pie.js","names":[],"sources":["../../../../src/components/analytics-chart/analytics-chart-pie.tsx"],"sourcesContent":["import { MagnifyingGlassMinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport { type DesignChartConfig, DesignChartContainer } from \"../chart-container\";\nimport { type CSSProperties, type Ref, useMemo } from \"react\";\nimport { Cell, Pie, PieChart } from \"recharts\";\nimport { TrendPill } from \"./default-analytics-chart-tooltip\";\nimport { formatDelta } from \"./format\";\nimport type { AnalyticsChartStrings } from \"./strings\";\nimport {\n  cssIdent,\n  type AnalyticsChartPieProps,\n  type AnalyticsChartSeries,\n  type FormatKind,\n  type Point,\n} from \"./types\";\n\ntype SegmentColors = {\n  primary: { light: string[], dark: string[] },\n  compare: { light: string[], dark: string[] },\n};\n\ntype AnalyticsChartPieBodyProps = {\n  wrapperRef: Ref<HTMLDivElement>,\n  primarySegmentSeries: readonly AnalyticsChartSeries[],\n  compareSegmentSeries: readonly AnalyticsChartSeries[],\n  aggregatedPrimarySegments: number[],\n  aggregatedCompareSegments: number[],\n  aggregatedPrimaryTotal: number,\n  aggregatedCompareTotal: number,\n  segmentColors: SegmentColors,\n  showPrimary: boolean,\n  showCompare: boolean,\n  xFormatKind: FormatKind,\n  yFormatKind: FormatKind,\n  hoverKey: string | null,\n  setHoverKey: (k: string | null) => void,\n  zoomRange: [number, number] | null,\n  onResetZoom: () => void,\n  visibleStart: number,\n  visibleEnd: number,\n  fullData: Point[],\n  strings: AnalyticsChartStrings,\n  fmtValue: (value: number, kind: FormatKind) => string,\n  pie: AnalyticsChartPieProps | undefined,\n};\n\nconst DEFAULT_PIE_CLASSNAME = \"aspect-square h-[220px] w-[220px] sm:h-[240px] sm:w-[240px]\";\n\nexport function AnalyticsChartPie({\n  wrapperRef,\n  primarySegmentSeries,\n  compareSegmentSeries,\n  aggregatedPrimarySegments,\n  aggregatedCompareSegments,\n  aggregatedPrimaryTotal,\n  aggregatedCompareTotal,\n  segmentColors,\n  showPrimary,\n  showCompare,\n  xFormatKind,\n  yFormatKind,\n  hoverKey,\n  setHoverKey,\n  zoomRange,\n  onResetZoom,\n  visibleStart,\n  visibleEnd,\n  fullData,\n  strings,\n  fmtValue,\n  pie,\n}: AnalyticsChartPieBodyProps) {\n  const innerRadius = pie?.innerRadius ?? 60;\n  const outerRadius = pie?.outerRadius ?? 84;\n  const compareInnerRadius = pie?.compareInnerRadius ?? 36;\n  const compareOuterRadius = pie?.compareOuterRadius ?? 52;\n  const containerClassName = pie?.className ?? DEFAULT_PIE_CLASSNAME;\n\n  const canonicalSeries = primarySegmentSeries.length > 0\n    ? primarySegmentSeries\n    : compareSegmentSeries;\n  const usePrimaryForCanonical = primarySegmentSeries.length > 0;\n\n  const compareValueByKey = useMemo(() => {\n    const m = new Map<string, number>();\n    compareSegmentSeries.forEach((s, sIdx) => {\n      m.set(s.key, aggregatedCompareSegments[sIdx] ?? 0);\n    });\n    return m;\n  }, [compareSegmentSeries, aggregatedCompareSegments]);\n  const primaryValueByKey = useMemo(() => {\n    const m = new Map<string, number>();\n    primarySegmentSeries.forEach((s, sIdx) => {\n      m.set(s.key, aggregatedPrimarySegments[sIdx] ?? 0);\n    });\n    return m;\n  }, [primarySegmentSeries, aggregatedPrimarySegments]);\n\n  const canonicalTotal = usePrimaryForCanonical\n    ? aggregatedPrimaryTotal\n    : aggregatedCompareTotal;\n\n  const legendRows = useMemo(\n    () =>\n      canonicalSeries\n        .map((s, sIdx) => {\n          const value = usePrimaryForCanonical\n            ? (aggregatedPrimarySegments[sIdx] ?? 0)\n            : (aggregatedCompareSegments[sIdx] ?? 0);\n          const prevValue = usePrimaryForCanonical\n            ? (compareValueByKey.get(s.key) ?? 0)\n            : (primaryValueByKey.get(s.key) ?? 0);\n          return {\n            key: s.key,\n            label: s.label,\n            sIdx,\n            value,\n            prevValue,\n            pct: canonicalTotal > 0 ? value / canonicalTotal : 0,\n            fill: segmentColors.primary.light[sIdx],\n            fillDark: segmentColors.primary.dark[sIdx],\n            fillCompare: segmentColors.compare.light[sIdx],\n            fillCompareDark: segmentColors.compare.dark[sIdx],\n          };\n        })\n        .sort((a, b) => b.value - a.value),\n    [\n      canonicalSeries,\n      usePrimaryForCanonical,\n      aggregatedPrimarySegments,\n      aggregatedCompareSegments,\n      compareValueByKey,\n      primaryValueByKey,\n      canonicalTotal,\n      segmentColors,\n    ],\n  );\n\n  const chartConfig = useMemo<DesignChartConfig>(() => {\n    const config: DesignChartConfig = {};\n    canonicalSeries.forEach((s, sIdx) => {\n      config[cssIdent(s.key)] = {\n        label: s.label,\n        theme: {\n          light: segmentColors.primary.light[sIdx],\n          dark: segmentColors.primary.dark[sIdx],\n        },\n      };\n      config[`compare-${cssIdent(s.key)}`] = {\n        label: s.label,\n        theme: {\n          light: segmentColors.compare.light[sIdx],\n          dark: segmentColors.compare.dark[sIdx],\n        },\n      };\n    });\n    return config;\n  }, [canonicalSeries, segmentColors]);\n\n  const activeRow = hoverKey\n    ? legendRows.find((r) => r.key === hoverKey) ?? null\n    : null;\n  const activeDelta = activeRow\n    ? formatDelta(activeRow.value, activeRow.prevValue)\n    : formatDelta(aggregatedPrimaryTotal, aggregatedCompareTotal);\n\n  const windowDays = visibleEnd - visibleStart + 1;\n  const startLabel = fmtValue(fullData[visibleStart]!.ts, xFormatKind);\n  const endLabel = fmtValue(fullData[visibleEnd]!.ts, xFormatKind);\n\n  const outerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.value, fill: r.fill }));\n  const innerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.prevValue, fill: r.fillCompare }));\n  const activeIdx = hoverKey ? legendRows.findIndex((r) => r.key === hoverKey) : -1;\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"relative w-full select-none\"\n      onClick={(e) => e.stopPropagation()}\n    >\n      {zoomRange && (\n        <div className=\"absolute right-2 top-2 z-20\">\n          <button\n            type=\"button\"\n            onClick={onResetZoom}\n            className=\"inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-wider text-blue-600 ring-1 ring-blue-500/30 transition-colors duration-150 hover:bg-blue-500/15 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 dark:text-blue-300 dark:ring-blue-400/30\"\n          >\n            <MagnifyingGlassMinusIcon weight=\"bold\" className=\"size-3\" aria-hidden=\"true\" />\n            <span>{strings.resetZoom}</span>\n          </button>\n        </div>\n      )}\n\n      <div className=\"flex min-h-[260px] flex-col items-center gap-6 sm:min-h-[320px] sm:flex-row sm:items-center sm:justify-center sm:gap-10\">\n        <div className=\"flex shrink-0 flex-col items-center gap-3\">\n          <div className=\"relative\">\n            <DesignChartContainer config={chartConfig} className={containerClassName}>\n              <PieChart\n                role=\"img\"\n                aria-label={strings.pieAriaLabel({\n                  segmentCount: canonicalSeries.length,\n                  windowDays,\n                })}\n              >\n                {showPrimary && (\n                  <Pie\n                    data={outerData}\n                    dataKey=\"value\"\n                    nameKey=\"name\"\n                    cx=\"50%\"\n                    cy=\"50%\"\n                    innerRadius={innerRadius}\n                    outerRadius={outerRadius}\n                    paddingAngle={1}\n                    startAngle={90}\n                    endAngle={-270}\n                    isAnimationActive={false}\n                    stroke=\"none\"\n                  >\n                    {outerData.map((d, i) => {\n                      const inactive = activeIdx >= 0 && activeIdx !== i;\n                      return (\n                        <Cell\n                          key={`outer-${d.name}`}\n                          fill={`var(--color-${d.name})`}\n                          opacity={inactive ? 0.22 : 1}\n                          onMouseEnter={() => setHoverKey(d.hoverKey)}\n                          onMouseLeave={() => setHoverKey(null)}\n                        />\n                      );\n                    })}\n                  </Pie>\n                )}\n                {showCompare && (\n                  <Pie\n                    data={innerData}\n                    dataKey=\"value\"\n                    nameKey=\"name\"\n                    cx=\"50%\"\n                    cy=\"50%\"\n                    innerRadius={compareInnerRadius}\n                    outerRadius={compareOuterRadius}\n                    paddingAngle={1}\n                    startAngle={90}\n                    endAngle={-270}\n                    isAnimationActive={false}\n                    stroke=\"none\"\n                  >\n                    {innerData.map((d, i) => {\n                      const inactive = activeIdx >= 0 && activeIdx !== i;\n                      return (\n                        <Cell\n                          key={`inner-${d.name}`}\n                          fill={`var(--color-compare-${d.name})`}\n                          opacity={inactive ? 0.22 : 0.95}\n                          onMouseEnter={() => setHoverKey(d.hoverKey)}\n                          onMouseLeave={() => setHoverKey(null)}\n                        />\n                      );\n                    })}\n                  </Pie>\n                )}\n              </PieChart>\n            </DesignChartContainer>\n\n            <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n              <span className=\"block max-w-[68px] truncate font-mono text-[9px] uppercase tracking-wider text-muted-foreground\">\n                {activeRow ? activeRow.label : strings.pieTotalCenter}\n              </span>\n              <span className=\"mt-0.5 block max-w-[72px] truncate font-mono text-xl font-semibold leading-none tabular-nums text-foreground\">\n                {fmtValue(activeRow ? activeRow.value : canonicalTotal, yFormatKind)}\n              </span>\n            </div>\n          </div>\n\n          <div className=\"flex items-center gap-2 text-center\">\n            <span className=\"font-mono text-[10px] uppercase tracking-wider text-muted-foreground/80\">\n              {startLabel} – {endLabel}\n            </span>\n            {showCompare && (\n              <TrendPill delta={activeDelta} size=\"sm\" label={strings.pieVsPrev} />\n            )}\n          </div>\n        </div>\n\n        <ul className=\"flex w-full max-w-[380px] flex-col gap-1\">\n          {legendRows.map((r) => {\n            const isActive = hoverKey === r.key;\n            const dimmed = hoverKey != null && !isActive;\n            const rowDelta = formatDelta(r.value, r.prevValue);\n            return (\n              <li key={r.key}>\n                <button\n                  type=\"button\"\n                  onMouseEnter={() => setHoverKey(r.key)}\n                  onMouseLeave={() => setHoverKey(null)}\n                  onFocus={() => setHoverKey(r.key)}\n                  onBlur={() => setHoverKey(null)}\n                  className={cn(\n                    \"flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-[background-color,opacity] duration-150 hover:bg-foreground/[0.04] hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20\",\n                    isActive && \"bg-foreground/[0.05]\",\n                    dimmed && \"opacity-50\",\n                  )}\n                >\n                  <span\n                    className=\"size-2.5 shrink-0 rounded-[3px] bg-[var(--c-l)] dark:bg-[var(--c-d)]\"\n                    style={{ \"--c-l\": r.fill, \"--c-d\": r.fillDark } as CSSProperties}\n                  />\n                  <span className=\"min-w-0 flex-1 truncate text-[12px] font-medium text-foreground\">\n                    {r.label}\n                  </span>\n                  <span className=\"shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground\">\n                    {(r.pct * 100).toFixed(1)}%\n                  </span>\n                  <span className=\"shrink-0 min-w-[48px] text-right font-mono text-[11px] font-semibold tabular-nums text-foreground\">\n                    {fmtValue(r.value, yFormatKind)}\n                  </span>\n                  {showCompare && (\n                    <span className=\"shrink-0\">\n                      <TrendPill delta={rowDelta} size=\"sm\" />\n                    </span>\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA8CA,MAAM,wBAAwB;AAE9B,SAAgB,kBAAkB,EAChC,YACA,sBACA,sBACA,2BACA,2BACA,wBACA,wBACA,eACA,aACA,aACA,aACA,aACA,UACA,aACA,WACA,aACA,cACA,YACA,UACA,SACA,UACA,OAC6B;CAC7B,MAAM,cAAc,KAAK,eAAe;CACxC,MAAM,cAAc,KAAK,eAAe;CACxC,MAAM,qBAAqB,KAAK,sBAAsB;CACtD,MAAM,qBAAqB,KAAK,sBAAsB;CACtD,MAAM,qBAAqB,KAAK,aAAa;CAE7C,MAAM,kBAAkB,qBAAqB,SAAS,IAClD,uBACA;CACJ,MAAM,yBAAyB,qBAAqB,SAAS;CAE7D,MAAM,oBAAoB,cAAc;EACtC,MAAM,oBAAI,IAAI,KAAqB;AACnC,uBAAqB,SAAS,GAAG,SAAS;AACxC,KAAE,IAAI,EAAE,KAAK,0BAA0B,SAAS,EAAE;IAClD;AACF,SAAO;IACN,CAAC,sBAAsB,0BAA0B,CAAC;CACrD,MAAM,oBAAoB,cAAc;EACtC,MAAM,oBAAI,IAAI,KAAqB;AACnC,uBAAqB,SAAS,GAAG,SAAS;AACxC,KAAE,IAAI,EAAE,KAAK,0BAA0B,SAAS,EAAE;IAClD;AACF,SAAO;IACN,CAAC,sBAAsB,0BAA0B,CAAC;CAErD,MAAM,iBAAiB,yBACnB,yBACA;CAEJ,MAAM,aAAa,cAEf,gBACG,KAAK,GAAG,SAAS;EAChB,MAAM,QAAQ,yBACT,0BAA0B,SAAS,IACnC,0BAA0B,SAAS;EACxC,MAAM,YAAY,yBACb,kBAAkB,IAAI,EAAE,IAAI,IAAI,IAChC,kBAAkB,IAAI,EAAE,IAAI,IAAI;AACrC,SAAO;GACL,KAAK,EAAE;GACP,OAAO,EAAE;GACT;GACA;GACA;GACA,KAAK,iBAAiB,IAAI,QAAQ,iBAAiB;GACnD,MAAM,cAAc,QAAQ,MAAM;GAClC,UAAU,cAAc,QAAQ,KAAK;GACrC,aAAa,cAAc,QAAQ,MAAM;GACzC,iBAAiB,cAAc,QAAQ,KAAK;GAC7C;GACD,CACD,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EACtC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,cAAc,cAAiC;EACnD,MAAM,SAA4B,EAAE;AACpC,kBAAgB,SAAS,GAAG,SAAS;AACnC,UAAO,SAAS,EAAE,IAAI,IAAI;IACxB,OAAO,EAAE;IACT,OAAO;KACL,OAAO,cAAc,QAAQ,MAAM;KACnC,MAAM,cAAc,QAAQ,KAAK;KAClC;IACF;AACD,UAAO,WAAW,SAAS,EAAE,IAAI,MAAM;IACrC,OAAO,EAAE;IACT,OAAO;KACL,OAAO,cAAc,QAAQ,MAAM;KACnC,MAAM,cAAc,QAAQ,KAAK;KAClC;IACF;IACD;AACF,SAAO;IACN,CAAC,iBAAiB,cAAc,CAAC;CAEpC,MAAM,YAAY,WACd,WAAW,MAAM,MAAM,EAAE,QAAQ,SAAS,IAAI,OAC9C;CACJ,MAAM,cAAc,YAChB,YAAY,UAAU,OAAO,UAAU,UAAU,GACjD,YAAY,wBAAwB,uBAAuB;CAE/D,MAAM,aAAa,aAAa,eAAe;CAC/C,MAAM,aAAa,SAAS,SAAS,cAAe,IAAI,YAAY;CACpE,MAAM,WAAW,SAAS,SAAS,YAAa,IAAI,YAAY;CAEhE,MAAM,YAAY,WAAW,KAAK,OAAO;EAAE,MAAM,SAAS,EAAE,IAAI;EAAE,UAAU,EAAE;EAAK,OAAO,EAAE;EAAO,MAAM,EAAE;EAAM,EAAE;CACnH,MAAM,YAAY,WAAW,KAAK,OAAO;EAAE,MAAM,SAAS,EAAE,IAAI;EAAE,UAAU,EAAE;EAAK,OAAO,EAAE;EAAW,MAAM,EAAE;EAAa,EAAE;CAC9H,MAAM,YAAY,WAAW,WAAW,WAAW,MAAM,EAAE,QAAQ,SAAS,GAAG;AAE/E,QACE,qBAAC;EACC,KAAK;EACL,WAAU;EACV,UAAU,MAAM,EAAE,iBAAiB;aAElC,aACC,oBAAC;GAAI,WAAU;aACb,qBAAC;IACC,MAAK;IACL,SAAS;IACT,WAAU;eAEV,oBAAC;KAAyB,QAAO;KAAO,WAAU;KAAS,eAAY;MAAS,EAChF,oBAAC,oBAAM,QAAQ,YAAiB;KACzB;IACL,EAGR,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;eACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAqB,QAAQ;MAAa,WAAW;gBACpD,qBAAC;OACC,MAAK;OACL,cAAY,QAAQ,aAAa;QAC/B,cAAc,gBAAgB;QAC9B;QACD,CAAC;kBAED,eACC,oBAAC;QACC,MAAM;QACN,SAAQ;QACR,SAAQ;QACR,IAAG;QACH,IAAG;QACU;QACA;QACb,cAAc;QACd,YAAY;QACZ,UAAU;QACV,mBAAmB;QACnB,QAAO;kBAEN,UAAU,KAAK,GAAG,MAAM;SACvB,MAAM,WAAW,aAAa,KAAK,cAAc;AACjD,gBACE,oBAAC;UAEC,MAAM,eAAe,EAAE,KAAK;UAC5B,SAAS,WAAW,MAAO;UAC3B,oBAAoB,YAAY,EAAE,SAAS;UAC3C,oBAAoB,YAAY,KAAK;YAJhC,SAAS,EAAE,OAKhB;UAEJ;SACE,EAEP,eACC,oBAAC;QACC,MAAM;QACN,SAAQ;QACR,SAAQ;QACR,IAAG;QACH,IAAG;QACH,aAAa;QACb,aAAa;QACb,cAAc;QACd,YAAY;QACZ,UAAU;QACV,mBAAmB;QACnB,QAAO;kBAEN,UAAU,KAAK,GAAG,MAAM;SACvB,MAAM,WAAW,aAAa,KAAK,cAAc;AACjD,gBACE,oBAAC;UAEC,MAAM,uBAAuB,EAAE,KAAK;UACpC,SAAS,WAAW,MAAO;UAC3B,oBAAoB,YAAY,EAAE,SAAS;UAC3C,oBAAoB,YAAY,KAAK;YAJhC,SAAS,EAAE,OAKhB;UAEJ;SACE;QAEC;OACU,EAEvB,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBACb,YAAY,UAAU,QAAQ,QAAQ;QAClC,EACP,oBAAC;OAAK,WAAU;iBACb,SAAS,YAAY,UAAU,QAAQ,gBAAgB,YAAY;QAC/D;OACH;MACF,EAEN,qBAAC;KAAI,WAAU;gBACb,qBAAC;MAAK,WAAU;;OACb;OAAW;OAAI;;OACX,EACN,eACC,oBAAC;MAAU,OAAO;MAAa,MAAK;MAAK,OAAO,QAAQ;OAAa;MAEnE;KACF,EAEN,oBAAC;IAAG,WAAU;cACX,WAAW,KAAK,MAAM;KACrB,MAAM,WAAW,aAAa,EAAE;KAChC,MAAM,SAAS,YAAY,QAAQ,CAAC;KACpC,MAAM,WAAW,YAAY,EAAE,OAAO,EAAE,UAAU;AAClD,YACE,oBAAC,kBACC,qBAAC;MACC,MAAK;MACL,oBAAoB,YAAY,EAAE,IAAI;MACtC,oBAAoB,YAAY,KAAK;MACrC,eAAe,YAAY,EAAE,IAAI;MACjC,cAAc,YAAY,KAAK;MAC/B,WAAW,GACT,0PACA,YAAY,wBACZ,UAAU,aACX;;OAED,oBAAC;QACC,WAAU;QACV,OAAO;SAAE,SAAS,EAAE;SAAM,SAAS,EAAE;SAAU;SAC/C;OACF,oBAAC;QAAK,WAAU;kBACb,EAAE;SACE;OACP,qBAAC;QAAK,WAAU;oBACZ,EAAE,MAAM,KAAK,QAAQ,EAAE,EAAC;SACrB;OACP,oBAAC;QAAK,WAAU;kBACb,SAAS,EAAE,OAAO,YAAY;SAC1B;OACN,eACC,oBAAC;QAAK,WAAU;kBACd,oBAAC;SAAU,OAAO;SAAU,MAAK;UAAO;SACnC;;OAEF,IA/BF,EAAE,IAgCN;MAEP;KACC;IACD;GACF"}