Animated Chart

1"use client"
2 
3import * as React from "react"
4import { useRef, useEffect, useMemo } from "react"
5import { motion, useInView, useAnimationControls } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8 
9interface ColumnData {
10  title: string
11  value: number
12  /** String to prepend before the value (e.g., "$") */
13  prependString?: string
14  /** String to append after the value (e.g., "%") */
15  appendString?: string
16  /** Animation duration in seconds */
17  animationDuration?: number
18  /** Animation delay in seconds */
19  animationDelay?: number
20  /** ClassName applied to the animated column bar element */
21  className?: string
22  /** ClassName applied to the column's top border */
23  topBorderClassName?: string
24  /** ClassName applied to this column's title (overrides global titleClassName) */
25  titleClassName?: string
26  /** ClassName applied to this column's value (overrides global valueClassName) */
27  valueClassName?: string
28}
29 
30interface AnimatedChartProps extends React.ComponentPropsWithoutRef<"div"> {
31  columns: ColumnData[]
32  maxValue: number
33  /** ClassName applied to all column titles */
34  titleClassName?: string
35  /** ClassName applied to all column values */
36  valueClassName?: string
37  /** When true, columns animate from zero whenever data changes. Default: false */
38  restartOnDataChange?: boolean
39}
40 
41interface AnimatedChartColumnProps extends React.ComponentPropsWithoutRef<"div"> {
42  title: string
43  value: number
44  maxValue: number
45  prependString?: string
46  appendString?: string
47  animationDuration: number
48  animationDelay: number
49  columnClassName?: string
50  topBorderClassName?: string
51  /** Global titleClassName from parent */
52  globalTitleClassName?: string
53  /** Global valueClassName from parent */
54  globalValueClassName?: string
55  /** Column-specific titleClassName (overrides global) */
56  columnTitleClassName?: string
57  /** Column-specific valueClassName (overrides global) */
58  columnValueClassName?: string
59  isInView: boolean
60  isLast: boolean
61  restartTrigger: number
62}
63 
64function AnimatedChartColumn({
65  title,
66  value,
67  maxValue,
68  prependString,
69  appendString,
70  animationDuration,
71  animationDelay,
72  columnClassName,
73  topBorderClassName,
74  globalTitleClassName,
75  globalValueClassName,
76  columnTitleClassName,
77  columnValueClassName,
78  isInView,
79  isLast,
80  restartTrigger,
81  className,
82  ...props
83}: AnimatedChartColumnProps) {
84  const heightPercentage = (value / maxValue) * 100
85  const heightPercentageRef = useRef(heightPercentage)
86// … truncated