fix(scatterplot) support multiple legends

[tkonopka]

Addresses #1962

Also provides custom legend labels and toggling visibility of series via the legend

Background

Issue #1962 describes a scatterplot with multiple series. An attempt to create a legend that spans two lines doesn't work. This is because the chart ignores the manually-specified items under the legends prop.

Change summary

This PR adds support for multi-line legends to @nivo/scatterplot. The fix applies to svg and canvas components (although legends in canvas lack some features, which is an existing limitation)

While editing the legend-handling code, I also added some new features.

• support for custom legend labels (new prop legendLabel) (svg and canvas)
• support for toggling series by clicking on legend labels, similar to feature available in @nivo/bar (new prop initialHiddenIds) (svg only)

The custom labels and toggling are extras. These can be rolled back or saved for later if you prefer.

Other changes include:

• some miscellaneous edits to fix linting warnings (e.g. missing dependencies in hooks)
• unit tests for multi-line legends
• updated storybook examples for multi-line legends and visibility toggling
• some re-arrangement in calculations to reduce memory use and avoid redundant calculations when visibility changes (will also be relevant for supporting opacity)

Example

The screenshot below is based on the dataset in the scatterplot storybook. The dataset has six series. Note the legend uses two lines, the labels are different than the series ids (not shown), two of the series are inactive/invisible. Manual legends can also contains unrelated items if needed.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1d6c42a43914abf82a4cec317da9d7395bc321c6:

Sandbox	Source
nivo	Configuration

[schiersj]

Any ideas when this will go to release?

[ncolboc]

Interesting PR! Do you know when it will be merged?