Function MetricStatCard

MetricStatCard(
    __namedParameters: {
        color: string;
        formatTrendValue?: (value: number) => string;
        highlightIndex?: number;
        label: string;
        series: (number | null)[];
        trendPct: number | null;
        trendPoints?: readonly MetricTrendPoint[];
        unit: string | null;
        value: string;
        valuePlaceholder?: boolean;
        valuePrefix?: string | null;
        variant?: "default" | "technique";
    },
): Element
A metric stat card: a label, a big value + unit, an optional signed-percent trend badge, and a sparkline of the metric across recent sessions. The trend badge and sparkline are tinted by color (typically a metric-category colour), so direction is read from the +/− sign, not red/green.

Pure/presentational — the caller formats value/unit, computes trendPct, and supplies the chronological series (oldest → newest). Used by the tracking Overview tab and the portal session Summary tab.

Pass trendPoints (+ formatTrendValue) to opt into the larger chart with a value axis and a date axis, shown on wide layouts; without it the card keeps the compact sparkline. trendPoints mirror series plus each point's date; formatTrendValue formats the y-axis ticks (the caller owns units). The chart degrades to the bare line below the lg breakpoint.
Parameters
- __namedParameters: {
      color: string;
      formatTrendValue?: (value: number) => string;
      highlightIndex?: number;
      label: string;
      series: (number | null)[];
      trendPct: number | null;
      trendPoints?: readonly MetricTrendPoint[];
      unit: string | null;
      value: string;
      valuePlaceholder?: boolean;
      valuePrefix?: string | null;
      variant?: "default" | "technique";
  }
Returns Element
- Defined in ui/src/metric-stat-card.tsx:26

Function MetricStatCard

Parameters

Returns Element

Settings