dashboard-populate

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { AnimatedBarChart } from "@/remotion/scenes/animated-bar-chart";
5import { MetricTicker, type MetricTickerItem } from "@/remotion/scenes/metric-ticker";
6import { DURATION } from "@/remotion/lib/motion-tokens";
7import type { ChartDatum } from "@/remotion/lib/chart-utils";
8 
9const BAR_DATA: ChartDatum[] = [
10  { label: "Mon", value: 42 },
11  { label: "Tue", value: 58 },
12  { label: "Wed", value: 71 },
13  { label: "Thu", value: 64 },
14];
15 
16const METRICS: MetricTickerItem[] = [
17  { label: "Active users", value: 12400, suffix: "", delta: "+18%" },
18  { label: "Render time", value: 4, suffix: "s", delta: "-12%" },
19];
20 
21const SCENE_DURATIONS = {
22  metrics: 90,
23  chart: 90,
24} as const;
25 
26export type DashboardPopulateProps = {
27  metrics?: MetricTickerItem[];
28  barData?: ChartDatum[];
29  metricsTitle?: string;
30  chartTitle?: string;
31  backgroundColor?: string;
32};
33 
34export const DashboardPopulate: React.FC<DashboardPopulateProps> = ({
35  metrics = METRICS,
36  barData = BAR_DATA,
37  metricsTitle = "Dashboard waking up",
38  chartTitle = "Weekly throughput",
39  backgroundColor = "#080810",
40}) => {
41  const fade = transitionFade({ durationInFrames: DURATION.fast });
42 
43  return (
44    <AbsoluteFill style={{ background: backgroundColor }}>
45      <TransitionSeries>
46        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.metrics}>
47          <MetricTicker metrics={metrics} title={metricsTitle} />
48        </TransitionSeries.Sequence>
49        <TransitionSeries.Transition {...fade} />
50        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.chart}>
51          <AnimatedBarChart data={barData} title={chartTitle} />
52        </TransitionSeries.Sequence>
53      </TransitionSeries>
54    </AbsoluteFill>
55  );
56};