Stat Card with Sparkline

Extends StatCard with an inline sparkline chart that shows the recent trend for a metric. The sparkline renders at the bottom 60% of the card.

Playground

Props

Inherits all StatCard props, plus:

Prop	Type	Default	Description
sparklineData	any[]	[]	Array of data points for the sparkline
sparklineExtractor	function	—	Extract the numeric value from each data point. See sparklineExtractor
sparklineWindow	number	30000	Time window in milliseconds. Only points within this window are rendered
graphLineColor	string	"#3b82f6"	Sparkline line and area color

---

sparklineExtractor

A function that extracts the Y-axis value from each data point. Each data point must also have a timestamp field.

// data: [{ timestamp: 123, temperature: 22.5 }, ...]
sparklineExtractor={(point) => point.temperature}

// nested data
sparklineExtractor={(point) => point.sensors.primary.value}

If not provided, the sparkline won't render and a console warning is logged.

---

sparklineWindow

Only data points within the last sparklineWindow milliseconds are shown. This keeps the sparkline focused on recent activity.

sparklineWindow={60000}   // last 60 seconds
sparklineWindow={300000}  // last 5 minutes
sparklineWindow={3600000} // last hour

---

Graph Color Priority

The sparkline color is resolved in this order:

1. Explicit graphLineColor prop (if set)
2. Active alert zone color (if zones are configured)
3. Default: #3b82f6

The line renders at 50% opacity and the area fill at 15% opacity.

---

With Hooks

import { useRelayTimeSeries, useRelayLatest, StatCardWithGraph } from "@relay-x/ui";

function TemperatureCardWithTrend() {
  const latest = useRelayLatest({
    deviceIdent: "sensor_01",
    metric: "temperature",
    timeRange: { start: Date.now() - 86400000, end: Date.now() },
  });

  const { data } = useRelayTimeSeries({
    deviceIdent: "sensor_01",
    metrics: ["temperature"],
    mode: "both",
    timeRange: { start: Date.now() - 60000, end: Date.now() },
  });

  return (
    <StatCardWithGraph
      data={latest}
      label="Temperature"
      formatValue={(v) => `${v}°C`}
      sparklineData={data}
      sparklineExtractor={(p) => p.temperature}
      sparklineWindow={60000}
      showLastUpdated
    />
  );
}