<!-- ghit#filepath: /Users/jagadeesh/personal/projects/grantfox/.issues-work --> ## 📌 Description `src/components/treasuryOverviewPage/MetricCard.tsx` displays a static label, value, and description. Add an optional `trend` prop that accepts an array of numeric data points and renders a minimal SVG sparkline inside the card, with a `+N%` / `-N%` badge showing the change from the first to the last data point. The sparkline must honor `prefers-reduced-motion` by showing a flat line when motion is disabled. > 💡 **Why it matters:** Treasury managers need at-a-glance trend context (rising or falling active streams) without navigating to a separate analytics view. ## 🧩 Requirements and context - Add `trend?: number[]` and `trendLabel?: string` props to `MetricCard`. - Render a 60×24 SVG polyline computed from normalized data points. - Compute `trendPercent = ((last - first) / first) * 100` and show a `+N%` green badge or `-N%` red badge. - Use `usePrefersReducedMotion` from `src/hooks/usePrefersReducedMotion.ts`; show a flat horizontal line when `true`. - Make the sparkline `aria-hidden` and expose `trendLabel` via `aria-label` on the badge. - Guard against `trend.length < 2` or all-zero arrays (show nothing). **Non-functional requirements** - Must be secure, tested, and documented. - Should be efficient and easy to review. ## 🛠️ Suggested execution **1. Fork the repo and create a branch** ```bash git checkout -b feat/metric-card-sparkline ``` **2. Implement changes** - Write/modify the relevant source: `src/components/treasuryOverviewPage/MetricCard.tsx` - Write comprehensive tests: `src/components/treasuryOverviewPage/MetricCard.test.tsx` - Add documentation: TSDoc on `trend` and `trendLabel` props - Validate security assumptions: `trend` values are numbers from the API; validate with `Number.isFinite` before rendering **3. Test and commit** - Run tests: ```bash npm run test ``` - Cover edge cases: empty array, single data point, all-equal values (0% change), negative trend - Include test output and security notes in the PR description. **Example commit message** ``` feat(dashboard): add optional sparkline trend visualization to MetricCard ``` ## ✅ Acceptance criteria - [ ] `trend` prop renders an SVG polyline in the card - [ ] `trendPercent` badge shows correct sign and value - [ ] Reduced-motion path shows a flat line - [ ] `trend.length < 2` renders no sparkline (no crash) - [ ] `aria-hidden` on SVG and `aria-label` on the badge ## 🔒 Security notes Validate each element of `trend` with `Number.isFinite`; non-finite values in polyline coordinates cause broken SVG output but no security risk. ## 📋 Guidelines - **Minimum 95% test coverage** - **Clear documentation** - **Timeframe: 96 hours**