feat: show min/max on map legend

[bodom0015]

Problem

Min + Max values are not shown explicitly on the Legend

This is helpful information since the bins may not all be the same width

Fixes #130

Approach

• Calculate and show min + max values on the BinLabels

How to Test

1. Navigate to https://deploy-preview-140--chicago-env-explorer.netlify.app/map
   • You should see that the bin values now extend to the edge of the Legend (at the bottom)
2. Select a few different variables
   • You should see the min + max values do not extend off of the Legend (worst case: Population Density)

[netlify[bot]]

✅ Deploy Preview for chicago-env-explorer ready!

Name	Link
🔨 Latest commit	323da0f5138f2950a75fbe3a7c6a15e81c8bf5ac
🔍 Latest deploy log	https://app.netlify.com/sites/chicago-env-explorer/deploys/661ea16a776be10008bf6ecb
😎 Deploy Preview	https://deploy-preview-140--chicago-env-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bodom0015]

Per @Makosak's request, also setting active=FALSE for "Heat Index (Average)" :+1:

[bodom0015]

Thank you, @mradamcox! I found that there was a hardcoded 6 for all bin counts, but the Air Quality variables expected 8 bins instead

I've adjusted the reducers/generateQuantileBins function to use colorScale to determine number of bins, and it should fallback to the previous 6 if colorScale is unavailable :+1:

I also noticed that 2 variables (namely Vegetation Index + Adult Asthma Cancer) sometimes contain strings, so they were showing NaN as min+max.. I've adjusted the calculations to filter these NaN values out before determining min/max

[mradamcox]

Great! Bin numbers fixed, but I was still not liking the spacing of these labels because in a lot of cases they get to be unclear when they are offset, for example: and

I wanted something more structurally tied to the bar divs themselves, instead of approximately underneath, so for all of the non-categorical variables (everything besides the Historical Redlining and Displacement Pressure variables) I injected offset divs within the color bars themselves, which provides a much cleaner result:

However, @bodom0015 I just could not figure out how to acquire the min and max values within the Legend component, the way you had done within the BinLabel component. So, could you take one more pass at this and just replace my min/max values on lines 195/196 with actual values?

Also, I commented out a bit of code but left it for your reference, so you can remove that when you make the final commit.

Hopefully this attention to the legend will be useful when we get to the new types of layers that we have in mind.

[bodom0015]

Hi @mradamcox, I think this looks great! Noting that there still appears to be the issue where the max label can extend off of the Legend (e.g. Population Density). I also changed the variableName prop to label, since this does not always match the variableName from our presets (label also includes the units, if provided)