Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-sparklines

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sparklines - npm Package Compare versions

Comparing version 1.5.2 to 1.6.0

__tests__/compareSvg.js
__tests__/dataToPoints.js
__tests__/fixtures.js
__tests__/graphical-tests.js
__tests__/mean.js
__tests__/median.js
__tests__/sampleData.js
bootstrap-tests.js
src/dataProcessing/dataToPoints.js
src/dataProcessing/index.js
src/dataProcessing/max.js
src/dataProcessing/mean.js
src/dataProcessing/median.js
src/dataProcessing/midRange.js
src/dataProcessing/min.js
src/dataProcessing/stdev.js
src/dataProcessing/variance.js

4

__tests__/Sparklines.js

@@ -6,7 +6,3 @@ import React from 'react';

import { Sparklines } from '../src/Sparklines';
import jsdom from 'jsdom'
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.parentWindow;
describe('Sparklines', () => {

@@ -13,0 +9,0 @@ it('does not throw without any parameters', () => {

505

build/index.js

@@ -20,13 +20,13 @@ (function webpackUniversalModuleDefinition(root, factory) {

/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].e;
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ e: {},
/******/ i: moduleId,
/******/ l: false
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.e, module, module.e, __webpack_require__);
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

@@ -37,3 +37,3 @@ /******/ // Flag the module as loaded

/******/ // Return the exports of the module
/******/ return module.e;
/******/ return module.exports;
/******/ }

@@ -52,3 +52,3 @@

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 10);
/******/ return __webpack_require__(__webpack_require__.s = 21);
/******/ })

@@ -60,3 +60,3 @@ /************************************************************************/

module.e = __WEBPACK_EXTERNAL_MODULE_0__;
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;

@@ -73,99 +73,63 @@ /***/ },

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
exports.default = function (data) {
return data.reduce(function (a, b) {
return a + b;
}) / data.length;
};
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/***/ },
/* 2 */
/***/ function(module, exports) {
var DataProcessor = function () {
function DataProcessor() {
_classCallCheck(this, DataProcessor);
}
"use strict";
_createClass(DataProcessor, null, [{
key: "dataToPoints",
value: function dataToPoints(data, limit) {
var width = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
var height = arguments.length <= 3 || arguments[3] === undefined ? 1 : arguments[3];
var margin = arguments.length <= 4 || arguments[4] === undefined ? 0 : arguments[4];
var max = arguments.length <= 5 || arguments[5] === undefined ? this.max(data) : arguments[5];
var min = arguments.length <= 6 || arguments[6] === undefined ? this.min(data) : arguments[6];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = function (data) {
return Math.min.apply(Math, data);
};
var len = data.length;
/***/ },
/* 3 */
/***/ function(module, exports) {
if (limit && limit < len) {
data = data.slice(len - limit);
}
"use strict";
var vfactor = (height - margin * 2) / (max - min || 2);
var hfactor = (width - margin * 2) / ((limit || len) - (len > 1 ? 1 : 0));
Object.defineProperty(exports, "__esModule", {
value: true
});
return data.map(function (d, i) {
return {
x: i * hfactor + margin,
y: (max === min ? 1 : max - d) * vfactor + margin
};
});
}
}, {
key: "max",
value: function max(data) {
return Math.max.apply(Math, data);
}
}, {
key: "min",
value: function min(data) {
return Math.min.apply(Math, data);
}
}, {
key: "mean",
value: function mean(data) {
return (this.max(data) - this.min(data)) / 2;
}
}, {
key: "avg",
value: function avg(data) {
return data.reduce(function (a, b) {
return a + b;
}) / data.length;
}
}, {
key: "median",
value: function median(data) {
return data.sort(function (a, b) {
return a - b;
})[Math.floor(data.length / 2)];
}
}, {
key: "variance",
value: function variance(data) {
var mean = this.mean(data);
var sq = data.map(function (n) {
return Math.pow(n - mean, 2);
});
return this.mean(sq);
}
}, {
key: "stdev",
value: function stdev(data) {
var mean = this.mean(data);
var sqDiff = data.map(function (n) {
return Math.pow(n - mean, 2);
});
var avgSqDiff = this.avg(sqDiff);
return Math.sqrt(avgSqDiff);
}
}, {
key: "calculateFromData",
value: function calculateFromData(data, calculationType) {
return this[calculationType].call(this, data);
}
}]);
exports.default = function (data) {
return Math.max.apply(Math, data);
};
return DataProcessor;
}();
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
exports.default = DataProcessor;
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _mean = __webpack_require__(1);
var _mean2 = _interopRequireDefault(_mean);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (data) {
var dataMean = (0, _mean2.default)(data);
var sqDiff = data.map(function (n) {
return Math.pow(n - dataMean, 2);
});
var avgSqDiff = (0, _mean2.default)(sqDiff);
return Math.sqrt(avgSqDiff);
};
/***/ },
/* 2 */
/* 5 */
/***/ function(module, exports, __webpack_require__) {

@@ -175,6 +139,6 @@

module.e = __webpack_require__(3);
module.exports = __webpack_require__(6);
/***/ },
/* 3 */
/* 6 */
/***/ function(module, exports, __webpack_require__) {

@@ -187,3 +151,3 @@

});
exports.DataProcessor = exports.SparklinesNormalBand = exports.SparklinesReferenceLine = exports.SparklinesSpots = exports.SparklinesBars = exports.SparklinesCurve = exports.SparklinesLine = exports.Sparklines = undefined;
exports.SparklinesNormalBand = exports.SparklinesReferenceLine = exports.SparklinesSpots = exports.SparklinesBars = exports.SparklinesCurve = exports.SparklinesLine = exports.Sparklines = undefined;

