@spider-analyzer/timeline 3.4.1 → 4.0.1

package/dist/timeLineElements/HistoToolTip.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = HistoTooltip;
-
 var _styles = require("@material-ui/styles");
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _react = _interopRequireDefault(require("react"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var useStyles = (0, _styles.makeStyles)({
   innerTipMetrics: {
     marginTop: 4
@@ -30,19 +23,16 @@ var useStyles = (0, _styles.makeStyles)({
     "float": 'right'
   }
 });
-
 function HistoTooltip(_ref) {
   var metricsDefinition = _ref.metricsDefinition,
-      item = _ref.item,
-      onFormatTimeToolTips = _ref.onFormatTimeToolTips,
-      onFormatMetricLegend = _ref.onFormatMetricLegend,
-      classes = _ref.classes;
+    item = _ref.item,
+    onFormatTimeToolTips = _ref.onFormatTimeToolTips,
+    onFormatMetricLegend = _ref.onFormatMetricLegend,
+    classes = _ref.classes;
   var defaultClasses = useStyles();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: className('innerTipLeft')
   }, /*#__PURE__*/_react["default"].createElement("br", null), "\u2192"), /*#__PURE__*/_react["default"].createElement("div", {
@@ -64,12 +54,11 @@ function HistoTooltip(_ref) {
     className: className('innerTipRight')
   }, onFormatMetricLegend(item.total)))));
 }
-
 HistoTooltip.propTypes = {
   classes: _propTypes["default"].object,
   item: _propTypes["default"].shape({
-    start: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
-    end: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
+    start: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
+    end: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
     x1: _propTypes["default"].number,
     x2: _propTypes["default"].number,
     metrics: _propTypes["default"].arrayOf(_propTypes["default"].number).isRequired,

package/dist/timeLineElements/Histogram.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Histogram;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _sum2 = _interopRequireDefault(require("lodash-es/sum"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _styles = require("@material-ui/styles");
-
 var _ToolTip = _interopRequireDefault(require("../ToolTip"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var useStyles = (0, _styles.makeStyles)({
   histoItem: {
     fillOpacity: 1,
@@ -32,30 +23,25 @@ var useStyles = (0, _styles.makeStyles)({
     fillOpacity: 0.3
   }
 });
-
 function Histogram(_ref) {
   var classes = _ref.classes,
-      items = _ref.items,
-      metricsDefinition = _ref.metricsDefinition,
-      origin = _ref.origin,
-      barHovered = _ref.barHovered,
-      tooltipVisible = _ref.tooltipVisible,
-      verticalScale = _ref.verticalScale,
-      dragging = _ref.dragging,
-      HistoToolTip = _ref.HistoToolTip,
-      onFormatMetricLegend = _ref.onFormatMetricLegend,
-      onFormatTimeToolTips = _ref.onFormatTimeToolTips;
-
+    items = _ref.items,
+    metricsDefinition = _ref.metricsDefinition,
+    origin = _ref.origin,
+    barHovered = _ref.barHovered,
+    tooltipVisible = _ref.tooltipVisible,
+    verticalScale = _ref.verticalScale,
+    dragging = _ref.dragging,
+    HistoToolTip = _ref.HistoToolTip,
+    onFormatMetricLegend = _ref.onFormatMetricLegend,
+    onFormatTimeToolTips = _ref.onFormatTimeToolTips;
   if (!items) {
     return null;
   }
-
   var defaultClasses = useStyles();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ", ").concat(origin.y, ")")
   }, items.map(function (item, i) {
@@ -89,15 +75,14 @@ function Histogram(_ref) {
       y: -item.height,
       width: item.x2 - item.x1,
       height: item.height
-    })), "}");
+    })));
   }));
 }
