react-sparklines - npm Package Compare versions

Comparing version 0.5.2 to 0.7.1

demo/demo.js

 import React from 'react';
-import Sparklines from '../src/Sparklines';
+import { Sparklines, SparklinesBars, SparklinesLine, SparklinesNormalBand, SparklinesReferenceLine, SparklinesSpots } from '../src/Sparklines';
 
@@ -14,3 +14,3 @@ class Examples extends React.Component {
         });
-        setTimeout(() => this.updater(), 300);
+        setTimeout(() => this.updater(), 100);
     }
@@ -21,18 +21,107 @@
 
-        this.state = { data: [20, 30, 15, 40, 18, 35, 22, 28, 33, 55, 14] };
+        this.state = { data: [0] };
     }
 
     componentDidMount() {
-        setTimeout(() => this.updater(), 300);
+        setTimeout(() => this.updater(), 100);
     }
 
     render() {
+
+        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>
-                <Sparklines data={[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]} limit={15} color="#1c8cdc" />
-                <Sparklines data={this.state.data} bars={true} limit={10} color="#0a83d8" fill="#0a83d8" endSpotColor="#0a83d8" />
-                <Sparklines data={this.state.data} limit={10} color="#fa7e17" fill="#fa7e17" endSpotColor="#fa7e17" />
-                <Sparklines data={this.state.data} limit={10} color="#ea485c" fill="#ea485c" endSpotColor="#ea485c" />
-                <Sparklines data={this.state.data} limit={10} color="#56b45d" fill="#56b45d" endSpotColor="#56b45d" />
-                <Sparklines data={this.state.data} limit={10} color="#8e44af" fill="#8e44af" endSpotColor="#8e44af" />
+                <h2>Static</h2>
+
+                <Sparklines data={[1, 5, 3]}>
+                    <SparklinesLine />
+                    <SparklinesSpots />
+                </Sparklines>
+
+                <h2>Customizable</h2>
+                <Sparklines data={sampleData} margin={2}>
+                    <SparklinesLine color="#1c8cdc" fill="#1c8cdc" />
+                    <SparklinesSpots color="#1c8cdc" endSpotColor="#1c8cdc" />
+                </Sparklines>
+                <Sparklines data={sampleData} margin={2}>
+                    <SparklinesLine color="#fa7e17" fill="#fa7e17" />
+                </Sparklines>
+                <br />
+                <Sparklines data={sampleData}>
+                    <SparklinesLine color="#ea485c" fill="#ea485c" />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine color="#56b45d" fill="#56b45d" />
+                </Sparklines>
+                <br />
+                <Sparklines data={sampleData}>
+                    <SparklinesLine color="#8e44af" fill="#8e44af"/>
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine color="#253e56" fill="#253e56" />
+                </Sparklines>
+
+                <h2>Bars</h2>
+                <Sparklines data={sampleData}>
+                    <SparklinesBars color="transparent" fill="#41c3f9" />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine fill="#41c3f9" />
+                    <SparklinesBars color="transparent" fill="#41c3f9" />
+                </Sparklines>
+
+                <h2>Dynamic</h2>
+                <Sparklines data={this.state.data}  limit={20}>
+                    <SparklinesLine color="#1c8cdc" fill="#1c8cdc" />
+                    <SparklinesSpots />
+                </Sparklines>
+                <Sparklines data={this.state.data}  limit={20}>
+                    <SparklinesBars color="transparent" fill="#56b45d" />
+                    <SparklinesLine color="#1c8cdc" />
+                    <SparklinesSpots />
+                </Sparklines>
+                <Sparklines data={this.state.data} limit={20}>
+                    <SparklinesLine color="#8e44af" fill="#8e44af" fillOpacity="1"/>
+                </Sparklines>
+                <Sparklines data={this.state.data} limit={10} >
+                    <SparklinesBars color="#0a83d8" fill="#0a83d8" />
+                </Sparklines>
+
+                <h2>Reference Line</h2>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine />
+                    <SparklinesReferenceLine type="max" />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine />
+                    <SparklinesReferenceLine type="min" />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine />
+                    <SparklinesReferenceLine type="mean" />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine />
+                    <SparklinesReferenceLine type="avg" />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine />
+                    <SparklinesReferenceLine type="median" />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesBars />
+                    <SparklinesReferenceLine />
+                </Sparklines>
+
+                <h2>Normal Band</h2>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine />
+                    <SparklinesNormalBand />
+                </Sparklines>
+                <Sparklines data={sampleData}>
+                    <SparklinesLine />
+                    <SparklinesNormalBand />
+                    <SparklinesReferenceLine type="mean" />
+                </Sparklines>
             </div>
@@ -39,0 +128,0 @@ );

package.json

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

