Encode intensity or deviation with sequential and divergent color scales.
Encode intensity or deviation with sequential and divergent color scales.
import { Heatmap } from '@vrum/ui';
<Heatmap
title={"Weekly activity"}
data={[{"x":"Mon","y":"Design","value":30},{"x":"Tue","y":"Design","value":40},{"x":"Wed","y":"Design","value":50},{"x":"Thu","y":"Design","value":60},{"x":"Fri","y":"Design","value":70},{"x":"Mon","y":"Engineering","value":35},{"x":"Tue","y":"Engineering","value":50},{"x":"Wed","y":"Engineering","value":65},{"x":"Thu","y":"Engineering","value":80},{"x":"Fri","y":"Engineering","value":95},{"x":"Mon","y":"Operations","value":40},{"x":"Tue","y":"Operations","value":60},{"x":"Wed","y":"Operations","value":80},{"x":"Thu","y":"Operations","value":100},{"x":"Fri","y":"Operations","value":120}]}
palette={"sequential"}
showValues={true}
width={600}
height={280}
showDataTable={false}
/>| Prop | Type | Default | Description |
|---|---|---|---|
data* | HeatmapDatum[] | none | Data used to render this component. |
palette | "sequential" | "divergent" | "sequential" | palette configuration. |
showValues | boolean | true | show values configuration. |
title | string | none | Heading shown above the content. |
description | string | none | Supporting explanation. |
width | number | 600 | Width used for the SVG viewBox. |
height | number | 300 | Height of the component in pixels. |
className | string | none | Additional CSS classes. |
colors | string[] | none | colors configuration. |
showLegend | boolean | none | show legend configuration. |
showDataTable | boolean | none | Expand the accessible data table. |
onPointClick | ((point: ChartPoint) => void) | none | Called when a chart point is activated with a pointer or keyboard. |
valueFormat | ((value: number) => string) | String | value format configuration. |
| Column | Row | Value |
|---|---|---|
| Mon | Design | 30 |
| Tue | Design | 40 |
| Wed | Design | 50 |
| Thu | Design | 60 |
| Fri | Design | 70 |
| Mon | Engineering | 35 |
| Tue | Engineering | 50 |
| Wed | Engineering | 65 |
| Thu | Engineering | 80 |
| Fri | Engineering | 95 |
| Mon | Operations | 40 |
| Tue | Operations | 60 |
| Wed | Operations | 80 |
| Thu | Operations | 100 |
| Fri | Operations | 120 |