@@ -196,30 +160,34 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _SparklinesLine = __webpack_require__(6);
var _SparklinesLine = __webpack_require__(9);
var _SparklinesLine2 = _interopRequireDefault(_SparklinesLine);
var _SparklinesCurve = __webpack_require__(5);
var _SparklinesCurve = __webpack_require__(8);
var _SparklinesCurve2 = _interopRequireDefault(_SparklinesCurve);
var _SparklinesBars = __webpack_require__(4);
var _SparklinesBars = __webpack_require__(7);
var _SparklinesBars2 = _interopRequireDefault(_SparklinesBars);
var _SparklinesSpots = __webpack_require__(9);
var _SparklinesSpots = __webpack_require__(12);
var _SparklinesSpots2 = _interopRequireDefault(_SparklinesSpots);
var _SparklinesReferenceLine = __webpack_require__(8);
var _SparklinesReferenceLine = __webpack_require__(11);
var _SparklinesReferenceLine2 = _interopRequireDefault(_SparklinesReferenceLine);
var _SparklinesNormalBand = __webpack_require__(7);
var _SparklinesNormalBand = __webpack_require__(10);
var _SparklinesNormalBand2 = _interopRequireDefault(_SparklinesNormalBand);
var _DataProcessor = __webpack_require__(1);
var _dataToPoints = __webpack_require__(13);
var _DataProcessor2 = _interopRequireDefault(_DataProcessor);
var _dataToPoints2 = _interopRequireDefault(_dataToPoints);
var _reactAddonsShallowCompare = __webpack_require__(19);
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -245,7 +213,3 @@

value: function shouldComponentUpdate(nextProps) {
var _this2 = this;
return nextProps.width != this.props.width || nextProps.height != this.props.height || nextProps.margin != this.props.margin || nextProps.min != this.props.min || nextProps.max != this.props.max || nextProps.limit != this.props.limit || nextProps.data.length != this.props.data.length || nextProps.data.some(function (d, i) {
return d !== _this2.props.data[i];
});
return (0, _reactAddonsShallowCompare2.default)(this, nextProps);
}

