Live metric cards

Metric cards with trend charts and one live value.

Usage

import { LiveMetricCards } from '@/components/blocks/stats-02'


<LiveMetricCards />


// Bring your own numbers
<LiveMetricCards
  heading="Checkout, right now"
  metrics={[
    {
      id: 'orders',
      label: 'Orders per hour',
      value: 312,
      delta: { value: 8.2, format: { decimals: 1, suffix: '%' }, period: 'vs last week' },
      series: [240, 256, 249, 271, 288, 280, 297, 305, 312],
    },
    {
      id: 'refunds',
      label: 'Refund rate',
      value: 1.4,
      format: { decimals: 1, suffix: '%' },
      delta: { value: -0.3, format: { decimals: 1, suffix: ' pts' }, higherIsBetter: false },
      series: [1.9, 1.8, 1.7, 1.7, 1.6, 1.5, 1.4],
      chart: 'bars',
    },
  ]}
  live={{ metricId: 'orders', interval: 4000 }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/stats-02

npx shadcn@latest add @pastaui-pro/stats-02

yarn dlx shadcn@latest add @pastaui-pro/stats-02

bunx --bun shadcn@latest add @pastaui-pro/stats-02

Source

Props

Live metric cards props
Prop	Type	Default	Description
metrics	StatMetric[]	= Four sample metrics	Each metric takes an id, label, value, series (oldest first, ending at the value), an optional format ({ decimals?, prefix?, suffix? }), chart ('line' or 'bars') and delta.
metrics[].delta	{ value: number; format?: StatFormat; period?: string; higherIsBetter?: boolean }	= undefined	Signed change shown as a chip. It turns green when the change is good news and red otherwise; set higherIsBetter to false for numbers like latency.
live	{ metricId: string; interval?: number; volatility?: number; seed?: number } \| null	= { metricId: 'active', interval: 3200 }	Which card ticks, how often in milliseconds and how far each step may wander within the series range. Updates are a deterministic, seeded walk around the metric value. Pass null for a static grid.
eyebrow	string	= 'Strideloom training app'	Small label above the heading.
heading	string	= 'Every workout, the moment it starts'	Section heading, rendered as an h2.
description	string	= Sample description	Muted supporting text under the heading.
className	string	= undefined	Extra classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.