React Visualization

react-vist.js

var ReactVis =
/******/ (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 = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	var _AreaChart = __webpack_require__(10);

	var _AreaChart2 = _interopRequireDefault(_AreaChart);

	var _LineChart = __webpack_require__(11);

	var _LineChart2 = _interopRequireDefault(_LineChart);

	var _LinkedMultipleChart = __webpack_require__(5);

	var _LinkedMultipleChart2 = _interopRequireDefault(_LinkedMultipleChart);

	var _RealtimeLinkedMultipleChart = __webpack_require__(14);

	var _RealtimeLinkedMultipleChart2 = _interopRequireDefault(_RealtimeLinkedMultipleChart);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	module.exports = {
	    Base: {
	        AreaChart: _AreaChart2.default,
	        LineChart: _LineChart2.default,
	        LinkedMultipleChart: _LinkedMultipleChart2.default,
	        RealtiemLinkedMultipleChart: _RealtimeLinkedMultipleChart2.default
	    }
	};

/***/ },
/* 1 */
/***/ function(module, exports) {

	module.exports = React;

/***/ },
/* 2 */
/***/ function(module, exports) {

	module.exports = d3;

/***/ },
/* 3 */
/***/ 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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	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 Axis = function (_React$Component) {
	    _inherits(Axis, _React$Component);

	    function Axis() {
	        _classCallCheck(this, Axis);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(Axis).apply(this, arguments));
	    }

	    _createClass(Axis, [{
	        key: '_createAxis',
	        value: function _createAxis() {
	            var axis = _d2.default.svg.axis().scale(this.props.scale);
	            switch (this.props.position) {
	                case 'top':
	                    axis.orient('top');
	                    break;
	                case 'right':
	                    axis.orient('right');
	                    break;
	                case 'bottom':
	                    axis.orient('bottom');
	                    break;
	                default:
	                    axis.orient('left');
	                    break;
	            }

	            return axis;
	        }
	    }, {
	        key: 'componentDidMount',
	        value: function componentDidMount() {
	            this.d3Node = _d2.default.select(this.refs.axis);
	            this.d3Node.call(this._createAxis());
	        }
	    }, {
	        key: 'componentDidUpdate',
	        value: function componentDidUpdate(nextProps) {
	            this.d3Node.transition().duration(this.props.duration).call(this._createAxis());
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            var className = this.props.className;


	            return _react2.default.createElement('g', { className: "axis " + className, ref: 'axis', transform: this.props.transform });
	        }
	    }]);

	    return Axis;
	}(_react2.default.Component);

	Axis.defaultProps = {
	    duration: 500
	};
	Axis.propTypes = {
	    scale: _react2.default.PropTypes.any,
	    position: _react2.default.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
	    duration: _react2.default.PropTypes.number
	};

	exports.default = Axis;

/***/ },
/* 4 */
/***/ 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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	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 CasterianChart = function (_React$Component) {
	    _inherits(CasterianChart, _React$Component);

	    function CasterianChart(props) {
	        _classCallCheck(this, CasterianChart);

	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CasterianChart).call(this, props));

	        _this.state = {
	            data: [],
	            initiated: false,
	            focusIndex: -1
	        };

	        _this._cached = {};
	        return _this;
	    }

	    _createClass(CasterianChart, [{
	        key: 'setFocusIndex',
	        value: function setFocusIndex(index) {
	            this.setState({ focusIndex: index });
	        }
	    }, {
	        key: 'parseData',
	        value: function parseData(data) {
	            var _this2 = this;

	            if (data instanceof Array) {
	                this.setState({ data: data, initiated: true });
	            } else {
	                _d2.default.json(data, function (error, json) {
	                    if (!!error) {
	                        console.log(error);
	                        return;
	                    }
	                    _this2.setState({ data: json, initiated: true });
	                });
	            }
	        }
	    }, {
	        key: 'parseProperties',
	        value: function parseProperties(props) {
	            var xDomain = props.xDomain;
	            var yDomain = props.yDomain;
	            var width = props.width;
	            var height = props.height;
	            var margins = props.margins;
	            var x = props.x;
	            var y = props.y;
	            var color = props.color;
	            var isTimeSeries = props.isTimeSeries;

	            var data = this.state.data;

	            var areaWidth = width - margins.left - margins.right;
	            var areaHeight = height - margins.top - margins.bottom;

	            var xRange = [0, width - margins.left - margins.right];
	            var yRange = [height - margins.top - margins.bottom, 0];
	            var xDomain = xDomain || _d2.default.extent(data, function (d) {
	                return x(d);
	            });
	            var yDomain = yDomain || _d2.default.extent(data, function (d) {
	                return y(d);
	            }).map(function (e, i) {
	                return i ? e * 1.2 : Math.min(0, e);
	            });

	            var xScale = isTimeSeries ? _d2.default.scaleTime().domain(xDomain).range(xRange) : _d2.default.scaleLinear().domain(xDomain).range(xRange);
	            var yScale = _d2.default.scaleLinear().domain(yDomain).range(yRange);

	            return {
	                margins: margins,
	                xDomain: xDomain,
	                yDomain: yDomain,
	                xScale: xScale,
	                yScale: yScale,
	                width: width,
	                height: height,
	                areaWidth: areaWidth,
	                areaHeight: areaHeight,
	                x: x,
	                y: y,
	                color: color,
	                isTimeSeries: isTimeSeries
	            };
	        }
	    }, {
	        key: 'newDataEntry',
	        value: function newDataEntry(datum) {
	            this.setData({ data: datum });
	        }
	    }]);

	    return CasterianChart;
	}(_react2.default.Component);

	CasterianChart.PropTypes = {
	    width: _react2.default.PropTypes.number.isRequired,
	    height: _react2.default.PropTypes.number.isRequired,
	    margins: _react2.default.PropTypes.object,
	    x: _react2.default.PropTypes.func.isRequired,
	    y: _react2.default.PropTypes.func.isRequired,
	    data: _react2.default.PropTypes.any.isRequired,
	    xDomain: _react2.default.PropTypes.array,
	    yDomain: _react2.default.PropTypes.array,
	    color: _react2.default.PropTypes.any,
	    isTimeSeries: _react2.default.PropTypes.bool
	};

	CasterianChart.defaultProps = {
	    margins: { top: 20, right: 20, bottom: 30, left: 60 }
	};

	exports.default = CasterianChart;

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

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	var _moment = __webpack_require__(9);

	var _moment2 = _interopRequireDefault(_moment);

	var _CasterianChart2 = __webpack_require__(4);

	var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

	var _Axis = __webpack_require__(3);

	var _Axis2 = _interopRequireDefault(_Axis);

	var _Line = __webpack_require__(8);

	var _Line2 = _interopRequireDefault(_Line);

	var _Area = __webpack_require__(6);

	var _Area2 = _interopRequireDefault(_Area);

	var _FocusLineVertMultiple = __webpack_require__(13);

	var _FocusLineVertMultiple2 = _interopRequireDefault(_FocusLineVertMultiple);

	var _deepDiff = __webpack_require__(15);

	var _deepDiff2 = _interopRequireDefault(_deepDiff);

	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 LinkedMultipleChart = function (_CasterianChart) {
	    _inherits(LinkedMultipleChart, _CasterianChart);

	    function LinkedMultipleChart(props) {
	        _classCallCheck(this, LinkedMultipleChart);

	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(LinkedMultipleChart).call(this, props));

	        _this.chartAreaBound = false;
	        _this.xScale = false;
	        return _this;
	    }

	    _createClass(LinkedMultipleChart, [{
	        key: 'componentDidUpdate',
	        value: function componentDidUpdate(nextProps) {
	            var _this2 = this;

	            if (!!this.refs.chartArea && !this.chartAreaBound) {
	                this.chartAreaBound = true;
	                _d2.default.select(this.refs.chartArea).on('mousemove', function () {
	                    var idx = _this2.xScale.invert(_d2.default.mouse(_this2.refs.chartArea)[0] - _this2.props.margins.left);
	                    _this2._onCursorMove(idx);
	                });
	            }
	        }
	    }, {
	        key: '_onCursorMove',
	        value: function _onCursorMove(x) {
	            var _this3 = this;

	            var index = _d2.default.bisectLeft(this.props.data.map(function (e) {
	                return _this3.props.x(e);
	            }), x);
	            if (index >= this.props.data.length) {
	                index = this.props.data.length - 1;
	            }

	            this.setFocusIndex(index);
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            var _parseProperties = this.parseProperties(this.props);

	            var margins = _parseProperties.margins;
	            var xScale = _parseProperties.xScale;
	            var yScales = _parseProperties.yScales;
	            var width = _parseProperties.width;
	            var height = _parseProperties.height;
	            var areaWidth = _parseProperties.areaWidth;
	            var areaHeight = _parseProperties.areaHeight;
	            var x = _parseProperties.x;
	            var y = _parseProperties.y;
	            var colors = _parseProperties.colors;
	            var data = _parseProperties.data;


	            this.xScale = xScale;

	            return _react2.default.createElement(
	                'svg',
	                { className: 'linked-multiple-chart', width: width, height: height, ref: 'chartArea' },
	                _react2.default.createElement(
	                    'defs',
	                    null,
	                    _react2.default.createElement(
	                        'clipPath',
	                        { id: 'viewport' },
	                        _react2.default.createElement('rect', { x: '0',
	                            y: '0',
	                            width: areaWidth,
	                            height: height - margins.top - margins.bottom
	                        })
	                    )
	                ),
	                function () {
	                    return y.map(function (field, i) {
	                        switch (field.type) {
	                            case "LINE_CHART":
	                                return _react2.default.createElement(
	                                    'g',
	                                    { width: areaWidth, height: areaHeight,
	                                        transform: 'translate(' + margins.left + ', ' + (margins.top + i * (areaHeight + margins.top + margins.bottom)) + ')',
	                                        key: i },
	                                    _react2.default.createElement(_Line2.default, { data: data, x: x, y: field.y, xScale: xScale, yScale: yScales[i],
	                                        color: colors[i], clipPath: 'viewport'
	                                    }),
	                                    _react2.default.createElement(_Axis2.default, { className: 'y-axis', position: 'left', scale: yScales[i] }),
	                                    _react2.default.createElement(_Axis2.default, { className: 'x-axis', position: 'bottom', scale: xScale,
	                                        transform: 'translate(0, ' + areaHeight + ')' })
	                                );
	                            default:
	                                return _react2.default.createElement(
	                                    'g',
	                                    { width: areaWidth, height: areaHeight,
	                                        transform: 'translate(' + margins.left + ', ' + (margins.top + i * (areaHeight + margins.top + margins.bottom)) + ')',
	                                        key: i },
	                                    _react2.default.createElement(_Area2.default, { data: data, x: x, y: field.y, xScale: xScale, yScale: yScales[i],
	                                        color: colors[i], clipPath: 'viewport'
	                                    }),
	                                    _react2.default.createElement(_Axis2.default, { className: 'y-axis', position: 'left', scale: yScales[i] }),
	                                    _react2.default.createElement(_Axis2.default, { className: 'x-axis', position: 'bottom', scale: xScale,
	                                        transform: 'translate(0, ' + areaHeight + ')' })
	                                );
	                        }
	                    });
	                }(),
	                _react2.default.createElement(
	                    'g',
	                    { transform: 'translate(' + margins.left + ', ' + margins.top + ')' },
	                    _react2.default.createElement(_FocusLineVertMultiple2.default, { height: height - margins.top - margins.bottom, index: this.state.focusIndex,
	                        data: data,
	                        gapWidth: margins.top + margins.bottom,
	                        areaHeight: areaHeight,
	                        x: x, y: y,
	                        xScale: xScale, yScales: yScales
	                    })
	                )
	            );
	        }
	    }, {
	        key: 'parseProperties',
	        value: function parseProperties(props) {
	            var xDomain = props.xDomain;
	            var yDomains = props.yDomains;
	            var xScale = props.xScale;
	            var yScales = props.yScales;
	            var width = props.width;
	            var height = props.height;
	            var margins = props.margins;
	            var x = props.x;
	            var y = props.y;
	            var isTimeSeries = props.isTimeSeries;
	            var data = props.data;


	            var areaWidth = width - margins.left - margins.right;
	            var areaHeight = Math.floor(height / (y.length ? y.length : 1) - margins.top - margins.bottom);

	            var xRange = [0, areaWidth];
	            var yRange = [areaHeight, 0];

	            if (!this._cached.xDomain || this._cached.data !== data) {
	                xDomain = xDomain || _d2.default.extent(data, function (d) {
	                    return x(d);
	                });
	            } else {
	                xDomain = this._cached.xDomain;
	            }

	            if (!this._cached.yDomains || this._cached.data !== data) {
	                yDomains = y.map(function (field) {
	                    return _d2.default.extent(data, function (d) {
	                        return field.y(d);
	                    }).map(function (e, i) {
	                        return i ? e * 1.2 : Math.min(0, e);
	                    });
	                });
	            } else {
	                yDomains = this._cached.yDomains;
	            }

	            if (!this._cached.xScale || this._cached.xDomain !== xDomain) {
	                xScale = isTimeSeries ? _d2.default.time.scale().domain(xDomain).range(xRange) : _d2.default.scale.linear().domain(xDomain).range(xRange);
	            } else {
	                xScale = this._cached.xScale;
	            }

	            if (!this._cached.yScales || this._cached.yDomains !== yDomains) {
	                yScales = y.map(function (_, i) {
	                    return _d2.default.scale.linear().domain(yDomains[i]).range(yRange);
	                });
	            } else {
	                yScales = this._cached.yScales;
	            }

	            var colors = y.map(function (field) {
	                return field.color;
	            });

	            this._cached = {
	                data: data,
	                xDomain: xDomain,
	                yDomains: yDomains,
	                xScale: xScale,
	                yScales: yScales
	            };

	            return {
	                margins: margins,
	                xDomain: xDomain,
	                yDomains: yDomains,
	                xScale: xScale,
	                yScales: yScales,
	                width: width,
	                height: height,
	                areaWidth: areaWidth,
	                areaHeight: areaHeight,
	                x: x,
	                y: y,
	                colors: colors,
	                data: data,
	                isTimeSeries: isTimeSeries
	            };
	        }
	    }]);

	    return LinkedMultipleChart;
	}(_CasterianChart3.default);

	LinkedMultipleChart.defaultProps = _extends({}, _CasterianChart3.default.defaultProps);
	exports.default = LinkedMultipleChart;

