react-sparklines - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

package.json

 {
   "name": "react-sparklines",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Beautiful and expressive Sparklines component for React ",
@@ -39,3 +39,3 @@ "main": "build/index.js",
     "babel-core": "^6.8.0",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "7.1.1",
     "babel-plugin-transform-object-assign": "^6.8.0",
@@ -46,14 +46,14 @@ "babel-preset-es2015": "^6.6.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": "^2.4.5",
+    "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.4",
-    "webpack-dev-server": "^2.0.0-beta"
+    "webpack": "^3.4.1",
+    "webpack-dev-server": "^2.2.0"
   },
@@ -65,4 +65,4 @@ "peerDependencies": {
   "dependencies": {
-    "react-addons-shallow-compare": "^15.0.2"
+    "prop-types": "^15.5.10"
   }
 }

src/Sparklines.js

@@ -1,2 +0,4 @@
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { PureComponent} from 'react';
+import SparklinesText from './SparklinesText';
 import SparklinesLine from './SparklinesLine';
@@ -9,19 +11,18 @@ import SparklinesCurve from './SparklinesCurve';
 import dataToPoints from './dataProcessing/dataToPoints';
-import shallowCompare from 'react-addons-shallow-compare';
 
+class Sparklines extends PureComponent {
 
-class Sparklines extends React.Component {
-
     static propTypes = {
-        data: React.PropTypes.array,
-        limit: React.PropTypes.number,
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
-        svgWidth: React.PropTypes.number,
-        svgHeight: React.PropTypes.number,
-        preserveAspectRatio: React.PropTypes.string,
-        margin: React.PropTypes.number,
-        style: React.PropTypes.object,
-        min: React.PropTypes.number,
-        max: React.PropTypes.number
+        data: PropTypes.array,
+        limit: PropTypes.number,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        svgWidth: PropTypes.number,
+        svgHeight: PropTypes.number,
+        preserveAspectRatio: PropTypes.string,
+        margin: PropTypes.number,
+        style: PropTypes.object,
+        min: PropTypes.number,
+        max: PropTypes.number,
+        onMouseMove: PropTypes.func
     };
@@ -42,8 +43,4 @@
 
-    shouldComponentUpdate(nextProps) {
-        return shallowCompare(this, nextProps);
-    }
-
     render() {
-        const { data, limit, width, height, svgWidth, svgHeight, preserveAspectRatio, margin, style, max, min } = this.props;
+        const {  data, limit, width, height, svgWidth, svgHeight, preserveAspectRatio, margin, style, max, min} = this.props;
 
@@ -59,6 +56,8 @@ if (data.length === 0) return null;
         return (
-            <svg {...svgOpts} >
-                {React.Children.map(this.props.children, child =>
-                    React.cloneElement(child, { points, width, height, margin })
-                )}
+            <svg {...svgOpts}>
+                {
+                    React.Children.map(this.props.children, function(child) {
+                        return React.cloneElement(child, { data, points, width, height, margin });
+                    })
+                }
             </svg>
@@ -69,2 +68,2 @@ );
 
-export { Sparklines, SparklinesLine, SparklinesCurve, SparklinesBars, SparklinesSpots, SparklinesReferenceLine, SparklinesNormalBand }
+export { Sparklines, SparklinesLine, SparklinesCurve, SparklinesBars, SparklinesSpots, SparklinesReferenceLine, SparklinesNormalBand, SparklinesText }

src/SparklinesBars.js

@@ -0,36 +1,44 @@
+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: React.PropTypes.arrayOf(React.PropTypes.object),
-        height: React.PropTypes.number,
-        style: React.PropTypes.object,
-        barWidth: React.PropTypes.number
-    };
+  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 } = this.props;
-        const strokeWidth = 1 * ((style && style.strokeWidth) || 0);
-        const width = barWidth || (points && points.length >= 2 ? Math.ceil(Math.max(0, points[1].x - points[0].x - strokeWidth)) : 0);
-
-        return (
-            <g>
-                {points.map((p, i) =>
-                    <rect
-                        key={i}
-                        x={Math.ceil(p.x - strokeWidth * i)}
-                        y={Math.ceil(p.y)}
-                        width={Math.ceil(width)}
-                        height={Math.ceil(Math.max(0, height - p.y))}
-                        style={style} />
-                )}
-            </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/SparklinesCurve.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -6,4 +7,4 @@
     static propTypes = {
-        color: React.PropTypes.string,
-        style: React.PropTypes.object
+        color: PropTypes.string,
+        style: PropTypes.object
     };
@@ -10,0 +11,0 @@

src/SparklinesLine.js

@@ -0,48 +1,68 @@
+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: React.PropTypes.string,
-        style: React.PropTypes.object
-    };
+  static defaultProps = {
+    style: {},
+    onMouseMove: () => {},
+  };
 
-    static defaultProps = {
-        style: {}
-    };
+  render() {
+    const { data, points, width, height, margin, color, style, onMouseMove } = this.props;
 
-    render() {
-        const { points, width, height, margin, color, style } = 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 fillPoints = linePoints.concat(closePolyPoints);
+    const closePolyPoints = [
+      points[points.length - 1].x,
+      height - margin,
+      margin,
+      height - margin,
+      margin,
+      points[0].y,
+    ];
 
-        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'
-        };
+    const fillPoints = linePoints.concat(closePolyPoints);
 
-        return (
-            <g>
-                <polyline points={fillPoints.join(' ')} style={fillStyle} />
-                <polyline points={linePoints.join(' ')} style={lineStyle} />
-            </g>
-        )
-    }
+    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
+          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>
+    );
+  }
 }

src/SparklinesNormalBand.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,3 +9,3 @@ import mean from './dataProcessing/mean';
     static propTypes = {
-        style: React.PropTypes.object
+        style: PropTypes.object
     };
@@ -11,0 +12,0 @@

src/SparklinesReferenceLine.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -7,5 +8,5 @@ import * as dataProcessing from './dataProcessing';
     static propTypes = {
-        type: React.PropTypes.oneOf(['max', 'min', 'mean', 'avg', 'median', 'custom']),
-        value: React.PropTypes.number,
-        style: React.PropTypes.object
+        type: PropTypes.oneOf(['max', 'min', 'mean', 'avg', 'median', 'custom']),
+        value: PropTypes.number,
+        style: PropTypes.object
     };
@@ -12,0 +13,0 @@

src/SparklinesSpots.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -6,5 +7,5 @@
     static propTypes = {
-        size: React.PropTypes.number,
-        style: React.PropTypes.object,
-        spotColors: React.PropTypes.object
+        size: PropTypes.number,
+        style: PropTypes.object,
+        spotColors: PropTypes.object
     };
@@ -11,0 +12,0 @@

webpack.config.js

@@ -29,8 +29,5 @@ var path = require('path');
             exclude: /(node_modules)/,
-            loader: 'babel'
+            loader: 'babel-loader'
         }]
     },
-    resolve: {
-        extensions: ['', '.js', '.jsx']
-    }
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

370122

increased by106.72%

Number of package files

36

increased by5.88%

Lines of code

3015

increased by53.12%

Worsened metrics

Number of low supply chain risk alerts

13

increased by333.33%

Dependency changes

• + Addedprop-types@^15.5.10

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• - Removedreact-addons-shallow-compare@^15.0.2

• - Removedreact-addons-shallow-compare@15.6.3(transitive)