Status Chart: chart.js 3.0.0-beta.13, legend click handler

[StephanTLavavej]

• Weekly update: 3 features remaining, 58 PRs merged in February!
• Upgrade chart.js to 3.0.0-beta.13. They're getting close to a release candidate, and v3 has been well-behaved in my experience. (I reported options.plugins.title.font.size is ignored (3.0.0-beta.8 regression) chartjs/Chart.js#8311 and they fixed it immediately. 😻) This should be invisible to users, aside from nearly pixel-level differences in rendering. The only difference I observe is that for some reason, the "600" on the left axis of the main chart isn't displayed (but "60" on the right axis is). This is sufficiently minor that I haven't bothered to report it. I was originally planning to wait for v3's official release, but this is needed now for the next feature (because they changed the interface for click handlers to be usable):
• When clicking any of the charts' legends to show/hide lines, the URL is updated with corresponding parameters, so you can copy-paste that URL for someone else to see exactly the lines you want. The implementation is:
  • Now that it's automatically generated, I changed show and hide to y and n for shorter URLs.
  • Enhance get_hidden(), which determines the initial hidden state of each dataset (depending on the URLSearchParams and the STL's default preference, which is to show everything except for the average lines). Now it emits additional properties: stl_default_hidden (that default preference) and stl_key (which is the name, like cxx20 or vso, that each dataset is referred to in the tables and the URL params). These properties are prefixed with stl_ as a reminder that they're for our own use, not chart.js's.
  • Then we can use ...get_hidden('cxx20') and ...get_hidden('avg_age', true) which avoids repeating this info.
  • legend_click_handler() replaces the default handler. In addition to the default behavior of modifying the line's visibility (which is the ch.hide(index)/ch.show(index) call and legend_item.hidden = becoming_hidden; assignment), it updates the URL in-place.
  • We need to know the STL's default preference so we can detect when the line is being toggled to that default. When becoming_hidden === stl_default_hidden, we can simply delete the key from the URL. (Note that if we inspected ch.data.datasets[index].hidden, that's the initial state of the line, which may have been controlled by the initial URL - this is why we need to record the STL's default preference separately.)
  • If the line is being toggled away from the default, we need to set a key-value pair. (This handles all cases of having 0/1/more keys in the URL.) We additionally sort the keys to make the URL nice - otherwise, the order in which lines are hidden and shown can result in different URLs with the same effects.
  • Finally, update_url() uses window.history.replaceState() to modify the address bar, without interfering with back/forward or refreshing. This contains a bit of extra logic to suppress the ? when returning to the true default.
  • The Toggle Timeline button could be enhanced to update the URL; I haven't done so yet.
• Update how files are ignored:
  • I started developing the Status Chart by switching back and forth from main. This is very inconvenient (as a bunch of files have to be deleted or recreated, and a lot more activity happens on main than gh-pages), so I quickly switched to maintaining the chart in a separate clone. The modern instructions in the README depict only a separate clone, with the additional options needed to track just the gh-pages branches (making the clone extremely lightweight).
  • So, we don't need a bunch of lines in the .gitignore. We can discard all of the lines for build/test artifacts, and for submodules. It seems reasonable to keep the .vs/ and .vscode/ ignores.
  • Similarly, in .vscode/settings.json, we don't need to exclude the submodules that don't exist for the Status Chart. However, we should exclude what's gitignored: node_modules isn't interesting to see in the Explorer tree, and .env contains a secret that we don't want to accidentally display (e.g. when demoing how the Status Chart works, as I'm going to do soon).

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