/***/ },
/* 6 */
/***/ 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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	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 Area = function (_React$Component) {
	    _inherits(Area, _React$Component);

	    function Area() {
	        _classCallCheck(this, Area);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(Area).apply(this, arguments));
	    }

	    _createClass(Area, [{
	        key: 'componentDidMount',
	        value: function componentDidMount() {
	            var _this2 = this;

	            this.xAccessor = function (d, i) {
	                return _this2.props.xScale(_this2.props.x(d));
	            };
	            this.yAccessor = function (d, i) {
	                return _this2.props.yScale(_this2.props.y(d));
	            };
	            this.y0Accessor = function (d, i) {
	                return _this2.props.yScale(0);
	            };
	            this.d3Area = _d2.default.svg.area().x(this.xAccessor.bind(this)).y1(this.yAccessor.bind(this)).y0(this.y0Accessor.bind(this)).defined(function (d) {
	                return _this2.props.y(d) !== undefined;
	            });

	            this.d3Node = _d2.default.select(this.refs.area).data([this.props.data]).attr("d", this.d3Area);

	            _d2.default.select(this.refs.chartArea).on('mousemove', function () {
	                if (!!_this2.props.onCursorMove) {
	                    _this2.props.onCursorMove(_this2.props.xScale.invert(_d2.default.mouse(_this2.refs.chartArea)[0]));
	                }
	            });
	        }
	    }, {
	        key: 'componentDidUpdate',
	        value: function componentDidUpdate() {
	            this.d3Node.data([this.props.data]).attr("d", this.d3Area);
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            return _react2.default.createElement(
	                'g',
	                { className: 'area', ref: 'chartArea', style: { clipPath: 'url(#' + this.props.clipPath } },
	                _react2.default.createElement('path', { ref: 'area', fill: this.props.color })
	            );
	        }
	    }]);

	    return Area;
	}(_react2.default.Component);

	Area.PropTypes = {
	    xScale: _react2.default.PropTypes.func,
	    yScale: _react2.default.PropTypes.func,
	    x: _react2.default.PropTypes.func,
	    y: _react2.default.PropTypes.func,
	    data: _react2.default.PropTypes.any,
	    color: _react2.default.PropTypes.any
	};
	exports.default = Area;

