[core] Add `StatCard` component

[bharatkashyap]

API Shaping:

<StatCard
  title="Revenue" // Title for the stat card
  value={50000} // Total aggregated value
  unit="$" // Unit for the value (optional)
  precision={2} // Number of decimal places to show (optional)
  change={5} // Percent change (positive or negative)
  changeDuration="Since last month" // Duration for the change comparison, could be picked from date filters
  changeType="percentage" // Can be 'percentage' or 'absolute' change
  trendData={[10, 20, 30, 40, 50]} // Data array for trend line (e.g., a sparkline)
  trendType="positive" // Indicates positive or negative trend (could be used for styling)
  showTrend={true} // Flag to show or hide the trend line
/>

Figma: https://www.figma.com/design/14OEUnwh4ahMb2empYAEc8/Toolpad-UX?node-id=1538-177219&node-type=frame&t=IGyUoo5bh0IcuHEu-0

Benchmarks

Search keywords: