Upgrade D3 6.3.1 (#276)

* d3 6.0 * update imports * make all the things prettier * restrict d3 import * remove global d3 imports from specs Co-authored-by: Isaac Ezer <[email protected]>
spotify · Jan 7, 2021 · eb6dd4d · eb6dd4d
1 parent e57f4c7
commit eb6dd4d
Show file tree

Hide file tree

Showing 58 changed files with 2,095 additions and 1,945 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -18,6 +18,7 @@
     "no-nested-ternary": "off",
     "no-console": ["error", { "allow": ["warn", "error"] }],
     "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/no-noninteractive-element-interactions": "off"
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "no-restricted-imports": ["error", "d3"]
   }
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1,9 +1,9 @@
 <html>
-<head>
+  <head>
     <title>Redirect</title>
-    <META http-equiv="refresh" content="0;URL=build">
-</head>
-<body bgcolor="#ffffff">
-Redirecting to docs...
-</body>
+    <meta http-equiv="refresh" content="0;URL=build" />
+  </head>
+  <body bgcolor="#ffffff">
+    Redirecting to docs...
+  </body>
 </html>
diff --git a/docs/src/ExampleSection.js b/docs/src/ExampleSection.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import * as d3 from 'd3';
+import * as d3 from 'd3'; // eslint-disable-line no-restricted-imports
 import Playground from 'component-playground';
 
 // import *all* reactochart components/utils - usually you'd import one at a time

diff --git a/docs/src/main.js b/docs/src/main.js
@@ -1,6 +1,6 @@
-import "../styles/main.less";
-import React from "react";
-import ReactDOM from "react-dom";
-import { App } from "./App";
+import '../styles/main.less';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './App';
 