/***/ },
/* 7 */
/***/ 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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	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 FocusLineVert = function (_React$Component) {
	    _inherits(FocusLineVert, _React$Component);

	    function FocusLineVert() {
	        _classCallCheck(this, FocusLineVert);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(FocusLineVert).apply(this, arguments));
	    }

	    _createClass(FocusLineVert, [{
	        key: 'render',
	        value: function render() {
	            var transformX = this.props.index >= 0 ? this.props.xScale(this.props.x(this.props.data[this.props.index])) : -1000;
	            var value = this.props.index >= 0 ? this.props.y(this.props.data[this.props.index]) : 0;
	            return _react2.default.createElement(
	                'g',
	                { className: 'focus-line-vert', transform: 'translate(' + transformX + ')' },
	                _react2.default.createElement('line', { x1: '0', x2: '0', y1: '0', y2: this.props.height, stroke: this.props.strokeColor }),
	                _react2.default.createElement(
	                    'text',
	                    { x: '5', y: '20' },
	                    value
	                )
	            );
	        }
	    }]);

	    return FocusLineVert;
	}(_react2.default.Component);

	FocusLineVert.defaultProps = {
	    strokeColor: "#474747"
	};

	exports.default = FocusLineVert;

/***/ },
/* 8 */
/***/ 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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	var _reactAddonsPureRenderMixin = __webpack_require__(16);

	var _reactAddonsPureRenderMixin2 = _interopRequireDefault(_reactAddonsPureRenderMixin);

	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; }

	// import deepDiff from '../utils/deepDiff';

	var Line = function (_React$Component) {
	    _inherits(Line, _React$Component);

	    function Line(props) {
	        _classCallCheck(this, Line);

	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Line).call(this, props));

	        _this.shouldComponentUpdate = _reactAddonsPureRenderMixin2.default.shouldComponentUpdate.bind(_this);
	        return _this;
	    }

	    _createClass(Line, [{
	        key: 'componentDidMount',
	        value: function componentDidMount() {
	            var _this2 = this;

	            this.xAccessor = function (d, i) {
	                return _this2.props.xScale(_this2.props.x(d));
	            };
	            this.yAccessor = function (d, i) {
	                return _this2.props.yScale(_this2.props.y(d));
	            };
	            this.d3Line = _d2.default.svg.line().x(this.xAccessor.bind(this)).y(this.yAccessor.bind(this)).defined(function (d) {
	                return _this2.props.y(d) !== undefined;
	            });

	            this.d3Node = _d2.default.select(this.refs.line).data([this.props.data]).attr("d", this.d3Line);
	        }
	    }, {
	        key: 'componentDidUpdate',
	        value: function componentDidUpdate(prevProps, prevState) {
	            this.d3Node.data([this.props.data]).attr("d", this.d3Line);

	            // deepDiff({props: prevProps, state: prevState},
	            //     {props: this.props, state: this.state},
	            //     this.constructor.name);
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            var _this3 = this;

	            return _react2.default.createElement(
	                'g',
	                { className: 'line', style: { clipPath: 'url(#' + this.props.clipPath } },
	                _react2.default.createElement('path', { ref: 'line', stroke: this.props.color }),
	                function () {
	                    return _this3.props.data.map(function (d) {
	                        return _this3.props.y(d) !== undefined ? _react2.default.createElement('circle', { key: _this3.props.x(d), r: '1.5',
	                            cx: _this3.props.xScale(_this3.props.x(d)),
	                            cy: _this3.props.yScale(_this3.props.y(d)),
	                            fill: 'none',
	                            stroke: _this3.props.color
	                        }) : null;
	                    });
	                }()
	            );
	        }
	    }]);

	    return Line;
	}(_react2.default.Component);

	Line.PropTypes = {
	    xScale: _react2.default.PropTypes.func,
	    yScale: _react2.default.PropTypes.func,
	    x: _react2.default.PropTypes.func,
	    y: _react2.default.PropTypes.func,
	    data: _react2.default.PropTypes.any,
	    color: _react2.default.PropTypes.any
	};
	exports.default = Line;

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

	module.exports = moment;

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

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	var _Axis = __webpack_require__(3);

	var _Axis2 = _interopRequireDefault(_Axis);

	var _Area = __webpack_require__(6);

	var _Area2 = _interopRequireDefault(_Area);

	var _FocusLineVert = __webpack_require__(7);

	var _FocusLineVert2 = _interopRequireDefault(_FocusLineVert);

	var _CasterianChart2 = __webpack_require__(4);

	var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

	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 AreaChart = function (_CasterianChart) {
	    _inherits(AreaChart, _CasterianChart);

	    function AreaChart(props) {
	        _classCallCheck(this, AreaChart);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(AreaChart).call(this, props));
	    }

	    _createClass(AreaChart, [{
	        key: 'componentDidMount',
	        value: function componentDidMount() {}
	    }, {
	        key: 'componentDidUpdate',
	        value: function componentDidUpdate(nextProps) {}
	    }, {
	        key: '_onCursorMove',
	        value: function _onCursorMove(x) {
	            var _this2 = this;

	            var index = _d2.default.bisectLeft(this.state.data.map(function (e) {
	                return _this2.props.x(e);
	            }), x);
	            if (index >= this.state.data.length) {
	                index = this.state.data.length - 1;
	            }

	            this.setFocusIndex(index);
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            if (!this.state.initiated) {
	                this.parseData(this.props.data);
	                return null;
	            }

	            var _parseProperties = this.parseProperties(this.props);

	            var margins = _parseProperties.margins;
	            var xScale = _parseProperties.xScale;
	            var yScale = _parseProperties.yScale;
	            var width = _parseProperties.width;
	            var height = _parseProperties.height;
	            var areaWidth = _parseProperties.areaWidth;
	            var areaHeight = _parseProperties.areaHeight;
	            var x = _parseProperties.x;
	            var y = _parseProperties.y;
	            var color = _parseProperties.color;


	            var data = this.state.data;

	            return _react2.default.createElement(
	                'svg',
	                { className: 'area-chart', width: width, height: height },
	                _react2.default.createElement(
	                    'g',
	                    { width: areaWidth, height: areaHeight,
	                        transform: 'translate(' + margins.left + ', ' + margins.top + ')' },
	                    _react2.default.createElement(_Area2.default, { data: data, x: x, y: y, xScale: xScale, yScale: yScale,
	                        color: color,
	                        onCursorMove: this._onCursorMove.bind(this)
	                    }),
	                    _react2.default.createElement(_Axis2.default, { className: 'x-axis', position: 'bottom', scale: xScale,
	                        transform: 'translate(0, ' + areaHeight + ')' }),
	                    _react2.default.createElement(_Axis2.default, { className: 'y-axis', position: 'left', scale: yScale }),
	                    _react2.default.createElement(_FocusLineVert2.default, { height: areaHeight, index: this.state.focusIndex,
	                        data: data,
	                        x: x, y: y,
	                        xScale: xScale, yScale: yScale
	                    })
	                )
	            );
	        }
	    }]);

	    return AreaChart;
	}(_CasterianChart3.default);

	AreaChart.PropTypes = _extends({}, _CasterianChart3.default.PropTypes);

	AreaChart.defaultProps = _extends({}, _CasterianChart3.default.defaultProps);

	exports.default = AreaChart;

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

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	var _Axis = __webpack_require__(3);

	var _Axis2 = _interopRequireDefault(_Axis);

	var _Line = __webpack_require__(8);

	var _Line2 = _interopRequireDefault(_Line);

	var _FocusLineVert = __webpack_require__(7);

	var _FocusLineVert2 = _interopRequireDefault(_FocusLineVert);

	var _CasterianChart2 = __webpack_require__(4);

	var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

	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 LineChart = function (_CasterianChart) {
	    _inherits(LineChart, _CasterianChart);

	    function LineChart(props) {
	        _classCallCheck(this, LineChart);

	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(LineChart).call(this, props));

	        _this.chartAreaBound = false;
	        _this.xScale = false;
	        return _this;
	    }

	    _createClass(LineChart, [{
	        key: 'componentDidMount',
	        value: function componentDidMount() {}
	    }, {
	        key: 'componentDidUpdate',
	        value: function componentDidUpdate(nextProps) {
	            var _this2 = this;

	            if (!!this.refs.chartArea && !this.chartAreaBound) {
	                this.chartAreaBound = true;
	                _d2.default.select(this.refs.chartArea).on('mousemove', function () {
	                    var idx = _this2.xScale.invert(_d2.default.mouse(_this2.refs.chartArea)[0] - _this2.props.margins.left);
	                    _this2._onCursorMove(idx);
	                });
	            }
	        }
	    }, {
	        key: '_onCursorMove',
	        value: function _onCursorMove(x) {
	            var _this3 = this;

	            var index = _d2.default.bisectLeft(this.state.data.map(function (e) {
	                return _this3.props.x(e);
	            }), x);
	            if (index >= this.state.data.length) {
	                index = this.state.data.length - 1;
	            }

	            this.setFocusIndex(index);
	        }
	    }, {
	        key: 'render',
	        value: function render() {

	            if (!this.state.initiated) {
	                this.parseData(this.props.data);
	                return null;
	            }

	            var _parseProperties = this.parseProperties(this.props);

	            var margins = _parseProperties.margins;
	            var xScale = _parseProperties.xScale;
	            var yScale = _parseProperties.yScale;
	            var width = _parseProperties.width;
	            var height = _parseProperties.height;
	            var areaWidth = _parseProperties.areaWidth;
	            var areaHeight = _parseProperties.areaHeight;
	            var x = _parseProperties.x;
	            var y = _parseProperties.y;
	            var color = _parseProperties.color;


	            var data = this.state.data;
	            this.xScale = xScale;

	            return _react2.default.createElement(
	                'svg',
	                { className: 'line-chart', width: width, height: height, ref: 'chartArea' },
	                _react2.default.createElement(
	                    'g',
	                    { width: areaWidth, height: areaHeight,
	                        transform: 'translate(' + margins.left + ', ' + margins.top + ')' },
	                    _react2.default.createElement(_Line2.default, { data: data, x: x, y: y, xScale: xScale, yScale: yScale,
	                        color: color }),
	                    _react2.default.createElement(_Axis2.default, { className: 'x-axis', position: 'bottom', scale: xScale,
	                        transform: 'translate(0, ' + areaHeight + ')' }),
	                    _react2.default.createElement(_Axis2.default, { className: 'y-axis', position: 'left', scale: yScale }),
	                    _react2.default.createElement(_FocusLineVert2.default, { height: areaHeight, index: this.state.focusIndex,
	                        data: data,
	                        x: x, y: y,
	                        xScale: xScale, yScale: yScale
	                    })
	                )
	            );
	        }
	    }]);

	    return LineChart;
	}(_CasterianChart3.default);

	LineChart.PropTypes = _extends({}, _CasterianChart3.default.PropTypes);

	LineChart.defaultProps = _extends({}, _CasterianChart3.default.defaultProps);

	exports.default = LineChart;

