Waffle Chart | Zyeon UI

Every category behind the waffle, in fill order. One cell is 1% of 4,820 seats, about 48.2 seats.
Category	Value	Share	Cells	Rounding
Team plan	4,820 seats	100%	100 of 100	exactly proportional

status="ready" · 10×10 = 100 cells, one cell = 1%. The legend is clickable and keyboard-driven: arrows move between categories, Enter pins one, Esc clears it.

Signups by channel

Last 30 days · one cell = 1% of signups

10 × 10 = 100 cells · 1 cell = 1% (84.2 signups)

8,420 signups in total

Every category behind the waffle, in fill order. One cell is 1% of 8,420 signups, about 84.2 signups.
Category	Value	Share	Cells	Rounding
Direct	2,999 signups	35.6%	36 of 100	rounded up from 35.62 cells
Organic search	2,303 signups	27.4%	27 of 100	rounded down from 27.35 cells
Paid social	1,669 signups	19.8%	20 of 100	rounded up from 19.82 cells
Referral	1,145 signups	13.6%	13 of 100	rounded down from 13.6 cells
Newsletter	304 signups	3.6%	4 of 100	rounded up from 3.61 cells

status="empty" · a valid payload with nothing in it — said differently from "loading" and "failed to load".

Signups by channel

Last 30 days · one cell = 1% of signups

No breakdown yet

A waffle needs at least one category worth more than nothing; each of the 100 cells is a countable slice of it.

status="loading" · the skeleton reuses the same grid geometry, so nothing jumps when the data lands; aria-hidden, no timers.

Signups by channel

Last 30 days · one cell = 1% of signups

status="error" · the fetch failed. "Try again" only appears when onRetry is passed, and clicking it switches to ready.

Signups by channel

Last 30 days · one cell = 1% of signups

Couldn't load this breakdown

The data source didn't respond.

Degenerate data · one category at 100%: the whole grid is a single colour, and the summary says so outright instead of making you read a percentage.

Seats by plan

Every seat on one plan

10 × 10 = 100 cells · 1 cell = 1% (48.2 seats)

4,820 seats in total

Every category behind the waffle, in fill order. One cell is 1% of 4,820 seats, about 48.2 seats.
Category	Value	Share	Cells	Rounding
Team plan	4,820 seats	100%	100 of 100	exactly proportional

Degenerate data · a three-way tie at 1,200 votes each: 100/3 = 33.33 cells, all three floor to 33, and the one leftover cell goes to the first in contract order — the same data always paints the same picture.

Board vote

1,200 votes each — the leftover cell goes to the first option

10 × 10 = 100 cells · 1 cell = 1% (36 votes)

3,600 votes in total

Every category behind the waffle, in fill order. One cell is 1% of 3,600 votes, about 36 votes.
Category	Value	Share	Cells	Rounding
Keep as is	1,200 votes	33.3%	34 of 100	rounded up from 33.33 cells
Revise	1,200 votes	33.3%	33 of 100	rounded down from 33.33 cells
Replace	1,200 votes	33.3%	33 of 100	rounded down from 33.33 cells

Degenerate data · a long tail: Partners at 0.6% wins a cell on the largest remainder, while Podcast at 0.25% and Print at 0.15% earn none. smallShare="reserve" (the default) borrows one cell each from the largest band, Search, and dashes the borrowed cells to say they are no longer to scale.

Attribution by source

10,000 attributed sessions · three sources are under 1%

10 × 10 = 100 cells · 1 cell = 1% (100 sessions)

10,000 sessions in total

Podcast, Print earned less than one cell and are drawn one cell wide anyway — dashed, because those squares are no longer proportional.

Every category behind the waffle, in fill order. One cell is 1% of 10,000 sessions, about 100 sessions.
Category	Value	Share	Cells	Rounding
Search	6,000 sessions	60%	58 of 100	rounded down from 60 cells
Docs	2,500 sessions	25%	25 of 100	exactly proportional
Blog	1,400 sessions	14%	14 of 100	exactly proportional
Partners	60 sessions	0.6%	1 of 100	rounded up from 0.6 cells
Podcast	25 sessions	0.25%	1 of 100	worth 0.25 cells, given 1 so it stays on the grid
Print	15 sessions	0.15%	1 of 100	worth 0.15 cells, given 1 so it stays on the grid

The same long tail with smallShare="omit": the grid stays strictly proportional (Search keeps its 60 cells) and the two tail sources leave it, named in the caption and the sr-only table instead — both answers cost something, and the component will not quietly pick for you.

Attribution by source

10,000 attributed sessions · three sources are under 1%

