Animated Line Chart

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface AnimatedLineChartProps {
7  data?: number[];
8  width?: number;
9  height?: number;
10  strokeColor?: string;
11  strokeWidth?: number;
12  background?: string;
13  gridColor?: string;
14  showDot?: boolean;
15  speed?: number;
16  fps?: number;
17  durationInFrames?: number;
18  className?: string;
19}
20 
21export const AnimatedLineChart = ({
22  data = [12, 19, 8, 15, 22, 18, 28, 25, 32],
23  width = 1000,
24  height = 500,
25  strokeColor = "#22c55e",
26  strokeWidth = 4,
27  background = "#0a0a0a",
28  gridColor = "#27272a",
29  showDot = true,
30  speed = 1,
31  fps = 30,
32  durationInFrames = 90,
33  className,
34}: AnimatedLineChartProps) => {
35  const safeSpeed = Math.max(0.01, speed);
36  const durationMs = ((durationInFrames / fps) * 1000) / safeSpeed;
37  const lineDurationMs = (((durationInFrames * 0.85) / fps) * 1000) / safeSpeed;
38 
39  const padding = 60;
40  const innerWidth = width - padding * 2;
41  const innerHeight = height - padding * 2;
42 
43  const min = Math.min(...data);
44  const max = Math.max(...data);
45  const range = max - min || 1;
46 
47  const points = data.map((value, index) => {
48    const x = padding + (index / (data.length - 1)) * innerWidth;
49    const y = padding + innerHeight - ((value - min) / range) * innerHeight;
50    return { x, y };
51  });
52 
53  let pathLength = 0;
54  for (let i = 1; i < points.length; i += 1) {
55    const dx = points[i].x - points[i - 1].x;
56    const dy = points[i].y - points[i - 1].y;
57    pathLength += Math.hypot(dx, dy);
58  }
59 
60  const d = points
61    .map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`)
62    .join(" ");
63 
64  const gridRows = 4;
65  const gridCols = data.length - 1;
66 
67  const chartStyle: CSSProperties = {
68    alignItems: "center",
69    background,
70    display: "flex",
71    fontFamily:
72      "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
73    height,
74    justifyContent: "center",
75    overflow: "hidden",
76    position: "relative",
77    width,
78  };
79 
80  return (
81    <Timegroup
82      className={className}
83      duration={`${durationMs}ms`}
84      mode="fixed"
85      style={chartStyle}
86    >
87      <>
88        <style>{`
89          @keyframes framecn-line-draw {
90            from {
91              stroke-dashoffset: ${pathLength};
92              opacity: 0.7;
93            }
94            to {
95              stroke-dashoffset: 0;
96              opacity: 1;
97            }
98          }
99          @keyframes framecn-line-dot {
100// … truncated