/***/ },
/* 12 */
/***/ 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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	var _Axis = __webpack_require__(3);

	var _Axis2 = _interopRequireDefault(_Axis);

	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 Brush = function (_React$Component) {
	    _inherits(Brush, _React$Component);

	    function Brush(props) {
	        _classCallCheck(this, Brush);

	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Brush).call(this, props));

	        _this.axisHeight = 30;
	        return _this;
	    }

	    _createClass(Brush, [{
	        key: 'componentDidMount',
	        value: function componentDidMount() {
	            var _this2 = this;

	            this.d3Brush = _d2.default.svg.brush().x(this.props.xScale).extent(this.props.initialExtent).on('brushend', function () {
	                _this2.props.brushEnd(_this2.d3Brush.extent());
	            });

	            this.d3BrushSelection = _d2.default.select(this.refs.brush);

	            this.d3BrushSelection.call(this.d3Brush).selectAll('rect').attr('height', this.props.height - this.axisHeight);

	            this.d3BrushSelection.selectAll('.background').style('visibility', 'visible').style('fill', this.props.backgroundColor);

	            this.d3BrushSelection.selectAll('.extent').style('opacity', this.props.brushOpacity).style('fill', this.props.brushColor);

	            this.d3BrushSelection.selectAll('.resize rect').style('visibility', 'visible').attr('width', 3);
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            var _props = this.props;
	            var width = _props.width;
	            var height = _props.height;
	            var backgroundColor = _props.backgroundColor;

	            return _react2.default.createElement(
	                'svg',
	                { className: 'brush', ref: 'brush',
	                    width: width,
	                    height: height
	                },
	                _react2.default.createElement('g', { className: 'brush-selector' }),
	                _react2.default.createElement(_Axis2.default, { className: 'x-axis', position: 'bottom', scale: this.props.xScale,
	                    transform: 'translate(0, ' + (this.props.height - this.axisHeight) + ')' })
	            );
	        }
	    }]);

	    return Brush;
	}(_react2.default.Component);

	Brush.defaultProps = {
	    backgroundColor: '#eee',
	    brushColor: '#474747',
	    brushOpacity: 0.4
	};

	exports.default = Brush;

