Lab Report Specimen Cards Features Block for React

The plates and the readings share their data. The histogram's bands are SIZE_BANDS, the scatter's points are POINTS (set out to flag an outlier), the bars are THICKNESS and the wave is made from PEAK_G. The particle count, the outlier count, the mean and the thinnest and thickest spots are all calculated from those, so a reading never disagrees with its plate. Texts such as the frequency are plain strings in SPECS.

Each plate is an image with a text description of what it shows ("Hardness against temperature: 13 points sloping down, 2 of them outliers"), built from the same data. The three readings under it are real text, so the numbers never depend on the drawing. The cards are a list, and each test name is a heading.

A pass and a fail you can only tell apart by colour fail for some readers and on some themes. The badge says the words, "Within limits" outlined and "Retest" filled a step darker, so the state reads in any preset and in greyscale. Set retest on a spec to change it.

The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. Each card is a frame with + marks on its corners, which overshoot the card slightly, so the cards are kept a step apart and inset from the rails to keep neighbouring lines from touching.

The header fades up once when the page loads, with a CSS transition. The plates are still drawings. With reduced motion the transition is off and the section simply appears.

The cards stack in one column, each at the full width, with the plate keeping its proportions and the readings on one line each. Nothing scrolls sideways at 320 pixels.