|
1
|
# React Component Fallback (Custom Infographics) |
|
2
|
|
|
3
|
Use this approach when the infographic needs multiple visualization types combined, when raw data needs analysis before visualization, or when no single AntV template fits the content. |
|
4
|
|
|
5
|
## When to Use |
|
6
|
|
|
7
|
- The content is raw data (CSV, bank transactions, spreadsheets) that needs analysis and categorization |
|
8
|
- The infographic combines multiple visualization types (summary stats + charts + tables + callouts) |
|
9
|
|
|
10
|
- The user wants a completely bespoke visual design |
|
11
|
- The user has specific brand requirements that need pixel-level control |
|
12
|
|
|
13
|
- No single AntV template category covers the content |
|
14
|
|
|
15
|
## Workflow |
|
16
|
|
|
17
|
### 1. Analyze the Data |
|
18
|
|
|
19
|
Before building, analyze and structure the raw data: |
|
20
|
|
|
21
|
- Compute totals, averages, percentages |
|
22
|
- Categorize items into meaningful groups |
|
23
|
|
|
24
|
- Identify the key insight or takeaway |
|
25
|
- Plan which sections and chart types will best communicate each data point |
|
26
|
|
|
27
|
This analysis step is critical — the React component will hardcode the computed values, so get the math right before writing any code. |
|
28
|
|
|
29
|
### 2. Create the Component Directory |
|
30
|
|
|
31
|
Ensure the infographics directory exists: |
|
32
|
|
|
33
|
```text |
|
34
|
|
|
35
|
mkdir -p artifacts/mockup-sandbox/src/components/mockups/infographics |
|
36
|
|
|
37
|
mkdir -p exports |
|
38
|
|
|
39
|
``` |
|
40
|
|
|
41
|
### 3. Build the React Component |
|
42
|
|
|
43
|
Create the component at `artifacts/mockup-sandbox/src/components/mockups/infographics/<Name>.tsx`. |
|
44
|
|
|
45
|
Use a descriptive PascalCase name (e.g., `TransaccionesMarzo.tsx`, `ClimateStats.tsx`, `HiringProcess.tsx`). |
|
46
|
|
|
47
|
Design principles: |
|
48
|
|
|
49
|
- Set a fixed width on the root container (e.g., `w-[1000px]`or`w-[1050px]`) so the layout is predictable for screenshot export. |
|
50
|
- Use `min-h-screen`on the outer wrapper with a solid background color — no transparency. |
|
51
|
|
|
52
|
- Build data visualizations with inline SVG (donut charts, bar charts, etc.). Avoid heavy charting libraries — infographic charts are decorative and specific, not interactive. |
|
53
|
- Use`lucide-react`icons extensively — they compress meaning into small spaces and are pre-installed in the mockup sandbox. |
|
54
|
|
|
55
|
- Apply strong typographic hierarchy: large headline numbers, medium section headers, small body text. |
|
56
|
- Use color intentionally: 1 primary color, 1-2 accent colors, and neutral tones. Color should encode meaning (categories, income/expense, good/bad), not just decorate. |
|
57
|
|
|
58
|
- Add visual separators between sections (lines, color blocks, spacing) to create clear reading flow. |
|
59
|
- Include a "key insight" callout — one highlighted finding that the viewer gets within 3 seconds. |
|
60
|
|
|
61
|
- Do NOT use any interactive elements (hover states, clicks, animations). The output is a static image. |
|
62
|
|
|
63
|
### 4. Delegate to the Design Subagent (Optional) |
|
64
|
|
|
65
|
For best visual results on complex infographics, delegate the component build to a DESIGN subagent. |
|
66
|
|
|
67
|
The brief should include: |
|
68
|
|
|
69
|
- The infographic type and all pre-computed data (every number, label, section title, percentage) |
|
70
|
- The target dimensions (width x approximate height) |
|
71
|
|
|
72
|
- The target file path in the mockup sandbox |
|
73
|
- Any brand colors or style preferences from the user |
|
74
|
|
|
75
|
- The instruction: "Build this as a single static React component. No interactivity, no animations, no hover states. Use a fixed width container. Use inline SVG for any charts or data visualizations. The component will be exported as a static image." |
|
76
|
- "Do not use emojis anywhere in the design" |
|
77
|
|
|
78
|
Pass via`relevantFiles`: |
|
79
|
|
|
80
|
- The target component path |
|
81
|
- `artifacts/mockup-sandbox/src/index.css`(for Tailwind theme tokens) |
|
82
|
|
|
83
|
-`artifacts/mockup-sandbox/package.json` (for available dependencies) |
|
84
|
|
|
85
|
For data-heavy infographics (like financial summaries), it's often faster and more accurate to build the component directly rather than delegating — the data is specific and structured, and the design subagent might misrepresent numbers. |
|
86
|
|
|
87
|
### 5. Restart the Workflow |
|
88
|
|
|
89
|
After creating the component file, restart the mockup sandbox workflow so the Vite plugin discovers the new file and registers it in the component registry: |
|
90
|
|
|
91
|
```javascript |
|
92
|
|
|
93
|
await restartWorkflow({ workflowName: "artifacts/mockup-sandbox: Component Preview Server" }); |
|
94
|
|
|
95
|
``` |
|
96
|
|
|
97
|
Then wait 3-5 seconds for the server to restart and the component registry to regenerate. The Vite plugin uses file watching + fast-glob to discover components — a restart ensures the new file is picked up reliably. |
|
98
|
|
|
99
|
### 6. Export as Static Image |
|
100
|
|
|
101
|
Screenshot the component using the correct path format: |
|
102
|
|
|
103
|
```javascript |
|
104
|
|
|
105
|
screenshot({ |
|
106
|
|
|
107
|
artifact_dir_name: "mockup-sandbox", |
|
108
|
|
|
109
|
path: "/preview/infographics/ComponentName", |
|
110
|
|
|
111
|
viewport_size: [1050, 1600], |
|
112
|
|
|
113
|
save_to: "exports/infographic-name.jpg" |
|
114
|
|
|
115
|
}); |
|
116
|
|
|
117
|
``` |
|
118
|
|
|
119
|
### Critical path rules |
|
120
|
|
|
121
|
- The `path`must NOT include`/__mockup` — the screenshot tool automatically prepends the artifact's preview path (`/__mockup`). If you include it, the URL will be `/__mockup/__mockup/preview/...`which shows the wrong page. |
|
122
|
- Correct:`path: "/preview/infographics/TransaccionesMarzo"` |
|
123
|
|
|
124
|
- Wrong: `path: "/__mockup/preview/infographics/TransaccionesMarzo"` |
|
125
|
|
|
126
|
### Viewport sizing tips |
|
127
|
|
|
128
|
- Start with a generous height (1500-1600px) to capture the full infographic on the first attempt. |
|
129
|
- If the bottom is cut off, increase the height by 100-200px and retake. |
|
130
|
|
|
131
|
- Match the width to the component's fixed width plus a small margin (e.g., component is `w-[1000px]`→ use viewport width 1050). |
|
132
|
- It's much easier to start tall and have whitespace at the bottom than to guess short and miss content. |
|
133
|
|
|
134
|
**First screenshot may be blank:** If the very first screenshot after restart shows a blank/white page, the Vite dev server may still be initializing. Wait a few more seconds and retake. |
|
135
|
|
|
136
|
### 7. Present to User |
|
137
|
|
|
138
|
Present the exported image via`present_asset`. Mention that the component is also viewable as a live page in the mockup sandbox if they want to iterate. |
|
139
|
|
|
140
|
## Component Template |
|
141
|
|
|
142
|
Minimal structural template showing the anatomy: |
|
143
|
|
|
144
|
```tsx |
|
145
|
|
|
146
|
import { ArrowDownLeft, ArrowUpRight, Wallet } from "lucide-react"; |
|
147
|
|
|
148
|
function formatMoney(n: number) { |
|
149
|
|
|
150
|
return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 2 }); |
|
151
|
|
|
152
|
} |
|
153
|
|
|
154
|
export function ExampleInfographic() { |
|
155
|
|
|
156
|
return ( |
|
157
|
|
|
158
|
<div className="w-[1000px] min-h-screen bg-slate-50 p-12 font-sans"> |
|
159
|
|
|
160
|
{/* Header with gradient background */} |
|
161
|
|
|
162
|
<header className="rounded-xl bg-gradient-to-br from-blue-900 to-blue-700 p-8 text-white mb-8"> |
|
163
|
|
|
164
|
<h1 className="text-3xl font-bold">Title Here</h1> |
|
165
|
|
|
166
|
<p className="mt-1 text-blue-200">Subtitle or context</p> |
|
167
|
|
|
168
|
</header> |
|
169
|
|
|
170
|
{/* Key metrics row */} |
|
171
|
|
|
172
|
<div className="flex gap-4 mb-8"> |
|
173
|
|
|
174
|
{/* Stat cards with colored left borders */} |
|
175
|
|
|
176
|
</div> |
|
177
|
|
|
178
|
{/* Visualization sections */} |
|
179
|
|
|
180
|
<section className="rounded-xl bg-white p-6 shadow-sm mb-8"> |
|
181
|
|
|
182
|
{/* Inline SVG charts, data tables, icon grids */} |
|
183
|
|
|
184
|
</section> |
|
185
|
|
|
186
|
{/* Key insight callout */} |
|
187
|
|
|
188
|
<div className="rounded-xl bg-blue-50 border border-blue-200 p-5 mb-8"> |
|
189
|
|
|
190
|
<strong>Key Insight:</strong> The most important finding goes here. |
|
191
|
|
|
192
|
</div> |
|
193
|
|
|
194
|
{/* Footer / Source */} |
|
195
|
|
|
196
|
<footer className="border-t border-slate-200 pt-4 text-sm text-slate-400 flex justify-between"> |
|
197
|
|
|
198
|
<span>Source: Data Source Name</span> |
|
199
|
|
|
200
|
<span>Generated: Date</span> |
|
201
|
|
|
202
|
</footer> |
|
203
|
|
|
204
|
</div> |
|
205
|
|
|
206
|
); |
|
207
|
|
|
208
|
} |
|
209
|
|
|
210
|
``` |