Base map legends

[kwongz]

Description

Map Legends

(Video Recording not properly catching show legend transition)

Screen.Recording.2024-10-10.191938.mp4

Screen.Recording.2024-10-10.193343.mp4

1. Takes in data column from Value prop to create legend
2. Categorical Legends output distinct strings and map them to colorPallete (handles null values)
3. Scalar Legends create a color gradient scale based on numerical max and min values
4. Default color handling + max/min fmt
5. Legend positioning (bottomLeft, bottomRight, topLeft, topRight)
6. New single legend design
7. Moved Legend component into Basemaps
8. Refactored Legend component
9. Dynamic Categorical and Scalar Legends based on legenType Prop
10. Multi-Legend added for BaseMap
11. Smoother animations and transitions

Checklist

• For UI or styling changes, I have added a screenshot or gif showing before & after
• I have added a changeset
• I have added to the docs where applicable
• I have added to the VS Code extension where applicable

[changeset-bot]

🦋 Changeset detected

Latest commit: bce3372

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@evidence-dev/core-components	Patch
my-evidence-project	Patch
e2e-spa	Patch
e2e-themes	Patch
@evidence-dev/components	Patch
evidence-test-environment	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 5:31pm
next-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 5:31pm

[netlify]

✅ Deploy Preview for evidence-test-env ready!

Name	Link
🔨 Latest commit	bce3372
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-test-env/deploys/670ea52ac854a200087c13ab
😎 Deploy Preview	https://deploy-preview-2647--evidence-test-env.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.

[netlify]

✅ Deploy Preview for next-docs-evidence ready!

Name	Link
🔨 Latest commit	bce3372
🔍 Latest deploy log	https://app.netlify.com/sites/next-docs-evidence/deploys/670ea52a4733780008b962c1
😎 Deploy Preview	https://deploy-preview-2647--next-docs-evidence.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.

[netlify]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	bce3372
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/670ea52ac854a200087c13ad
😎 Deploy Preview	https://deploy-preview-2647--evidence-development-workspace.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.

[kwongz]

found a weird bug occurring on local docs and not on storybook, duplicate legend data causes double legends

[kwongz]

i noticed the init function was running multiple times, (3 -2)

Current solution:

Move init() to onMount, seems to also speed up map rendering

just uncertain about other consequences, but looks good now

Update: Solved with 2nd await init() then block, as well as legend data duplicate update handling for dev mode

[kwongz]

Looking into default legend rendering for maps

[kwongz]

@hughess

Issue

Looking into legends as default, but legends depend on Value prop which is not required for maps.

I think a nice solution is the legend comes with the Value prop, and users can control showing the legend with a noLegend prop

Solution

Legend w/ Default

No legend

[kwongz]

@zachstence

Just spoke with @hughess, would we be able to get rid of the text, and add a icon to represent the map with a label for screen readers?

[kwongz]

@hughess

Update

1. Legends only require value prop, to hide legend legend=false
2. After talking to @zachstence we would like to pitch the chevron with screen readers for accessibility
3. overflow fix for category legends

Screen.Recording.2024-10-15.112545.mp4

Summary Other fixes:

1. No more duplicate legend rendering in docs
2. Aligned multi legend scalar and category padding

[kwongz]

Currently, Legends appear when legends=true && value=!undefined.

• Is there a better way to instruct the user on this?
• Alternatively, should legend not rely on value? instead, render a legend with 'No data"?

[kwongz]

custom color example, color prop makes all areas the same color.

Should we handle this? or should we and users use the legend=false prop for this case