Heatmap Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { HeatmapCells, HeatmapChart, HeatmapInteractionBoundary, HeatmapInteractionProvider, HeatmapLegend, HeatmapTooltip, HeatmapXAxis, HeatmapYAxis } from "@bklitui/ui/charts"
4import { HeatmapCells, HeatmapChart, HeatmapInteractionBoundary, HeatmapInteractionProvider, HeatmapLegend, HeatmapTooltip, HeatmapXAxis, HeatmapYAxis } from "@/components/charts"
5 
6const data = [
7  {
8    bin: 0,
9    bins: [
10      { bin: 0, count: 2, date: new Date(2024, 0, 1) },
11      { bin: 1, count: 0, date: new Date(2024, 0, 2) },
12      { bin: 2, count: 3, date: new Date(2024, 0, 3) },
13      { bin: 3, count: 1, date: new Date(2024, 0, 4) },
14      { bin: 4, count: 4, date: new Date(2024, 0, 5) },
15      { bin: 5, count: 0, date: new Date(2024, 0, 6) },
16      { bin: 6, count: 1, date: new Date(2024, 0, 7) },
17    ],
18  },
19  {
20    bin: 1,
21    bins: [
22      { bin: 0, count: 1, date: new Date(2024, 0, 8) },
23      { bin: 1, count: 2, date: new Date(2024, 0, 9) },
24      { bin: 2, count: 0, date: new Date(2024, 0, 10) },
25      { bin: 3, count: 3, date: new Date(2024, 0, 11) },
26      { bin: 4, count: 2, date: new Date(2024, 0, 12) },
27      { bin: 5, count: 1, date: new Date(2024, 0, 13) },
28      { bin: 6, count: 0, date: new Date(2024, 0, 14) },
29    ],
30  },
31];
32 
33export default function Component() {
34  return (
35    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
36      <div className="w-full max-w-3xl">
37        <HeatmapInteractionProvider>
38  <HeatmapInteractionBoundary>
39    <div className="flex w-full flex-col items-stretch gap-3">
40      <HeatmapChart className="w-full" data={data} layout="fluid">
41        <HeatmapCells />
42        <HeatmapXAxis />
43        <HeatmapYAxis />
44        <HeatmapTooltip />
45      </HeatmapChart>
46      <HeatmapLegend />
47    </div>
48  </HeatmapInteractionBoundary>
49</HeatmapInteractionProvider>
50      </div>
51    </main>
52  )
53}