/***/ },
/* 13 */
/***/ 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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	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 FocusLineVertMultiple = function (_React$Component) {
	    _inherits(FocusLineVertMultiple, _React$Component);

	    function FocusLineVertMultiple() {
	        _classCallCheck(this, FocusLineVertMultiple);

	        return _possibleConstructorReturn(this, Object.getPrototypeOf(FocusLineVertMultiple).apply(this, arguments));
	    }

	    _createClass(FocusLineVertMultiple, [{
	        key: 'render',
	        value: function render() {
	            var _this2 = this;

	            var transformX = this.props.index >= 0 ? this.props.xScale(this.props.x(this.props.data[this.props.index])) : -1000;
	            return _react2.default.createElement(
	                'g',
	                { className: 'focus-line-vert', transform: 'translate(' + transformX + ')' },
	                _react2.default.createElement('line', { x1: '0', x2: '0', y1: '0', y2: this.props.height, stroke: this.props.strokeColor }),
	                function () {
	                    return _this2.props.y.map(function (field, i) {
	                        var value = _this2.props.index >= 0 ? field.y(_this2.props.data[_this2.props.index]) : 0;
	                        return _react2.default.createElement(
	                            'text',
	                            { x: '5', y: 20 + i * (_this2.props.areaHeight + _this2.props.gapWidth), key: i },
	                            value
	                        );
	                    });
	                }()
	            );
	        }
	    }]);

	    return FocusLineVertMultiple;
	}(_react2.default.Component);

	FocusLineVertMultiple.defaultProps = {
	    strokeColor: "#474747"
	};

	exports.default = FocusLineVertMultiple;