@@ -260,2 +224,5 @@ }, {

var height = _props.height;
var svgWidth = _props.svgWidth;
var svgHeight = _props.svgHeight;
var preserveAspectRatio = _props.preserveAspectRatio;
var margin = _props.margin;

@@ -269,7 +236,11 @@ var style = _props.style;

var points = _DataProcessor2.default.dataToPoints(data, limit, width, height, margin, max, min);
var points = (0, _dataToPoints2.default)({ data: data, limit: limit, width: width, height: height, margin: margin, max: max, min: min });
var svgOpts = { style: style, viewBox: '0 0 ' + width + ' ' + height, preserveAspectRatio: preserveAspectRatio };
if (svgWidth > 0) svgOpts.width = svgWidth;
if (svgHeight > 0) svgOpts.height = svgHeight;
return _react2.default.createElement(
'svg',
{ width: width, height: height, style: style, viewBox: '0 0 ' + width + ' ' + height },
svgOpts,
_react2.default.Children.map(this.props.children, function (child) {

@@ -290,2 +261,5 @@ return _react2.default.cloneElement(child, { points: points, width: width, height: height, margin: margin });

height: _react2.default.PropTypes.number,
svgWidth: _react2.default.PropTypes.number,
svgHeight: _react2.default.PropTypes.number,
preserveAspectRatio: _react2.default.PropTypes.string,
margin: _react2.default.PropTypes.number,

@@ -300,2 +274,4 @@ style: _react2.default.PropTypes.object,

height: 60,
//Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
preserveAspectRatio: 'none', //https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
margin: 2

@@ -310,6 +286,5 @@ };

exports.SparklinesNormalBand = _SparklinesNormalBand2.default;
exports.DataProcessor = _DataProcessor2.default;
/***/ },
/* 4 */
/* 7 */
/***/ function(module, exports, __webpack_require__) {

@@ -389,3 +364,3 @@

/***/ },
/* 5 */
/* 8 */
/***/ function(module, exports, __webpack_require__) {

@@ -503,3 +478,3 @@

/***/ },
/* 6 */
/* 9 */
/***/ function(module, exports, __webpack_require__) {

@@ -592,3 +567,3 @@

/***/ },
/* 7 */
/* 10 */
/***/ function(module, exports, __webpack_require__) {

@@ -608,6 +583,10 @@

var _DataProcessor = __webpack_require__(1);
var _mean = __webpack_require__(1);
var _DataProcessor2 = _interopRequireDefault(_DataProcessor);
var _mean2 = _interopRequireDefault(_mean);
var _stdev = __webpack_require__(4);
var _stdev2 = _interopRequireDefault(_stdev);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -642,7 +621,7 @@

});
var mean = _DataProcessor2.default.calculateFromData(ypoints, 'mean');
var stdev = _DataProcessor2.default.calculateFromData(ypoints, 'stdev');
var dataMean = (0, _mean2.default)(ypoints);
var dataStdev = (0, _stdev2.default)(ypoints);
return _react2.default.createElement('rect', { x: points[0].x, y: mean - stdev + margin,
width: points[points.length - 1].x - points[0].x, height: stdev * 2,
return _react2.default.createElement('rect', { x: points[0].x, y: dataMean - dataStdev + margin,
width: points[points.length - 1].x - points[0].x, height: _stdev2.default * 2,
style: style });

@@ -664,3 +643,3 @@ }

/***/ },
/* 8 */
/* 11 */
/***/ function(module, exports, __webpack_require__) {

@@ -680,6 +659,8 @@

var _DataProcessor = __webpack_require__(1);
var _dataProcessing = __webpack_require__(14);
var _DataProcessor2 = _interopRequireDefault(_DataProcessor);
var dataProcessing = _interopRequireWildcard(_dataProcessing);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -716,3 +697,3 @@

});
var y = type == 'custom' ? value : _DataProcessor2.default.calculateFromData(ypoints, type);
var y = type == 'custom' ? value : dataProcessing[type](ypoints);

@@ -741,3 +722,3 @@ return _react2.default.createElement('line', {

/***/ },
/* 9 */
/* 12 */
/***/ function(module, exports, __webpack_require__) {

@@ -836,8 +817,276 @@

/***/ },
/* 10 */
/* 13 */
/***/ function(module, exports, __webpack_require__) {
module.e = __webpack_require__(2);
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _min = __webpack_require__(2);
var _min2 = _interopRequireDefault(_min);
var _max = __webpack_require__(3);
var _max2 = _interopRequireDefault(_max);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (_ref) {
var data = _ref.data;
var limit = _ref.limit;
var _ref$width = _ref.width;
var width = _ref$width === undefined ? 1 : _ref$width;
var _ref$height = _ref.height;
var height = _ref$height === undefined ? 1 : _ref$height;
var _ref$margin = _ref.margin;
var margin = _ref$margin === undefined ? 0 : _ref$margin;
var _ref$max = _ref.max;
var max = _ref$max === undefined ? (0, _max2.default)(data) : _ref$max;
var _ref$min = _ref.min;
var min = _ref$min === undefined ? (0, _min2.default)(data) : _ref$min;
var len = data.length;
if (limit && limit < len) {
data = data.slice(len - limit);
}
var vfactor = (height - margin * 2) / (max - min || 2);
var hfactor = (width - margin * 2) / ((limit || len) - (len > 1 ? 1 : 0));
return data.map(function (d, i) {
return {
x: i * hfactor + margin,
y: (max === min ? 1 : max - d) * vfactor + margin
};
});
};
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.variance = exports.stdev = exports.median = exports.midRange = exports.avg = exports.mean = exports.max = exports.min = undefined;
var _min2 = __webpack_require__(2);
var _min3 = _interopRequireDefault(_min2);
var _mean2 = __webpack_require__(1);
var _mean3 = _interopRequireDefault(_mean2);
var _midRange2 = __webpack_require__(16);
var _midRange3 = _interopRequireDefault(_midRange2);
var _median2 = __webpack_require__(15);
var _median3 = _interopRequireDefault(_median2);
var _stdev2 = __webpack_require__(4);
var _stdev3 = _interopRequireDefault(_stdev2);
var _variance2 = __webpack_require__(17);
var _variance3 = _interopRequireDefault(_variance2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.min = _min3.default;
exports.max = _min3.default;
exports.mean = _mean3.default;
exports.avg = _mean3.default;
exports.midRange = _midRange3.default;
exports.median = _median3.default;
exports.stdev = _stdev3.default;
exports.variance = _variance3.default;
/***/ },
/* 15 */
/***/ function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = function (data) {
return data.sort(function (a, b) {
return a - b;
})[Math.floor(data.length / 2)];
};
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _min = __webpack_require__(2);
var _min2 = _interopRequireDefault(_min);
var _max = __webpack_require__(3);
var _max2 = _interopRequireDefault(_max);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (data) {
return (0, _max2.default)(data) - (0, _min2.default)(data) / 2;
};
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _mean = __webpack_require__(1);
var _mean2 = _interopRequireDefault(_mean);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (data) {
var dataMean = (0, _mean2.default)(data);
var sq = data.map(function (n) {
return Math.pow(n - dataMean, 2);
});
return (0, _mean2.default)(sq);
};
/***/ },
/* 18 */
/***/ function(module, exports) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*
*/
/*eslint-disable no-self-compare */
'use strict';
var hasOwnProperty = Object.prototype.hasOwnProperty;
/**
* inlined Object.is polyfill to avoid requiring consumers ship their own
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
*/
function is(x, y) {
// SameValue algorithm
if (x === y) {
// Steps 1-5, 7-10
// Steps 6.b-6.e: +0 != -0
return x !== 0 || 1 / x === 1 / y;
} else {
// Step 6.a: NaN == NaN
return x !== x && y !== y;
}
}
/**
* Performs equality by iterating through keys on an object and returning false
* when any key has values which are not strictly equal between the arguments.
* Returns true when the values of all keys are strictly equal.
*/
function shallowEqual(objA, objB) {
if (is(objA, objB)) {
return true;
}
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
return false;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
// Test for A's keys different from B.
for (var i = 0; i < keysA.length; i++) {
if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
return false;
}
}
return true;
}
module.exports = shallowEqual;
/***/ },
/* 19 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(20);
/***/ },
/* 20 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule shallowCompare
*/
'use strict';
var shallowEqual = __webpack_require__(18);
/**
* Does a shallow comparison for props and state.
* See ReactComponentWithPureRenderMixin
*/
function shallowCompare(instance, nextProps, nextState) {
return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}
module.exports = shallowCompare;
/***/ },
/* 21 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(5);
/***/ }

@@ -844,0 +1093,0 @@ /******/ ])

22

package.json
{
"name": "react-sparklines",
"version": "1.5.2",
"version": "1.6.0",
"description": "Beautiful and expressive Sparklines component for React ",

@@ -14,3 +14,4 @@ "main": "build/index.js",

"compile": "webpack",
"prepublish": "npm run compile"
"prepublish": "npm run compile",
"test:bootstrap": "node -r babel-core/register bootstrap-tests.js"
},

@@ -38,4 +39,5 @@ "repository": {

"babel": "^6.5.2",
"babel-core": "^6.7.2",
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-preset-es2015": "^6.6.0",

@@ -46,6 +48,11 @@ "babel-preset-react": "^6.5.0",

"chai": "^3.5.0",
"enzyme": "^2.1.0",
"jsdom": "^8.1.0",
"enzyme": "^2.2.0",
"hiff": "^0.3.0",
"line-by-line": "^0.1.4",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"react": "^15.0.2",
"react-addons-test-utils": "^15.0.2",
"react-dom": "^15.0.2",
"react-element-to-jsx-string": "=2.6.1",
"replaceall": "^0.1.6",
"webpack": "^2.1.0-beta.4",

@@ -57,3 +64,6 @@ "webpack-dev-server": "^2.0.0-beta"

"react-dom": "*"
},
"dependencies": {
"react-addons-shallow-compare": "^15.0.2"
}
}

