historyPast[]RequiredforecastAhead[]Requiredformat(n: number) => string(n) => n.toLocaleString('en-US')unitstring''todaystring'Today'odds(t: number) => stringODDSlook'ink' | 'plain''ink'onRead(i: number) => voidThrough a ref: read()
usage.tsx
<OutlookCharthistory={history}forecast={forecast}/>
A whole page, ready to paste.
page.tsx
"use client"
import { OutlookChart } from "@/components/detent/components/outlook/OutlookChart"
import type { Ahead, Past } from "@/components/detent/components/outlook/OutlookChart"
const history: Past[] = [
{ label: "Oct 22", value: 410 },
{ label: "Oct 23", value: 435 },
{ label: "Oct 24", value: 428 },
{ label: "Oct 25", value: 460 },
{ label: "Oct 26", value: 482 },
]
const forecast: Ahead[] = [
{ label: "Oct 27", low: 470, high: 505 },
{ label: "Oct 28", low: 465, high: 530 },
{ label: "Oct 29", low: 470, high: 560 },
{ label: "Oct 30", low: 475, high: 595 },
]
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[640px]">
<OutlookChart history={history} forecast={forecast} unit="orders a day" onRead={(i) => console.log(i)} />
</div>
</main>
)
}