Progress Ring

1/**
2 * chart-progress-ring — circular progress indicator with text overlay.
3 *
4 * Large ring that fills from 0 to the target percentage as progress advances.
5 * Big number in the center of the ring counts up to the value.
6 * TextOverlay in the top 35% carries a message above the ring.
7 * Label fades up below the ring after the draw is underway — same
8 * uppercase caption treatment as chart-counter's label.
9 */
10 
11import type { VariableField } from "../video-config";
12import type { SceneTemplateProps } from "./types";
13import { resolveTokens } from "../theme";
14import { TemplateText } from "./template-text";
15import { TOP_TEXT_AREA_RATIO } from "../backgrounds";
16import { ProgressRing } from "../primitives/charts/ProgressRing";
17import { SceneBackground, mediaBackgroundDefaults, mediaBackgroundSchemaFields } from "./scene-background";
18 
19// ─── Schema ─────────────────────────────────────────────────────
20 
21export const chartProgressRingSchema: Record<string, VariableField> = {
22  texts: {
23    type: "string",
24    label: "Text",
25    default: "Almost there.",
26    required: true,
27    description: "Title text shown above the chart",
28  },
29  value: {
30    type: "number",
31    label: "Value",
32    default: 75,
33    required: true,
34    description: "Percentage value 0-100",
35  },
36  label: {
37    type: "string",
38    label: "Label",
39    default: "Complete",
40    required: true,
41    description: "Text shown below the ring",
42  },
43  unit: {
44    type: "string",
45    label: "Unit",
46    default: "%",
47    description: "Suffix after the number (e.g. %, x, k)",
48  },
49  chartColor: {
50    type: "color",
51    label: "Chart color",
52    default: "#00e5a0",
53    description: "Color for the chart elements (bars, line, ring). Green = growth, blue = trust, orange = energy.",
54  },
55  ...mediaBackgroundSchemaFields,
56  textColor: {
57    type: "color",
58    label: "Text color",
59    default: "",
60    description: "Override text color (leave empty for auto)",
61  },
62};
63 
64export const chartProgressRingDefaults: Record<string, unknown> = {
65  texts: "Almost there.",
66  value: 75,
67  label: "Complete",
68  unit: "%",
69  chartColor: "#00e5a0",
70  ...mediaBackgroundDefaults,
71  textColor: "",
72};
73 
74// ─── Component ──────────────────────────────────────────────────
75 
76// … truncated