6

README.md

@@ -44,4 +44,8 @@ # Beautiful and expressive sparklines component for React

width, height - dimensions of the component
width, height - dimensions of the generated sparkline in the SVG viewbox. This will be automatically scaled (i.e. responsive) inside the parent container by default.
svgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.
[preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) - default: 'none', set this to modify how the sparkline should scale
margin - optional, offset the chart

@@ -48,0 +52,0 @@

38

src/Sparklines.js

@@ -8,4 +8,6 @@ import React from 'react';

import SparklinesNormalBand from './SparklinesNormalBand';
import DataProcessor from './DataProcessor';
import dataToPoints from './dataProcessing/dataToPoints';
import shallowCompare from 'react-addons-shallow-compare';
class Sparklines extends React.Component {

@@ -18,2 +20,5 @@

height: React.PropTypes.number,
svgWidth: React.PropTypes.number,
svgHeight: React.PropTypes.number,
preserveAspectRatio: React.PropTypes.string,
margin: React.PropTypes.number,

@@ -29,2 +34,4 @@ style: React.PropTypes.object,

height: 60,
//Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
preserveAspectRatio: 'none', //https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
margin: 2

@@ -38,26 +45,21 @@ };

shouldComponentUpdate(nextProps) {
return nextProps.width != this.props.width ||
nextProps.height != this.props.height ||
nextProps.margin != this.props.margin ||
nextProps.min != this.props.min ||
nextProps.max != this.props.max ||
nextProps.limit != this.props.limit ||
nextProps.data.length != this.props.data.length ||
nextProps.data.some((d, i) => d !== this.props.data[i]);
return shallowCompare(this, nextProps);
}
render() {
const { data, limit, width, height, margin, style, max, min } = this.props;
const { data, limit, width, height, svgWidth, svgHeight, preserveAspectRatio, margin, style, max, min } = this.props;
if (data.length === 0) return null;
const points = DataProcessor.dataToPoints(data, limit, width, height, margin, max, min);
const points = dataToPoints({ data, limit, width, height, margin, max, min });
const svgOpts = { style: style, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: preserveAspectRatio };
if (svgWidth > 0) svgOpts.width = svgWidth;
if (svgHeight > 0) svgOpts.height = svgHeight;
return (
<svg width={width} height={height} style={style} viewBox={`0 0 ${width} ${height}`}>
{
React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, { points, width, height, margin });
})
}
<svg {...svgOpts} >
{React.Children.map(this.props.children, child =>
React.cloneElement(child, { points, width, height, margin })
)}
</svg>

@@ -68,2 +70,2 @@ );

export { Sparklines, SparklinesLine, SparklinesCurve, SparklinesBars, SparklinesSpots, SparklinesReferenceLine, SparklinesNormalBand, DataProcessor }
export { Sparklines, SparklinesLine, SparklinesCurve, SparklinesBars, SparklinesSpots, SparklinesReferenceLine, SparklinesNormalBand }

9

src/SparklinesNormalBand.js
import React from 'react';
import DataProcessor from './DataProcessor';
import mean from './dataProcessing/mean';
import stdev from './dataProcessing/stdev';

@@ -19,7 +20,7 @@ export default class SparklinesNormalBand extends React.Component {

const ypoints = points.map(p => p.y);
const mean = DataProcessor.calculateFromData(ypoints, 'mean');
const stdev = DataProcessor.calculateFromData(ypoints, 'stdev');
const dataMean = mean(ypoints);
const dataStdev = stdev(ypoints);
return (
<rect x={points[0].x} y={mean - stdev + margin}
<rect x={points[0].x} y={dataMean - dataStdev + margin}
width={points[points.length - 1].x - points[0].x} height={stdev * 2}

@@ -26,0 +27,0 @@ style={style} />

4

src/SparklinesReferenceLine.js
import React from 'react';
import DataProcessor from './DataProcessor';
import * as dataProcessing from './dataProcessing';

@@ -22,3 +22,3 @@ export default class SparklinesReferenceLine extends React.Component {

const ypoints = points.map(p => p.y);
const y = type == 'custom' ? value : DataProcessor.calculateFromData(ypoints, type);
const y = type == 'custom' ? value : dataProcessing[type](ypoints);

@@ -25,0 +25,0 @@ return (

__tests__/DataProcessor.js
src/DataProcessor.js
.babelrc

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc