@evercam/ui 0.0.51 → 0.0.52-beta.1

package/dist/index.mjs

@@ -69,8 +69,8 @@ function I(e, t, r, n, a, o, i, d) {
     if (l.functional) {
       l._injectStyles = s;
       var c = l.render;
-      l.render = function(E, y) {
-        return s.call(y), c(E, y);
+      l.render = function(E, b) {
+        return s.call(b), c(E, b);
       };
     } else {
       var g = l.beforeCreate;
@@ -908,8 +908,8 @@ var We = {}, ie = {};
   };
   function d(g, m) {
     if (i.future.includes(m)) {
-      var E, y, k;
-      return g.future === "all" || ((k = (y = g == null || (E = g.future) === null || E === void 0 ? void 0 : E[m]) !== null && y !== void 0 ? y : o[m]) !== null && k !== void 0 ? k : !1);
+      var E, b, k;
+      return g.future === "all" || ((k = (b = g == null || (E = g.future) === null || E === void 0 ? void 0 : E[m]) !== null && b !== void 0 ? b : o[m]) !== null && k !== void 0 ? k : !1);
     }
     if (i.experimental.includes(m)) {
       var A, z, L;
@@ -1045,29 +1045,29 @@ var We = {}, ie = {};
       })(),
       extract: (() => {
         let s = (() => {
-          var m, E, y, k, A, z, L, M, H, G;
-          return !((m = i.purge) === null || m === void 0) && m.extract ? i.purge.extract : !((E = i.content) === null || E === void 0) && E.extract ? i.content.extract : !((y = i.purge) === null || y === void 0 || (k = y.extract) === null || k === void 0) && k.DEFAULT ? i.purge.extract.DEFAULT : !((A = i.content) === null || A === void 0 || (z = A.extract) === null || z === void 0) && z.DEFAULT ? i.content.extract.DEFAULT : !((L = i.purge) === null || L === void 0 || (M = L.options) === null || M === void 0) && M.extractors ? i.purge.options.extractors : !((H = i.content) === null || H === void 0 || (G = H.options) === null || G === void 0) && G.extractors ? i.content.options.extractors : {};
+          var m, E, b, k, A, z, L, M, H, G;
+          return !((m = i.purge) === null || m === void 0) && m.extract ? i.purge.extract : !((E = i.content) === null || E === void 0) && E.extract ? i.content.extract : !((b = i.purge) === null || b === void 0 || (k = b.extract) === null || k === void 0) && k.DEFAULT ? i.purge.extract.DEFAULT : !((A = i.content) === null || A === void 0 || (z = A.extract) === null || z === void 0) && z.DEFAULT ? i.content.extract.DEFAULT : !((L = i.purge) === null || L === void 0 || (M = L.options) === null || M === void 0) && M.extractors ? i.purge.options.extractors : !((H = i.content) === null || H === void 0 || (G = H.options) === null || G === void 0) && G.extractors ? i.content.options.extractors : {};
         })(), c = {}, g = (() => {
-          var m, E, y, k;
+          var m, E, b, k;
           if (!((m = i.purge) === null || m === void 0 || (E = m.options) === null || E === void 0) && E.defaultExtractor)
             return i.purge.options.defaultExtractor;
-          if (!((y = i.content) === null || y === void 0 || (k = y.options) === null || k === void 0) && k.defaultExtractor)
+          if (!((b = i.content) === null || b === void 0 || (k = b.options) === null || k === void 0) && k.defaultExtractor)
             return i.content.options.defaultExtractor;
         })();
         if (g !== void 0 && (c.DEFAULT = g), typeof s == "function")
           c.DEFAULT = s;
         else if (Array.isArray(s))
           for (let { extensions: m, extractor: E } of s != null ? s : [])
-            for (let y of m)
-              c[y] = E;
+            for (let b of m)
+              c[b] = E;
         else
           typeof s == "object" && s !== null && Object.assign(c, s);
         return c;
       })(),
       transform: (() => {
         let s = (() => {
-          var g, m, E, y, k, A;
-          return !((g = i.purge) === null || g === void 0) && g.transform ? i.purge.transform : !((m = i.content) === null || m === void 0) && m.transform ? i.content.transform : !((E = i.purge) === null || E === void 0 || (y = E.transform) === null || y === void 0) && y.DEFAULT ? i.purge.transform.DEFAULT : !((k = i.content) === null || k === void 0 || (A = k.transform) === null || A === void 0) && A.DEFAULT ? i.content.transform.DEFAULT : {};
+          var g, m, E, b, k, A;
+          return !((g = i.purge) === null || g === void 0) && g.transform ? i.purge.transform : !((m = i.content) === null || m === void 0) && m.transform ? i.content.transform : !((E = i.purge) === null || E === void 0 || (b = E.transform) === null || b === void 0) && b.DEFAULT ? i.purge.transform.DEFAULT : !((k = i.content) === null || k === void 0 || (A = k.transform) === null || A === void 0) && A.DEFAULT ? i.content.transform.DEFAULT : {};
         })(), c = {};
         return typeof s == "function" && (c.DEFAULT = s), typeof s == "object" && s !== null && Object.assign(c, s), c;
       })()
@@ -1888,9 +1888,9 @@ var ve = {}, ye = {}, Xe = {};
   Object.defineProperty(e, "__esModule", {
     value: !0
   });
-  function t(y, k) {
+  function t(b, k) {
     for (var A in k)
-      Object.defineProperty(y, A, {
+      Object.defineProperty(b, A, {
         enumerable: !0,
         get: k[A]
       });
@@ -1904,17 +1904,17 @@ var ve = {}, ye = {}, Xe = {};
     }
   });
   const r = /* @__PURE__ */ n(Xe);
-  function n(y) {
-    return y && y.__esModule ? y : {
-      default: y
+  function n(b) {
+    return b && b.__esModule ? b : {
+      default: b
     };
   }
   let a = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, o = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, i = /(?:\d+|\d*\.\d+)%?/, d = /(?:\s*,\s*|\s+)/, l = /\s*[,/]\s*/, s = /var\(--(?:[^ )]*?)\)/, c = new RegExp(`^(rgba?)\\(\\s*(${i.source}|${s.source})(?:${d.source}(${i.source}|${s.source}))?(?:${d.source}(${i.source}|${s.source}))?(?:${l.source}(${i.source}|${s.source}))?\\s*\\)$`), g = new RegExp(`^(hsla?)\\(\\s*((?:${i.source})(?:deg|rad|grad|turn)?|${s.source})(?:${d.source}(${i.source}|${s.source}))?(?:${d.source}(${i.source}|${s.source}))?(?:${l.source}(${i.source}|${s.source}))?\\s*\\)$`);
-  function m(y, { loose: k = !1 } = {}) {
+  function m(b, { loose: k = !1 } = {}) {
     var A, z;
-    if (typeof y != "string")
+    if (typeof b != "string")
       return null;
-    if (y = y.trim(), y === "transparent")
+    if (b = b.trim(), b === "transparent")
       return {
         mode: "rgb",
         color: [
@@ -1924,12 +1924,12 @@ var ve = {}, ye = {}, Xe = {};
         ],
         alpha: "0"
       };
-    if (y in r.default)
+    if (b in r.default)
       return {
         mode: "rgb",
-        color: r.default[y].map((R) => R.toString())
+        color: r.default[b].map((R) => R.toString())
       };
-    let L = y.replace(o, (R, N, W, v, D) => [
+    let L = b.replace(o, (R, N, W, v, D) => [
       "#",
       N,
       N,
@@ -1950,7 +1950,7 @@ var ve = {}, ye = {}, Xe = {};
         alpha: L[4] ? (parseInt(L[4], 16) / 255).toString() : void 0
       };
     var M;
-    let H = (M = y.match(c)) !== null && M !== void 0 ? M : y.match(g);
+    let H = (M = b.match(c)) !== null && M !== void 0 ? M : b.match(g);
     if (H === null)
       return null;
     let G = [
@@ -1970,9 +1970,9 @@ var ve = {}, ye = {}, Xe = {};
       alpha: (A = H[5]) === null || A === void 0 || (z = A.toString) === null || z === void 0 ? void 0 : z.call(A)
     };
   }
-  function E({ mode: y, color: k, alpha: A }) {
+  function E({ mode: b, color: k, alpha: A }) {
     let z = A !== void 0;
-    return y === "rgba" || y === "hsla" ? `${y}(${k.join(", ")}${z ? `, ${A}` : ""})` : `${y}(${k.join(" ")}${z ? ` / ${A}` : ""})`;
+    return b === "rgba" || b === "hsla" ? `${b}(${k.join(", ")}${z ? `, ${A}` : ""})` : `${b}(${k.join(" ")}${z ? ` / ${A}` : ""})`;
   }
 })(ye);
 (function(e) {
@@ -2090,9 +2090,9 @@ var be = {}, qe = {}, se = {};
     return (0, r.splitAtTopLevelOnly)(l, ",").map((c) => {
       let g = c.trim(), m = {
         raw: g
-      }, E = g.split(a), y = /* @__PURE__ */ new Set();
+      }, E = g.split(a), b = /* @__PURE__ */ new Set();
       for (let k of E)
-        o.lastIndex = 0, !y.has("KEYWORD") && n.has(k) ? (m.keyword = k, y.add("KEYWORD")) : o.test(k) ? y.has("X") ? y.has("Y") ? y.has("BLUR") ? y.has("SPREAD") || (m.spread = k, y.add("SPREAD")) : (m.blur = k, y.add("BLUR")) : (m.y = k, y.add("Y")) : (m.x = k, y.add("X")) : m.color ? (m.unknown || (m.unknown = []), m.unknown.push(k)) : m.color = k;
+        o.lastIndex = 0, !b.has("KEYWORD") && n.has(k) ? (m.keyword = k, b.add("KEYWORD")) : o.test(k) ? b.has("X") ? b.has("Y") ? b.has("BLUR") ? b.has("SPREAD") || (m.spread = k, b.add("SPREAD")) : (m.blur = k, b.add("BLUR")) : (m.y = k, b.add("Y")) : (m.x = k, b.add("X")) : m.color ? (m.unknown || (m.unknown = []), m.unknown.push(k)) : m.color = k;
       return m.valid = m.x !== void 0 && m.y !== void 0, m;
     });
   }
@@ -2423,7 +2423,7 @@ var Ye = {};
   function E(v) {
     return v.startsWith("[") && v.endsWith("]");
   }
-  function y(v) {
+  function b(v) {
     let D = v.lastIndexOf("/");
     return D === -1 || D === v.length - 1 ? [
       v,
@@ -2452,7 +2452,7 @@ var Ye = {};
       var x;
       return k((x = D.values) === null || x === void 0 ? void 0 : x[v]);
     }
-    let [_, p] = y(v);
+    let [_, p] = b(v);
     if (p !== void 0) {
       var $, f, w, F;
       let O = (F = ($ = D.values) === null || $ === void 0 ? void 0 : $[_]) !== null && F !== void 0 ? F : E(_) ? _.slice(1, -1) : void 0;
@@ -2531,7 +2531,7 @@ var Ye = {};
     return [];
   }
   function* W(v, D, C, h) {
-    let x = (0, d.flagEnabled)(h, "generalizedModifiers"), [_, p] = y(D);
+    let x = (0, d.flagEnabled)(h, "generalizedModifiers"), [_, p] = b(D);
     if (x && C.modifiers != null && (C.modifiers === "any" || typeof C.modifiers == "object" && (p && E(p) || p in C.modifiers)) || (_ = D, p = void 0), p !== void 0 && _ === "" && (_ = "DEFAULT"), p !== void 0 && typeof C.modifiers == "object") {
       var f, w;
       let F = (w = (f = C.modifiers) === null || f === void 0 ? void 0 : f[p]) !== null && w !== void 0 ? w : null;
@@ -2578,7 +2578,7 @@ var Ze = {};
       default: h
     };
   }
-  function y(h) {
+  function b(h) {
     return typeof h == "function";
   }
   function k(h, ...x) {
@@ -2606,7 +2606,7 @@ var Ze = {};
     }
   };
   function z(h, ...x) {
-    return y(h) ? h(...x) : h;
+    return b(h) ? h(...x) : h;
   }
   function L(h) {
     return h.reduce((x, { extend: _ }) => k(x, _, (p, $) => p === void 0 ? [
@@ -2639,7 +2639,7 @@ var Ze = {};
       return x;
   }
   function G({ extend: h, ...x }) {
-    return k(x, h, (_, p) => !y(_) && !p.some(y) ? k({}, _, ...p, H) : ($, f) => k({}, ...[
+    return k(x, h, (_, p) => !b(_) && !p.some(b) ? k({}, _, ...p, H) : ($, f) => k({}, ...[
       _,
       ...p
     ].map((w) => z(w, $, f)), H));
@@ -2659,7 +2659,7 @@ var Ze = {};
       for (const $ of R(_)) {
         let f = 0, w = h;
         for (; w != null && f < $.length; )
-          w = w[$[f++]], w = y(w) && ($.alpha === void 0 || f <= $.length - 1) ? w(x, A) : w;
+          w = w[$[f++]], w = b(w) && ($.alpha === void 0 || f <= $.length - 1) ? w(x, A) : w;
         if (w !== void 0) {
           if ($.alpha !== void 0) {
             let F = (0, c.parseColorFormat)(w);
@@ -2673,7 +2673,7 @@ var Ze = {};
     return Object.assign(x, {
       theme: x,
       ...A
-    }), Object.keys(h).reduce((_, p) => (_[p] = y(h[p]) ? h[p](x, A) : h[p], _), {});
+    }), Object.keys(h).reduce((_, p) => (_[p] = b(h[p]) ? h[p](x, A) : h[p], _), {});
   }
   function W(h) {
     let x = [];
@@ -2699,7 +2699,7 @@ var Ze = {};
   function v(h) {
     return [
       ...h
-    ].reduceRight((_, p) => y(p) ? p({
+    ].reduceRight((_, p) => b(p) ? p({
       corePlugins: _
     }) : (0, n.default)(p, _), r.default);
   }
@@ -4981,7 +4981,7 @@ const qt = {
     name: "resize-observer",
     definition: tt
   }
-], b = {
+], y = {
   eventGroup: "event-group",
   eventGroupBg: "event-group-bg",
   eventRect: "event-rect",
@@ -5245,6 +5245,12 @@ const qt = {
     },
     isInteractingWithCurtain() {
       return this.isHoveringCurtain || this.isDraggingCurtain;
+    },
+    flattenedCounts() {
+      return [
+        ...Object.values(this.lineGraphGroups),
+        ...Object.values(this.barChartGroups)
+      ].map((e) => e.events).flat();
     }
   },
   watch: {
@@ -5333,22 +5339,24 @@ const qt = {
       const t = 5;
       for (const r in this.xAxesConfig) {
         const n = this.createAxis(r);
-        this.xAxes[r] = n, this.svg.append("g").classed(b.xAxis, !0).classed(`${b.xAxis}-${r}`, !0).attr("transform", `translate(0, ${e || t})`).call(n), this.translateTicksText(r), e += this.axisHeight;
+        this.xAxes[r] = n, this.svg.append("g").classed(y.xAxis, !0).classed(`${y.xAxis}-${r}`, !0).attr("transform", `translate(0, ${e || t})`).call(n), this.translateTicksText(r), e += this.axisHeight;
       }
     },
     initYScale() {
-      this.yScale = u.scaleLinear().range([this.chartHeight, 0]);
-      const e = [
-        ...Object.values(this.lineGraphGroups),
-        ...Object.values(this.barChartGroups)
-      ].map((r) => r.events).flat(), t = u.max(e, (r) => r.count);
-      this.yScale.domain([0, t]);
+      this.yScale = u.scaleLinear().range([this.chartHeight, 0]), this.updateYScaleDomain();
+    },
+    updateYScaleDomain() {
+      const [e, t] = this.timeScale.domain(), r = this.flattenedCounts.filter((a) => {
+        const o = new Date(a.startDate || a.timestamp), i = new Date(a.endDate || a.timestamp);
+        return i >= e && i <= t || o >= e && o <= t;
+      }), n = u.max(r, (a) => a.count);
+      this.yScale.domain([0, n]);
     },
     initZoomBehavior() {
       this.disableZoom || (this.zoomBehavior = u.zoom().on("zoom", this.handleZoom).scaleExtent([this.minZoom, this.maxZoom]), this.svg.call(this.zoomBehavior));
     },
     initSelectedTimestampCursor() {
-      this.svg.append("line").attr("class", b.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", y.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();
     },
     updateAndRedrawTimeline() {
       const { startDate: e, endDate: t } = this.getCurrentTimeBounds();
@@ -5358,7 +5366,7 @@ const qt = {
       this.svg && this.svg.remove(), this.countsByTimestamp = {};
     },
     repositionSelectedTimestampCursor() {
-      const e = this.svg.select(`.${b.selectedTimestampCursor}`);
+      const e = this.svg.select(`.${y.selectedTimestampCursor}`);
       if (!this.selectedTimestamp) {
         e.style("opacity", 0);
         return;
@@ -5409,12 +5417,12 @@ const qt = {
       if (!this.showLabels)
         return;
       const e = this;
-      this.svg.selectAll(`.${b.labelBg}`).each(function() {
+      this.svg.selectAll(`.${y.labelBg}`).each(function() {
         u.select(this).style("fill", e.dark ? "black" : "white");
-      }), this.svg.selectAll(`.${b.labelBgFill}`).each(function() {
+      }), this.svg.selectAll(`.${y.labelBgFill}`).each(function() {
         const t = u.select(this), r = t.node().dataset.color;
         t.style("fill", e.getLabelBackgroundColor(r)).style("stroke", e.getTextFillColor(r)).style("stroke-width", 0.25);
-      }), this.svg.selectAll(`.${b.labelText}`).each(function() {
+      }), this.svg.selectAll(`.${y.labelText}`).each(function() {
         const t = u.select(this), r = t.node().dataset.color;
         t.style("fill", e.getTextFillColor(r));
       });
@@ -5467,26 +5475,26 @@ const qt = {
       this.isHoveringEvent = !1, this.hoveredEvent = null, this.$emit("event-mouseout");
     },
     handleLabelMouseOver(e) {
-      u.selectAll(`.${b.lineGraphGroup}-${e}`).classed(
-        `${b.lineGraphGroup}--highlighted`,
+      u.selectAll(`.${y.lineGraphGroup}-${e}`).classed(
+        `${y.lineGraphGroup}--highlighted`,
         !0
-      ), u.selectAll(`.${b.lineGraphGroup}-label`).classed(
-        `${b.lineGraphGroup}-label--highlighted`,
+      ), u.selectAll(`.${y.lineGraphGroup}-label`).classed(
+        `${y.lineGraphGroup}-label--highlighted`,
         !0
       );
     },
     handleLabelMouseLeave(e) {
-      u.selectAll(`.${b.lineGraphGroup}-${e}`).classed(
-        `${b.lineGraphGroup}--highlighted`,
+      u.selectAll(`.${y.lineGraphGroup}-${e}`).classed(
+        `${y.lineGraphGroup}--highlighted`,
         !1
-      ), u.selectAll(`.${b.lineGraphGroup}-label`).classed(
-        `${b.lineGraphGroup}-label--highlighted`,
+      ), u.selectAll(`.${y.lineGraphGroup}-label`).classed(
+        `${y.lineGraphGroup}-label--highlighted`,
         !1
       );
     },
     handleZoom(e) {
       const t = e.transform.rescaleX(this.initialTimeScale);
-      this.timeScale.domain(t.domain()), this.updateCurrentTimeScaleDensity();
+      this.timeScale.domain(t.domain()), this.updateCurrentTimeScaleDensity(), this.updateYScaleDomain();
       const r = e.transform.k / this.lastTransform.k;
       this.transformDiff = {
         scale: r,
@@ -5509,7 +5517,7 @@ const qt = {
     },
     updateCurtainsOnResize(e) {
       const { startDate: t, endDate: r } = this.calculateDateRangeFromCurtains(), n = this.timeScale.domain(), a = n[1].getTime() - n[0].getTime(), o = t.getTime() - n[0].getTime(), i = n[1].getTime() - r.getTime();
-      this.leftCurtainWidth = o / a * e, this.rightCurtainWidth = i / a * e, this.svg.select(`.${b.curtain}--left`).attr("width", this.leftCurtainWidth), this.svg.select(`.${b.curtain}--right`).attr(
+      this.leftCurtainWidth = o / a * e, this.rightCurtainWidth = i / a * e, this.svg.select(`.${y.curtain}--left`).attr("width", this.leftCurtainWidth), this.svg.select(`.${y.curtain}--right`).attr(
         "x",
         e - this.rightCurtainWidth + this.curtainHandleWidth * 2
       ).attr("width", this.rightCurtainWidth);
@@ -5526,7 +5534,7 @@ const qt = {
         e.x,
         this.timeline.offsetWidth - this.rightCurtainWidth
       );
-      this.leftCurtainWidth = Math.max(0, t), this.svg.select(`.${b.curtain}--left`).attr("width", this.leftCurtainWidth), this.emitCurtainChange();
+      this.leftCurtainWidth = Math.max(0, t), this.svg.select(`.${y.curtain}--left`).attr("width", this.leftCurtainWidth), this.emitCurtainChange();
     },
     handleRightDrag(e) {
       e.sourceEvent.stopPropagation();
@@ -5534,7 +5542,7 @@ const qt = {
         this.timeline.offsetWidth - e.x,
         this.timeline.offsetWidth - this.leftCurtainWidth
       ), n = t - r;
-      this.rightCurtainWidth = Math.max(0, r), this.svg.select(`.${b.curtain}--right`).attr("width", this.rightCurtainWidth).attr("x", n), this.emitCurtainChange();
+      this.rightCurtainWidth = Math.max(0, r), this.svg.select(`.${y.curtain}--right`).attr("width", this.rightCurtainWidth).attr("x", n), this.emitCurtainChange();
     },
     zoomToStartAndEndDates() {
       const e = this.startDate || this.oldestEvent.timestamp || this.oldestEvent.startDate, t = this.endDate || this.latestEvent.timestamp || this.latestEvent.endDate, r = this.tzStringToDate(e), n = this.tzStringToDate(t), a = this.timeline.offsetWidth, o = [r, n], i = [0, a];
@@ -5547,29 +5555,31 @@ const qt = {
       const r = this.xAxes[e], n = this.getAxisTicksConfig(
         this.xAxesConfig[e]
       );
-      r.scale(t).ticks(n.interval).tickFormat(n.formatFn).tickSizeOuter(0), this.svg.select(`.${b.xAxis}-${e}`).call(r);
+      r.scale(t).ticks(n.interval).tickFormat(n.formatFn).tickSizeOuter(0), this.svg.select(`.${y.xAxis}-${e}`).call(r);
     },
     translateTicksText(e) {
-      this.svg.select(`.${b.xAxis}-${e}`).selectAll(".tick text").each(function() {
+      this.svg.select(`.${y.xAxis}-${e}`).selectAll(".tick text").each(function() {
         let t = u.select(this), r = t.node().getBBox();
         t.attr("x", r.height / 2).attr("y", 0).style("text-anchor", "start");
       });
     },
     updateEventsBars() {
-      const e = `.${b.eventGroup} > rect.${b.eventRect}`;
+      const e = `.${y.eventGroup} > rect.${y.eventRect}`;
       this.svg.selectAll(e).attr("x", this.getEventRectX).attr("width", this.getEventRectWidth);
-      const t = `.${b.eventGroup} > text.${b.eventRectText}`;
+      const t = `.${y.eventGroup} > text.${y.eventRectText}`;
       this.svg.selectAll(t).attr("x", (r) => this.getEventRectX(r) + this.textPadding).text(this.getEventText);
     },
     updateBarChart() {
-      const e = (n) => this.getEventRectX(n) + this.barXPadding, t = (n) => this.getEventRectWidth(n) - this.barXPadding * 2, r = `.${b.barChartGroup} > rect`;
-      this.svg.selectAll(r).attr("x", e).attr("width", t);
+      const e = (o) => this.getEventRectX(o) + this.barXPadding, t = (o) => this.yScale(o.count), r = (o) => this.getEventRectWidth(o) - this.barXPadding * 2, n = (o) => this.yScale.range()[0] - this.yScale(o.count), a = `.${y.barChartGroup} > rect`;
+      this.svg.selectAll(a).attr("x", e).attr("width", r).attr("y", t), this.svg.selectAll(
+        `${a}:not(.${y.eventBarCap})`
+      ).attr("height", n);
     },
     updateLineGraphs() {
       Object.entries(this.lineGraphGroups).forEach(([e]) => {
         const t = u.area().x((r) => this.timeScale(this.tzStringToDate(r.timestamp))).y0(this.timelineHeight).y1((r) => this.yScale(r.count)).curve(u.curveMonotoneX);
         this.svg.selectAll(
-          `.${b.lineGraphPath}-${e}`
+          `.${y.lineGraphPath}-${e}`
         ).attr("d", (r) => t(r));
       });
     },
@@ -5577,11 +5587,11 @@ const qt = {
       Object.keys(this.lineGraphGroups).forEach((e) => {
         const t = this;
         this.svg.selectAll(
-          `.${b.lineGraphDot}-${e}`
+          `.${y.lineGraphDot}-${e}`
         ).each(function(r) {
           u.select(this).attr("cx", t.timeScale(t.tzStringToDate(r.timestamp))).attr("cy", t.yScale(r.count));
         }), this.svg.selectAll(
-          `.${b.lineGraphHoverZone}-${e}`
+          `.${y.lineGraphHoverZone}-${e}`
         ).each(function(r) {
           const n = t.timeScale(t.tzStringToDate(r.timestamp).getTime()) - 15;
           u.select(this).attr("x", n).attr("y", 0).attr("width", 30).attr("height", t.chartHeight);
@@ -5611,9 +5621,9 @@ const qt = {
       if (!this.curtains)
         return;
       const e = this.timeline.offsetWidth, t = this.timelineHeight;
-      this.svg.append("rect").classed(`${b.curtain} ${b.curtain}--left`, !0).attr("width", this.leftCurtainWidth).attr("height", t + 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.svg.append("rect").classed(`${y.curtain} ${y.curtain}--left`, !0).attr("width", this.leftCurtainWidth).attr("height", t + 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(
         u.drag().on("start", this.handleDragStart).on("drag", this.handleLeftDrag).on("end", this.handleDragEnd)
-      ), this.svg.append("rect").classed(`${b.curtain} ${b.curtain}--right`, !0).attr(
+      ), this.svg.append("rect").classed(`${y.curtain} ${y.curtain}--right`, !0).attr(
         "x",
         e - this.rightCurtainWidth + this.curtainHandleWidth * 2
       ).attr("y", -this.curtainHandleWidth).attr("width", this.rightCurtainWidth + this.curtainHandleWidth * 2).attr("height", t + this.curtainHandleWidth * 2).attr("fill", "rgba(0, 0, 0, 0.5)").on("mouseenter", () => this.isHoveringCurtain = !0).on("mouseleave", () => this.isHoveringCurtain = !1).call(
@@ -5621,13 +5631,13 @@ const qt = {
       );
     },
     drawEventsGroups() {
-      this.svg.selectAll(`g.${b.eventGroup}`).remove(), this.drawLineGraphEventsGroups(), this.drawBarEventsGroups(), this.drawBarChartEventsGroups();
+      this.svg.selectAll(`g.${y.eventGroup}`).remove(), this.drawLineGraphEventsGroups(), this.drawBarEventsGroups(), this.drawBarChartEventsGroups();
     },
     drawLineGraphEventsGroups() {
       const e = this.combinedXAxesHeight, t = this.insertZerosAtInterval ? this.filledGapsLineGraphGroups : this.lineGraphGroups;
       Object.entries(t).forEach(([r, n]) => {
         const a = this.svg.append("g").classed(
-          `${b.lineGraphGroup} ${b.lineGraphGroup}-${r}`,
+          `${y.lineGraphGroup} ${y.lineGraphGroup}-${r}`,
           !0
         ).attr("transform", `translate(0,${e})`), { color: o, events: i } = n;
         this.drawLineGraph({
@@ -5643,7 +5653,7 @@ const qt = {
         });
       }), Object.entries(this.lineGraphGroups).forEach(
         ([r, n], a) => {
-          const { color: o, isLoading: i, label: d } = n, l = this.chartHeight - this.barChartHeight * (a + 1), s = e + this.chartHeight - this.barChartHeight, c = this.svg.append("g").classed(`${b.lineGraphGroup}-label`, !0).attr("transform", `translate(0,${e})`).on("mouseover", () => this.handleLabelMouseOver(r)).on("mouseleave", () => this.handleLabelMouseLeave(r));
+          const { color: o, isLoading: i, label: d } = n, l = this.chartHeight - this.barChartHeight * (a + 1), s = e + this.chartHeight - this.barChartHeight, c = this.svg.append("g").classed(`${y.lineGraphGroup}-label`, !0).attr("transform", `translate(0,${e})`).on("mouseover", () => this.handleLabelMouseOver(r)).on("mouseleave", () => this.handleLabelMouseLeave(r));
           this.drawProgressIndicator({
             type: r,
             color: o,
@@ -5665,7 +5675,7 @@ const qt = {
       type: n
     }) {
       const a = u.area().x((i) => this.timeScale(this.tzStringToDate(i.timestamp))).y0(this.timelineHeight).y1((i) => this.yScale(i.count)).curve(u.curveMonotoneX), o = `clip-${n}`;
-      t.append("defs").append("clipPath").attr("id", o).append("rect").attr("width", this.timeline.offsetWidth).attr("height", this.chartHeight), t.append("path").datum(e).classed(`${b.lineGraphPath}-${n}`, !0).attr("fill", `url(#${Y.transparencyGradientLight}-${n})`).attr("stroke", r).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1).attr("d", (i) => a(i)).attr("clip-path", `url(#${o})`);
+      t.append("defs").append("clipPath").attr("id", o).append("rect").attr("width", this.timeline.offsetWidth).attr("height", this.chartHeight), t.append("path").datum(e).classed(`${y.lineGraphPath}-${n}`, !0).attr("fill", `url(#${Y.transparencyGradientLight}-${n})`).attr("stroke", r).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1).attr("d", (i) => a(i)).attr("clip-path", `url(#${o})`);
     },
     drawLineGraphHoverZones({
       events: e,
@@ -5680,19 +5690,19 @@ const qt = {
           [n]: a.count
         };
         const i = t.append("circle").classed(
-          `${b.lineGraphDot} ${b.lineGraphDot}-${n}`,
+          `${y.lineGraphDot} ${y.lineGraphDot}-${n}`,
           !0
         ).attr("cx", this.timeScale(this.tzStringToDate(a.timestamp))).attr("cy", this.yScale(a.count)).attr("r", 1.5).attr("fill", r).attr("stroke-width", 0).datum(a);
         this.dotsByTimestamp[o] = [
           ...this.dotsByTimestamp[o] || [],
           i
-        ], t.append("rect").classed(`${b.lineGraphHoverZone}-${n}`, !0).attr("x", this.timeScale(this.tzStringToDate(a.timestamp)) - 15).attr("y", 0).attr("width", 30).attr("height", this.chartHeight).attr("fill", "transparent").datum(a).on("mouseover", (d) => {
+        ], t.append("rect").classed(`${y.lineGraphHoverZone}-${n}`, !0).attr("x", this.timeScale(this.tzStringToDate(a.timestamp)) - 15).attr("y", 0).attr("width", 30).attr("height", this.chartHeight).attr("fill", "transparent").datum(a).on("mouseover", (d) => {
           this.handleLineMouseOver(d, a, n), this.dotsByTimestamp[o].forEach(
-            (l) => l.classed(`${b.lineGraphDot}--active`, !0)
+            (l) => l.classed(`${y.lineGraphDot}--active`, !0)
           );
         }).on("mouseout", () => {
           this.handleLineMouseOut(), this.dotsByTimestamp[o].forEach(
-            (d) => d.classed(`${b.lineGraphDot}--active`, !1)
+            (d) => d.classed(`${y.lineGraphDot}--active`, !1)
           );
         });
       });
@@ -5706,7 +5716,7 @@ const qt = {
           color: n,
           isLoading: d
         });
-        const c = this.svg.append("g").attr("data-color", n).classed(b.eventGroup, !0).classed(`${b.eventGroup}-${e}`, !0);
+        const c = this.svg.append("g").attr("data-color", n).classed(y.eventGroup, !0).classed(`${y.eventGroup}-${e}`, !0);
         this.drawBackground({
           color: a || n,
           gElement: c,
@@ -5729,7 +5739,7 @@ const qt = {
       const e = this.combinedXAxesHeight, t = this.barChartGroups;
       Object.entries(t).forEach(([r, n]) => {
         const a = this.svg.append("g").classed(
-          `${b.barChartGroup} ${b.barChartGroup}-${r}`,
+          `${y.barChartGroup} ${y.barChartGroup}-${r}`,
           !0
         ).attr("transform", `translate(0,${e})`), { color: o, events: i } = n;
         this.drawBarsChart({
@@ -5746,7 +5756,7 @@ const qt = {
       isLoading: r
     }) {
       this.svg.append("rect").classed(
-        `${b.loadingIndicator} ${b.loadingIndicator}-${t}`,
+        `${y.loadingIndicator} ${y.loadingIndicator}-${t}`,
         !0
       ).attr("x", 0).attr("y", e).attr("width", this.timeline.offsetWidth / 3).attr("height", this.barChartHeight).attr("fill", `url(#${Y.loadingGradient}-${t})`).style("visibility", r ? "visible" : "hidden");
     },
@@ -5755,7 +5765,7 @@ const qt = {
       yPosition: t,
       gElement: r
     }) {
-      r.append("rect").attr("class", b.eventGroupBg).attr("x", 0).attr("y", t).attr("width", this.timeline.offsetWidth).attr("height", this.barChartHeight).attr("fill", u.color(e).toString()).style("opacity", 0.1);
+      r.append("rect").attr("class", y.eventGroupBg).attr("x", 0).attr("y", t).attr("width", this.timeline.offsetWidth).attr("height", this.barChartHeight).attr("fill", u.color(e).toString()).style("opacity", 0.1);
     },
     drawBars({
       events: e,
@@ -5765,11 +5775,11 @@ const qt = {
       type: a
     }) {
       const o = this;
-      t.selectAll(b.eventRect).data(e).enter().append("rect").classed(b.eventRect, !0).attr("x", this.getEventRectX).attr("y", r + 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", (i) => i.color || n).on("mouseover", function(i, d) {
-        u.select(this).classed(`${b.eventRect}--hovered`, !0), o.handleBarMouseOver(i, d, a);
+      t.selectAll(y.eventRect).data(e).enter().append("rect").classed(y.eventRect, !0).attr("x", this.getEventRectX).attr("y", r + 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", (i) => i.color || n).on("mouseover", function(i, d) {
+        u.select(this).classed(`${y.eventRect}--hovered`, !0), o.handleBarMouseOver(i, d, a);
       }).on("mouseout", function() {
-        u.select(this).classed(`${b.eventRect}--hovered`, !1), o.handleBarMouseOut();
-      }), t.selectAll(b.eventRectText).data(e.filter((i) => !!i.text)).enter().append("text").attr("class", b.eventRectText).attr("x", (i) => this.getEventRectX(i) + this.textPadding).attr("y", r + 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(
+        u.select(this).classed(`${y.eventRect}--hovered`, !1), o.handleBarMouseOut();
+      }), t.selectAll(y.eventRectText).data(e.filter((i) => !!i.text)).enter().append("text").attr("class", y.eventRectText).attr("x", (i) => this.getEventRectX(i) + this.textPadding).attr("y", r + 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",
         (i) => this.getTextFillColor(i.color || n, 0.75)
       ).text(this.getEventText);
@@ -5781,13 +5791,16 @@ const qt = {
       type: n
     }) {
       const a = this, o = (s) => this.getEventRectX(s) + this.barXPadding, i = (s) => this.yScale(s.count), d = (s) => this.getEventRectWidth(s) - this.barXPadding * 2, l = (s) => this.yScale.range()[0] - this.yScale(s.count);
-      t.selectAll(b.eventBar).data(e).enter().append("rect").classed(b.eventBar, !0).attr("x", o).attr("y", i).attr("width", d).attr("height", l).attr("stroke-width", 5).attr("cursor", "pointer").attr("stroke", "#0000").attr("fill", `url(#${Y.transparencyGradient}-${n})`).on("mouseover", function(s, c) {
+      t.selectAll(y.eventBar).data(e).enter().append("rect").classed(y.eventBar, !0).attr("x", o).attr("y", i).attr("width", d).attr("height", l).attr("stroke-width", 5).attr("cursor", "pointer").attr("stroke", "#0000").attr(
+        "fill",
+        (s) => s.color || `url(#${Y.transparencyGradient}-${n})`
+      ).on("mouseover", function(s, c) {
         const g = u.select(this);
-        g.classed(`${b.eventBar}--hovered`, !0), g.attr("fill", s.color || r), g.attr("fill-opacity", 0.5), a.handleBarMouseOver(s, c, n);
+        g.classed(`${y.eventBar}--hovered`, !0), g.attr("fill", s.color || r), g.attr("fill-opacity", 0.5), a.handleBarMouseOver(s, c, n);
       }).on("mouseout", function() {
         const s = u.select(this);
-        s.attr("fill", `url(#${Y.transparencyGradient}-${n})`), s.attr("fill-opacity", 1), s.classed(`${b.eventBar}--hovered`, !1), a.handleBarMouseOut();
-      }), t.selectAll(b.eventBarCap).data(e).enter().append("rect").attr("x", o).attr("y", i).attr("width", d).attr("height", 2).attr("stroke-width", 0).style("fill", (s) => s.color || r);
+        s.attr("fill", `url(#${Y.transparencyGradient}-${n})`), s.attr("fill-opacity", 1), s.classed(`${y.eventBar}--hovered`, !1), a.handleBarMouseOut();
+      }), t.selectAll(y.eventBarCap).data(e).enter().append("rect").classed(y.eventBarCap, !0).attr("x", o).attr("y", i).attr("width", d).attr("height", 2).attr("stroke-width", 0).style("fill", (s) => s.color || r);
     },
     drawTextLabel({
       gElement: e,
@@ -5804,7 +5817,7 @@ const qt = {
         h: this.barChartHeight,
         radius: 3
       };
-      e.append("rect").attr("class", b.labelBg).attr("data-color", r).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"), e.append("rect").attr("class", b.labelBgFill).attr("data-color", r).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(r)).style("stroke", this.getTextFillColor(r)).style("stroke-width", 0.25), e.append("text").attr("class", b.labelText).attr("data-color", r).attr("x", 5).attr("y", t + 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(r)).text(n);
+      e.append("rect").attr("class", y.labelBg).attr("data-color", r).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"), e.append("rect").attr("class", y.labelBgFill).attr("data-color", r).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(r)).style("stroke", this.getTextFillColor(r)).style("stroke-width", 0.25), e.append("text").attr("class", y.labelText).attr("data-color", r).attr("x", 5).attr("y", t + 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(r)).text(n);
     },
     getTextFillColor(e, t = 0) {
       var r, n;