A grid of squares where each part owns as many squares as its share. Use it for a share you want people to feel, such as 65 of every 100 users.
It is plain svg, so it does not need any extra package.
The whole grid is the sum of the values, 100 squares by default.
With total, the values are measured against it and the squares left over stay empty.
fillDirection sets the order the squares are given out in.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the parts of the whole | WaffleCell[] | WaffleCell | - |
| rows | number of rows | number | - | 10 |
| columns | number of columns | number | - | 10 |
| total | what the whole grid stands for, the sum of the values when missing | number | - | - |
| fillDirection | the order squares are given out in | string | 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' | left-to-right |
| gap | space between squares, in pixels | number | - | 2 |
| cellRadius | corner radius of a square, in pixels | number | - | 2 |
| size | width of the grid, in pixels | number | - | 220 |
| emptyColor | color of the squares nobody owns | string | - | theme color |
| withLegend | list the parts below the grid | boolean | - | true |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type WaffleCell = {
name: string
value: number // squares are given out in proportion to it
color?: string // any CSS color, a theme color when missing
}
The ref points at the root div.
With aria-label or aria-labelledby the root is a group. The legend lists every part with its value as text, so the grid itself is hidden from assistive technology. Without the legend, the grid becomes an image named by the parts, such as "Chrome 65, Safari 25, Other 10".