A KPI rail where selecting a tile drives a detail chart — the summary-then-detail dance every analytics screen reinvents.
Loading preview...
import { LineChart } from "@/components/ui/klyv-metric-spotlight-utils/components-LineChart-LineChart";
import { MetricSpotlight } from "@/components/ui/klyv-metric-spotlight";
import { type SpotlightMetric } from "@/components/ui/klyv-metric-spotlight";
function MetricSpotlightExample() {
return (
<MetricSpotlight
label="Key figures"
metrics={SPOTLIGHT}
className="w-full"
detail={(metric) => (
<LineChart
series={[{ id: metric.id, label: metric.label, values: metric.series }]}
categories={MONTHS}
label={`${metric.label} over seven months`}
format={money}
height={200}
showLegend={false}
smooth
/>
)}
/>
)
}
const SPOTLIGHT: SpotlightMetric[] = [
{
id: 'balance',
label: 'Balance',
value: 27829,
format: money,
delta: '4.2%',
trend: 'up',
caption: 'vs. last month',
series: [21400, 22100, 23050, 24200, 25600, 26400, 27829],
},
{
id: 'spending',
label: 'Spending',
value: 842,
format: money,
delta: '8.1%',
trend: 'down',
caption: 'vs. last month',
tone: 'danger',
series: [1180, 1090, 1020, 980, 940, 916, 842],
},
{
id: 'cashback',
label: 'Cashback',
value: 1154,
format: money,
delta: '12%',
trend: 'up',
caption: 'earned this year',
tone: 'success',
series: [420, 540, 640, 760, 890, 1020, 1154],
},
{
id: 'subscriptions',
label: 'Subscriptions',
value: 213,
format: money,
delta: '0%',
caption: '5 active',
tone: 'neutral',
series: [204, 204, 208, 208, 213, 213, 213],
},
]
const MONTHS = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']
const money = (value: number) => `$${value.toLocaleString('en-US')}`
export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><MetricSpotlightExample /></div></div>}