(1/n) refactor legend components to use items prop

[EmmadUsmani]

Precursor to #41988 and #41986

Description

Refactoring the legend component to take a single items prop that is an array of objects with a key, name, and color, instead of taking two separate arrays of labels and colors.

This will make it easier to implement toggling via the legend, because we can later add additional properties to the item object, like a boolean that describes whether the series is visible or not.

In general it will make the legend easier to work with, for example when we need to add a legend item for the "other" bar in that project it'll be easier to just add one object where the name and color are coupled.

How to verify

1. Create any chart with a legend (e.g. orders count by month, product category)
2. Confirm the legend still works and behaves like normal.

Demo

Checklist

• Tests have been added/updated to cover changes in this PR

Covered by existing tests like 12439-click-on-legend-breaks-ui.cy.spec.js

[EmmadUsmani]

• (1/n) refactor legend components to use items prop #42417 : 2 dependent PRs (#42349 , #42363 ) 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @EmmadUsmani and the rest of your teammates on Graphite

[github-actions]

Codenotify: Notifying subscribers in CODENOTIFY files for diff 9d968d9...19522f5.

Notify

File(s)

@alxnddr

frontend/src/metabase/visualizations/components/legend/Legend.jsx frontend/src/metabase/visualizations/components/legend/LegendItem.jsx frontend/src/metabase/visualizations/components/legend/LegendLayout.jsx frontend/src/metabase/visualizations/echarts/cartesian/model/legend.ts frontend/src/metabase/visualizations/echarts/cartesian/model/legend.unit.spec.ts frontend/src/metabase/visualizations/echarts/cartesian/model/types.ts frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx frontend/src/metabase/visualizations/visualizations/RowChart/utils/legend.ts

[replay-io]

Status	Complete ↗︎
Commit	19522f5
Results	⚠️ 2 Flaky ✅ 2506 Passed

[JesseSDevaney]

This is working for dynamic visualizations for me, but it might be breaking static-viz?

I saw that there were some static-viz related type errors - maybe it is related to those?

[EmmadUsmani]

@JesseSDevaney Good catch! I've fixed the type errors, could you check if those dashcards still error in static viz?

[JesseSDevaney]

LGTM! ❤️

We still need to fix those legend unit tests to account for the new dataKey attribute included in legendItems, but I will still approve because that is simple.

[github-actions]

@EmmadUsmani Did you forget to add a milestone to the issue for this PR? When and where should I add a milestone?