Introduce a @nivo/boxplot package

[tkonopka]

Proposes a new package @nivo/boxplot

Addresses discussions in #849 and #1948

Motivation

Boxplots summarize distributions and are especially useful to compare two or more groups of measurements.

Boxplots consist of different visual elements than other charts, e.g. bar charts. In particular, each unit in a boxplot conveys five numerical values represented as a central line, two boxes on each side of the central line, and two whiskers. Hence it is not straightforward to adapt a bar chart to display a boxplot.

Examples

Implementation

This implementation borrows structure from the @nivo/bar package, and then adjusts to support boxplots instead of bars.

Examples in the storybook document the package features, including:

• horizontal and vertical layouts
• layouts with subgroups
• linear and log scales
• legends
• markers, annotations, layers
• tooltip with summary statistics
• configurable colors, line widths, fills
• configurable box and whisker sizes (based on distribution quantiles)
• configurable width of whisker ends
• does not draw points that make up the distributions, or outliers

The code satisfies criteria:

• formatted with make fmt
• passes eslint with some warnings (help/advice needed)
• passes make package-build-boxplot
• passes make package-test-boxplot

Happy to take suggestions/corrections regarding features, prop names, data format, etc.

[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 68a326d:

Sandbox	Source
nivo	Configuration

[plouc]

@tkonopka, that's a really good addition, and pretty impressive I must say due to the lack of internal documentation! I will try to review this soon.

[plouc]

@tkonopka, thank you for adding the stories, to promote a new package, it's usually also included in the interactive demo, but it's a bit complex, this doesn't prevent us from publishing the package, I could handle it later, the advantage though is that it provides more description for each property and how to use them, that's why typings usually don't have much descriptions, as the website document them.

Maybe for the time being you could add some comments on the public API (props), so that it's easier to port to the website in the future. I'm also not very familiar with this kind of chart, so this would help a lot.

[tkonopka]

Thanks @plouc for considering this and for the code review! I'll make changes (and fix the CI).

You mentioned the interactive demo. The nivo.rocks website is terrific - a great resource to learn about features and props. However, I have trouble launching it locally beacuse of limited memory. I can get it running with

GATSBY_CPU_COUNT=1 NODE_OPTIONS=--max-old-space-size=4096 yarn start

But a first attempt to edit content gave me white screens, and any update takes a very long time. As I'm not experienced with gatsby, I left the website untouched. Is there a way to launch it so that it handles only one or two packages at a time?

In any case I'll add documentation along with the code edits. Thanks again.

[plouc]

@tkonopka, it's not possible to run the website for a single package, and the way to edit the doc isn't really documented, I think it's ok to still release this new package without having the doc, I could handle this later.

[tkonopka]

Just to mention that this is in progress, but not ready yet

[just-Bri]

@plouc @tkonopka What's the status of this?

Ended up here after looking at a couple other issue threads, would love to see this make it in to the library! I think this is the only plot type nivo is missing for me to be able to easily make the switch.

[Akseluhr]

Interesting PR! What's the status? Looking forward to a Nivo boxplot in my project!

[tkonopka]

Hi all, thanks for checking out the PR. The boxplot compoment is in working order, but the PR includes documentation through storybook examples, only, and not via the nivo.rocks website. If you'd like to use this, please do. Feedback, comments, or bug reports would be welcome.

[Akseluhr]

Hi, thanks for the reply.

How can I install it to try it out?

[choephix]

Hey guys, any progress on this?
Are we waiting for missing documentation to be filled in?

[AmirAltman]

Hi everyone, Is there an ETA for this update?
Our project is waiting on this feature to move forward, so we'd love to get a sense of when we might expect it to be available.
Thanks 🙌

[MatheusPires99]

Hey guys, any updates on this?
I would like to replace all charts from a professional project to use Nivo, I'm just waiting for the box plot to be deployed

[plouc]

I'll probably have some time to work on the project next week, so I'll try to merge this, thank you @tkonopka for the changes, and sorry for the delay 😓.

[plouc]

LGTM

[plouc]

@tkonopka, thank you again for this new chart, I'm merging as is, but I'd like to add it to the interactive documentation before releasing though.

[tkonopka]

Thanks for merging @plouc and also for the review earlier. If any issues come up, I'm happy to help edit and improve this further - just let me know

[plouc]

Please note that I had to unpublish the package due to #2319, I'll publish a new version once I find a fix, sorry for that.