@spider-analyzer/timeline 3.4.1 → 4.0.0

package/dist/TimeLine.js

@@ -1,104 +1,56 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _d3Scale = require("d3-scale");
-
 var _merge2 = _interopRequireDefault(require("lodash-es/merge"));
-
 var _round2 = _interopRequireDefault(require("lodash-es/round"));
-
 var _max2 = _interopRequireDefault(require("lodash-es/max"));
-
 var _floor2 = _interopRequireDefault(require("lodash-es/floor"));
-
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
-
 var _Cursor = _interopRequireDefault(require("./Cursor"));
-
 var _Histogram = _interopRequireDefault(require("./timeLineElements/Histogram"));
-
 var _XAxis = _interopRequireDefault(require("./timeLineElements/XAxis"));
-
 var _YAxis = _interopRequireDefault(require("./timeLineElements/YAxis"));
-
 var _Legend = _interopRequireDefault(require("./timeLineElements/Legend"));
-
 var _Tools = _interopRequireDefault(require("./timeLineElements/Tools"));
-
 var _HistoToolTip = _interopRequireDefault(require("./timeLineElements/HistoToolTip"));
-
 var _theme = _interopRequireWildcard(require("./theme"));
-
 var _QualityLine = _interopRequireDefault(require("./timeLineElements/QualityLine"));
-
 var _YGrid = _interopRequireDefault(require("./timeLineElements/YGrid"));
