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]

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 1d6c42a:

Sandbox	Source
nivo	Configuration

[schiersj]

Any ideas when this will go to release?

[ncolboc]

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

[yairEO]

I am a against including any legend logic to Nivo. Nivo should be focused on high-level abstraction for data visualization and legend is highly specific to the design and should be implemented regardless of Nivo. For example in the App I work on, we sometimes use vertical legend, and sometimes radio legend, and sometimes toggable legend items (to show/hide specific ones on the chart).

Legend will add more needless complexity to Nivo itself for no good reason because some very basic default ability and anyway it is not easy to control it's position relative to the chart using CSS queries and any other customization.. many reasons not to include legend in Nivo.