@evercam/ui 0.0.54 → 0.0.55-beta.1

package/dist/index.mjs

@@ -2112,10 +2112,10 @@ var Ji = {}, Zr = {}, ei = {};
     value: !0
   });
   function e(F, V) {
-    for (var G in V)
-      Object.defineProperty(F, G, {
+    for (var H in V)
+      Object.defineProperty(F, H, {
         enumerable: !0,
-        get: V[G]
+        get: V[H]
       });
   }
   e(s, {
@@ -2177,12 +2177,12 @@ var Ji = {}, Zr = {}, ei = {};
   }
   const o = "--tw-placeholder", l = new RegExp(o, "g");
   function c(F, V = !0) {
-    return F.startsWith("--") ? `var(${F})` : F.includes("url(") ? F.split(/(url\(.*?\))/g).filter(Boolean).map((G) => /^url\(.*?\)$/.test(G) ? G : c(G, !1)).join("") : (F = F.replace(/([^\\])_+/g, (G, M) => M + " ".repeat(G.length - 1)).replace(/^_/g, " ").replace(/\\_/g, "_"), V && (F = F.trim()), F = u(F), F);
+    return F.startsWith("--") ? `var(${F})` : F.includes("url(") ? F.split(/(url\(.*?\))/g).filter(Boolean).map((H) => /^url\(.*?\)$/.test(H) ? H : c(H, !1)).join("") : (F = F.replace(/([^\\])_+/g, (H, M) => M + " ".repeat(H.length - 1)).replace(/^_/g, " ").replace(/\\_/g, "_"), V && (F = F.trim()), F = u(F), F);
   }
   function u(F) {
     return F.replace(/(calc|min|max|clamp)\(.+\)/g, (V) => {
-      let G = [];
-      return V.replace(/var\((--.+?)[,)]/g, (M, Q) => (G.push(Q), M.replace(Q, o))).replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ").replace(l, () => G.shift());
+      let H = [];
+      return V.replace(/var\((--.+?)[,)]/g, (M, Q) => (H.push(Q), M.replace(Q, o))).replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ").replace(l, () => H.shift());
     });
   }
   function h(F) {
@@ -2240,8 +2240,8 @@ var Ji = {}, Zr = {}, ei = {};
   }
   function x(F) {
     let V = (0, i.parseBoxShadowValue)(c(F));
-    for (let G of V)
-      if (!G.valid)
+    for (let H of V)
+      if (!H.valid)
         return !1;
     return !0;
   }
@@ -2454,8 +2454,8 @@ var Qr = {};
     }
     let [$, O] = m(C);
     if (O !== void 0) {
-      var U, F, V, G;
-      let M = (G = (U = b.values) === null || U === void 0 ? void 0 : U[$]) !== null && G !== void 0 ? G : f($) ? $.slice(1, -1) : void 0;
+      var U, F, V, H;
+      let M = (H = (U = b.values) === null || U === void 0 ? void 0 : U[$]) !== null && H !== void 0 ? H : f($) ? $.slice(1, -1) : void 0;
       return M === void 0 ? void 0 : (M = g(M), f(O) ? (0, i.withAlphaValue)(M, y(O)) : ((F = D.theme) === null || F === void 0 || (V = F.opacity) === null || V === void 0 ? void 0 : V[O]) === void 0 ? void 0 : (0, i.withAlphaValue)(M, D.theme.opacity[O]));
     }
     return d(C, b, {
@@ -2534,16 +2534,16 @@ var Qr = {};
     let I = (0, o.flagEnabled)(P, "generalizedModifiers"), [$, O] = m(b);
     if (I && D.modifiers != null && (D.modifiers === "any" || typeof D.modifiers == "object" && (O && f(O) || O in D.modifiers)) || ($ = b, O = void 0), O !== void 0 && $ === "" && ($ = "DEFAULT"), O !== void 0 && typeof D.modifiers == "object") {
       var F, V;
-      let G = (V = (F = D.modifiers) === null || F === void 0 ? void 0 : F[O]) !== null && V !== void 0 ? V : null;
-      G !== null ? O = G : f(O) && (O = y(O));
+      let H = (V = (F = D.modifiers) === null || F === void 0 ? void 0 : F[O]) !== null && V !== void 0 ? V : null;
+      H !== null ? O = H : f(O) && (O = y(O));
     }
-    for (let { type: G } of C != null ? C : []) {
-      let M = L[G]($, D, {
+    for (let { type: H } of C != null ? C : []) {
+      let M = L[H]($, D, {
         tailwindConfig: P
       });
       M !== void 0 && (yield [
         M,
-        G,
+        H,
         O != null ? O : null
       ]);
     }
@@ -2662,8 +2662,8 @@ var Jr = {};
           V = V[U[F++]], V = m(V) && (U.alpha === void 0 || F <= U.length - 1) ? V(I, y) : V;
         if (V !== void 0) {
           if (U.alpha !== void 0) {
-            let G = (0, u.parseColorFormat)(V);
-            return (0, h.withAlphaValue)(G, U.alpha, (0, d.default)(G));
+            let H = (0, u.parseColorFormat)(V);
+            return (0, h.withAlphaValue)(H, U.alpha, (0, d.default)(H));
           }
           return (0, l.default)(V) ? (0, c.cloneDeep)(V) : V;
         }
@@ -5430,14 +5430,14 @@ function As(s, e) {
           let O = 0;
           const U = (b & 512) !== 0;
           let F = 0;
-          const V = (b & 1024) !== 0, G = (b & 2048) !== 0;
+          const V = (b & 1024) !== 0, H = (b & 2048) !== 0;
           let M = 0;
           const Q = z(B, 4);
           let Z = 8;
           D && (P = z(B, Z), Z += 4), I && (Z += 4);
           let ee = P + c;
           for (let ae = 0; ae < Q; ae++) {
-            if ($ ? (O = z(B, Z), Z += 4) : O = x, U ? (F = z(B, Z), Z += 4) : F = E, V && (Z += 4), G && (C === 0 ? M = z(B, Z) : M = mn(B, Z), Z += 4), e.type === te.VIDEO) {
+            if ($ ? (O = z(B, Z), Z += 4) : O = x, U ? (F = z(B, Z), Z += 4) : F = E, V && (Z += 4), H && (C === 0 ? M = z(B, Z) : M = mn(B, Z), Z += 4), e.type === te.VIDEO) {
               let ce = 0;
               for (; ce < F; ) {
                 const fe = z(i, ee);
@@ -8409,11 +8409,11 @@ class kl {
       const O = this.codecTiers || (this.codecTiers = _l(m, b, t, i)), U = Cl(O, k, e, B, C), {
         codecSet: F,
         videoRanges: V,
-        minFramerate: G,
+        minFramerate: H,
         minBitrate: M,
         preferHDR: Q
       } = U;
-      E = F, k = Q ? V[V.length - 1] : V[0], R = G, e = Math.max(e, M), S.log(`[abr] picked start tier ${JSON.stringify(U)}`);
+      E = F, k = Q ? V[V.length - 1] : V[0], R = H, e = Math.max(e, M), S.log(`[abr] picked start tier ${JSON.stringify(U)}`);
     } else
       E = T == null ? void 0 : T.codecSet, k = T == null ? void 0 : T.videoRange;
     const D = f ? f.duration : d ? d.duration : 0, P = this.bwEstimator.getEstimateTTFB() / 1e3, I = [];
@@ -8436,10 +8436,10 @@ class kl {
         I.push(O);
         continue;
       }
-      const V = U.details, G = (f ? V == null ? void 0 : V.partTarget : V == null ? void 0 : V.averagetargetduration) || D;
+      const V = U.details, H = (f ? V == null ? void 0 : V.partTarget : V == null ? void 0 : V.averagetargetduration) || D;
       let M;
       F ? M = o * e : M = a * e;
-      const Q = D && r >= D * 2 && n === 0 ? m[O].averageBitrate : m[O].maxBitrate, Z = this.getTimeToLoadFrag(P, M, Q * G, V === void 0);
+      const Q = D && r >= D * 2 && n === 0 ? m[O].averageBitrate : m[O].maxBitrate, Z = this.getTimeToLoadFrag(P, M, Q * H, V === void 0);
       if (
         // if adjusted bw is greater than level bitrate AND
         M >= Q && // no level change, or new level has no error history
@@ -8449,7 +8449,7 @@ class kl {
         (Z <= P || !W(Z) || x && !this.bitrateTestDelay || Z < c)
       ) {
         const ae = this.forcedAutoLevel;
-        return O !== y && (ae === -1 || ae !== y) && (I.length && S.trace(`[abr] Skipped level(s) ${I.join(",")} of ${i} max with CODECS and VIDEO-RANGE:"${m[I[0]].codecs}" ${m[I[0]].videoRange}; not compatible with "${T.codecs}" ${k}`), S.info(`[abr] switch candidate:${h}->${O} adjustedbw(${Math.round(M)})-bitrate=${Math.round(M - Q)} ttfb:${P.toFixed(1)} avgDuration:${G.toFixed(1)} maxFetchDuration:${c.toFixed(1)} fetchDuration:${Z.toFixed(1)} firstSelection:${L} codecSet:${E} videoRange:${k} hls.loadLevel:${y}`)), L && (this.firstSelection = O), O;
+        return O !== y && (ae === -1 || ae !== y) && (I.length && S.trace(`[abr] Skipped level(s) ${I.join(",")} of ${i} max with CODECS and VIDEO-RANGE:"${m[I[0]].codecs}" ${m[I[0]].videoRange}; not compatible with "${T.codecs}" ${k}`), S.info(`[abr] switch candidate:${h}->${O} adjustedbw(${Math.round(M)})-bitrate=${Math.round(M - Q)} ttfb:${P.toFixed(1)} avgDuration:${H.toFixed(1)} maxFetchDuration:${c.toFixed(1)} fetchDuration:${Z.toFixed(1)} firstSelection:${L} codecSet:${E} videoRange:${k} hls.loadLevel:${y}`)), L && (this.firstSelection = O), O;
       }
     }
     return -1;
@@ -12642,36 +12642,36 @@ class Mt {
     const n = e.inputTimeScale, a = e.samples, o = [], l = a.length, c = this._initPTS;
     let u = this.nextAvcDts, h = 8, d = this.videoSampleDuration, f, m, g = Number.POSITIVE_INFINITY, y = Number.NEGATIVE_INFINITY, v = !1;
     if (!i || u === null) {
-      const G = t * n, M = a[0].pts - Se(a[0].dts, a[0].pts);
-      st && u !== null && Math.abs(G - M - u) < 15e3 ? i = !0 : u = G - M;
+      const H = t * n, M = a[0].pts - Se(a[0].dts, a[0].pts);
+      st && u !== null && Math.abs(H - M - u) < 15e3 ? i = !0 : u = H - M;
     }
     const T = c.baseTime * n / c.timescale;
-    for (let G = 0; G < l; G++) {
-      const M = a[G];
-      M.pts = Se(M.pts - T, u), M.dts = Se(M.dts - T, u), M.dts < a[G > 0 ? G - 1 : G].dts && (v = !0);
+    for (let H = 0; H < l; H++) {
+      const M = a[H];
+      M.pts = Se(M.pts - T, u), M.dts = Se(M.dts - T, u), M.dts < a[H > 0 ? H - 1 : H].dts && (v = !0);
     }
-    v && a.sort(function(G, M) {
-      const Q = G.dts - M.dts, Z = G.pts - M.pts;
+    v && a.sort(function(H, M) {
+      const Q = H.dts - M.dts, Z = H.pts - M.pts;
       return Q || Z;
     }), f = a[0].dts, m = a[a.length - 1].dts;
     const x = m - f, L = x ? Math.round(x / (l - 1)) : d || e.inputTimeScale / 30;
     if (i) {
-      const G = f - u, M = G > L, Q = G < -1;
-      if ((M || Q) && (M ? S.warn(`AVC: ${mt(G, !0)} ms (${G}dts) hole between fragments detected at ${t.toFixed(3)}`) : S.warn(`AVC: ${mt(-G, !0)} ms (${G}dts) overlapping between fragments detected at ${t.toFixed(3)}`), !Q || u >= a[0].pts || st)) {
+      const H = f - u, M = H > L, Q = H < -1;
+      if ((M || Q) && (M ? S.warn(`AVC: ${mt(H, !0)} ms (${H}dts) hole between fragments detected at ${t.toFixed(3)}`) : S.warn(`AVC: ${mt(-H, !0)} ms (${H}dts) overlapping between fragments detected at ${t.toFixed(3)}`), !Q || u >= a[0].pts || st)) {
         f = u;
-        const Z = a[0].pts - G;
+        const Z = a[0].pts - H;
         if (M)
           a[0].dts = f, a[0].pts = Z;
         else
           for (let ee = 0; ee < a.length && !(a[ee].dts > Z); ee++)
-            a[ee].dts -= G, a[ee].pts -= G;
-        S.log(`Video: Initial PTS/DTS adjusted: ${mt(Z, !0)}/${mt(f, !0)}, delta: ${mt(G, !0)} ms`);
+            a[ee].dts -= H, a[ee].pts -= H;
+        S.log(`Video: Initial PTS/DTS adjusted: ${mt(Z, !0)}/${mt(f, !0)}, delta: ${mt(H, !0)} ms`);
       }
     }
     f = Math.max(0, f);
     let E = 0, k = 0, R = f;
-    for (let G = 0; G < l; G++) {
-      const M = a[G], Q = M.units, Z = Q.length;
+    for (let H = 0; H < l; H++) {
+      const M = a[H], Q = M.units, Z = Q.length;
       let ee = 0;
       for (let ae = 0; ae < Z; ae++)
         ee += Q[ae].data.length;
@@ -12682,12 +12682,12 @@ class Mt {
     let C;
     try {
       C = new Uint8Array(B);
-    } catch (G) {
+    } catch (H) {
       this.observer.emit(p.ERROR, p.ERROR, {
         type: q.MUX_ERROR,
         details: _.REMUX_ALLOC_ERROR,
         fatal: !1,
-        error: G,
+        error: H,
         bytes: B,
         reason: `fail allocating video mdat ${B}`
       });
@@ -12696,19 +12696,19 @@ class Mt {
     const b = new DataView(C.buffer);
     b.setUint32(0, B), C.set(A.types.mdat, 4);
     let D = !1, P = Number.POSITIVE_INFINITY, I = Number.POSITIVE_INFINITY, $ = Number.NEGATIVE_INFINITY, O = Number.NEGATIVE_INFINITY;
-    for (let G = 0; G < l; G++) {
-      const M = a[G], Q = M.units;
+    for (let H = 0; H < l; H++) {
+      const M = a[H], Q = M.units;
       let Z = 0;
       for (let ce = 0, fe = Q.length; ce < fe; ce++) {
         const Te = Q[ce], ft = Te.data, si = Te.data.byteLength;
         b.setUint32(h, si), h += 4, C.set(ft, h), h += si, Z += 4 + si;
       }
       let ee;
-      if (G < l - 1)
-        d = a[G + 1].dts - M.dts, ee = a[G + 1].pts - M.pts;
+      if (H < l - 1)
+        d = a[H + 1].dts - M.dts, ee = a[H + 1].pts - M.pts;
       else {
-        const ce = this.config, fe = G > 0 ? M.dts - a[G - 1].dts : L;
-        if (ee = G > 0 ? M.pts - a[G - 1].pts : L, ce.stretchShortVideoTrack && this.nextAudioPts !== null) {
+        const ce = this.config, fe = H > 0 ? M.dts - a[H - 1].dts : L;
+        if (ee = H > 0 ? M.pts - a[H - 1].pts : L, ce.stretchShortVideoTrack && this.nextAudioPts !== null) {
           const Te = Math.floor(ce.maxBufferHole * n), ft = (r ? g + r * n : this.nextAudioPts) - M.pts;
           ft > Te ? (d = ft - fe, d < 0 ? d = fe : D = !0, S.log(`[mp4-remuxer]: It is approximately ${ft / 90} ms to the next segment; using duration ${d / 90} ms for the last video frame.`)) : d = fe;
         } else
@@ -12720,20 +12720,20 @@ class Mt {
     if (o.length) {
       if (st) {
         if (st < 70) {
-          const G = o[0].flags;
-          G.dependsOn = 2, G.isNonSync = 0;
+          const H = o[0].flags;
+          H.dependsOn = 2, H.isNonSync = 0;
         }
       } else if (yi && O - I < $ - P && L / $ < 0.025 && o[0].cts === 0) {
         S.warn("Found irregular gaps in sample duration. Using PTS instead of DTS to determine MP4 sample duration.");
-        let G = f;
+        let H = f;
         for (let M = 0, Q = o.length; M < Q; M++) {
-          const Z = G + o[M].duration, ee = G + o[M].cts;
+          const Z = H + o[M].duration, ee = H + o[M].cts;
           if (M < Q - 1) {
             const ae = Z + o[M + 1].cts;
             o[M].duration = ae - ee;
           } else
             o[M].duration = M ? o[M - 1].duration : L;
-          o[M].cts = 0, G = Z;
+          o[M].cts = 0, H = Z;
         }
       }
     }
@@ -12779,7 +12779,7 @@ class Mt {
     if (e.segmentCodec === "aac") {
       const U = this.config.maxAudioFramesDrift;
       for (let F = 0, V = v; F < g.length; F++) {
-        const G = g[F], M = G.pts, Q = M - V, Z = Math.abs(1e3 * Q / a);
+        const H = g[F], M = H.pts, Q = M - V, Z = Math.abs(1e3 * Q / a);
         if (Q <= -U * u && m)
           F === 0 && (S.warn(`Audio frame @ ${(M / a).toFixed(3)}s overlaps nextAudioPts by ${Math.round(1e3 * Q / a)} ms.`), this.nextAudioPts = v = V = M);
         else if (Q >= U * u && Z < Tc && m) {
@@ -12788,20 +12788,20 @@ class Mt {
           for (let ae = 0; ae < ee; ae++) {
             const ce = Math.max(V, 0);
             let fe = Qs.getSilentFrame(e.manifestCodec || e.codec, e.channelCount);
-            fe || (S.log("[mp4-remuxer]: Unable to get silent frame for given audio codec; duplicating last frame instead."), fe = G.unit.subarray()), g.splice(F, 0, {
+            fe || (S.log("[mp4-remuxer]: Unable to get silent frame for given audio codec; duplicating last frame instead."), fe = H.unit.subarray()), g.splice(F, 0, {
               unit: fe,
               pts: ce
             }), V += u, F++;
           }
         }
-        G.pts = V, V += u;
+        H.pts = V, V += u;
       }
     }
     let L = null, E = null, k, R = 0, B = g.length;
     for (; B--; )
       R += g[B].unit.byteLength;
     for (let U = 0, F = g.length; U < F; U++) {
-      const V = g[U], G = V.unit;
+      const V = g[U], H = V.unit;
       let M = V.pts;
       if (E !== null) {
         const Z = f[U - 1];
@@ -12824,8 +12824,8 @@ class Mt {
         d || (new DataView(k.buffer).setUint32(0, R), k.set(A.types.mdat, 4));
       } else
         return;
-      k.set(G, y);
-      const Q = G.byteLength;
+      k.set(H, y);
+      const Q = H.byteLength;
       y += Q, f.push(new er(!0, c, Q, 0)), E = M;
     }
     const C = f.length;
@@ -21268,7 +21268,10 @@ const Ci = new Intl.NumberFormat(void 0, {
       });
     },
     bindVideoEvent(s) {
-      const e = this.$refs.player, t = this.$refs.timelineContainer;
+      const e = this.$refs.player;
+      if (!e)
+        return;
+      const t = this.$refs.timelineContainer;
       s === "loadeddata" && (this.videoLength = Di(e.duration)), s === "timeupdate" && (this.percentagePlayed = (e == null ? void 0 : e.currentTime) / e.duration * 100, t.style.setProperty(
         "--progress-position",
         this.percentagePlayed.toString()
@@ -21455,7 +21458,7 @@ var Th = function() {
   Eh,
   !1,
   null,
-  "160e835f",
+  "9071f674",
   null,
   null
 );
@@ -21950,10 +21953,16 @@ const Ah = {
   data() {
     return {
       milestoneClasses: Ye,
-      timeouts: []
+      timeouts: [],
+      isInitialRender: !0
     };
   },
   computed: {
+    transitionStyles() {
+      return this.isInitialRender ? {} : {
+        transition: `transform ${this.transitionDuration}ms, width ${this.transitionDuration}ms, height ${this.transitionDuration}ms, padding ${this.transitionDuration}ms, border-radius ${this.transitionDuration}ms`
+      };
+    },
     styles() {
       return {
         width: `${this.size}px`,
@@ -21962,13 +21971,11 @@ const Ah = {
         borderColor: this.borderColor,
         borderWidth: `${this.borderWidth}px`,
         borderStyle: "solid",
-        transition: `transform ${this.transitionDuration}ms, width ${this.transitionDuration}ms, height ${this.transitionDuration}ms, padding ${this.transitionDuration}ms, border-radius ${this.transitionDuration}ms`
+        ...this.transitionStyles
       };
     },
     contentStyles() {
-      return {
-        transition: `width ${this.transitionDuration}ms, opacity ${this.transitionDuration}ms, fontSize ${this.transitionDuration}ms, fontWeight ${this.transitionDuration}ms`
-      };
+      return this.transitionStyles;
     },
     labelStyles() {
       return {
@@ -21976,6 +21983,9 @@ const Ah = {
       };
     }
   },
+  updated() {
+    this.isInitialRender = !1;
+  },
   methods: {
     onMilestoneMouseOver(s, e) {
       const t = s.target;
@@ -22024,7 +22034,7 @@ var Ch = function() {
   null,
   null
 );
-const Ih = _h.exports, H = {
+const Ih = _h.exports, G = {
   eventGroup: "event-group",
   eventGroupBg: "event-group-bg",
   eventRect: "event-rect",
@@ -22054,6 +22064,7 @@ const Ih = _h.exports, H = {
   milestoneHovered: "milestone--hovered",
   barChartGroup: "bar-chart-group",
   lineGraphGroup: "line-graph-group",
+  lineGraphGroupLabel: "line-graph-group-label",
   lineGraphPath: "line-graph-path",
   lineGraphHoverZone: "line-graph-hover-zone",
   lineGraphDot: "line-graph-dot",
@@ -22448,6 +22459,9 @@ const Ih = _h.exports, H = {
     this.clearTimeline(), document.removeEventListener("mouseup", this.handleDocumentMouseUp);
   },
   methods: {
+    updateTimeline() {
+      this.initOrUpdateSvg(), this.updateXAxes(), this.updateYScaleDomain(), this.updateForbiddenIntervals(), this.drawEventsGroups(), this.updateCurtains(), this.repositionSelectedTimestampCursor(), this.updateMarkers(), this.registerEventsListeners(), this.isInitialized = !0;
+    },
     initTimeline(s, e) {
       if (this.initRefs(), !this.timeline || this.timeline.offsetWidth === 0) {
         this.timeouts.push(
@@ -22455,13 +22469,13 @@ const Ih = _h.exports, H = {
         );
         return;
       }
-      this.initSvg(), this.initDefs(), this.initUtcOffset(), this.initTimeScale(s, e), this.initXAxes(), this.initYScale(), this.initZoomBehavior(), this.initForbiddenIntervals(), this.drawEventsGroups(), this.curtains && (this.initCurtains(), this.emitCurtainChange()), this.initSelectedTimestampCursor(), this.updateMarkers(), this.registerEventsListeners(), this.emitVisibleInterval(Pt.initial), this.selectedDate && this.panOnDateClick && this.panToTimestamp(this.selectedDate), this.isInitialized = !0;
+      this.initOrUpdateSvg(), this.initDefs(), this.initUtcOffset(), this.initTimeScale(s, e), this.initXAxes(), this.initYScale(), this.initZoomBehavior(), this.initForbiddenIntervals(), this.drawEventsGroups(), this.curtains && (this.initCurtains(), this.emitCurtainChange()), this.initSelectedTimestampCursor(), this.updateMarkers(), this.registerEventsListeners(), this.emitVisibleInterval(Pt.initial), this.selectedDate && this.panOnDateClick && this.panToTimestamp(this.selectedDate), this.isInitialized = !0;
     },
     initRefs() {
       this.tooltip = this.$refs.tooltip, this.cursor = this.$refs.cursor, this.timeline = this.$refs.timelineContainer, this.selectedTimestampCursor = this.$refs.selectedTimestamp, this.wrapperDiv = this.$refs.wrapperDiv;
     },
-    initSvg() {
-      this.svg = w.select(this.timeline).append("svg").attr("width", this.timeline.offsetWidth).attr("height", this.timelineHeight);
+    initOrUpdateSvg() {
+      this.svg || (this.svg = w.select(this.timeline).append("svg")), this.svg.attr("width", this.timeline.offsetWidth).attr("height", this.timelineHeight);
     },
     initDefs() {
       const s = this.svg.append("defs");
@@ -22501,7 +22515,16 @@ const Ih = _h.exports, H = {
       const e = 5;
       for (const t in this.xAxesConfig) {
         const i = this.createAxis(t);
-        this.xAxes[t] = i, this.svg.append("g").classed(H.xAxis, !0).classed(`${H.xAxis}-${t}`, !0).attr("transform", `translate(0, ${s || e})`).call(i), this.translateTicksText(t), s += this.axisHeight;
+        this.xAxes[t] = i, this.svg.append("g").classed(G.xAxis, !0).classed(`${G.xAxis}-${t}`, !0).attr("transform", `translate(0, ${s || e})`).call(i), this.translateTicksText(t), s += this.axisHeight;
+      }
+      this.updateXAxes();
+    },
+    updateXAxes() {
+      let s = 0;
+      const e = 5;
+      for (const t in this.xAxesConfig) {
+        const i = this.xAxes[t];
+        i.tickSizeOuter(0), i.tickSizeInner(this.timelineHeight), this.svg.select(`.${G.xAxis}-${t}`).attr("transform", `translate(0, ${s || e})`).call(i), this.translateTicksText(t), s += this.axisHeight;
       }
     },
     initYScale() {
@@ -22542,7 +22565,7 @@ const Ih = _h.exports, H = {
       );
     },
     initSelectedTimestampCursor() {
-      this.svg.append("line").attr("class", H.selectedTimestampCursor).style("stroke", "red").style("stroke-width", "1px").style("opacity", 0).attr("x1", 0).attr("x2", 0).attr("y1", 0).attr("y2", this.timelineHeight), this.repositionSelectedTimestampCursor();
+      this.svg.append("line").attr("class", G.selectedTimestampCursor).style("stroke", "red").style("stroke-width", "1px").style("opacity", 0).attr("x1", 0).attr("x2", 0).attr("y1", 0), this.repositionSelectedTimestampCursor();
     },
     updateMarkers() {
       if (!this.markers.length)
@@ -22566,20 +22589,19 @@ const Ih = _h.exports, H = {
       }), this.initMarkersDragBehavior();
     },
     updateAndRedrawTimeline() {
-      const { startDate: s, endDate: e } = this.getCurrentTimeBounds();
-      this.clearTimeline(), this.initTimeline(s, e);
+      this.updateTimeline();
     },
     clearTimeline() {
       this.svg && this.svg.remove(), this.countsByTimestamp = {};
     },
     repositionSelectedTimestampCursor() {
-      const s = this.svg.select(`.${H.selectedTimestampCursor}`);
+      const s = this.svg.select(`.${G.selectedTimestampCursor}`);
       if (!this.selectedTimestamp) {
         s.style("opacity", 0);
         return;
       }
       const e = this.tzStringToDate(this.selectedTimestamp), t = this.timeScale(e);
-      isNaN(t) ? s.style("opacity", 0) : s.attr("x1", t).attr("x2", t).style("opacity", 0.5);
+      isNaN(t) ? s.style("opacity", 0) : s.attr("x1", t).attr("x2", t).style("opacity", 0.5), s.attr("y2", this.timelineHeight);
     },
     updateCurrentTimeScaleDensity() {
       const s = this.timeScale.invert(0).getTime(), e = this.timeScale.invert(1).getTime(), t = 36e5, i = (e - s) / t;
@@ -22624,12 +22646,12 @@ const Ih = _h.exports, H = {
       if (!this.showLabels)
         return;
       const s = this;
-      this.svg.selectAll(`.${H.labelBg}`).each(function() {
+      this.svg.selectAll(`.${G.labelBg}`).each(function() {
         w.select(this).style("fill", s.dark ? "black" : "white");
-      }), this.svg.selectAll(`.${H.labelBgFill}`).each(function() {
+      }), this.svg.selectAll(`.${G.labelBgFill}`).each(function() {
         const e = w.select(this), t = e.node().dataset.color;
         e.style("fill", s.getLabelBackgroundColor(t)).style("stroke", s.getTextFillColor(t)).style("stroke-width", 0.25);
-      }), this.svg.selectAll(`.${H.labelText}`).each(function() {
+      }), this.svg.selectAll(`.${G.labelText}`).each(function() {
         const e = w.select(this), t = e.node().dataset.color;
         e.style("fill", s.getTextFillColor(t));
       });
@@ -22693,20 +22715,20 @@ const Ih = _h.exports, H = {
       this.isHoveringEvent = !1, this.hoveredEvent = null, this.$emit("event-mouseout");
     },
     handleLabelMouseOver(s) {
-      w.selectAll(`.${H.lineGraphGroup}-${s}`).classed(
-        `${H.lineGraphGroup}--highlighted`,
+      w.selectAll(`.${G.lineGraphGroup}-${s}`).classed(
+        `${G.lineGraphGroup}--highlighted`,
         !0
-      ), w.selectAll(`.${H.lineGraphGroup}-label`).classed(
-        `${H.lineGraphGroup}-label--highlighted`,
+      ), w.selectAll(`.${G.lineGraphGroupLabel}`).classed(
+        `${G.lineGraphGroupLabel}--highlighted`,
         !0
       );
     },
     handleLabelMouseLeave(s) {
-      w.selectAll(`.${H.lineGraphGroup}-${s}`).classed(
-        `${H.lineGraphGroup}--highlighted`,
+      w.selectAll(`.${G.lineGraphGroup}-${s}`).classed(
+        `${G.lineGraphGroup}--highlighted`,
         !1
-      ), w.selectAll(`.${H.lineGraphGroup}-label`).classed(
-        `${H.lineGraphGroup}-label--highlighted`,
+      ), w.selectAll(`.${G.lineGraphGroupLabel}`).classed(
+        `${G.lineGraphGroupLabel}--highlighted`,
         !1
       );
     },
@@ -22752,7 +22774,7 @@ const Ih = _h.exports, H = {
         s.x,
         this.timeline.offsetWidth - this.rightCurtainWidth
       );
-      this.leftCurtainWidth = Math.max(0, e), this.svg.select(`.${H.curtain}--left`).attr("width", this.leftCurtainWidth), this.emitCurtainChange();
+      this.leftCurtainWidth = Math.max(0, e), this.svg.select(`.${G.curtain}--left`).attr("width", this.leftCurtainWidth), this.emitCurtainChange();
     },
     handleRightDrag(s) {
       s.sourceEvent.stopPropagation();
@@ -22760,7 +22782,7 @@ const Ih = _h.exports, H = {
         this.timeline.offsetWidth - s.x,
         this.timeline.offsetWidth - this.leftCurtainWidth
       ), i = e - t;
-      this.rightCurtainWidth = Math.max(0, t), this.svg.select(`.${H.curtain}--right`).attr("width", this.rightCurtainWidth).attr("x", i), this.emitCurtainChange();
+      this.rightCurtainWidth = Math.max(0, t), this.svg.select(`.${G.curtain}--right`).attr("width", this.rightCurtainWidth).attr("x", i), this.emitCurtainChange();
     },
     zoomToStartAndEndDates() {
       const s = this.startDate || this.oldestEvent.timestamp || this.oldestEvent.startDate, e = this.endDate || this.latestEvent.timestamp || this.latestEvent.endDate, t = this.tzStringToDate(s), i = this.tzStringToDate(e);
@@ -22775,28 +22797,28 @@ const Ih = _h.exports, H = {
       const t = this.xAxes[s], i = this.getAxisTicksConfig(
         this.xAxesConfig[s]
       );
-      t.scale(e).ticks(i.interval).tickFormat(i.formatFn).tickSizeOuter(0), this.svg.select(`.${H.xAxis}-${s}`).call(t);
+      t.scale(e).ticks(i.interval).tickFormat(i.formatFn).tickSizeOuter(0), this.svg.select(`.${G.xAxis}-${s}`).call(t);
     },
     translateTicksText(s) {
-      this.svg.select(`.${H.xAxis}-${s}`).selectAll(".tick text").each(function() {
+      this.svg.select(`.${G.xAxis}-${s}`).selectAll(".tick text").each(function() {
         let e = w.select(this), t = e.node().getBBox();
         e.attr("x", t.height / 2).attr("y", 0).style("text-anchor", "start");
       });
     },
     updateEventsBars() {
-      const s = `.${H.eventGroup} > rect.${H.eventRect}`;
+      const s = `.${G.eventGroup} > rect.${G.eventRect}`;
       this.svg.selectAll(s).attr("x", this.getEventRectX).attr("width", this.getEventRectWidth);
-      const e = `.${H.eventGroup} > text.${H.eventRectText}`;
+      const e = `.${G.eventGroup} > text.${G.eventRectText}`;
       this.svg.selectAll(e).attr("x", (t) => this.getEventRectX(t) + this.textPadding).text(this.getEventText);
     },
     updateBarChart() {
       const s = Object.keys(this.barChartGroups).length;
       Object.keys(this.barChartGroups).forEach((e, t) => {
-        const i = (d) => (this.getEventRectWidth(d) - this.barXPadding * 2) / s, r = (d) => this.yScale.range()[0] - this.yScale(d.count), n = (d) => this.getEventRectX(d) + this.barXPadding + t * i(d), a = (d) => this.yScale(d.count), o = `.${H.eventBarContainer}-${e}`, l = this.svg.selectAll(o), c = `.${H.barChartGroup} rect.${H.eventBarHoverZone}`;
+        const i = (d) => (this.getEventRectWidth(d) - this.barXPadding * 2) / s, r = (d) => this.yScale.range()[0] - this.yScale(d.count), n = (d) => this.getEventRectX(d) + this.barXPadding + t * i(d), a = (d) => this.yScale(d.count), o = `.${G.eventBarContainer}-${e}`, l = this.svg.selectAll(o), c = `.${G.barChartGroup} rect.${G.eventBarHoverZone}`;
         l.selectAll(c).attr("x", n).attr("width", i);
-        const u = `.${H.barChartGroup} rect.${H.eventBar}`;
+        const u = `.${G.barChartGroup} rect.${G.eventBar}`;
         l.selectAll(u).attr("x", n).attr("width", i).attr("y", a).attr("height", r);
-        const h = `.${H.barChartGroup} rect.${H.eventBarCap}`;
+        const h = `.${G.barChartGroup} rect.${G.eventBarCap}`;
         l.selectAll(h).attr("x", n).attr("width", i).attr("y", a);
       });
     },
@@ -22804,7 +22826,7 @@ const Ih = _h.exports, H = {
       Object.entries(this.lineGraphGroups).forEach(([s]) => {
         const e = w.area().x((t) => this.timeScale(this.tzStringToDate(t.timestamp))).y0(this.timelineHeight).y1((t) => this.yScale(t.count)).curve(w.curveMonotoneX);
         this.svg.selectAll(
-          `.${H.lineGraphPath}-${s}`
+          `.${G.lineGraphPath}-${s}`
         ).attr("d", (t) => e(t));
       });
     },
@@ -22812,11 +22834,11 @@ const Ih = _h.exports, H = {
       Object.keys(this.lineGraphGroups).forEach((s) => {
         const e = this;
         this.svg.selectAll(
-          `.${H.lineGraphDot}-${s}`
+          `.${G.lineGraphDot}-${s}`
         ).each(function(t) {
           w.select(this).attr("cx", e.timeScale(e.tzStringToDate(t.timestamp))).attr("cy", e.yScale(t.count));
         }), this.svg.selectAll(
-          `.${H.lineGraphHoverZone}-${s}`
+          `.${G.lineGraphHoverZone}-${s}`
         ).each(function(t) {
           const i = e.timeScale(e.tzStringToDate(t.timestamp).getTime()) - 15;
           w.select(this).attr("x", i).attr("y", 0).attr("width", 30).attr("height", e.chartHeight);
@@ -22858,7 +22880,7 @@ const Ih = _h.exports, H = {
     }) {
       if (!s.isDraggable)
         return;
-      t.type === "start" && (this.initialMarkerDragMouseOffset = t.x - e.node().querySelector(`.${H.markerLine}`).getBoundingClientRect().left, e.classed(H.markerDragged, !0));
+      t.type === "start" && (this.initialMarkerDragMouseOffset = t.x - e.node().querySelector(`.${G.markerLine}`).getBoundingClientRect().left, e.classed(G.markerDragged, !0));
       const i = t.x - this.initialMarkerDragMouseOffset, r = this.timeScale.invert(
         i - this.svg.node().getBoundingClientRect().left
       ), n = this.timeScale(r), a = this.isTimestampAllowedForMarker(
@@ -22871,13 +22893,13 @@ const Ih = _h.exports, H = {
           ...this.markersPositions[s.id || s.timestamp],
           position: n
         }
-      }, e.classed(H.markerDragged, !1)), t.type !== "start" && this.$emit(`marker-drag-${t.type}`, {
+      }, e.classed(G.markerDragged, !1)), t.type !== "start" && this.$emit(`marker-drag-${t.type}`, {
         marker: s,
         newTimestamp: r.toISOString()
       });
     },
     removeMarkersDragBehavior() {
-      this.markersDragBehavior && (this.markersDragBehavior.on("start", null).on("drag", null).on("end", null), w.selectAll(`.${H.marker}`).call(
+      this.markersDragBehavior && (this.markersDragBehavior.on("start", null).on("drag", null).on("end", null), w.selectAll(`.${G.marker}`).call(
         this.markersDragBehavior
       ));
     },
@@ -22903,49 +22925,53 @@ const Ih = _h.exports, H = {
           markerElement: w.select(this),
           dragEvent: e
         });
-      }), w.selectAll(`.${H.marker}`).data(this.sortedMarkers).call(this.markersDragBehavior);
+      }), w.selectAll(`.${G.marker}`).data(this.sortedMarkers).call(this.markersDragBehavior);
     },
     initCurtains() {
-      if (!this.curtains)
-        return;
-      const s = this.timeline.offsetWidth, e = this.timelineHeight;
-      this.svg.append("rect").classed(`${H.curtain} ${H.curtain}--left`, !0).attr("width", this.leftCurtainWidth).attr("height", e + this.curtainHandleWidth * 2).attr("y", -this.curtainHandleWidth).attr("x", -this.curtainHandleWidth).attr("fill", "rgba(0, 0, 0, 0.5)").on("mouseenter", () => this.isHoveringCurtain = !0).on("mouseleave", () => this.isHoveringCurtain = !1).call(
+      this.createCurtains(), this.updateCurtains();
+    },
+    createCurtains() {
+      this.curtains && (this.svg.append("rect").classed(`${G.curtain} ${G.curtain}--left`, !0).attr("fill", "rgba(0, 0, 0, 0.5)").on("mouseenter", () => this.isHoveringCurtain = !0).on("mouseleave", () => this.isHoveringCurtain = !1).call(
         w.drag().on("start", this.handleDragStart).on("drag", this.handleLeftDrag).on("end", this.handleDragEnd)
-      ), this.svg.append("rect").classed(`${H.curtain} ${H.curtain}--right`, !0).attr(
-        "x",
-        s - this.rightCurtainWidth + this.curtainHandleWidth * 2
-      ).attr("y", -this.curtainHandleWidth).attr("width", this.rightCurtainWidth + this.curtainHandleWidth * 2).attr("height", e + this.curtainHandleWidth * 2).attr("fill", "rgba(0, 0, 0, 0.5)").on("mouseenter", () => this.isHoveringCurtain = !0).on("mouseleave", () => this.isHoveringCurtain = !1).call(
+      ), this.svg.append("rect").classed(`${G.curtain} ${G.curtain}--right`, !0).attr("fill", "rgba(0, 0, 0, 0.5)").on("mouseenter", () => this.isHoveringCurtain = !0).on("mouseleave", () => this.isHoveringCurtain = !1).call(
         w.drag().on("start", this.handleDragStart).on("drag", this.handleRightDrag).on("end", this.handleDragEnd)
-      );
+      ), this.updateCurtains());
+    },
+    updateCurtains() {
+      const s = this.timeline.offsetWidth, e = this.timelineHeight;
+      this.svg.select(`.${G.curtain}--left`).attr("width", this.leftCurtainWidth).attr("height", e + this.curtainHandleWidth * 2).attr("y", -this.curtainHandleWidth).attr("x", -this.curtainHandleWidth), this.svg.select(`.${G.curtain}--right`).attr(
+        "x",
+        s - this.rightCurtainWidth + this.curtainHandleWidth
+      ).attr("y", -this.curtainHandleWidth).attr("width", this.rightCurtainWidth + this.curtainHandleWidth * 2).attr("height", e + this.curtainHandleWidth * 2);
     },
     initForbiddenIntervals() {
       this.minDate && this.svg.append("rect").attr(
         "class",
-        `${H.forbiddenInterval} ${H.forbiddenInterval}--min`
+        `${G.forbiddenInterval} ${G.forbiddenInterval}--min`
       ), this.maxDate && this.svg.append("rect").attr(
         "class",
-        `${H.forbiddenInterval} ${H.forbiddenInterval}--max`
+        `${G.forbiddenInterval} ${G.forbiddenInterval}--max`
       ), this.updateForbiddenIntervals();
     },
     updateForbiddenIntervals() {
       const s = this.minDate ? this.tzStringToDate(this.minDate).getTime() : null, e = this.maxDate ? this.tzStringToDate(this.maxDate).getTime() : null;
       if (s) {
         const t = this.timeScale(s);
-        this.svg.select(`.${H.forbiddenInterval}--min`).attr("x", 0).attr("y", 0).attr("width", t > 0 ? t : 0).attr("height", this.timelineHeight).attr("fill", `url(#${De.stripedPattern})`);
+        this.svg.select(`.${G.forbiddenInterval}--min`).attr("x", 0).attr("y", 0).attr("width", t > 0 ? t : 0).attr("height", this.timelineHeight).attr("fill", `url(#${De.stripedPattern})`);
       }
       if (e) {
         const t = this.timeline.offsetWidth - this.timeScale(e), i = this.timeScale(e);
-        this.svg.select(`.${H.forbiddenInterval}--max`).attr("x", i > 0 ? i : 0).attr("y", 0).attr("width", t > 0 ? t : 0).attr("height", this.timelineHeight).attr("fill", `url(#${De.stripedPattern})`);
+        this.svg.select(`.${G.forbiddenInterval}--max`).attr("x", i > 0 ? i : 0).attr("y", 0).attr("width", t > 0 ? t : 0).attr("height", this.timelineHeight).attr("fill", `url(#${De.stripedPattern})`);
       }
     },
     drawEventsGroups() {
-      this.svg.selectAll(`g.${H.eventGroup}`).remove(), this.drawLineGraphEventsGroups(), this.drawBarEventsGroups(), this.drawBarChartEventsGroups(), this.drawMilestonesPlaceholder();
+      this.svg.selectAll(`g.${G.eventGroup}`).remove(), this.svg.selectAll(`.${G.barChartGroup}`).remove(), this.svg.selectAll(`.${G.lineGraphGroup}`).remove(), this.svg.selectAll(`.${G.lineGraphGroupLabel}`).remove(), this.svg.selectAll(`.${G.loadingIndicator}`).remove(), this.drawLineGraphEventsGroups(), this.drawBarEventsGroups(), this.drawBarChartEventsGroups(), this.drawMilestonesPlaceholder();
     },
     drawLineGraphEventsGroups() {
       const s = this.combinedXAxesHeight, e = this.insertZerosAtInterval ? this.filledGapsLineGraphGroups : this.lineGraphGroups;
       Object.entries(e).forEach(([t, i]) => {
         const r = this.svg.append("g").classed(
-          `${H.lineGraphGroup} ${H.lineGraphGroup}-${t}`,
+          `${G.lineGraphGroup} ${G.lineGraphGroup}-${t}`,
           !0
         ).attr("transform", `translate(0,${s})`), { color: n, events: a } = i;
         this.drawLineGraph({
@@ -22961,7 +22987,7 @@ const Ih = _h.exports, H = {
         });
       }), Object.entries(this.lineGraphGroups).forEach(
         ([t, i], r) => {
-          const { color: n, isLoading: a, label: o } = i, l = this.chartHeight - this.barChartHeight * (r + 1), c = s + this.chartHeight - this.barChartHeight, u = this.svg.append("g").classed(`${H.lineGraphGroup}-label`, !0).attr("transform", `translate(0,${s})`).on("mouseover", () => this.handleLabelMouseOver(t)).on("mouseleave", () => this.handleLabelMouseLeave(t));
+          const { color: n, isLoading: a, label: o } = i, l = this.chartHeight - this.barChartHeight * (r + 1), c = s + this.chartHeight - this.barChartHeight, u = this.svg.append("g").classed(G.lineGraphGroupLabel, !0).attr("transform", `translate(0,${s})`).on("mouseover", () => this.handleLabelMouseOver(t)).on("mouseleave", () => this.handleLabelMouseLeave(t));
           this.drawProgressIndicator({
             type: t,
             color: n,
@@ -22984,7 +23010,7 @@ const Ih = _h.exports, H = {
       type: i
     }) {
       const r = w.area().x((a) => this.timeScale(this.tzStringToDate(a.timestamp))).y0(this.timelineHeight).y1((a) => this.yScale(a.count)).curve(w.curveMonotoneX), n = `clip-${i}`;
-      e.append("defs").append("clipPath").attr("id", n).append("rect").attr("width", this.timeline.offsetWidth).attr("height", this.chartHeight), e.append("path").datum(s).classed(`${H.lineGraphPath}-${i}`, !0).attr("fill", `url(#${De.transparencyGradientLight}-${i})`).attr("stroke", t).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1).attr("d", (a) => r(a)).attr("clip-path", `url(#${n})`);
+      e.append("defs").append("clipPath").attr("id", n).append("rect").attr("width", this.timeline.offsetWidth).attr("height", this.chartHeight), e.append("path").datum(s).classed(`${G.lineGraphPath}-${i}`, !0).attr("fill", `url(#${De.transparencyGradientLight}-${i})`).attr("stroke", t).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1).attr("d", (a) => r(a)).attr("clip-path", `url(#${n})`);
     },
     drawLineGraphHoverZones({
       events: s,
@@ -22999,19 +23025,19 @@ const Ih = _h.exports, H = {
           [i]: r.count
         };
         const a = e.append("circle").classed(
-          `${H.lineGraphDot} ${H.lineGraphDot}-${i}`,
+          `${G.lineGraphDot} ${G.lineGraphDot}-${i}`,
           !0
         ).attr("cx", this.timeScale(this.tzStringToDate(r.timestamp))).attr("cy", this.yScale(r.count)).attr("r", 1.5).attr("fill", t).attr("stroke-width", 0).datum(r);
         this.dotsByTimestamp[n] = [
           ...this.dotsByTimestamp[n] || [],
           a
-        ], e.append("rect").classed(`${H.lineGraphHoverZone}-${i}`, !0).attr("x", this.timeScale(this.tzStringToDate(r.timestamp)) - 15).attr("y", 0).attr("width", 30).attr("height", this.chartHeight).attr("fill", "transparent").datum(r).on("mouseover", (o) => {
+        ], e.append("rect").classed(`${G.lineGraphHoverZone}-${i}`, !0).attr("x", this.timeScale(this.tzStringToDate(r.timestamp)) - 15).attr("y", 0).attr("width", 30).attr("height", this.chartHeight).attr("fill", "transparent").datum(r).on("mouseover", (o) => {
           this.handleLineMouseOver(o, r, i), this.dotsByTimestamp[n].forEach(
-            (l) => l.classed(`${H.lineGraphDot}--active`, !0)
+            (l) => l.classed(`${G.lineGraphDot}--active`, !0)
           );
         }).on("mouseout", () => {
           this.handleLineMouseOut(), this.dotsByTimestamp[n].forEach(
-            (o) => o.classed(`${H.lineGraphDot}--active`, !1)
+            (o) => o.classed(`${G.lineGraphDot}--active`, !1)
           );
         });
       });
@@ -23031,7 +23057,7 @@ const Ih = _h.exports, H = {
         color: n,
         isLoading: c
       });
-      const d = this.svg.append("g").attr("data-color", n).classed(H.eventGroup, !0).classed(`${H.eventGroup}-${s}`, !0);
+      const d = this.svg.append("g").attr("data-color", n).classed(G.eventGroup, !0).classed(`${G.eventGroup}-${s}`, !0);
       this.drawBackground({
         color: a || n,
         gElement: d,
@@ -23098,7 +23124,7 @@ const Ih = _h.exports, H = {
     updateMilestonesPositions() {
       Object.entries(this.milestonesGroups).forEach(([s, e]) => {
         const t = this.getMilestoneGroupYPosition(s), i = this.svg.select(
-          `g.${H.eventGroup}-${s}`
+          `g.${G.eventGroup}-${s}`
         ), r = t + (e.height || this.barChartHeight) / 2;
         i.attr("x1", 0).attr("x2", this.timeline.offsetWidth).select(`.${Ye.milestoneLine}`).attr("y1", r).attr("y2", r);
         const n = w.select(
@@ -23118,7 +23144,7 @@ const Ih = _h.exports, H = {
       const s = this.combinedXAxesHeight, e = this.barChartGroups;
       Object.entries(e).forEach(([t, i], r) => {
         const n = this.svg.append("g").classed(
-          `${H.barChartGroup} ${H.barChartGroup}-${t}`,
+          `${G.barChartGroup} ${G.barChartGroup}-${t}`,
           !0
         ).attr("transform", `translate(0,${s})`), { color: a, events: o } = i;
         this.drawBarsChart({
@@ -23137,7 +23163,7 @@ const Ih = _h.exports, H = {
       isLoading: t
     }) {
       this.svg.append("rect").classed(
-        `${H.loadingIndicator} ${H.loadingIndicator}-${e}`,
+        `${G.loadingIndicator} ${G.loadingIndicator}-${e}`,
         !0
       ).attr("x", 0).attr("y", s).attr("width", this.timeline.offsetWidth / 3).attr("height", this.barChartHeight).attr("fill", `url(#${De.loadingGradient}-${e})`).style("visibility", t ? "visible" : "hidden");
     },
@@ -23147,7 +23173,7 @@ const Ih = _h.exports, H = {
       gElement: t,
       height: i
     }) {
-      t.append("rect").attr("class", H.eventGroupBg).attr("x", 0).attr("y", e).attr("width", this.timeline.offsetWidth).attr("height", i || this.barChartHeight).attr("fill", w.color(s).toString()).style("opacity", 0.1);
+      t.append("rect").attr("class", G.eventGroupBg).attr("x", 0).attr("y", e).attr("width", this.timeline.offsetWidth).attr("height", i || this.barChartHeight).attr("fill", w.color(s).toString()).style("opacity", 0.1);
     },
     drawBars({
       events: s,
@@ -23157,14 +23183,14 @@ const Ih = _h.exports, H = {
       type: r
     }) {
       const n = this;
-      e.selectAll(H.eventRect).data(s).enter().append("rect").attr(
+      e.selectAll(G.eventRect).data(s).enter().append("rect").attr(
         "class",
-        (a) => H.eventRect + (a.className ? ` ${a.className}` : "")
+        (a) => G.eventRect + (a.className ? ` ${a.className}` : "")
       ).attr("x", this.getEventRectX).attr("y", t + this.barYPadding / 2).attr("ry", 1.5).attr("rx", 1.5).attr("width", this.getEventRectWidth).attr("height", this.barChartHeight - this.barYPadding).attr("stroke-width", 5).attr("cursor", "pointer").attr("stroke", "#0000").style("fill", (a) => a.color || i).on("mouseover", function(a, o) {
-        w.select(this).classed(H.eventRectHovered, !0), n.handleBarMouseOver(a, o, r);
+        w.select(this).classed(G.eventRectHovered, !0), n.handleBarMouseOver(a, o, r);
       }).on("mouseout", function() {
-        w.select(this).classed(H.eventRectHovered, !1), n.handleBarMouseOut();
-      }), e.selectAll(H.eventRectText).data(s.filter((a) => !!a.text)).enter().append("text").attr("class", H.eventRectText).attr("x", (a) => this.getEventRectX(a) + this.textPadding).attr("y", t + this.barChartHeight / 2).attr("dy", "0.35em").style("text-anchor", "start").style("font-size", "12px").style("font-weight", 600).style("stroke-linejoin", "round").style("paint-order", "stroke").style("pointer-events", "none").style(
+        w.select(this).classed(G.eventRectHovered, !1), n.handleBarMouseOut();
+      }), e.selectAll(G.eventRectText).data(s.filter((a) => !!a.text)).enter().append("text").attr("class", G.eventRectText).attr("x", (a) => this.getEventRectX(a) + this.textPadding).attr("y", t + this.barChartHeight / 2).attr("dy", "0.35em").style("text-anchor", "start").style("font-size", "12px").style("font-weight", 600).style("stroke-linejoin", "round").style("paint-order", "stroke").style("pointer-events", "none").style(
         "fill",
         (a) => this.getTextFillColor(a.color || i, 0.75)
       ).text(this.getEventText);
@@ -23177,19 +23203,19 @@ const Ih = _h.exports, H = {
       type: r,
       index: n
     }) {
-      const a = this, o = Object.keys(this.barChartGroups).length, l = (f) => (this.getEventRectWidth(f) - this.barXPadding * 2) / o, c = (f) => this.yScale.range()[0] - this.yScale(f.count), u = (f) => this.getEventRectX(f) + this.barXPadding + n * l(f), h = (f) => this.yScale(f.count), d = e.selectAll(H.eventBarContainer).data(s).enter().append("g").attr(
+      const a = this, o = Object.keys(this.barChartGroups).length, l = (f) => (this.getEventRectWidth(f) - this.barXPadding * 2) / o, c = (f) => this.yScale.range()[0] - this.yScale(f.count), u = (f) => this.getEventRectX(f) + this.barXPadding + n * l(f), h = (f) => this.yScale(f.count), d = e.selectAll(G.eventBarContainer).data(s).enter().append("g").attr(
         "class",
-        `${H.eventBarContainer} ${H.eventBarContainer}-${r}`
+        `${G.eventBarContainer} ${G.eventBarContainer}-${r}`
       );
       d.append("rect").attr(
         "class",
-        (f) => H.eventBarHoverZone + (f.className ? ` ${f.className}` : "")
+        (f) => G.eventBarHoverZone + (f.className ? ` ${f.className}` : "")
       ).attr("x", u).attr("y", -i).attr("width", l).attr("height", this.yScale.range()[0] + i).attr("fill", (f) => f.color || t).attr("fill-opacity", 0), d.append("rect").attr(
         "class",
-        (f) => H.eventBar + (f.className ? ` ${f.className}` : "")
+        (f) => G.eventBar + (f.className ? ` ${f.className}` : "")
       ).attr("x", u).attr("y", h).attr("width", l).attr("height", c).attr("stroke-width", 5).attr("cursor", "pointer").attr("stroke", "#0000").attr("fill", `url(#${De.transparencyGradient}-${r})`), d.append("rect").attr(
         "class",
-        (f) => H.eventBarCap + (f.className ? ` ${f.className}` : "")
+        (f) => G.eventBarCap + (f.className ? ` ${f.className}` : "")
       ).attr("x", u).attr("y", h).attr("width", l).attr("height", 2).attr("stroke-width", 0).style("fill", (f) => f.color || t), d.on("mouseover", function(f, m) {
         const g = w.select(this);
         a.onBarChartBarMouseOver(g, t), a.handleBarMouseOver(f, m, r);
@@ -23197,17 +23223,17 @@ const Ih = _h.exports, H = {
         const f = w.select(this);
         a.onBarChartBarMouseOut(f, r), a.handleBarMouseOut();
       }).on("click", function() {
-        e.selectAll(`.${H.eventBarContainerSelected}`).classed(H.eventBarContainerSelected, !1), w.select(this).classed(H.eventBarContainerSelected, !0);
+        e.selectAll(`.${G.eventBarContainerSelected}`).classed(G.eventBarContainerSelected, !1), w.select(this).classed(G.eventBarContainerSelected, !0);
       });
     },
     onBarChartBarMouseOver(s, e) {
-      s.classed(H.eventBarContainerHovered, !0), s.selectAll(`.${H.eventBarHoverZone}`).attr("fill-opacity", 0.2);
-      const i = s.selectAll(`.${H.eventBar}`);
+      s.classed(G.eventBarContainerHovered, !0), s.selectAll(`.${G.eventBarHoverZone}`).attr("fill-opacity", 0.2);
+      const i = s.selectAll(`.${G.eventBar}`);
       i.attr("fill", e), i.attr("fill-opacity", 0.5);
     },
     onBarChartBarMouseOut(s, e) {
-      s.classed(H.eventBarContainerHovered, !1), s.selectAll(`.${H.eventBarHoverZone}`).attr("fill-opacity", 0);
-      const i = s.selectAll(`.${H.eventBar}`);
+      s.classed(G.eventBarContainerHovered, !1), s.selectAll(`.${G.eventBarHoverZone}`).attr("fill-opacity", 0);
+      const i = s.selectAll(`.${G.eventBar}`);
       i.attr("fill", `url(#${De.transparencyGradient}-${e})`), i.attr("fill-opacity", 1);
     },
     drawTextLabel({
@@ -23226,8 +23252,8 @@ const Ih = _h.exports, H = {
         w: this.labelRectWidth,
         h: n || this.barChartHeight,
         radius: 3
-      }, o = s.append("g").attr("class", `${H.labelGroup} ${H.labelGroup}-${r}`).style("cursor", "pointer").on("click", () => this.toggleGroupVisibility(r));
-      o.append("rect").attr("class", H.labelBg).attr("data-color", t).attr("x", a.x).attr("y", a.y).attr("width", a.w).attr("height", a.h).attr("rx", a.radius).attr("ry", a.radius).style("fill", this.dark ? "#131a29" : "white"), o.append("rect").attr("class", H.labelBgFill).attr("data-color", t).attr("x", a.x).attr("y", a.y).attr("width", a.w).attr("height", a.h).attr("rx", a.radius).attr("ry", a.radius).style("fill", this.getLabelBackgroundColor(t)).style("stroke", this.getTextFillColor(t)).style("stroke-width", 0.25), o.append("text").attr("class", H.labelText).attr("data-color", t).attr("x", 5).attr("y", e + (n || this.barChartHeight) / 2).attr("dy", "0.35em").style("text-anchor", "start").style("font-size", "12px").style("font-weight", 500).style("stroke-linejoin", "round").style("paint-order", "stroke").style("fill", this.getTextFillColor(t)).text(i);
+      }, o = s.append("g").attr("class", `${G.labelGroup} ${G.labelGroup}-${r}`).style("cursor", "pointer").on("click", () => this.toggleGroupVisibility(r));
+      o.append("rect").attr("class", G.labelBg).attr("data-color", t).attr("x", a.x).attr("y", a.y).attr("width", a.w).attr("height", a.h).attr("rx", a.radius).attr("ry", a.radius).style("fill", this.dark ? "#131a29" : "white"), o.append("rect").attr("class", G.labelBgFill).attr("data-color", t).attr("x", a.x).attr("y", a.y).attr("width", a.w).attr("height", a.h).attr("rx", a.radius).attr("ry", a.radius).style("fill", this.getLabelBackgroundColor(t)).style("stroke", this.getTextFillColor(t)).style("stroke-width", 0.25), o.append("text").attr("class", G.labelText).attr("data-color", t).attr("x", 5).attr("y", e + (n || this.barChartHeight) / 2).attr("dy", "0.35em").style("text-anchor", "start").style("font-size", "12px").style("font-weight", 500).style("stroke-linejoin", "round").style("paint-order", "stroke").style("fill", this.getTextFillColor(t)).text(i);
     },
     getTextFillColor(s, e = 0) {
       var t, i;
@@ -23348,7 +23374,7 @@ var kh = function() {
       return [e._v(" " + e._s(i.label) + " ")];
     }, { marker: i })], 2)]), t("div", { staticClass: "marker-line e-absolute e-pointer-events-none", style: e.getMarkerLineStyle(i) })]);
   }), e.autoResize ? t("div", { directives: [{ name: "resize-observer", rawName: "v-resize-observer", value: e.onResize, expression: "onResize" }], ref: "timelineContainer", staticClass: "e-timeline__svg-container e-relative e-h-13 e-rounded e-select-none e-overflow-x-hidden" }) : t("div", { ref: "timelineContainer", staticClass: "e-timeline__svg-container e-relative e-h-13 e-rounded e-select-none e-overflow-x-hidden" }), e._l(e.milestonesGroups, function(i, r) {
-    return t("div", { key: r, staticClass: "e-timeline-milestones" }, [t("div", { class: `e-tl-milestones e-tl-milestones-${r}` }, e._l(i.events, function(n, a) {
+    return t("div", { key: `${r}`, staticClass: "e-timeline-milestones" }, [t("div", { class: `e-tl-milestones e-tl-milestones-${r}` }, e._l(i.events, function(n, a) {
       return t("ETimelineMilestone", { key: `${n.milestoneType}-${a}`, class: e.getMilestoneClass(n), attrs: { size: n.size || e.milestoneBulletSize, milestone: n, "background-color": e.getMilestoneColors(n.color, i.color).background, "border-color": e.getMilestoneColors(n.color, i.color).border }, on: { "milestone-click": function(o) {
         return e.onMilestoneClick(n, r);
       } }, scopedSlots: e._u([{ key: "content", fn: function() {
@@ -23363,14 +23389,14 @@ var kh = function() {
     return t("div", { key: i, staticClass: "external-label", class: e.classes.background, style: e.getExternalLabelWrapperStyles(i), on: { click: function(r) {
       return e.toggleGroupVisibility(i);
     } } }, [t("div", { staticClass: "external-label__content", style: e.getExternalLabelStyles(i) }, [e._v(" " + e._s(i) + " ")])]);
-  }), 0), t("div", { ref: "tooltip", staticClass: "e-absolute", style: e.eventTooltipStyle }, [e._t("tooltip", function() {
+  }), 0), t("div", { key: "tooltip", ref: "tooltip", staticClass: "e-absolute", style: e.eventTooltipStyle }, [e._t("tooltip", function() {
     return [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.isHoveringTimeline && !e.isHoveringEvent && !e.isInteractingWithCurtain && !e.cursorTimestamp, expression: `
           isHoveringTimeline &&
           !isHoveringEvent &&
           !isInteractingWithCurtain &&
           !cursorTimestamp
         ` }], staticClass: "e-timeline__tooltip e-border e-rounded e-px-2 -e-left-2/4 e-relative", class: e.classes.tooltipSlot }, [e._v(" " + e._s(e.hoveredTimestamp) + " ")])];
-  }, { timestamp: e.hoveredTimestamp, active: e.isHoveringTimeline && !e.isInteractingWithCurtain && !e.cursorTimestamp })], 2), t("div", { ref: "eventPreviewTooltip", staticClass: "e-absolute e-z-50", style: e.eventTooltipStyle }, [e._t("eventTooltip", function() {
+  }, { timestamp: e.hoveredTimestamp, active: e.isHoveringTimeline && !e.isInteractingWithCurtain && !e.cursorTimestamp })], 2), t("div", { key: "eventTooltip", staticClass: "e-absolute e-z-50", style: e.eventTooltipStyle }, [e._t("eventTooltip", function() {
     return [e.showEventTooltip && (e.hoveredEvent || e.hoveredCounts.length) ? t("div", { directives: [{ name: "show", rawName: "v-show", value: e.isHoveringEvent && !e.isInteractingWithCurtain, expression: "isHoveringEvent && !isInteractingWithCurtain" }], staticClass: "e-timeline__event-tooltip e-border e-rounded e-px-2 -e-left-2/4 e-relative", class: e.classes.eventTooltipSlot }, [e.hoveredCounts.length ? t("div", [t("strong", [e._v("Timestamp")]), e._v(": " + e._s(e.hoveredEvent.timestamp) + " "), e._l(e.hoveredCounts, function(i, r) {
       return t("div", { key: r }, [t("strong", [e._v(e._s(i.type) + " Count")]), e._v(": " + e._s(i.count) + " ")]);
     })], 2) : e.hoveredEvent ? t("div", [e.hoveredEvent.timestamp ? t("div", [t("strong", [e._v("Event time")]), e._v(": " + e._s(e.hoveredEvent.timestamp) + " ")]) : e._e(), e.hoveredEvent.startDate ? t("div", [t("strong", [e._v("From")]), e._v(":" + e._s(e.hoveredEvent.startDate) + " ")]) : e._e(), e.hoveredEvent.endDate ? t("div", [t("strong", [e._v("To")]), e._v(":" + e._s(e.hoveredEvent.endDate) + " ")]) : e._e()]) : e._e()]) : e._e()];