@zooniverse/react-components now requires d3 to be installed

[eatyourgreens]

Package

Choose from the list:

• app-content-pages
• app-project
• lib-classifier
• lib-panoptes-js
• lib-react-components
• unknown

Describe the bug

The AnimatedNumber component uses d3. @zooniverse/react-components doesn't include d3 as a dependency.

To Reproduce

npm install @zooniverse/react-components in a project that doesn't use d3.

Expected behavior

@zooniverse/react-components should install without errors, or warn that d3 is a prerequisite.

Additional context

Either yarn add d3 or add it as a peer dependency (yarn add d3 --peer.)

d3 is modular now, so I'd also recommend only adding the modules that are used by the AnimatedNumber component.

Importing directly from d3 may also cause version conflicts with @visx packages (see #5324.) Where possible, I recommend importing d3 modules from @visx/vendor eg.

front-end-monorepo/packages/lib-react-components/src/Media/components/Data/components/DataSeriesPlot/helpers/utils.js

Line 2 in 875fc77

import { extent } from '@visx/vendor/d3-array'

[goplayoutside3]

It looks like the following definitely works:

import { format } from '@visx/vendor/d3-format'
import { interpolate } from '@visx/vendor/d3-interpolate'

But I can't figure out how to get d3.select from VisX 🤔

[eatyourgreens]

@visx/vendor doesn’t include d3-selection, unfortunately.

https://github.com/airbnb/visx/blob/86a851cb3bf622b013b186f02f955bcd6548a87f/packages/visx-vendor/package.json#L25-L33

So I think you’ll need to add d3-selection as a dependency, or peer dependency.

[goplayoutside3]

I tried to import select from d3-selection, but kept running into an error where d3.select.transition is "not a function" caused by different versions of d3-selection in the yarn.lock 🤷‍♀️ I added d3 v6 as a peer dependency for lib-react-components for now.

[eatyourgreens]

I think I ran into something similar with the data-plotting components. The older components in the monorepo were built before @visx existed, so there's a mixture of older stuff built with d3 v6, and newer stuff built with @visx, which uses d3 v7.

[eatyourgreens]

The selection.transition API is added by d3-transition. This is where working with d3 can get complicated: module APIs that extend other modules.

https://github.com/d3/d3-transition