-ReactDOM.render(<App />, document.getElementById("container"));
+ReactDOM.render(<App />, document.getElementById('container'));
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "test-watch": "cross-env NODE_PATH=$NODE_PATH:$PWD/src BABEL_ENV=production mocha --watch --require @babel/register tests/jsdom/setup.js --recursive tests/jsdom/spec"
   },
   "dependencies": {
-    "d3": "^5.16.0",
+    "d3": "^6.3.1",
     "d3-sankey": "^0.12.3",
     "invariant": "^2.2.0",
     "lodash": "^4.17.15",

diff --git a/scripts/clean.js b/scripts/clean.js
@@ -1,9 +1,9 @@
-const fs = require("fs");
-const sh = require("shelljs");
+const fs = require('fs');
+const sh = require('shelljs');
 
-const { fileExists, dirExists } = require("./utils");
+const { fileExists, dirExists } = require('./utils');
 
-const srcContents = sh.ls("src");
+const srcContents = sh.ls('src');
 
 // We don't want to commit built files, so it is useful to have a `clean` script which deletes them if they exist.
 // However, Reactochart is built in the root directory
@@ -19,7 +19,7 @@ srcContents.forEach(fileOrDir => {
     sh.rm(`./${fileOrDir}`);
   } else if (dirExists(`src/${fileOrDir}`) && dirExists(fileOrDir)) {
     console.log(`deleting directory ./${fileOrDir}`);
-    sh.rm("-rf", `./${fileOrDir}`);
+    sh.rm('-rf', `./${fileOrDir}`);
   }
   // check for source maps too
   if (fileExists(`./${fileOrDir}.map`)) {
@@ -29,6 +29,6 @@ srcContents.forEach(fileOrDir => {
 });
 
 // Clean compiled css file
-if (fileExists("./styles.css")) {
-  sh.rm("./styles.css");
+if (fileExists('./styles.css')) {
+  sh.rm('./styles.css');
 }
diff --git a/scripts/makeDocs.js b/scripts/makeDocs.js
@@ -1,17 +1,17 @@
-const fs = require("fs");
-const sh = require("shelljs");
-const _ = require("lodash");
+const fs = require('fs');
+const sh = require('shelljs');
+const _ = require('lodash');
 
 const {
   isUpperCase,
   fileExists,
   dirExists,
   ensureDir,
   fileNameFromPath,
-  stripFileExtension
-} = require("./utils");
+  stripFileExtension,
+} = require('./utils');
 
-const EXCLUDED_DOCGEN_FILES = ["TreeMapNode.js", "TreeMapNodeLabel.js"];
+const EXCLUDED_DOCGEN_FILES = ['TreeMapNode.js', 'TreeMapNodeLabel.js'];
 
 const docsDirPath = `${__dirname}/../docs/src/docs`;
 const docsPageTemplatePath = `${__dirname}/../docs/src/templates/ComponentDocsPage.js.template`;
@@ -23,7 +23,7 @@ const jsFilePaths = sh.ls(`${__dirname}/../src/*.js`);
 const componentPaths = jsFilePaths.filter(
   path =>
     !EXCLUDED_DOCGEN_FILES.includes(fileNameFromPath(path)) &&
-    isUpperCase(fileNameFromPath(path)[0])
+    isUpperCase(fileNameFromPath(path)[0]),
 );
 
 ensureDir(docsDirPath);
@@ -34,9 +34,9 @@ componentPaths.forEach(path => {
 
   // use react-docgen to autogenerate prop docs json file from component src files
   ensureDir(componentDocsPath);
-  console.log("Generating prop docs for", componentName);
+  console.log('Generating prop docs for', componentName);
   sh.exec(
-    `react-docgen ${path} --pretty -o ${componentDocsPath}/propDocs.json`
+    `react-docgen ${path} --pretty -o ${componentDocsPath}/propDocs.json`,
   );
 
   const docsPagePath = `${componentDocsPath}/${componentName}Docs.js`;
@@ -49,7 +49,7 @@ componentPaths.forEach(path => {
     const docsPageStub = docsTemplate({ componentName });
     fs.writeFile(docsPagePath, docsPageStub, err => {
       if (err) throw err;
-      console.log("wrote to", docsPagePath);
+      console.log('wrote to', docsPagePath);
     });
 
     // use template to generate stub example file, to be used for live preview (using component-playground)
@@ -58,7 +58,7 @@ componentPaths.forEach(path => {
     ensureDir(examplesDirPath);
     fs.writeFile(examplePath, exampleStub, err => {
       if (err) throw err;
-      console.log("wrote to", examplePath);
+      console.log('wrote to', examplePath);
     });
   }
 });
@@ -69,7 +69,7 @@ const componentDocExports = componentPaths.map(componentPath => {
   const componentName = stripFileExtension(fileName);
   return `export {default as ${componentName}Docs} from './${componentName}/${componentName}Docs';\n`;
 });
-fs.writeFile(`${docsDirPath}/index.js`, componentDocExports.join(""), err => {
+fs.writeFile(`${docsDirPath}/index.js`, componentDocExports.join(''), err => {
   if (err) throw err;
-  console.log("wrote exports");
+  console.log('wrote exports');
 });
diff --git a/scripts/makeLesson.js b/scripts/makeLesson.js
@@ -2,45 +2,55 @@ const fs = require('fs');
 const sh = require('shelljs');
 const _ = require('lodash');
 
-const {isUpperCase, fileExists, dirExists, ensureDir, fileNameFromPath, stripFileExtension} = require('./utils');
+const {
+  isUpperCase,
+  fileExists,
+  dirExists,
+  ensureDir,
+  fileNameFromPath,
+  stripFileExtension,
+} = require('./utils');
 
 const lessonsDirPath = `${__dirname}/../docs/src/lessons`;
 const lessonTemplatePath = `${__dirname}/../docs/src/templates/Lesson.js.template`;
 const exampleTemplatePath = `${__dirname}/../docs/src/templates/ComponentExample.js.template`;
 
 if (process.argv.length <= 2) {
-  console.log("Usage: " + __filename + " LESSON_NAME");
+  console.log(`Usage: ${__filename} LESSON_NAME`);
   process.exit(-1);
 }
 
 const lessonName = process.argv[2];
 console.log(lessonName);
 
-const componentName = lessonName.split(" ").map(_.capitalize).join('');
+const componentName = lessonName
+  .split(' ')
+  .map(_.capitalize)
+  .join('');
 console.log('componentName', componentName);
 const lessonDirPath = `${lessonsDirPath}/${componentName}`;
 const lessonComponentPath = `${lessonDirPath}/${componentName}Lesson.js`;
 
 ensureDir(lessonsDirPath);
 ensureDir(lessonDirPath);
-if(!fileExists(lessonComponentPath)) {
+if (!fileExists(lessonComponentPath)) {
   // use template file to generate a stub example page for this component
   const lessonTemplate = _.template(sh.cat(lessonTemplatePath).toString());
-  const lessonStub = lessonTemplate({name: lessonName, componentName});
-  fs.writeFile(lessonComponentPath, lessonStub, (err) => {
-    if(err) throw err;
-    console.log("created stub lesson component:", lessonComponentPath);
+  const lessonStub = lessonTemplate({ name: lessonName, componentName });
+  fs.writeFile(lessonComponentPath, lessonStub, err => {
+    if (err) throw err;
+    console.log('created stub lesson component:', lessonComponentPath);
   });
 
   const examplesDirPath = `${lessonDirPath}/examples`;
   const examplePath = `${examplesDirPath}/${componentName}.js.example`;
 
   // use template to generate stub example file, to be used for live preview (using component-playground)
   const exampleTemplate = _.template(sh.cat(exampleTemplatePath).toString());
-  const exampleStub = exampleTemplate({componentName});
+  const exampleStub = exampleTemplate({ componentName });
   ensureDir(examplesDirPath);
-  fs.writeFile(examplePath, exampleStub, (err) => {
-    if(err) throw err;
-    console.log("created stub example:", examplePath);
+  fs.writeFile(examplePath, exampleStub, err => {
+    if (err) throw err;
+    console.log('created stub example:', examplePath);
   });
 }
diff --git a/scripts/utils.js b/scripts/utils.js
@@ -12,7 +12,7 @@ function dirExists(path) {
   return sh.test('-d', path);
 }
 function ensureDir(path) {
-  if(!dirExists(path)) sh.mkdir('-p', path);
+  if (!dirExists(path)) sh.mkdir('-p', path);
 }
 function fileNameFromPath(path) {
   return _.last(path.split('/'));
@@ -22,5 +22,10 @@ function stripFileExtension(fileName) {
 }
 
 module.exports = {
-  isUpperCase, fileExists, dirExists, ensureDir, fileNameFromPath, stripFileExtension
-};
+  isUpperCase,
+  fileExists,
+  dirExists,
+  ensureDir,
+  fileNameFromPath,
+  stripFileExtension,
+};
diff --git a/src/AreaChart.js b/src/AreaChart.js
@@ -1,4 +1,4 @@
-import { area } from 'd3';
+import { area } from 'd3-shape';
 import isUndefined from 'lodash/isUndefined';
 import uniqueId from 'lodash/uniqueId';
 import PropTypes from 'prop-types';

diff --git a/src/AreaHeatmap.js b/src/AreaHeatmap.js
@@ -1,4 +1,4 @@
-import { extent } from 'd3';
+import { extent } from 'd3-array';
 import flatten from 'lodash/flatten';
 import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';

diff --git a/src/ColorHeatmap.js b/src/ColorHeatmap.js
@@ -3,9 +3,9 @@ import {
   interpolateHsl,
   interpolateLab,
   interpolateRgb,
-  scaleLinear,
-  schemeCategory10,
-} from 'd3';
+} from 'd3-interpolate';
+import { scaleLinear } from 'd3-scale';
+import { schemeCategory10 } from 'd3-scale-chromatic';
 import isString from 'lodash/isString';
 import times from 'lodash/times';
 import range from 'lodash/range';

diff --git a/src/FunnelChart.js b/src/FunnelChart.js
@@ -1,4 +1,6 @@
-import { area, scaleOrdinal, schemeCategory10 } from 'd3';
+import { area } from 'd3-shape';
+import { scaleOrdinal } from 'd3-scale';
+import { schemeCategory10 } from 'd3-scale-chromatic';
 import range from 'lodash/range';
 import defaults from 'lodash/defaults';
 import PropTypes from 'prop-types';

diff --git a/src/Histogram.js b/src/Histogram.js
@@ -1,4 +1,5 @@
-import { extent, histogram, scaleLinear } from 'd3';
+import { histogram, extent } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
 import first from 'lodash/first';
 import last from 'lodash/last';
 import maxBy from 'lodash/maxBy';

diff --git a/src/KernelDensityEstimation.js b/src/KernelDensityEstimation.js
@@ -1,4 +1,4 @@
-import { mean } from 'd3';
+import { mean } from 'd3-array';
 import PropTypes from 'prop-types';
 import React from 'react';
 import LineChart from './LineChart.js';

diff --git a/src/LineChart.js b/src/LineChart.js
@@ -1,4 +1,6 @@
-import { bisector, line, curveLinear } from 'd3';
+import { line, curveLinear } from 'd3-shape';
+import { bisector } from 'd3-array';
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import * as CustomPropTypes from './utils/CustomPropTypes';

diff --git a/src/TreeMapNode.js b/src/TreeMapNode.js
@@ -39,8 +39,8 @@ const TreeMapNode = props => {
   const customStyle = isFunction(nodeStyle)
     ? nodeStyle(node)
     : isObject(nodeStyle)
-      ? nodeStyle
-      : {};
+    ? nodeStyle
+    : {};
   Object.assign(style, customStyle);
 
   const handlers = [

diff --git a/src/ZoomContainer.js b/src/ZoomContainer.js
@@ -1,4 +1,5 @@
-import * as d3 from 'd3';
+import { select } from 'd3-selection';
+import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
 import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -7,9 +8,7 @@ import React from 'react';
 
 function zoomTransformFromProps(props) {
   const { zoomScale, zoomX, zoomY } = props;
-  return d3.zoomIdentity
-    .translate(zoomX || 0, zoomY || 0)
-    .scale(zoomScale || 1);
+  return zoomIdentity.translate(zoomX || 0, zoomY || 0).scale(zoomScale || 1);
 }
 
 /**
@@ -130,9 +129,9 @@ export default class ZoomContainer extends React.Component {
 
   componentDidMount() {
     const initialZoomTransform = zoomTransformFromProps(this.props);
-    const selection = d3.select(this.svgRef.current);
+    const selection = select(this.svgRef.current);
 
-    this.zoom = d3.zoom();
+    this.zoom = zoom();
     selection.call(this.zoom);
 
     if (this.props.disableMouseWheelZoom) {
@@ -177,8 +176,8 @@ export default class ZoomContainer extends React.Component {
     this._updateZoomProps(nextProps);
   }
 
-  handleZoom = (...args) => {
-    const nextZoomTransform = d3.event.transform;
+  handleZoom = (event, ...args) => {
+    const nextZoomTransform = event.transform;
 
     if (this.props.controlled) {
       // zoom transform should be controlled by props, but d3-zoom has already applied new transform to this.zoom
@@ -230,9 +229,9 @@ export default class ZoomContainer extends React.Component {
   }
 
   render() {
-    const zoomTransform =
+    const theZoomTransform =
       this.svgRef && this.svgRef.current
-        ? d3.zoomTransform(this.svgRef.current)
+        ? zoomTransform(this.svgRef.current)
         : null;
 
     return (
@@ -244,7 +243,7 @@ export default class ZoomContainer extends React.Component {
         <g
           width={this.props.width}
           height={this.props.height}
-          transform={zoomTransform}
+          transform={theZoomTransform}
         >
           {this.props.children}
         </g>

diff --git a/src/utils/Data.js b/src/utils/Data.js
@@ -15,7 +15,7 @@ import uniqBy from 'lodash/uniqBy';
 import has from 'lodash/has';
 import forEach from 'lodash/forEach';
 import identity from 'lodash/identity';
-import { extent } from 'd3';
+import { extent } from 'd3-array';
 import React from 'react';
 
 /**
@@ -39,8 +39,8 @@ export function makeAccessor(key) {
   return isFunction(key)
     ? key
     : isNull(key) || isUndefined(key)
-      ? identity
-      : property(key);
+    ? identity
+    : property(key);
 }
 
 /**