fix: use d3-delaunay

Author: tannerlinsley

.eslintrc

@@ -1,10 +1,4 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["react-app", "prettier"],
-  "env": {
-    "es6": true
-  },
-  "parserOptions": {
-    "sourceType": "module"
-  }
+  "extends": ["react-app", "prettier"]
+  // "parser": "babel-eslint"
 }

.gitignore

@@ -9,6 +9,7 @@ build
 dist
 artifacts
 .rpt2_cache
+d3/index.js
 
 # misc
 .DS_Store

src/d3/entry.js renamed to d3/entry.js

@@ -1,12 +1,6 @@
-export {voronoi} from 'd3-voronoi'
+export { Delaunay } from 'd3-delaunay'
 
-export {
-  scaleLinear,
-  scaleLog,
-  scaleTime,
-  scaleUtc,
-  scaleBand
-} from "d3-scale"
+export { scaleLinear, scaleLog, scaleTime, scaleUtc, scaleBand } from 'd3-scale'
 
 export {
   arc,
@@ -31,4 +25,4 @@ export {
   curveStep,
   curveStepAfter,
   curveStepBefore,
-} from 'd3-shape'
+} from 'd3-shape'

d3/rollup.config.js

@@ -0,0 +1,22 @@
+import path from 'path'
+import node from 'rollup-plugin-node-resolve'
+// import { terser } from 'rollup-plugin-terser'
+
+export default [
+  {
+    input: path.join(__dirname, 'entry.js'),
+    output: {
+      format: 'es',
+      file: path.join(__dirname, 'index.js'),
+    },
+    plugins: [node()],
+    onwarn,
+  },
+]
+
+function onwarn(message) {
+  if (message.code === 'CIRCULAR_DEPENDENCY') {
+    return
+  }
+  console.error(message)
+}

package.json

@@ -12,12 +12,11 @@
     "test:dev": "jest --watch",
     "test:ci": "jest",
     "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
-    "build-d3": "rollup -c src/d3/rollup.config.js",
+    "build-d3": "rollup -c d3/rollup.config.js",
     "build": "yarn build-d3 && NODE_ENV=production rollup -c",
     "now-build": "yarn && cd www && yarn && yarn build",
     "start": "yarn build-d3 && rollup -c -w",
-    "prepare": "yarn build",
-    "prepublishOnly": "yarn test:ci",
+    "prepublishOnly": "yarn build && yarn test:ci",
     "release": "yarn publish",
     "releaseNext": "yarn publish --tag next",
     "format": "prettier {src,src/**,example/src,example/src/**}/*.{md,js,jsx,tsx} --write",
@@ -35,48 +34,58 @@
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "react": "^16.6.3"
-  },
   "dependencies": {
     "@reach/observe-rect": "^1.1.0",
-    "d3-delaunay": "^5.2.1",
+    "@scarf/scarf": "^1.0.0",
+    "d3-delaunay": "^5.3.0",
     "d3-scale": "^3.2.1",
-    "d3-shape": "^1.3.7",
-    "d3-voronoi": "^1.1.2"
+    "d3-shape": "^1.3.7"
+  },
+  "peerDependencies": {
+    "react": "^16.6.3"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-replace": "^2.3.2",
-    "@svgr/rollup": "^5.3.0",
+    "@babel/core": "^7.8.6",
+    "@babel/preset-env": "^7.8.6",
+    "@babel/preset-react": "^7.8.3",
+    "@rollup/plugin-replace": "^2.3.1",
+    "@svgr/rollup": "^4.3.0",
+    "@testing-library/react": "^9.4.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.1.0",
-    "cross-env": "^7.0.2",
-    "eslint": "6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-flowtype": "4.7.0",
-    "eslint-plugin-import": "2.20.1",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "2.5.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "jest": "^26.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "rollup": "^2.2.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "babel-eslint": "9.x",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-transform-async-to-promises": "^0.8.15",
+    "cross-env": "^5.1.4",
+    "dtslint": "^3.4.1",
+    "eslint": "5.x",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-config-react-app": "^4.0.1",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-config-standard-react": "^7.0.2",
+    "eslint-plugin-flowtype": "2.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-react": "7.18.3",
+    "eslint-plugin-react-hooks": "1.5.0",
+    "eslint-plugin-standard": "^4.0.0",
+    "is-ci-cli": "^2.0.0",
+    "jest": "^24.9.0",
+    "prettier": "^1.19.1",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-error-boundary": "^2.2.1",
+    "rollup": "^1.32.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-jscc": "^1.0.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
+    "rollup-plugin-prettier": "^0.6.0",
     "rollup-plugin-size": "^0.2.2",
-    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-terser": "^5.2.0",
     "rollup-plugin-visualizer": "^4.0.4"
   }
 }

