"use client"; import { useMemo, useState } from "react"; import { AnimatePresence, motion, useReducedMotion, type Transition, } from "motion/react"; import clsx from "clsx"; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } export type DonutSlice = { id: string; label: string; value: number; color?: string; }; // Change Here — palette with clear hue separation const DEFAULT_SERIES: DonutSlice[] = [ { id: "direct", label: "مستقیم", value: 38, color: "#3451e5" }, { id: "search", label: "جستجو", value: 27, color: "#0d9488" }, { id: "social", label: "شبکه", value: 18, color: "#d97706" }, { id: "referral", label: "ارجاع", value: 12, color: "#e11d48" }, { id: "other", label: "سایر", value: 5, color: "#64748b" }, ]; const SIZE = 220; const CX = SIZE / 2; const CY = SIZE / 2; const RADIUS = 72; const STROKE = 26; const CIRCUMFERENCE = 2 * Math.PI * RADIUS; const GAP = 4; const drawEase: Transition = { duration: 0.62, ease: [0.22, 1, 0.36, 1], }; export type AnimatedDonutChartProps = { data?: DonutSlice[]; title?: string; subtitle?: string; className?: string; }; export default function AnimatedDonutChart({ data = DEFAULT_SERIES, title = "منبع ترافیک", subtitle = "لمس هر بخش · سهم و مقدار", className, }: AnimatedDonutChartProps) { const reduce = useReducedMotion(); const [runKey, setRunKey] = useState(0); const [activeId, setActiveId] = useState(null); const total = useMemo( () => data.reduce((sum, d) => sum + Math.max(d.value, 0), 0) || 1, [data], ); const slices = useMemo(() => { let offset = 0; const usable = Math.max(CIRCUMFERENCE - GAP * data.length, 1); return data.map((slice) => { const portion = Math.max(slice.value, 0) / total; const length = portion * usable; const start = offset; offset += length + GAP; return { ...slice, portion, length, start, percent: Math.round(portion * 100), }; }); }, [data, total]); const active = slices.find((s) => s.id === activeId) ?? null; return (

{title}

{subtitle}

{toFaDigits(active ? active.percent : 100)} ٪

{active ? active.label : "کل سهم"}

{active ? (

{toFaDigits(active.value)}

) : null}

); }