Animated Bar Chart

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface AnimatedBarChartProps {
7  data?: number[];
8  labels?: string[];
9  width?: number;
10  height?: number;
11  barColor?: string;
12  background?: string;
13  gap?: number;
14  staggerFrames?: number;
15  speed?: number;
16  fps?: number;
17  durationInFrames?: number;
18  className?: string;
19}
20 
21const clampProgressValue = (value: number) => Math.max(0, value);
22 
23export const AnimatedBarChart = ({
24  data = [35, 60, 45, 80, 55, 70, 90, 65],
25  labels,
26  width = 1000,
27  height = 500,
28  barColor = "#0ea5e9",
29  background = "#0a0a0a",
30  gap = 16,
31  staggerFrames = 6,
32  speed = 1,
33  fps = 30,
34  durationInFrames = 90,
35  className,
36}: AnimatedBarChartProps) => {
37  const chartData = data.length > 0 ? data.map(clampProgressValue) : [0];
38  const max = Math.max(1, ...chartData);
39  const safeSpeed = Math.max(0.01, speed);
40  const padding = 60;
41  const labelSpace = labels ? 40 : 0;
42  const innerWidth = width - padding * 2;
43  const innerHeight = height - padding * 2 - labelSpace;
44  const safeGap = Math.max(0, gap);
45  const barWidth =
46    (innerWidth - safeGap * (chartData.length - 1)) / chartData.length;
47  const baseY = padding + innerHeight;
48  const frameMs = 1000 / fps;
49  const growDurationMs = 900 / safeSpeed;
50  const staggerMs = (staggerFrames * frameMs) / safeSpeed;
51  const durationMs = (durationInFrames / fps) * 1000;
52  const chartStyle = {
53    "--animated-bar-chart-color": barColor,
54    "--animated-bar-chart-shadow": `${barColor}55`,
55    background,
56    display: "block",
57    fontFamily:
58      "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
59    height,
60    overflow: "hidden",
61    position: "relative",
62    width,
63  } as CSSProperties;
64 
65  return (
66    <Timegroup
67      className={className}
68      duration={`${durationMs}ms`}
69      mode="fixed"
70      style={chartStyle}
71    >
72      <>
73        <style>{`
74        @keyframes framecn-animated-bar-grow {
75          from {
76            opacity: 0.5;
77            transform: scaleY(0);
78          }
79          to {
80            opacity: 1;
81            transform: scaleY(1);
82          }
83        }
84 
85        @keyframes framecn-animated-bar-label {
86          from {
87            opacity: 0;
88            transform: translateY(8px);
89          }
90          to {
91            opacity: 1;
92            transform: translateY(0);
93          }
94        }
95      `}</style>
96        <svg
97          aria-label="Animated bar chart"
98// … truncated