New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
salad-ui.chart
Advanced tools
salad-ui.chart - npm Package Compare versions
Comparing version 0.0.38 to 0.0.39
@@ -1,1 +0,1 @@ | ||
| {"name":"salad-ui.chart","version":"0.0.38","description":"Reusable React UI Components Toolkit","main":"./salad-ui.chart.js","repository":{"type":"git","url":"https://github.com/dailymotion/salad-ui.git"},"keywords":["react","react-component","react-chart","react-graph"],"peerDependencies":{"react":">=0.14.0","react-dom":">=0.14.0"}} | ||
| {"name":"salad-ui.chart","version":"0.0.39","description":"Reusable React UI Components Toolkit","main":"./salad-ui.chart.js","repository":{"type":"git","url":"https://github.com/dailymotion/salad-ui.git"},"keywords":["react","react-component","react-chart","react-graph"],"peerDependencies":{"react":">=0.14.0","react-dom":">=0.14.0"}} |
@@ -1,886 +0,2 @@ | ||
| module.exports = | ||
| /******/ (function(modules) { // webpackBootstrap | ||
| /******/ // The module cache | ||
| /******/ var installedModules = {}; | ||
| /******/ | ||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
| /******/ | ||
| /******/ // Check if module is in cache | ||
| /******/ if(installedModules[moduleId]) | ||
| /******/ return installedModules[moduleId].exports; | ||
| /******/ | ||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = installedModules[moduleId] = { | ||
| /******/ exports: {}, | ||
| /******/ id: moduleId, | ||
| /******/ loaded: false | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Execute the module function | ||
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
| /******/ | ||
| /******/ // Flag the module as loaded | ||
| /******/ module.loaded = true; | ||
| /******/ | ||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
| /******/ | ||
| /******/ | ||
| /******/ // expose the modules object (__webpack_modules__) | ||
| /******/ __webpack_require__.m = modules; | ||
| /******/ | ||
| /******/ // expose the module cache | ||
| /******/ __webpack_require__.c = installedModules; | ||
| /******/ | ||
| /******/ // __webpack_public_path__ | ||
| /******/ __webpack_require__.p = "/dist/"; | ||
| /******/ | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(0); | ||
| /******/ }) | ||
| /************************************************************************/ | ||
| /******/ ({ | ||
| /***/ 0: | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| var _chart = __webpack_require__(200); | ||
| var Chart = _interopRequireWildcard(_chart); | ||
| 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; } } | ||
| module.exports = Chart; | ||
| /***/ }, | ||
| /***/ 3: | ||
| /***/ function(module, exports) { | ||
| module.exports = require("react"); | ||
| /***/ }, | ||
| /***/ 24: | ||
| /***/ function(module, exports) { | ||
| module.exports = require("react-dom"); | ||
| /***/ }, | ||
| /***/ 200: | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.BarMetric = exports.CirclePie = exports.Area = undefined; | ||
| var _area = __webpack_require__(201); | ||
| var _area2 = _interopRequireDefault(_area); | ||
| var _circlePie = __webpack_require__(204); | ||
| var _circlePie2 = _interopRequireDefault(_circlePie); | ||
| var _barMetric = __webpack_require__(205); | ||
| var _barMetric2 = _interopRequireDefault(_barMetric); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| exports.Area = _area2.default; | ||
| exports.CirclePie = _circlePie2.default; | ||
| exports.BarMetric = _barMetric2.default; | ||
| /***/ }, | ||
| /***/ 201: | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| 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 _react = __webpack_require__(3); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _reactDom = __webpack_require__(24); | ||
| var _reactDom2 = _interopRequireDefault(_reactDom); | ||
| var _moment = __webpack_require__(202); | ||
| var _moment2 = _interopRequireDefault(_moment); | ||
| var _chart = __webpack_require__(203); | ||
| var _chart2 = _interopRequireDefault(_chart); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| /* | ||
| * - x axis is always time. | ||
| * - data is given as [{time: TIMESTAMP, value: VALUE, label: LABEL}] | ||
| * - TIMESTAMP is in UNIX_MS | ||
| * - @TODO: | ||
| • multiple lines as [[{time: TIMESTAMP, value: VALUE}, ...], [{time: TIMESTAMP, value: VALUE}, ...] ...]) | ||
| * | ||
| * | ||
| */ | ||
| var numberToString = function numberToString(value) { | ||
| if (typeof value !== 'number') return value; | ||
| if (value > 1000000000) return Math.round(value / 100000000) / 10 + 'B'; | ||
| if (value > 10000000) return Math.round(value / 1000000) + 'M'; | ||
| if (value > 1000000) return Math.round(value / 100000) / 10 + 'M'; | ||
| if (value > 10000) return Math.round(value / 1000) + 'K'; | ||
| if (value > 1000) return Math.round(value / 100) / 10 + 'K'; | ||
| return Math.round(value * 100) / 100; | ||
| }; | ||
| var Area = function (_Component) { | ||
| _inherits(Area, _Component); | ||
| function Area() { | ||
| var _Object$getPrototypeO; | ||
| var _temp, _this, _ret; | ||
| _classCallCheck(this, Area); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Area)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.tipsData = {}, _this.xAxisLabels = [], _temp), _possibleConstructorReturn(_this, _ret); | ||
| } | ||
| _createClass(Area, [{ | ||
| key: 'describeLine', | ||
| value: function describeLine(data, xMin, yMin, xSpread, ySpread, xScale, yScale) { | ||
| var _this2 = this; | ||
| var isZero = ySpread === 0 && yMin === 0; | ||
| return data.map(function (point, index) { | ||
| return Math.max(0, (point.time - xMin) * xScale - _this2.props.strokeWidth) + ',' + (isZero ? yScale : (ySpread - (point.value - yMin)) * yScale); | ||
| }).join(' '); | ||
| } | ||
| }, { | ||
| key: 'centerElement', | ||
| value: function centerElement(el, center, width) { | ||
| var setWidth = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3]; | ||
| if (setWidth) el.setAttribute('width', width); | ||
| var xPos = center - width / 2; | ||
| // if(xPos + this.props.maxOverflow < 0) xPos = -this.props.maxOverflow | ||
| // if(xPos + width - this.props.maxOverflow > this.activeWidth) xPos = this.activeWidth - width + this.props.maxOverflow | ||
| el.setAttribute('x', xPos); | ||
| } | ||
| }, { | ||
| key: 'showPointTip', | ||
| value: function showPointTip(point, event) { | ||
| var scope = this.refs[point.ref], | ||
| background = scope.getElementsByClassName('tip-background')[0], | ||
| textDate = scope.getElementsByClassName('tip-text-date')[0], | ||
| textValue = scope.getElementsByClassName('tip-text-value')[0]; | ||
| this.centerElement(textDate, this.tipsData[point.ref].xBase, textDate.getBBox().width); | ||
| this.centerElement(textValue, this.tipsData[point.ref].xBase, textValue.getBBox().width); | ||
| this.centerElement(background, this.tipsData[point.ref].xBase, Math.max(textDate.getBBox().width, textValue.getBBox().width) + this.props.tipsPadding * 2, true); | ||
| scope.style.display = 'block'; | ||
| } | ||
| }, { | ||
| key: 'hidePointTip', | ||
| value: function hidePointTip(point, event) { | ||
| this.refs[point.ref].style.display = 'none'; | ||
| } | ||
| }, { | ||
| key: 'renderTipText', | ||
| value: function renderTipText(text, data) { | ||
| return text.replace('{{date}}', (0, _moment2.default)(data.date).format(data.dateFormat || 'YYYY-MM-DD')).replace('{{date1}}', (0, _moment2.default)(data.date1).format(data.dateFormat || 'YYYY-MM-DD')).replace('{{date2}}', (0, _moment2.default)(data.date2).format(data.dateFormat || 'YYYY-MM-DD')).replace('{{value}}', numberToString(data.value)); | ||
| } | ||
| }, { | ||
| key: 'renderTips', | ||
| value: function renderTips(data, xMin, yMin, xSpread, ySpread, xScale, yScale) { | ||
| var _this3 = this; | ||
| var intervalLength = void 0, | ||
| dateFormat = void 0, | ||
| tipText = void 0, | ||
| followingTime = void 0, | ||
| label = '{{value}} views', | ||
| day = 86400000, | ||
| isZero = ySpread === 0 && yMin === 0; | ||
| if (data.length === 0) return;else if (data.length === 1) intervalLength = 0;else intervalLength = data[1].time - data[0].time; | ||
| // if(data[0].label) label = data[0].label | ||
| if (intervalLength > day * 27 && intervalLength < day * 32) { | ||
| //roughly one month | ||
| dateFormat = 'MMMM'; | ||
| tipText = '{{date}}'; | ||
| } else if (intervalLength > day) { | ||
| //more than 1d | ||
| dateFormat = 'MMM Do'; | ||
| tipText = '{{date1}} through {{date2}}'; | ||
| } else { | ||
| dateFormat = 'MMM Do'; | ||
| tipText = '{{date}}'; | ||
| } | ||
| return data.map(function (point, index) { | ||
| if (index === 0 || index === data.length - 1) return; | ||
| if (data[index + 1]) followingTime = data[index + 1].time;else followingTime = point.time + intervalLength; | ||
| if (!point.label) point.label = label; | ||
| var xBase = (point.time - xMin) * xScale, | ||
| key = 'point_' + index + '_tooltip', | ||
| pointTimeFormat = dateFormat, | ||
| tipHeight = 38, | ||
| tipOffset = 25, | ||
| yBase = (isZero ? yScale : (ySpread - (point.value - yMin)) * yScale) - _this3.props.tipsPadding / 2, | ||
| triangleWidth = 25, | ||
| triagleHeight = 10, | ||
| trianglePath = [xBase - _this3.props.tipStrokeWidth - triangleWidth / 2 + ',' + (yBase - tipOffset + 9), xBase - _this3.props.tipStrokeWidth + triangleWidth / 2 + ',' + (yBase - tipOffset + 9), xBase - _this3.props.tipStrokeWidth + ',' + (yBase - tipOffset + triagleHeight + 9)].join(' '), | ||
| triangleBorderPath = [xBase - _this3.props.tipStrokeWidth - triangleWidth / 2 + ',' + (yBase - tipOffset + 10), xBase - _this3.props.tipStrokeWidth + triangleWidth / 2 + ',' + (yBase - tipOffset + 10), xBase - _this3.props.tipStrokeWidth + ',' + (yBase - tipOffset + triagleHeight + 10)].join(' '); | ||
| _this3.tipsData[key] = { xBase: xBase }; | ||
| if (new Date(point.time).getFullYear() !== new Date().getFullYear()) { | ||
| pointTimeFormat += ' YYYY'; | ||
| } | ||
| return _react2.default.createElement( | ||
| 'g', | ||
| { key: 'point-' + index, ref: key, style: { display: 'none' } }, | ||
| _react2.default.createElement('rect', { | ||
| className: 'tip-background', | ||
| x: (point.time - xMin) * xScale - _this3.props.strokeWidth - _this3.props.tipsWidth / 2, | ||
| y: yBase - tipHeight - tipOffset, | ||
| width: _this3.props.tipsWidth + _this3.props.tipsPadding, | ||
| height: tipHeight + _this3.props.tipsPadding, | ||
| style: { stroke: _this3.props.tipStrokeColor, strokeWidth: _this3.props.tipStrokeWidth, fill: _this3.props.tipsFill } | ||
| }), | ||
| _react2.default.createElement('polygon', { | ||
| points: triangleBorderPath, | ||
| style: { stroke: _this3.props.tipStrokeColor, opacity: 0.5, strokeWidth: _this3.props.tipStrokeWidth } | ||
| }), | ||
| _react2.default.createElement('polygon', { | ||
| points: trianglePath, | ||
| style: { fill: _this3.props.tipsFill } | ||
| }), | ||
| _react2.default.createElement('text', { | ||
| className: 'tip-text-date', | ||
| x: xBase - _this3.props.tipsWidth / 2 + 2, | ||
| y: yBase - _this3.props.strokeWidth - tipHeight - tipOffset + _this3.props.tipsPadding + 10, | ||
| style: { fontSize: 14, fontWeight: 'light' }, | ||
| dangerouslySetInnerHTML: { __html: _this3.renderTipText(tipText, { dateFormat: pointTimeFormat, date: point.time, date1: point.time, date2: followingTime, value: point.value }) } | ||
| }), | ||
| _react2.default.createElement('text', { | ||
| className: 'tip-text-value', | ||
| x: xBase - _this3.props.tipsWidth / 2 + 2, | ||
| y: yBase - _this3.props.strokeWidth - tipHeight - tipOffset + _this3.props.tipsPadding + 30, | ||
| style: { fontSize: 16, fontWeight: 'bold' }, | ||
| dangerouslySetInnerHTML: { __html: _this3.renderTipText(point.label, { value: point.value }) } | ||
| }) | ||
| ); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'renderPoints', | ||
| value: function renderPoints(data, xMin, yMin, xSpread, ySpread, xScale, yScale) { | ||
| var _this4 = this; | ||
| var isZero = ySpread === 0 && yMin === 0; | ||
| return data.map(function (point, index) { | ||
| if (index === 0 || index === data.length - 1) return; | ||
| return _react2.default.createElement('circle', { | ||
| key: 'point-' + index, | ||
| cx: (point.time - xMin) * xScale - _this4.props.strokeWidth / 2, | ||
| cy: isZero ? yScale : (ySpread - (point.value - yMin)) * yScale, | ||
| r: _this4.props.pointsRadius, | ||
| onMouseOver: _this4.showPointTip.bind(_this4, { ref: 'point_' + index + '_tooltip' }), | ||
| onMouseLeave: _this4.hidePointTip.bind(_this4, { ref: 'point_' + index + '_tooltip' }), | ||
| style: { stroke: _this4.props.strokeColor, strokeWidth: _this4.props.strokeWidth, fill: 'white', cursor: 'default' } | ||
| }); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'renderLabel', | ||
| value: function renderLabel(label, index) { | ||
| if (!label.x) { | ||
| if (this.props.yLabelsPosition === 'right') label.x = this.activeWidth + (this.props.yLabelsOutside ? 5 : -1 * (20 + 5 * (label.txt.length || 1)));else label.x = 20; | ||
| } | ||
| if (!label.ref) label.ref = 'label.' + index + ',' + label.x + ',' + label.y; | ||
| return _react2.default.createElement( | ||
| 'text', | ||
| { | ||
| key: 'graph.xAxis.label.' + label.ref, | ||
| x: label.x, | ||
| y: label.y, | ||
| ref: label.ref, | ||
| fill: this.props.labelColor, | ||
| style: { fontSize: this.props.labelFontSize, textShadow: this.props.labelTextShadow } | ||
| }, | ||
| label.txt | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'renderYGridLine', | ||
| value: function renderYGridLine(label, index) { | ||
| return _react2.default.createElement('line', { | ||
| key: 'graph.ygridLine.' + index, | ||
| x1: '0', | ||
| y1: label.y, | ||
| x2: this.activeWidth - this.props.strokeWidth, | ||
| y2: label.y, | ||
| fill: this.props.labelColor, | ||
| style: { stroke: this.props.gridColor, strokeWidth: 1 } | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'describeYAxis', | ||
| value: function describeYAxis(yMin, ySpread, yScale, yPadding) { | ||
| function ruler(value, m) { | ||
| if (!m) m = 100; | ||
| if (value > m) ruler(value, m * 5); | ||
| return Math.ceil(value / m) * m / 10; | ||
| } | ||
| var rule = ruler(ySpread, ySpread / 10), | ||
| lines = [1, 2, 3, 4, 5, 6, 7, 8, 9], | ||
| labels = [0, 1, 2, 3, 4], | ||
| isZero = ySpread === 0 && yMin === 0; | ||
| return { | ||
| gridLines: lines.map(function (k) { | ||
| return { y: isZero ? yScale : (ySpread - k * rule) * yScale }; | ||
| }), | ||
| labels: labels.map(function (k) { | ||
| var v = k * rule * 2;return { y: isZero ? yScale : (ySpread - k * rule * 2) * yScale, txt: numberToString(v + yMin) }; | ||
| }) | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'describeXAxis', | ||
| value: function describeXAxis(xMin, xSpread, xScale, data) { | ||
| var _this5 = this; | ||
| var keys = [1, 2, 3, 4, 5, 6, 7, 8, 9], | ||
| keyInterval = data.length / keys.length, | ||
| dateFormat = 'ddd', | ||
| labels = [], | ||
| day = 86400000; | ||
| if (xMin < 10000) return { labels: [] }; // No timestamps given | ||
| if (keys.length > data.length) { | ||
| keys = data.map(function (p, i) { | ||
| return i + 1; | ||
| }); | ||
| keyInterval = 1; | ||
| } | ||
| if (xSpread > day * 365 * 7) dateFormat = 'YYYY'; // > 7 years | ||
| else if (xSpread > day * 30 * 9) dateFormat = 'MMM'; // > 9 Months | ||
| else if (xSpread > day * 7) dateFormat = 'MMM Do'; // > a week | ||
| keys.forEach(function (k, i) { | ||
| var time = xMin + k * (xSpread / keys.length); | ||
| // Skip last item | ||
| if (i < keys.length - 1) labels.push({ | ||
| txt: (0, _moment2.default)(time).format(dateFormat), | ||
| time: time, | ||
| x: (time - xMin) * xScale, | ||
| y: _this5.activeHeight + 30, | ||
| ref: 'xLabel.' + i | ||
| }); | ||
| }); | ||
| this.xAxisLabels = labels; | ||
| return { | ||
| labels: labels | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'centerXAxisLabelMarkers', | ||
| value: function centerXAxisLabelMarkers() { | ||
| var _this6 = this; | ||
| this.xAxisLabels.forEach(function (label) { | ||
| var domLabel = _this6.refs[label.ref]; | ||
| _this6.centerElement(domLabel, label.x, domLabel.getBBox().width); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.centerXAxisLabelMarkers(); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| this.centerXAxisLabelMarkers(); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this7 = this; | ||
| var data = this.props.data; | ||
| this.activeWidth = this.props.width; | ||
| this.activeHeight = this.props.height - 50; // add 50 px in the bottom for the labels | ||
| // Let's ensure all data has a timeStamp | ||
| data.forEach(function (point, index) { | ||
| if (!point.time) { | ||
| data[index].time = index; | ||
| } | ||
| data[index].time = parseFloat(data[index].time); | ||
| }); | ||
| // let xMax = this.props.data.length - 1 | ||
| var xMax = Math.max.apply(Math, _toConsumableArray(data.map(function (point, index) { | ||
| return point.time; | ||
| })).concat([data.length])), | ||
| //either a timestamp or number of items | ||
| yMax = Math.max.apply(Math, _toConsumableArray(data.map(function (point) { | ||
| return point.value; | ||
| }))) * (1 + 1 / this.props.yPadding), | ||
| // xMin = 0, | ||
| xMin = Math.min.apply(Math, _toConsumableArray(data.map(function (point, index) { | ||
| return point.time; | ||
| }))), | ||
| //either smallest timestamp or 0 | ||
| yMin = this.props.useDynamicYMin ? Math.min.apply(Math, _toConsumableArray(data.map(function (point) { | ||
| return point.value; | ||
| }))) - yMax / 5 : 0, | ||
| xSpread = xMax - xMin, | ||
| ySpread = yMax - yMin, | ||
| xScale = this.activeWidth / (xSpread || 1), | ||
| yScale = this.activeHeight / (ySpread || 1), | ||
| yPadding = yMax / this.props.yPadding, | ||
| line = this.describeLine(data, xMin, yMin, xSpread, ySpread, xScale, yScale), | ||
| yAxis = this.describeYAxis(yMin, ySpread, yScale, yPadding), | ||
| xAxis = this.describeXAxis(xMin, xSpread, xScale, data), | ||
| isZero = ySpread === 0 && yMin === 0; | ||
| return _react2.default.createElement( | ||
| _chart2.default, | ||
| { width: this.props.width, height: this.props.height, type: 'area' }, | ||
| yAxis.gridLines.map(this.renderYGridLine.bind(this)), | ||
| _react2.default.createElement('polygon', { | ||
| points: '0,' + ((isZero ? yScale : ySpread * yScale) - this.props.strokeWidth) + ' ' + line + ' ' + ((xMax - xMin) * xScale - this.props.strokeWidth) + ',' + ((isZero ? yScale : ySpread * yScale) - this.props.strokeWidth), | ||
| style: { fill: this.props.fillColor, strokeWidth: 0 } | ||
| }), | ||
| _react2.default.createElement('polyline', { | ||
| points: line, | ||
| style: { stroke: this.props.strokeColor, strokeWidth: this.props.strokeWidth, fill: 'none' } | ||
| }), | ||
| yAxis.labels.map(this.renderLabel.bind(this)), | ||
| xAxis.labels.map(function (label, index) { | ||
| return _react2.default.createElement('line', { | ||
| key: 'graph.xAxis.label.' + index, | ||
| ref: label.ref + '.marker', | ||
| x1: label.x, | ||
| x2: label.x, | ||
| y1: _this7.activeHeight, | ||
| y2: _this7.activeHeight + 10, | ||
| stroke: _this7.props.gridColor, | ||
| strokeWidth: 1 | ||
| }); | ||
| }), | ||
| xAxis.labels.map(this.renderLabel.bind(this)), | ||
| this.renderPoints(data, xMin, yMin, xSpread, ySpread, xScale, yScale, yPadding), | ||
| this.renderTips(data, xMin, yMin, xSpread, ySpread, xScale, yScale, yPadding) | ||
| ); | ||
| } | ||
| }]); | ||
| return Area; | ||
| }(_react.Component); | ||
| Area.propTypes = { | ||
| width: _react2.default.PropTypes.number, | ||
| height: _react2.default.PropTypes.number, | ||
| border: _react2.default.PropTypes.string, | ||
| strokeWidth: _react2.default.PropTypes.number, | ||
| useDynamicYMin: _react2.default.PropTypes.bool, | ||
| strokeColor: _react2.default.PropTypes.string, | ||
| pointsRadius: _react2.default.PropTypes.number, | ||
| tipsWidth: _react2.default.PropTypes.number, | ||
| tipsHeight: _react2.default.PropTypes.number, | ||
| tipsPadding: _react2.default.PropTypes.number, | ||
| tipStrokeWidth: _react2.default.PropTypes.number, | ||
| tipStrokeColor: _react2.default.PropTypes.string, | ||
| tipsFill: _react2.default.PropTypes.string, | ||
| gridColor: _react2.default.PropTypes.string, | ||
| labelFontSize: _react2.default.PropTypes.number, | ||
| labelTextShadow: _react2.default.PropTypes.string, | ||
| labelColor: _react2.default.PropTypes.string, | ||
| fillColor: _react2.default.PropTypes.string, | ||
| maxOverflow: _react2.default.PropTypes.number, | ||
| yLabelsOutside: _react2.default.PropTypes.bool, | ||
| yLabelsPosition: _react2.default.PropTypes.string, | ||
| yPadding: _react2.default.PropTypes.number, | ||
| data: _react2.default.PropTypes.array | ||
| }; | ||
| Area.defaultProps = { | ||
| width: 640, | ||
| height: 320, | ||
| border: 'none', | ||
| strokeWidth: 2, | ||
| useDynamicYMin: false, | ||
| strokeColor: '#408AE5', | ||
| pointsRadius: 5, | ||
| tipsWidth: 240, | ||
| tipsHeight: 22, | ||
| tipsPadding: 10, | ||
| tipStrokeWidth: 1, | ||
| tipStrokeColor: '#BBBBBB', | ||
| tipsFill: 'white', | ||
| gridColor: 'rgba(230,230,230,.5)', | ||
| labelFontSize: 12, | ||
| labelTextShadow: '1px 1px #fff', | ||
| labelColor: '#555', | ||
| fillColor: 'rgba(191, 216, 246, 0.3)', | ||
| maxOverflow: 20, | ||
| yLabelsOutside: false, | ||
| yLabelsPosition: 'left', | ||
| yPadding: 10, | ||
| data: [] | ||
| }; | ||
| exports.default = Area; | ||
| /***/ }, | ||
| /***/ 202: | ||
| /***/ function(module, exports) { | ||
| module.exports = require("moment"); | ||
| /***/ }, | ||
| /***/ 203: | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| 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 _react = __webpack_require__(3); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var Chart = function (_Component) { | ||
| _inherits(Chart, _Component); | ||
| function Chart() { | ||
| _classCallCheck(this, Chart); | ||
| return _possibleConstructorReturn(this, Object.getPrototypeOf(Chart).apply(this, arguments)); | ||
| } | ||
| _createClass(Chart, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| return _react2.default.createElement( | ||
| 'svg', | ||
| { | ||
| className: 'react-chart ' + this.props.type, | ||
| width: this.props.width, | ||
| style: { overflow: 'visible', border: this.props.border }, | ||
| height: this.props.height }, | ||
| this.props.children | ||
| ); | ||
| } | ||
| }]); | ||
| return Chart; | ||
| }(_react.Component); | ||
| Chart.defaultProps = { | ||
| border: 'none', | ||
| height: 400, | ||
| width: 600 | ||
| }; | ||
| exports.default = Chart; | ||
| /***/ }, | ||
| /***/ 204: | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| 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 _react = __webpack_require__(3); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _chart = __webpack_require__(203); | ||
| var _chart2 = _interopRequireDefault(_chart); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var CirclePie = function (_Component) { | ||
| _inherits(CirclePie, _Component); | ||
| function CirclePie() { | ||
| _classCallCheck(this, CirclePie); | ||
| return _possibleConstructorReturn(this, Object.getPrototypeOf(CirclePie).apply(this, arguments)); | ||
| } | ||
| _createClass(CirclePie, [{ | ||
| key: 'polarToCartesian', | ||
| value: function polarToCartesian(centerX, centerY, radius, angleInDegrees) { | ||
| var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; | ||
| return { | ||
| x: centerX + radius * Math.cos(angleInRadians), | ||
| y: centerY + radius * Math.sin(angleInRadians) | ||
| }; | ||
| } | ||
| }, { | ||
| key: 'describeArc', | ||
| value: function describeArc(x, y, radius, startAngle, endAngle) { | ||
| if (!x || !y) console.error('x or y missing to describeArc'); | ||
| var start = this.polarToCartesian(x, y, radius, endAngle), | ||
| end = this.polarToCartesian(x, y, radius, startAngle), | ||
| arcSweep = endAngle - startAngle <= 180 ? "0" : "1"; | ||
| return ["M", start.x, start.y, "A", radius, radius, 0, arcSweep, 0, end.x, end.y].join(" "); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var radius = this.props.width / 2 - this.props.strokeWidth / 2 - this.props.padding, | ||
| center = radius + this.props.strokeWidth / 2 + this.props.padding, | ||
| startAngle = 0, | ||
| endAngle = 3.6 * this.props.percent, | ||
| arc = this.describeArc(center, center, radius, startAngle, endAngle); | ||
| return _react2.default.createElement( | ||
| _chart2.default, | ||
| { width: this.props.width, height: this.props.height, border: this.props.border }, | ||
| _react2.default.createElement('circle', { | ||
| cx: center, | ||
| cy: center, | ||
| r: radius, | ||
| fill: this.props.fillColor, | ||
| stroke: this.props.railColor, | ||
| strokeWidth: this.props.strokeWidth }), | ||
| _react2.default.createElement('path', { | ||
| fill: this.props.fillColor, | ||
| stroke: this.props.strokeColor, | ||
| strokeWidth: this.props.strokeWidth, | ||
| d: arc }), | ||
| _react2.default.createElement( | ||
| 'text', | ||
| { | ||
| x: center, | ||
| y: center, | ||
| dx: '-.5em', | ||
| dy: '.4em', | ||
| fill: this.props.labelColor, | ||
| fontSize: this.props.labelFontSize }, | ||
| this.props.percent + '%' | ||
| ) | ||
| ); | ||
| } | ||
| }]); | ||
| return CirclePie; | ||
| }(_react.Component); | ||
| CirclePie.propTypes = { | ||
| width: _react2.default.PropTypes.number, | ||
| height: _react2.default.PropTypes.number, | ||
| strokeWidth: _react2.default.PropTypes.number, | ||
| strokeColor: _react2.default.PropTypes.string, | ||
| fillColor: _react2.default.PropTypes.string, | ||
| startAngle: _react2.default.PropTypes.number, | ||
| endAngle: _react2.default.PropTypes.number, | ||
| radius: _react2.default.PropTypes.number | ||
| }; | ||
| CirclePie.defaultProps = { | ||
| width: 150, | ||
| height: 150, | ||
| border: 'none', | ||
| strokeWidth: 10, | ||
| labelColor: '#111111', | ||
| labelFontSize: '18px', | ||
| strokeColor: '#408AE5', | ||
| railColor: '#f5f5f5', | ||
| fillColor: 'none', | ||
| percent: 70, | ||
| padding: 0 | ||
| }; | ||
| exports.default = CirclePie; | ||
| /***/ }, | ||
| /***/ 205: | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| 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 _react = __webpack_require__(3); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var Bar = function (_React$Component) { | ||
| _inherits(Bar, _React$Component); | ||
| function Bar() { | ||
| _classCallCheck(this, Bar); | ||
| return _possibleConstructorReturn(this, Object.getPrototypeOf(Bar).apply(this, arguments)); | ||
| } | ||
| _createClass(Bar, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| return _react2.default.createElement( | ||
| 'div', | ||
| null, | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { style: { fontSize: 13, textTransform: 'uppercase' } }, | ||
| this.props.label | ||
| ), | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'bar-row' }, | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { style: { | ||
| backgroundColor: this.props.barRailColor, | ||
| width: this.props.barWidth + '%', | ||
| height: this.props.barHeight, | ||
| marginTop: 4, | ||
| display: 'inline-block', | ||
| position: 'relative' } }, | ||
| _react2.default.createElement('div', { style: { | ||
| width: this.props.percent + '%', | ||
| height: this.props.barHeight, | ||
| position: 'absolute', | ||
| backgroundColor: this.props.barColor, | ||
| top: 0, | ||
| left: 0, | ||
| bottom: 0, | ||
| transition: 'all .5s' } }) | ||
| ), | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { style: { | ||
| width: 100 - this.props.barWidth + '%', | ||
| paddingLeft: this.props.metricPadding, | ||
| fontSize: 13, | ||
| display: 'inline-block', | ||
| color: this.props.metricColor, | ||
| textAlign: 'right' } }, | ||
| (this.props.value ? this.props.value + " " : "") + this.props.metricName | ||
| ) | ||
| ), | ||
| _react2.default.createElement('br', { style: { display: 'table', clear: 'both' } }) | ||
| ); | ||
| } | ||
| }]); | ||
| return Bar; | ||
| }(_react2.default.Component); | ||
| Bar.defaultProps = { | ||
| metricName: 'points', | ||
| value: 0, | ||
| percent: 100, | ||
| metricPadding: 15, | ||
| metricColor: '#777', | ||
| barWidth: 70, | ||
| barHeight: 7, | ||
| barRailColor: '#ddd', | ||
| barColor: '#408AE5', | ||
| label: 'N/A' | ||
| }; | ||
| Bar.propTypes = { | ||
| metricName: _react2.default.PropTypes.string, | ||
| value: _react2.default.PropTypes.number, | ||
| percent: _react2.default.PropTypes.number, | ||
| barWidth: _react2.default.PropTypes.number, | ||
| barHeight: _react2.default.PropTypes.number, | ||
| metricPadding: _react2.default.PropTypes.number, | ||
| label: _react2.default.PropTypes.string, | ||
| metricColor: _react2.default.PropTypes.string, | ||
| barColor: _react2.default.PropTypes.string, | ||
| barRailColor: _react2.default.PropTypes.string | ||
| }; | ||
| exports.default = Bar; | ||
| /***/ } | ||
| /******/ }); | ||
| module.exports=function(e){function t(o){if(r[o])return r[o].exports;var i=r[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="/dist/",t(0)}({0:function(e,t,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t["default"]=e,t}var i=r(215),n=o(i);e.exports=n},4:function(e,t){e.exports=require("react")},31:function(e,t){e.exports=require("react-dom")},121:function(e,t){e.exports=require("moment")},122:function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=r(4),p=o(l),u=function(e){function t(){return i(this,t),n(this,Object.getPrototypeOf(t).apply(this,arguments))}return a(t,e),s(t,[{key:"render",value:function(){return p["default"].createElement("svg",{className:"react-chart "+this.props.type,width:this.props.width,style:{overflow:"visible",border:this.props.border},height:this.props.height},this.props.children)}}]),t}(l.Component);u.defaultProps={border:"none",height:400,width:600},t["default"]=u},213:function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),p=r(4),u=o(p),d=r(31),f=(o(d),r(121)),h=o(f),c=r(122),y=o(c),b=function(e){return"number"!=typeof e?e:e>1e9?Math.round(e/1e8)/10+"B":e>1e7?Math.round(e/1e6)+"M":e>1e6?Math.round(e/1e5)/10+"M":e>1e4?Math.round(e/1e3)+"K":e>1e3?Math.round(e/100)/10+"K":Math.round(100*e)/100},m=function(e){function t(){var e,r,o,i;n(this,t);for(var s=arguments.length,l=Array(s),p=0;s>p;p++)l[p]=arguments[p];return r=o=a(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(l))),o.tipsData={},o.xAxisLabels=[],i=r,a(o,i)}return s(t,e),l(t,[{key:"describeLine",value:function(e,t,r,o,i,n,a){var s=this,l=0===i&&0===r;return e.map(function(e,o){return Math.max(0,(e.time-t)*n-s.props.strokeWidth)+","+(l?a:(i-(e.value-r))*a)}).join(" ")}},{key:"centerElement",value:function(e,t,r){var o=arguments.length<=3||void 0===arguments[3]?!1:arguments[3];o&&e.setAttribute("width",r);var i=t-r/2;e.setAttribute("x",i)}},{key:"showPointTip",value:function(e,t){var r=this.refs[e.ref],o=r.getElementsByClassName("tip-background")[0],i=r.getElementsByClassName("tip-text-date")[0],n=r.getElementsByClassName("tip-text-value")[0];this.centerElement(i,this.tipsData[e.ref].xBase,i.getBBox().width),this.centerElement(n,this.tipsData[e.ref].xBase,n.getBBox().width),this.centerElement(o,this.tipsData[e.ref].xBase,Math.max(i.getBBox().width,n.getBBox().width)+2*this.props.tipsPadding,!0),r.style.display="block"}},{key:"hidePointTip",value:function(e,t){this.refs[e.ref].style.display="none"}},{key:"renderTipText",value:function(e,t){return e.replace("{{date}}",(0,h["default"])(t.date).format(t.dateFormat||"YYYY-MM-DD")).replace("{{date1}}",(0,h["default"])(t.date1).format(t.dateFormat||"YYYY-MM-DD")).replace("{{date2}}",(0,h["default"])(t.date2).format(t.dateFormat||"YYYY-MM-DD")).replace("{{value}}",b(t.value))}},{key:"renderTips",value:function(e,t,r,o,i,n,a){var s=this,l=void 0,p=void 0,d=void 0,f=void 0,h="{{value}} views",c=864e5,y=0===i&&0===r;return 0!==e.length?(l=1===e.length?0:e[1].time-e[0].time,l>27*c&&32*c>l?(p="MMMM",d="{{date}}"):l>c?(p="MMM Do",d="{{date1}} through {{date2}}"):(p="MMM Do",d="{{date}}"),e.map(function(o,c){if(0!==c&&c!==e.length-1){f=e[c+1]?e[c+1].time:o.time+l,o.label||(o.label=h);var b=(o.time-t)*n,m="point_"+c+"_tooltip",g=p,v=38,k=25,x=(y?a:(i-(o.value-r))*a)-s.props.tipsPadding/2,P=25,T=10,w=[b-s.props.tipStrokeWidth-P/2+","+(x-k+9),b-s.props.tipStrokeWidth+P/2+","+(x-k+9),b-s.props.tipStrokeWidth+","+(x-k+T+9)].join(" "),M=[b-s.props.tipStrokeWidth-P/2+","+(x-k+10),b-s.props.tipStrokeWidth+P/2+","+(x-k+10),b-s.props.tipStrokeWidth+","+(x-k+T+10)].join(" ");return s.tipsData[m]={xBase:b},new Date(o.time).getFullYear()!==(new Date).getFullYear()&&(g+=" YYYY"),u["default"].createElement("g",{key:"point-"+c,ref:m,style:{display:"none"}},u["default"].createElement("rect",{className:"tip-background",x:(o.time-t)*n-s.props.strokeWidth-s.props.tipsWidth/2,y:x-v-k,width:s.props.tipsWidth+s.props.tipsPadding,height:v+s.props.tipsPadding,style:{stroke:s.props.tipStrokeColor,strokeWidth:s.props.tipStrokeWidth,fill:s.props.tipsFill}}),u["default"].createElement("polygon",{points:M,style:{stroke:s.props.tipStrokeColor,opacity:.5,strokeWidth:s.props.tipStrokeWidth}}),u["default"].createElement("polygon",{points:w,style:{fill:s.props.tipsFill}}),u["default"].createElement("text",{className:"tip-text-date",x:b-s.props.tipsWidth/2+2,y:x-s.props.strokeWidth-v-k+s.props.tipsPadding+10,style:{fontSize:14,fontWeight:"light"},dangerouslySetInnerHTML:{__html:s.renderTipText(d,{dateFormat:g,date:o.time,date1:o.time,date2:f,value:o.value})}}),u["default"].createElement("text",{className:"tip-text-value",x:b-s.props.tipsWidth/2+2,y:x-s.props.strokeWidth-v-k+s.props.tipsPadding+30,style:{fontSize:16,fontWeight:"bold"},dangerouslySetInnerHTML:{__html:s.renderTipText(o.label,{value:o.value})}}))}})):void 0}},{key:"renderPoints",value:function(e,t,r,o,i,n,a){var s=this,l=0===i&&0===r;return e.map(function(o,p){return 0!==p&&p!==e.length-1?u["default"].createElement("circle",{key:"point-"+p,cx:(o.time-t)*n-s.props.strokeWidth/2,cy:l?a:(i-(o.value-r))*a,r:s.props.pointsRadius,onMouseOver:s.showPointTip.bind(s,{ref:"point_"+p+"_tooltip"}),onMouseLeave:s.hidePointTip.bind(s,{ref:"point_"+p+"_tooltip"}),style:{stroke:s.props.strokeColor,strokeWidth:s.props.strokeWidth,fill:"white",cursor:"default"}}):void 0})}},{key:"renderLabel",value:function(e,t){return e.x||("right"===this.props.yLabelsPosition?e.x=this.activeWidth+(this.props.yLabelsOutside?5:-1*(20+5*(e.txt.length||1))):e.x=20),e.ref||(e.ref="label."+t+","+e.x+","+e.y),u["default"].createElement("text",{key:"graph.xAxis.label."+e.ref,x:e.x,y:e.y,ref:e.ref,fill:this.props.labelColor,style:{fontSize:this.props.labelFontSize,textShadow:this.props.labelTextShadow}},e.txt)}},{key:"renderYGridLine",value:function(e,t){return u["default"].createElement("line",{key:"graph.ygridLine."+t,x1:"0",y1:e.y,x2:this.activeWidth-this.props.strokeWidth,y2:e.y,fill:this.props.labelColor,style:{stroke:this.props.gridColor,strokeWidth:1}})}},{key:"describeYAxis",value:function(e,t,r,o){function i(e,t){return t||(t=100),e>t&&i(e,5*t),Math.ceil(e/t)*t/10}var n=i(t,t/10),a=[1,2,3,4,5,6,7,8,9],s=[0,1,2,3,4],l=0===t&&0===e;return{gridLines:a.map(function(e){return{y:l?r:(t-e*n)*r}}),labels:s.map(function(o){var i=o*n*2;return{y:l?r:(t-o*n*2)*r,txt:b(i+e)}})}}},{key:"describeXAxis",value:function(e,t,r,o){var i=this,n=[1,2,3,4,5,6,7,8,9],a=o.length/n.length,s="ddd",l=[],p=864e5;return 1e4>e?{labels:[]}:(n.length>o.length&&(n=o.map(function(e,t){return t+1}),a=1),t>365*p*7?s="YYYY":t>30*p*9?s="MMM":t>7*p&&(s="MMM Do"),n.forEach(function(o,a){var p=e+o*(t/n.length);a<n.length-1&&l.push({txt:(0,h["default"])(p).format(s),time:p,x:(p-e)*r,y:i.activeHeight+30,ref:"xLabel."+a})}),this.xAxisLabels=l,{labels:l})}},{key:"centerXAxisLabelMarkers",value:function(){var e=this;this.xAxisLabels.forEach(function(t){var r=e.refs[t.ref];e.centerElement(r,t.x,r.getBBox().width)})}},{key:"componentDidMount",value:function(){this.centerXAxisLabelMarkers()}},{key:"componentDidUpdate",value:function(){this.centerXAxisLabelMarkers()}},{key:"render",value:function(){var e=this,t=this.props.data;this.activeWidth=this.props.width,this.activeHeight=this.props.height-50,t.forEach(function(e,r){e.time||(t[r].time=r),t[r].time=parseFloat(t[r].time)});var r=Math.max.apply(Math,i(t.map(function(e,t){return e.time})).concat([t.length])),o=Math.max.apply(Math,i(t.map(function(e){return e.value})))*(1+1/this.props.yPadding),n=Math.min.apply(Math,i(t.map(function(e,t){return e.time}))),a=this.props.useDynamicYMin?Math.min.apply(Math,i(t.map(function(e){return e.value})))-o/5:0,s=r-n,l=o-a,p=this.activeWidth/(s||1),d=this.activeHeight/(l||1),f=o/this.props.yPadding,h=this.describeLine(t,n,a,s,l,p,d),c=this.describeYAxis(a,l,d,f),b=this.describeXAxis(n,s,p,t),m=0===l&&0===a;return u["default"].createElement(y["default"],{width:this.props.width,height:this.props.height,type:"area"},c.gridLines.map(this.renderYGridLine.bind(this)),u["default"].createElement("polygon",{points:"0,"+((m?d:l*d)-this.props.strokeWidth)+" "+h+" "+((r-n)*p-this.props.strokeWidth)+","+((m?d:l*d)-this.props.strokeWidth),style:{fill:this.props.fillColor,strokeWidth:0}}),u["default"].createElement("polyline",{points:h,style:{stroke:this.props.strokeColor,strokeWidth:this.props.strokeWidth,fill:"none"}}),c.labels.map(this.renderLabel.bind(this)),b.labels.map(function(t,r){return u["default"].createElement("line",{key:"graph.xAxis.label."+r,ref:t.ref+".marker",x1:t.x,x2:t.x,y1:e.activeHeight,y2:e.activeHeight+10,stroke:e.props.gridColor,strokeWidth:1})}),b.labels.map(this.renderLabel.bind(this)),this.renderPoints(t,n,a,s,l,p,d,f),this.renderTips(t,n,a,s,l,p,d,f))}}]),t}(p.Component);m.propTypes={width:u["default"].PropTypes.number,height:u["default"].PropTypes.number,border:u["default"].PropTypes.string,strokeWidth:u["default"].PropTypes.number,useDynamicYMin:u["default"].PropTypes.bool,strokeColor:u["default"].PropTypes.string,pointsRadius:u["default"].PropTypes.number,tipsWidth:u["default"].PropTypes.number,tipsHeight:u["default"].PropTypes.number,tipsPadding:u["default"].PropTypes.number,tipStrokeWidth:u["default"].PropTypes.number,tipStrokeColor:u["default"].PropTypes.string,tipsFill:u["default"].PropTypes.string,gridColor:u["default"].PropTypes.string,labelFontSize:u["default"].PropTypes.number,labelTextShadow:u["default"].PropTypes.string,labelColor:u["default"].PropTypes.string,fillColor:u["default"].PropTypes.string,maxOverflow:u["default"].PropTypes.number,yLabelsOutside:u["default"].PropTypes.bool,yLabelsPosition:u["default"].PropTypes.string,yPadding:u["default"].PropTypes.number,data:u["default"].PropTypes.array},m.defaultProps={width:640,height:320,border:"none",strokeWidth:2,useDynamicYMin:!1,strokeColor:"#408AE5",pointsRadius:5,tipsWidth:240,tipsHeight:22,tipsPadding:10,tipStrokeWidth:1,tipStrokeColor:"#BBBBBB",tipsFill:"white",gridColor:"rgba(230,230,230,.5)",labelFontSize:12,labelTextShadow:"1px 1px #fff",labelColor:"#555",fillColor:"rgba(191, 216, 246, 0.3)",maxOverflow:20,yLabelsOutside:!1,yLabelsPosition:"left",yPadding:10,data:[]},t["default"]=m},214:function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=r(4),p=o(l),u=function(e){function t(){return i(this,t),n(this,Object.getPrototypeOf(t).apply(this,arguments))}return a(t,e),s(t,[{key:"render",value:function(){return p["default"].createElement("div",null,p["default"].createElement("div",{style:{fontSize:13,textTransform:"uppercase"}},this.props.label),p["default"].createElement("div",{className:"bar-row"},p["default"].createElement("div",{style:{backgroundColor:this.props.barRailColor,width:this.props.barWidth+"%",height:this.props.barHeight,marginTop:4,display:"inline-block",position:"relative"}},p["default"].createElement("div",{style:{width:this.props.percent+"%",height:this.props.barHeight,position:"absolute",backgroundColor:this.props.barColor,top:0,left:0,bottom:0,transition:"all .5s"}})),p["default"].createElement("div",{style:{width:100-this.props.barWidth+"%",paddingLeft:this.props.metricPadding,fontSize:13,display:"inline-block",color:this.props.metricColor,textAlign:"right"}},(this.props.value?this.props.value+" ":"")+this.props.metricName)),p["default"].createElement("br",{style:{display:"table",clear:"both"}}))}}]),t}(p["default"].Component);u.defaultProps={metricName:"points",value:0,percent:100,metricPadding:15,metricColor:"#777",barWidth:70,barHeight:7,barRailColor:"#ddd",barColor:"#408AE5",label:"N/A"},u.propTypes={metricName:p["default"].PropTypes.string,value:p["default"].PropTypes.number,percent:p["default"].PropTypes.number,barWidth:p["default"].PropTypes.number,barHeight:p["default"].PropTypes.number,metricPadding:p["default"].PropTypes.number,label:p["default"].PropTypes.string,metricColor:p["default"].PropTypes.string,barColor:p["default"].PropTypes.string,barRailColor:p["default"].PropTypes.string},t["default"]=u},215:function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.BarMetric=t.CirclePie=t.Area=void 0;var i=r(213),n=o(i),a=r(216),s=o(a),l=r(214),p=o(l);t.Area=n["default"],t.CirclePie=s["default"],t.BarMetric=p["default"]},216:function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=r(4),p=o(l),u=r(122),d=o(u),f=function(e){function t(){return i(this,t),n(this,Object.getPrototypeOf(t).apply(this,arguments))}return a(t,e),s(t,[{key:"polarToCartesian",value:function(e,t,r,o){var i=(o-90)*Math.PI/180;return{x:e+r*Math.cos(i),y:t+r*Math.sin(i)}}},{key:"describeArc",value:function(e,t,r,o,i){e&&t||console.error("x or y missing to describeArc");var n=this.polarToCartesian(e,t,r,i),a=this.polarToCartesian(e,t,r,o),s=180>=i-o?"0":"1";return["M",n.x,n.y,"A",r,r,0,s,0,a.x,a.y].join(" ")}},{key:"render",value:function(){var e=this.props.width/2-this.props.strokeWidth/2-this.props.padding,t=e+this.props.strokeWidth/2+this.props.padding,r=0,o=3.6*this.props.percent,i=this.describeArc(t,t,e,r,o);return p["default"].createElement(d["default"],{width:this.props.width,height:this.props.height,border:this.props.border},p["default"].createElement("circle",{cx:t,cy:t,r:e,fill:this.props.fillColor,stroke:this.props.railColor,strokeWidth:this.props.strokeWidth}),p["default"].createElement("path",{fill:this.props.fillColor,stroke:this.props.strokeColor,strokeWidth:this.props.strokeWidth,d:i}),p["default"].createElement("text",{x:t,y:t,dx:"-.5em",dy:".4em",fill:this.props.labelColor,fontSize:this.props.labelFontSize},this.props.percent+"%"))}}]),t}(l.Component);f.propTypes={width:p["default"].PropTypes.number,height:p["default"].PropTypes.number,strokeWidth:p["default"].PropTypes.number,strokeColor:p["default"].PropTypes.string,fillColor:p["default"].PropTypes.string,startAngle:p["default"].PropTypes.number,endAngle:p["default"].PropTypes.number,radius:p["default"].PropTypes.number},f.defaultProps={width:150,height:150,border:"none",strokeWidth:10,labelColor:"#111111",labelFontSize:"18px",strokeColor:"#408AE5",railColor:"#f5f5f5",fillColor:"none",percent:70,padding:0},t["default"]=f}}); | ||
| //# sourceMappingURL=salad-ui.chart.js.map |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage 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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by32%
102609
Worsened metrics
- Lines of code
- decreased by-90.82%
69
- Number of low quality alerts
- increased by50%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes