Heatmap

import { ChartCard, Heatmap } from "ztd-charts";

const data = [
  {"day":"Mon","hour":"12am","orders":2},
  {"day":"Mon","hour":"3am","orders":1},
  {"day":"Mon","hour":"6am","orders":3},
  {"day":"Mon","hour":"9am","orders":16},
  {"day":"Mon","hour":"12pm","orders":22},
  {"day":"Mon","hour":"3pm","orders":16},
  // … 50 more rows
];

export function Example() {
  return (
    <ChartCard number="10" title="Heatmap" subtitle="Orders by weekday × hour" takeaway="Friday nights are the busiest" level="intermediate" replay>
      <Heatmap
        data={data}
        x="hour"
        y="day"
        value="orders"
      />
    </ChartCard>
  );
}