goalsGoal[]RequireddaysnumberRequiredtodaynumberRequireddayLabel(day: number) => string(d) => `Day ${d + 1}`mutedbooleanonDayChange(day: number | null) => voidonOver(ids: string[]) => voidThrough a ref: point(), scrub(), sweep()
usage.tsx
<GoalNumeralsgoals={goals}days={days}today={today}/>
A whole page, ready to paste.
page.tsx
"use client"
import { ChartCard, GoalNumerals, compact } from "@/components/detent/components/charts/GoalNumerals"
import type { Goal } from "@/components/detent/components/charts/GoalNumerals"
import { useState } from "react"
const goals: Goal[] = [
{ id: "signups", label: "Signups", goal: 1000, series: [120, 260, 410, 530, 680] },
{ id: "trials", label: "Trials", goal: 300, series: [40, 95, 150, 210, 335] },
]
export default function Page() {
const [day, setDay] = useState<number | null>(null)
const at = (g: Goal) => g.series[Math.min(day ?? 4, g.series.length - 1)]
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[420px]">
<ChartCard
title="Goals this week"
table={{
head: ["Goal", "Now", "Target"],
rows: goals.map((g) => [g.label, compact(at(g)), compact(g.goal)]),
}}
>
<GoalNumerals
goals={goals}
days={7}
today={4}
dayLabel={(d) => `Oct ${d + 1}`}
onDayChange={setDay}
/>
</ChartCard>
</div>
</main>
)
}