src/DataProcessor.js

 export default class DataProcessor {
 
-    static dataToPoints(data, width, height) {
+    static dataToPoints(data, limit, width, height, margin) {
 
-        let max = Math.max.apply(Math, data);
-        let min = Math.min.apply(Math, data);
+        if (limit && limit < data.length) {
+            data = data.slice(data.length - limit);
+        }
 
-        let vfactor = height / (max - min);
+        let max = this.max(data);
+        let min = this.min(data);
 
-        console.log(max, min, vfactor);
+        let vfactor = (height - margin * 2) / (max - min);
+        let hfactor = (width - margin * 2) / ((limit || data.length) - 1);
 
         return data.map((d, i) => {
             return {
-                x: i * 20,
-                y: (max - data[i]) * vfactor
+                x: i * hfactor + margin,
+                y: (max - data[i]) * vfactor + margin
             }
         });
     }
+
+    static max(data) {
+        return Math.max.apply(Math, data);
+    }
+
+    static min(data) {
+        return Math.min.apply(Math, data);
+    }
+
+    static mean(data) {
+        return (this.max(data) - this.min(data)) / 2;
+    }
+
+    static avg(data) {
+        return data.reduce((a, b) => a + b) / (data.length + 1);
+    }
+
+    static median(data) {
+        return data.sort()[Math.floor(data.length / 2)];
+    }
+
+    static variance(data) {
+        let mean = this.mean(data);
+        let sq = data.map(n => Math.pow(n - mean, 2));
+        return this.mean(sq);
+    }
+
+    static stdev(data) {
+        let avg = this.avg(data);
+        let mean = this.mean(data);
+        let sqDiff = data.map(n => Math.pow(n - mean, 2));
+        let avgSqDiff = this.avg(sqDiff);
+        return Math.sqrt(avgSqDiff);
+    }
+
+    static calculateFromData(data, calculationType) {
+        return this[calculationType].call(this, data);
+    }
 }

src/Sparklines.js

@@ -6,2 +6,4 @@ import React from 'react';
 import SparklinesReferenceLine from './SparklinesReferenceLine';
+import SparklinesNormalBand from './SparklinesNormalBand';
+
 import DataProcessor from './DataProcessor';
@@ -16,3 +18,3 @@
     shouldComponentUpdate(nextProps, nextState) {
-        return nextProps.data.some((d, index) => d !== this.props.data[index]);
+        return nextProps.data.some((d, i) => d !== this.props.data[i]);
     }
@@ -22,48 +24,13 @@
 
-        let { width, height, data, limit } = this.props;
+        let { data, limit, width, height, margin  } = this.props;
 
-        if (!data || data.length === 0) {
-            return;
-        }
+        let points = DataProcessor.dataToPoints(data, limit, width, height, margin);
 
-        if (limit && limit < data.length) {
-            data = data.slice(data.length - limit);
-        }
-
-        let points = DataProcessor.dataToPoints(data, width, height);
-
-        let sparklinesBars = !this.props.bars ? {} :
-            <SparklinesBars
-                points={points}
-                color={this.props.color}
-                strokeWidth={this.props.lineWidth}
-                fill={this.props.fill} />
-
-        let sparklinesLine = points.length < 2 ? {} :
-            <SparklinesLine
-                points={points}
-                color={this.props.color}
-                strokeWidth={this.props.lineWidth}
-                fill={this.props.fill} />
-
-        let sparklinesGroup = this.props.bars ? {} :
-            <g>
-                {sparklinesLine}
-                <SparklinesSpots
-                    points={points}
-                    size={this.props.lineWidth * 3}
-                    color={this.props.endSpotColor} />
-            </g>
-
-        let sparklinesReferenceLine = this.props.referenceLine ? {} :
-            <SparklinesSpots
-                points={points}
-                size={this.props.lineWidth * 3}
-                color={this.props.endSpotColor} />
-
         return (
             <svg width={width} height={height} preserveAspectRatio="xMinYMin meet">
-                {sparklinesBars}
-                {sparklinesGroup}
-                {sparklinesReferenceLine}
+                {
+                    React.Children.map(this.props.children, function(child) {
+                        return React.cloneElement(child, { points, width, height, margin });
+                    })
+                }
             </svg>
@@ -74,21 +41,15 @@ );
 Sparklines.propTypes = {
+    data: React.PropTypes.array,
+    limit: React.PropTypes.number,
     width: React.PropTypes.number,
     height: React.PropTypes.number,
-    data: React.PropTypes.array,
-    limit: React.PropTypes.number,
-    bars: React.PropTypes.bool,
-    color: React.PropTypes.string,
-    lineWidth: React.PropTypes.number,
-    fill: React.PropTypes.string,
-    referenceLine: React.PropTypes.string
+    margin: React.PropTypes.number
 };
 Sparklines.defaultProps = {
+    data: [],
     width: 120,
-    height: 40,
-    limit: 100,
-    color: 'black',
-    lineWidth: 1,
-    fill: 'transparent'
+    height: 30,
+    margin: 0
 };
 
-export default Sparklines;
+export { Sparklines, SparklinesLine, SparklinesBars, SparklinesSpots, SparklinesReferenceLine, SparklinesNormalBand }

src/SparklinesBars.js

 import React from 'react';
 
 class SparklinesBars extends React.Component {
-    
+
     render() {
 
-        let points = this.props.points;
+        let { points, width, height, color, fill, strokeWidth } = this.props;
 
@@ -15,6 +15,6 @@ return (
                         x={p.x - 10} y={p.y}
-                        width="20" height={100 - p.y}
-                        stroke={this.props.color}
-                        strokeWidth={this.props.strokeWidth}
-                        fill={this.props.fill}
+                        width="10" height={100 - p.y}
+                        stroke={color}
+                        strokeWidth={strokeWidth}
+                        fill={fill}
                         fillOpacity='0.1' />
@@ -27,5 +27,13 @@ )}
 SparklinesBars.propTypes = {
-    points: React.PropTypes.array
+    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
 };
+SparklinesBars.defaultProps = {
+    points: []
+};
 
 export default SparklinesBars;

src/SparklinesLine.js

 import React from 'react';
 
 class SparklinesLine extends React.Component {
-    
+
     render() {
 
-        let points = this.props.points;
+        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, 10000, 0, 10000, 0, points[0].y]);
+        let fillPoints = linePoints.concat([points[points.length - 1].x, height, margin, height, margin, points[0].y]);
 
@@ -17,8 +18,9 @@ return (
                     stroke='none'
-                    fill={this.props.fill}
-                    fillOpacity='0.1' />
+                    fill={fill}
+                    fillOpacity={fillOpacity} />
                 <polyline points={linePoints.join(' ')}
                     stroke={this.props.color}
-                    strokeWidth='2'
+                    strokeWidth='1'
                     strokeLinejoin='round'
+                    style={{strokeLinejoin: 'round'}}
                     fill='none' />
@@ -30,5 +32,18 @@ </g>
 SparklinesLine.propTypes = {
-    points: React.PropTypes.array
+    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
 };
+SparklinesLine.defaultProps = {
+    points: [],
+    style: { stroke: 'grey' },
+    color: 'slategray',
+    fill: 'transparent',
+    fillOpacity: '0.1'
+};
 
 export default SparklinesLine;

src/SparklinesReferenceLine.js

 import React from 'react';
+import DataProcessor from './DataProcessor';
 
 class SparklinesReferenceLine extends React.Component {
-    
+
     render() {
 
-        let points = this.props.points;
+        let { points, type, style } = this.props;
 
+        let ypoints = points.map(p => p.y);
+        let y = DataProcessor.calculateFromData(ypoints, type);
+        
         return (
             <line
-                x1={points[0].x} y1={points[0].y}
-                x2={points[points.length - 1].x} y2={points[points.length - 1].y}
-                stroke="red" />
+                x1={points[0].x} y1={y}
+                x2={points[points.length - 1].x} y2={y}
+                style={style} />
         )
@@ -18,5 +22,12 @@ }
 SparklinesReferenceLine.propTypes = {
-    points: React.PropTypes.array
+    points: React.PropTypes.array,
+    type: React.PropTypes.string,
+    style: React.PropTypes.object
 };
+SparklinesReferenceLine.defaultProps = {
+    points: [],
+    type: 'mean',
+    style: { stroke: 'red', strokeOpacity: .75, strokeDasharray: '2, 2' }
+};
 
 export default SparklinesReferenceLine;

src/SparklinesSpots.js

@@ -5,4 +5,4 @@ import React from 'react';
 
-    lastDirection() {
-        let points = this.props.points;
+    lastDirection(points) {
+
         if (points.length < 2) {
@@ -16,3 +16,3 @@ return 0;
 
-        let points = this.props.points;
+        let { points, width, height, size, color } = this.props;
 
@@ -36,4 +36,4 @@ let lastSpotColors = {
                             cy={points[points.length - 1].y}
-                            r={this.props.size}
-                            fill={this.props.color || lastSpotColors[this.lastDirection()] } />
+                            r={size}
+                            fill={color || lastSpotColors[this.lastDirection(points)] } />
 
@@ -49,5 +49,13 @@ return (
 SparklinesSpots.propTypes = {
-    points: React.PropTypes.array
+    points: React.PropTypes.array,
+    width: React.PropTypes.number,
+    height: React.PropTypes.number,
+    size: React.PropTypes.number,
+    fill: React.PropTypes.string
 };
+SparklinesSpots.defaultProps = {
+    points: [],
+    size: 2
+};
 
 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

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

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

17239

increased by63.23%

Number of package files

15

increased by15.38%

Lines of code

397

increased by56.92%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes