Merge c8cfeab into 4f108fc

.eslintrc

@@ -3,7 +3,7 @@
     "react":{
       "version": "detect"
     }
-  },  
+  },
   "env": {
     "es6": true,
     "browser": true
@@ -21,6 +21,7 @@
     "object-curly-spacing": 0,
     "babel/object-curly-spacing": 2,
     "no-only-tests/no-only-tests": 2,
+    "react/prop-types": "off"
   },
   "parser": "babel-eslint",
   "plugins": [

.gitignore

@@ -10,8 +10,9 @@ yarn-error.log*
 .DS_Store
 .idea/
 public/
+.vscode/
 
-showcase/bundle.js
-showcase/bundle.css
+bundle.js
+bundle.css
 
 /index.html

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 node_js:
   - '8'
-  - '9'
   - '10'
 script:
   - cd packages/react-vis

packages/react-vis/package.json

@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "babel-cli": "6.18.0",
-    "babel-eslint": "^7.1.1",
+    "babel-eslint": "^10.1.0",
     "babel-plugin-module-resolver": "^2.4.0",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-es2017": "^6.24.1",
@@ -65,6 +65,7 @@
     "browserify": "^14.3.0",
     "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",

packages/react-vis/src/animation.js

@@ -46,7 +46,7 @@ export function extractAnimatedPropValues(props) {
   const {animatedProps, ...otherProps} = props;
 
   return animatedProps.reduce((result, animatedPropName) => {
-    if (otherProps.hasOwnProperty(animatedPropName)) {
+    if (Object.prototype.hasOwnProperty.call(otherProps, animatedPropName)) {
       result[animatedPropName] = otherProps[animatedPropName];
     }
     return result;
@@ -59,6 +59,7 @@ class Animation extends PureComponent {
     this._updateInterpolator(props);
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillUpdate(props) {
     this._updateInterpolator(this.props, props);
     if (props.onStart) {

packages/react-vis/src/make-vis-flexible.js

@@ -140,6 +140,7 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
       this.cancelSubscription = subscribeToDebouncedResize(this._onResize);
     }
 
+    // eslint-disable-next-line react/no-deprecated
     componentWillReceiveProps() {
       this._onResize();
     }

packages/react-vis/src/parallel-coordinates/index.js

@@ -83,7 +83,7 @@ function getAxes(props) {
  */
 function getLabels(props) {
   const {domains, style} = props;
-  return domains.map((domain, index) => {
+  return domains.map(domain => {
     return {
       x: domain.name,
       y: 1.1,
@@ -123,7 +123,7 @@ function getLines(props) {
 
   return data.map((row, rowIndex) => {
     let withinFilteredRange = true;
-    const mappedData = domains.map((domain, index) => {
+    const mappedData = domains.map(domain => {
       const {getValue, name} = domain;
 
       // watch out! Gotcha afoot

packages/react-vis/src/plot/highlight.js

@@ -155,7 +155,7 @@ class Highlight extends AbstractSeries {
     }
   }
 
-  stopBrushing(e) {
+  stopBrushing() {
     const {brushing, dragging, brushArea} = this.state;
     // Quickly short-circuit if the user isn't brushing in our component
     if (!brushing && !dragging) {

packages/react-vis/src/plot/series/arc-series.js

@@ -206,24 +206,18 @@ class ArcSeries extends AbstractSeries {
           const rowClassName = row.className || '';
           return (
             <path
-              {...{
-                style: {
-                  opacity: opacity && opacity(row),
-                  stroke: stroke && stroke(row),
-                  fill: fill && fill(row),
-                  ...style,
-                  ...rowStyle
-                },
-                onClick: e => this._valueClickHandler(modifyRow(row), e),
-                onContextMenu: e =>
-                  this._valueRightClickHandler(modifyRow(row), e),
-                onMouseOver: e =>
-                  this._valueMouseOverHandler(modifyRow(row), e),
-                onMouseOut: e => this._valueMouseOutHandler(modifyRow(row), e),
-                key: i,
-                className: `${predefinedClassName}-path ${arcClassName} ${rowClassName}`,
-                d: arcedData(arcArg)
-              }}
+              key={`path-${i}`}
+              style={{opacity: opacity && opacity(row),
+              stroke: stroke && stroke(row),
+              fill: fill && fill(row),
+              ...style,
+              ...rowStyle}}
+              onClick={e => this._valueClickHandler(modifyRow(row), e)}
+              onContextMenu={e =>this._valueRightClickHandler(modifyRow(row), e)}
+              onMouseOver={e => this._valueMouseOverHandler(modifyRow(row), e)}
+              onMouseOut={e => this._valueMouseOutHandler(modifyRow(row), e)}
+              className={`${predefinedClassName}-path ${arcClassName} ${rowClassName}`}
+              d={arcedData(arcArg)}
             />
           );
         })}

packages/react-vis/src/plot/series/bar-series.js

@@ -124,9 +124,8 @@ class BarSeries extends AbstractSeries {
             onContextMenu: e => this._valueRightClickHandler(d, e),
             onMouseOver: e => this._valueMouseOverHandler(d, e),
             onMouseOut: e => this._valueMouseOutHandler(d, e),
-            key: i
           };
-          return <rect {...attrs} />;
+          return <rect key={`${i}`} {...attrs} />;
         })}
       </g>
     );

packages/react-vis/src/plot/series/custom-svg-series.js

@@ -44,7 +44,7 @@ function predefinedComponents(type, size = 2, style = DEFAULT_STYLE) {
             2} 0 0`}
         />
       );
-    case 'star':
+    case 'star': {
       const starPoints = [...new Array(5)]
         .map((c, index) => {
           const angle = index / 5 * Math.PI * 2;
@@ -69,6 +69,7 @@ function predefinedComponents(type, size = 2, style = DEFAULT_STYLE) {
           style={style}
         />
       );
+    }
     case 'square':
       return (
         <rect

packages/react-vis/src/plot/series/heatmap-series.js

@@ -81,13 +81,12 @@ class HeatmapSeries extends AbstractSeries {
             y: y(d) - yDistance / 2,
             width: xDistance,
             height: yDistance,
-            key: i,
             onClick: e => this._valueClickHandler(d, e),
             onContextMenu: e => this._valueRightClickHandler(d, e),
             onMouseOver: e => this._valueMouseOverHandler(d, e),
             onMouseOut: e => this._valueMouseOutHandler(d, e)
           };
-          return <rect {...attrs} />;
+          return <rect key={i} {...attrs} />;
         })}
       </g>
     );

packages/react-vis/src/plot/series/hexbin-series.js

@@ -99,13 +99,12 @@ class HexbinSeries extends AbstractSeries {
               : hexagonPath,
             fill: color(d.length),
             transform: `translate(${d.x}, ${d.y})`,
-            key: i,
             onClick: e => this._valueClickHandler(d, e),
             onContextMenu: e => this._valueRightClickHandler(d, e),
             onMouseOver: e => this._valueMouseOverHandler(d, e),
             onMouseOut: e => this._valueMouseOutHandler(d, e)
           };
-          return <path {...attrs} />;
+          return <path key={String(i)} {...attrs} />;
         })}
       </g>
     );

packages/react-vis/src/plot/series/label-series.js

@@ -100,7 +100,6 @@ class LabelSeries extends AbstractSeries {
           const attrs = {
             dominantBaseline: getDominantBaseline(labelAnchorY, aboveMiddle),
             className: 'rv-xy-plot__series--label-text',
-            key: i,
             onClick: e => this._valueClickHandler(d, e),
             onContextMenu: e => this._valueRightClickHandler(d, e),
             onMouseOver: e => this._valueMouseOverHandler(d, e),
@@ -112,7 +111,7 @@ class LabelSeries extends AbstractSeries {
             ...markStyle
           };
           const textContent = getLabel(_data ? _data[i] : d);
-          return res.concat([<text {...attrs}>{textContent}</text>]);
+          return res.concat([<text key={String(i)} {...attrs}>{textContent}</text>]);
         }, [])}
       </g>
     );

packages/react-vis/src/plot/series/mark-series-canvas.js

@@ -39,7 +39,7 @@ class MarkSeriesCanvas extends AbstractSeries {
 
     const x = getAttributeFunctor(props, 'x');
     const y = getAttributeFunctor(props, 'y');
-    const size = getAttributeFunctor(props, 'size') || (p => DEFAULT_SIZE);
+    const size = getAttributeFunctor(props, 'size') || (() => DEFAULT_SIZE);
     const fill =
       getAttributeFunctor(props, 'fill') || getAttributeFunctor(props, 'color');
     const stroke =

packages/react-vis/src/plot/series/rect-series.js

@@ -96,10 +96,9 @@ class RectSeries extends AbstractSeries {
             onClick: e => this._valueClickHandler(d, e),
             onContextMenu: e => this._valueRightClickHandler(d, e),
             onMouseOver: e => this._valueMouseOverHandler(d, e),
-            onMouseOut: e => this._valueMouseOutHandler(d, e),
-            key: i
+            onMouseOut: e => this._valueMouseOutHandler(d, e)
           };
-          return <rect {...attrs} />;
+          return <rect key={String(i)} {...attrs} />;
         })}
       </g>
     );

packages/react-vis/src/plot/xy-plot.js

@@ -144,6 +144,7 @@ class XYPlot extends React.Component {
     };
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps) {
     const children = getSeriesChildren(nextProps.children);
     const nextData = getStackedData(children, nextProps.stackBy);
@@ -487,7 +488,7 @@ class XYPlot extends React.Component {
     });
   };
 
-  renderCanvasComponents(components, props) {
+  renderCanvasComponents(components) {
     const componentsToRender = components.filter(
       c => c && !c.type.requiresSVG && c.type.isCanvas
     );
@@ -563,7 +564,7 @@ class XYPlot extends React.Component {
         >
           {components.filter(c => c && c.type.requiresSVG)}
         </svg>
-        {this.renderCanvasComponents(components, this.props)}
+        {this.renderCanvasComponents(components)}
         {components.filter(c => c && !c.type.requiresSVG && !c.type.isCanvas)}
       </div>
     );

packages/react-vis/src/radar-chart/index.js

@@ -139,7 +139,17 @@ function getLabels(props) {
  * @return {Array} the plotted axis components
  */
 function getPolygons(props) {
-  const {animation, colorRange, domains, data, style, startingAngle, onSeriesMouseOver, onSeriesMouseOut} = props;
+  const {
+    animation,
+    colorRange,
+    domains,
+    data,
+    style,
+    startingAngle,
+    onSeriesMouseOver,
+    onSeriesMouseOut
+  } = props;
+
   const scales = domains.reduce((acc, {domain, name}) => {
     acc[name] = scaleLinear().domain(domain).range([0, 1]);
     return acc;

packages/react-vis/src/treemap/index.js

@@ -100,6 +100,7 @@ class Treemap extends React.Component {
     };
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(props) {
     this.setState({
       scales: _getScaleFns(props),

packages/react-vis/src/utils/series-utils.js

@@ -115,7 +115,7 @@ export function getStackedData(children, attr) {
   // It stores the last segment position added to each bar, separated by cluster.
   const latestAttrPositions = {};
 
-  return children.reduce((accumulator, series, seriesIndex) => {
+  return children.reduce((accumulator, series) => {
     // Skip the children that are not series (e.g. don't have any data).
     if (!series) {
       accumulator.push(null);
@@ -140,7 +140,7 @@ export function getStackedData(children, attr) {
     const baseAttr = attr === 'y' ? 'x' : 'y';
 
     accumulator.push(
-      preppedData.map((d, dIndex) => {
+      preppedData.map((d) => {
         if (!latestAttrPositions[cluster]) {
           latestAttrPositions[cluster] = {};
         }

packages/react-vis/tests/.eslintrc

@@ -1,5 +1,6 @@
 {
   "rules": {
-    "max-len": "off"
+    "max-len": "off",
+    "react/jsx-key": "off"
   }
 }

packages/react-vis/tests/components/animation-tests.js

@@ -43,7 +43,7 @@ test('Animation interpolates xDomain when specified', t => {
   const renderedAnimationWrapper = wrapper.find(Animation);
 
   t.deepEqual(
-    renderedAnimationWrapper.children(AxisTicks).prop('xDomain'),
+    renderedAnimationWrapper.find(AxisTicks).prop('xDomain'),
     ['Black'],
     'Axis interpolates props and passes to Animation'
   );

packages/react-vis/tests/components/area-series-tests.js

@@ -32,12 +32,12 @@ test('AreaSeries: basic rendering', t => {
     'should find the right number of series'
   );
   t.equal(
-    $.find('.rv-xy-plot__series path').length,
+    $.find('path.rv-xy-plot__series').length,
     1,
     'should find the right number of series'
   );
   t.equal(
-    $.find('.area-chart-example').length,
+    $.find('path.area-chart-example').length,
     1,
     'should find the right number of custom named series'
   );
@@ -74,7 +74,7 @@ test('AreaSeries: Showcase Example - AreaChart', t => {
     'should find the right number of series'
   );
   t.equal(
-    $.find('.area-series-example').length,
+    $.find('path.area-series-example').length,
     1,
     'should find the right number of custom named series'
   );
@@ -94,12 +94,12 @@ test('AreaSeries: Showcase Example - AreaChartElevated', t => {
     'should find the right number of pathes'
   );
   t.equal(
-    $.find('.area-elevated-series-1').length,
+    $.find('path.area-elevated-series-1').length,
     1,
     'should find the first custom component correctly'
   );
   t.equal(
-    $.find('.area-elevated-series-2').length,
+    $.find('path.area-elevated-series-2').length,
     1,
     'should find the second custom component correctly'
   );

packages/react-vis/tests/components/bar-series-tests.js

@@ -28,14 +28,14 @@ test('BarSeries: Showcase Example - BarChart', t => {
     'should find the right number of bars'
   );
   t.equal(
-    $.find('.vertical-bar-series-example').length,
+    $.find('g.vertical-bar-series-example').length,
     1,
     'should find the right number of custom named series'
   );
 
   $.find('.showcase-button').simulate('click');
   t.equal(
-    $.find('.rv-xy-plot__series--bar rect').length,
+    $.find('rect.rv-xy-plot__series--bar').length,
     0,
     'should now find no rects'
   );

packages/react-vis/tests/components/custom-svg-series-tests.js

@@ -43,7 +43,7 @@ test('CustomSVGSeries: Showcase Example - CustomSVGRootLevelComponent', t => {
   const $ = mount(<CustomSVGRootLevelComponent />);
   t.equal(
     $.text(),
-    '1.01.52.02.53.068101214x: 0y: 125x: 87.5y: 75x: 125y: 250x: 250y: 0x: 187.5y: 200',
+    '1.01.52.02.53.068101214x: 0y: 125x: 87.5y: 75.00000000000001x: 125y: 250x: 250y: 0x: 187.5y: 200',
     'should fine the right text content'
   );
   t.equal(