Graphs/Waffle Chart

Edit src/renderers/d3/composition/waffle.ts and save to see changes across all configurations

Tests: 26Sections: 5

Filter:

Container SizesSame 4-category dataset, different container dimensions

Tiny280×220 · 4 rows

Small350×250 · 4 rows

Medium500×350 · 4 rows

Large700×500 · 4 rows

Wide750×300 · 4 rows

Category CountVarying number of categories in the waffle

2 categories500×350 · 2 rows

4 categories500×350 · 4 rows

6 categories550×400 · 6 rows

8 categories600×450 · 8 rows

Config VariationsGrid size, square size, gap, and percentage display

gridSize: 8500×350 · 4 rows

gridSize: 10500×350 · 4 rows

gridSize: 12550×400 · 4 rows

squareSize: 15450×300 · 3 rows

squareSize: 25600×450 · 3 rows

gap: 1500×350 · 3 rows

gap: 4550×400 · 3 rows

showPercentages550×400 · 4 rows

Color SystemNamed palettes, highlights, and color schemes

Default (Categorical)500×350 · 4 rows

Purple Palette500×350 · 4 rows

Highlight: Chrome500×350 · 4 rows

Multi-Highlight500×350 · 4 rows

Edge CasesStress tests -- unusual data shapes and values

Single category (100%)500×350 · 1 rows

Two 50/50500×350 · 2 rows

Tiny slice (<2%)500×350 · 3 rows

Dominant (>90%)500×350 · 3 rows

All equal (4)500×350 · 4 rows