A grid heatmap (hour × day and similar shapes) with an adjustable visual scale in library colors.
Auto scaleFixed scale
import { Heatmap } from '@chanrg/4ui/echarts';<Heatmap {xLabels} {yLabels} {values} unit="ms" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Heatmap } from '@chanrg/4ui';import { Heatmap } from '@chanrg/4ui/echarts';<Heatmap {xLabels} {yLabels} {values} unit="ms" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
xLabels / yLabels | string[] | [] | Axis categories. |
values | [x, y, value][] | [] | Cell values; null renders empty. |
min / max | number | auto | Visual scale bounds. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Tooltip exposes exact cell values; the scale slider is keyboard-operable.