This PR adds an SVG sparkline utility and {% lighthouseSparkline site %} and {% weightSparkline site %} shortcodes for showing small summaries of site data over time. I’ve added these to the main site overview:
I tweaked some of the breakpoints at which different stats get hidden to keep things working with these new elements. The importance of the different stats is a bit subjective, so I hope I prioritised things in an acceptable way.
The Lighthouse sparkline uses a colour scheme much like the speedlify score circles:
In my usage for Astro, I actually cropped this to the 360–400 range on the basis that any lower than that is too bad for variation to be interesting. Given the more generic usage here, I’ve left the Lighthouse sparkline showing 0–400. Easy enough to tweak in the shortcode function if you want to see variation in the upper range more clearly.
Let me know what you think and if you’d like any changes.
This PR adds an SVG sparkline utility and
{% lighthouseSparkline site %}and{% weightSparkline site %}shortcodes for showing small summaries of site data over time. I’ve added these to the main site overview:I tweaked some of the breakpoints at which different stats get hidden to keep things working with these new elements. The importance of the different stats is a bit subjective, so I hope I prioritised things in an acceptable way.
The Lighthouse sparkline uses a colour scheme much like the speedlify score circles:
In my usage for Astro, I actually cropped this to the 360–400 range on the basis that any lower than that is too bad for variation to be interesting. Given the more generic usage here, I’ve left the Lighthouse sparkline showing 0–400. Easy enough to tweak in the shortcode function if you want to see variation in the upper range more clearly.
Let me know what you think and if you’d like any changes.