Skip to content
Notes

Four charts fighting over one gradient id

Sixteen SVG elements shared four ids. The page looked fine, which was the problem.

Rough noteWritten

Written once, in the moment. I have not gone back over it.

The status dashboard draws four charts at once: uptime, CPU, memory, requests. Each chart is its own ChartCard, and each one defined the same four SVG gradients under fixed ids — gradient-blue, gradient-green, gradient-purple, gradient-orange. Four cards times four gradients is sixteen elements fighting over four ids.

The page still looked right. url(#gradient-blue) resolves to the first matching id in the document, and every card's definition was a byte-for-byte copy of every other card's, so first-match and correct-match happened to be the same element.

That only holds while nobody parameterizes a gradient per card. The first time someone tints one chart differently, every other chart of that color silently picks up the first card's fill instead of its own. Nothing throws. The colors are just wrong, and the reason is three files away.

The fix was useId() per card instance and a gradient id built from it. Invalid markup that renders correctly is still a bug; it is just a bug that waits.

Written . Something wrong or out of date? Tell me.