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

	var _AreaChart2 = _interopRequireDefault(_AreaChart);

	var _LineChart = __webpack_require__(9);

	var _LineChart2 = _interopRequireDefault(_LineChart);

	var _LinkedMultipleChart = __webpack_require__(10);

	var _LinkedMultipleChart2 = _interopRequireDefault(_LinkedMultipleChart);

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

	module.exports = {
	    Base: {
	        AreaChart: _AreaChart2.default,
	        LineChart: _LineChart2.default,
	        LinkedMultipleChart: _LinkedMultipleChart2.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 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
	        };
	        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;

/***/ },
/* 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 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 = null;
	            switch (this.props.position) {
	                case 'top':
	                    axis = _d2.default.axisTop(this.props.scale);
	                    break;
	                case 'right':
	                    axis = _d2.default.axisRight(this.props.scale);
	                    break;
	                case 'bottom':
	                    axis = _d2.default.axisBottom(this.props.scale);
	                    break;
	                default:
	                    axis = _d2.default.axisLeft(this.props.scale);
	                    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;

/***/ },
/* 5 */
/***/ 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.area().x(this.xAccessor.bind(this)).y1(this.yAccessor.bind(this)).y0(this.y0Accessor.bind(this));

	            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' },
	                _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;

/***/ },
/* 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 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;

/***/ },
/* 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 Line = function (_React$Component) {
	    _inherits(Line, _React$Component);

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

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

	    _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.line().x(this.xAccessor.bind(this)).y(this.yAccessor.bind(this));

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

	            return _react2.default.createElement(
	                'g',
	                { className: 'line' },
	                _react2.default.createElement('path', { ref: 'line', stroke: this.props.color }),
	                function () {
	                    return _this3.props.data.map(function (d) {
	                        return _react2.default.createElement('circle', { key: _this3.props.x(d), r: '3.5',
	                            cx: _this3.props.xScale(_this3.props.x(d)),
	                            cy: _this3.props.yScale(_this3.props.y(d)),
	                            fill: 'none',
	                            stroke: _this3.props.color
	                        });
	                    });
	                }()
	            );
	        }
	    }]);

	    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;

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

	var _Axis2 = _interopRequireDefault(_Axis);

	var _Area = __webpack_require__(5);

	var _Area2 = _interopRequireDefault(_Area);

	var _FocusLineVert = __webpack_require__(6);

	var _FocusLineVert2 = _interopRequireDefault(_FocusLineVert);

	var _CasterianChart2 = __webpack_require__(3);

	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;

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

	var _Axis2 = _interopRequireDefault(_Axis);

	var _Line = __webpack_require__(7);

	var _Line2 = _interopRequireDefault(_Line);

	var _FocusLineVert = __webpack_require__(6);

	var _FocusLineVert2 = _interopRequireDefault(_FocusLineVert);

	var _CasterianChart2 = __webpack_require__(3);

	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;

/***/ },
/* 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 _CasterianChart2 = __webpack_require__(3);

	var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

	var _Axis = __webpack_require__(4);

	var _Axis2 = _interopRequireDefault(_Axis);

	var _Line = __webpack_require__(7);

	var _Line2 = _interopRequireDefault(_Line);

	var _Area = __webpack_require__(5);

	var _Area2 = _interopRequireDefault(_Area);

	var _FocusLineVertMultiple = __webpack_require__(11);

	var _FocusLineVertMultiple2 = _interopRequireDefault(_FocusLineVertMultiple);

	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.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 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 = this.state.data;
	            this.xScale = xScale;

	            return _react2.default.createElement(
	                'svg',
	                { className: 'linked-multiple-chart', width: width, height: height, ref: 'chartArea' },
	                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]
	                                    }),
	                                    _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]
	                                    }),
	                                    _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 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 = this.state.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];
	            var xDomain = xDomain || _d2.default.extent(data, function (d) {
	                return x(d);
	            });
	            var 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);
	                });
	            });

	            var xScale = isTimeSeries ? _d2.default.scaleTime().domain(xDomain).range(xRange) : _d2.default.scaleLinear().domain(xDomain).range(xRange);
	            var yScales = y.map(function (_, i) {
	                return _d2.default.scaleLinear().domain(yDomains[i]).range(yRange);
	            });

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

	            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,
	                isTimeSeries: isTimeSeries
	            };
	        }
	    }]);

	    return LinkedMultipleChart;
	}(_CasterianChart3.default);

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

/***/ },
/* 11 */
/***/ 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;

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