Dashboard Populate

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8const MONO_FAMILY =
9  "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace";
10 
11const BAR_VALUES = [0.55, 0.78, 0.42, 0.92, 0.66];
12const LINE_POINTS: [number, number][] = [
13  [0, 70],
14  [16, 55],
15  [32, 62],
16  [48, 38],
17  [64, 45],
18  [80, 22],
19  [100, 12],
20];
21 
22const STRUCTURE_END = 15;
23 
24const buildLinePath = () =>
25  LINE_POINTS.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x},${y}`).join(" ");
26 
27const formatNumber = (n: number) => n.toLocaleString("en-US");
28 
29export interface DashboardPopulateProps {
30  accentColor?: string;
31  kpiTarget?: number;
32  speed?: number;
33  fps?: number;
34  durationInFrames?: number;
35  width?: number;
36  height?: number;
37  className?: string;
38}
39 
40const Tile = ({
41  title,
42  children,
43  style,
44}: {
45  title: string;
46  children: React.ReactNode;
47  style?: CSSProperties;
48}) => (
49  <div
50    style={{
51      background: "linear-gradient(180deg, #131316 0%, #0d0d10 100%)",
52      border: "1px solid rgba(255,255,255,0.08)",
53      borderRadius: 16,
54      boxShadow:
55        "inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 40px rgba(0,0,0,0.3)",
56      display: "flex",
57      flexDirection: "column",
58      gap: 16,
59      padding: 24,
60      position: "relative",
61      ...style,
62    }}
63  >
64    <div
65      style={{
66        color: "rgba(255,255,255,0.5)",
67        fontSize: 12,
68        fontWeight: 500,
69        letterSpacing: "0.08em",
70        textTransform: "uppercase",
71      }}
72    >
73      {title}
74    </div>
75    <div style={{ flex: 1, position: "relative" }}>{children}</div>
76  </div>
77);
78 
79export const DashboardPopulate = ({
80  accentColor = "#22c55e",
81  kpiTarget = 128_400,
82  speed = 1,
83  fps = 30,
84  durationInFrames = 180,
85  width = 1280,
86  height = 720,
87  className,
88}: DashboardPopulateProps) => {
89  const safeSpeed = Math.max(0.01, speed);
90  const durationMs = (durationInFrames / fps) * 1000;
91  const frameMs = 1000 / fps;
92  const structureEndMs = STRUCTURE_END * frameMs;
93  const kpiMs = ((60 / fps) * 1000) / safeSpeed;
94  const barStaggerMs = ((4 / fps) * 1000) / safeSpeed;
95  const lineMs = ((50 / fps) * 1000) / safeSpeed;
96 
97  const containerStyle: CSSProperties = {
98    background: "#09090b",
99    color: "white",
100    display: "flex",
101    flexDirection: "column",
102    fontFamily: FONT_FAMILY,
103    gap: 24,
104    height,
105    overflow: "hidden",
106// … truncated