"use client"; import { useCallback, useId, useMemo, useRef, 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 LinePoint = { id: string; label: string; value: number; }; // Change Here const DEFAULT_SERIES: LinePoint[] = [ { id: "far", label: "فرو", value: 42 }, { id: "ord", label: "ارد", value: 55 }, { id: "kho", label: "خرد", value: 48 }, { id: "tir", label: "تیر", value: 71 }, { id: "mor", label: "مرد", value: 64 }, { id: "sha", label: "شهر", value: 82 }, { id: "meh", label: "مهر", value: 76 }, { id: "aba", label: "آبا", value: 91 }, { id: "aza", label: "آذر", value: 68 }, { id: "dey", label: "دی", value: 85 }, { id: "bah", label: "به", value: 94 }, { id: "esf", label: "اسف", value: 88 }, ]; const WIDTH = 400; const HEIGHT = 260; const PAD_L = 40; const PAD_R = 20; const PAD_TOP = 24; const PAD_BOTTOM = 36; const CHART_W = WIDTH - PAD_L - PAD_R; const CHART_H = HEIGHT - PAD_TOP - PAD_BOTTOM; const springDot: Transition = { type: "spring", stiffness: 420, damping: 28, mass: 0.7, }; /** Brand blue — not theme primary (dark mode primary is near-white). */ const LINE_BLUE = "#3451e5"; function niceMax(value: number) { if (value <= 0) return 100; const raw = value * 1.12; const step = raw > 80 ? 20 : raw > 40 ? 10 : 5; return Math.ceil(raw / step) * step; } /** Smooth cubic path through points (Catmull-Rom → Bezier). */ function buildSmoothPath(points: { x: number; y: number }[]) { if (points.length < 2) return ""; let d = `M ${points[0]!.x} ${points[0]!.y}`; for (let i = 0; i < points.length - 1; i++) { const p0 = points[i - 1] ?? points[i]!; const p1 = points[i]!; const p2 = points[i + 1]!; const p3 = points[i + 2] ?? p2; const cp1x = p1.x + (p2.x - p0.x) / 6; const cp1y = p1.y + (p2.y - p0.y) / 6; const cp2x = p2.x - (p3.x - p1.x) / 6; const cp2y = p2.y - (p3.y - p1.y) / 6; d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`; } return d; } export type AnimatedLineChartProps = { data?: LinePoint[]; title?: string; subtitle?: string; unit?: string; className?: string; }; export default function AnimatedLineChart({ data = DEFAULT_SERIES, title = "درآمد ماهانه", subtitle = "هاور روی خط · راهنما و جزئیات نقطه", unit = "میلیون تومان", className, }: AnimatedLineChartProps) { const reduce = useReducedMotion(); const gradId = useId().replace(/:/g, ""); const svgRef = useRef(null); const [runKey, setRunKey] = useState(0); const [activeIndex, setActiveIndex] = useState(null); const max = useMemo( () => niceMax(Math.max(...data.map((d) => d.value), 1)), [data], ); const coords = useMemo(() => { if (data.length === 1) { return [ { x: PAD_L + CHART_W / 2, y: PAD_TOP + CHART_H * (1 - data[0]!.value / max), }, ]; } return data.map((point, i) => ({ x: PAD_L + (i / (data.length - 1)) * CHART_W, y: PAD_TOP + CHART_H * (1 - point.value / max), })); }, [data, max]); const linePath = useMemo(() => buildSmoothPath(coords), [coords]); const areaPath = useMemo(() => { if (!linePath || coords.length < 2) return ""; const first = coords[0]!; const last = coords[coords.length - 1]!; const base = HEIGHT - PAD_BOTTOM; return `${linePath} L ${last.x} ${base} L ${first.x} ${base} Z`; }, [linePath, coords]); const gridValues = useMemo(() => { const steps = 4; return Array.from({ length: steps + 1 }, (_, i) => Math.round((max * i) / steps), ); }, [max]); const active = activeIndex != null ? data[activeIndex]! : null; const activeCoord = activeIndex != null ? coords[activeIndex]! : null; const prev = activeIndex != null && activeIndex > 0 ? data[activeIndex - 1]! : null; const delta = active && prev ? ((active.value - prev.value) / prev.value) * 100 : null; const pickNearest = useCallback( (clientX: number) => { const svg = svgRef.current; if (!svg || data.length === 0) return; const rect = svg.getBoundingClientRect(); const xSvg = ((clientX - rect.left) / rect.width) * WIDTH; let best = 0; let bestDist = Infinity; for (let i = 0; i < coords.length; i++) { const dist = Math.abs(coords[i]!.x - xSvg); if (dist < bestDist) { bestDist = dist; best = i; } } setActiveIndex(best); }, [coords, data.length], ); const clearActive = () => setActiveIndex(null); /** Tooltip stays inside the chart card; flip near edges. */ const tooltipStyle = useMemo(() => { if (!activeCoord) return null; const tipW = 176; const tipH = 78; let left = activeCoord.x + 14; let top = activeCoord.y - tipH - 10; if (left + tipW > WIDTH - 8) left = activeCoord.x - tipW - 14; if (left < 8) left = 8; if (top < 8) top = activeCoord.y + 16; return { left: `${(left / WIDTH) * 100}%`, top: `${(top / HEIGHT) * 100}%`, }; }, [activeCoord]); return (

{title}

{subtitle}

{active ? ( <> {toFaDigits(active.value)} {active.label} ) : ( <> {toFaDigits(Math.max(...data.map((d) => d.value)))} اوج سال )}

{active && activeCoord && tooltipStyle ? ( ) : null}

میانگین{" "} {toFaDigits( Math.round( data.reduce((s, d) => s + d.value, 0) / Math.max(data.length, 1), ), )}

); }