Status Chart: Colorized counters, mobile-optimized

[StephanTLavavej]

• Major appearance improvements:
  • Colorize counters to match datasets.
    • As in Status Chart: Dark mode with Primer CSS #2835, styles like color-bg-severe-emphasis have no inherent meaning, and are being used for their colors only.
    • Four counters need special treatment. The Old Bugs need to manually specify --color-scale-red-7. The GitHub Issues and Average Age datasets are gray lines, so Counter--primary results in a readable gray for both dark mode and light mode. Finally, the Combined Age dataset uses the default foreground color (i.e. text color), so for its counter we use inverted colors: the counter's background is the default foreground color, while the counter's foreground is the default canvas color.
    • I believe this significantly helps readability.
  • Use a mobile-optimized viewport.
    • Thanks to @cpplearner for mentioning this technique.
    • After Status Chart: Dark mode with Primer CSS #2835, the Status Chart rendered with extremely tiny fonts for phones in portrait modes. Using this mobile-optimized viewport incantation as recommended by MDN, combined with Primer CSS, results in readable fonts.
    • However, this results in a different challenge for the chart - it's effectively being drawn with a much thinner width for phones in portrait modes, so we need a couple more changes:
  • Hide the legend when the chart is too narrow.
    • The threshold of 670 was determined experimentally (it's between portrait and landscape for my phone, and I believe virtually all modern phones). Below this threshold, the legend wraps, and occupies too much vertical space, so I simply hide it. Note that the chart continues to respect any hidden/shown lines (and the phone can be rotated into landscape to set those). Also, the colorized counters help to identify which line is which.
    • I experimented with other solutions - HTML legends require far too much code and have problematic interactions with Primer CSS. There are probably other alternatives (e.g. restrict the legend to a certain height, or modify the chart's aspect ratio as it gets thinner), but this seems like a reasonable solution for now.
    • The chart doesn't look perfect on phones (the lines are a bit too thick, and the axis titles are truncated), but they're sufficiently readable.
  • Extract chart titles to HTML.
    • This makes the page look more consistent, and gives more vertical space to the charts, which helps readability (especially on mobile).
    • As the page now begins with an <h1>, I use p-3 padding for all sides. (Previously, I reduced padding on the top, because the Status Chart had a bit of blank space above its title.)
• Minor appearance improvements:
  • Adjust bounds.
    • The PR backlog peaked at exactly 80 and the combined age never exceeded 500 PR-months, so we can reclaim that space and make the charts more readable.
  • Switch the GitHub timeframe to years.
    • The quarterly ticks were getting crowded, especially on mobile.
    • In the future I may investigate major and minor gridlines (I believe that Chart.js has this ability, but it requires a bit of work).
• Normal updates:
  • Weekly updates.
  • Primer CSS 20.2.4.
  • npm update
  • npm install [dependencies]@latest
• As usual, this contains a "DROP BEFORE MERGING: Regen built/status_chart.mjs" commit to make the live preview work, which will accumulate merge conflicts.

📉 Live preview: stephantlavavej.github.io/STL/

📸 Screenshots

🌃 Dark mode

🏙️ Light mode

[strega-nil-ms]

LGTM! Thanks!

[h-vetinari]

I have dark mode on by default in firefox, and the lines/bars are effectively invisible now...

[h-vetinari]

I have dark mode on by default in firefox, and the lines/bars are effectively invisible now...

Ah, never mind, a couple of refreshes later the lines appeared (no idea why the dealy). Sorry for the noise