feat(legend): add custom legend component

[yannbolliger]

Summary

The settings now have a new prop customLegend which lets users provide there own legend React component that is rendered with the chart state into the legend container.

Details

Analogously to the customTooltip in the Tooltip, the customLegend takes a React component which will receive the state of the standard legend as props. This allows users to provide their own legend implementation. The legend is still rendered inside of the div.echLegendListContainer.

Issues

Fixes #862 because it is now feasible with a custom component as well as fixes #561.

Checklist

• All related issues have been linked (i.e. closes #123, fixes #123)
• The proper documentation and/or storybook story has been added or updated
• Unit tests have been added or updated to match the most common scenarios
• New public API exports have been added to packages/charts/src/index.ts
• The proper feature labels have been added (e.g. :interactions, :axis)
• The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)

[cla-checker-service]

💚 CLA has been signed

[elastic-datavis]

Community pull request, @elastic/datavis please add the ci:approved ✅ label to allow this and future builds.

[nickofthyme]

buildkite test this

[elastic-datavis]

Community pull request, @elastic/datavis please add the ci:approved ✅ label to allow this and future builds.

[elastic-datavis]

Community pull request, @elastic/datavis please add the ci:approved ✅ label to allow this and future builds.

[markov00]

I've took the chance to push a commit to:

• fix the legend style (avoiding the box shadow on the legend title)
• add a small notice about always using the legendSize when using the customLegend (it can probably be enforced with typescript somehow, because if not the auto-legend-size will kick in and the available size for the legend will not reflect the actual custom legend size

[yannbolliger]

buildkite update screenshots

[markov00]

buildkite test this

[nickofthyme]

buildkite update screenshots

[nickofthyme]

Sorry @yannbolliger the ci should permit you to run the buildkite update screenshots command when the ci:approved ✅ label is added to the pr.

[nickofthyme]

buildkite test this

[nickofthyme]

buildkite test this

[markov00]

@nickofthyme @yannbolliger I'm taking a loot at that added selector in the Legend component. It will triggers a react component rerendering (most of the time will not change the DOM but still execute the legend component and diff the results) on every mouse move. I prefer to avoid that if possible. I think we need to improve the current getTooltipInfo to avoid this recomputation as much as possible. I will be back soon with a solution to that

[yannbolliger]

that added selector in the Legend component. It will triggers a react component rerendering (most of the time will not change the DOM but still execute the legend component and diff the results) on every mouse move.

We could connect only the custom legend component (and not the regular one) via Redux to this additional selector.

[markov00]

that added selector in the Legend component. It will triggers a react component rerendering (most of the time will not change the DOM but still execute the legend component and diff the results) on every mouse move.

We could connect only the custom legend component (and not the regular one) via Redux to this additional selector.

That could work, is anyway just a workaround, the output of such selector, is always the same if you hover over the same geometry but you move slightly your mouse

[yannbolliger]

OK, so I changed the PR to only provide the pointerValue from Redux to the custom legend component. This should fix what you were concerned about @markov00. (Even though my testing showed that the legend is re-rendered when the cursor moves even on the main branch... but that's probably from the extra values.)

[markov00]

Tested locally, looks good to me.
Thanks @yannbolliger for the changes.
@nickofthyme Yann was right, we are will rerendering the legend independently from the changes in this PR. The legend selectors are firing too on each mouse move, is better to double-check this and fix it on our selectors.