Add a legend component

[david-mears-2]

Add a legend component.

This will only display colors/labels for values that are actually displayed, i.e. not those without data. This behaviour follows from the way we create the ridgelines in useHistogramLines.ts, that is, we transform data into lines rather than working from an assumption about what data categories to expect. Those lines' metadata are then used as the basis for creating a color mapping, so we should expect to always have a 1-to-1 mapping from colors to line categories.

The fill color of the legend squares has an opacity added (via the alpha channel of rgba) so as to match the actual fill color used in the plot.

Added ES2023 to compiler options so that I could use Array.prototype.toReversed.

[codecov]

Codecov Report

❌ Patch coverage is 96.36364% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.86%. Comparing base (5cc23ca) to head (8ace58e).
⚠️ Report is 8 commits behind head on main.

Files with missing lines	Patch %	Lines
src/stores/appStore.ts	88.23%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #19      +/-   ##
==========================================
+ Coverage   96.79%   96.86%   +0.06%     
==========================================
  Files          14       15       +1     
  Lines         281      319      +38     
  Branches       73       84      +11     
==========================================
+ Hits          272      309      +37     
- Misses          9       10       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[EmmaLRussell]

This looks really nice - I like the way you have both the line and fill colours included in the legend.

The outline in the legend does look a little different from the line style in the plot, and it feels like it could be a slightly closer match. I think the style on the plot is thicker? It also looks slightly darker to my eye but that's an illusion, the stroke color itself is identical!

When focussing on disease, "All 117 VIMC countries" is at the top in the plot, but at the bottom in the legend - would be better if these matched. Will this be fixed in vimc-9191?

When focussing on geography, with a country selected, the order of the legend is Region, Country, Global. It feels like it would make more sense to either go from the largest scale to the smallest or vice versa (so Global, Region, Country or Country, Region, Global). I'd favour country first since that's what the user has selected.

[EmmaLRussell]

Do we need both fill color and opacity here? Could we not just get the fillColor out of the store as an rgba color and not need to do the further construction?

[david-mears-2]

skadi-chart's lines interface takes fill opacity as a separate property from fill colour, which is why the interface of the colorStore has ended up the way it is. The colorStore could expose another property in the return value of colorPropertiesForFillColor called fillColorWithOpacity or something, containing the rgba version, to make it responsible for more color logic in general.

[david-mears-2]

Actually I'd rather keep the colorPropertiesForFillColor interface matching the skadi-chart Line interface, so I'll make this a little method in the store converting hex + opacity to rgba.

[david-mears-2]

Actually actually, I've gone with the suggestion of doing fillColor canonically as an rgba, i.e. the a channel will handle opacity for the legend and for skadi-chart, and the 'opacity' property for skadi-chart will be ignored (set to 1).

[EmmaLRussell]

Why min-width rather than just width?

[david-mears-2]

No reason

[david-mears-2]

The outline in the legend does look a little different from the line style in the plot, and it feels like it could be a slightly closer match. I think the style on the plot is thicker? It also looks slightly darker to my eye but that's an illusion, the stroke color itself is identical!

I did fiddle around with the thickness of the legend outline to try to appear to match the plot thickness. Something going on here is the illusion caused by a very jaggedy ridgeline edge, which can sometimes look thicker (because it overlaps itself) than it 'really' is. Currently, the legend borders are 2px, twice the ridgeline outlines.

When focussing on disease, "All 117 VIMC countries" is at the top in the plot, but at the bottom in the legend - would be better if these matched. Will this be fixed in vimc-9191?

The plot rows and legend are both unordered at the moment. I'm explicitly not concerned with ordering anything yet, because I'm planning for the legend and the plot to both get their ordering from a common source once that's implemented.

When focussing on geography, with a country selected, the order of the legend is Region, Country, Global. It feels like it would make more sense to either go from the largest scale to the smallest or vice versa (so Global, Region, Country or Country, Region, Global). I'd favour country first since that's what the user has selected.

Ah, I can in fact implement some ordering for this, because this isn't to do with plot row ordering. [some time passes] OK done.