size-plugin.json

@@ -1 +1 @@
-[{"timestamp":1590788251975,"files":[{"filename":"react-charts.production.min.js","size":36178,"delta":19703}]},{"timestamp":1585154943498,"files":[{"filename":"react-charts.production.min.js","size":16475,"delta":16475}]}]
+[{"timestamp":1591076297995,"files":[{"filename":"react-charts.production.min.js","size":38874,"delta":2933}]},{"timestamp":1590960432591,"files":[{"filename":"react-charts.production.min.js","size":35941,"delta":-237}]},{"timestamp":1590788251975,"files":[{"filename":"react-charts.production.min.js","size":36178,"delta":19703}]},{"timestamp":1585154943498,"files":[{"filename":"react-charts.production.min.js","size":16475,"delta":16475}]}]

src/.eslintrc

@@ -1,9 +1,8 @@
 import React from 'react'
-import { voronoi, line } from '../d3'
+import { Delaunay, line } from '../../d3'
 //
 import ChartContext from '../utils/ChartContext'
 import Path from '../primitives/Path'
-// import Utils from '../utils/Utils'
 
 const lineFn = line()
 
@@ -143,23 +142,28 @@ export default function Voronoi() {
         })
     })
 
-    vor = voronoi()
-      .x(d => d.x)
-      .y(d => d.y)
-      .extent(extent)(voronoiData)
+    const delaunay = Delaunay.from(
+      voronoiData,
+      d => d.x,
+      d => d.y
+    )
+
+    const voronoi = delaunay.voronoi(extent.flat())
 
-    polygons = vor.polygons()
+    polygons = [...voronoi.cellPolygons()]
 
     return (
       <VoronoiElement>
         {polygons.map((points, i) => {
+          const index = points.index
+          const datum = voronoiData[index].datum
           const path = lineFn(points)
           return (
             <Path
               key={i}
               d={path}
               className="action-voronoi"
-              onMouseEnter={e => onHover(points.data.datum)}
+              onMouseEnter={e => onHover(datum)}
               onMouseLeave={e => onHover(null)}
               style={{
                 fill: 'rgba(0,0,0,.2)',
@@ -175,6 +179,7 @@ export default function Voronoi() {
     gridHeight,
     gridWidth,
     height,
+    needsVoronoi,
     onHover,
     primaryAxes.length,
     secondaryAxes.length,

src/components/Voronoi.js

@@ -1,21 +1,21 @@
-import React from "react";
+import React from 'react'
 //
 
 const defaultStyle = {
   r: 2,
-  strokeWidth: "1",
-  stroke: "#000000",
-  fill: "#000000",
-  opacity: 1
-};
+  strokeWidth: '1',
+  stroke: '#000000',
+  fill: '#000000',
+  opacity: 1,
+}
 
 export default function Circle({ x, y, r, style, ...rest }) {
   const resolvedStyle = {
     ...defaultStyle,
-    ...style
-  };
+    ...style,
+  }
 
   return (
     <circle {...rest} cx={x || 0} cy={y || 0} r={1} style={resolvedStyle} />
-  );
+  )
 }

src/d3/index.js

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react'
 
 export default React.forwardRef(function Group(props, ref) {
-  return <g {...props} ref={ref} />;
-});
+  return <g {...props} ref={ref} />
+})

src/d3/rollup.config.js

@@ -1,21 +1,17 @@
-import React from "react";
+import React from 'react'
 //
 
 const defaultStyle = {
   strokeWidth: 1,
-  fill: "transparent",
-  opacity: 1
-};
-
-export default class Line extends React.Component {
-  render() {
-    const { style, ...rest } = this.props;
-
-    const resolvedStyle = {
-      ...defaultStyle,
-      ...style
-    };
+  fill: 'transparent',
+  opacity: 1,
+}
 
-    return <line {...rest} style={resolvedStyle} />;
+export default function Line({ style, ...rest }) {
+  const resolvedStyle = {
+    ...defaultStyle,
+    ...style,
   }
+
+  return <line {...rest} style={resolvedStyle} />
 }

src/hooks/usePropsMemo.js

@@ -1,18 +1,18 @@
-import React from "react";
+import React from 'react'
 //
 
 const defaultStyle = {
   strokeWidth: 2,
-  stroke: "#6b6b6b",
-  fill: "transparent",
-  opacity: 1
-};
+  stroke: '#6b6b6b',
+  fill: 'transparent',
+  opacity: 1,
+}
 
 export default function Path({ style, ...rest }) {
   const resolvedStyle = {
     ...defaultStyle,
-    ...style
-  };
+    ...style,
+  }
 
-  return <path {...rest} style={resolvedStyle} />;
+  return <path {...rest} style={resolvedStyle} />
 }