-
 Histogram.propTypes = {
   classes: _propTypes["default"].object,
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    start: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
-    end: _propTypes["default"].instanceOf(_moment["default"]).isRequired,
+    start: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
+    end: _propTypes["default"].instanceOf(_momentTimezone["default"]).isRequired,
     x1: _propTypes["default"].number,
     x2: _propTypes["default"].number,
     metrics: _propTypes["default"].arrayOf(_propTypes["default"].number).isRequired,

package/dist/timeLineElements/Legend.js

@@ -4,31 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Legend;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _theme = _interopRequireDefault(require("../theme"));
-
 var _styles = require("@material-ui/styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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; }
-
 var useStyles = (0, _styles.makeStyles)({
   legend: {
     fontSize: _theme["default"].font.legendSize,
@@ -41,22 +28,16 @@ var useStyles = (0, _styles.makeStyles)({
     userSelect: 'none'
   }
 });
-
 function Legend(_ref) {
   var classes = _ref.classes,
-      metricsDefinition = _ref.metricsDefinition,
-      origin = _ref.origin;
-
+    metricsDefinition = _ref.metricsDefinition,
+    origin = _ref.origin;
   var fill = _toConsumableArray(metricsDefinition.colors).reverse();
-
   var legends = _toConsumableArray(metricsDefinition.legends).reverse();
-
   var defaultClasses = useStyles();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ",").concat(origin.y, ")")
   }, legends.map(function (leg, i) {
@@ -71,7 +52,6 @@ function Legend(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("tspan", null, leg));
   }));
 }
-
 Legend.propTypes = {
   classes: _propTypes["default"].object.isRequired,
   origin: _propTypes["default"].shape({

package/dist/timeLineElements/QualityLine.js

@@ -4,49 +4,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = QualityLine;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _theme = _interopRequireDefault(require("../theme"));
-
 var _styles = require("@material-ui/styles");
-
-var _moment = _interopRequireDefault(require("moment"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _ToolTip = _interopRequireDefault(require("../ToolTip"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var qualityHeight = 3;
 var useStyles = (0, _styles.makeStyles)({
   qualityCell: {
     strokeWidth: 0
   }
 });
-
 function QualityLine(_ref) {
   var classes = _ref.classes,
-      rcToolTipPrefixCls = _ref.rcToolTipPrefixCls,
-      origin = _ref.origin,
-      quality = _ref.quality,
-      xAxis = _ref.xAxis,
-      qualityScale = _ref.qualityScale;
+    rcToolTipPrefixCls = _ref.rcToolTipPrefixCls,
+    origin = _ref.origin,
+    quality = _ref.quality,
+    xAxis = _ref.xAxis,
+    qualityScale = _ref.qualityScale;
   var defaultClasses = useStyles();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ", ").concat(origin.y, ")")
   }, quality.items.map(function (item, i) {
     var x1 = xAxis(item.time);
-    var x2 = xAxis((0, _moment["default"])(item.time).add(quality.intervalMin, 'minutes'));
-
+    var x2 = xAxis((0, _momentTimezone["default"])(item.time).add(quality.intervalMin, 'minutes'));
     var rect = /*#__PURE__*/_react["default"].createElement("rect", {
       key: i,
       className: className('qualityCell'),
@@ -64,7 +51,6 @@ function QualityLine(_ref) {
       width: x2 - x1,
       height: qualityHeight
     });
-
     if (item.tip) {
       return /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
         key: i,
@@ -75,7 +61,6 @@ function QualityLine(_ref) {
     } else return rect;
   }));
 }
-
 QualityLine.propTypes = {
   classes: _propTypes["default"].object.isRequired,
   rcToolTipPrefixCls: _propTypes["default"].string.isRequired,
@@ -86,7 +71,7 @@ QualityLine.propTypes = {
   xAxis: _propTypes["default"].func.isRequired,
   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
     })),

package/dist/timeLineElements/Tools.js

@@ -4,32 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Tools;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _Button = _interopRequireDefault(require("./Button"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var doubleArrowIcon = 'm 0,0 5,5 0,-5 5,5 -5,5 0,-5 -5,5 Z';
 var resetIcon = 'M5 15H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zM12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z';
 var gotoNowIcon = 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z';
-
 function Tools(_ref) {
   var tools = _ref.tools,
-      classes = _ref.classes,
-      rcToolTipPrefixCls = _ref.rcToolTipPrefixCls,
-      labels = _ref.labels,
-      histoWidth = _ref.histoWidth,
-      isActive = _ref.isActive,
-      origin = _ref.origin,
-      onResetTime = _ref.onResetTime,
-      shiftTimeLine = _ref.shiftTimeLine,
-      onGoto = _ref.onGoto;
+    classes = _ref.classes,
+    rcToolTipPrefixCls = _ref.rcToolTipPrefixCls,
+    labels = _ref.labels,
+    histoWidth = _ref.histoWidth,
+    isActive = _ref.isActive,
+    origin = _ref.origin,
+    onResetTime = _ref.onResetTime,
+    shiftTimeLine = _ref.shiftTimeLine,
+    onGoto = _ref.onGoto;
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ", ").concat(origin.y, ")")
   }, tools.slideForward !== false && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -94,7 +87,6 @@ function Tools(_ref) {
     onClick: onGoto
   }));
 }
-
 Tools.propTypes = {
   tools: _propTypes["default"].shape({
     slideForward: _propTypes["default"].bool,

package/dist/timeLineElements/XAxis.js

@@ -4,38 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = XAxis;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _d3Time = require("d3-time");
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _axesStyles = require("./axesStyles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function XAxis(_ref) {
   var min = _ref.min,
-      max = _ref.max,
-      origin = _ref.origin,
-      axisWidth = _ref.axisWidth,
-      marks = _ref.marks,
-      xAxis = _ref.xAxis,
-      classes = _ref.classes,
-      arrowPath = _ref.arrowPath,
-      onFormatTimeLegend = _ref.onFormatTimeLegend;
-  var now = (0, _moment["default"])();
+    max = _ref.max,
+    origin = _ref.origin,
+    axisWidth = _ref.axisWidth,
+    marks = _ref.marks,
+    xAxis = _ref.xAxis,
+    classes = _ref.classes,
+    arrowPath = _ref.arrowPath,
+    onFormatTimeLegend = _ref.onFormatTimeLegend;
+  var now = (0, _momentTimezone["default"])();
   var defaultClasses = (0, _axesStyles.useStyles)();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ", ").concat(origin.y, ")")
   }, /*#__PURE__*/_react["default"].createElement("path", {
@@ -67,12 +57,11 @@ function XAxis(_ref) {
     d: "m -3,6 6,0 -3,-6 Z"
   }));
 }
-
 XAxis.propTypes = {
   axisWidth: _propTypes["default"].number.isRequired,
   classes: _propTypes["default"].object,
-  min: _propTypes["default"].instanceOf(_moment["default"]),
-  max: _propTypes["default"].instanceOf(_moment["default"]),
+  min: _propTypes["default"].instanceOf(_momentTimezone["default"]),
+  max: _propTypes["default"].instanceOf(_momentTimezone["default"]),
   origin: _propTypes["default"].shape({
     x: _propTypes["default"].number.isRequired,
     y: _propTypes["default"].number.isRequired

package/dist/timeLineElements/XGrid.js

@@ -4,31 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = XAxis;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _axesStyles = require("./axesStyles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function XAxis(_ref) {
   var origin = _ref.origin,
-      marks = _ref.marks,
-      xAxis = _ref.xAxis,
-      classes = _ref.classes,
-      yAxisHeight = _ref.yAxisHeight;
+    marks = _ref.marks,
+    xAxis = _ref.xAxis,
+    classes = _ref.classes,
+    yAxisHeight = _ref.yAxisHeight;
   var defaultClasses = (0, _axesStyles.useStyles)();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ", ").concat(origin.y, ")")
   }, marks && marks.map(function (m, index) {
@@ -41,7 +32,6 @@ function XAxis(_ref) {
     }));
   }));
 }
-
 XAxis.propTypes = {
   classes: _propTypes["default"].object,
   origin: _propTypes["default"].shape({

package/dist/timeLineElements/YAxis.js

@@ -4,31 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = YAxis;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _axesStyles = require("./axesStyles");
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function YAxis(_ref) {
   var classes = _ref.classes,
-      marks = _ref.marks,
-      yAxis = _ref.yAxis,
-      onFormatMetricLegend = _ref.onFormatMetricLegend,
-      maxHeight = _ref.maxHeight,
-      origin = _ref.origin,
-      arrowPath = _ref.arrowPath;
+    marks = _ref.marks,
+    yAxis = _ref.yAxis,
+    onFormatMetricLegend = _ref.onFormatMetricLegend,
+    maxHeight = _ref.maxHeight,
+    origin = _ref.origin,
+    arrowPath = _ref.arrowPath;
   var defaultClasses = (0, _axesStyles.useStyles)();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ", ").concat(origin.y, ")")
   }, /*#__PURE__*/_react["default"].createElement("path", {
@@ -51,7 +43,6 @@ function YAxis(_ref) {
     }, onFormatMetricLegend(m)));
   }));
 }
-
 YAxis.propTypes = {
   classes: _propTypes["default"].object,
   maxHeight: _propTypes["default"].number.isRequired,

package/dist/timeLineElements/YGrid.js

@@ -4,29 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = YAxis;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _axesStyles = require("./axesStyles");
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function YAxis(_ref) {
   var classes = _ref.classes,
-      marks = _ref.marks,
-      yAxis = _ref.yAxis,
-      origin = _ref.origin,
-      xAxisWidth = _ref.xAxisWidth;
+    marks = _ref.marks,
+    yAxis = _ref.yAxis,
+    origin = _ref.origin,
+    xAxisWidth = _ref.xAxisWidth;
   var defaultClasses = (0, _axesStyles.useStyles)();
-
   var className = function className(_className) {
     return (0, _clsx["default"])(defaultClasses[_className], classes[_className]);
   };
-
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: "translate(".concat(origin.x, ", ").concat(origin.y, ")")
   }, marks.map(function (m, index) {
@@ -39,7 +31,6 @@ function YAxis(_ref) {
     }));
   }));
 }
