#100 UI: Stats Card Component

open medium Created 2025-11-27 07:22 · Updated 2025-11-27 07:22

Description

Edit
Create 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 All
Loading audit history...