Bar Chart

1/**
2 * chart-bar — animated bars as visual background with text overlay.
3 *
4 * Bars are decorative — they reinforce the message visually.
5 * The TextOverlay carries the actual content. Same pattern as bg-* templates.
6 * Bars grow from bottom with staggered spring, accent color with gradient.
7 */
8 
9import type { VariableField } from "../video-config";
10import { parseList } from "../parse-list";
11import type { SceneTemplateProps } from "./types";
12import { resolveTokens } from "../theme";
13import { TemplateText } from "./template-text";
14import { TOP_TEXT_AREA_RATIO } from "../backgrounds";
15import { BarChart } from "../primitives/charts/BarChart";
16import { SceneBackground, mediaBackgroundDefaults, mediaBackgroundSchemaFields } from "./scene-background";
17 
18export const chartBarSchema: Record<string, VariableField> = {
19  texts: {
20    type: "string",
21    label: "Text",
22    default: "Revenue up 300%.",
23    required: true,
24    description: "Title text shown above the chart",
25  },
26  bars: {
27    type: "string",
28    label: "Bar heights",
29    default: "30,55,45,80,65,95",
30    description: "JSON array of values 0-100 for bar heights. The bars are decorative — they visualize the trend. Example: [30, 55, 45, 80, 65, 95]",
31  },
32  chartColor: {
33    type: "color",
34    label: "Chart color",
35    default: "#00e5a0",
36    description: "Color for the chart elements (bars, line, ring). Green = growth, blue = trust, orange = energy.",
37  },
38  ...mediaBackgroundSchemaFields,
39  textColor: {
40    type: "color",
41    label: "Text color",
42    default: "",
43    description: "Override text color (leave empty for auto)",
44  },
45};
46 
47export const chartBarDefaults: Record<string, unknown> = {
48  texts: "Revenue up 300%.",
49  bars: "30,55,45,80,65,95",
50  chartColor: "#00e5a0",
51  ...mediaBackgroundDefaults,
52  textColor: "",
53};
54 
55export const ChartBarTemplate: React.FC<SceneTemplateProps> = ({
56  variables,
57  style,
58  progress,
59  beatIntensity,
60  width,
61  height,
62  safeZone,
63  sceneDuration,
64  backgroundEffect,
65  isPlaying = true,
66}) => {
67  const { content, font } = resolveTokens(style);
68  const chartColor = String(variables.chartColor || "") || "#ffffff";
69  const textColor = String(variables.textColor || "") || content;
70  const textsRaw = String(variables.texts || "");
71 
72  // Parse bar values — supports array, JSON-array string, or comma-separated.
73  // Each item can be "Label:value" (e.g. "webpack:45") or plain "45".
74  let barRaw = parseList(variables.bars, 8);
75// … truncated