10 × 10 = 100 cells · 1 cell = 1% (100 sessions)

10,000 sessions in total

Podcast, Print are worth less than one cell and are not painted; the exact numbers are in the table.

Every category behind the waffle, in fill order. One cell is 1% of 10,000 sessions, about 100 sessions.
Category	Value	Share	Cells	Rounding
Search	6,000 sessions	60%	60 of 100	exactly proportional
Docs	2,500 sessions	25%	25 of 100	exactly proportional
Blog	1,400 sessions	14%	14 of 100	exactly proportional
Partners	60 sessions	0.6%	1 of 100	rounded up from 0.6 cells
Podcast	25 sessions	0.25%	0 of 100	worth 0.25 cells — too little to paint
Print	15 sessions	0.15%	0 of 100	worth 0.15 cells — too little to paint

Degenerate data · an explicit denominator (298 of 480 seats assigned): the remaining 182 become muted unallocated cells instead of being divided up among the three teams. The labels are deliberately over-long — the legend truncates, the full name stays in the accessible table.

Seat allocation

480 licensed seats · 298 assigned

10 × 10 = 100 cells · 1 cell = 1% (4.8 seats)

480 seats in total

Every category behind the waffle, in fill order. One cell is 1% of 480 seats, about 4.8 seats.
Category	Value	Share	Cells	Rounding
Engineering (including contractors and interns)	164 seats	34.2%	34 of 100	rounded down from 34.17 cells
Customer success & support	92 seats	19.2%	19 of 100	rounded down from 19.17 cells
Sales, marketing and partnerships	42 seats	8.8%	9 of 100	rounded up from 8.75 cells
Unallocated	182 seats	37.9%	38 of 100	rounded up from 37.92 cells

Degenerate data · twelve categories: --chart-1..5 is only five colours, so the palette repeats from the sixth. Bands 6-10 add a slash and bands 11-12 a dot — still separable in greyscale and to a colour-blind reader.

Repository by language

1,000 tracked files · the palette wraps after five

10 × 10 = 100 cells · 1 cell = 1% (10 files)

1,000 files in total

Every category behind the waffle, in fill order. One cell is 1% of 1,000 files, about 10 files.
Category	Value	Share	Cells	Rounding
TypeScript	220 files	22%	22 of 100	exactly proportional
TSX	160 files	16%	16 of 100	exactly proportional
MDX	130 files	13%	13 of 100	exactly proportional
JSON	110 files	11%	11 of 100	exactly proportional
CSS	90 files	9%	9 of 100	exactly proportional
Shell	80 files	8%	8 of 100	exactly proportional
Python	60 files	6%	6 of 100	exactly proportional
YAML	50 files	5%	5 of 100	exactly proportional
Markdown	40 files	4%	4 of 100	exactly proportional
SQL	30 files	3%	3 of 100	exactly proportional
Dockerfile	20 files	2%	2 of 100	exactly proportional
Makefile	10 files	1%	1 of 100	exactly proportional

Degenerate data · the parts add up to 120 against a stated total of 100: both the contract and the layout refuse to draw, and name the two numbers that disagree rather than painting a 120% grid.

Cluster capacity

Reported figures — the parts overflow the stated total

This breakdown can't be drawn

The parts add up to 120, more than the stated total of 100. One of the two numbers is wrong — a waffle cannot draw 110% of a whole.

Degenerate data · the categories are all there and every value is 0: with a total of zero there is no whole to cut, so it takes the zero copy rather than an error state — worded differently again from status="empty".

Incidents by severity

No incidents recorded in this window

Nothing to divide up yet

All 3 categories measured zero, so there is no whole to cut into 100 cells.

Geometry · the same ready data at columns=5 / rows=20 / flow="column" / origin="bottom-left": a cell is still 1%, but the grid fills from the bottom left like a tank — and the summary spells the new fill order out.

Signups by channel

Last 30 days · one cell = 1% of signups

5 × 20 = 100 cells · 1 cell = 1% (84.2 signups)

8,420 signups in total

Every category behind the waffle, in fill order. One cell is 1% of 8,420 signups, about 84.2 signups.
Category	Value	Share	Cells	Rounding
Direct	2,999 signups	35.6%	36 of 100	rounded up from 35.62 cells
Organic search	2,303 signups	27.4%	27 of 100	rounded down from 27.35 cells
Paid social	1,669 signups	19.8%	20 of 100	rounded up from 19.82 cells
Referral	1,145 signups	13.6%	13 of 100	rounded down from 13.6 cells
Newsletter	304 signups	3.6%	4 of 100	rounded up from 3.61 cells