"use client"; import { useId, 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 BarPoint = { id: string; label: string; value: number; }; // Change Here const DEFAULT_SERIES: BarPoint[] = [ { id: "sat", label: "ش", value: 42 }, { id: "sun", label: "ی", value: 58 }, { id: "mon", label: "د", value: 36 }, { id: "tue", label: "س", value: 74 }, { id: "wed", label: "چ", value: 63 }, { id: "thu", label: "پ", value: 88 }, { id: "fri", label: "ج", value: 51 }, ]; const WIDTH = 360; const HEIGHT = 220; const PAD_X = 28; const PAD_TOP = 28; const PAD_BOTTOM = 36; const CHART_H = HEIGHT - PAD_TOP - PAD_BOTTOM; const CHART_W = WIDTH - PAD_X * 2; const springRise: Transition = { type: "spring", stiffness: 380, damping: 28, mass: 0.85, }; /** Brand blue — not theme primary (dark mode primary is near-white). */ const BAR_BLUE = "#3451e5"; const BAR_BLUE_DEEP = "#2a41c4"; export type AnimatedBarChartProps = { data?: BarPoint[]; title?: string; subtitle?: string; className?: string; }; export default function AnimatedBarChart({ data = DEFAULT_SERIES, title = "بازدید هفتگی", subtitle = "لمس هر میله · پخش دوباره از پایین", className, }: AnimatedBarChartProps) { const reduce = useReducedMotion(); const gradId = `bar-blue-${useId().replace(/:/g, "")}`; const [runKey, setRunKey] = useState(0); const [activeId, setActiveId] = useState(null); const max = useMemo( () => Math.max(...data.map((d) => d.value), 1), [data], ); const gap = 10; const barW = (CHART_W - gap * (data.length - 1)) / data.length; const active = data.find((d) => d.id === activeId) ?? null; return (

{title}

{subtitle}

{active ? ( <> {toFaDigits(active.value)} روز {active.label} ) : ( <> {toFaDigits(data.reduce((s, d) => s + d.value, 0))} مجموع هفته )}

); }