Heatmap

Heatmap renders a subtle intensity grid for activity, deploys, usage density, or error frequency. Its default intensity uses the shared chart blue; explicit semantic tones remain available.

#Default usage

<Heatmap
  ariaLabel="Deploy activity by hour"
  data={[
    { day: "Mon", hour: "09", value: 2 },
    { day: "Mon", hour: "10", value: 8 },
    { day: "Tue", hour: "09", value: 5 },
    { day: "Tue", hour: "10", value: 11 },
    { day: "Wed", hour: "09", value: 3 },
    { day: "Wed", hour: "10", value: 7 },
  ]}
  tone="info"
  valueKey="value"
  xKey="day"
  yKey="hour"
/>

#Import

import { Heatmap } from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Pass ariaLabel or aria-label. Each cell includes an SVG title and label containing its x category, y category, and value.

#API

• data: records for each cell.
• xKey: horizontal category.
• yKey: vertical category.
• valueKey: numeric intensity field.
• ariaLabel: accessible chart label.
• emptyLabel: empty state copy.
• tone: default, success, info, warning, or error.
• className: style hook for layout.
• Legacy labelKey remains supported for single-row heatmaps.

#Styling

Heatmap uses .eui-heatmap, .eui-heatmap__cell, and .eui-chart__empty. Prefer tone for semantic intensity and use className only for surrounding layout.