-
 YAxis.propTypes = {
   classes: _propTypes["default"].object,
   origin: _propTypes["default"].shape({

package/dist/timeLineElements/axesStyles.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyles = exports.arrow = void 0;
-
 var _styles = require("@material-ui/styles");
-
 var _theme = _interopRequireDefault(require("../theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var arrow = "m 0,-5 5,5 -5,5";
 exports.arrow = arrow;
 var useStyles = (0, _styles.makeStyles)({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spider-analyzer/timeline",
-  "version": "3.4.1",
+  "version": "4.0.1",
   "description": "React graphical component to display metric over time with a time selection feature.",
   "author": "Thibaut Raballand <spider.analyzer@gmail.com> (https://spider-analyzer.io)",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "d3-selection": "^3.0.0",
     "d3-time": "^3.0.0",
     "lodash-es": "^4.17.21",
-    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.45",
     "prop-types": "^15.7.2",
     "rc-tooltip": "^5.1.0"
   },

package/src/Cursor.jsx

@@ -12,7 +12,7 @@ import RightHandle from './cursorElements/RightHandle';
 import ZoomIn from './cursorElements/ZoomIn';
 import LeftToolTip from './cursorElements/LeftToolTip';
 import RightToolTip from './cursorElements/RightToolTip';
-import moment from 'moment';
+import moment from 'moment-timezone';
 
 export default function Cursor({
         overlayWidth, overlayHeight,

package/src/TimeLine.jsx

@@ -1,12 +1,13 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import {scaleLinear, scaleTime} from 'd3-scale';
 import _merge from 'lodash-es/merge';
 import _round from 'lodash-es/round';
 import _max from 'lodash-es/max';
 import _floor from 'lodash-es/floor';
 import isEqual from 'lodash-es/isEqual';
+import isFunction from 'lodash-es/isFunction';
 
 import Cursor from './Cursor';
 import Histogram from './timeLineElements/Histogram';
@@ -296,7 +297,7 @@ export default class TimeLine extends Component{
         const items = this.prepareHistogram({histo, domain, verticalScale});
         this.items = items;
 
-        return  (
+        return isFunction(this.xAxis) && (
             <svg
                 ref={this.timelineElement}
                 width={width}

package/src/cursorElements/CursorSelection.jsx

@@ -6,7 +6,7 @@ import {drag} from 'd3-drag';
 
 import theme from '../theme';
 import clsx from 'clsx';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import {handleHistoOver, handleHistoOut} from './handleHistoHovering';
 
 const useStyles = makeStyles({

package/src/cursorElements/DragOverlay.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {makeStyles} from '@material-ui/styles';
 import {pointer, select} from 'd3-selection';
 import {drag} from 'd3-drag';
-import moment from 'moment';
+import moment from 'moment-timezone';
 
 import {handleHistoOver, handleHistoOut} from './handleHistoHovering';
 

package/src/timeLineElements/HistoToolTip.jsx

@@ -1,7 +1,7 @@
 import {makeStyles} from '@material-ui/styles';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import React from 'react';
 
 const useStyles = makeStyles({

package/src/timeLineElements/Histogram.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import _sum from 'lodash-es/sum';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -74,7 +74,6 @@ export default function Histogram({
                                 height={item.height}
                             />
                         </ToolTip>
-                        }
                     }
                 </g>
             ))

package/src/timeLineElements/QualityLine.jsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 
 import theme from '../theme';
 import {makeStyles} from '@material-ui/styles';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import ToolTip from '../ToolTip';
 
 const qualityHeight = 3;