mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-31 20:12:16 +08:00
9ba064174a
* feat: removing old webapp skills * feat: adding sync of skills from webapps to afv * feat: adding the first iteration of skills * feat: pin template deps to latest npm versions and flatten skill folders - Add pin-template-deps.js to resolve "*" deps to exact npm versions - Integrate pinning into sync-template-skills npm script - Remove check-template-skills-versions.js (no longer needed) - Simplify workflow to single sync step - Flatten skill output: one folder per skill with cleaned names Made-with: Cursor * fix: resolve skill validation errors - Move .template-versions.json from skills/ to root - Shorten skill names to meet 64-char limit: - salesforce-webapp-feature-micro-frontend-generating-micro-frontend-lwc → salesforce-webapp-micro-frontend-lwc - salesforce-webapp-feature-react-agentforce-conversation-client-integrating-agentforce-conversation-client → salesforce-webapp-agentforce-conversation-client - salesforce-webapp-feature-react-file-upload-implementing-file-upload → salesforce-webapp-react-file-upload - Expand descriptions to meet 20-word minimum with trigger context * Add webapp skills from template, sync script updates - Rename skill folders from salesforce-webapp-* to *-webapp-* convention - Update sync-template-skills.js: set SKILL.md front matter name to dest folder - Remove sync-template-skills workflow and pin-template-deps script - Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill - Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux Made-with: Cursor * Align SKILL.md front matter name with folder for all webapp skills Made-with: Cursor * Fix skill validation: description length and trigger context for configuring-webapp-metadata, creating-webapp Made-with: Cursor * Rename sync script to sync-webapp-skills, drop manifest file - Rename sync-template-skills.js to sync-webapp-skills.js - Update package.json script to sync-webapp-skills - Remove .synced-template-skills.json creation and add to .gitignore Made-with: Cursor * Revert sync-react-b2e-sample and sync-react-b2x-sample to upstream version Made-with: Cursor * Sync script: pin b2e and b2x to latest, sync skills from template - Pin both template packages to latest in sync-webapp-skills.js - Update package.json / package-lock.json (b2x 1.109.0) - Sync skills: managing-webapp-agentforce-conversation-client, bar-line-chart, remove building-webapp-analytics-charts and integrating-webapp-agentforce-conversation-client - Minor skill content updates Made-with: Cursor * Remove interactive map, weather widget, and Unsplash skills (no longer in template) Made-with: Cursor --------- Co-authored-by: Hemant Singh Bisht <hsinghbisht@salesforce.com>
73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
---
|
|
name: building-webapp-data-visualization
|
|
description: Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.
|
|
---
|
|
|
|
# Data Visualization
|
|
|
|
## When to Use
|
|
|
|
Use this skill when:
|
|
- Adding charts (donut, pie, bar, line, area) to a dashboard or analytics page
|
|
- Displaying KPI/metric stat cards with trend indicators
|
|
- Building a dashboard layout with mixed chart types and summary cards
|
|
|
|
---
|
|
|
|
## Step 1 — Determine the visualization type
|
|
|
|
Identify what the user needs:
|
|
|
|
- **Donut / pie chart** — categorical breakdown (e.g. issue types, status distribution)
|
|
- **Bar chart** — comparison across categories or time periods
|
|
- **Line / area chart** — trends over time
|
|
- **Stat card** — single KPI metric with optional trend indicator
|
|
- **Combined dashboard** — stat cards + one or more charts
|
|
|
|
If unclear, ask:
|
|
|
|
> "What data should the chart display, and would a donut chart, bar chart, line chart, or stat cards work best?"
|
|
|
|
---
|
|
|
|
## Step 2 — Install dependencies
|
|
|
|
All chart types in this skill use **recharts**. Install once from the web app directory:
|
|
|
|
```bash
|
|
npm install recharts
|
|
```
|
|
|
|
Recharts is built on D3 and provides declarative React components. No additional CSS is needed.
|
|
|
|
---
|
|
|
|
## Step 3 — Choose implementation path
|
|
|
|
Read the corresponding guide:
|
|
|
|
- **Bar chart** — read `implementation/bar-line-chart.md` (categorical data)
|
|
- **Line / area chart** — read `implementation/bar-line-chart.md` (time-series data)
|
|
- **Donut / pie chart** — read `implementation/donut-chart.md`
|
|
- **Stat card with trend** — read `implementation/stat-card.md`
|
|
- **Dashboard layout** — read `implementation/dashboard-layout.md`
|
|
|
|
---
|
|
|
|
## Verification
|
|
|
|
Before completing:
|
|
|
|
1. Chart renders with correct data and colors.
|
|
2. Chart is responsive (resizes with container).
|
|
3. Legend labels match the data categories.
|
|
4. Stat card trends display correct positive/negative indicators.
|
|
5. Run from the web app directory:
|
|
|
|
```bash
|
|
cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
|
|
```
|
|
|
|
- **Lint:** MUST result in 0 errors.
|
|
- **Build:** MUST succeed.
|