/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});

	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	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__(1);

	var _react2 = _interopRequireDefault(_react);

	var _d = __webpack_require__(2);

	var _d2 = _interopRequireDefault(_d);

	var _moment = __webpack_require__(9);

	var _moment2 = _interopRequireDefault(_moment);

	var _LinkedMultipleChart = __webpack_require__(5);

	var _LinkedMultipleChart2 = _interopRequireDefault(_LinkedMultipleChart);

	var _Brush = __webpack_require__(12);

	var _Brush2 = _interopRequireDefault(_Brush);

	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 RealtimeLinkedMultipleChart = function (_React$Component) {
	    _inherits(RealtimeLinkedMultipleChart, _React$Component);

	    function RealtimeLinkedMultipleChart(props) {
	        _classCallCheck(this, RealtimeLinkedMultipleChart);

	        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(RealtimeLinkedMultipleChart).call(this, props));

	        _this.now = (0, _moment2.default)().millisecond(0);

	        _this.state = {
	            data: [],
	            lastUpdate: _this.now,
	            isRunning: true
	        };

	        _this.pauseTimer = _this.pauseTimer.bind(_this);
	        _this.runTimer = _this.runTimer.bind(_this);
	        _this.brushEnd = _this.brushEnd.bind(_this);
	        _this.tickInterval = null;
	        _this.dataDomain = [];
	        return _this;
	    }

	    _createClass(RealtimeLinkedMultipleChart, [{
	        key: 'componentDidMount',
	        value: function componentDidMount() {
	            this._getInitData();
	        }
	    }, {
	        key: 'runTimer',
	        value: function runTimer() {
	            this.tickInterval = window.setInterval(this.tick.bind(this), (this.props.data.interval || 5) * 1000);
	            this.tick();
	        }
	    }, {
	        key: 'pauseTimer',
	        value: function pauseTimer() {
	            if (!!this.tickInterval) {
	                window.clearInterval(this.tickInterval);
	                this.setState({ isRunning: false });
	            }
	        }
	    }, {
	        key: 'brushEnd',
	        value: function brushEnd(extent) {
	            console.log(this, extent);
	            this.dataDomain = extent;
	            var from = (0, _moment2.default)(extent[0]);
	            var to = (0, _moment2.default)(extent[1]);
	            this._getDataInRange(from, to);
	        }

	        // Update the data from data.realtimeUrl url

	    }, {
	        key: 'tick',
	        value: function tick() {
	            this.now = (0, _moment2.default)().millisecond(0);
	            this._fetchData();
	        }

	        // Get data of previous time duration for initiation

	    }, {
	        key: '_getInitData',
	        value: function _getInitData() {
	            var timeWindow = 1 * this.props.timeWindow;
	            var from = this.now.clone().subtract(timeWindow + 5 * this.props.data.interval, 'seconds');
	            this._getDataInRange(from, this.now);
	            this.runTimer();
	        }
	    }, {
	        key: '_fetchData',
	        value: function _fetchData() {
	            var _this2 = this;

	            var url = this.props.data.realtimeUrl;
	            if (typeof this.props.data.realtimeUrl != "string") {
	                // if the `realtimeUrl` is a function, pass the current moment datetime object as its argument and bind the
	                // current element to `this`.
	                url = this.props.data.realtimeUrl.call(this, this.now);
	            }
	            _d2.default.json(url, function (error, json) {
	                var from = _this2.now.clone().subtract(_this2.props.timeWindow + 5 * _this2.props.data.interval, 'seconds');
	                var data = _this2.state.data.filter(function (e) {
	                    // remember that the result of the x accessor is a Date object while the `from` variable is
	                    // a moment object
	                    return _this2.props.x(e).getTime() / 1000 >= from.unix();
	                });
	                var newTime = _this2.props.x(json).getTime();
	                // Only append new value to the chart if
	                // * the timestamp of the new value is greater than the earliest time
	                // * the timestamp of the new value if different from the latest data
	                if (newTime / 1000 >= from.unix() && data.length && _this2.props.x(data[data.length - 1]).getTime() !== newTime) {
	                    data.push(json);
	                }
	                _this2.setState({
	                    data: data,
	                    lastUpdate: _this2.now,
	                    isRunning: true
	                });
	            });
	        }
	    }, {
	        key: '_getDataInRange',
	        value: function _getDataInRange(from, to) {
	            var _this3 = this;

	            _d2.default.json(this.props.data.dataUrl.call(this, from, to), function (error, json) {
	                var data = json;
	                _this3.setState({
	                    data: data
	                });
	            });
	        }
	    }, {
	        key: 'render',
	        value: function render() {
	            var _this4 = this;

	            var xDomain = [this.now.clone().subtract(this.props.timeWindow, 'seconds').toDate(), this.now.toDate()];
	            if (!this.state.isRunning && this.dataDomain.length) {
	                xDomain = this.dataDomain;
	            }
	            return _react2.default.createElement(
	                'div',
	                null,
	                _react2.default.createElement(
	                    'div',
	                    null,
	                    _react2.default.createElement(
	                        'button',
	                        {
	                            onClick: !!this.state.isRunning ? this.pauseTimer : this.runTimer },
	                        !!this.state.isRunning ? "Pause" : "Run"
	                    )
	                ),
	                _react2.default.createElement(
	                    'div',
	                    null,
	                    _react2.default.createElement(_LinkedMultipleChart2.default, _extends({}, this.props, {
	                        data: this.state.data,
	                        xDomain: xDomain,
	                        ref: 'chart' }))
	                ),
	                function () {
	                    var brushDomain = [_this4.now.clone().subtract(1, 'days').toDate(), _this4.now.toDate()];
	                    var brushScale = _d2.default.time.scale().domain(brushDomain).range([0, _this4.props.width]);
	                    return _this4.state.isRunning ? null : _react2.default.createElement(_Brush2.default, { width: _this4.props.width, height: '70',
	                        xScale: brushScale,
	                        initialExtent: xDomain,
	                        brushEnd: _this4.brushEnd
	                    });
	                }()
	            );
	        }
	    }]);

	    return RealtimeLinkedMultipleChart;
	}(_react2.default.Component);

	exports.default = RealtimeLinkedMultipleChart;

