{item.label + ": " + item.value + " " + valueLabel}

"use client"; import type { HTMLAttributes } from "react"; import { useRef, useSyncExternalStore } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; gsap.registerPlugin(useGSAP); export type ChartDatum = { label: string; value: number }; type AnimatedChartCardProps = HTMLAttributes & { title?: string; data: ChartDatum[]; valueLabel?: string; /** Forces the static presentation regardless of the OS setting. */ reducedMotion?: boolean; }; const subscribeNoop = () => () => {}; export function AnimatedChartCard({ title = "Qualified traffic", data, valueLabel = "visits", reducedMotion = false, className = "", ...props }: AnimatedChartCardProps) { const root = useRef(null); // True when the card mounts on the client; false while hydrating server HTML that is already painted. const mountedOnClient = useSyncExternalStore(subscribeNoop, () => true, () => false); const canAnimate = useRef(mountedOnClient); const max = Math.max(1, ...data.map((item) => item.value)); const xFor = (index: number) => (index / Math.max(1, data.length - 1)) * 100; const yFor = (value: number) => 92 - (value / max) * 72; const points = data.map((item, index) => xFor(index) + "," + yFor(item.value)).join(" "); const latest = data.at(-1); // useGSAP runs in a layout effect, so the hidden start state is applied before the browser paints. useGSAP(() => { const animate = canAnimate.current; canAnimate.current = true; if (!animate || reducedMotion || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; gsap.timeline() .fromTo("[data-chart-line]", { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 0.9, ease: "power2.out" }) .fromTo("[data-chart-point]", { scale: 0 }, { scale: 1, transformOrigin: "center", stagger: 0.07, duration: 0.3, ease: "back.out(1.8)" }, "-=0.35"); }, { scope: root, dependencies: [points, reducedMotion], revertOnUpdate: true }); return (

{title}

{latest ? (

{latest.value.toLocaleString()} {latest.label}

) : null}

); }

Trial sign-ups this week

Trial sign-ups this week