Skip to content

Instantly share code, notes, and snippets.

@letrunghieu

letrunghieu/react-vist.js

Last active April 19, 2016 03:04
Download ZIP

Revisions

  1. letrunghieu revised this gist Apr 19, 2016. 1 changed file with 794 additions and 321 deletions.
    1,115 changes: 794 additions & 321 deletions react-vist.js
    View file
    Original file line number Diff line number Diff line change
    @@ -47,25 +47,30 @@ var ReactVis =

    'use strict';

    var _AreaChart = __webpack_require__(8);
    var _AreaChart = __webpack_require__(10);

    var _AreaChart2 = _interopRequireDefault(_AreaChart);

    var _LineChart = __webpack_require__(9);
    var _LineChart = __webpack_require__(11);

    var _LineChart2 = _interopRequireDefault(_LineChart);

    var _LinkedMultipleChart = __webpack_require__(10);
    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
    LinkedMultipleChart: _LinkedMultipleChart2.default,
    RealtiemLinkedMultipleChart: _RealtimeLinkedMultipleChart2.default
    }
    };

    @@ -109,6 +114,99 @@ var ReactVis =

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

    @@ -122,6 +220,8 @@ var ReactVis =
    initiated: false,
    focusIndex: -1
    };

    _this._cached = {};
    return _this;
    }

    @@ -225,7 +325,7 @@ var ReactVis =
    exports.default = CasterianChart;

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

    'use strict';
    @@ -234,6 +334,8 @@ var ReactVis =
    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);
    @@ -244,98 +346,33 @@ var ReactVis =

    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;
    var _moment = __webpack_require__(9);

    var _moment2 = _interopRequireDefault(_moment);

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

    return Axis;
    }(_react2.default.Component);
    var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

    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
    };
    var _Axis = __webpack_require__(3);

    exports.default = Axis;
    var _Axis2 = _interopRequireDefault(_Axis);

    /***/ },
    /* 5 */
    /***/ function(module, exports, __webpack_require__) {
    var _Line = __webpack_require__(8);

    'use strict';
    var _Line2 = _interopRequireDefault(_Line);

    Object.defineProperty(exports, "__esModule", {
    value: true
    });
    var _Area = __webpack_require__(6);

    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 _Area2 = _interopRequireDefault(_Area);

    var _react = __webpack_require__(1);
    var _FocusLineVertMultiple = __webpack_require__(13);

    var _react2 = _interopRequireDefault(_react);
    var _FocusLineVertMultiple2 = _interopRequireDefault(_FocusLineVertMultiple);

    var _d = __webpack_require__(2);
    var _deepDiff = __webpack_require__(15);

    var _d2 = _interopRequireDefault(_d);
    var _deepDiff2 = _interopRequireDefault(_deepDiff);

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

    @@ -345,70 +382,314 @@ var ReactVis =

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

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

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Area).apply(this, arguments));
    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(LinkedMultipleChart).call(this, props));

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

    _createClass(Area, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
    _createClass(LinkedMultipleChart, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate(nextProps) {
    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]));
    }
    });
    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: 'componentDidUpdate',
    value: function componentDidUpdate() {
    this.d3Node.data([this.props.data]).attr("d", this.d3Area);
    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() {
    return _react2.default.createElement(
    'g',
    { className: 'area', ref: 'chartArea' },
    _react2.default.createElement('path', { ref: 'area', fill: this.props.color })
    );
    }
    }]);
    var _parseProperties = this.parseProperties(this.props);

    return Area;
    }(_react2.default.Component);
    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;

    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

    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;

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

    'use strict';
    @@ -472,7 +753,7 @@ var ReactVis =
    exports.default = FocusLineVert;

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

    'use strict';
    @@ -491,6 +772,10 @@ var ReactVis =

    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"); } }
    @@ -499,13 +784,18 @@ var ReactVis =

    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() {
    function Line(props) {
    _classCallCheck(this, Line);

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

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

    _createClass(Line, [{
    @@ -519,14 +809,20 @@ var ReactVis =
    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.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() {
    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',
    @@ -535,16 +831,16 @@ var ReactVis =

    return _react2.default.createElement(
    'g',
    { className: 'line' },
    { 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 _react2.default.createElement('circle', { key: _this3.props.x(d), r: '3.5',
    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;
    });
    }()
    );
    @@ -565,7 +861,13 @@ var ReactVis =
    exports.default = Line;

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

    module.exports = moment;

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

    'use strict';
    @@ -586,19 +888,19 @@ var ReactVis =

    var _d2 = _interopRequireDefault(_d);

    var _Axis = __webpack_require__(4);
    var _Axis = __webpack_require__(3);

    var _Axis2 = _interopRequireDefault(_Axis);

    var _Area = __webpack_require__(5);
    var _Area = __webpack_require__(6);

    var _Area2 = _interopRequireDefault(_Area);

    var _FocusLineVert = __webpack_require__(6);
    var _FocusLineVert = __webpack_require__(7);

    var _FocusLineVert2 = _interopRequireDefault(_FocusLineVert);

    var _CasterianChart2 = __webpack_require__(3);
    var _CasterianChart2 = __webpack_require__(4);

    var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

    @@ -697,7 +999,7 @@ var ReactVis =
    exports.default = AreaChart;

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

    'use strict';
    @@ -718,19 +1020,19 @@ var ReactVis =

    var _d2 = _interopRequireDefault(_d);

    var _Axis = __webpack_require__(4);
    var _Axis = __webpack_require__(3);

    var _Axis2 = _interopRequireDefault(_Axis);

    var _Line = __webpack_require__(7);
    var _Line = __webpack_require__(8);

    var _Line2 = _interopRequireDefault(_Line);

    var _FocusLineVert = __webpack_require__(6);
    var _FocusLineVert = __webpack_require__(7);

    var _FocusLineVert2 = _interopRequireDefault(_FocusLineVert);

    var _CasterianChart2 = __webpack_require__(3);
    var _CasterianChart2 = __webpack_require__(4);

    var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

    @@ -843,7 +1145,7 @@ var ReactVis =
    exports.default = LineChart;

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

    'use strict';
    @@ -852,8 +1154,6 @@ var ReactVis =
    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);
    @@ -864,26 +1164,10 @@ var ReactVis =

    var _d2 = _interopRequireDefault(_d);

    var _CasterianChart2 = __webpack_require__(3);

    var _CasterianChart3 = _interopRequireDefault(_CasterianChart2);

    var _Axis = __webpack_require__(4);
    var _Axis = __webpack_require__(3);

    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"); } }
    @@ -892,183 +1176,71 @@ var ReactVis =

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

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

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

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

    _createClass(LinkedMultipleChart, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate(nextProps) {
    _createClass(Brush, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
    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;
    this.d3Brush = _d2.default.svg.brush().x(this.props.xScale).extent(this.props.initialExtent).on('brushend', function () {
    _this2.props.brushEnd(_this2.d3Brush.extent());
    });

    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.d3BrushSelection = _d2.default.select(this.refs.brush);

    this.setFocusIndex(index);
    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() {
    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;
    var _props = this.props;
    var width = _props.width;
    var height = _props.height;
    var backgroundColor = _props.backgroundColor;

    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
    })
    )
    { 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) + ')' })
    );
    }
    }, {
    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);
    return Brush;
    }(_react2.default.Component);

    LinkedMultipleChart.defaultProps = _extends({}, _CasterianChart3.default.defaultProps);
    exports.default = LinkedMultipleChart;
    Brush.defaultProps = {
    backgroundColor: '#eee',
    brushColor: '#474747',
    brushOpacity: 0.4
    };

    exports.default = Brush;

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

    'use strict';
    @@ -1137,5 +1309,306 @@ var ReactVis =

    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;

    /***/ }
    /******/ ]);
  2. letrunghieu created this gist Apr 13, 2016.
    1,141 changes: 1,141 additions & 0 deletions react-vist.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,1141 @@
    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;

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