@kong-ui-public/analytics-chart 10.5.2-pr.2524.d42b49c13.0 → 10.6.1-pr.2532.20b109774.0

package/dist/vitals-chart.es.js

@@ -12576,7 +12576,7 @@ const eg = (n, t, e) => {
     value: t && t[s.text],
     isSegmentEmpty: i.datasets[r].isSegmentEmpty
   })).sort(e);
-}, IP = 2, Bw = 10, Yw = 12;
+}, LP = 2, Bw = 10, Yw = 12;
 var Oh;
 const ng = new Intl.NumberFormat(((Oh = document == null ? void 0 : document.documentElement) == null ? void 0 : Oh.lang) || "en-US"), Ll = 10, md = "#6c7489", jw = "#d60027", Mc = "#6c7489", $w = "#995c00", Uw = "#ffc400", Sc = "16px", Vw = "20px", qw = "'Inter', Roboto, Helvetica, sans-serif", pd = "24px", Xw = "40px", Gw = "48px", yd = {
   "1XXCount|1XX|1[0-9][0-9]": { solid: "#0072E5", light: "#4DA6FF", description: "Informational" },
@@ -12613,21 +12613,21 @@ const ng = new Intl.NumberFormat(((Oh = document == null ? void 0 : document.doc
   300: { background: "#fff1d5", text: "#a06027" },
   400: { background: "#fee3b6", text: "#944d19" },
   500: { background: "#fedada", text: "#852021" }
-}, LP = (n) => {
+}, NP = (n) => {
   var e;
   const t = Math.floor(parseInt(n, 10) / 100) * 100;
   return ((e = Qw[t]) == null ? void 0 : e.background) || "#fafafa";
-}, NP = {
+}, FP = {
   SUCCESS: "#6FCC83",
   FAILURE: "#FF8484"
-}, FP = {
+}, zP = {
   "4XX": "#FFBA81",
   "5XX": "#FF8484"
-}, zP = {
+}, HP = {
   LatencyP99: "#1356cb",
   LatencyP95: "#1fbecd",
   LatencyP50: "#1df97d"
-}, HP = "#dad4c7", Jw = "#afb7c5", WP = (n) => {
+}, WP = "#dad4c7", Jw = "#afb7c5", BP = (n) => {
   const t = Object.entries(yd).find(([e]) => new RegExp(e).test(n));
   return t && t[1] || yd.standard;
 }, ig = (n, t, e, i) => {
@@ -12713,7 +12713,7 @@ const ng = new Intl.NumberFormat(((Oh = document == null ? void 0 : document.doc
 ]), sg = (n) => {
   const t = parseInt(n, 10), e = Math.floor(t / 100) * 100, i = a1.get(e);
   return i === void 0 ? vd : i.get(t) ?? i.get(-1) ?? vd;
-}, BP = (n) => {
+}, YP = (n) => {
   const t = sg(n);
   return { solid: t, light: t };
 }, o1 = Array.from({ length: 500 }, (n, t) => 100 + t), Ko = {
@@ -13277,7 +13277,7 @@ const H1 = ({
     default:
       return isNaN(n) ? `${n}` : n >= 0.01 ? `${ng.format(Number.parseFloat(n.toFixed(2)))} ${r}` : `${Number.parseFloat(n.toPrecision(4))} ${r}`;
   }
-}, YP = (n) => {
+}, jP = (n) => {
   var e, i, s, r, a;
   const { i18n: t } = Mt.useI18n();
   return (n == null ? void 0 : n.status) === 403 ? {
@@ -19740,15 +19740,15 @@ class Jk {
     this._clearSelectionArea = !0, this._chart && this._chart.update();
   }
 }
-const jP = ["hidden", "single", "full"];
+const $P = ["hidden", "single", "full"];
 var Ui = /* @__PURE__ */ ((n) => (n.String = "string", n.Number = "number", n.Boolean = "boolean", n.Object = "object", n.Undefined = "undefined", n))(Ui || {});
-const $P = [
+const UP = [
   "donut",
   "horizontal_bar",
   "vertical_bar",
   "timeseries_line",
   "timeseries_bar"
-], UP = [
+], VP = [
   "gauge",
   "top_n",
   "single_value"
@@ -19761,91 +19761,111 @@ const $P = [
 }, iC = (n, t) => {
   const e = [];
   return n.data.datasets.forEach((i) => {
-    if (i.hidden)
+    if (!n.getDatasetMeta(n.data.datasets.indexOf(i)).visible)
       return;
-    const s = i.data;
-    s != null && s.length && t.forEach((r) => {
-      const a = s.map((l) => ({
-        ts: l.x,
-        pastThreshold: l.y >= r.value
+    const r = i.data;
+    r != null && r.length && t.filter((a) => a.highlightIntersections).forEach((a) => {
+      const o = r.map((c) => ({
+        ts: c.x,
+        aboveThreshold: c.y >= a.value
       }));
-      let o;
-      for (let l = 1; l < a.length; l++)
-        !a[l - 1].pastThreshold && a[l].pastThreshold ? o = Th(
-          s[l - 1],
-          s[l],
-          r.value
-        ) : a[l - 1].pastThreshold && !a[l].pastThreshold && o !== void 0 && (e.push({
-          start: o,
+      let l;
+      for (let c = 1; c < o.length; c++)
+        !o[c - 1].aboveThreshold && o[c].aboveThreshold ? l = Th(
+          r[c - 1],
+          r[c],
+          a.value
+        ) : o[c - 1].aboveThreshold && !o[c].aboveThreshold && l !== void 0 && (e.push({
+          start: l,
           end: Th(
-            s[l - 1],
-            s[l],
-            r.value
+            r[c - 1],
+            r[c],
+            a.value
           ),
-          type: r.type
-        }), o = void 0);
-      o !== void 0 && e.push({
-        start: o,
-        end: a[a.length - 1].ts,
-        type: r.type
+          type: a.type
+        }), l = void 0);
+      l !== void 0 && e.push({
+        start: l,
+        end: o[o.length - 1].ts,
+        type: a.type
       });
     });
   }), e;
+}, sC = (n) => {
+  if (!n.length)
+    return [];
+  n.sort((e, i) => e.type.localeCompare(i.type) || e.start - i.start);
+  const t = [];
+  for (const e of n) {
+    const i = t.findLast(({ type: s }) => s === e.type);
+    i && e.start <= i.end ? i.end = Math.max(i.end, e.end) : t.push({ ...e });
+  }
+  return t;
 };
-class sC {
+class rC {
   constructor(t) {
     P(this, "id", "thresholdPlugin");
     P(this, "_thresholds");
     P(this, "_mouseMoveHandler");
     this.i18n = t;
   }
-  beforeInit(t, e, i) {
-    var a;
-    const s = t.canvas;
-    for (const o of Object.keys(i.threshold || {})) {
-      const l = (a = i.threshold) == null ? void 0 : a[o];
-      l && (this._thresholds = {
+  _syncThresholds(t) {
+    var e;
+    for (const i of Object.keys(t.threshold || {})) {
+      const s = (e = t.threshold) == null ? void 0 : e[i];
+      s && (this._thresholds = {
         ...this._thresholds,
-        [o]: l.map((c) => ({ ...c, hovered: !1 }))
+        [i]: s.map((r) => ({ ...r, hovered: !1 }))
       });
     }
-    const r = (o) => {
-      var l;
+  }
+  // Gets called when chart options are updated
+  beforeUpdate(t, e, i) {
+    this._syncThresholds(i);
+  }
+  beforeInit(t, e, i) {
+    const s = t.canvas;
+    this._syncThresholds(i);
+    const r = (a) => {
+      var o;
       if (t) {
-        const c = o.clientY, u = t.scales.y, d = s.getBoundingClientRect(), h = u.getValueForPixel(c - d.top);
-        if (h)
-          for (const f of Object.keys(this._thresholds || {})) {
-            const g = (l = this._thresholds) == null ? void 0 : l[f];
-            g && g.forEach((y) => {
-              y.hovered = Math.abs(y.value - h) < tC;
+        const l = a.clientY, c = t.scales.y, u = s.getBoundingClientRect(), d = c.getValueForPixel(l - u.top);
+        if (d)
+          for (const h of Object.keys(this._thresholds || {})) {
+            const f = (o = this._thresholds) == null ? void 0 : o[h];
+            f && f.forEach((g) => {
+              g.hovered = Math.abs(g.value - d) < tC;
             });
           }
       }
     };
     s.addEventListener("mousemove", r), this._mouseMoveHandler = r;
   }
-  afterDatasetDraw(t) {
-    var e;
-    for (const i of Object.keys(this._thresholds || {})) {
-      const s = (e = this._thresholds) == null ? void 0 : e[i];
-      s && s.forEach((r) => {
-        const o = t.scales.y.getPixelForValue(r.value), l = t.ctx;
-        l.save(), l.beginPath(), l.moveTo(t.chartArea.left, o), l.lineTo(t.chartArea.right, o), l.lineWidth = 1, l.strokeStyle = qo(r.type), l.setLineDash([5, 5]), l.stroke(), l.restore();
-        let c = "";
-        r.label ? c = `${r.label}: ${r.value}` : r.type === "warning" ? c = this.i18n.t("chartLabels.threshold-warning", { value: r.value }) : r.type === "error" ? c = this.i18n.t("chartLabels.threshold-error", { value: r.value }) : c = this.i18n.t("chartLabels.thatreshold-neutral", { value: r.value }), r.hovered && (l.save(), l.fillStyle = qo(r.type), l.font = qw, l.fillText(c, t.chartArea.left, o - 4), l.restore()), iC(t, s).forEach((d) => {
-          if (d.type === r.type) {
-            const h = t.scales.x.getPixelForValue(d.start), f = t.scales.x.getPixelForValue(d.end);
-            l.save(), l.fillStyle = r.type === "error" ? eC : nC, l.fillRect(h, t.chartArea.top, f - h, t.chartArea.bottom - t.chartArea.top), l.restore(), l.save(), l.beginPath(), l.moveTo(h, t.chartArea.bottom), l.lineTo(f, t.chartArea.bottom), l.lineWidth = 2, l.strokeStyle = qo(r.type), l.stroke(), l.restore();
-          }
+  afterDatasetsDraw(t, e) {
+    var s;
+    const i = t.ctx;
+    for (const r of Object.keys(this._thresholds || {})) {
+      const a = (s = this._thresholds) == null ? void 0 : s[r];
+      if (a) {
+        a.forEach((c) => {
+          const d = t.scales.y.getPixelForValue(c.value);
+          i.save(), i.beginPath(), i.moveTo(t.chartArea.left, d), i.lineTo(t.chartArea.right, d), i.lineWidth = 1, i.strokeStyle = qo(c.type), i.setLineDash([5, 5]), i.stroke(), i.restore();
+          let h = "";
+          c.label ? h = `${c.label}: ${c.value}` : c.type === "warning" ? h = this.i18n.t("chartLabels.threshold-warning", { value: c.value }) : c.type === "error" ? h = this.i18n.t("chartLabels.threshold-error", { value: c.value }) : h = this.i18n.t("chartLabels.thatreshold-neutral", { value: c.value }), c.hovered && (i.save(), i.fillStyle = qo(c.type), i.font = qw, i.fillText(h, t.chartArea.left, d - 4), i.restore());
         });
-      });
+        const o = iC(t, a);
+        sC(o).forEach((c) => {
+          const u = t.scales.x.getPixelForValue(c.start), d = t.scales.x.getPixelForValue(c.end);
+          i.save(), i.fillStyle = c.type === "error" ? eC : nC, i.fillRect(u, t.chartArea.top, d - u, t.chartArea.bottom - t.chartArea.top), i.restore(), i.save(), i.beginPath(), i.moveTo(u, t.chartArea.bottom), i.lineTo(d, t.chartArea.bottom), i.lineWidth = 2, i.strokeStyle = qo(c.type), i.stroke(), i.restore();
+        });
+      }
     }
   }
   beforeDestroy(t) {
     this._mouseMoveHandler && t.canvas.removeEventListener("mousemove", this._mouseMoveHandler);
   }
 }
-const rC = /* @__PURE__ */ ge({
+const aC = /* @__PURE__ */ ge({
   __name: "TimeSeriesChart",
   props: {
     chartData: { default: void 0 },
@@ -19869,7 +19889,7 @@ const rC = /* @__PURE__ */ ge({
   },
   emits: ["zoom-time-range", "select-chart-range"],
   setup(n, { emit: t }) {
-    const e = n, i = t, { i18n: s } = Mt.useI18n(), r = new rm(), a = new Qg(), o = new Jk(), l = new sC(s), { translateUnit: c } = Mt.useTranslatedUnits(), u = Rt(), d = crypto.randomUUID(), h = crypto.randomUUID(), f = Rt([]), g = Rt(), y = Gi("legendPosition", qt.Right), _ = Vi("chartParent"), M = Rt(void 0), w = Rt(!1), D = Gi(Sg), v = D == null ? void 0 : D.evaluateFeatureFlagFn("analytics-chart-zoom-actions", !1), S = Zs({
+    const e = n, i = t, { i18n: s } = Mt.useI18n(), r = new rm(), a = new Qg(), o = new Jk(), l = new rC(s), { translateUnit: c } = Mt.useTranslatedUnits(), u = Rt(), d = crypto.randomUUID(), h = crypto.randomUUID(), f = Rt([]), g = Rt(), y = Gi("legendPosition", qt.Right), _ = Vi("chartParent"), M = Rt(void 0), w = Rt(!1), D = Gi(Sg), v = D == null ? void 0 : D.evaluateFeatureFlagFn("analytics-chart-zoom-actions", !1), S = Zs({
       showTooltip: !1,
       tooltipContext: 0,
       // Set in lineChartTooltipBehavior
@@ -20023,13 +20043,13 @@ const rC = /* @__PURE__ */ ge({
       }, null, 8, ["id", "chart-instance", "items"])
     ], 2));
   }
-}), aC = /* @__PURE__ */ We(rC, [["__scopeId", "data-v-3a82636b"]]), oC = { class: "analytics-chart-shell" }, lC = {
+}), oC = /* @__PURE__ */ We(aC, [["__scopeId", "data-v-3a82636b"]]), lC = { class: "analytics-chart-shell" }, cC = {
   key: 0,
   class: "chart-header"
-}, cC = { class: "tooltip-content" }, uC = {
+}, uC = { class: "tooltip-content" }, dC = {
   key: 2,
   class: "analytics-chart-parent"
-}, dC = /* @__PURE__ */ ge({
+}, hC = /* @__PURE__ */ ge({
   __name: "AnalyticsChart",
   props: {
     chartData: {},
@@ -20133,15 +20153,15 @@ const rC = /* @__PURE__ */ ge({
     ]);
     return Bc("showLegendValues", c), Bc("legendPosition", Ft(i, "legendPosition")), (R, H) => {
       const G = Ee("KTooltip"), nt = Ee("KEmptyState");
-      return X(), _t("div", oC, [
-        p.value && h.value && d.value ? (X(), _t("div", lC, [
+      return X(), _t("div", lC, [
+        p.value && h.value && d.value ? (X(), _t("div", cC, [
           ie(G, {
             class: "tooltip",
             "max-width": "500",
             placement: "right"
           }, {
             content: Wt(() => [
-              ut("div", cC, ft(q(f)), 1)
+              ut("div", uC, ft(q(f)), 1)
             ]),
             default: Wt(() => [
               ie(q(Sm), {
@@ -20152,8 +20172,8 @@ const rC = /* @__PURE__ */ ge({
             _: 1
           })
         ])) : Xt("", !0),
-        p.value ? (X(), _t("div", uC, [
-          y.value ? (X(), Nt(aC, {
+        p.value ? (X(), _t("div", dC, [
+          y.value ? (X(), Nt(oC, {
             key: 0,
             brush: a.value,
             "chart-data": r.value,
@@ -20220,14 +20240,14 @@ const rC = /* @__PURE__ */ ge({
       ]);
     };
   }
-}), VP = /* @__PURE__ */ We(dC, [["__scopeId", "data-v-01aae525"]]), hC = {
+}), qP = /* @__PURE__ */ We(hC, [["__scopeId", "data-v-01aae525"]]), fC = {
   class: "chart-parent",
   "data-testid": "gauge-chart-parent"
-}, fC = { class: "chart-totals-flex" }, gC = {
+}, gC = { class: "chart-totals-flex" }, mC = {
   key: 1,
   class: "metric-small",
   "data-testid": "gauge-chart-total"
-}, mC = /* @__PURE__ */ ge({
+}, pC = /* @__PURE__ */ ge({
   __name: "GaugeChart",
   props: {
     chartData: {
@@ -20297,15 +20317,15 @@ const rC = /* @__PURE__ */ ge({
       var f;
       return `color: ${(f = s == null ? void 0 : s.value[0]) == null ? void 0 : f.backgroundColor[t.numerator]}`;
     }), d = F(() => ["full", "single"].includes(t.metricDisplay)), h = F(() => t.metricDisplay === "full");
-    return (f, g) => (X(), _t("div", hC, [
-      ut("div", fC, [
+    return (f, g) => (X(), _t("div", fC, [
+      ut("div", gC, [
         d.value ? (X(), _t("div", {
           key: 0,
           class: "metric-large",
           "data-testid": "gauge-chart-metric",
           style: bi(u.value)
         }, ft(l.value), 5)) : Xt("", !0),
-        h.value ? (X(), _t("div", gC, ft(q(e).t("total")) + ": " + ft(c.value), 1)) : Xt("", !0)
+        h.value ? (X(), _t("div", mC, ft(q(e).t("total")) + ": " + ft(c.value), 1)) : Xt("", !0)
       ]),
       ut("div", {
         class: "chart-container",
@@ -20321,19 +20341,19 @@ const rC = /* @__PURE__ */ ge({
       ], 4)
     ]));
   }
-}), pC = /* @__PURE__ */ We(mC, [["__scopeId", "data-v-32e7f9e0"]]), yC = {
+}), yC = /* @__PURE__ */ We(pC, [["__scopeId", "data-v-32e7f9e0"]]), bC = {
   class: "chart-parent",
   "data-testid": "single-value-parent"
-}, bC = {
+}, _C = {
   key: 1,
   class: "single-value-wrapper"
-}, _C = {
+}, xC = {
   class: "single-value",
   "data-testid": "single-value-chart"
-}, xC = {
+}, vC = {
   key: 0,
   class: "single-value-unit"
-}, vC = /* @__PURE__ */ ge({
+}, wC = /* @__PURE__ */ ge({
   __name: "SingleValue",
   props: {
     data: {
@@ -20383,24 +20403,24 @@ const rC = /* @__PURE__ */ ge({
       ((u = (c = e.data) == null ? void 0 : c.data) == null ? void 0 : u.length) > 1 && console.warn("SingleValue chart should only be used with a single data point. Data length:", e.data.data.length);
     }), (c, u) => {
       const d = Ee("KEmptyState");
-      return X(), _t("div", yC, [
+      return X(), _t("div", bC, [
         o.value === null ? (X(), Nt(d, {
           key: 0,
           class: "single-value-error",
           "data-testid": "single-value-error",
           "icon-variant": "error",
           title: q(t)("singleValue.valueError")
-        }, null, 8, ["title"])) : (X(), _t("div", bC, [
-          ut("span", _C, ft(l.value), 1),
-          a.value ? (X(), _t("span", xC, "  " + ft(r.value), 1)) : Xt("", !0)
+        }, null, 8, ["title"])) : (X(), _t("div", _C, [
+          ut("span", xC, ft(l.value), 1),
+          a.value ? (X(), _t("span", vC, "  " + ft(r.value), 1)) : Xt("", !0)
         ]))
       ]);
     };
   }
-}), wC = /* @__PURE__ */ We(vC, [["__scopeId", "data-v-c25764ee"]]), MC = { class: "simple-chart-shell" }, SC = {
+}), MC = /* @__PURE__ */ We(wC, [["__scopeId", "data-v-c25764ee"]]), SC = { class: "simple-chart-shell" }, TC = {
   key: 1,
   class: "analytics-chart-parent"
-}, TC = /* @__PURE__ */ ge({
+}, DC = /* @__PURE__ */ ge({
   __name: "SimpleChart",
   props: {
     chartData: {
@@ -20458,9 +20478,9 @@ const rC = /* @__PURE__ */ ge({
     });
     return (c, u) => {
       const d = Ee("KEmptyState");
-      return X(), _t("div", MC, [
-        l.value ? (X(), _t("div", SC, [
-          r.value ? (X(), Nt(pC, {
+      return X(), _t("div", SC, [
+        l.value ? (X(), _t("div", TC, [
+          r.value ? (X(), Nt(yC, {
             key: 0,
             "chart-data": i.value,
             "dataset-colors": n.chartOptions.chartDatasetColors,
@@ -20471,7 +20491,7 @@ const rC = /* @__PURE__ */ ge({
             "synthetics-data-key": n.syntheticsDataKey,
             width: n.width
           }, null, 8, ["chart-data", "dataset-colors", "metric-display", "metric-unit", "numerator", "synthetics-data-key", "width"])) : Xt("", !0),
-          a.value ? (X(), Nt(wC, {
+          a.value ? (X(), Nt(MC, {
             key: 1,
             data: n.chartData,
             "decimal-points": n.chartOptions.decimalPoints
@@ -20490,20 +20510,20 @@ const rC = /* @__PURE__ */ ge({
       ]);
     };
   }
-}), qP = /* @__PURE__ */ We(TC, [["__scopeId", "data-v-471652c8"]]), DC = {
+}), XP = /* @__PURE__ */ We(DC, [["__scopeId", "data-v-471652c8"]]), kC = {
   class: "top-n-card-title",
   "data-testid": "top-n-card-title"
-}, kC = {
+}, CC = {
   class: "top-n-card-description",
   "data-testid": "top-n-card-description"
-}, CC = {
+}, PC = {
   key: 3,
   class: "top-n-table",
   "data-testid": "top-n-table"
-}, PC = { class: "table-headings" }, OC = { class: "table-row" }, AC = { class: "column-1" }, EC = { class: "column-2" }, RC = {
+}, OC = { class: "table-headings" }, AC = { class: "table-row" }, EC = { class: "column-1" }, RC = { class: "column-2" }, IC = {
   class: "table-body",
   "data-testid": "top-n-data"
-}, IC = ["data-testid"], LC = { class: "column-1" }, NC = { class: "column-2" }, FC = /* @__PURE__ */ ge({
+}, LC = ["data-testid"], NC = { class: "column-1" }, FC = { class: "column-2" }, zC = /* @__PURE__ */ ge({
   __name: "TopNTable",
   props: {
     title: { default: "" },
@@ -20572,20 +20592,20 @@ const rC = /* @__PURE__ */ ge({
             key: 1,
             "table-columns": 2,
             type: "table"
-          })) : s.value ? (X(), _t("div", CC, [
-            ut("div", PC, [
-              ut("div", OC, [
-                ut("div", AC, ft(q(e).t("topNTable.nameLabel")), 1),
-                ut("div", EC, ft(l.value), 1)
+          })) : s.value ? (X(), _t("div", PC, [
+            ut("div", OC, [
+              ut("div", AC, [
+                ut("div", EC, ft(q(e).t("topNTable.nameLabel")), 1),
+                ut("div", RC, ft(l.value), 1)
               ])
             ]),
-            ut("div", RC, [
+            ut("div", IC, [
               (X(!0), _t(Ks, null, Oa(i.value, (D, v) => (X(), _t("div", {
                 key: `entry-${v}`,
                 class: "table-row",
                 "data-testid": `row-${u(D)}`
               }, [
-                ut("div", LC, [
+                ut("div", NC, [
                   Qs(g.$slots, "name", {
                     record: {
                       id: u(D),
@@ -20597,8 +20617,8 @@ const rC = /* @__PURE__ */ ge({
                     ze(ft(d(D)), 1)
                   ], !0)
                 ]),
-                ut("div", NC, "   " + ft(f(D)), 1)
-              ], 8, IC))), 128))
+                ut("div", FC, "   " + ft(f(D)), 1)
+              ], 8, LC))), 128))
             ])
           ])) : (X(), Nt(_, {
             key: 2,
@@ -20616,21 +20636,21 @@ const rC = /* @__PURE__ */ ge({
         g.title ? {
           name: "title",
           fn: Wt(() => [
-            ut("span", DC, ft(g.title), 1)
+            ut("span", kC, ft(g.title), 1)
           ]),
           key: "0"
         } : void 0,
         g.description ? {
           name: "actions",
           fn: Wt(() => [
-            ut("div", kC, ft(g.description), 1)
+            ut("div", CC, ft(g.description), 1)
           ]),
           key: "1"
         } : void 0
       ]), 1032, ["title-tag"]);
     };
   }
-}), XP = /* @__PURE__ */ We(FC, [["__scopeId", "data-v-665e7735"]]);
+}), GP = /* @__PURE__ */ We(zC, [["__scopeId", "data-v-665e7735"]]);
 var Pa = { exports: {} };
 Pa.exports;
 (function(n, t) {
@@ -21219,10 +21239,10 @@ Pa.exports;
   }
   n.exports = bs;
 })(Pa, Pa.exports);
-var zC = Pa.exports;
-const HC = /* @__PURE__ */ Dc(zC);
-var WC = 9007199254740991, BC = "[object Arguments]", YC = "[object Function]", jC = "[object GeneratorFunction]", $C = "[object Symbol]", UC = typeof Ie == "object" && Ie && Ie.Object === Object && Ie, VC = typeof self == "object" && self && self.Object === Object && self, qC = UC || VC || Function("return this")();
-function XC(n, t, e) {
+var HC = Pa.exports;
+const WC = /* @__PURE__ */ Dc(HC);
+var BC = 9007199254740991, YC = "[object Arguments]", jC = "[object Function]", $C = "[object GeneratorFunction]", UC = "[object Symbol]", VC = typeof Ie == "object" && Ie && Ie.Object === Object && Ie, qC = typeof self == "object" && self && self.Object === Object && self, XC = VC || qC || Function("return this")();
+function GC(n, t, e) {
   switch (e.length) {
     case 0:
       return n.call(t);
@@ -21235,87 +21255,87 @@ function XC(n, t, e) {
   }
   return n.apply(t, e);
 }
-function GC(n, t) {
+function KC(n, t) {
   for (var e = -1, i = n ? n.length : 0, s = Array(i); ++e < i; )
     s[e] = t(n[e], e, n);
   return s;
 }
-function KC(n, t) {
+function ZC(n, t) {
   for (var e = -1, i = t.length, s = n.length; ++e < i; )
     n[s + e] = t[e];
   return n;
 }
-var zc = Object.prototype, ZC = zc.hasOwnProperty, Hc = zc.toString, Dh = qC.Symbol, QC = zc.propertyIsEnumerable, kh = Dh ? Dh.isConcatSpreadable : void 0, Ch = Math.max;
-function JC(n, t, e, i, s) {
+var zc = Object.prototype, QC = zc.hasOwnProperty, Hc = zc.toString, Dh = XC.Symbol, JC = zc.propertyIsEnumerable, kh = Dh ? Dh.isConcatSpreadable : void 0, Ch = Math.max;
+function tP(n, t, e, i, s) {
   var r = -1, a = n.length;
-  for (e || (e = iP), s || (s = []); ++r < a; ) {
+  for (e || (e = sP), s || (s = []); ++r < a; ) {
     var o = n[r];
-    e(o) ? KC(s, o) : s[s.length] = o;
+    e(o) ? ZC(s, o) : s[s.length] = o;
   }
   return s;
 }
-function tP(n, t) {
-  return n = Object(n), eP(n, t, function(e, i) {
+function eP(n, t) {
+  return n = Object(n), nP(n, t, function(e, i) {
     return i in n;
   });
 }
-function eP(n, t, e) {
+function nP(n, t, e) {
   for (var i = -1, s = t.length, r = {}; ++i < s; ) {
     var a = t[i], o = n[a];
     e(o, a) && (r[a] = o);
   }
   return r;
 }
-function nP(n, t) {
+function iP(n, t) {
   return t = Ch(t === void 0 ? n.length - 1 : t, 0), function() {
     for (var e = arguments, i = -1, s = Ch(e.length - t, 0), r = Array(s); ++i < s; )
       r[i] = e[t + i];
     i = -1;
     for (var a = Array(t + 1); ++i < t; )
       a[i] = e[i];
-    return a[t] = r, XC(n, this, a);
+    return a[t] = r, GC(n, this, a);
   };
 }
-function iP(n) {
-  return aP(n) || rP(n) || !!(kh && n && n[kh]);
-}
 function sP(n) {
-  if (typeof n == "string" || hP(n))
+  return oP(n) || aP(n) || !!(kh && n && n[kh]);
+}
+function rP(n) {
+  if (typeof n == "string" || fP(n))
     return n;
   var t = n + "";
   return t == "0" && 1 / n == -1 / 0 ? "-0" : t;
 }
-function rP(n) {
-  return lP(n) && ZC.call(n, "callee") && (!QC.call(n, "callee") || Hc.call(n) == BC);
-}
-var aP = Array.isArray;
-function oP(n) {
-  return n != null && uP(n.length) && !cP(n);
+function aP(n) {
+  return cP(n) && QC.call(n, "callee") && (!JC.call(n, "callee") || Hc.call(n) == YC);
 }
+var oP = Array.isArray;
 function lP(n) {
-  return am(n) && oP(n);
+  return n != null && dP(n.length) && !uP(n);
 }
 function cP(n) {
-  var t = dP(n) ? Hc.call(n) : "";
-  return t == YC || t == jC;
+  return am(n) && lP(n);
 }
 function uP(n) {
-  return typeof n == "number" && n > -1 && n % 1 == 0 && n <= WC;
+  var t = hP(n) ? Hc.call(n) : "";
+  return t == jC || t == $C;
 }
 function dP(n) {
+  return typeof n == "number" && n > -1 && n % 1 == 0 && n <= BC;
+}
+function hP(n) {
   var t = typeof n;
   return !!n && (t == "object" || t == "function");
 }
 function am(n) {
   return !!n && typeof n == "object";
 }
-function hP(n) {
-  return typeof n == "symbol" || am(n) && Hc.call(n) == $C;
+function fP(n) {
+  return typeof n == "symbol" || am(n) && Hc.call(n) == UC;
 }
-var fP = nP(function(n, t) {
-  return n == null ? {} : tP(n, GC(JC(t), sP));
-}), gP = fP;
-const mP = /* @__PURE__ */ Dc(gP);
+var gP = iP(function(n, t) {
+  return n == null ? {} : eP(n, KC(tP(t), rP));
+}), mP = gP;
+const pP = /* @__PURE__ */ Dc(mP);
 var om = { exports: {} };
 (function(n, t) {
   (function(e, i) {
@@ -21385,7 +21405,7 @@ var om = { exports: {} };
     a.saveAs = l.saveAs = l, n.exports = l;
   });
 })(om);
-var pP = om.exports, lm = { exports: {} };
+var yP = om.exports, lm = { exports: {} };
 /* @license
 Papa Parse
 v5.5.3
@@ -21800,8 +21820,8 @@ License: MIT
     }), (d.prototype = Object.create(u.prototype)).constructor = d, (h.prototype = Object.create(u.prototype)).constructor = h, (f.prototype = Object.create(f.prototype)).constructor = f, (g.prototype = Object.create(u.prototype)).constructor = g, c;
   });
 })(lm);
-var yP = lm.exports;
-const bP = ["id"], _P = /* @__PURE__ */ ge({
+var bP = lm.exports;
+const _P = ["id"], xP = /* @__PURE__ */ ge({
   __name: "VueJsonCsv",
   props: {
     data: {
@@ -21866,12 +21886,12 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
       const u = i.labels;
       if (typeof i.fields !== Ui.Object)
         throw new Error("Labels needs to be a object containing key / value pairs.");
-      return typeof u === Ui.Object ? (d) => HC(d, (h, f) => u[f] || f) : (d) => d;
+      return typeof u === Ui.Object ? (d) => WC(d, (h, f) => u[f] || f) : (d) => d;
     }, o = () => {
       const u = i.fields;
       if (typeof i.fields !== Ui.Object && !Array.isArray(u))
         throw new Error("Fields needs to be an array of strings.");
-      return Array.isArray(u) ? (d) => mP(d, u) : (d) => d;
+      return Array.isArray(u) ? (d) => pP(d, u) : (d) => d;
     }, l = () => {
       if (typeof i.fields === Ui.Undefined && typeof i.labels === Ui.Undefined)
         return i.data;
@@ -21883,7 +21903,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
         return;
       }
       e("export-started", r.value);
-      let u = yP.unparse(r.value, Object.assign({
+      let u = bP.unparse(r.value, Object.assign({
         delimiter: i.delimiter,
         encoding: i.encoding
       }));
@@ -21892,7 +21912,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
         const d = new Blob([u], {
           type: "text/csv;charset=" + i.encoding
         });
-        pP.saveAs(d, i.filename);
+        yP.saveAs(d, i.filename);
       }
     };
     return (u, d) => (X(), _t("div", {
@@ -21903,9 +21923,9 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
       Qs(u.$slots, "default", {}, () => [
         ze("Download " + ft(n.filename), 1)
       ])
-    ], 8, bP));
+    ], 8, _P));
   }
-}), xP = /* @__PURE__ */ ge({
+}), vP = /* @__PURE__ */ ge({
   __name: "DownloadCsv",
   props: {
     rows: {},
@@ -21915,7 +21935,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
   setup(n) {
     const t = n, e = F(() => Object.keys(t.headers));
     return (i, s) => (X(), _t("div", null, [
-      ie(_P, {
+      ie(xP, {
         data: i.rows,
         fields: e.value,
         filename: i.filename,
@@ -21928,14 +21948,14 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
       }, 8, ["data", "fields", "filename", "labels"])
     ]));
   }
-}), vP = { class: "kong-ui-public-csv-export-modal" }, wP = {
+}), wP = { class: "kong-ui-public-csv-export-modal" }, MP = {
   key: 0,
   class: "selected-range"
-}, MP = {
+}, SP = {
   key: 4,
   class: "text-muted",
   tag: "span"
-}, Ph = 3, GP = /* @__PURE__ */ ge({
+}, Ph = 3, KP = /* @__PURE__ */ ge({
   __name: "CsvExportModal",
   props: {
     exportState: {},
@@ -22012,7 +22032,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
       a.value++;
     }), (g, y) => {
       const _ = Ee("KSkeleton"), M = Ee("KEmptyState"), w = Ee("KTableData"), D = Ee("KTooltip"), v = Ee("KButton"), S = Ee("KModal");
-      return X(), _t("div", vP, [
+      return X(), _t("div", wP, [
         ie(S, {
           class: "vitals-report",
           "data-testid": "csv-export-modal",
@@ -22026,7 +22046,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
             var O;
             return [
               ut("div", null, [
-                g.exportState.status === "success" && l.value ? (X(), _t("div", wP, [
+                g.exportState.status === "success" && l.value ? (X(), _t("div", MP, [
                   ut("p", null, ft(g.modalDescription ? g.modalDescription : q(e).t("csvExport.exportDescription")), 1),
                   ut("p", null, ft(q(e).t("csvExport.exportTimeRange")) + ": " + ft(c.value), 1)
                 ])) : Xt("", !0),
@@ -22065,7 +22085,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
                   ]),
                   _: 1
                 })) : Xt("", !0),
-                g.exportState.status === "success" && l.value ? (X(), _t("div", MP, [
+                g.exportState.status === "success" && l.value ? (X(), _t("div", SP, [
                   ze(ft(u.value) + " ", 1),
                   ie(D, {
                     class: "preview-tooltip",
@@ -22095,7 +22115,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
               ]),
               _: 1
             }),
-            ie(xP, {
+            ie(vP, {
               class: "vitals-report-export-button",
               filename: r,
               headers: h.value.csvHeaders,
@@ -22121,7 +22141,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
       ]);
     };
   }
-}), SP = ({
+}), TP = ({
   groupSizeMs: n,
   minStamp: t,
   maxStamp: e,
@@ -22140,11 +22160,11 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
     ]), o = l;
   }
   return r;
-}, TP = { class: "container" }, DP = {
+}, DP = { class: "container" }, kP = {
   key: 0,
   class: "no-data",
   "data-testId": "sparkline-empty"
-}, kP = ["title"], CP = /* @__PURE__ */ ge({
+}, CP = ["title"], PP = /* @__PURE__ */ ge({
   __name: "SparklineChart",
   props: {
     datasets: {},
@@ -22188,7 +22208,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
       c.value[v],
       `${v}: ${c.value[v]}`
     ]).sort(([v], [S]) => S - v).map(([, v]) => v).join(", ")), d = F(() => Object.keys(c.value).map((v) => c.value[v]).reduce((v, S) => v + S, 0)), h = F(() => d.value > 0), f = F(() => n.datasets.length > 1), g = F(() => n.datasets.map(({ timestamps: v, color: S, label: O }) => ({
-      data: SP({
+      data: TP({
         groupSizeMs: l.value,
         minStamp: n.minStamp,
         maxStamp: n.maxStamp,
@@ -22293,7 +22313,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
         v = Math.max(v, C);
       }
       o("max", v);
-    }, { immediate: !0 }), (v, S) => (X(), _t("div", TP, [
+    }, { immediate: !0 }), (v, S) => (X(), _t("div", DP, [
       h.value ? v.type === "sparkline_bar" ? (X(), Nt(q(nm), {
         key: 1,
         "chart-id": q(e),
@@ -22308,7 +22328,7 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
         "data-testId": v.type === "sparkline_line" ? "sparkline-line" : "sparkline-step",
         options: M.value,
         plugins: a.value
-      }, null, 8, ["chart-id", "data", "data-testId", "options", "plugins"])) : Xt("", !0) : (X(), _t("div", DP, [
+      }, null, 8, ["chart-id", "data", "data-testId", "options", "plugins"])) : Xt("", !0) : (X(), _t("div", kP, [
         Qs(v.$slots, "empty", {}, () => [
           ze(ft(q(i).t("sparkline_no_data")), 1)
         ], !0)
@@ -22334,44 +22354,44 @@ const bP = ["id"], _P = /* @__PURE__ */ ge({
         }, () => [
           ze(ft(u.value), 1)
         ], !0)
-      ], 8, kP)) : Xt("", !0)
+      ], 8, CP)) : Xt("", !0)
     ]));
   }
-}), KP = /* @__PURE__ */ We(CP, [["__scopeId", "data-v-ea085d8b"]]);
+}), ZP = /* @__PURE__ */ We(PP, [["__scopeId", "data-v-ea085d8b"]]);
 export {
-  VP as AnalyticsChart,
+  qP as AnalyticsChart,
   qt as ChartLegendPosition,
-  GP as CsvExportModal,
-  IP as DECIMAL_DISPLAY,
+  KP as CsvExportModal,
+  LP as DECIMAL_DISPLAY,
   Jw as EMPTY_COLOR,
   Yw as FONT_SIZE_REGULAR,
   Bw as FONT_SIZE_SMALL,
   Ll as MAX_LABEL_LENGTH,
-  HP as OTHERS_COLOR,
-  qP as SimpleChart,
-  KP as SparklineChart,
-  XP as TopNTable,
+  WP as OTHERS_COLOR,
+  XP as SimpleChart,
+  ZP as SparklineChart,
+  GP as TopNTable,
   Ui as ValidType,
   Zw as accessibleGrey,
   Qw as apiRequestStatusCodeColors,
-  $P as chartTypes,
+  UP as chartTypes,
   a1 as codesInSpec,
   Kw as darkenColor,
   Qn as datavisPalette,
   Ko as defaultStatusCodeColors,
   ig as determineBaseColor,
-  FP as errorRateColors,
-  YP as handleQueryError,
-  zP as latencyColors,
+  zP as errorRateColors,
+  jP as handleQueryError,
+  HP as latencyColors,
   vd as lightGrey,
-  WP as lookupColor,
+  BP as lookupColor,
   Nl as lookupDatavisColor,
-  BP as lookupStatusCodeCategoryColor,
+  YP as lookupStatusCodeCategoryColor,
   sg as lookupStatusCodeColor,
   ng as numberFormatter,
-  jP as simpleChartMetricDisplay,
-  UP as simpleChartTypes,
-  LP as statusCodeBadgeBackgroundColor,
+  $P as simpleChartMetricDisplay,
+  VP as simpleChartTypes,
+  NP as statusCodeBadgeBackgroundColor,
   qo as thresholdColor,
-  NP as trafficColors
+  FP as trafficColors
 };