Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(scatterplot) support multiple legends #2016

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

tkonopka
Copy link
Contributor

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.

2022-05-26-multiline-legend

@codesandbox-ci
Copy link

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
Copy link

schiersj commented Jun 3, 2022

Any ideas when this will go to release?

@stale stale bot added the stale label Sep 8, 2022
Repository owner deleted a comment from stale bot Sep 8, 2022
@plouc plouc added legends pinned scatterplot @nivo/scatterplot package and removed stale labels Sep 8, 2022
@ncolboc
Copy link

ncolboc commented Dec 7, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
legends pinned scatterplot @nivo/scatterplot package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants