@spider-analyzer/timeline 4.0.2 → 5.0.0

package/dist/index.js

@@ -1,27 +1,2918 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _TimeLineResizer["default"];
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var luxon = require('luxon');
+var d3Scale = require('d3-scale');
+var PropTypes11 = require('prop-types');
+var d3Selection = require('d3-selection');
+var d3Drag = require('d3-drag');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx3 = require('clsx');
+require('./timeline-EX2XZ6IP.css');
+var ToolTipBase = require('rc-tooltip');
+require('./tipDark-BQEJ43KY.css');
+var d3Time = require('d3-time');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var PropTypes11__default = /*#__PURE__*/_interopDefault(PropTypes11);
+var clsx3__default = /*#__PURE__*/_interopDefault(clsx3);
+var ToolTipBase__default = /*#__PURE__*/_interopDefault(ToolTipBase);
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var unitMap = {
+  ms: "milliseconds",
+  milliseconds: "milliseconds",
+  millisecond: "milliseconds",
+  second: "seconds",
+  seconds: "seconds",
+  minute: "minutes",
+  minutes: "minutes",
+  hour: "hours",
+  hours: "hours",
+  day: "days",
+  days: "days",
+  month: "months",
+  months: "months",
+  year: "years",
+  years: "years"
+};
+function normalizeUnit(unit) {
+  if (!unit) return "milliseconds";
+  const norm = unit.toLowerCase();
+  return unitMap[norm] ?? norm;
+}
+var DurationLike = class {
+  constructor(d) {
+    __publicField(this, "d");
+    this.d = d;
   }
-});
-Object.defineProperty(exports, "Cursor", {
-  enumerable: true,
-  get: function get() {
-    return _Cursor2["default"];
+  asMilliseconds() {
+    return this.d.as("milliseconds");
   }
-});
-Object.defineProperty(exports, "TimeLine", {
-  enumerable: true,
-  get: function get() {
-    return _TimeLine2["default"];
+  valueOf() {
+    return this.d.as("milliseconds");
+  }
+};
+function toDurationLike(x) {
+  if (x instanceof DurationLike) return x;
+  if (typeof x === "number") return new DurationLike(luxon.Duration.fromMillis(x));
+  if (typeof x === "string") return new DurationLike(luxon.Duration.fromISO(x));
+  if (x && typeof x.asMilliseconds === "function") {
+    return new DurationLike(luxon.Duration.fromMillis(x.asMilliseconds()));
+  }
+  return new DurationLike(luxon.Duration.fromMillis(0));
+}
+var MomentLike = class _MomentLike {
+  constructor(dt) {
+    __publicField(this, "_dt");
+    this._dt = dt;
+  }
+  _toDT(other) {
+    if (other instanceof _MomentLike) return other._dt;
+    if (other instanceof Date) return luxon.DateTime.fromJSDate(other);
+    if (typeof other === "number") return luxon.DateTime.fromMillis(other);
+    if (other instanceof luxon.DateTime) return other;
+    return luxon.DateTime.fromJSDate(new Date(other));
+  }
+  _addMillis(ms) {
+    return this._dt.toMillis() + ms;
+  }
+  isBefore(other) {
+    return this._dt.toMillis() < this._toDT(other).toMillis();
+  }
+  isAfter(other) {
+    return this._dt.toMillis() > this._toDT(other).toMillis();
+  }
+  isSame(other) {
+    return this._dt.toMillis() === this._toDT(other).toMillis();
+  }
+  isSameOrBefore(other) {
+    return this._dt.toMillis() <= this._toDT(other).toMillis();
+  }
+  isSameOrAfter(other) {
+    return this._dt.toMillis() >= this._toDT(other).toMillis();
+  }
+  // moment returns duration by default; library internals always use the
+  // no-arg form and treat the result as a number via arithmetic. Return ms.
+  diff(other) {
+    return this._dt.toMillis() - this._toDT(other).toMillis();
+  }
+  add(n, unit) {
+    const ms = normalizeToMillis(n, unit);
+    return new _MomentLike(luxon.DateTime.fromMillis(this._addMillis(ms), { zone: this._dt.zone }));
+  }
+  subtract(n, unit) {
+    const ms = normalizeToMillis(n, unit);
+    return new _MomentLike(luxon.DateTime.fromMillis(this._addMillis(-ms), { zone: this._dt.zone }));
+  }
+  toDate() {
+    return this._dt.toJSDate();
+  }
+  toISOString() {
+    return this._dt.toUTC().toISO() ?? "";
+  }
+  valueOf() {
+    return this._dt.toMillis();
+  }
+  format(fmt) {
+    if (!fmt) return this._dt.toISO() ?? "";
+    return this._dt.toFormat(momentFmtToLuxon(fmt));
   }
+  // setter chain used in demo: .second(0).millisecond(0)
+  second(v) {
+    return new _MomentLike(this._dt.set({ second: v }));
+  }
+  millisecond(v) {
+    return new _MomentLike(this._dt.set({ millisecond: v }));
+  }
+  // Internal (escape hatch — prefer the wrapper API above).
+  toLuxon() {
+    return this._dt;
+  }
+};
+function normalizeToMillis(n, unit) {
+  if (n instanceof DurationLike) return n.asMilliseconds();
+  if (n && typeof n.asMilliseconds === "function") return n.asMilliseconds();
+  if (typeof n === "number") {
+    if (!unit) return n;
+    const u = normalizeUnit(unit);
+    return luxon.Duration.fromObject({ [u]: n }).as("milliseconds");
+  }
+  return 0;
+}
+function momentFmtToLuxon(fmt) {
+  return fmt.replace(/YYYY/g, "yyyy").replace(/YY/g, "yy").replace(/DD/g, "dd").replace(/A/g, "a");
+}
+function toDT(x) {
+  if (x === void 0 || x === null) return luxon.DateTime.now();
+  if (x instanceof MomentLike) return x.toLuxon();
+  if (x instanceof Date) return luxon.DateTime.fromJSDate(x);
+  if (typeof x === "number") return luxon.DateTime.fromMillis(x);
+  if (typeof x === "string") return luxon.DateTime.fromISO(x);
+  return luxon.DateTime.fromJSDate(new Date(x));
+}
+var moment = function moment2(x) {
+  return new MomentLike(toDT(x));
+};
+moment.isMoment = (x) => x instanceof MomentLike;
+moment.isDuration = (x) => x instanceof DurationLike;
+moment.duration = (x, unit) => {
+  if (typeof x === "number" && unit) {
+    const u = normalizeUnit(unit);
+    return new DurationLike(luxon.Duration.fromObject({ [u]: x }));
+  }
+  return toDurationLike(x);
+};
+moment.tz = (x, zone) => {
+  const base = toDT(x);
+  return new MomentLike(base.setZone(zone));
+};
+var moment_shim_default = moment;
+
+// src/utils.ts
+var max = (arr) => arr && arr.length ? Math.max(...arr) : void 0;
+var sum = (arr) => arr ? arr.reduce((acc, v) => acc + v, 0) : 0;
+var floor = (n, precision = 0) => {
+  const p = Math.pow(10, precision);
+  return Math.floor(n * p) / p;
+};
+var round = (n, precision = 0) => {
+  const p = Math.pow(10, precision);
+  return Math.round(n * p) / p;
+};
+var clamp = (n, lower, upper) => Math.max(lower, Math.min(upper, n));
+var isFunction = (v) => typeof v === "function";
+function isEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== "object" || typeof b !== "object") return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  for (const k of ka) {
+    if (!isEqual(a[k], b[k])) return false;
+  }
+  return true;
+}
+function merge(target, ...sources) {
+  for (const src of sources) {
+    if (!src || typeof src !== "object") continue;
+    for (const k of Object.keys(src)) {
+      const v = src[k];
+      if (v && typeof v === "object" && !Array.isArray(v) && target[k] && typeof target[k] === "object" && !Array.isArray(target[k])) {
+        target[k] = merge({ ...target[k] }, v);
+      } else {
+        target[k] = v;
+      }
+    }
+  }
+  return target;
+}
+
+// src/cursorElements/utils.js
+function hide(element) {
+  element.style.opacity = 0;
+  element.style.visibility = "hidden";
+}
+function show(element) {
+  element.style.opacity = 1;
+  element.style.visibility = "visible";
+}
+var resizeToolTip = (height) => clamp(2 * height / 30, 1.9, 4);
+var resizeToolTipText = (height) => clamp(7 * height / 29, 7, 14);
+var resizeToolTipRightDelta = (height) => clamp(4 * height / 30, 4, 9);
+function handleHistoOver({
+  showHistoToolTip,
+  dragging,
+  event,
+  dragOverlay,
+  marginBottom,
+  items,
+  height,
+  tooltipVisible,
+  timer,
+  barHovered,
+  setTimer,
+  setToolTipVisible,
+  setBarHovered
+}) {
+  if (showHistoToolTip && !dragging && dragOverlay) {
+    const [x, y] = d3Selection.pointer(event, dragOverlay.current);
+    const margin = marginBottom || 0;
+    const index = items.findIndex(
+      (element) => element.x1 <= x && element.x2 > x && y >= height - element.height - margin && y < height - margin
+    );
+    if (!tooltipVisible && !timer) {
+      setTimer(setTimeout(() => {
+        setToolTipVisible(true);
+        setTimer(null);
+      }, 1e3));
+    } else if (timer && barHovered !== index) {
+      clearTimeout(timer);
+      setTimer(setTimeout(() => {
+        setToolTipVisible(true);
+        setTimer(null);
+      }, 1e3));
+    } else if (index < 0 && tooltipVisible) {
+      setToolTipVisible(false);
+    }
+    if (barHovered !== index) {
+      setBarHovered(index);
+    }
+  }
+}
+function handleHistoOut({ setToolTipVisible, setBarHovered, timer, friendTarget }) {
+  return (event) => {
+    if (event.relatedTarget !== (friendTarget && friendTarget.current)) {
+      setToolTipVisible(false);
+      setBarHovered(-1);
+    }
+    if (timer) {
+      clearTimeout(timer);
+    }
+  };
+}
+function DragOverlay({
+  width,
+  height,
+  marginBottom,
+  showToolTipLeft,
+  showToolTipRight,
+  onDrawCursor,
+  onStartDrawCursor,
+  onMovedDomain,
+  onMoveDomain,
+  onEndCursor,
+  dragOverlayRef,
+  tooltipVisible,
+  items,
+  showHistoToolTip,
+  dragging,
+  barHovered,
+  cursorSelection,
+  setDragging,
+  setToolTipVisible,
+  setBarHovered
+}) {
+  const dragOverlayContainer = react.useRef();
+  const [timer, setTimer] = react.useState(null);
+  const setOverlayCursor = (event) => {
+    if (event.ctrlKey) {
+      dragOverlayRef.current.style.cursor = "move";
+    } else {
+      dragOverlayRef.current.style.cursor = "crosshair";
+    }
+    handleHistoOver({
+      showHistoToolTip,
+      dragging,
+      event,
+      dragOverlay: dragOverlayRef,
+      marginBottom,
+      items,
+      height,
+      tooltipVisible,
+      timer,
+      setTimer,
+      setToolTipVisible,
+      barHovered,
+      setBarHovered
+    });
+  };
+  react.useEffect(() => {
+    let mode = null;
+    d3Selection.select(dragOverlayRef.current).call(
+      d3Drag.drag().filter((event) => !event.button).container(dragOverlayContainer.current).on("start", (event) => {
+        if (event.sourceEvent.ctrlKey) {
+          mode = "DOMAIN";
+        } else {
+          mode = "CURSOR";
+          showToolTipLeft(true);
+          onStartDrawCursor(event.x);
+        }
+      }).on("drag", (event) => {
+        if (mode === "DOMAIN") {
+          onMoveDomain(event.dx);
+        } else if (mode === "CURSOR") {
+          showToolTipRight(true);
+          onDrawCursor(event.dx, d3Selection.pointer(event, dragOverlayRef.current));
+        }
+        setDragging(true);
+      }).on("end", () => {
+        if (mode === "DOMAIN") {
+          onMovedDomain();
+        } else if (mode === "CURSOR") {
+          showToolTipLeft(false);
+          showToolTipRight(false);
+          onEndCursor();
+        }
+        mode = null;
+        setDragging(false);
+      })
+    );
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { ref: dragOverlayContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      ref: dragOverlayRef,
+      className: "tl-dragOverlay",
+      x: 0,
+      y: 0,
+      width,
+      height,
+      onMouseMove: setOverlayCursor,
+      onMouseOver: setOverlayCursor,
+      onMouseOut: handleHistoOut({ setToolTipVisible, setBarHovered, timer, friendTarget: cursorSelection })
+    }
+  ) });
+}
+DragOverlay.propTypes = {
+  height: PropTypes11__default.default.number.isRequired,
+  width: PropTypes11__default.default.number.isRequired,
+  marginBottom: PropTypes11__default.default.number,
+  items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    x1: PropTypes11__default.default.number,
+    x2: PropTypes11__default.default.number,
+    metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
+    total: PropTypes11__default.default.number.isRequired
+  })),
+  tooltipVisible: PropTypes11__default.default.bool,
+  barHovered: PropTypes11__default.default.number,
+  setBarHovered: PropTypes11__default.default.func,
+  setTooltipVisible: PropTypes11__default.default.func,
+  showToolTipLeft: PropTypes11__default.default.func.isRequired,
+  showToolTipRight: PropTypes11__default.default.func.isRequired,
+  showHistoToolTip: PropTypes11__default.default.bool,
+  onStartDrawCursor: PropTypes11__default.default.func.isRequired,
+  onDrawCursor: PropTypes11__default.default.func.isRequired,
+  onEndCursor: PropTypes11__default.default.func.isRequired,
+  onMoveDomain: PropTypes11__default.default.func,
+  onMovedDomain: PropTypes11__default.default.func
+};
+function dragOverlayFwd(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DragOverlay, { ...props, dragOverlayRef: ref });
+}
+var DragOverlay_default = react.forwardRef(dragOverlayFwd);
+function cn(name, classes) {
+  return clsx3__default.default(`tl-${name}`, classes?.[name]);
+}
+var theme = {
+  rcToolTipPrefixCls: "rc-tooltip-dark"
+};
+var theme_default = theme;
+var defaultLabels = {
+  forwardButtonTip: "Slide forward",
+  backwardButtonTip: "Slide backward",
+  resetButtonTip: "Reset time span",
+  gotoNowButtonTip: "Goto Now",
+  doubleClickMaxZoomMsg: "Cannot zoom anymore!",
+  scrollMaxZoomMsg: "Cannot zoom anymore!",
+  zoomInWithoutChangingSelectionMsg: "Please change time selection before clicking on zoom ;)",
+  zoomSelectionResolutionExtended: "You reached maximum zoom level",
+  minZoomMsg: "You reached minimum zoom level",
+  maxSelectionMsg: "You reached maximum selection",
+  maxDomainMsg: "You reached maximum visible time",
+  minDomainMsg: "You reached minimum visible time",
+  gotoCursor: "Goto Cursor",
+  zoomInLabel: "Zoom in",
+  zoomOutLabel: "Zoom out"
+};
+var defaultQualityScale = d3Scale.scaleLinear().domain([0, 0.9, 1]).range(["#ff3724", "rgba(255,0,0,0.09)", "rgba(155,249,135,0.94)"]).clamp(true);
+function ToolTip({ overlay, placement = "top", mouseEnterDelay = 0.5, prefixCls, align, visible, hidden, children }) {
+  const extraProps = {};
+  if (visible) extraProps.open = true;
+  if (hidden) extraProps.open = false;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolTipBase__default.default,
+    {
+      placement,
+      prefixCls: prefixCls || theme_default.rcToolTipPrefixCls,
+      overlay,
+      mouseEnterDelay,
+      destroyTooltipOnHide: true,
+      align,
+      ...extraProps,
+      children
+    }
+  );
+}
+ToolTip.propTypes = {
+  overlay: PropTypes11__default.default.any.isRequired,
+  placement: PropTypes11__default.default.string,
+  mouseEnterDelay: PropTypes11__default.default.number
+};
+var zoomOutIcon = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z";
+function ZoomOut({ classes, origin, zoomOutLabel, onZoomOut, rcToolTipPrefixCls }) {
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolTip,
+    {
+      placement: "left",
+      overlay: zoomOutLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "g",
+        {
+          className: "tl-zoomOutContainer",
+          transform: `translate(${origin.x}, ${origin.y})`,
+          onClick: onZoomOut,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                className: "tl-zoomArea",
+                x: 0,
+                y: 0,
+                width: 23,
+                height: 23
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: className("zoomOut"),
+                d: zoomOutIcon
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+ZoomOut.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  rcToolTipPrefixCls: PropTypes11__default.default.string.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  zoomOutLabel: PropTypes11__default.default.string,
+  onZoomOut: PropTypes11__default.default.func
+};
+function CursorIcon({
+  classes,
+  rcToolTipPrefixCls,
+  origin,
+  position,
+  gotoCursorLabel,
+  onGotoCursor
+}) {
+  const [isOver, setIsOver] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolTip,
+    {
+      placement: position === "right" ? "left" : "right",
+      overlay: gotoCursorLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "g",
+        {
+          transform: `translate(${origin.x},${origin.y}) scale(2)`,
+          style: { cursor: "pointer" },
+          onClick: onGotoCursor,
+          onMouseOver: () => setIsOver(true),
+          onMouseOut: () => setIsOver(false),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                className: clsx3__default.default(
+                  "tl-cursorIconRect",
+                  classes.cursorIconRect,
+                  isOver && "tl-cursorIconRectOver",
+                  isOver && classes.cursorIconRectOver
+                ),
+                width: "5.5",
+                height: "13.72",
+                x: "9.56",
+                y: "4.76"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: clsx3__default.default(
+                  "tl-cursorIconCircle",
+                  classes.cursorIconCircle,
+                  isOver && "tl-cursorIconCircleOver",
+                  isOver && classes.cursorIconCircleOver
+                ),
+                cx: "9.63",
+                cy: "11.62",
+                r: "1.4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: clsx3__default.default(
+                  "tl-cursorIconCircle",
+                  classes.cursorIconCircle,
+                  isOver && "tl-cursorIconCircleOver",
+                  isOver && classes.cursorIconCircleOver
+                ),
+                cx: "15",
+                cy: "11.70",
+                r: "1.4"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+CursorIcon.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  rcToolTipPrefixCls: PropTypes11__default.default.string.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  onGotoCursor: PropTypes11__default.default.func,
+  gotoCursorLabel: PropTypes11__default.default.string.isRequired,
+  position: PropTypes11__default.default.string.isRequired
+};
+function CursorSelection({
+  classes,
+  cursor,
+  height,
+  maxSize,
+  zoomIn,
+  canZoom,
+  dragOverlay,
+  onMoveDomain,
+  onDragCursor,
+  onMovedDomain,
+  onEndDragCursor,
+  showToolTipLeft,
+  showToolTipRight,
+  width,
+  tooltipVisible,
+  items,
+  showHistoToolTip,
+  dragging,
+  barHovered,
+  marginBottom,
+  setDragging,
+  setBarHovered,
+  setToolTipVisible
+}) {
+  const className = (n) => cn(n, classes);
+  const [timer, setTimer] = react.useState(null);
+  const setOverlayCursor = (event) => handleHistoOver({
+    showHistoToolTip,
+    dragging,
+    event,
+    dragOverlay,
+    marginBottom,
+    items,
+    height,
+    tooltipVisible,
+    timer,
+    setTimer,
+    setToolTipVisible,
+    barHovered,
+    setBarHovered
+  });
+  react.useEffect(
+    () => {
+      let mode = null;
+      d3Selection.select(cursor.current).call(
+        d3Drag.drag().filter((event) => !event.button).container(dragOverlay.current).on("start", (event) => {
+          if (event.sourceEvent.ctrlKey) {
+            mode = "DOMAIN";
+          } else {
+            mode = "CURSOR";
+            showToolTipRight(true);
+            showToolTipLeft(true);
+          }
+        }).on("drag", (event) => {
+          if (mode === "DOMAIN" && event.sourceEvent.ctrlKey) {
+            onMoveDomain(event.dx);
+          } else if (mode === "CURSOR") {
+            onDragCursor(event.dx, d3Selection.pointer(event, dragOverlay.current));
+          }
+          setDragging(true);
+        }).on("end", () => {
+          if (mode === "DOMAIN") {
+            onMovedDomain();
+          } else if (mode === "CURSOR") {
+            showToolTipRight(false);
+            showToolTipLeft(false);
+            onEndDragCursor();
+          }
+          mode = null;
+          mode = null;
+          setDragging(false);
+        })
+      );
+    },
+    [cursor.current]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      ref: cursor,
+      className: clsx3__default.default(className("cursorArea"), maxSize && "tl--maxSize"),
+      x: 0,
+      y: -3,
+      width,
+      height: height + 10,
+      onDoubleClick: canZoom ? zoomIn : void 0,
+      onMouseMove: setOverlayCursor,
+      onMouseOver: setOverlayCursor,
+      onMouseOut: handleHistoOut({ setToolTipVisible, setBarHovered, timer, friendTarget: dragOverlay })
+    }
+  );
+}
+CursorSelection.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  width: PropTypes11__default.default.number.isRequired,
+  height: PropTypes11__default.default.number.isRequired,
+  maxSize: PropTypes11__default.default.bool.isRequired,
+  zoomIn: PropTypes11__default.default.func.isRequired,
+  canZoom: PropTypes11__default.default.bool.isRequired,
+  dragOverlay: PropTypes11__default.default.object.isRequired,
+  onMoveDomain: PropTypes11__default.default.func.isRequired,
+  onMovedDomain: PropTypes11__default.default.func.isRequired,
+  onDragCursor: PropTypes11__default.default.func.isRequired,
+  onEndDragCursor: PropTypes11__default.default.func.isRequired,
+  showToolTipLeft: PropTypes11__default.default.func.isRequired,
+  showToolTipRight: PropTypes11__default.default.func.isRequired,
+  items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    x1: PropTypes11__default.default.number,
+    x2: PropTypes11__default.default.number,
+    metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
+    total: PropTypes11__default.default.number.isRequired
+  })),
+  tooltipVisible: PropTypes11__default.default.bool,
+  barHovered: PropTypes11__default.default.number,
+  setBarHovered: PropTypes11__default.default.func,
+  setTooltipVisible: PropTypes11__default.default.func
+};
+function CursorSelectionFwd(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CursorSelection, { ...props, cursor: ref });
+}
+var CursorSelection_default = react.forwardRef(CursorSelectionFwd);
+function LeftHandle({
+  classes,
+  maxSize,
+  onResizeLeftCursor,
+  onEndResizeCursor,
+  dragOverlay,
+  showToolTipLeft,
+  origin,
+  startIsOutOfView,
+  setDragging
+}) {
+  const className = (n) => cn(n, classes);
+  const cursorLeftHandle = react.useRef();
+  react.useEffect(() => {
+    cursorLeftHandle.current && d3Selection.select(cursorLeftHandle.current).call(
+      d3Drag.drag().filter((event) => !event.button).container(dragOverlay.current).on("start", () => {
+        setDragging(true);
+        showToolTipLeft(true);
+      }).on("drag", (event) => onResizeLeftCursor(event.dx, d3Selection.pointer(event, dragOverlay.current))).on("end", () => {
+        setDragging(false);
+        showToolTipLeft(false);
+        onEndResizeCursor();
+      })
+    );
+  }, [cursorLeftHandle.current]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      ref: cursorLeftHandle,
+      className: clsx3__default.default(className("cursorLeftHandle"), maxSize && "tl--maxSize", startIsOutOfView && "tl--outOfView"),
+      r: "4",
+      cx: origin.x,
+      cy: origin.y
+    }
+  );
+}
+LeftHandle.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  maxSize: PropTypes11__default.default.bool.isRequired,
+  dragOverlay: PropTypes11__default.default.object.isRequired,
+  startIsOutOfView: PropTypes11__default.default.bool.isRequired,
+  showToolTipLeft: PropTypes11__default.default.func.isRequired,
+  onResizeLeftCursor: PropTypes11__default.default.func.isRequired,
+  onEndResizeCursor: PropTypes11__default.default.func.isRequired,
+  setDragging: PropTypes11__default.default.func.isRequired
+};
+function RightHandle({
+  classes,
+  maxSize,
+  origin,
+  onResizeRightCursor,
+  onEndResizeCursor,
+  dragOverlay,
+  showToolTipRight,
+  endIsOutOfView,
+  setDragging
+}) {
+  const className = (n) => cn(n, classes);
+  const cursorRightHandle = react.useRef();
+  react.useEffect(() => {
+    cursorRightHandle.current && d3Selection.select(cursorRightHandle.current).call(
+      d3Drag.drag().filter((event) => !event.button).container(dragOverlay.current).on("start", () => {
+        setDragging(true);
+        showToolTipRight(true);
+      }).on("drag", (event) => onResizeRightCursor(event.dx, d3Selection.pointer(event, dragOverlay.current))).on("end", () => {
+        setDragging(false);
+        showToolTipRight(false);
+        onEndResizeCursor();
+      })
+    );
+  }, [cursorRightHandle.current]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      ref: cursorRightHandle,
+      className: clsx3__default.default(className("cursorRightHandle"), maxSize && "tl--maxSize", endIsOutOfView && "tl--outOfView"),
+      r: "4",
+      cx: origin.x,
+      cy: origin.y
+    }
+  );
+}
+RightHandle.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  maxSize: PropTypes11__default.default.bool.isRequired,
+  dragOverlay: PropTypes11__default.default.object.isRequired,
+  endIsOutOfView: PropTypes11__default.default.bool.isRequired,
+  showToolTipRight: PropTypes11__default.default.func.isRequired,
+  onResizeRightCursor: PropTypes11__default.default.func.isRequired,
+  onEndResizeCursor: PropTypes11__default.default.func.isRequired,
+  setDragging: PropTypes11__default.default.func.isRequired
+};
+var zoomIcon = "M 15.5 14 h -0.79 l -0.28 -0.27 C 15.41 12.59 16 11.11 16 9.5 C 16 5.91 13.09 3 9.5 3 S 3 5.91 3 9.5 S 5.91 16 9.5 16 c 1.61 0 3.09 -0.59 4.23 -1.57 l 0.27 0.28 v 0.79 l 5 4.99 L 20.49 19 l -4.99 -5 Z m -6 0 C 7.01 14 5 11.99 5 9.5 S 7.01 5 9.5 5 S 14 7.01 14 9.5 S 11.99 14 9.5 14 Z";
+var plusSign = "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z";
+function ZoomIn({
+  classes,
+  origin,
+  zoomInLabel,
+  onZoomIn,
+  rcToolTipPrefixCls,
+  forwardedRef
+}) {
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolTip,
+    {
+      placement: "left",
+      overlay: zoomInLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "g",
+        {
+          className: "tl-zoomInContainer",
+          ref: forwardedRef,
+          transform: `translate(${origin.x}, ${origin.y})`,
+          onClick: onZoomIn,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                className: "tl-zoomArea",
+                x: 0,
+                y: 0,
+                width: 23,
+                height: 23
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: className("zoomIn"),
+                d: zoomIcon
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: className("zoomIn"),
+                d: plusSign
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                className: "tl-zoomArea",
+                x: 0,
+                y: 0,
+                width: 23,
+                height: 23
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+ZoomIn.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  rcToolTipPrefixCls: PropTypes11__default.default.string.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  zoomInLabel: PropTypes11__default.default.string,
+  onZoomIn: PropTypes11__default.default.func
+};
+function zoomInFwd(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { ...props, forwardedRef: ref });
+}
+var ZoomIn_default = react.forwardRef(zoomInFwd);
+function LeftToolTip({
+  classes,
+  height,
+  origin,
+  isVisibleTooltipLeft,
+  startText
+}) {
+  const className = (n) => cn(n, classes);
+  const toolTipLeft = react.useRef();
+  react.useEffect(() => {
+    if (isVisibleTooltipLeft)
+      show(toolTipLeft.current);
+    else hide(toolTipLeft.current);
+  }, [isVisibleTooltipLeft]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `translate(${origin.x}, ${origin.y})`,
+      className: className("toolTipArea"),
+      ref: toolTipLeft,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "g",
+          {
+            transform: `scale(${resizeToolTip(height)})`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  className: className("toolTip"),
+                  x: -2.5,
+                  y: -8,
+                  width: startText.length * 2,
+                  height: 6.5,
+                  rx: 1
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: className("toolTip"),
+                  d: "M -1,-1.7 0,-0.5 1,-1.7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: className("toolTipText"),
+            style: {
+              fontSize: resizeToolTipText(height) + "px"
+            },
+            x: "-2",
+            y: -resizeToolTipText(height),
+            children: startText
+          }
+        )
+      ]
+    }
+  );
+}
+LeftToolTip.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  height: PropTypes11__default.default.number.isRequired,
+  isVisibleTooltipLeft: PropTypes11__default.default.bool.isRequired,
+  startText: PropTypes11__default.default.string.isRequired
+};
+function RightToolTip({
+  classes,
+  origin,
+  isVisibleTooltipRight,
+  stopText,
+  height
+}) {
+  const className = (n) => cn(n, classes);
+  const toolTipRight = react.useRef();
+  react.useEffect(() => {
+    if (isVisibleTooltipRight)
+      show(toolTipRight.current);
+    else hide(toolTipRight.current);
+  }, [isVisibleTooltipRight]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `translate(${origin.x}, ${origin.y})`,
+      className: className("toolTipArea"),
+      ref: toolTipRight,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "g",
+          {
+            transform: `scale(-${resizeToolTip(height)},-${resizeToolTip(height)})`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  className: className("toolTip"),
+                  x: -2.5,
+                  y: -8,
+                  width: stopText.length * 2,
+                  height: 6.5,
+                  rx: 1
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: className("toolTip"),
+                  d: "M -1,-1.7 0,-0.5 1,-1.7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: clsx3__default.default(
+              "tl-toolTipText",
+              classes.toolTipText,
+              "tl-toolTipTextRight",
+              classes.toolTipTextRight
+            ),
+            style: {
+              fontSize: resizeToolTipText(height) + "px"
+            },
+            x: "2",
+            y: resizeToolTipText(height) + resizeToolTipRightDelta(height),
+            children: stopText
+          }
+        )
+      ]
+    }
+  );
+}
+RightToolTip.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  height: PropTypes11__default.default.number.isRequired,
+  isVisibleTooltipRight: PropTypes11__default.default.bool.isRequired,
+  stopText: PropTypes11__default.default.string.isRequired
+};
+function Cursor({
+  overlayWidth,
+  overlayHeight,
+  items,
+  setBarHovered = identity,
+  setToolTipVisible = identity,
+  showHistoToolTip,
+  tooltipVisible,
+  barHovered,
+  dragging,
+  setDragging = identity,
+  origin,
+  height,
+  startPos,
+  endPos,
+  canZoom,
+  minZoom,
+  maxZoom,
+  maxSize,
+  zoomOutLabel,
+  zoomOut,
+  cursorIsAfterView,
+  cursorIsBeforeView,
+  gotoCursorLabel,
+  onGotoCursor,
+  rcToolTipPrefixCls,
+  classes = {},
+  onStartDrawCursor,
+  onDrawCursor,
+  onEndCursor,
+  onMoveDomain = identity,
+  onMovedDomain = identity,
+  onDragCursor,
+  onEndDragCursor,
+  startText,
+  stopText,
+  zoomInLabel,
+  zoomIn,
+  startIsOutOfView,
+  endIsOutOfView,
+  tools,
+  onResizeLeftCursor,
+  onResizeRightCursor,
+  onEndResizeCursor
+}) {
+  const dragOverlay = react.useRef();
+  const zoomInButton = react.useRef();
+  const cursorSelection = react.useRef();
+  const renderIcon = cursorIsAfterView || cursorIsBeforeView;
+  const cursorWidth = endPos - startPos < 1 ? 1 : endPos - startPos;
+  const [isVisibleTTR, setVisibleTTR] = react.useState(false);
+  const [isVisibleTTL, setVisibleTTL] = react.useState(false);
+  const originSelection = {
+    x: startPos,
+    y: 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${origin.x},${origin.y})`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DragOverlay_default,
+      {
+        ref: dragOverlay,
+        width: overlayWidth,
+        height: overlayHeight,
+        showToolTipLeft: setVisibleTTL,
+        showToolTipRight: setVisibleTTR,
+        onDrawCursor,
+        onEndCursor,
+        onMovedDomain,
+        onMoveDomain,
+        onStartDrawCursor,
+        setToolTipVisible,
+        setBarHovered,
+        items,
+        tooltipVisible,
+        barHovered,
+        showHistoToolTip,
+        marginBottom: overlayHeight - height - 4,
+        dragging,
+        setDragging,
+        cursorSelection
+      }
+    ),
+    renderIcon && /* @__PURE__ */ jsxRuntime.jsx(
+      CursorIcon,
+      {
+        classes,
+        rcToolTipPrefixCls,
+        origin: {
+          x: cursorIsAfterView ? startPos - 17 : startPos - 23,
+          y: height / 2 - 24
+        },
+        position: startPos === 1 ? "left" : "right",
+        gotoCursorLabel,
+        onGotoCursor
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "g",
+      {
+        style: { display: renderIcon ? "none" : void 0 },
+        transform: `translate(${originSelection.x},${originSelection.y})`,
+        onMouseOver: () => {
+          canZoom && tools.zoomIn !== false && !maxZoom && show(zoomInButton.current);
+        },
+        onMouseOut: () => {
+          canZoom && tools.zoomIn !== false && hide(zoomInButton.current);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CursorSelection_default,
+            {
+              ref: cursorSelection,
+              classes,
+              dragOverlay,
+              maxSize,
+              canZoom,
+              startPos,
+              endPos,
+              height,
+              showToolTipLeft: setVisibleTTL,
+              showToolTipRight: setVisibleTTR,
+              onDragCursor,
+              onEndDragCursor,
+              onMovedDomain,
+              onMoveDomain,
+              zoomIn,
+              width: cursorWidth,
+              setToolTipVisible,
+              setBarHovered,
+              items,
+              tooltipVisible,
+              barHovered,
+              showHistoToolTip,
+              dragging,
+              setDragging
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LeftHandle,
+            {
+              classes,
+              origin: {
+                x: 0,
+                y: height / 2 + 2
+              },
+              maxSize,
+              dragOverlay,
+              startIsOutOfView,
+              showToolTipLeft: setVisibleTTL,
+              onResizeLeftCursor,
+              onEndResizeCursor,
+              setDragging
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RightHandle,
+            {
+              classes,
+              origin: {
+                x: cursorWidth,
+                y: height / 2 + 2
+              },
+              maxSize,
+              dragOverlay,
+              endIsOutOfView,
+              showToolTipRight: setVisibleTTR,
+              onResizeRightCursor,
+              onEndResizeCursor,
+              setDragging
+            }
+          ),
+          canZoom && tools.zoomIn !== false && /* @__PURE__ */ jsxRuntime.jsx(
+            ZoomIn_default,
+            {
+              ref: zoomInButton,
+              classes,
+              rcToolTipPrefixCls,
+              origin: {
+                x: cursorWidth - 25,
+                y: 0
+              },
+              zoomInLabel,
+              onZoomIn: zoomIn
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LeftToolTip,
+            {
+              classes,
+              origin: {
+                x: 0,
+                y: height / 2
+              },
+              height,
+              startText,
+              isVisibleTooltipLeft: isVisibleTTL
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RightToolTip,
+            {
+              classes,
+              origin: {
+                x: cursorWidth,
+                y: height / 2 + 4
+              },
+              height,
+              stopText,
+              isVisibleTooltipRight: isVisibleTTR
+            }
+          )
+        ]
+      }
+    ),
+    canZoom && !minZoom && tools.zoomOut !== false && /* @__PURE__ */ jsxRuntime.jsx(
+      ZoomOut,
+      {
+        classes,
+        rcToolTipPrefixCls,
+        origin: {
+          x: overlayWidth - 10,
+          y: height - 20
+        },
+        zoomOutLabel,
+        onZoomOut: zoomOut
+      }
+    )
+  ] });
+}
+Cursor.propTypes = {
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  startPos: PropTypes11__default.default.number.isRequired,
+  startIsOutOfView: PropTypes11__default.default.bool,
+  endPos: PropTypes11__default.default.number.isRequired,
+  endIsOutOfView: PropTypes11__default.default.bool,
+  height: PropTypes11__default.default.number.isRequired,
+  overlayHeight: PropTypes11__default.default.number.isRequired,
+  overlayWidth: PropTypes11__default.default.number.isRequired,
+  items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    x1: PropTypes11__default.default.number,
+    x2: PropTypes11__default.default.number,
+    metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
+    total: PropTypes11__default.default.number.isRequired
+  })),
+  tooltipVisible: PropTypes11__default.default.bool,
+  barHovered: PropTypes11__default.default.number,
+  dragging: PropTypes11__default.default.bool,
+  setBarHovered: PropTypes11__default.default.func,
+  setToolTipVisible: PropTypes11__default.default.func,
+  setDragging: PropTypes11__default.default.func,
+  cursorIsBeforeView: PropTypes11__default.default.bool,
+  cursorIsAfterView: PropTypes11__default.default.bool,
+  maxSize: PropTypes11__default.default.bool,
+  startText: PropTypes11__default.default.string.isRequired,
+  stopText: PropTypes11__default.default.string.isRequired,
+  canZoom: PropTypes11__default.default.bool.isRequired,
+  maxZoom: PropTypes11__default.default.bool,
+  minZoom: PropTypes11__default.default.bool,
+  zoomIn: PropTypes11__default.default.func,
+  zoomOut: PropTypes11__default.default.func,
+  onResizeLeftCursor: PropTypes11__default.default.func.isRequired,
+  onResizeRightCursor: PropTypes11__default.default.func.isRequired,
+  onEndResizeCursor: PropTypes11__default.default.func.isRequired,
+  onDragCursor: PropTypes11__default.default.func.isRequired,
+  onEndDragCursor: PropTypes11__default.default.func.isRequired,
+  onStartDrawCursor: PropTypes11__default.default.func.isRequired,
+  onDrawCursor: PropTypes11__default.default.func.isRequired,
+  onEndCursor: PropTypes11__default.default.func.isRequired,
+  onMoveDomain: PropTypes11__default.default.func,
+  onMovedDomain: PropTypes11__default.default.func,
+  onGotoCursor: PropTypes11__default.default.func,
+  gotoCursorLabel: PropTypes11__default.default.string,
+  zoomInLabel: PropTypes11__default.default.string,
+  zoomOutLabel: PropTypes11__default.default.string,
+  classes: PropTypes11__default.default.object,
+  rcToolTipPrefixCls: PropTypes11__default.default.string.isRequired,
+  tools: PropTypes11__default.default.shape({
+    zoomIn: PropTypes11__default.default.bool,
+    zoomOut: PropTypes11__default.default.bool
+  })
+};
+var identity = () => {
+};
+function Histogram({
+  classes,
+  items,
+  metricsDefinition,
+  origin,
+  barHovered,
+  tooltipVisible,
+  verticalScale,
+  dragging,
+  HistoToolTip,
+  onFormatMetricLegend,
+  onFormatTimeToolTips
+}) {
+  if (!items) {
+    return null;
+  }
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${origin.x}, ${origin.y})`, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    metricsDefinition.colors.map((color, m) => item.metrics[m] > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        className: className("histoItem"),
+        style: {
+          fill: color.fill,
+          stroke: color.stroke
+        },
+        x: item.x1,
+        y: -verticalScale(sum(item.metrics.slice(0, m + 1))),
+        width: item.x2 - item.x1,
+        height: verticalScale(item.metrics[m])
+      },
+      m
+    )),
+    barHovered === i && !dragging && /* @__PURE__ */ jsxRuntime.jsx(
+      ToolTip,
+      {
+        overlay: /* @__PURE__ */ jsxRuntime.jsx(
+          HistoToolTip,
+          {
+            item,
+            metricsDefinition,
+            onFormatTimeToolTips,
+            onFormatMetricLegend,
+            classes
+          }
+        ),
+        visible: tooltipVisible,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            className: className("histoHovered"),
+            x: item.x1,
+            y: -item.height,
+            width: item.x2 - item.x1,
+            height: item.height
+          }
+        )
+      }
+    )
+  ] }, i)) });
+}
+Histogram.propTypes = {
+  classes: PropTypes11__default.default.object,
+  items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    x1: PropTypes11__default.default.number,
+    x2: PropTypes11__default.default.number,
+    metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
+    total: PropTypes11__default.default.number.isRequired
+  })),
+  metricsDefinition: PropTypes11__default.default.shape({
+    count: PropTypes11__default.default.number.isRequired,
+    legends: PropTypes11__default.default.arrayOf(PropTypes11__default.default.string).isRequired,
+    colors: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+      fill: PropTypes11__default.default.string.isRequired,
+      stroke: PropTypes11__default.default.string.isRequired,
+      text: PropTypes11__default.default.string.isRequired
+    })).isRequired
+  }).isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  verticalScale: PropTypes11__default.default.func.isRequired,
+  onFormatTimeToolTips: PropTypes11__default.default.func.isRequired,
+  onFormatMetricLegend: PropTypes11__default.default.func.isRequired,
+  HistoToolTip: PropTypes11__default.default.elementType,
+  barHovered: PropTypes11__default.default.number,
+  tooltipVisible: PropTypes11__default.default.bool
+};
+
+// src/timeLineElements/axesStyles.jsx
+var arrow = `m 0,-5 5,5 -5,5`;
+function XAxis({ min, max: max2, origin, axisWidth, marks, xAxis, classes, arrowPath = arrow, onFormatTimeLegend }) {
+  const now = moment_shim_default();
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `translate(${origin.x}, ${origin.y})`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: className("axis"),
+            d: `M 0,-6 0,6`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: className("axis"),
+            d: `M 0,0 ${axisWidth + 5},0`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${axisWidth},0)`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: className("arrow"),
+            d: arrowPath
+          }
+        ) }),
+        marks && marks.map(
+          (m, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "g",
+            {
+              transform: `translate(${xAxis(m)},0)`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    className: className("limitMarker"),
+                    d: "M 0,0 0,6"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: 0,
+                    y: 15,
+                    className: clsx3__default.default(className("timeAxisText"), d3Time.timeDay(m) >= m && className("timeAxisDaysText")),
+                    children: onFormatTimeLegend(m)
+                  }
+                )
+              ]
+            },
+            m.toISOString()
+          )
+        ),
+        xAxis && now.isSameOrBefore(max2) && now.isSameOrAfter(min) && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            transform: `translate(${xAxis(now)},0)`,
+            className: className("now"),
+            d: `m -3,6 6,0 -3,-6 Z`
+          }
+        )
+      ]
+    }
+  );
+}
+XAxis.propTypes = {
+  axisWidth: PropTypes11__default.default.number.isRequired,
+  classes: PropTypes11__default.default.object,
+  min: PropTypes11__default.default.instanceOf(moment_shim_default),
+  max: PropTypes11__default.default.instanceOf(moment_shim_default),
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  marks: PropTypes11__default.default.array,
+  xAxis: PropTypes11__default.default.func,
+  arrowPath: PropTypes11__default.default.string,
+  onFormatTimeLegend: PropTypes11__default.default.func.isRequired
+};
+function YAxis({ classes, marks, yAxis, onFormatMetricLegend, maxHeight, origin, arrowPath = arrow }) {
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `translate(${origin.x}, ${origin.y})`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: className("axis"),
+            d: `M 0,0 0, ${-maxHeight - 5}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(0, ${-maxHeight}) rotate(270)`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: className("arrow"),
+            d: arrowPath
+          }
+        ) }),
+        marks.map((m, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "g",
+          {
+            transform: `translate(0,${-yAxis(m)})`,
+            children: m > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                transform: `translate(0,5)`,
+                className: className("verticalAxisText"),
+                x: -7,
+                y: -3,
+                children: onFormatMetricLegend(m)
+              }
+            )
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+YAxis.propTypes = {
+  classes: PropTypes11__default.default.object,
+  maxHeight: PropTypes11__default.default.number.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  marks: PropTypes11__default.default.array,
+  yAxis: PropTypes11__default.default.func,
+  arrowPath: PropTypes11__default.default.string,
+  onFormatMetricLegend: PropTypes11__default.default.func.isRequired
+};
+function Legend({ classes, metricsDefinition, origin }) {
+  const fill = [...metricsDefinition.colors].reverse();
+  const legends = [...metricsDefinition.legends].reverse();
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "g",
+    {
+      transform: `translate(${origin.x},${origin.y})`,
+      children: legends.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          className: className("legend"),
+          style: {
+            fill: fill[i].text
+          },
+          x: 0,
+          y: 14 * (i + 1),
+          children: /* @__PURE__ */ jsxRuntime.jsx("tspan", { children: leg })
+        },
+        i
+      ))
+    }
+  );
+}
+Legend.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  metricsDefinition: PropTypes11__default.default.shape({
+    count: PropTypes11__default.default.number.isRequired,
+    legends: PropTypes11__default.default.arrayOf(PropTypes11__default.default.string).isRequired,
+    colors: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+      fill: PropTypes11__default.default.string.isRequired,
+      stroke: PropTypes11__default.default.string.isRequired,
+      text: PropTypes11__default.default.string.isRequired
+    })).isRequired
+  }).isRequired
+};
+function Button({ tipPlacement, tipOverlay, path, origin, scale, iconSize, onClick, classes, rcToolTipPrefixCls, isActive }) {
+  const [isOver, setOver] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToolTip,
+    {
+      placement: tipPlacement,
+      overlay: tipOverlay,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "g",
+        {
+          className: clsx3__default.default(
+            "tl-buttonGroup",
+            classes.buttonGroup,
+            !isActive && "tl-buttonGroupInactive",
+            !isActive && classes.buttonGroupInactive
+          ),
+          transform: `translate(${origin.x},${origin.y}) scale(${scale})`,
+          onMouseOver: (event) => {
+            isActive && setOver(true);
+          },
+          onMouseOut: (event) => {
+            isActive && setOver(false);
+          },
+          onClick: () => {
+            isActive && onClick();
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                className: clsx3__default.default(
+                  "tl-buttonOverShape",
+                  classes.buttonOverShape
+                ),
+                x: "0",
+                y: "0",
+                height: iconSize,
+                width: iconSize
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: clsx3__default.default(
+                  "tl-buttonIcon",
+                  classes.buttonIcon,
+                  isOver && "tl-buttonIconOver",
+                  isOver && classes.buttonIconOver
+                ),
+                d: path
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+Button.propTypes = {
+  tipPlacement: PropTypes11__default.default.string.isRequired,
+  tipOverlay: PropTypes11__default.default.string.isRequired,
+  path: PropTypes11__default.default.string.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  scale: PropTypes11__default.default.number.isRequired,
+  iconSize: PropTypes11__default.default.number.isRequired,
+  onClick: PropTypes11__default.default.func.isRequired,
+  classes: PropTypes11__default.default.object.isRequired,
+  rcToolTipPrefixCls: PropTypes11__default.default.string.isRequired,
+  isActive: PropTypes11__default.default.bool.isRequired
+};
+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({
+  tools,
+  classes,
+  rcToolTipPrefixCls,
+  labels,
+  histoWidth,
+  isActive,
+  origin,
+  onResetTime,
+  shiftTimeLine,
+  onGoto
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "g",
+    {
+      transform: `translate(${origin.x}, ${origin.y})`,
+      children: [
+        tools.slideForward !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            classes,
+            rcToolTipPrefixCls,
+            tipPlacement: "left",
+            tipOverlay: labels.forwardButtonTip,
+            origin: { x: histoWidth + 22, y: -5 },
+            scale: 1,
+            path: doubleArrowIcon,
+            iconSize: 10,
+            isActive,
+            onClick: () => {
+              shiftTimeLine(-120);
+            }
+          }
+        ),
+        tools.slideBackward !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            classes,
+            rcToolTipPrefixCls,
+            tipPlacement: "right",
+            tipOverlay: labels.backwardButtonTip,
+            origin: { x: -7, y: 5 },
+            scale: -1,
+            path: doubleArrowIcon,
+            iconSize: 10,
+            isActive,
+            onClick: () => {
+              shiftTimeLine(120);
+            }
+          }
+        ),
+        tools.resetTimeline !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            classes,
+            rcToolTipPrefixCls,
+            tipPlacement: "left",
+            tipOverlay: labels.resetButtonTip,
+            origin: { x: histoWidth + 17, y: -30 },
+            scale: 0.75,
+            path: resetIcon,
+            iconSize: 24,
+            isActive,
+            onClick: onResetTime
+          }
+        ),
+        tools.gotoNow !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            classes,
+            rcToolTipPrefixCls,
+            tipPlacement: "left",
+            tipOverlay: labels.gotoNowButtonTip,
+            origin: { x: histoWidth + 17, y: tools.resetTimeline !== false ? -53 : -30 },
+            scale: 0.75,
+            path: gotoNowIcon,
+            iconSize: 24,
+            isActive,
+            onClick: onGoto
+          }
+        )
+      ]
+    }
+  );
+}
+Tools.propTypes = {
+  tools: PropTypes11__default.default.shape({
+    slideForward: PropTypes11__default.default.bool,
+    slideBackward: PropTypes11__default.default.bool,
+    resetTimeline: PropTypes11__default.default.bool,
+    gotoNow: PropTypes11__default.default.bool,
+    cursor: PropTypes11__default.default.bool
+  }).isRequired,
+  classes: PropTypes11__default.default.object.isRequired,
+  rcToolTipPrefixCls: PropTypes11__default.default.string.isRequired,
+  labels: PropTypes11__default.default.shape({
+    forwardButtonTip: PropTypes11__default.default.string.isRequired,
+    backwardButtonTip: PropTypes11__default.default.string.isRequired,
+    resetButtonTip: PropTypes11__default.default.string.isRequired,
+    gotoNowButtonTip: PropTypes11__default.default.string.isRequired
+  }).isRequired,
+  histoWidth: PropTypes11__default.default.number.isRequired,
+  isActive: PropTypes11__default.default.bool.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  onResetTime: PropTypes11__default.default.func.isRequired,
+  shiftTimeLine: PropTypes11__default.default.func.isRequired,
+  onGoto: PropTypes11__default.default.func.isRequired
+};
+function HistoTooltip({ metricsDefinition, item, onFormatTimeToolTips, onFormatMetricLegend, classes }) {
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("innerTipLeft"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        "\u2192"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("innerTipRight"), children: [
+        onFormatTimeToolTips(item.start),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        onFormatTimeToolTips(item.end)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("innerTipMetrics"), children: [
+      metricsDefinition.colors.map((color, m) => {
+        const reversed = metricsDefinition.colors.length - m - 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "- ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: metricsDefinition.colors[reversed].stroke }, children: metricsDefinition.legends[reversed] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: className("innerTipRight"), children: onFormatMetricLegend(item.metrics[reversed]) })
+        ] }, reversed);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("hr", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "Total",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: className("innerTipRight"), children: onFormatMetricLegend(item.total) })
+      ] })
+    ] })
+  ] });
+}
+HistoTooltip.propTypes = {
+  classes: PropTypes11__default.default.object,
+  item: PropTypes11__default.default.shape({
+    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    x1: PropTypes11__default.default.number,
+    x2: PropTypes11__default.default.number,
+    metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
+    total: PropTypes11__default.default.number.isRequired
+  }),
+  metricsDefinition: PropTypes11__default.default.shape({
+    count: PropTypes11__default.default.number.isRequired,
+    legends: PropTypes11__default.default.arrayOf(PropTypes11__default.default.string).isRequired,
+    colors: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+      fill: PropTypes11__default.default.string.isRequired,
+      stroke: PropTypes11__default.default.string.isRequired,
+      text: PropTypes11__default.default.string.isRequired
+    })).isRequired
+  }).isRequired,
+  onFormatTimeToolTips: PropTypes11__default.default.func.isRequired,
+  onFormatMetricLegend: PropTypes11__default.default.func.isRequired
+};
+var qualityHeight = 3;
+function QualityLine({ classes, rcToolTipPrefixCls, origin, quality, xAxis, qualityScale }) {
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${origin.x}, ${origin.y})`, children: quality.items.map((item, i) => {
+    const x1 = xAxis(item.time);
+    const x2 = xAxis(moment_shim_default(item.time).add(quality.intervalMin, "minutes"));
+    const rect = /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        className: className("qualityCell"),
+        style: {
+          fill: qualityScale(item.quality)
+        },
+        onMouseOver: (event) => {
+          event.target.style.fill = "#00ebeb";
+        },
+        onMouseOut: (event) => {
+          event.target.style.fill = qualityScale(item.quality);
+        },
+        x: x1,
+        y: 1,
+        width: x2 - x1,
+        height: qualityHeight
+      },
+      i
+    );
+    if (item.tip) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ToolTip,
+        {
+          placement: "bottom",
+          overlay: item.tip,
+          mouseEnterDelay: 0.1,
+          children: rect
+        },
+        i
+      );
+    } else return rect;
+  }) });
+}
+QualityLine.propTypes = {
+  classes: PropTypes11__default.default.object.isRequired,
+  rcToolTipPrefixCls: PropTypes11__default.default.string.isRequired,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  xAxis: PropTypes11__default.default.func.isRequired,
+  quality: PropTypes11__default.default.shape({
+    items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
+      time: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+      quality: PropTypes11__default.default.number.isRequired,
+      tip: PropTypes11__default.default.node
+    })),
+    intervalMin: PropTypes11__default.default.number
+  }).isRequired,
+  qualityScale: PropTypes11__default.default.func.isRequired
+};
+function YAxis2({ classes, marks, yAxis, origin, xAxisWidth }) {
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "g",
+    {
+      transform: `translate(${origin.x}, ${origin.y})`,
+      children: marks.map((m, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "g",
+        {
+          transform: `translate(0,${-yAxis(m)})`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              className: className("grid"),
+              d: `M -5,0 ${xAxisWidth},0`
+            }
+          )
+        },
+        index
+      ))
+    }
+  );
+}
+YAxis2.propTypes = {
+  classes: PropTypes11__default.default.object,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  marks: PropTypes11__default.default.array,
+  yAxis: PropTypes11__default.default.func,
+  xAxisWidth: PropTypes11__default.default.number
+};
+function XAxis2({ origin, marks, xAxis, classes, yAxisHeight }) {
+  const className = (n) => cn(n, classes);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${origin.x}, ${origin.y})`, children: marks && marks.map(
+    (m, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "g",
+      {
+        transform: `translate(${xAxis(m)},0)`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: className("grid"),
+            d: `M 0,0 0,${-yAxisHeight}`
+          }
+        )
+      },
+      m.toISOString()
+    )
+  ) });
+}
+XAxis2.propTypes = {
+  classes: PropTypes11__default.default.object,
+  origin: PropTypes11__default.default.shape({
+    x: PropTypes11__default.default.number.isRequired,
+    y: PropTypes11__default.default.number.isRequired
+  }).isRequired,
+  marks: PropTypes11__default.default.array,
+  xAxis: PropTypes11__default.default.func,
+  yAxisHeight: PropTypes11__default.default.number
+};
+
+// src/time.ts
+function toMoment(x, zone) {
+  if (moment_shim_default.isMoment(x)) return x;
+  const m = zone ? moment_shim_default.tz(x, zone) : moment_shim_default(x);
+  return m;
+}
+function toDuration(x) {
+  if (moment_shim_default.isDuration(x)) return x;
+  return moment_shim_default.duration(x);
+}
+function domainToMoments(d, zone) {
+  return { min: toMoment(d.min, zone), max: toMoment(d.max, zone) };
+}
+function timeSpanToMoments(t, zone) {
+  return { start: toMoment(t.start, zone), stop: toMoment(t.stop, zone) };
+}
+var Cursor2 = Cursor;
+var Histogram2 = Histogram;
+var XAxis3 = XAxis;
+var YAxis3 = YAxis;
+var Legend2 = Legend;
+var Tools2 = Tools;
+var HistoToolTipDefault = HistoTooltip;
+var marginDefault = { left: 50, right: 45, top: 5, bottom: 5 };
+var xAxisDefault = { height: 20, spaceBetweenTicks: 70, barsBetweenTicks: 8 };
+var defaultZoomOutFactor = 1.25;
+var defaultTools = {
+  slideForward: true,
+  slideBackward: true,
+  resetTimeline: true,
+  gotoNow: true,
+  cursor: true,
+  zoomIn: true,
+  zoomOut: true
+};
+function computeMarginAndWidth(props) {
+  const { margin, showLegend, metricsDefinition, width } = props;
+  const localMargin = { ...marginDefault, ...margin };
+  if (showLegend) {
+    const maxLength = max(metricsDefinition.legends.map((s) => s.length));
+    localMargin.left = max([5 + maxLength * 9, localMargin.left]);
+  }
+  return {
+    margin: localMargin,
+    histoWidth: width - localMargin.left - localMargin.right
+  };
+}
+var momentToDate = (m) => m && m.toDate ? m.toDate() : m ?? null;
+var TimeLineInner = react.forwardRef(function TimeLine(props, ref) {
+  const {
+    width,
+    height,
+    histo,
+    quality,
+    qualityScale = defaultQualityScale,
+    metricsDefinition,
+    classes = {},
+    rcToolTipPrefixCls = theme_default.rcToolTipPrefixCls,
+    showLegend = true,
+    tools = defaultTools,
+    onFormatTimeLegend,
+    onFormatMetricLegend,
+    onResetTime,
+    onFormatTimeToolTips,
+    xAxis: xAxisProp = xAxisDefault,
+    yAxis: yAxisProp = {},
+    showHistoToolTip,
+    HistoToolTip = HistoToolTipDefault
+  } = props;
+  const xAxisRef = react.useRef(null);
+  const timelineElementRef = react.useRef(null);
+  const autoMoveRef = react.useRef(null);
+  const isAutoMovingRef = react.useRef(false);
+  const lastAutoMovingDeltaRef = react.useRef(0);
+  const movedSinceLastFetchedRef = react.useRef(0);
+  const widthOfLastUpdateRef = react.useRef(null);
+  const itemsRef = react.useRef([]);
+  const labelsRef = react.useRef(merge({ ...defaultLabels }, props.labels));
+  react.useEffect(() => {
+    labelsRef.current = merge({ ...defaultLabels }, props.labels);
+  }, [props.labels]);
+  const [state, setStateRaw] = react.useState(() => {
+    const initial = {
+      isActive: false,
+      start: props.timeSpan.start,
+      stop: props.timeSpan.stop,
+      maxTimespan: false,
+      waitForLoad: false,
+      tooltipVisible: false,
+      barHovered: null,
+      dragging: false,
+      ticks: [],
+      verticalMarks: [],
+      ...computeMarginAndWidth(props)
+    };
+    return {
+      ...initial,
+      ...checkAndCorrectDomainPure({
+        domain: props.domains[0],
+        biggestVisibleDomain: props.biggestVisibleDomain,
+        maxDomain: props.maxDomain,
+        smallestResolution: props.smallestResolution,
+        histoWidth: initial.histoWidth
+      })
+    };
+  });
+  const stateRef = react.useRef(state);
+  stateRef.current = state;
+  const propsRef = react.useRef(props);
+  propsRef.current = props;
+  const patchState = react.useCallback((patch) => {
+    setStateRaw((s) => ({ ...s, ...typeof patch === "function" ? patch(s) : patch }));
+  }, []);
+  const checkAndCorrectDomain = react.useCallback(({ domain: domain2 }) => {
+    return checkAndCorrectDomainPure({
+      domain: domain2,
+      biggestVisibleDomain: propsRef.current.biggestVisibleDomain,
+      maxDomain: propsRef.current.maxDomain,
+      smallestResolution: propsRef.current.smallestResolution,
+      histoWidth: stateRef.current.histoWidth
+    });
+  }, []);
+  const getItems = react.useCallback((p, domain2, shouldReload = true) => {
+    const histoWidth2 = computeMarginAndWidth(propsRef.current).histoWidth;
+    const xAxis = d3Scale.scaleTime().domain([domain2.min, domain2.max]).range([0, histoWidth2]);
+    xAxis.clamp(true);
+    xAxisRef.current = xAxis;
+    const ticks2 = xAxis.ticks(floor(histoWidth2 / p.xAxis.spaceBetweenTicks));
+    const intervalMs = max([
+      round(moment_shim_default(ticks2[1]).diff(moment_shim_default(ticks2[0])) / p.xAxis.barsBetweenTicks),
+      propsRef.current.smallestResolution.asMilliseconds()
+    ]);
+    patchState({ histoWidth: histoWidth2, isActive: true, ticks: ticks2 });
+    if (shouldReload && intervalMs) {
+      widthOfLastUpdateRef.current = p.width;
+      patchState({ waitForLoad: true });
+      p.onLoadHisto(intervalMs, domain2.min, domain2.max);
+    }
+  }, [patchState]);
+  react.useEffect(() => {
+    if (stateRef.current.domain) {
+      getItems(propsRef.current, stateRef.current.domain);
+    } else {
+      propsRef.current.onLoadDefaultDomain();
+    }
+    patchState(computeMarginAndWidth(propsRef.current));
+  }, []);
+  const prevMaxTimespanRef = react.useRef(state.maxTimespan);
+  react.useEffect(() => {
+    if (!prevMaxTimespanRef.current && state.maxTimespan) {
+      propsRef.current.onShowMessage(labelsRef.current.maxSelectionMsg);
+    }
+    prevMaxTimespanRef.current = state.maxTimespan;
+  }, [state.maxTimespan]);
+  const prevWidthRef = react.useRef(props.width);
+  const prevMarginRef = react.useRef(props.margin);
+  react.useEffect(() => {
+    if (prevWidthRef.current === props.width && isEqual(prevMarginRef.current, props.margin)) {
+      prevWidthRef.current = props.width;
+      prevMarginRef.current = props.margin;
+      return;
+    }
+    const s = stateRef.current;
+    if (s.isActive) {
+      const big = widthOfLastUpdateRef.current !== null && Math.abs((props.width ?? 0) - (widthOfLastUpdateRef.current ?? 0)) > 30;
+      getItems(props, s.domain, big);
+      patchState(computeMarginAndWidth(props));
+    } else {
+      patchState(computeMarginAndWidth(props));
+    }
+    if (stateRef.current.domain) {
+      const res = checkAndCorrectDomain({ domain: stateRef.current.domain });
+      const { maxZoom: maxZoom2, minZoom: minZoom2, domain: domain2, domainHasChanged, minTime, maxTime } = res;
+      if (maxZoom2 !== stateRef.current.maxZoom || minZoom2 !== stateRef.current.minZoom) {
+        patchState({
+          maxZoom: maxZoom2,
+          minZoom: minZoom2,
+          minTime,
+          maxTime,
+          domain: domainHasChanged ? domain2 : stateRef.current.domain
+        });
+        if (domainHasChanged) {
+          const newDomains = [domain2, ...propsRef.current.domains.slice(1)];
+          propsRef.current.onUpdateDomains(newDomains);
+        }
+      }
+    }
+    prevWidthRef.current = props.width;
+    prevMarginRef.current = props.margin;
+  }, [props.width, props.margin, getItems, patchState, checkAndCorrectDomain]);
+  const prevTimeSpanRef = react.useRef(props.timeSpan);
+  react.useEffect(() => {
+    const prev = prevTimeSpanRef.current;
+    if (prev.start.isSame(props.timeSpan.start) && prev.stop.isSame(props.timeSpan.stop)) {
+      return;
+    }
+    const newDomains = shiftDomainsPure(props.domains, {
+      min: props.timeSpan.start,
+      max: props.timeSpan.stop
+    }, props.biggestVisibleDomain);
+    if (newDomains !== props.domains) {
+      props.onUpdateDomains(newDomains);
+    }
+    patchState({ start: props.timeSpan.start, stop: props.timeSpan.stop });
+    prevTimeSpanRef.current = props.timeSpan;
+  }, [props.timeSpan, props.domains, props.biggestVisibleDomain, props, patchState]);
+  const prevDomain0Ref = react.useRef(props.domains[0]);
+  react.useEffect(() => {
+    const prev = prevDomain0Ref.current;
+    const curr = props.domains[0];
+    const changed = !prev && curr || prev && curr && (!prev.min.isSame(curr.min) || !prev.max.isSame(curr.max));
+    if (!changed) {
+      prevDomain0Ref.current = curr;
+      return;
+    }
+    const res = checkAndCorrectDomain({ domain: curr });
+    const { maxZoom: maxZoom2, minZoom: minZoom2, domain: domain2, domainHasChanged, minTime, maxTime } = res;
+    patchState({ maxZoom: maxZoom2, minZoom: minZoom2, minTime, maxTime, domain: domain2 });
+    if (domainHasChanged) {
+      const newDomains = [domain2, ...propsRef.current.domains.slice(1)];
+      propsRef.current.onUpdateDomains(newDomains);
+    } else {
+      getItems(propsRef.current, domain2);
+    }
+    prevDomain0Ref.current = curr;
+  }, [props.domains, checkAndCorrectDomain, getItems, patchState]);
+  const prevHistoRef = react.useRef(props.histo);
+  react.useEffect(() => {
+    if (prevHistoRef.current !== props.histo) {
+      patchState({ waitForLoad: false });
+      prevHistoRef.current = props.histo;
+    }
+  }, [props.histo, patchState]);
+  const prevLegendsRef = react.useRef(props.metricsDefinition.legends);
+  react.useEffect(() => {
+    if (prevLegendsRef.current !== props.metricsDefinition.legends) {
+      patchState(computeMarginAndWidth(propsRef.current));
+      prevLegendsRef.current = props.metricsDefinition.legends;
+    }
+  }, [props.metricsDefinition.legends, patchState]);
+  const prepareVerticalScale = react.useCallback(() => {
+    const items2 = histo && histo.items;
+    const s = stateRef.current;
+    const maxHeight2 = height - s.margin.bottom - s.margin.top - (xAxisProp.height || xAxisDefault.height);
+    const maxScale = items2 ? max(items2.map((i) => i.total)) || 0 : 0;
+    const verticalScale2 = d3Scale.scaleLinear().domain([0, maxScale]).range([0, maxHeight2]);
+    const verticalMarks2 = yAxisProp.spaceBetweenTicks && maxHeight2 > yAxisProp.spaceBetweenTicks * 2 ? verticalScale2.ticks(floor(maxHeight2 / yAxisProp.spaceBetweenTicks)) : [maxScale];
+    return { verticalScale: verticalScale2, verticalMarks: verticalMarks2, maxHeight: maxHeight2 };
+  }, [histo, height, xAxisProp, yAxisProp]);
+  const prepareHistogram = react.useCallback((args) => {
+    const { domain: domain2, verticalScale: verticalScale2 } = args;
+    const xAxis = xAxisRef.current;
+    if (histo && histo.items && domain2 && xAxis) {
+      const { min, max: max2 } = domain2;
+      return histo.items.filter(
+        (item) => item.total > 0 && item.time.isSameOrAfter(min) && item.time.isBefore(max2)
+      ).map((item) => {
+        const start2 = moment_shim_default(item.time);
+        const end = moment_shim_default(item.time).add(histo.intervalMs);
+        return {
+          x1: xAxis(start2),
+          x2: xAxis(end),
+          start: start2,
+          end,
+          metrics: item.metrics,
+          total: item.total,
+          height: verticalScale2(item.total)
+        };
+      });
+    }
+    return [];
+  }, [histo]);
+  const setAutoMove = react.useCallback((active, action, delta) => {
+    if (active) {
+      if (!autoMoveRef.current || autoMoveRef.current && Math.abs(lastAutoMovingDeltaRef.current - (delta ?? 0)) > 5) {
+        if (autoMoveRef.current) clearInterval(autoMoveRef.current);
+        autoMoveRef.current = setInterval(() => {
+          action(delta);
+          moveTimeLine(-(delta ?? 0));
+          isAutoMovingRef.current = true;
+          lastAutoMovingDeltaRef.current = delta ?? 0;
+        }, 30);
+      }
+    } else {
+      if (autoMoveRef.current) clearInterval(autoMoveRef.current);
+      autoMoveRef.current = null;
+    }
+  }, []);
+  const handleAutoSliding = react.useCallback((mouse, action) => {
+    if (!mouse) return;
+    const posX = mouse[0];
+    const s = stateRef.current;
+    if (posX < 0) setAutoMove(true, action, posX);
+    else if (posX >= 0 && posX <= s.histoWidth) setAutoMove(false);
+    else if (posX > s.histoWidth) setAutoMove(true, action, posX - s.histoWidth);
+  }, [setAutoMove]);
+  const movedTimeLine = react.useCallback(() => {
+    movedSinceLastFetchedRef.current = 0;
+    const domain2 = stateRef.current.domain;
+    const p = propsRef.current;
+    const domains = [domain2, ...p.domains.slice(1)];
+    const newDomains = shiftDomainsPure(domains, domain2, p.biggestVisibleDomain);
+    p.onUpdateDomains(newDomains);
+  }, []);
+  const stopAutoMove = react.useCallback(() => {
+    if (autoMoveRef.current) setAutoMove(false);
+    if (isAutoMovingRef.current) {
+      isAutoMovingRef.current = false;
+      movedTimeLine();
+    }
+  }, [setAutoMove, movedTimeLine]);
+  const moveTimeLineCore = react.useCallback((delta) => {
+    const p = propsRef.current;
+    const s = stateRef.current;
+    const { maxDomain, onShowMessage } = p;
+    let { domain: currentDomain, minTime = false, maxTime = false } = s;
+    const currentSpan = currentDomain.max.diff(currentDomain.min);
+    if (minTime && delta > 0 || maxTime && delta < 0) {
+      return { ...currentDomain, moved: 0, minTime, maxTime };
+    }
+    const xAxis = xAxisRef.current;
+    let min = moment_shim_default(xAxis.invert(-delta));
+    let max2 = moment_shim_default(xAxis.invert(s.histoWidth - delta));
+    let moved = delta;
+    if (maxDomain.min && min.isBefore(maxDomain.min)) {
+      moved = xAxis(maxDomain.min);
+      min = moment_shim_default(maxDomain.min);
+      max2 = moment_shim_default(min).add(currentSpan);
+      minTime = true;
+      onShowMessage(labelsRef.current.minDomainMsg);
+    }
+    if (maxDomain.max && max2.isAfter(maxDomain.max)) {
+      moved = xAxis(maxDomain.max);
+      max2 = moment_shim_default(maxDomain.max);
+      min = moment_shim_default(max2).subtract(currentSpan);
+      maxTime = true;
+      onShowMessage(labelsRef.current.maxDomainMsg);
+    }
+    return { min, max: max2, moved, minTime, maxTime };
+  }, []);
+  const moveTimeLine = react.useCallback((delta) => {
+    const xAxis = xAxisRef.current;
+    xAxis.clamp(false);
+    const { min, max: max2, moved, minTime, maxTime } = moveTimeLineCore(delta);
+    if (moved !== 0) {
+      xAxis.domain([min, max2]);
+      xAxis.clamp(true);
+      const p = propsRef.current;
+      const s = stateRef.current;
+      const ticks2 = xAxis.ticks(floor(s.histoWidth / p.xAxis.spaceBetweenTicks));
+      movedSinceLastFetchedRef.current += moved;
+      if (Math.abs(movedSinceLastFetchedRef.current) > 75 && p.fetchWhileSliding) {
+        movedSinceLastFetchedRef.current = 0;
+        getItems(p, { min, max: max2 });
+      }
+      patchState({ domain: { min, max: max2 }, minTime, maxTime, ticks: ticks2 });
+    }
+  }, [moveTimeLineCore, getItems, patchState]);
+  const onResizeLeftCursor = react.useCallback((delta, mouse) => {
+    const xAxis = xAxisRef.current;
+    const s = stateRef.current;
+    const p = propsRef.current;
+    let newStart = moment_shim_default(xAxis.invert(xAxis(s.start) + delta));
+    let newStop = s.stop;
+    let maxTimespan2 = false;
+    if (newStart.isSameOrAfter(newStop)) {
+      newStop = moment_shim_default(xAxis.invert(xAxis(newStop) + delta));
+    }
+    if (p.biggestTimeSpan) {
+      const min = moment_shim_default(newStop).subtract(p.biggestTimeSpan);
+      if (min.isSameOrAfter(newStart)) {
+        newStart = min;
+        maxTimespan2 = true;
+      }
+    }
+    handleAutoSliding(mouse, onResizeLeftCursor);
+    if (newStop !== s.stop && newStop.isSameOrBefore(s.domain.max) || newStart.isSameOrAfter(s.domain.min)) {
+      patchState({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
+    }
+  }, [handleAutoSliding, patchState]);
+  const onResizeRightCursor = react.useCallback((delta, mouse) => {
+    const xAxis = xAxisRef.current;
+    const s = stateRef.current;
+    const p = propsRef.current;
+    let newStop = moment_shim_default(xAxis.invert(xAxis(s.stop) + delta));
+    let newStart = s.start;
+    let maxTimespan2 = false;
+    if (newStop.isSameOrBefore(newStart)) {
+      newStart = moment_shim_default(xAxis.invert(xAxis(newStart) + delta));
+    }
+    if (p.biggestTimeSpan) {
+      const max2 = moment_shim_default(newStart).add(p.biggestTimeSpan);
+      if (max2.isSameOrBefore(newStop)) {
+        newStop = max2;
+        maxTimespan2 = true;
+      }
+    }
+    handleAutoSliding(mouse, onResizeRightCursor);
+    if (newStop.isSameOrBefore(s.domain.max) && newStart.isSameOrAfter(s.domain.min)) {
+      patchState({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
+    }
+  }, [handleAutoSliding, patchState]);
+  const onDragCursor = react.useCallback((delta, mouse) => {
+    const xAxis = xAxisRef.current;
+    const s = stateRef.current;
+    const p = propsRef.current;
+    xAxis.clamp(false);
+    const duration = s.stop.diff(s.start);
+    let newStart = moment_shim_default(xAxis.invert(xAxis(s.start) + delta));
+    let newStop = moment_shim_default(newStart).add(duration, "milliseconds");
+    xAxis.clamp(true);
+    const { maxDomain } = p;
+    if (maxDomain.min && newStart.isBefore(maxDomain.min)) newStart = moment_shim_default(maxDomain.min);
+    if (maxDomain.max && newStop.isAfter(maxDomain.max)) newStop = moment_shim_default(maxDomain.max);
+    handleAutoSliding(mouse, onDragCursor);
+    patchState({ start: newStart, stop: newStop });
+  }, [handleAutoSliding, patchState]);
+  const onStartDrawCursor = react.useCallback((pos) => {
+    const xAxis = xAxisRef.current;
+    patchState({
+      start: moment_shim_default(xAxis.invert(pos)),
+      stop: moment_shim_default(xAxis.invert(pos + 1)),
+      maxTimespan: false
+    });
+  }, [patchState]);
+  const onDrawCursor = react.useCallback((delta, mouse) => {
+    const xAxis = xAxisRef.current;
+    const s = stateRef.current;
+    const p = propsRef.current;
+    let newStop = moment_shim_default(xAxis.invert(xAxis(s.stop) + delta));
+    let newStart = s.start;
+    let maxTimespan2 = false;
+    if (newStop.isSameOrBefore(newStart)) {
+      newStart = moment_shim_default(xAxis.invert(xAxis(newStart) + delta));
+    }
+    if (p.biggestTimeSpan) {
+      const max2 = moment_shim_default(newStart).add(p.biggestTimeSpan);
+      if (max2.isSameOrBefore(newStop)) {
+        newStop = max2;
+        maxTimespan2 = true;
+      }
+    }
+    handleAutoSliding(mouse, onDrawCursor);
+    if (newStop.isSameOrBefore(s.domain.max) && newStart.isSameOrAfter(s.domain.min)) {
+      patchState({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
+    }
+  }, [handleAutoSliding, patchState]);
+  const onEndDrawCursor = react.useCallback(() => {
+    stopAutoMove();
+    const { onCustomRange, selectBarOnClick } = propsRef.current;
+    const s = stateRef.current;
+    let { start: start2, stop: stop2, barHovered: barHovered2 } = s;
+    if (selectBarOnClick && itemsRef.current && barHovered2 > -1) {
+      const item = itemsRef.current[barHovered2];
+      if (start2.isSameOrAfter(item.start) && stop2.isSameOrBefore(item.end)) {
+        start2 = moment_shim_default(item.start);
+        stop2 = moment_shim_default(item.end);
+        patchState({ start: start2, stop: stop2 });
+      }
+    }
+    onCustomRange(start2, stop2);
+  }, [stopAutoMove, patchState]);
+  const onEndChangeCursor = react.useCallback(() => {
+    stopAutoMove();
+    const { onCustomRange } = propsRef.current;
+    const { start: start2, stop: stop2 } = stateRef.current;
+    onCustomRange(start2, stop2);
+  }, [stopAutoMove]);
+  const zoomOnDomain = react.useCallback((targetDomain) => {
+    const p = propsRef.current;
+    const s = stateRef.current;
+    if (s.waitForLoad) return;
+    if (targetDomain.min.isSame(s.domain.min) && targetDomain.max.isSame(s.domain.max)) {
+      p.onShowMessage(labelsRef.current.zoomInWithoutChangingSelectionMsg);
+      return;
+    }
+    const { maxZoom: maxZoom2, domain: domain2 } = checkAndCorrectDomain({ domain: targetDomain });
+    const { maxZoom: currentMaxZoom } = s;
+    if (maxZoom2 && maxZoom2 !== currentMaxZoom) {
+      p.onShowMessage(labelsRef.current.zoomSelectionResolutionExtended);
+    }
+    const domains = [domain2, ...p.domains];
+    patchState({ maxZoom: maxZoom2, minZoom: false, domain: domain2 });
+    p.onUpdateDomains(domains);
+  }, [checkAndCorrectDomain, patchState]);
+  const zoomOutTo = react.useCallback((domains) => {
+    const res = checkAndCorrectDomain({ domain: domains[0] });
+    const { minZoom: minZoom2, domain: domain2, domainHasChanged, maxTime, minTime } = res;
+    const p = propsRef.current;
+    if (minZoom2) p.onShowMessage(labelsRef.current.minZoomMsg);
+    if (minTime) p.onShowMessage(labelsRef.current.minDomainMsg);
+    if (maxTime) p.onShowMessage(labelsRef.current.maxDomainMsg);
+    const newDomains = domainHasChanged ? [domain2, ...p.domains.slice(1)] : domains;
+    patchState({ maxZoom: false, minZoom: minZoom2, domain: domain2 });
+    p.onUpdateDomains(newDomains);
+  }, [checkAndCorrectDomain, patchState]);
+  const zoomOnTarget = react.useCallback((x) => {
+    const xAxis = xAxisRef.current;
+    const [minOrigin, maxOrigin] = xAxis.domain();
+    const target = moment_shim_default(xAxis.invert(x));
+    const min = moment_shim_default(target).subtract(0.25 * target.diff(moment_shim_default(minOrigin)));
+    const max2 = moment_shim_default(target).add(0.25 * moment_shim_default(maxOrigin).diff(target));
+    zoomOnDomain({ min, max: max2 });
+  }, [zoomOnDomain]);
+  const zoomOutOfTarget = react.useCallback((x) => {
+    const xAxis = xAxisRef.current;
+    const [minOrigin, maxOrigin] = xAxis.domain();
+    const target = moment_shim_default(xAxis.invert(x));
+    const min = moment_shim_default(target).subtract(1.25 * target.diff(moment_shim_default(minOrigin)));
+    const max2 = moment_shim_default(target).add(1.25 * moment_shim_default(maxOrigin).diff(target));
+    zoomOutTo([{ min, max: max2 }]);
+  }, [zoomOutTo]);
+  const zoomIn = react.useCallback(() => {
+    const s = stateRef.current;
+    if (!s.maxZoom) {
+      zoomOnDomain({ min: s.start, max: s.stop });
+    } else {
+      propsRef.current.onShowMessage(labelsRef.current.doubleClickMaxZoomMsg);
+    }
+  }, [zoomOnDomain]);
+  const zoomOut = react.useCallback(() => {
+    const s = stateRef.current;
+    if (s.waitForLoad || s.minZoom) return;
+    const p = propsRef.current;
+    const domains = [...p.domains];
+    if (domains.length > 1) {
+      domains.shift();
+    } else {
+      const xAxis = xAxisRef.current;
+      const [minOrigin, maxOrigin] = xAxis.domain();
+      const halfDuration = moment_shim_default(maxOrigin).diff(moment_shim_default(minOrigin)) / 2;
+      const target = moment_shim_default(minOrigin).add(halfDuration);
+      const zoomOutFactor = p.zoomOutFactor ?? defaultZoomOutFactor;
+      const min = moment_shim_default(target).subtract(zoomOutFactor * halfDuration);
+      const max2 = moment_shim_default(target).add(zoomOutFactor * halfDuration);
+      domains[0] = { min, max: max2 };
+    }
+    zoomOutTo(domains);
+  }, [zoomOutTo]);
+  const onWheel = react.useCallback((event) => {
+    const s = stateRef.current;
+    const p = propsRef.current;
+    event.stopPropagation();
+    const baseX = timelineElementRef.current?.getBoundingClientRect().left ?? 0;
+    const x = event.clientX - baseX - s.margin.left;
+    if (s.waitForLoad) return;
+    if (event.deltaY < -50) {
+      if (s.maxZoom) p.onShowMessage(labelsRef.current.scrollMaxZoomMsg);
+      else zoomOnTarget(x);
+    } else if (event.deltaY > 50) {
+      if (s.minZoom) p.onShowMessage(labelsRef.current.minZoomMsg);
+      else if (p.domains.length > 1) zoomOut();
+      else zoomOutOfTarget(x);
+    }
+  }, [zoomOnTarget, zoomOut, zoomOutOfTarget]);
+  const onGotoCursor = react.useCallback(() => {
+    const s = stateRef.current;
+    const p = propsRef.current;
+    const middle = moment_shim_default(s.start).add(s.stop.diff(s.start) / 2);
+    const xAxis = xAxisRef.current;
+    xAxis.clamp(false);
+    const currentX = s.histoWidth / 2;
+    const newX = xAxis(middle);
+    const newDomain = moveTimeLineCore(currentX - newX);
+    const domains = [...p.domains];
+    domains.splice(0, 1, newDomain);
+    const newDomains = shiftDomainsPure(domains, newDomain, p.biggestVisibleDomain);
+    p.onUpdateDomains(newDomains);
+    xAxis.clamp(true);
+  }, [moveTimeLineCore]);
+  const onGoto = react.useCallback((d) => {
+    const s = stateRef.current;
+    const p = propsRef.current;
+    const halfTimeAgg = s.stop.diff(s.start) / 2;
+    const when = d || moment_shim_default();
+    const newStop = moment_shim_default(when).add(halfTimeAgg);
+    const newStart = moment_shim_default(when).subtract(halfTimeAgg);
+    p.onCustomRange(newStart, newStop);
+  }, []);
+  const shiftTimeLine = react.useCallback((delta) => {
+    const incr = delta / Math.abs(delta) * 8;
+    let i = 0;
+    function step() {
+      moveTimeLine(incr);
+      i += 8;
+      if (i < Math.abs(delta)) setTimeout(step, 10);
+      else movedTimeLine();
+    }
+    step();
+  }, [moveTimeLine, movedTimeLine]);
+  react.useEffect(() => () => {
+    if (autoMoveRef.current) clearInterval(autoMoveRef.current);
+  }, []);
+  react.useImperativeHandle(ref, () => ({ zoomIn, zoomOut, shiftTimeLine }), [zoomIn, zoomOut, shiftTimeLine]);
+  const {
+    isActive,
+    domain,
+    histoWidth,
+    margin,
+    start,
+    stop,
+    maxZoom,
+    minZoom,
+    maxTimespan,
+    barHovered,
+    tooltipVisible,
+    ticks,
+    dragging
+  } = state;
+  const xAxisHeight = xAxisProp.height || xAxisDefault.height;
+  const pointZero = { x: 0, y: height - margin.bottom - xAxisHeight };
+  const originCursor = { x: 0, y: margin.top - 5 };
+  if (!isFunction(xAxisRef.current)) return null;
+  const { verticalScale, verticalMarks, maxHeight } = prepareVerticalScale();
+  const items = prepareHistogram({ domain, verticalScale });
+  itemsRef.current = items;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref: timelineElementRef,
+      width,
+      height,
+      onWheel: isActive ? onWheel : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${margin.left},${margin.top})`, children: [
+        yAxisProp.showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+          YAxis2,
+          {
+            classes,
+            origin: pointZero,
+            yAxis: verticalScale,
+            marks: verticalMarks,
+            xAxisWidth: histoWidth + 13
+          }
+        ),
+        xAxisProp.showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+          XAxis2,
+          {
+            classes,
+            origin: pointZero,
+            xAxis: xAxisRef.current,
+            marks: ticks,
+            yAxisHeight: maxHeight
+          }
+        ),
+        isActive && /* @__PURE__ */ jsxRuntime.jsx(
+          Histogram2,
+          {
+            classes,
+            origin: pointZero,
+            items,
+            histo,
+            verticalScale,
+            metricsDefinition,
+            barHovered,
+            dragging,
+            tooltipVisible,
+            onFormatTimeToolTips,
+            onFormatMetricLegend,
+            HistoToolTip
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          XAxis3,
+          {
+            classes,
+            origin: pointZero,
+            axisWidth: histoWidth + 13,
+            min: domain && domain.min,
+            max: domain && domain.max,
+            xAxis: xAxisRef.current,
+            marks: ticks,
+            arrowPath: xAxisProp.arrowPath,
+            yAxisHeight: maxHeight,
+            showGrid: xAxisProp.showGrid,
+            onFormatTimeLegend
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Tools2,
+          {
+            classes,
+            rcToolTipPrefixCls,
+            origin: pointZero,
+            histoWidth,
+            isActive,
+            tools,
+            labels: labelsRef.current,
+            onGoto,
+            onResetTime,
+            shiftTimeLine
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          YAxis3,
+          {
+            classes,
+            origin: pointZero,
+            maxHeight,
+            yAxis: verticalScale,
+            marks: verticalMarks,
+            arrowPath: yAxisProp.arrowPath,
+            showGrid: yAxisProp.showGrid,
+            xAxisWidth: histoWidth + 13,
+            onFormatMetricLegend
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+          Legend2,
+          {
+            classes,
+            origin: { x: -5, y: margin.top + 2 },
+            metricsDefinition
+          }
+        ),
+        isActive && tools.cursor !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          Cursor2,
+          {
+            origin: originCursor,
+            rcToolTipPrefixCls,
+            classes,
+            startPos: xAxisRef.current(start),
+            startIsOutOfView: start.isBefore(domain.min) || start.isAfter(domain.max),
+            endPos: xAxisRef.current(stop),
+            endIsOutOfView: stop.isBefore(domain.min) || stop.isAfter(domain.max),
+            cursorIsBeforeView: start.isBefore(domain.min) && stop.isBefore(domain.min),
+            cursorIsAfterView: start.isAfter(domain.max) && stop.isAfter(domain.max),
+            height: maxHeight,
+            overlayHeight: height - margin.top,
+            overlayWidth: histoWidth,
+            tooltipVisible,
+            barHovered,
+            setToolTipVisible: (v) => patchState({ tooltipVisible: v }),
+            setBarHovered: (b) => patchState({ barHovered: b }),
+            items,
+            showHistoToolTip,
+            dragging,
+            setDragging: (d) => patchState({ dragging: d }),
+            canZoom: true,
+            minZoom,
+            maxZoom,
+            startText: onFormatTimeToolTips(start),
+            stopText: onFormatTimeToolTips(stop),
+            maxSize: maxTimespan,
+            tools,
+            gotoCursorLabel: labelsRef.current.gotoCursor,
+            zoomInLabel: labelsRef.current.zoomInLabel,
+            zoomOutLabel: labelsRef.current.zoomOutLabel,
+            zoomIn,
+            zoomOut,
+            onResizeLeftCursor,
+            onResizeRightCursor,
+            onEndResizeCursor: onEndChangeCursor,
+            onDragCursor,
+            onEndDragCursor: onEndChangeCursor,
+            onStartDrawCursor,
+            onDrawCursor,
+            onEndCursor: onEndDrawCursor,
+            onMoveDomain: moveTimeLine,
+            onMovedDomain: movedTimeLine,
+            onGotoCursor
+          }
+        ),
+        isActive && quality && quality.items && /* @__PURE__ */ jsxRuntime.jsx(
+          QualityLine,
+          {
+            classes,
+            rcToolTipPrefixCls,
+            origin: pointZero,
+            quality,
+            qualityScale,
+            xAxis: xAxisRef.current
+          }
+        )
+      ] })
+    }
+  );
+});
+var TimeLine2 = react.forwardRef(function TimeLineWrapper(props, ref) {
+  const zone = props.timeZone;
+  const [stack, setStack] = react.useState(
+    () => props.domain ? [domainToMoments(props.domain, zone)] : []
+  );
+  const prevDomainRef = react.useRef(props.domain);
+  react.useEffect(() => {
+    if (prevDomainRef.current === props.domain) return;
+    prevDomainRef.current = props.domain;
+    if (!props.domain) {
+      setStack([]);
+      return;
+    }
+    const m = domainToMoments(props.domain, zone);
+    setStack((prev) => {
+      if (prev.length === 0) return [m];
+      const top = prev[0];
+      if (top.min.isSame(m.min) && top.max.isSame(m.max)) return prev;
+      return [m, ...prev.slice(1)];
+    });
+  }, [props.domain, zone]);
+  const handleUpdateDomains = react.useCallback((newDomains) => {
+    setStack(newDomains);
+    const top = newDomains[0];
+    if (top && props.onDomainChange) {
+      props.onDomainChange({ min: top.min.toDate(), max: top.max.toDate() });
+    }
+  }, [props.onDomainChange]);
+  const handleLoadDefault = react.useCallback(() => {
+    const ret = props.onLoadDefaultDomain?.();
+    const apply = (d) => {
+      if (!d) return;
+      const m = domainToMoments(d, zone);
+      setStack([m]);
+      if (props.onDomainChange) {
+        props.onDomainChange({ min: m.min.toDate(), max: m.max.toDate() });
+      }
+    };
+    if (ret && typeof ret.then === "function") ret.then(apply);
+    else if (ret) apply(ret);
+  }, [props.onLoadDefaultDomain, props.onDomainChange, zone]);
+  const innerProps = {
+    ...props,
+    domains: stack,
+    timeSpan: props.timeSpan ? timeSpanToMoments(props.timeSpan, zone) : void 0,
+    maxDomain: props.maxDomain ? domainToMoments(props.maxDomain, zone) : void 0,
+    histo: props.histo?.items ? { ...props.histo, items: props.histo.items.map((it) => ({ ...it, time: toMoment(it.time, zone) })) } : props.histo,
+    quality: props.quality?.items ? { ...props.quality, items: props.quality.items.map((it) => ({ ...it, time: toMoment(it.time, zone) })) } : props.quality,
+    biggestVisibleDomain: props.biggestVisibleDomain != null ? toDuration(props.biggestVisibleDomain) : void 0,
+    biggestTimeSpan: props.biggestTimeSpan != null ? toDuration(props.biggestTimeSpan) : void 0,
+    smallestResolution: props.smallestResolution != null ? toDuration(props.smallestResolution) : void 0,
+    onUpdateDomains: handleUpdateDomains,
+    onLoadDefaultDomain: handleLoadDefault,
+    // onLoadHisto: object shape + Date instants
+    onLoadHisto: props.onLoadHisto ? (ms, start, end) => props.onLoadHisto({ intervalMs: ms, start: momentToDate(start), end: momentToDate(end) }) : void 0,
+    // onCustomRange → onTimeSpanChange, object shape
+    onCustomRange: props.onTimeSpanChange ? (start, stop) => props.onTimeSpanChange({ start: momentToDate(start), stop: momentToDate(stop) }) : props.onCustomRange,
+    onFormatTimeToolTips: props.onFormatTimeToolTips ? (t) => props.onFormatTimeToolTips(momentToDate(t)) : void 0,
+    onFormatTimeLegend: props.onFormatTimeLegend ? (t) => props.onFormatTimeLegend(momentToDate(t)) : void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TimeLineInner, { ...innerProps, ref });
 });
-var _TimeLineResizer = _interopRequireDefault(require("./TimeLineResizer"));
-var _Cursor2 = _interopRequireDefault(require("./Cursor"));
-var _TimeLine2 = _interopRequireDefault(require("./TimeLine"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var TimeLine_default = TimeLine2;
+function checkAndCorrectDomainPure({
+  domain,
+  biggestVisibleDomain,
+  maxDomain,
+  smallestResolution,
+  histoWidth
+}) {
+  if (!domain) {
+    return { domain, maxZoom: false, minZoom: false, domainHasChanged: false };
+  }
+  const newDomain = { ...domain };
+  let domainHasChanged = false;
+  const duration = newDomain.max.diff(newDomain.min);
+  let maxZoom = false;
+  const minRes = smallestResolution.asMilliseconds();
+  if (duration <= histoWidth * minRes / 15) {
+    maxZoom = true;
+    newDomain.max = moment_shim_default(newDomain.min).add(histoWidth * minRes / 15, "ms");
+  }
+  let minTime;
+  let maxTime;
+  if (maxDomain?.min && newDomain.min.isBefore(maxDomain.min)) {
+    newDomain.min = moment_shim_default(maxDomain.min);
+    minTime = true;
+  }
+  if (maxDomain?.max && newDomain.max.isAfter(maxDomain.max)) {
+    newDomain.max = moment_shim_default(maxDomain.max);
+    maxTime = true;
+  }
+  let minZoom = false;
+  if (biggestVisibleDomain && newDomain.max.isSameOrAfter(moment_shim_default(newDomain.min).add(biggestVisibleDomain))) {
+    minZoom = true;
+    newDomain.min = moment_shim_default(newDomain.max).subtract(biggestVisibleDomain);
+  }
+  if (!(newDomain.min.isSame(domain.min) && newDomain.max.isSame(domain.max))) {
+    domainHasChanged = true;
+  }
+  return {
+    domain: domainHasChanged ? newDomain : domain,
+    maxZoom,
+    minZoom,
+    maxTime,
+    minTime,
+    domainHasChanged
+  };
+}
+function shiftDomainsPure(domains, { min, max: max2 }, biggestVisibleDomain) {
+  let toUpdate = false;
+  const newDomains = domains.map((domain, index) => {
+    if (min && min.isBefore(domain.min) || max2 && max2.isAfter(domain.max)) {
+      toUpdate = true;
+      if (index === domains.length - 1) {
+        const newDomain = {
+          min: min && min.isBefore(domain.min) ? min : domain.min,
+          max: max2 && max2.isAfter(domain.max) ? max2 : domain.max
+        };
+        if (biggestVisibleDomain && moment_shim_default(newDomain.min).add(biggestVisibleDomain).isSameOrBefore(newDomain.max)) {
+          if (min.isBefore(domain.min)) newDomain.max = moment_shim_default(min).add(biggestVisibleDomain);
+          else newDomain.min = moment_shim_default(max2).subtract(biggestVisibleDomain);
+        }
+        return newDomain;
+      }
+      if (min && min.isBefore(domain.min)) {
+        return { min, max: moment_shim_default(domain.max).subtract(domain.min.diff(min)) };
+      }
+      return { min: moment_shim_default(domain.min).add(max2.diff(domain.max)), max: max2 };
+    }
+    return domain;
+  });
+  return toUpdate ? newDomains : domains;
+}
+var defaultWidth = 900;
+var defaultHeight = 100;
+function TimeLineResizer(props) {
+  const [dimensions, setDimensions] = react.useState({
+    width: defaultWidth,
+    height: defaultHeight
+  });
+  const container = react.useRef(null);
+  const onViewResize = () => {
+    if (container.current) {
+      setDimensions({
+        width: container.current.clientWidth,
+        height: container.current.clientHeight
+      });
+    }
+  };
+  react.useEffect(() => {
+    if (container.current) {
+      onViewResize();
+      window.addEventListener("resize", onViewResize);
+    }
+  }, [container.current]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: container,
+      className: "tl-root tl-timelineContainer",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        TimeLine_default,
+        {
+          ref: props.forwardedRef,
+          width: dimensions.width,
+          height: dimensions.height,
+          ...props
+        }
+      )
+    }
+  );
+}
+function timeLineFwd(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TimeLineResizer, { ...props, forwardedRef: ref });
+}
+var TimeLineResizer_default = react.forwardRef(timeLineFwd);
+
+// src/index.ts
+var _TimeLine = TimeLine_default;
+var _TimeLineResizer = TimeLineResizer_default;
+var _Cursor = Cursor;
+var index_default = _TimeLineResizer;
+
+exports.Cursor = _Cursor;
+exports.TimeLine = _TimeLine;
+exports.default = index_default;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map