Treemap Stats Block for React

Edit FOLDERS at the top of the file: each is a name and its size in gigabytes, biggest first. The shares, the layout, the labels and the headline are computed from them. The tones in TONES are listed by rank, so with a different number of folders add or remove tones to match.

By repeated halving. The folders are split into two groups of about the same total, the box is cut along its longer side in the ratio of the groups, and each half is cut again until one folder is left in each box. That keeps the order of the list (the biggest folder at the start), never produces a sliver, and needs no library. It runs once when the module loads and writes each box as a position and size in percent, so there is no layout code in the browser.

A 16 by 7 map would be 343 pixels wide and 150 tall on a phone, too small for any label. The block computes a second layout for a square and shows that one below sm, with the five biggest boxes labelled; the other three are in the list. Only one of the two is shown at a time, and both are hidden from assistive technology because the list says the same in words.

Yes, through the list under it: a description list with each folder's name, its size and its share, in the order of the map. The boxes themselves are decorative. Text on the three darkest boxes is the page's background colour and text on the lighter ones is the foreground colour, so every label is readable in light and dark themes.

The map sits in a left-to-right box, so the biggest folder is always at the start of the line and the layout never mirrors; the header, the list and the shares follow the page direction, and the sizes and percents are wrapped in bdi elements so they never reorder.