Updgrade dependencies. Fix bugs

Author: borisyankov

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sparklines",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Beautiful and expressive Sparklines component for React ",
   "main": "build/index.js",
   "directories": {
@@ -36,23 +36,23 @@
   "devDependencies": {
     "babel": "^6.5.2",
     "babel-core": "^6.8.0",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "7.1.1",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",
     "babel-runtime": "^6.6.1",
-    "chai": "^3.5.0",
+    "chai": "^4.1.0",
     "enzyme": "^2.2.0",
     "hiff": "^0.3.0",
     "line-by-line": "^0.1.4",
     "mocha": "^3.2.0",
     "react": "^15.0.2",
     "react-addons-test-utils": "^15.0.2",
     "react-dom": "^15.0.2",
-    "react-element-to-jsx-string": "=2.6.1",
+    "react-element-to-jsx-string": "11.0.1",
     "replaceall": "^0.1.6",
-    "webpack": "^2.1.0-beta.22",
+    "webpack": "^3.4.1",
     "webpack-dev-server": "^2.2.0"
   },
   "peerDependencies": {

src/SparklinesBars.js

@@ -2,40 +2,43 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 export default class SparklinesBars extends React.Component {
+  static propTypes = {
+    points: PropTypes.arrayOf(PropTypes.object),
+    height: PropTypes.number,
+    style: PropTypes.object,
+    barWidth: PropTypes.number,
+    margin: PropTypes.number,
+    onMouseMove: PropTypes.func,
+  };
 
-    static propTypes = {
-        points: PropTypes.arrayOf(PropTypes.object),
-        height: PropTypes.number,
-        style: PropTypes.object,
-        barWidth: PropTypes.number,
-        margin: PropTypes.number,
-        onMouseMove: PropTypes.func
-    };
+  static defaultProps = {
+    style: { fill: 'slategray' },
+  };
 
-    static defaultProps = {
-        style: { fill: 'slategray' }
-    };
+  render() {
+    const { points, height, style, barWidth, margin, onMouseMove } = this.props;
+    const strokeWidth = 1 * ((style && style.strokeWidth) || 0);
+    const marginWidth = margin ? 2 * margin : 0;
+    const width =
+      barWidth ||
+      (points && points.length >= 2
+        ? Math.max(0, points[1].x - points[0].x - strokeWidth - marginWidth)
+        : 0);
 
-    render() {
-
-        const { points, height, style, barWidth, margin, onMouseMove } = this.props;
-        const strokeWidth = 1 * ((style && style.strokeWidth) || 0);
-        const marginWidth = margin ? 2*margin : 0;
-        const width = barWidth || (points && points.length >= 2 ? Math.max(0, points[1].x - points[0].x - strokeWidth - marginWidth) : 0);
-
-        return (
-            <g transform = "scale(1,-1)">
-                {points.map((p, i) =>
-                    <rect
-                        key={i}
-                        x={p.x - (width + strokeWidth)/2}
-                        y={-height}
-                        width={width}
-                        height={Math.max(0, height-p.y)}
-                        style={style}
-                        onMouseMove={onMouseMove.bind(this, p)}/>
-                )}
-            </g>
-        )
-    }
+    return (
+      <g transform="scale(1,-1)">
+        {points.map((p, i) =>
+          <rect
+            key={i}
+            x={p.x - (width + strokeWidth) / 2}
+            y={-height}
+            width={width}
+            height={Math.max(0, height - p.y)}
+            style={style}
+            onMouseMove={onMouseMove && onMouseMove.bind(this, p)}
+          />,
+        )}
+      </g>
+    );
+  }
 }

src/SparklinesLine.js

@@ -2,63 +2,67 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 export default class SparklinesLine extends React.Component {
+  static propTypes = {
+    color: PropTypes.string,
+    style: PropTypes.object,
+  };
 
-    static propTypes = {
-        color: PropTypes.string,
-        style: PropTypes.object
-    };
-
-    static defaultProps = {
-        style: {}
-    };
+  static defaultProps = {
+    style: {},
+    onMouseMove: () => {},
+  };
 
-    render() {
-        const { data, points, width, height, margin, color, style, onMouseMove } = this.props;
+  render() {
+    const { data, points, width, height, margin, color, style, onMouseMove } = this.props;
 
-        const linePoints = points
-            .map((p) => [p.x, p.y])
-            .reduce((a, b) => a.concat(b));
+    const linePoints = points.map(p => [p.x, p.y]).reduce((a, b) => a.concat(b));
 
-        const closePolyPoints = [
-            points[points.length - 1].x, height - margin,
-            margin, height - margin,
-            margin, points[0].y
-        ];
+    const closePolyPoints = [
+      points[points.length - 1].x,
+      height - margin,
+      margin,
+      height - margin,
+      margin,
+      points[0].y,
+    ];
 
-        const fillPoints = linePoints.concat(closePolyPoints);
+    const fillPoints = linePoints.concat(closePolyPoints);
 
-        const lineStyle = {
-            stroke: color || style.stroke || 'slategray',
-            strokeWidth: style.strokeWidth || '1',
-            strokeLinejoin: style.strokeLinejoin || 'round',
-            strokeLinecap: style.strokeLinecap || 'round',
-            fill: 'none'
-        };
-        const fillStyle = {
-            stroke: style.stroke || 'none',
-            strokeWidth: '0',
-            fillOpacity: style.fillOpacity || '.1',
-            fill: style.fill || color || 'slategray',
-            pointerEvents: 'auto'
-        };
+    const lineStyle = {
+      stroke: color || style.stroke || 'slategray',
+      strokeWidth: style.strokeWidth || '1',
+      strokeLinejoin: style.strokeLinejoin || 'round',
+      strokeLinecap: style.strokeLinecap || 'round',
+      fill: 'none',
+    };
+    const fillStyle = {
+      stroke: style.stroke || 'none',
+      strokeWidth: '0',
+      fillOpacity: style.fillOpacity || '.1',
+      fill: style.fill || color || 'slategray',
+      pointerEvents: 'auto',
+    };
 
-        const tooltips = points.map((p, i) => {
-          return (<circle
-            cx={p.x}
-            cy={p.y}
-            r={2}
-            style={fillStyle}
-            onMouseEnter={(e) => onMouseMove('enter', data[i], p)}
-            onClick={(e) => onMouseMove('click', data[i], p)}
-          />)
-        });
+    const tooltips = points.map((p, i) => {
+      return (
+        <circle
+          key={i}
+          cx={p.x}
+          cy={p.y}
+          r={2}
+          style={fillStyle}
+          onMouseEnter={e => onMouseMove('enter', data[i], p)}
+          onClick={e => onMouseMove('click', data[i], p)}
+        />
+      );
+    });
 
-        return (
-            <g>
-                {tooltips}
-                <polyline points={fillPoints.join(' ')} style={fillStyle}/>
-                <polyline points={linePoints.join(' ')} style={lineStyle}/>
-            </g>
-        )
-    }
+    return (
+      <g>
+        {tooltips}
+        <polyline points={fillPoints.join(' ')} style={fillStyle} />
+        <polyline points={linePoints.join(' ')} style={lineStyle} />
+      </g>
+    );
+  }
 }