#100 UI: Stats Card Component
Description
EditCreate stats card component for dashboard metrics.
Component: api/ui/templates/components/stats_card/
Files:
- stats_card.html
- stats_card.css
- stats_card.js
Features:
- Display:
- Large metric value
- Label/title
- Icon (optional)
- Trend indicator (up/down arrow with %)
- Comparison period text
- Variants:
- Primary (colored background)
- Secondary (white with border)
- Mini (compact inline)
- Loading:
- Skeleton loading state
- Pulse animation
- Interactive:
- Clickable (link to detail page)
- Hover effect
- Tooltip with more details
Trend Calculation:
- Compare to previous period
- Green for increase (if positive is good)
- Red for decrease (if decrease is bad)
- Configurable: some metrics 'down is good'
JavaScript API:
- StatsCard.render(element, { value, label, icon, trend, trendPeriod })
- StatsCard.setLoading(element, boolean)
- StatsCard.update(element, newValue)
Animation:
- Count-up animation on value change
- Smooth trend arrow transition
With ultra attention to details and correctness.
Before closing: write comment summarizing implementation with screenshot.
Comments
Loading comments...
Context
Loading context...
Audit History
View AllLoading audit history...