/***/ },
/* 15 */
/***/ function(module, exports) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	    value: true
	});
	function isRequiredUpdateObject(o) {
	    return Array.isArray(o) || o && o.constructor === Object.prototype.constructor;
	}

	function deepDiff(o1, o2, p) {
	    var notify = function notify(status) {
	        console.warn('Update %s', status);
	        console.log('%cbefore', 'font-weight: bold', o1);
	        console.log('%cafter ', 'font-weight: bold', o2);
	    };
	    if (!_.isEqual(o1, o2)) {
	        console.group(p);
	        if ([o1, o2].every(_.isFunction)) {
	            notify('avoidable?');
	        } else if (![o1, o2].every(isRequiredUpdateObject)) {
	            notify('required.');
	        } else {
	            var keys = _.union(_.keys(o1), _.keys(o2));
	            var _iteratorNormalCompletion = true;
	            var _didIteratorError = false;
	            var _iteratorError = undefined;

	            try {
	                for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
	                    var key = _step.value;

	                    deepDiff(o1[key], o2[key], key);
	                }
	            } catch (err) {
	                _didIteratorError = true;
	                _iteratorError = err;
	            } finally {
	                try {
	                    if (!_iteratorNormalCompletion && _iterator.return) {
	                        _iterator.return();
	                    }
	                } finally {
	                    if (_didIteratorError) {
	                        throw _iteratorError;
	                    }
	                }
	            }
	        }
	        console.groupEnd();
	    } else if (o1 !== o2) {
	        console.group(p);
	        notify('avoidable!');
	        if (_.isObject(o1) && _.isObject(o2)) {
	            var _keys = _.union(_.keys(o1), _.keys(o2));
	            var _iteratorNormalCompletion2 = true;
	            var _didIteratorError2 = false;
	            var _iteratorError2 = undefined;

	            try {
	                for (var _iterator2 = _keys[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
	                    var _key = _step2.value;

	                    deepDiff(o1[_key], o2[_key], _key);
	                }
	            } catch (err) {
	                _didIteratorError2 = true;
	                _iteratorError2 = err;
	            } finally {
	                try {
	                    if (!_iteratorNormalCompletion2 && _iterator2.return) {
	                        _iterator2.return();
	                    }
	                } finally {
	                    if (_didIteratorError2) {
	                        throw _iteratorError2;
	                    }
	                }
	            }
	        }
	        console.groupEnd();
	    }
	}

	exports.default = deepDiff;

/***/ },
/* 16 */
/***/ function(module, exports) {

	module.exports = React.addons.PureRenderMixin;

/***/ }
/******/ ]);