react-sparklines - npm Package Compare versions

Comparing version 0.2.0 to 0.4.0

demo/index.jsx

@@ -5,11 +5,33 @@ import React from 'react';
 class Examples extends React.Component {
+
+    randomData() {
+        return Array.apply(0, Array(30)).map(() => Math.random() * 100);
+    }
+
+    updater() {
+        this.setState({
+            data: this.state.data.concat([Math.random() * 100])
+        });
+        setTimeout(() => this.updater(), 500);
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = { data: [20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14] };
+    }
+
+    componentDidMount() {
+        setTimeout(() => this.updater(), 500);
+    }
+
     render() {
         return (
             <div>
-                <Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#1c8cdc" fill="#1c8cdc" endSpotColor="#1c8cdc" />
-                <Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} bars="true" limit={10} lineColor="#0a83d8" fill="#0a83d8" endSpotColor="#0a83d8" />
-                <Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#fa7e17" fill="#fa7e17" endSpotColor="#fa7e17" />
-                <Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#ea485c" fill="#ea485c" endSpotColor="#ea485c" />
-                <Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#56b45d" fill="#56b45d" endSpotColor="#56b45d" />
-                <Sparklines data={[20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14]} limit={10} lineColor="#8e44af" fill="#8e44af" endSpotColor="#8e44af" />
+                <Sparklines data={this.state.data} limit={10} lineColor="#1c8cdc" fill="#1c8cdc" />
+                <Sparklines data={this.state.data} bars="true" limit={10} lineColor="#0a83d8" fill="#0a83d8" endSpotColor="#0a83d8" />
+                <Sparklines data={this.state.data} limit={10} lineColor="#fa7e17" fill="#fa7e17" endSpotColor="#fa7e17" />
+                <Sparklines data={this.state.data} limit={10} lineColor="#ea485c" fill="#ea485c" endSpotColor="#ea485c" />
+                <Sparklines data={this.state.data} limit={10} lineColor="#56b45d" fill="#56b45d" endSpotColor="#56b45d" />
+                <Sparklines data={this.state.data} limit={10} lineColor="#8e44af" fill="#8e44af" endSpotColor="#8e44af" />
             </div>
@@ -16,0 +38,0 @@ );

package.json

 {
   "name": "react-sparklines",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Beautiful and expressive Sparklines React component",
@@ -5,0 +5,0 @@ "main": "index.js",

src/Sparklines.jsx

 import React from 'react';
+import SparklinesLine from './SparklinesLine';
+import SparklinesBars from './SparklinesBars';
+import SparklinesSpots from './SparklinesSpots';
 
-class SparklinesLine extends React.Component {
-    render() {
 
-        let points = this.props.points;
-        let svgPath = 'M' + points[0].x + ' ' + points[0].y +
-            points.map((p, i) => ' L ' + points[i].x + ' ' + points[i].y) +
-            ' L' + points[points.length - 1].x + ' 10000 L0 10000 L0 ' + points[0].y;
-
-        return (
-            <path d={svgPath}
-                stroke={this.props.stroke}
-                strokeWidth={this.props.strokeWidth}
-                fill={this.props.fill}
-                fillOpacity='0.1' />
-        )
-    }
-}
-SparklinesLine.propTypes = {
-    points: React.PropTypes.array
-};
-
-class SparklinesBars extends React.Component {
-    render() {
-
-        let points = this.props.points;
-
-        return (
-            <g>
-                {points.map((p, i) =>
-                    <rect
-                        x={p.x - 10} y={p.y}
-                        width="20" height={50 - p.y}
-                        stroke={this.props.stroke}
-                        strokeWidth={this.props.strokeWidth}
-                        fill={this.props.fill}
-                        fillOpacity='0.1' />
-                )}
-            </g>
-        )
-    }
-}
-SparklinesBars.propTypes = {
-    points: React.PropTypes.array
-};
-
-
 class Sparklines extends React.Component {
@@ -55,10 +13,6 @@
 
-    getX(i) {
-        return i * 20;
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextProps.data.some((d, index) => d !== this.props.data[index]);
     }
 
-    getY(i) {
-        return this.props.data[i];
-    }
-
     render() {
@@ -78,4 +32,4 @@
             return {
-                x: this.getX(i),
-                y: this.getY(i)
+                x: i * 20,
+                y: data[i]
             }
@@ -98,12 +52,6 @@ });
                             fill={this.props.fill} />
-                        <circle
-                            cx={points[0].x}
-                            cy={points[0].y}
-                            r={this.props.lineWidth * 3}
-                            fill={this.props.endSpotColor} />
-                        <circle
-                            cx={points[points.length - 1].x}
-                            cy={points[points.length - 1].y}
-                            r={this.props.lineWidth * 3}
-                            fill={this.props.endSpotColor} />
+                        <SparklinesSpots
+                            points={points}
+                            size={this.props.lineWidth * 3}
+                            color={this.props.endSpotColor} />
                     </g>
@@ -127,6 +75,5 @@ }
     lineWidth: 1,
-    fill: 'red',
-    endSpotColor: 'red'
+    fill: 'red'
 };
 
 export default Sparklines;

No alert changes

Improved metrics

Total package byte prevSize

9406

increased by17.78%

Number of package files

12

increased by33.33%

Lines of code

200

increased by33.33%

No dependency changes