react-sparklines - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

demo/demo.js

@@ -6,9 +6,30 @@ import React from 'react';
 
-    randomData() {
-        return Array.apply(0, Array(30)).map(() => Math.random() * 100);
+    boxMullerRandom () {
+        let phase = false,
+            x1, x2, w, z;
+
+        return (function() {
+
+            if (phase = !phase) {
+                do {
+                    x1 = 2.0 * Math.random() - 1.0;
+                    x2 = 2.0 * Math.random() - 1.0;
+                    w = x1 * x1 + x2 * x2;
+                } while (w >= 1.0);
+
+                w = Math.sqrt((-2.0 * Math.log(w)) / w);
+                return x1 * w;
+            } else {
+                return x2 * w;
+            }
+        })();
     }
 
+    randomData(n = 30) {
+        return Array.apply(0, Array(n)).map(this.boxMullerRandom);
+    }
+
     updater() {
         this.setState({
-            data: this.state.data.concat([Math.random() * 100])
+            data: this.state.data.concat([this.boxMullerRandom()])
         });
@@ -22,2 +43,5 @@ setTimeout(() => this.updater(), 100);
         this.state = { data: [0] };
+
+        this.sampleData = this.randomData(30);
+        this.sampleData100 = this.randomData(100);
     }
@@ -31,43 +55,55 @@
 
-        let sampleData = [23.88, 23.68, 24.35, 24.4, 24.39, 24.67, 24.52, 24.75, 24.41, 24.34, 24.18, 24.07, 24.33, 24.21, 24.33, 24.6];
-
         return (
             <div>
                 <h2>Static</h2>
-
-                <Sparklines data={[1, 5, 3]}>
-                    <SparklinesLine />
-                    <SparklinesSpots />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine style={{ fill: "none" }} />
                 </Sparklines>
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine style={{ strokeWidth: 3, stroke: "#2e7ff1", fill: "none" }} />
+                </Sparklines>
 
                 <h2>Customizable</h2>
-                <Sparklines data={sampleData} margin={2}>
-                    <SparklinesLine color="#1c8cdc" fill="#1c8cdc" />
-                    <SparklinesSpots color="#1c8cdc" endSpotColor="#1c8cdc" />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine color="#1c8cdc" />
                 </Sparklines>
-                <Sparklines data={sampleData} margin={2}>
-                    <SparklinesLine color="#fa7e17" fill="#fa7e17" />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine color="#fa7e17" />
                 </Sparklines>
                 <br />
-                <Sparklines data={sampleData}>
-                    <SparklinesLine color="#ea485c" fill="#ea485c" />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine color="#ea485c" />
                 </Sparklines>
-                <Sparklines data={sampleData}>
-                    <SparklinesLine color="#56b45d" fill="#56b45d" />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine color="#56b45d" />
                 </Sparklines>
                 <br />
-                <Sparklines data={sampleData}>
-                    <SparklinesLine color="#8e44af" fill="#8e44af"/>
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine color="#8e44af"/>
                 </Sparklines>
-                <Sparklines data={sampleData}>
-                    <SparklinesLine color="#253e56" fill="#253e56" />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine color="#253e56" />
                 </Sparklines>
 
+                <h2>Spots</h2>
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine style={{ fill: "none" }} />
+                    <SparklinesSpots />
+                </Sparklines>
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine color="#56b45d" />
+                    <SparklinesSpots style={{ fill: "#56b45d" }} />
+                </Sparklines>
+                <Sparklines data={this.sampleData} margin={6}>
+                    <SparklinesLine style={{ strokeWidth: 3, stroke: "#2e7ff1", fill: "none" }} />
+                    <SparklinesSpots size={4} style={{ stroke: "#2e7ff1", strokeWidth: 3, fill: "white" }} />
+                </Sparklines>
+
                 <h2>Bars</h2>
-                <Sparklines data={sampleData}>
-                    <SparklinesBars color="transparent" fill="#41c3f9" />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesBars style={{ fill: "#41c3f9" }} />
                 </Sparklines>
-                <Sparklines data={sampleData}>
-                    <SparklinesLine fill="#41c3f9" />
-                    <SparklinesBars color="transparent" fill="#41c3f9" />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesBars style={{ stroke: "white", fill: "#41c3f9", fillOpacity: ".25" }} />
+                    <SparklinesLine style={{ stroke: "#41c3f9", fill: "none" }} />
                 </Sparklines>
@@ -77,40 +113,39 @@
                 <Sparklines data={this.state.data}  limit={20}>
-                    <SparklinesLine color="#1c8cdc" fill="#1c8cdc" />
+                    <SparklinesLine color="#1c8cdc" />
                     <SparklinesSpots />
                 </Sparklines>
                 <Sparklines data={this.state.data}  limit={20}>
-                    <SparklinesBars color="transparent" fill="#56b45d" />
-                    <SparklinesLine color="#1c8cdc" />
-                    <SparklinesSpots />
+                    <SparklinesBars style={{ fill: "#41c3f9", fillOpacity: ".25" }} />
+                    <SparklinesLine style={{ stroke: "#41c3f9", fill: "none" }} />
                 </Sparklines>
                 <Sparklines data={this.state.data} limit={20}>
-                    <SparklinesLine color="#8e44af" fill="#8e44af" fillOpacity="1"/>
+                    <SparklinesLine style={{ stroke: "none", fill: "#8e44af", fillOpacity: "1" }}/>
                 </Sparklines>
                 <Sparklines data={this.state.data} limit={10} >
-                    <SparklinesBars color="#0a83d8" fill="#0a83d8" />
+                    <SparklinesBars color="#0a83d8" />
                 </Sparklines>
 
                 <h2>Reference Line</h2>
-                <Sparklines data={sampleData}>
+                <Sparklines data={this.sampleData}>
                     <SparklinesLine />
                     <SparklinesReferenceLine type="max" />
                 </Sparklines>
-                <Sparklines data={sampleData}>
+                <Sparklines data={this.sampleData}>
                     <SparklinesLine />
                     <SparklinesReferenceLine type="min" />
                 </Sparklines>
-                <Sparklines data={sampleData}>
+                <Sparklines data={this.sampleData}>
                     <SparklinesLine />
                     <SparklinesReferenceLine type="mean" />
                 </Sparklines>
-                <Sparklines data={sampleData}>
+                <Sparklines data={this.sampleData}>
                     <SparklinesLine />
                     <SparklinesReferenceLine type="avg" />
                 </Sparklines>
-                <Sparklines data={sampleData}>
+                <Sparklines data={this.sampleData}>
                     <SparklinesLine />
                     <SparklinesReferenceLine type="median" />
                 </Sparklines>
-                <Sparklines data={sampleData}>
-                    <SparklinesBars />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesBars style={{ fill: 'slategray', fillOpacity: ".5" }} />
                     <SparklinesReferenceLine />
@@ -120,11 +155,45 @@ </Sparklines>
                 <h2>Normal Band</h2>
-                <Sparklines data={sampleData}>
-                    <SparklinesLine />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine style={{ fill: "none" }}/>
                     <SparklinesNormalBand />
                 </Sparklines>
-                <Sparklines data={sampleData}>
-                    <SparklinesLine />
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine style={{ fill: "none" }}/>
                     <SparklinesNormalBand />
                     <SparklinesReferenceLine type="mean" />
                 </Sparklines>
+
+                <h2>Real world examples</h2>
+                <Sparklines data={this.sampleData100} width={200}>
+                    <SparklinesLine style={{ stroke: "#2991c8", fill: "none"}} />
+                    <SparklinesSpots />
+                    <SparklinesNormalBand style={{ fill: "#2991c8", fillOpacity: .1 }} />
+                </Sparklines>
+                <br/>
+                <Sparklines data={this.sampleData100}>
+                    <SparklinesLine style={{ stroke: "black", fill: "none" }} />
+                    <SparklinesSpots style={{ fill: "orange" }} />
+                </Sparklines>
+                <br/>
+                <Sparklines data={this.sampleData}>
+                    <SparklinesBars style={{ stroke: "white", strokeWidth: "1", fill: "#40c0f5" }} />
+                </Sparklines>
+                <br/>
+                <Sparklines data={this.sampleData} height={80}>
+                    <SparklinesLine style={{ stroke: "#8ed53f", strokeWidth: "1", fill: "none" }} />
+                </Sparklines>
+                <Sparklines data={this.sampleData} height={80}>
+                    <SparklinesLine style={{ stroke: "#d1192e", strokeWidth: "1", fill: "none" }} />
+                </Sparklines>
+                <br/>
+                <Sparklines data={this.sampleData}>
+                    <SparklinesLine style={{ stroke: "#559500", fill: "#8fc638", fillOpacity: "1" }} />
+                </Sparklines>
+                <Sparklines data={this.sampleData} style={{background: "#272727"}} margin={10} >
+                    <SparklinesLine style={{ stroke: "none", fill: "#d2673a", fillOpacity: ".5" }} />
+                </Sparklines>
+                <Sparklines data={this.sampleData} style={{background: "#00bdcc"}} margin={10} >
+                    <SparklinesLine style={{ stroke: "white", fill: "none" }} />
+                    <SparklinesReferenceLine style={{ stroke: 'white', strokeOpacity: .75, strokeDasharray: '2, 2' }} />
+                </Sparklines>
             </div>
@@ -131,0 +200,0 @@ );

package.json

 {
   "name": "react-sparklines",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Beautiful and expressive Sparklines React component",
@@ -10,3 +10,4 @@ "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "webpack-dev-server --progress --content-base demo/",
+    "test": "jest"
   },
@@ -18,3 +19,3 @@ "repository": {
   "author": "Boris Yankov <[e-mail]> (https://github.com/borisyankov)",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
@@ -27,3 +28,5 @@ "url": "https://github.com/borisyankov/react-sparklines/issues"
     "babel-loader": "^5.2.2",
+    "jest-cli": "^0.4.15",
     "jsx-loader": "^0.13.2",
+    "babel-jest": "*",
     "node-libs-browser": "^0.5.2",
@@ -34,4 +37,11 @@ "webpack": "^1.10.0",
   "dependencies": {
-    "react": "^0.13.3"
+    "react": "^0.13.3",
+    "react-tools": "*"
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "testFileExtensions": ["es6", "js"],
+    "moduleFileExtensions": ["js", "json", "es6"],
+    "unmockedModulePathPatterns": ["react"]
   }
 }

README.md

@@ -22,4 +22,4 @@ # react-sparklines
 npm install webpack-dev-server -g
-webpack-dev-server --progress
-http://localhost:8080/index
+npm start
+http://localhost:8080/
 ```

src/Sparklines.js

@@ -22,3 +22,3 @@ import React from 'react';
 
-        let { data, limit, width, height, margin  } = this.props;
+        let { data, limit, width, height, margin, style  } = this.props;
 
@@ -28,3 +28,3 @@ let points = DataProcessor.dataToPoints(data, limit, width, height, margin);
         return (
-            <svg width={width} height={height} preserveAspectRatio="xMinYMin meet">
+            <svg width={width} height={height} style={style}>
                 {
@@ -44,3 +44,4 @@ React.Children.map(this.props.children, function(child) {
     height: React.PropTypes.number,
-    margin: React.PropTypes.number
+    margin: React.PropTypes.number,
+    style: React.PropTypes.object
 };
@@ -51,5 +52,5 @@ Sparklines.defaultProps = {
     height: 30,
-    margin: 0
+    margin: 2
 };
 
 export { Sparklines, SparklinesLine, SparklinesBars, SparklinesSpots, SparklinesReferenceLine, SparklinesNormalBand }

src/SparklinesBars.js

@@ -7,3 +7,4 @@ import React from 'react';
 
-        let { points, width, height, color, fill, strokeWidth } = this.props;
+        let { points, width, height, margin, style } = this.props;
+        let barWidth = points.length >= 2 ? points[1].x - points[0].x : 0;
 
@@ -15,8 +16,5 @@ return (
                         key={i}
-                        x={p.x - 10} y={p.y}
-                        width="10" height={100 - p.y}
-                        stroke={color}
-                        strokeWidth={strokeWidth}
-                        fill={fill}
-                        fillOpacity='0.1' />
+                        x={p.x} y={p.y}
+                        width={barWidth} height={height - p.y}
+                        style={style} />
                 )}
@@ -28,13 +26,8 @@ </g>
 SparklinesBars.propTypes = {
-    points: React.PropTypes.array.required,
-    width: React.PropTypes.number,
-    height: React.PropTypes.number,
-    color: React.PropTypes.string,
-    fill: React.PropTypes.string,
-    strokeWidth: React.PropTypes.string
+    style: React.PropTypes.object
 };
 SparklinesBars.defaultProps = {
-    points: []
+    style: { fill: 'slategray' }
 };
 
 export default SparklinesBars;

src/SparklinesLine.js

@@ -6,22 +6,32 @@ import React from 'react';
     render() {
+        let { points, width, height, margin, color, style } = this.props;
 
-        let { points, width, height, margin, fill, fillOpacity } = this.props;
-
         let linePoints = points
             .map((p) => [p.x, p.y])
             .reduce((a, b) => a.concat(b));
-        let fillPoints = linePoints.concat([points[points.length - 1].x, height, margin, height, margin, points[0].y]);
+        let closePolyPoints = [
+            points[points.length - 1].x, height - margin,
+            margin, height - margin,
+            margin, points[0].y
+        ];
+        let fillPoints = linePoints.concat(closePolyPoints);
 
+        let lineStyle = {
+            stroke: color || style.stroke || 'slategray',
+            strokeWidth: style.strokeWidth || '1',
+            strokeLinejoin: style.strokeLinejoin || 'round',
+            strokeLinecap: style.strokeLinecap || 'round',
+            fill: 'none'
+        };
+        let fillStyle = {
+            stroke: style.stroke || 'none',
+            strokeWidth: '0',
+            fillOpacity: style.fillOpacity || '.1',
+            fill: color || style.fill || 'slategray'
+        };
+
         return (
             <g>
-                <polyline points={fillPoints.join(' ')}
-                    stroke='none'
-                    fill={fill}
-                    fillOpacity={fillOpacity} />
-                <polyline points={linePoints.join(' ')}
-                    stroke={this.props.color}
-                    strokeWidth='1'
-                    strokeLinejoin='round'
-                    style={{strokeLinejoin: 'round'}}
-                    fill='none' />
+                <polyline points={fillPoints.join(' ')} style={fillStyle} />
+                <polyline points={linePoints.join(' ')} style={lineStyle} />
             </g>
@@ -32,18 +42,9 @@ )
 SparklinesLine.propTypes = {
-    width: React.PropTypes.number,
-    height: React.PropTypes.number,
-    data: React.PropTypes.array,
-    style: React.PropTypes.object,
     color: React.PropTypes.string,
-    fill: React.PropTypes.string,
-    fillOpacity: React.PropTypes.string
+    style: React.PropTypes.object
 };
 SparklinesLine.defaultProps = {
-    points: [],
-    style: { stroke: 'grey' },
-    color: 'slategray',
-    fill: 'transparent',
-    fillOpacity: '0.1'
-};
+    style: {}
+}
 
 export default SparklinesLine;

src/SparklinesNormalBand.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-        let { points, type, style } = this.props;
+        let { points, margin, type, style } = this.props;
 
@@ -14,5 +14,5 @@ let ypoints = points.map(p => p.y);
         let stdev = DataProcessor.calculateFromData(ypoints, 'stdev');
-        
+
         return (
-            <rect x={points[0].x} y={mean - stdev}
+            <rect x={points[0].x} y={mean - stdev + margin}
                 width={points[points.length - 1].x - points[0].x} height={stdev * 2}
@@ -24,3 +24,2 @@ style={style} />
 SparklinesNormalBand.propTypes = {
-    points: React.PropTypes.array,
     type: React.PropTypes.string,
@@ -27,0 +26,0 @@ style: React.PropTypes.object

src/SparklinesReferenceLine.js

@@ -8,11 +8,11 @@ import React from 'react';
 
-        let { points, type, style } = this.props;
+        let { points, margin, type, style } = this.props;
 
         let ypoints = points.map(p => p.y);
         let y = DataProcessor.calculateFromData(ypoints, type);
-        
+
         return (
             <line
-                x1={points[0].x} y1={y}
-                x2={points[points.length - 1].x} y2={y}
+                x1={points[0].x} y1={y + margin}
+                x2={points[points.length - 1].x} y2={y + margin}
                 style={style} />
@@ -23,3 +23,2 @@ )
 SparklinesReferenceLine.propTypes = {
-    points: React.PropTypes.array,
     type: React.PropTypes.string,
@@ -29,3 +28,2 @@ style: React.PropTypes.object
 SparklinesReferenceLine.defaultProps = {
-    points: [],
     type: 'mean',
@@ -32,0 +30,0 @@ style: { stroke: 'red', strokeOpacity: .75, strokeDasharray: '2, 2' }

src/SparklinesSpots.js

@@ -7,6 +7,5 @@ import React from 'react';
 
-        if (points.length < 2) {
-            return 0;
-        }
-        return Math.sign(points[points.length - 2].y - points[points.length - 1].y);
+        return points.length < 2
+            ? 0
+            : Math.sign(points[points.length - 2].y - points[points.length - 1].y);
     }
@@ -16,18 +15,10 @@
 
-        let { points, width, height, size, color } = this.props;
+        let { points, width, height, size, style, spotColors } = this.props;
 
-        let lastSpotColors = {
-            '-1': 'red',
-            '0': this.props.color,
-            '1': 'green'
-        }
+        let startSpot = <circle
+                            cx={points[0].x}
+                            cy={points[0].y}
+                            r={size}
+                            style={style} />
 
-        let startSpot = !this.props.color
-            ? {}
-            : <circle
-                cx={points[0].x}
-                cy={points[0].y}
-                r={this.props.size}
-                fill={this.props.color} />
-
         let endSpot = <circle
@@ -37,7 +28,7 @@ cx={points[points.length - 1].x}
                             r={size}
-                            fill={color || lastSpotColors[this.lastDirection(points)] } />
+                            style={style || { fill: spotColors[this.lastDirection(points)] }} />
 
         return (
             <g>
-                {startSpot}
+                {style ? startSpot : {}}
                 {endSpot}
@@ -49,13 +40,15 @@ </g>
 SparklinesSpots.propTypes = {
-    points: React.PropTypes.array,
-    width: React.PropTypes.number,
-    height: React.PropTypes.number,
     size: React.PropTypes.number,
-    fill: React.PropTypes.string
+    style: React.PropTypes.object,
+    spotColors: React.PropTypes.object
 };
 SparklinesSpots.defaultProps = {
-    points: [],
-    size: 2
+    size: 2,
+    spotColors: {
+        '-1': 'red',
+        '0': 'black',
+        '1': 'green'
+    }
 };
 
 export default SparklinesSpots;

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

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance 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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21151

increased by22.69%

Number of package files

16

increased by6.67%

Number of low license alerts

0

decreased by-100%

Lines of code

455

increased by14.61%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

8

increased by33.33%

Number of medium quality alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-tools@*

• + Addedbase62@0.1.1(transitive)

• + Addedesprima-fb@13001.1001.0-dev-harmony-fb(transitive)

• + Addedjstransform@10.1.0(transitive)

• + Addedreact-tools@0.13.3(transitive)

• + Addedsource-map@0.1.31(transitive)