Merge 9fa562e into c8cfeab

.eslintrc

@@ -6,7 +6,8 @@
   },
   "env": {
     "es6": true,
-    "browser": true
+    "browser": true,
+    "node": true
   },
   "extends": [
     "eslint:recommended",

.travis.yml

@@ -3,8 +3,8 @@ node_js:
   - '8'
   - '10'
 script:
-  - cd packages/react-vis
   - npm run lint
+  - cd packages/react-vis
   - npm run cover
 after_success:
   - npm install -g coveralls

package.json

@@ -25,10 +25,18 @@
     "es6",
     "babel"
   ],
-  "scripts":{
+  "scripts": {
+    "lint": "eslint .",
     "remove-unpm-rfs": "./remove-refs-to-unpm.pl"
   },
   "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-no-only-tests": "^2.4.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
     "husky": "^1.1.2"
   },
   "husky": {

packages/react-vis/package.json

@@ -25,7 +25,6 @@
     "start": "(cd showcase && command -v yarn >/dev/null && yarn && npm start || npm install && npm start)",
     "build:browser": "browserify src/index.js -t [ babelify ] --standalone reactVis | uglifyjs > dist/dist.min.js",
     "build": "yarn run clean && babel src -d dist --copy-files && BABEL_ENV=es babel src -d es --copy-files && node-sass src/main.scss dist/style.css --output-style compressed && yarn run build:browser",
-    "lint": "eslint . --ignore-pattern node_modules --ignore-pattern bundle.js",
     "lint-styles": "stylelint src/styles/*.scss --syntax scss",
     "test:windows": "babel-node --inspect ./tests/index.js",
     "test": "node --inspect ./node_modules/.bin/babel-node ./tests/index.js",
@@ -54,7 +53,6 @@
   },
   "devDependencies": {
     "babel-cli": "6.18.0",
-    "babel-eslint": "^10.1.0",
     "babel-plugin-module-resolver": "^2.4.0",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-es2017": "^6.24.1",
@@ -66,12 +64,6 @@
     "canvas-prebuilt": "^1.6.11",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-no-only-tests": "^2.4.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
     "jsdom": "^9.9.1",
     "node-sass": "^4.9.3",
     "nyc": "^13.0.1",

packages/showcase/app.js

@@ -27,7 +27,7 @@ import {BrowserRouter, Route} from 'react-router-dom';
 import ShowcaseApp from './showcase-app';
 import '../react-vis/src/styles/examples.scss';
 
-export default function App(props) {
+export default function App() {
   // using react-router to trigger react updates on url change
   return (
     <BrowserRouter>

packages/showcase/axes/custom-axes-orientation.js

@@ -29,7 +29,7 @@ import {
   LineSeries
 } from 'index';
 
-export default function Example(props) {
+export default function Example() {
   return (
     <XYPlot
       margin={{top: 40, right: 40, left: 10, bottom: 10}}

packages/showcase/axes/custom-axes.js

@@ -35,16 +35,17 @@ const WORDS = [
   'skateboard',
   'wow',
   'such',
+  // eslint-disable-next-line react/jsx-key
   <tspan>
-    <tspan x="0" dy="1em">
+    <tspan key="" mx="0" dy="1em">
       Multiline
     </tspan>
     <tspan x="0" dy="1em">
       dogs
     </tspan>
   </tspan>
 ];
-export default function Example(props) {
+export default function Example() {
   return (
     <XYPlot margin={MARGIN} width={300} height={300}>
       <XAxis top={0} hideLine tickValues={[0, 1, 3, 4, 5]} title="X" />
@@ -53,7 +54,10 @@ export default function Example(props) {
       <YAxis left={50} tickFormat={v => v * v} />
       <YAxis hideLine left={150} tickFormat={v => WORDS[v]} />
       <MarkSeries
-        data={[{x: 0, y: 0}, {x: 5, y: 5}]}
+        data={[
+          {x: 0, y: 0},
+          {x: 5, y: 5}
+        ]}
         opacity={0}
         opacityType="linear"
       />

packages/showcase/axes/custom-axis-tick-element.js

@@ -33,19 +33,23 @@ export default class Example extends React.Component {
   state = {
     data: [
       {x: 0, y: 100, label: <circle cx={0} cy={10} r={5} fill="darksalmon" />},
-      {x: 1, y: 200, label: <rect x={-5} y={5} width={10} height={10} fill="slateblue" />},
+      {
+        x: 1,
+        y: 200,
+        label: <rect x={-5} y={5} width={10} height={10} fill="slateblue" />
+      },
       {x: 2, y: 500, label: <tspan>Label</tspan>},
       {x: 3, y: 900, label: <path d="M0 5 L5 15 L-5 15 Z" fill="sandybrown" />},
       {x: 4, y: 1000, label: 'Label'}
     ]
   };
 
-  formatX = (v, i, scale, tickTotal) => {
+  formatX = (v, i) => {
     if (i < this.state.data.length) {
       return this.state.data[i].label;
     }
     return null;
-  }
+  };
 
   render() {
     return (

packages/showcase/axes/custom-axis.js

@@ -29,7 +29,7 @@ import {
   LineSeries
 } from 'index';
 
-export default function Example(props) {
+export default function Example() {
   const axisStyle = {
     ticks: {
       fontSize: '14px',
@@ -54,7 +54,13 @@ export default function Example(props) {
         style={axisStyle}
       />
       <YAxis hideTicks />
-      <LineSeries data={[{x: 1, y: 10}, {x: 2, y: 5}, {x: 3, y: 15}]} />
+      <LineSeries
+        data={[
+          {x: 1, y: 10},
+          {x: 2, y: 5},
+          {x: 3, y: 15}
+        ]}
+      />
     </XYPlot>
   );
 }

packages/showcase/axes/decorative-axes-criss-cross.js

@@ -29,7 +29,7 @@ const MARGIN = {
   bottom: 30
 };
 
-export default function Example(props) {
+export default function Example() {
   return (
     <XYPlot
       dontCheckIfEmpty

packages/showcase/axes/parallel-coordinates-example.js

@@ -65,7 +65,7 @@ const MARGIN = {
   bottom: 10
 };
 
-function ParallelCoordinatesExample(props) {
+function ParallelCoordinatesExample() {
   return (
     <XYPlot
       width={500}

packages/showcase/axes/static-crosshair.js

@@ -30,16 +30,33 @@ import {
   Crosshair
 } from 'index';
 
-export default function Example(props) {
+export default function Example() {
   return (
     <XYPlot width={300} height={300}>
       <VerticalGridLines />
       <HorizontalGridLines />
       <XAxis />
       <YAxis />
-      <LineSeries data={[{x: 1, y: 10}, {x: 2, y: 7}, {x: 3, y: 15}]} />
-      <LineSeries data={[{x: 1, y: 20}, {x: 2, y: 5}, {x: 3, y: 15}]} />
-      <Crosshair values={[{x: 2, y: 5}, {x: 2, y: 7}]} />
+      <LineSeries
+        data={[
+          {x: 1, y: 10},
+          {x: 2, y: 7},
+          {x: 3, y: 15}
+        ]}
+      />
+      <LineSeries
+        data={[
+          {x: 1, y: 20},
+          {x: 2, y: 5},
+          {x: 3, y: 15}
+        ]}
+      />
+      <Crosshair
+        values={[
+          {x: 2, y: 5},
+          {x: 2, y: 7}
+        ]}
+      />
     </XYPlot>
   );
 }

packages/showcase/axes/static-hints.js

@@ -30,15 +30,20 @@ import {
   Hint
 } from 'index';
 
-export default function Example(props) {
+export default function Example() {
   return (
     <XYPlot width={300} height={300}>
       <VerticalGridLines />
       <HorizontalGridLines />
       <XAxis />
       <YAxis />
       <LineSeries
-        data={[{x: 0, y: 1}, {x: 1, y: 10}, {x: 2, y: 5}, {x: 3, y: 15}]}
+        data={[
+          {x: 0, y: 1},
+          {x: 1, y: 10},
+          {x: 2, y: 5},
+          {x: 3, y: 15}
+        ]}
       />
       <Hint value={{x: 1, y: 10}} />
       <Hint

packages/showcase/color/line-chart-many-colors.js

@@ -52,8 +52,8 @@ export default function Example() {
       <VerticalGridLines />
       <XAxis />
       <YAxis />
-      {data.map(props => (
-        <LineSeries {...props} />
+      {data.map(({key, ...props}) => (
+        <LineSeries key={key} {...props} />
       ))}
     </XYPlot>
   );

packages/showcase/color/mini-color-examples.js

@@ -312,7 +312,7 @@ function generateCharts(seriesData, props) {
       {[VerticalBarSeries, LineSeries, MarkSeries].map((Type, key) => (
         <XYPlot key={key} {...defaultXYPlotProps} {...props}>
           {seriesData.map((d, i) => (
-            <Type {...d} />
+            <Type key={i} {...d} />
           ))}
         </XYPlot>
       ))}

packages/showcase/examples/force-directed-graph/force-directed-graph.js

@@ -56,7 +56,10 @@ function generateSimulation(props) {
   const links = data.links.map(d => ({...d}));
   // build the simuatation
   const simulation = forceSimulation(nodes)
-    .force('link', forceLink().id(d => d.id))
+    .force(
+      'link',
+      forceLink().id(d => d.id)
+    )
     .force('charge', forceManyBody().strength(strength))
     .force('center', forceCenter(width / 2, height / 2))
     .stop();
@@ -99,7 +102,7 @@ class ForceDirectedGraph extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       data: generateSimulation(nextProps)
     });
@@ -118,7 +121,10 @@ class ForceDirectedGraph extends React.Component {
               color={'#B3AD9E'}
               key={`link-${index}`}
               opacity={0.3}
-              data={[{...source, color: null}, {...target, color: null}]}
+              data={[
+                {...source, color: null},
+                {...target, color: null}
+              ]}
             />
           );
         })}

packages/showcase/examples/responsive-vis/responsive-scatterplot.js

@@ -74,7 +74,7 @@ export default class ResponsiveScatterplot extends React.Component {
     selectedPoints: []
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // not the greatest
     this.setState({
       binData: transformToBinData(

packages/showcase/examples/responsive-vis/responsive-vis-utils.js

@@ -112,7 +112,7 @@ function transformColor(data, hovered = [], useRange = false) {
     ? scaleLinear()
         .domain([0, samplePoint.maxCount])
         .range(['#fff', '#EF5D28'])
-    : d => '#EF5D28';
+    : () => '#EF5D28';
 
   const hoveredPoints = hovered.reduce((res, row) => {
     res[useRange ? `${row.x}-${row.y}` : row.label] = true;

packages/showcase/legends/searchable-discrete-color-hover.js

@@ -40,7 +40,7 @@ export default class SearchableDiscreteColorLegendHoverExample extends Component
     };
   }
 
-  _clickHandler = (item, i, e) => {
+  _clickHandler = (item, i) => {
     const {items} = this.state;
     items[i].disabled = !items[i].disabled;
     this.setState({items});
@@ -56,23 +56,22 @@ export default class SearchableDiscreteColorLegendHoverExample extends Component
       <SearchableDiscreteColorLegend
         height={200}
         width={300}
-        onItemMouseEnter={i => this.setState({
-          hoveredItem: {
-            ...i,
-            title: `${i.title}:SELECTED`}
+        onItemMouseEnter={i =>
+          this.setState({
+            hoveredItem: {
+              ...i,
+              title: `${i.title}:SELECTED`
+            }
           })
         }
         onItemMouseLeave={() => this.setState({hoveredItem: false})}
         onSearchChange={this._searchChangeHandler}
         searchText={searchText}
         onItemClick={this._clickHandler}
-        items={items.map(
-          (item, key) =>
-            hoveredItem && hoveredItem.title.includes(item.title) ? (
-              hoveredItem
-            ) : (
-              item
-            )
+        items={items.map(item =>
+          hoveredItem && hoveredItem.title.includes(item.title)
+            ? hoveredItem
+            : item
         )}
       />
     );

packages/showcase/misc/2d-dragable-plot.js

@@ -35,7 +35,7 @@ import {generateSeededRandom} from '../showcase-utils';
 const seededRandom = generateSeededRandom(3);
 
 // randomly generated data
-const data = [...new Array(30)].map(row => ({
+const data = [...new Array(30)].map(() => ({
   x: seededRandom() * 5,
   y: seededRandom() * 10
 }));
@@ -74,7 +74,7 @@ export default class BidirectionDragChart extends React.Component {
             onBrushEnd={area =>
               this.setState({highlighting: false, filter: area})
             }
-            onDragStart={area => this.setState({highlighting: true})}
+            onDragStart={() => this.setState({highlighting: true})}
             onDrag={area => this.setState({filter: area})}
             onDragEnd={area =>
               this.setState({highlighting: false, filter: area})
@@ -89,7 +89,7 @@ export default class BidirectionDragChart extends React.Component {
             colorType="literal"
             getColor={d => (highlightPoint(d) ? '#EF5D28' : '#12939A')}
             onValueMouseOver={d => this.setState({hovered: d})}
-            onValueMouseOut={d => this.setState({hovered: false})}
+            onValueMouseOut={() => this.setState({hovered: false})}
             data={data}
           />
           {hovered && <Hint value={hovered} />}

packages/showcase/misc/animation-example.js

@@ -31,7 +31,7 @@ import {
 } from 'index';
 
 function generateData() {
-  return [...new Array(10)].map(row => ({
+  return [...new Array(10)].map(() => ({
     x: Math.random() * 5,
     y: Math.random() * 10
   }));