-
 var _XGrid = _interopRequireDefault(require("./timeLineElements/XGrid"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var marginDefault = {
   left: 50,
   right: 45,
@@ -111,55 +63,46 @@ var xAxisDefault = {
   barsBetweenTicks: 8
 };
 var defaultZoomOutFactor = 1.25;
-
 var TimeLine = /*#__PURE__*/function (_Component) {
   _inherits(TimeLine, _Component);
-
   var _super = _createSuper(TimeLine);
-
   function TimeLine(props) {
     var _this;
-
     _classCallCheck(this, TimeLine);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "shiftDomains", function (domains, _ref) {
       var min = _ref.min,
-          max = _ref.max;
+        max = _ref.max;
       //update domains if selection is outside domains
       var toUpdate = false;
       var biggestVisibleDomain = _this.props.biggestVisibleDomain;
       var newDomains = domains.map(function (domain, index) {
         if (min && min.isBefore(domain.min) || max && max.isAfter(domain.max)) {
           toUpdate = true;
-
           if (index === domains.length - 1) {
             //if last domain, increase domain
             var newDomain = {
               min: min && min.isBefore(domain.min) ? min : domain.min,
               max: max && max.isAfter(domain.max) ? max : domain.max
             };
-
-            if (biggestVisibleDomain && (0, _moment["default"])(newDomain.min).add(biggestVisibleDomain).isSameOrBefore(newDomain.max)) {
+            if (biggestVisibleDomain && (0, _momentTimezone["default"])(newDomain.min).add(biggestVisibleDomain).isSameOrBefore(newDomain.max)) {
               if (min.isBefore(domain.min)) {
-                newDomain.max = (0, _moment["default"])(min).add(biggestVisibleDomain);
+                newDomain.max = (0, _momentTimezone["default"])(min).add(biggestVisibleDomain);
               } else {
-                newDomain.min = (0, _moment["default"])(max).subtract(biggestVisibleDomain);
+                newDomain.min = (0, _momentTimezone["default"])(max).subtract(biggestVisibleDomain);
               }
             }
-
             return newDomain;
           } else {
             //if not last domain, shift domain
             if (min && min.isBefore(domain.min)) {
               return {
                 min: min,
-                max: (0, _moment["default"])(domain.max).subtract(domain.min.diff(min))
+                max: (0, _momentTimezone["default"])(domain.max).subtract(domain.min.diff(min))
               };
             } else {
               return {
-                min: (0, _moment["default"])(domain.min).add(max.diff(domain.max)),
+                min: (0, _momentTimezone["default"])(domain.min).add(max.diff(domain.max)),
                 max: max
               };
             }
@@ -170,27 +113,21 @@ var TimeLine = /*#__PURE__*/function (_Component) {
       });
       return toUpdate ? newDomains : domains;
     });
-
     _defineProperty(_assertThisInitialized(_this), "onResizeLeftCursor", function (delta, mouse) {
-      var newStart = (0, _moment["default"])(_this.xAxis.invert(_this.xAxis(_this.state.start) + delta));
+      var newStart = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.xAxis(_this.state.start) + delta));
       var newStop = _this.state.stop;
       var maxTimespan = false;
-
       if (newStart.isSameOrAfter(newStop)) {
-        newStop = (0, _moment["default"])(_this.xAxis.invert(_this.xAxis(newStop) + delta));
+        newStop = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.xAxis(newStop) + delta));
       }
-
       if (_this.props.biggestTimeSpan) {
-        var min = (0, _moment["default"])(newStop).subtract(_this.props.biggestTimeSpan);
-
+        var min = (0, _momentTimezone["default"])(newStop).subtract(_this.props.biggestTimeSpan);
         if (min.isSameOrAfter(newStart)) {
           newStart = min;
           maxTimespan = true;
         }
       }
-
       _this.handleAutoSliding(mouse, _this.onResizeLeftCursor);
-
       if (newStop !== _this.state.stop && newStop.isSameOrBefore(_this.state.domain.max) || newStart.isSameOrAfter(_this.state.domain.min)) {
         _this.setState({
           start: newStart,
@@ -199,27 +136,21 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onResizeRightCursor", function (delta, mouse) {
-      var newStop = (0, _moment["default"])(_this.xAxis.invert(_this.xAxis(_this.state.stop) + delta));
+      var newStop = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.xAxis(_this.state.stop) + delta));
       var newStart = _this.state.start;
       var maxTimespan = false;
-
       if (newStop.isSameOrBefore(newStart)) {
-        newStart = (0, _moment["default"])(_this.xAxis.invert(_this.xAxis(newStart) + delta));
+        newStart = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.xAxis(newStart) + delta));
       }
-
       if (_this.props.biggestTimeSpan) {
-        var max = (0, _moment["default"])(newStart).add(_this.props.biggestTimeSpan);
-
+        var max = (0, _momentTimezone["default"])(newStart).add(_this.props.biggestTimeSpan);
         if (max.isSameOrBefore(newStop)) {
           newStop = max;
           maxTimespan = true;
         }
       }
-
       _this.handleAutoSliding(mouse, _this.onResizeRightCursor);
-
       if (newStop.isSameOrBefore(_this.state.domain.max) && newStart.isSameOrAfter(_this.state.domain.min)) {
         _this.setState({
           start: newStart,
@@ -228,63 +159,47 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onDragCursor", function (delta, mouse) {
       _this.xAxis.clamp(false);
-
       var duration = _this.state.stop.diff(_this.state.start);
-
-      var newStart = (0, _moment["default"])(_this.xAxis.invert(_this.xAxis(_this.state.start) + delta));
-      var newStop = (0, _moment["default"])(newStart).add(duration, 'MILLISECONDS');
-
+      var newStart = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.xAxis(_this.state.start) + delta));
+      var newStop = (0, _momentTimezone["default"])(newStart).add(duration, 'MILLISECONDS');
       _this.xAxis.clamp(true);
-
       var maxDomain = _this.props.maxDomain;
-
       if (maxDomain.min && newStart.isBefore(maxDomain.min)) {
-        newStart = (0, _moment["default"])(maxDomain.min);
+        newStart = (0, _momentTimezone["default"])(maxDomain.min);
       }
-
       if (maxDomain.max && newStop.isAfter(maxDomain.max)) {
-        newStop = (0, _moment["default"])(maxDomain.max);
+        newStop = (0, _momentTimezone["default"])(maxDomain.max);
       }
-
       _this.handleAutoSliding(mouse, _this.onDragCursor);
-
       _this.setState({
         start: newStart,
         stop: newStop
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "onStartDrawCursor", function (pos) {
       _this.setState({
-        start: (0, _moment["default"])(_this.xAxis.invert(pos)),
-        stop: (0, _moment["default"])(_this.xAxis.invert(pos + 1)),
+        start: (0, _momentTimezone["default"])(_this.xAxis.invert(pos)),
+        stop: (0, _momentTimezone["default"])(_this.xAxis.invert(pos + 1)),
         maxTimespan: false
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "onDrawCursor", function (delta, mouse) {
-      var newStop = (0, _moment["default"])(_this.xAxis.invert(_this.xAxis(_this.state.stop) + delta));
+      var newStop = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.xAxis(_this.state.stop) + delta));
       var newStart = _this.state.start;
       var maxTimespan = false;
-
       if (newStop.isSameOrBefore(newStart)) {
-        newStart = (0, _moment["default"])(_this.xAxis.invert(_this.xAxis(newStart) + delta));
+        newStart = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.xAxis(newStart) + delta));
       }
-
       if (_this.props.biggestTimeSpan) {
-        var max = (0, _moment["default"])(newStart).add(_this.props.biggestTimeSpan);
-
+        var max = (0, _momentTimezone["default"])(newStart).add(_this.props.biggestTimeSpan);
         if (max.isSameOrBefore(newStop)) {
           newStop = max;
           maxTimespan = true;
         }
       }
-
       _this.handleAutoSliding(mouse, _this.onDrawCursor);
-
       if (newStop.isSameOrBefore(_this.state.domain.max) && newStart.isSameOrAfter(_this.state.domain.min)) {
         _this.setState({
           start: newStart,
@@ -293,62 +208,49 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "stopAutoMove", function () {
       if (_this.autoMove) {
         _this.setAutoMove(false);
       }
-
       if (_this.isAutoMoving) {
         _this.isAutoMoving = false;
-
         _this.movedTimeLine();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onEndDrawCursor", function () {
       _this.stopAutoMove();
-
       var _this$props = _this.props,
-          onCustomRange = _this$props.onCustomRange,
-          selectBarOnClick = _this$props.selectBarOnClick;
+        onCustomRange = _this$props.onCustomRange,
+        selectBarOnClick = _this$props.selectBarOnClick;
       var _this$state = _this.state,
-          start = _this$state.start,
-          stop = _this$state.stop,
-          barHovered = _this$state.barHovered;
-
+        start = _this$state.start,
+        stop = _this$state.stop,
+        barHovered = _this$state.barHovered;
       if (selectBarOnClick && _this.items && barHovered > -1) {
         var item = _this.items[barHovered];
-
         if (start.isSameOrAfter(item.start) && stop.isSameOrBefore(item.end)) {
-          start = (0, _moment["default"])(item.start);
-          stop = (0, _moment["default"])(item.end);
-
+          start = (0, _momentTimezone["default"])(item.start);
+          stop = (0, _momentTimezone["default"])(item.end);
           _this.setState({
             start: start,
             stop: stop
           });
         }
       }
-
       onCustomRange(start, stop);
     });
-
     _defineProperty(_assertThisInitialized(_this), "onEndChangeCursor", function () {
       _this.stopAutoMove();
-
       var onCustomRange = _this.props.onCustomRange;
       var _this$state2 = _this.state,
-          start = _this$state2.start,
-          stop = _this$state2.stop;
+        start = _this$state2.start,
+        stop = _this$state2.stop;
       onCustomRange(start, stop);
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleAutoSliding", function (mouse, action) {
       //slide domain when dragging and mouse out of histo
       if (mouse) {
         var posX = mouse[0];
-
         if (posX < 0) {
           _this.setAutoMove(true, action, posX);
         } else if (posX >= 0 && posX <= _this.state.histoWidth) {
@@ -358,7 +260,6 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         }
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "setAutoMove", function (active, action, delta) {
       if (active) {
         //prevent creating timer to often if mouse did not move so much
@@ -366,9 +267,7 @@ var TimeLine = /*#__PURE__*/function (_Component) {
           clearInterval(_this.autoMove);
           _this.autoMove = setInterval(function () {
             action(delta);
-
             _this.moveTimeLine(-delta);
-
             _this.isAutoMoving = true;
             _this.lastAutoMovingDelta = delta;
           }, 30);
@@ -378,21 +277,17 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         _this.autoMove = null;
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onWheel", function (event) {
       var _this$state3 = _this.state,
-          waitForLoad = _this$state3.waitForLoad,
-          maxZoom = _this$state3.maxZoom,
-          minZoom = _this$state3.minZoom;
+        waitForLoad = _this$state3.waitForLoad,
+        maxZoom = _this$state3.maxZoom,
+        minZoom = _this$state3.minZoom;
       var _this$props2 = _this.props,
-          onShowMessage = _this$props2.onShowMessage,
-          domains = _this$props2.domains;
+        onShowMessage = _this$props2.onShowMessage,
+        domains = _this$props2.domains;
       event.stopPropagation();
-
       var baseX = _this.timelineElement.current.getBoundingClientRect().left;
-
       var x = event.clientX - baseX - _this.state.margin.left;
-
       if (!waitForLoad) {
         if (event.deltaY < -50) {
           if (maxZoom) {
@@ -411,74 +306,56 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         }
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onGotoCursor", function () {
-      var middle = (0, _moment["default"])(_this.state.start).add(_this.state.stop.diff(_this.state.start) / 2);
-
+      var middle = (0, _momentTimezone["default"])(_this.state.start).add(_this.state.stop.diff(_this.state.start) / 2);
       _this.xAxis.clamp(false);
-
       var currentX = _this.state.histoWidth / 2;
-
       var newX = _this.xAxis(middle);
-
       var newDomain = _this.moveTimeLineCore(currentX - newX);
+      var domains = _toConsumableArray(_this.props.domains);
+      //Replace current domain
+      domains.splice(0, 1, newDomain);
 
-      var domains = _toConsumableArray(_this.props.domains); //Replace current domain
-
-
-      domains.splice(0, 1, newDomain); //Check if other domains should shift
-
+      //Check if other domains should shift
       var newDomains = _this.shiftDomains(domains, newDomain);
-
       _this.props.onUpdateDomains(newDomains);
-
       _this.xAxis.clamp(true);
     });
-
     _defineProperty(_assertThisInitialized(_this), "onGoto", function (d) {
       var halfTimeAgg = _this.state.stop.diff(_this.state.start) / 2;
-      var when = d || (0, _moment["default"])();
-      var newStop = (0, _moment["default"])(when).add(halfTimeAgg);
-      var newStart = (0, _moment["default"])(when).subtract(halfTimeAgg);
-
+      var when = d || (0, _momentTimezone["default"])();
+      var newStop = (0, _momentTimezone["default"])(when).add(halfTimeAgg);
+      var newStart = (0, _momentTimezone["default"])(when).subtract(halfTimeAgg);
       _this.props.onCustomRange(newStart, newStop);
     });
-
     _defineProperty(_assertThisInitialized(_this), "zoomOnTarget", function (x) {
       var _this$xAxis$domain = _this.xAxis.domain(),
-          _this$xAxis$domain2 = _slicedToArray(_this$xAxis$domain, 2),
-          minOrigin = _this$xAxis$domain2[0],
-          maxOrigin = _this$xAxis$domain2[1];
-
-      var target = (0, _moment["default"])(_this.xAxis.invert(x));
-      var min = (0, _moment["default"])(target).subtract(0.25 * target.diff((0, _moment["default"])(minOrigin)));
-      var max = (0, _moment["default"])(target).add(0.25 * (0, _moment["default"])(maxOrigin).diff(target));
-
+        _this$xAxis$domain2 = _slicedToArray(_this$xAxis$domain, 2),
+        minOrigin = _this$xAxis$domain2[0],
+        maxOrigin = _this$xAxis$domain2[1];
+      var target = (0, _momentTimezone["default"])(_this.xAxis.invert(x));
+      var min = (0, _momentTimezone["default"])(target).subtract(0.25 * target.diff((0, _momentTimezone["default"])(minOrigin)));
+      var max = (0, _momentTimezone["default"])(target).add(0.25 * (0, _momentTimezone["default"])(maxOrigin).diff(target));
       _this.zoomOnDomain({
         min: min,
         max: max
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "zoomOutOfTarget", function (x) {
       var _this$xAxis$domain3 = _this.xAxis.domain(),
-          _this$xAxis$domain4 = _slicedToArray(_this$xAxis$domain3, 2),
-          minOrigin = _this$xAxis$domain4[0],
-          maxOrigin = _this$xAxis$domain4[1];
-
-      var target = (0, _moment["default"])(_this.xAxis.invert(x));
-      var min = (0, _moment["default"])(target).subtract(1.25 * target.diff((0, _moment["default"])(minOrigin)));
-      var max = (0, _moment["default"])(target).add(1.25 * (0, _moment["default"])(maxOrigin).diff(target));
-
+        _this$xAxis$domain4 = _slicedToArray(_this$xAxis$domain3, 2),
+        minOrigin = _this$xAxis$domain4[0],
+        maxOrigin = _this$xAxis$domain4[1];
+      var target = (0, _momentTimezone["default"])(_this.xAxis.invert(x));
+      var min = (0, _momentTimezone["default"])(target).subtract(1.25 * target.diff((0, _momentTimezone["default"])(minOrigin)));
+      var max = (0, _momentTimezone["default"])(target).add(1.25 * (0, _momentTimezone["default"])(maxOrigin).diff(target));
       _this.zoomOutTo([{
         min: min,
         max: max
       }]);
     });
-
     _defineProperty(_assertThisInitialized(_this), "checkAndCorrectDomain", function (_ref2) {
       var domain = _ref2.domain;
-
       if (!domain) {
         return {
           domain: domain,
@@ -487,50 +364,43 @@ var TimeLine = /*#__PURE__*/function (_Component) {
           domainHasChanged: false
         };
       }
-
       var newDomain = _objectSpread({}, domain);
-
       var _this$props3 = _this.props,
-          biggestVisibleDomain = _this$props3.biggestVisibleDomain,
-          maxDomain = _this$props3.maxDomain,
-          smallestResolution = _this$props3.smallestResolution;
+        biggestVisibleDomain = _this$props3.biggestVisibleDomain,
+        maxDomain = _this$props3.maxDomain,
+        smallestResolution = _this$props3.smallestResolution;
       var histoWidth = _this.state.histoWidth;
-      var domainHasChanged = false; //Maximum zoom?
+      var domainHasChanged = false;
 
+      //Maximum zoom?
       var duration = newDomain.max.diff(newDomain.min);
-      var maxZoom = false; //We stop/recap zoom in when 15px = 1min
+      var maxZoom = false;
 
+      //We stop/recap zoom in when 15px = 1min
       var minRes = smallestResolution.asMilliseconds();
-
       if (duration <= histoWidth * minRes / 15) {
         maxZoom = true;
-        newDomain.max = (0, _moment["default"])(newDomain.min).add(histoWidth * minRes / 15, 'ms');
-      } //Minimum zoom?
-
+        newDomain.max = (0, _momentTimezone["default"])(newDomain.min).add(histoWidth * minRes / 15, 'ms');
+      }
 
+      //Minimum zoom?
       var minTime, maxTime;
-
       if (maxDomain.min && newDomain.min.isBefore(maxDomain.min)) {
-        newDomain.min = (0, _moment["default"])(maxDomain.min);
+        newDomain.min = (0, _momentTimezone["default"])(maxDomain.min);
         minTime = true;
       }
-
       if (maxDomain.max && newDomain.max.isAfter(maxDomain.max)) {
-        newDomain.max = (0, _moment["default"])(maxDomain.max);
+        newDomain.max = (0, _momentTimezone["default"])(maxDomain.max);
         maxTime = true;
       }
-
       var minZoom = false;
-
-      if (biggestVisibleDomain && newDomain.max.isSameOrAfter((0, _moment["default"])(newDomain.min).add(biggestVisibleDomain))) {
+      if (biggestVisibleDomain && newDomain.max.isSameOrAfter((0, _momentTimezone["default"])(newDomain.min).add(biggestVisibleDomain))) {
         minZoom = true;
-        newDomain.min = (0, _moment["default"])(newDomain.max).subtract(biggestVisibleDomain);
+        newDomain.min = (0, _momentTimezone["default"])(newDomain.max).subtract(biggestVisibleDomain);
       }
-
       if (!(newDomain.min.isSame(domain.min) && newDomain.max.isSame(domain.max))) {
         domainHasChanged = true;
       }
-
       return {
         domain: domainHasChanged ? newDomain : domain,
         maxZoom: maxZoom,
@@ -540,85 +410,68 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         domainHasChanged: domainHasChanged
       };
     });
-
     _defineProperty(_assertThisInitialized(_this), "zoomOnDomain", function (targetDomain) {
       var _this$props4 = _this.props,
-          onShowMessage = _this$props4.onShowMessage,
-          onUpdateDomains = _this$props4.onUpdateDomains;
-
+        onShowMessage = _this$props4.onShowMessage,
+        onUpdateDomains = _this$props4.onUpdateDomains;
       if (!_this.state.waitForLoad) {
         if (!(targetDomain.min.isSame(_this.state.domain.min) && targetDomain.max.isSame(_this.state.domain.max))) {
           var _this$checkAndCorrect = _this.checkAndCorrectDomain({
-            domain: targetDomain
-          }),
-              maxZoom = _this$checkAndCorrect.maxZoom,
-              domain = _this$checkAndCorrect.domain;
-
+              domain: targetDomain
+            }),
+            maxZoom = _this$checkAndCorrect.maxZoom,
+            domain = _this$checkAndCorrect.domain;
           var currentMaxZoom = _this.state.maxZoom;
-
           if (maxZoom && maxZoom !== currentMaxZoom) {
             onShowMessage(_this.labels.zoomSelectionResolutionExtended);
           }
-
           var domains = [domain].concat(_toConsumableArray(_this.props.domains));
-
           _this.setState({
             maxZoom: maxZoom,
             minZoom: false,
             domain: domain
           });
-
           onUpdateDomains(domains);
         } else {
           onShowMessage(_this.labels.zoomInWithoutChangingSelectionMsg);
         }
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "zoomOutTo", function (domains) {
       var _this$checkAndCorrect2 = _this.checkAndCorrectDomain({
-        domain: domains[0]
-      }),
-          minZoom = _this$checkAndCorrect2.minZoom,
-          domain = _this$checkAndCorrect2.domain,
-          domainHasChanged = _this$checkAndCorrect2.domainHasChanged,
-          maxTime = _this$checkAndCorrect2.maxTime,
-          minTime = _this$checkAndCorrect2.minTime;
-
+          domain: domains[0]
+        }),
+        minZoom = _this$checkAndCorrect2.minZoom,
+        domain = _this$checkAndCorrect2.domain,
+        domainHasChanged = _this$checkAndCorrect2.domainHasChanged,
+        maxTime = _this$checkAndCorrect2.maxTime,
+        minTime = _this$checkAndCorrect2.minTime;
       var _this$props5 = _this.props,
-          onShowMessage = _this$props5.onShowMessage,
-          onUpdateDomains = _this$props5.onUpdateDomains;
-
+        onShowMessage = _this$props5.onShowMessage,
+        onUpdateDomains = _this$props5.onUpdateDomains;
       if (minZoom) {
         onShowMessage(_this.labels.minZoomMsg);
       }
-
       if (minTime) {
         onShowMessage(_this.labels.minDomainMsg);
       }
-
       if (maxTime) {
         onShowMessage(_this.labels.maxDomainMsg);
       }
-
       var newDomains = domainHasChanged ? [domain].concat(_toConsumableArray(_this.props.domains.slice(1))) : domains;
-
       _this.setState({
         maxZoom: false,
         minZoom: minZoom,
         domain: domain
       });
-
       onUpdateDomains(newDomains);
     });
-
     _defineProperty(_assertThisInitialized(_this), "zoomIn", function () {
       var _this$state4 = _this.state,
-          maxZoom = _this$state4.maxZoom,
-          start = _this$state4.start,
-          stop = _this$state4.stop;
+        maxZoom = _this$state4.maxZoom,
+        start = _this$state4.start,
+        stop = _this$state4.stop;
       var onShowMessage = _this.props.onShowMessage;
-
       if (!maxZoom) {
         _this.zoomOnDomain({
           min: start,
@@ -628,47 +481,40 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         onShowMessage(_this.labels.doubleClickMaxZoomMsg);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "zoomOut", function () {
       if (!_this.state.waitForLoad && !_this.state.minZoom) {
         var domains = _toConsumableArray(_this.props.domains);
-
         var zoomOutFactor = _this.props.zoomOutFactor;
-
         if (domains.length > 1) {
           domains.shift();
         } else {
           var _this$xAxis$domain5 = _this.xAxis.domain(),
-              _this$xAxis$domain6 = _slicedToArray(_this$xAxis$domain5, 2),
-              minOrigin = _this$xAxis$domain6[0],
-              maxOrigin = _this$xAxis$domain6[1];
-
-          var halfDuration = (0, _moment["default"])(maxOrigin).diff((0, _moment["default"])(minOrigin)) / 2;
-          var target = (0, _moment["default"])(minOrigin).add(halfDuration);
-          var min = (0, _moment["default"])(target).subtract(zoomOutFactor * halfDuration);
-          var max = (0, _moment["default"])(target).add(zoomOutFactor * halfDuration);
+            _this$xAxis$domain6 = _slicedToArray(_this$xAxis$domain5, 2),
+            minOrigin = _this$xAxis$domain6[0],
+            maxOrigin = _this$xAxis$domain6[1];
+          var halfDuration = (0, _momentTimezone["default"])(maxOrigin).diff((0, _momentTimezone["default"])(minOrigin)) / 2;
+          var target = (0, _momentTimezone["default"])(minOrigin).add(halfDuration);
+          var min = (0, _momentTimezone["default"])(target).subtract(zoomOutFactor * halfDuration);
+          var max = (0, _momentTimezone["default"])(target).add(zoomOutFactor * halfDuration);
           domains[0] = {
             min: min,
             max: max
           };
         }
-
         _this.zoomOutTo(domains);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "moveTimeLineCore", function (delta) {
       var _this$props6 = _this.props,
-          maxDomain = _this$props6.maxDomain,
-          onShowMessage = _this$props6.onShowMessage;
+        maxDomain = _this$props6.maxDomain,
+        onShowMessage = _this$props6.onShowMessage;
       var _this$state5 = _this.state,
-          currentDomain = _this$state5.domain,
-          _this$state5$minTime = _this$state5.minTime,
-          minTime = _this$state5$minTime === void 0 ? false : _this$state5$minTime,
-          _this$state5$maxTime = _this$state5.maxTime,
-          maxTime = _this$state5$maxTime === void 0 ? false : _this$state5$maxTime;
+        currentDomain = _this$state5.domain,
+        _this$state5$minTime = _this$state5.minTime,
+        minTime = _this$state5$minTime === void 0 ? false : _this$state5$minTime,
+        _this$state5$maxTime = _this$state5.maxTime,
+        maxTime = _this$state5$maxTime === void 0 ? false : _this$state5$maxTime;
       var currentSpan = currentDomain.max.diff(currentDomain.min);
-
       if (minTime && delta > 0 || maxTime && delta < 0) {
         return _objectSpread(_objectSpread({}, currentDomain), {}, {
           moved: 0,
@@ -676,26 +522,23 @@ var TimeLine = /*#__PURE__*/function (_Component) {
           maxTime: maxTime
         });
       } else {
-        var min = (0, _moment["default"])(_this.xAxis.invert(-delta));
-        var max = (0, _moment["default"])(_this.xAxis.invert(_this.state.histoWidth - delta));
+        var min = (0, _momentTimezone["default"])(_this.xAxis.invert(-delta));
+        var max = (0, _momentTimezone["default"])(_this.xAxis.invert(_this.state.histoWidth - delta));
         var moved = delta;
-
         if (maxDomain.min && min.isBefore(maxDomain.min)) {
           moved = _this.xAxis(maxDomain.min);
-          min = (0, _moment["default"])(maxDomain.min);
-          max = (0, _moment["default"])(min).add(currentSpan);
+          min = (0, _momentTimezone["default"])(maxDomain.min);
+          max = (0, _momentTimezone["default"])(min).add(currentSpan);
           minTime = true;
           onShowMessage(_this.labels.minDomainMsg);
         }
-
         if (maxDomain.max && max.isAfter(maxDomain.max)) {
           moved = _this.xAxis(maxDomain.max);
-          max = (0, _moment["default"])(maxDomain.max);
-          min = (0, _moment["default"])(max).subtract(currentSpan);
+          max = (0, _momentTimezone["default"])(maxDomain.max);
+          min = (0, _momentTimezone["default"])(max).subtract(currentSpan);
           maxTime = true;
           onShowMessage(_this.labels.maxDomainMsg);
         }
-
         return {
           min: min,
           max: max,
@@ -705,35 +548,26 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         };
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "moveTimeLine", function (delta) {
       _this.xAxis.clamp(false);
-
       var _this$moveTimeLineCor = _this.moveTimeLineCore(delta),
-          min = _this$moveTimeLineCor.min,
-          max = _this$moveTimeLineCor.max,
-          moved = _this$moveTimeLineCor.moved,
-          minTime = _this$moveTimeLineCor.minTime,
-          maxTime = _this$moveTimeLineCor.maxTime;
-
+        min = _this$moveTimeLineCor.min,
+        max = _this$moveTimeLineCor.max,
+        moved = _this$moveTimeLineCor.moved,
+        minTime = _this$moveTimeLineCor.minTime,
+        maxTime = _this$moveTimeLineCor.maxTime;
       if (moved !== 0) {
         _this.xAxis.domain([min, max]);
-
         _this.xAxis.clamp(true);
-
         var ticks = _this.xAxis.ticks((0, _floor2["default"])(_this.state.histoWidth / _this.props.xAxis.spaceBetweenTicks));
-
         _this.movedSinceLastFetched += moved;
-
         if (Math.abs(_this.movedSinceLastFetched) > 75 && _this.props.fetchWhileSliding) {
           _this.movedSinceLastFetched = 0;
-
           _this.getItems(_this.props, {
             min: min,
             max: max
           });
         }
-
         _this.setState({
           domain: {
             min: min,
@@ -745,39 +579,34 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         });
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "movedTimeLine", function () {
       _this.movedSinceLastFetched = 0;
       var domain = _this.state.domain;
       var _this$props7 = _this.props,
-          originalDomains = _this$props7.domains,
-          onUpdateDomains = _this$props7.onUpdateDomains; //Replace current domain
+        originalDomains = _this$props7.domains,
+        onUpdateDomains = _this$props7.onUpdateDomains;
 
-      var domains = [domain].concat(_toConsumableArray(originalDomains.slice(1))); //Check if other domains should shift
+      //Replace current domain
+      var domains = [domain].concat(_toConsumableArray(originalDomains.slice(1)));
 
+      //Check if other domains should shift
       var newDomains = _this.shiftDomains(domains, domain);
-
       onUpdateDomains(newDomains);
     });
-
     _defineProperty(_assertThisInitialized(_this), "shiftTimeLine", function (delta) {
       var incr = delta / Math.abs(delta) * 8;
       var i = 0;
-
       function step() {
         this.moveTimeLine(incr);
         i += 8;
-
         if (i < Math.abs(delta)) {
           setTimeout(step.bind(this), 10);
         } else {
           this.movedTimeLine();
         }
       }
-
       step.bind(_assertThisInitialized(_this))();
     });
-
     _this.labels = (0, _merge2["default"])(_theme.defaultLabels, props.labels);
     _this.xAxis = null; //time axis computation function
 
@@ -797,15 +626,15 @@ var TimeLine = /*#__PURE__*/function (_Component) {
       domain: props.domains[0]
     }));
     _this.widthOfLastUpdate = null;
-    _this.timelineElement = /*#__PURE__*/_react["default"].createRef(); //manage auto sliding
+    _this.timelineElement = /*#__PURE__*/_react["default"].createRef();
 
+    //manage auto sliding
     _this.autoMove = null;
     _this.isAutoMoving = false;
     _this.lastAutoMovingDelta = 0;
     _this.movedSinceLastFetched = 0;
     return _this;
   }
-
   _createClass(TimeLine, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -814,7 +643,6 @@ var TimeLine = /*#__PURE__*/function (_Component) {
       } else {
         this.props.onLoadDefaultDomain();
       }
-
       this.computeMarginAndWidth(this.props);
     }
   }, {
@@ -823,9 +651,9 @@ var TimeLine = /*#__PURE__*/function (_Component) {
       //reached max selection
       if (!prevState.maxTimespan && this.state.maxTimespan) {
         this.props.onShowMessage(this.labels.maxSelectionMsg);
-      } //Change of width (big): update item
-
+      }
 
+      //Change of width (big): update item
       if (prevProps.width !== this.props.width || !(0, _isEqual["default"])(prevProps.margin, this.props.margin)) {
         if (this.state.isActive) {
           this.getItems(this.props, this.state.domain, this.widthOfLastUpdate && Math.abs(this.props.width - this.widthOfLastUpdate) > 30);
@@ -833,18 +661,16 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         } else {
           this.setState(this.computeMarginAndWidth(this.props));
         }
-
         if (this.state.domain) {
           var _this$checkAndCorrect3 = this.checkAndCorrectDomain({
-            domain: this.state.domain
-          }),
-              maxZoom = _this$checkAndCorrect3.maxZoom,
-              minZoom = _this$checkAndCorrect3.minZoom,
-              domain = _this$checkAndCorrect3.domain,
-              domainHasChanged = _this$checkAndCorrect3.domainHasChanged,
-              minTime = _this$checkAndCorrect3.minTime,
-              maxTime = _this$checkAndCorrect3.maxTime;
-
+              domain: this.state.domain
+            }),
+            maxZoom = _this$checkAndCorrect3.maxZoom,
+            minZoom = _this$checkAndCorrect3.minZoom,
+            domain = _this$checkAndCorrect3.domain,
+            domainHasChanged = _this$checkAndCorrect3.domainHasChanged,
+            minTime = _this$checkAndCorrect3.minTime,
+            maxTime = _this$checkAndCorrect3.maxTime;
           if (maxZoom !== this.state.maxZoom || minZoom !== this.state.minZoom) {
             this.setState({
               maxZoom: maxZoom,
@@ -853,72 +679,69 @@ var TimeLine = /*#__PURE__*/function (_Component) {
               maxTime: maxTime,
               domain: domainHasChanged ? domain : this.state.domain
             });
-
             if (domainHasChanged) {
               var domains = [domain].concat(_toConsumableArray(this.props.domains.slice(1)));
               this.props.onUpdateDomains(domains);
             }
           }
         }
-      } //If selection changed
-
+      }
 
+      //If selection changed
       if (!prevProps.timeSpan.start.isSame(this.props.timeSpan.start) || !prevProps.timeSpan.stop.isSame(this.props.timeSpan.stop)) {
         var newDomains = this.shiftDomains(this.props.domains, {
           min: this.props.timeSpan.start,
           max: this.props.timeSpan.stop
         });
-
         if (newDomains !== this.props.domains) {
           this.props.onUpdateDomains(newDomains);
-        } //Update cursor
-
+        }
 
+        //Update cursor
         this.setState({
           start: this.props.timeSpan.start,
           stop: this.props.timeSpan.stop
         });
-      } //If change in current domain, update items and state
-
+      }
 
+      //If change in current domain, update items and state
       if (!prevProps.domains[0] && this.props.domains[0] || prevProps.domains[0] && (!prevProps.domains[0].min.isSame(this.props.domains[0].min) || !prevProps.domains[0].max.isSame(this.props.domains[0].max))) {
         //If current zoom changes and is changing min/max zoom attribute
         //then update min/maxZoom and crop domain
         var _this$checkAndCorrect4 = this.checkAndCorrectDomain({
-          domain: this.props.domains[0]
-        }),
-            _maxZoom = _this$checkAndCorrect4.maxZoom,
-            _minZoom = _this$checkAndCorrect4.minZoom,
-            _domain = _this$checkAndCorrect4.domain,
-            _domainHasChanged = _this$checkAndCorrect4.domainHasChanged,
-            _minTime = _this$checkAndCorrect4.minTime,
-            _maxTime = _this$checkAndCorrect4.maxTime;
-
+            domain: this.props.domains[0]
+          }),
+          _maxZoom = _this$checkAndCorrect4.maxZoom,
+          _minZoom = _this$checkAndCorrect4.minZoom,
+          _domain = _this$checkAndCorrect4.domain,
+          _domainHasChanged = _this$checkAndCorrect4.domainHasChanged,
+          _minTime = _this$checkAndCorrect4.minTime,
+          _maxTime = _this$checkAndCorrect4.maxTime;
         this.setState({
           maxZoom: _maxZoom,
           minZoom: _minZoom,
           minTime: _minTime,
           maxTime: _maxTime,
           domain: _domain
-        }); //if domain changed, update domain, and getItems will be done later
+        });
 
+        //if domain changed, update domain, and getItems will be done later
         if (_domainHasChanged) {
           var _domains = [_domain].concat(_toConsumableArray(this.props.domains.slice(1)));
-
           this.props.onUpdateDomains(_domains);
         } else {
           this.getItems(this.props, _domain);
         }
-      } //If we got new histo change indicator
-
+      }
 
+      //If we got new histo change indicator
       if (prevProps.histo !== this.props.histo) {
         this.setState({
           waitForLoad: false
         });
-      } //Recompute margin on legend change
-
+      }
 
+      //Recompute margin on legend change
       if (prevProps.metricsDefinition.legends !== this.props.metricsDefinition.legends) {
         this.computeMarginAndWidth(this.props);
       }
@@ -927,20 +750,17 @@ var TimeLine = /*#__PURE__*/function (_Component) {
     key: "computeMarginAndWidth",
     value: function computeMarginAndWidth(props) {
       var _this$props8 = this.props,
-          margin = _this$props8.margin,
-          showLegend = _this$props8.showLegend,
-          metricsDefinition = _this$props8.metricsDefinition,
-          width = _this$props8.width;
-
+        margin = _this$props8.margin,
+        showLegend = _this$props8.showLegend,
+        metricsDefinition = _this$props8.metricsDefinition,
+        width = _this$props8.width;
       var localMargin = _objectSpread(_objectSpread({}, marginDefault), margin);
-
       if (showLegend) {
         var maxLength = (0, _max2["default"])(metricsDefinition.legends.map(function (s) {
           return s.length;
         }));
         localMargin.left = (0, _max2["default"])([5 + maxLength * 9, localMargin.left]);
       }
-
       return {
         margin: localMargin,
         histoWidth: width - localMargin.left - localMargin.right
@@ -954,13 +774,12 @@ var TimeLine = /*#__PURE__*/function (_Component) {
       this.xAxis = (0, _d3Scale.scaleTime)().domain([domain.min, domain.max]).range([0, histoWidth]);
       this.xAxis.clamp(true);
       var ticks = this.xAxis.ticks((0, _floor2["default"])(histoWidth / props.xAxis.spaceBetweenTicks));
-      var intervalMs = (0, _max2["default"])([(0, _round2["default"])((0, _moment["default"])(ticks[1]).diff((0, _moment["default"])(ticks[0])) / props.xAxis.barsBetweenTicks), this.props.smallestResolution.asMilliseconds()]);
+      var intervalMs = (0, _max2["default"])([(0, _round2["default"])((0, _momentTimezone["default"])(ticks[1]).diff((0, _momentTimezone["default"])(ticks[0])) / props.xAxis.barsBetweenTicks), this.props.smallestResolution.asMilliseconds()]);
       this.setState({
         histoWidth: histoWidth,
         isActive: true,
         ticks: ticks
       });
-
       if (shouldReload && intervalMs) {
         this.widthOfLastUpdate = props.width;
         this.setState({
@@ -973,13 +792,14 @@ var TimeLine = /*#__PURE__*/function (_Component) {
     key: "prepareVerticalScale",
     value: function prepareVerticalScale(_ref3) {
       var yAxis = _ref3.yAxis,
-          xAxis = _ref3.xAxis,
-          height = _ref3.height,
-          histo = _ref3.histo,
-          margin = _ref3.margin;
+        xAxis = _ref3.xAxis,
+        height = _ref3.height,
+        histo = _ref3.histo,
+        margin = _ref3.margin;
       var items = histo && histo.items;
-      var maxHeight = height - margin.bottom - margin.top - (xAxis.height || xAxisDefault.height); //Y Axis computation
+      var maxHeight = height - margin.bottom - margin.top - (xAxis.height || xAxisDefault.height);
 
+      //Y Axis computation
       var maxScale = items ? (0, _max2["default"])(items.map(function (i) {
         return i.total;
       })) || 0 : 0;
@@ -995,19 +815,17 @@ var TimeLine = /*#__PURE__*/function (_Component) {
     key: "prepareHistogram",
     value: function prepareHistogram(_ref4) {
       var _this2 = this;
-
       var histo = _ref4.histo,
-          domain = _ref4.domain,
-          verticalScale = _ref4.verticalScale;
-
+        domain = _ref4.domain,
+        verticalScale = _ref4.verticalScale;
       if (histo && histo.items && domain) {
         var min = domain.min,
-            max = domain.max;
+          max = domain.max;
         return histo.items.filter(function (item) {
           return item.total > 0 && item.time.isSameOrAfter(min) && item.time.isBefore(max);
         }).map(function (item) {
-          var start = (0, _moment["default"])(item.time);
-          var end = (0, _moment["default"])(item.time).add(histo.intervalMs);
+          var start = (0, _momentTimezone["default"])(item.time);
+          var end = (0, _momentTimezone["default"])(item.time).add(histo.intervalMs);
           return {
             x1: _this2.xAxis(start),
             x2: _this2.xAxis(end),
@@ -1026,40 +844,39 @@ var TimeLine = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-
       var _this$props9 = this.props,
-          width = _this$props9.width,
-          height = _this$props9.height,
-          histo = _this$props9.histo,
-          tools = _this$props9.tools,
-          quality = _this$props9.quality,
-          qualityScale = _this$props9.qualityScale,
-          metricsDefinition = _this$props9.metricsDefinition,
-          classes = _this$props9.classes,
-          rcToolTipPrefixCls = _this$props9.rcToolTipPrefixCls,
-          showLegend = _this$props9.showLegend,
-          onFormatTimeLegend = _this$props9.onFormatTimeLegend,
-          onFormatMetricLegend = _this$props9.onFormatMetricLegend,
-          onResetTime = _this$props9.onResetTime,
-          onFormatTimeToolTips = _this$props9.onFormatTimeToolTips,
-          xAxis = _this$props9.xAxis,
-          yAxis = _this$props9.yAxis,
-          showHistoToolTip = _this$props9.showHistoToolTip,
-          HistoToolTip = _this$props9.HistoToolTip;
+        width = _this$props9.width,
+        height = _this$props9.height,
+        histo = _this$props9.histo,
+        tools = _this$props9.tools,
+        quality = _this$props9.quality,
+        qualityScale = _this$props9.qualityScale,
+        metricsDefinition = _this$props9.metricsDefinition,
+        classes = _this$props9.classes,
+        rcToolTipPrefixCls = _this$props9.rcToolTipPrefixCls,
+        showLegend = _this$props9.showLegend,
+        onFormatTimeLegend = _this$props9.onFormatTimeLegend,
+        onFormatMetricLegend = _this$props9.onFormatMetricLegend,
+        onResetTime = _this$props9.onResetTime,
+        onFormatTimeToolTips = _this$props9.onFormatTimeToolTips,
+        xAxis = _this$props9.xAxis,
+        yAxis = _this$props9.yAxis,
+        showHistoToolTip = _this$props9.showHistoToolTip,
+        HistoToolTip = _this$props9.HistoToolTip;
       var _this$state6 = this.state,
-          isActive = _this$state6.isActive,
-          domain = _this$state6.domain,
-          histoWidth = _this$state6.histoWidth,
-          margin = _this$state6.margin,
-          start = _this$state6.start,
-          stop = _this$state6.stop,
-          maxZoom = _this$state6.maxZoom,
-          minZoom = _this$state6.minZoom,
-          maxTimespan = _this$state6.maxTimespan,
-          barHovered = _this$state6.barHovered,
-          tooltipVisible = _this$state6.tooltipVisible,
-          ticks = _this$state6.ticks,
-          dragging = _this$state6.dragging;
+        isActive = _this$state6.isActive,
+        domain = _this$state6.domain,
+        histoWidth = _this$state6.histoWidth,
+        margin = _this$state6.margin,
+        start = _this$state6.start,
+        stop = _this$state6.stop,
+        maxZoom = _this$state6.maxZoom,
+        minZoom = _this$state6.minZoom,
+        maxTimespan = _this$state6.maxTimespan,
+        barHovered = _this$state6.barHovered,
+        tooltipVisible = _this$state6.tooltipVisible,
+        ticks = _this$state6.ticks,
+        dragging = _this$state6.dragging;
       var xAxisHeight = xAxis.height || xAxisDefault.height;
       var pointZero = {
         x: 0,
@@ -1069,18 +886,16 @@ var TimeLine = /*#__PURE__*/function (_Component) {
         x: 0,
         y: margin.top - 5
       };
-
       var _this$prepareVertical = this.prepareVerticalScale({
-        yAxis: yAxis,
-        xAxis: xAxis,
-        height: height,
-        histo: histo,
-        margin: margin
-      }),
-          verticalScale = _this$prepareVertical.verticalScale,
-          verticalMarks = _this$prepareVertical.verticalMarks,
-          maxHeight = _this$prepareVertical.maxHeight;
-
+          yAxis: yAxis,
+          xAxis: xAxis,
+          height: height,
+          histo: histo,
+          margin: margin
+        }),
+        verticalScale = _this$prepareVertical.verticalScale,
+        verticalMarks = _this$prepareVertical.verticalMarks,
+        maxHeight = _this$prepareVertical.maxHeight;
       var items = this.prepareHistogram({
         histo: histo,
         domain: domain,
@@ -1225,34 +1040,31 @@ var TimeLine = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-
   return TimeLine;
 }(_react.Component);
-
 exports["default"] = TimeLine;
-
 _defineProperty(TimeLine, "propTypes", {
   className: _propTypes["default"].string,
   classes: _propTypes["default"].object,
   rcToolTipPrefixCls: _propTypes["default"].string,
   timeSpan: _propTypes["default"].shape({
-    start: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
-    stop: _propTypes["default"].instanceOf(_moment["default"]).isRequired
+    start: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
+    stop: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired
   }).isRequired,
   domains: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    min: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
-    max: _propTypes["default"].instanceOf(_moment["default"]).isRequired
+    min: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
+    max: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired
   })).isRequired,
   maxDomain: _propTypes["default"].shape({
-    min: _propTypes["default"].instanceOf(_moment["default"]),
-    max: _propTypes["default"].instanceOf(_moment["default"])
+    min: _propTypes["default"].instanceOf(_momentTimezone["default"]),
+    max: _propTypes["default"].instanceOf(_momentTimezone["default"])
   }),
   biggestVisibleDomain: _propTypes["default"].object,
   smallestResolution: _propTypes["default"].object.isRequired,
   biggestTimeSpan: _propTypes["default"].object,
   histo: _propTypes["default"].shape({
     items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-      time: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
+      time: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
       metrics: _propTypes["default"].arrayOf(_propTypes["default"].number).isRequired,
       total: _propTypes["default"].number.isRequired
     })),
@@ -1262,7 +1074,7 @@ _defineProperty(TimeLine, "propTypes", {
   HistoToolTip: _propTypes["default"].elementType,
   quality: _propTypes["default"].shape({
     items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-      time: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
+      time: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
       quality: _propTypes["default"].number.isRequired,
       tip: _propTypes["default"].node
     })),
@@ -1338,7 +1150,6 @@ _defineProperty(TimeLine, "propTypes", {
   onFormatTimeLegend: _propTypes["default"].func.isRequired,
   onFormatMetricLegend: _propTypes["default"].func.isRequired
 });
-
 _defineProperty(TimeLine, "defaultProps", {
   classes: {},
   rcToolTipPrefixCls: _theme["default"].rcToolTipPrefixCls,