@kong-ui-public/analytics-metric-provider 7.0.0 → 7.0.2

package/dist/vitals-metric-provider.es.js

@@ -1,10 +1,10 @@
-import { ref as te, watchEffect as Be, computed as g, getCurrentInstance as $e, reactive as Pe, onMounted as Ke, onUnmounted as Ze, watch as Ue, isReadonly as Ge, toRefs as je, defineComponent as k, inject as ke, toRef as J, provide as Ye, renderSlot as qe, resolveComponent as ze, openBlock as p, createElementBlock as y, createElementVNode as x, normalizeClass as G, unref as _, createCommentVNode as T, createBlock as E, resolveDynamicComponent as z, withCtx as L, createTextVNode as Le, toDisplayString as R, createVNode as Y, normalizeStyle as A, Fragment as _e, renderList as Xe, mergeProps as Qe, pushScopeId as V, popScopeId as D, normalizeProps as We, guardReactiveProps as Je } from "vue";
+import { ref as te, watchEffect as Be, computed as g, getCurrentInstance as $e, reactive as Pe, onMounted as Ke, onUnmounted as Ze, watch as Ue, isReadonly as Ge, toRefs as je, defineComponent as k, inject as ke, toRef as J, provide as Xe, renderSlot as qe, resolveComponent as ze, openBlock as p, createElementBlock as y, createElementVNode as x, normalizeClass as G, unref as _, createCommentVNode as T, createBlock as E, resolveDynamicComponent as z, withCtx as L, createTextVNode as Le, toDisplayString as R, createVNode as X, normalizeStyle as A, Fragment as _e, renderList as Ye, mergeProps as Qe, pushScopeId as V, popScopeId as D, normalizeProps as We, guardReactiveProps as Je } from "vue";
 import { TimePeriods as ie, TimeframeKeys as ne, queryableExploreDimensions as er, DeltaQueryTime as rr, UnaryQueryTime as tr } from "@kong-ui-public/analytics-utilities";
 import { createI18n as ir, i18nTComponent as nr } from "@kong-ui-public/i18n";
 import { useAnalyticsConfigStore as ar } from "@kong-ui-public/analytics-config-store";
 const or = {
   notAvailable: "N/A"
-}, lr = {
+}, sr = {
   short: {
     traffic: "Requests",
     errorRate: "Error Rate",
@@ -17,7 +17,7 @@ const or = {
     averageLatency: "Average Latency",
     p99Latency: "P99 Latency"
   }
-}, sr = {
+}, ur = {
   custom: "vs previous {numDays, plural, =1 {day} other {# days}}",
   "15m": "vs previous 15 minutes",
   "1h": "vs previous hour",
@@ -32,13 +32,13 @@ const or = {
   previous_week: "vs previous time period",
   previous_month: "vs previous time period",
   previous_quarter: "vs previous quarter"
-}, ur = {
+}, lr = {
   general: or,
-  metricCard: lr,
-  trendRange: sr
+  metricCard: sr,
+  trendRange: ur
 };
 function dr() {
-  const e = ir("en-us", ur);
+  const e = ir("en-us", lr);
   return {
     i18n: e,
     i18nT: nr(e)
@@ -94,13 +94,13 @@ const B = Symbol("default"), de = "status_code_grouped", Re = (e, r, t, a, n) =>
 };
 function yr(e, r) {
   var v;
-  const t = ((v = e.meta.metric_names) == null ? void 0 : v[0]) || "", a = e.meta.start_ms, n = Object.keys(e.meta.display || {}), i = !!n.find((d) => d === de), s = n.find((d) => d !== de);
+  const t = ((v = e.meta.metric_names) == null ? void 0 : v[0]) || "", a = e.meta.start_ms, n = Object.keys(e.meta.display || {}), i = !!n.find((d) => d === de), u = n.find((d) => d !== de);
   return n.length > 2 || n.length > 1 && !i ? (console.error("Don't know how to work with provided dimensions:", n), {
     previous: { [B]: { [B]: 0 } },
     current: { [B]: { [B]: 0 } }
   }) : e.data.reduce((d, o) => {
-    const l = o.event[t], u = s ? o.event[s] : B, c = i ? o.event[de] : B;
-    return new Date(o.timestamp).getTime() === a && r ? Re(d, "previous", u, c, l) : Re(d, "current", u, c, l), d;
+    const s = o.event[t], l = u ? o.event[u] : B, c = i ? o.event[de] : B;
+    return new Date(o.timestamp).getTime() === a && r ? Re(d, "previous", l, c, s) : Re(d, "current", l, c, s), d;
   }, {
     previous: {},
     current: {}
@@ -109,11 +109,11 @@ function yr(e, r) {
 function mr(e) {
   e.queryReady === void 0 && (e.queryReady = g(() => !0));
   const { i18n: r } = K.useI18n(), t = g(() => {
-    var u, c;
+    var l, c;
     return {
       metrics: e.metrics.value,
       dimensions: [
-        ...(u = e.dimensions) != null && u.length ? [...e.dimensions] : [],
+        ...(l = e.dimensions) != null && l.length ? [...e.dimensions] : [],
         ...e.withTrend.value ? ["time"] : []
       ],
       granularity: e.withTrend.value ? "trend" : void 0,
@@ -124,9 +124,9 @@ function mr(e) {
     var c, f, C, m;
     if (!((c = e.queryReady) != null && c.value))
       return null;
-    const u = (f = e.filter) != null && f.value ? JSON.stringify(e.filter.value) : "";
-    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(C = e.dimensions) == null ? void 0 : C.join("-")}-${(m = e.metrics.value) == null ? void 0 : m.join("-")}-${u}`;
-  }), { response: n, error: i, isValidating: s } = K.useRequest(
+    const l = (f = e.filter) != null && f.value ? JSON.stringify(e.filter.value) : "";
+    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(C = e.dimensions) == null ? void 0 : C.join("-")}-${(m = e.metrics.value) == null ? void 0 : m.join("-")}-${l}`;
+  }), { response: n, error: i, isValidating: u } = K.useRequest(
     () => a.value,
     () => e.queryFn(t.value, e.abortController ?? new AbortController()),
     {
@@ -134,13 +134,13 @@ function mr(e) {
       revalidateOnFocus: !1,
       errorRetryCount: cr
     }
-  ), { state: v, swrvState: d } = gr(n, i, s), o = g(() => {
-    var u, c, f, C, m, b, N;
-    return !((c = (u = n.value) == null ? void 0 : u.data) != null && c.length) || !((C = (f = n.value) == null ? void 0 : f.meta) != null && C.display) || !((N = (b = (m = n.value) == null ? void 0 : m.meta) == null ? void 0 : b.metric_names) != null && N.length) ? { current: {}, previous: {} } : yr(n.value, e.withTrend.value);
-  }), l = g(() => {
-    var u, c, f;
+  ), { state: v, swrvState: d } = gr(n, i, u), o = g(() => {
+    var l, c, f, C, m, b, N;
+    return !((c = (l = n.value) == null ? void 0 : l.data) != null && c.length) || !((C = (f = n.value) == null ? void 0 : f.meta) != null && C.display) || !((N = (b = (m = n.value) == null ? void 0 : m.meta) == null ? void 0 : b.metric_names) != null && N.length) ? { current: {}, previous: {} } : yr(n.value, e.withTrend.value);
+  }), s = g(() => {
+    var l, c, f;
     if (e.timeframe.value.key === "custom") {
-      if (!((c = (u = n.value) == null ? void 0 : u.meta) != null && c.start_ms))
+      if (!((c = (l = n.value) == null ? void 0 : l.meta) != null && c.start_ms))
         return "";
       const { start_ms: C, end_ms: m } = n.value.meta;
       let b = (m - C) / (1e3 * 60 * 60 * 24);
@@ -153,12 +153,12 @@ function mr(e) {
     hasError: g(() => d.ERROR === v.value),
     raw: n,
     mapped: o,
-    trendRange: l
+    trendRange: s
   };
 }
-const j = (e, r, t = B, a) => (a ?? [B]).reduce((i, s) => {
+const j = (e, r, t = B, a) => (a ?? [B]).reduce((i, u) => {
   const v = e[r][t];
-  return v ? i + (v[s] || 0) : i;
+  return v ? i + (v[u] || 0) : i;
 }, 0);
 function hr(e) {
   const {
@@ -167,29 +167,29 @@ function hr(e) {
     description: a,
     record: n,
     hasError: i,
-    increaseIsBad: s,
+    increaseIsBad: u,
     formatValueFn: v,
     trendRange: d
   } = e;
   return g(() => {
-    let o = 0, l = 0;
+    let o = 0, s = 0;
     if (n != null && n.value)
       try {
-        o = j(n.value, "current", e.lookupKey, e.sumGroupedValues), l = j(n.value, "previous", e.lookupKey, e.sumGroupedValues);
-      } catch (u) {
+        o = j(n.value, "current", e.lookupKey, e.sumGroupedValues), s = j(n.value, "previous", e.lookupKey, e.sumGroupedValues);
+      } catch (l) {
         console.error(
           "Metric card data doesn't have the expected structure:",
-          u
+          l
         );
       }
     return {
       cardType: r,
       hasError: i.value,
       currentValue: o,
-      previousValue: l,
+      previousValue: s,
       title: t.value,
       description: a,
-      increaseIsBad: !!s,
+      increaseIsBad: !!u,
       // Coerce undefined to false
       formatValueFn: v,
       trendRange: d == null ? void 0 : d.value
@@ -227,17 +227,17 @@ var ge = (
       var t = this.serializeKey(r);
       return this.items.get(t);
     }, e.prototype.set = function(r, t, a) {
-      var n = this.serializeKey(r), i = a || this.ttl, s = Date.now(), v = {
+      var n = this.serializeKey(r), i = a || this.ttl, u = Date.now(), v = {
         data: t,
-        createdAt: s,
-        expiresAt: i ? s + i : 1 / 0
+        createdAt: u,
+        expiresAt: i ? u + i : 1 / 0
       };
       this.dispatchExpire(i, v, n), this.items.set(n, v);
     }, e.prototype.dispatchExpire = function(r, t, a) {
       var n = this;
       r && setTimeout(function() {
-        var i = Date.now(), s = i >= t.expiresAt;
-        s && n.delete(a);
+        var i = Date.now(), u = i >= t.expiresAt;
+        u && n.delete(a);
       }, r);
     }, e.prototype.delete = function(r) {
       this.items.delete(r);
@@ -271,27 +271,27 @@ var F = function() {
   }, F.apply(this, arguments);
 }, Z = function(e, r, t, a) {
   function n(i) {
-    return i instanceof t ? i : new t(function(s) {
-      s(i);
+    return i instanceof t ? i : new t(function(u) {
+      u(i);
     });
   }
-  return new (t || (t = Promise))(function(i, s) {
-    function v(l) {
+  return new (t || (t = Promise))(function(i, u) {
+    function v(s) {
       try {
-        o(a.next(l));
-      } catch (u) {
-        s(u);
+        o(a.next(s));
+      } catch (l) {
+        u(l);
       }
     }
-    function d(l) {
+    function d(s) {
       try {
-        o(a.throw(l));
-      } catch (u) {
-        s(u);
+        o(a.throw(s));
+      } catch (l) {
+        u(l);
       }
     }
-    function o(l) {
-      l.done ? i(l.value) : n(l.value).then(v, d);
+    function o(s) {
+      s.done ? i(s.value) : n(s.value).then(v, d);
     }
     o((a = a.apply(e, r || [])).next());
   });
@@ -300,13 +300,13 @@ var F = function() {
     if (i[0] & 1)
       throw i[1];
     return i[1];
-  }, trys: [], ops: [] }, a, n, i, s;
-  return s = { next: v(0), throw: v(1), return: v(2) }, typeof Symbol == "function" && (s[Symbol.iterator] = function() {
+  }, trys: [], ops: [] }, a, n, i, u;
+  return u = { next: v(0), throw: v(1), return: v(2) }, typeof Symbol == "function" && (u[Symbol.iterator] = function() {
     return this;
-  }), s;
+  }), u;
   function v(o) {
-    return function(l) {
-      return d([o, l]);
+    return function(s) {
+      return d([o, s]);
     };
   }
   function d(o) {
@@ -350,8 +350,8 @@ var F = function() {
             continue;
         }
         o = r.call(e, t);
-      } catch (l) {
-        o = [6, l], n = 0;
+      } catch (s) {
+        o = [6, s], n = 0;
       } finally {
         a = i = 0;
       }
@@ -363,18 +363,18 @@ var F = function() {
   var t = typeof Symbol == "function" && e[Symbol.iterator];
   if (!t)
     return e;
-  var a = t.call(e), n, i = [], s;
+  var a = t.call(e), n, i = [], u;
   try {
     for (; (r === void 0 || r-- > 0) && !(n = a.next()).done; )
       i.push(n.value);
   } catch (v) {
-    s = { error: v };
+    u = { error: v };
   } finally {
     try {
       n && !n.done && (t = a.return) && t.call(a);
     } finally {
-      if (s)
-        throw s.error;
+      if (u)
+        throw u.error;
     }
   }
   return i;
@@ -417,37 +417,37 @@ function Er(e, r, t) {
 }
 var Ne = function(e, r, t, a) {
   return t === void 0 && (t = Ve), a === void 0 && (a = De.ttl), Z(void 0, void 0, void 0, function() {
-    var n, i, s, v, d, o, l;
-    return U(this, function(u) {
-      switch (u.label) {
+    var n, i, u, v, d, o, s;
+    return U(this, function(l) {
+      switch (l.label) {
         case 0:
           if (!xr(r))
             return [3, 5];
-          u.label = 1;
+          l.label = 1;
         case 1:
-          return u.trys.push([1, 3, , 4]), [4, r];
+          return l.trys.push([1, 3, , 4]), [4, r];
         case 2:
-          return n = u.sent(), [3, 4];
+          return n = l.sent(), [3, 4];
         case 3:
-          return v = u.sent(), i = v, [3, 4];
+          return v = l.sent(), i = v, [3, 4];
         case 4:
           return [3, 6];
         case 5:
-          n = r, u.label = 6;
+          n = r, l.label = 6;
         case 6:
-          if (s = !1, d = { data: n, error: i, isValidating: s }, typeof n < "u")
+          if (u = !1, d = { data: n, error: i, isValidating: u }, typeof n < "u")
             try {
               t.set(e, d, a);
             } catch (c) {
               console.error("swrv(mutate): failed to set cache", c);
             }
-          return o = ae.get(e), o && o.data.length && (l = o.data.filter(function(c) {
+          return o = ae.get(e), o && o.data.length && (s = o.data.filter(function(c) {
             return c.key === e;
-          }), l.forEach(function(c, f) {
+          }), s.forEach(function(c, f) {
             typeof d.data < "u" && (c.data = d.data), c.error = d.error, c.isValidating = d.isValidating;
-            var C = f === l.length - 1;
-            C || delete l[f];
-          }), l = l.filter(Boolean)), [2, d];
+            var C = f === s.length - 1;
+            C || delete s[f];
+          }), s = s.filter(Boolean)), [2, d];
       }
     });
   });
@@ -455,12 +455,12 @@ var Ne = function(e, r, t, a) {
 function Ir() {
   for (var e = this, r = [], t = 0; t < arguments.length; t++)
     r[t] = arguments[t];
-  var a, n, i = F({}, De), s = !1, v = !1, d = $e(), o = (d == null ? void 0 : d.proxy) || d;
+  var a, n, i = F({}, De), u = !1, v = !1, d = $e(), o = (d == null ? void 0 : d.proxy) || d;
   if (!o)
     return console.error("Could not get current instance, check to make sure that `useSwrv` is declared in the top level of the setup function."), null;
-  var l = (o == null ? void 0 : o.$isServer) || !1;
+  var s = (o == null ? void 0 : o.$isServer) || !1;
   r.length >= 1 && (a = r[0]), r.length >= 2 && (n = r[1]), r.length > 2 && (i = F(F({}, i), r[2]));
-  var u = l ? i.serverTTL : i.ttl, c = typeof a == "function" ? a : te(a);
+  var l = s ? i.serverTTL : i.ttl, c = typeof a == "function" ? a : te(a);
   typeof n > "u" && (n = i.fetcher);
   var f = null;
   f || (f = Pe({
@@ -471,43 +471,43 @@ function Ir() {
   }));
   var C = function(S, h) {
     return Z(e, void 0, void 0, function() {
-      var H, I, $, X, oe, he, le, Ce = this;
-      return U(this, function(se) {
-        switch (se.label) {
+      var H, I, $, Y, oe, he, se, Ce = this;
+      return U(this, function(ue) {
+        switch (ue.label) {
           case 0:
-            return H = f.data === void 0, I = c.value, I ? ($ = i.cache.get(I), X = $ && $.data, f.isValidating = !0, X && (f.data = X.data, f.error = X.error), oe = S || n, !oe || !i.isDocumentVisible() && !H || (h == null ? void 0 : h.forceRevalidate) !== void 0 && !(h != null && h.forceRevalidate) ? (f.isValidating = !1, [
+            return H = f.data === void 0, I = c.value, I ? ($ = i.cache.get(I), Y = $ && $.data, f.isValidating = !0, Y && (f.data = Y.data, f.error = Y.error), oe = S || n, !oe || !i.isDocumentVisible() && !H || (h == null ? void 0 : h.forceRevalidate) !== void 0 && !(h != null && h.forceRevalidate) ? (f.isValidating = !1, [
               2
               /*return*/
             ]) : $ && (he = !!(Date.now() - $.createdAt >= i.dedupingInterval || h != null && h.forceRevalidate), !he) ? (f.isValidating = !1, [
               2
               /*return*/
-            ]) : (le = function() {
+            ]) : (se = function() {
               return Z(Ce, void 0, void 0, function() {
-                var P, be, ue, Se;
+                var P, be, le, Se;
                 return U(this, function(W) {
                   switch (W.label) {
                     case 0:
-                      return P = pe.get(I), P ? [3, 2] : (be = Array.isArray(I) ? I : [I], ue = oe.apply(void 0, Tr([], Rr(be), !1)), pe.set(I, ue, i.dedupingInterval), [4, Ne(I, ue, i.cache, u)]);
+                      return P = pe.get(I), P ? [3, 2] : (be = Array.isArray(I) ? I : [I], le = oe.apply(void 0, Tr([], Rr(be), !1)), pe.set(I, le, i.dedupingInterval), [4, Ne(I, le, i.cache, l)]);
                     case 1:
                       return W.sent(), [3, 4];
                     case 2:
-                      return [4, Ne(I, P.data, i.cache, u)];
+                      return [4, Ne(I, P.data, i.cache, l)];
                     case 3:
                       W.sent(), W.label = 4;
                     case 4:
-                      return f.isValidating = !1, pe.delete(I), f.error !== void 0 && (Se = !s && i.shouldRetryOnError && (h ? h.shouldRetryOnError : !0), Se && Er(C, h ? h.errorRetryCount : 1, i)), [
+                      return f.isValidating = !1, pe.delete(I), f.error !== void 0 && (Se = !u && i.shouldRetryOnError && (h ? h.shouldRetryOnError : !0), Se && Er(C, h ? h.errorRetryCount : 1, i)), [
                         2
                         /*return*/
                       ];
                   }
                 });
               });
-            }, X && i.revalidateDebounce ? (setTimeout(function() {
+            }, Y && i.revalidateDebounce ? (setTimeout(function() {
               return Z(Ce, void 0, void 0, function() {
                 return U(this, function(P) {
                   switch (P.label) {
                     case 0:
-                      return s ? [3, 2] : [4, le()];
+                      return u ? [3, 2] : [4, se()];
                     case 1:
                       P.sent(), P.label = 2;
                     case 2:
@@ -523,9 +523,9 @@ function Ir() {
               /*return*/
             ];
           case 1:
-            return [4, le()];
+            return [4, se()];
           case 2:
-            se.sent(), se.label = 3;
+            ue.sent(), ue.label = 3;
           case 3:
             return [
               2
@@ -553,7 +553,7 @@ function Ir() {
             case 2:
               b && clearTimeout(b), h.label = 3;
             case 3:
-              return i.refreshInterval && !s && (b = setTimeout(S, i.refreshInterval)), [
+              return i.refreshInterval && !u && (b = setTimeout(S, i.refreshInterval)), [
                 2
                 /*return*/
               ];
@@ -563,7 +563,7 @@ function Ir() {
     };
     i.refreshInterval && (b = setTimeout(S, i.refreshInterval)), i.revalidateOnFocus && (document.addEventListener("visibilitychange", m, !1), window.addEventListener("focus", m, !1));
   }), Ze(function() {
-    s = !0, b && clearTimeout(b), i.revalidateOnFocus && (document.removeEventListener("visibilitychange", m, !1), window.removeEventListener("focus", m, !1));
+    u = !0, b && clearTimeout(b), i.revalidateOnFocus && (document.removeEventListener("visibilitychange", m, !1), window.removeEventListener("focus", m, !1));
     var S = ae.get(c.value);
     S && (S.data = S.data.filter(function(h) {
       return h !== f;
@@ -571,7 +571,7 @@ function Ir() {
   });
   try {
     Ue(c, function(S) {
-      Ge(c) || (c.value = S), f.key = S, f.isValidating = !!S, Nr(c.value, f, u), !l && !v && c.value && C(), v = !1;
+      Ge(c) || (c.value = S), f.key = S, f.isValidating = !!S, Nr(c.value, f, l), !s && !v && c.value && C(), v = !1;
     }, {
       immediate: !0
     });
@@ -590,7 +590,7 @@ function kr(e, r, t) {
     data: a,
     error: n,
     isValidating: i,
-    mutate: s
+    mutate: u
   } = Ir(e, r, {
     revalidateDebounce: 500,
     revalidateOnFocus: !1,
@@ -602,7 +602,7 @@ function kr(e, r, t) {
     response: a,
     error: n,
     isValidating: i,
-    revalidate: s
+    revalidate: u
   };
 }
 const K = {
@@ -617,12 +617,12 @@ const K = {
     additionalFilter: a,
     queryReady: n,
     timeframe: i,
-    tz: s,
+    tz: u,
     hasTrendAccess: v,
     refreshInterval: d,
     abortController: o,
-    queryFn: l,
-    averageLatencies: u
+    queryFn: s,
+    averageLatencies: l
   } = e;
   if (t && !r)
     throw new Error("Must provide a dimension if filtering by a value");
@@ -646,15 +646,15 @@ const K = {
     filter: C,
     queryReady: n,
     timeframe: i,
-    tz: s,
+    tz: u,
     // Traffic and error rate cards can't query trend if multiple entities are expected.
     withTrend: g(() => v.value && !f),
     refreshInterval: d,
-    queryFn: l,
+    queryFn: s,
     abortController: o
   }, b = {
     metrics: g(() => [
-      u.value ? "response_latency_average" : "response_latency_p99"
+      l.value ? "response_latency_average" : "response_latency_p99"
     ]),
     // To keep single-entity queries consistent, don't bother querying the dimension for latency
     // in the single-entity case, even though it's possible.
@@ -662,11 +662,11 @@ const K = {
     filter: C,
     queryReady: n,
     timeframe: i,
-    tz: s,
+    tz: u,
     // Don't query latency trends in the multi-entity case: it's possible, but wasteful.
     withTrend: g(() => v.value && !f),
     refreshInterval: d,
-    queryFn: l,
+    queryFn: s,
     abortController: o
   }, N = K.useMetricFetcher(m), S = K.useMetricFetcher(b);
   return {
@@ -697,15 +697,15 @@ const K = {
     const t = ke(pr);
     let a, n;
     t ? (a = t.queryFn, n = t.evaluateFeatureFlagFn) : (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/analytics-metric-provider/README.md#requirements"), a = () => Promise.reject(new Error("Query bridge required")), n = (f, C) => C);
-    const i = ar(), s = J(() => i.longRetention), v = g(() => !i.loading && r.queryReady), d = g(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), o = g(() => {
+    const i = ar(), u = J(() => i.longRetention), v = g(() => !i.loading && r.queryReady), d = g(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), o = g(() => {
       if (r.overrideTimeframe)
         return r.overrideTimeframe;
-      const f = s.value ? ie.get(r.maxTimeframe) : ie.get(ne.ONE_DAY);
+      const f = u.value ? ie.get(r.maxTimeframe) : ie.get(ne.ONE_DAY);
       if (!f)
         throw new Error("Metrics provider failed to resolve fallback timeframe.");
       return f;
-    }), l = g(() => r.percentileLatency ? !1 : n("MA-2527-analytics-sku-config-endpoint", !1)), {
-      trafficData: u,
+    }), s = g(() => r.percentileLatency ? !1 : n("MA-2527-analytics-sku-config-endpoint", !1)), {
+      trafficData: l,
       latencyData: c
     } = qr({
       dimension: r.dimension,
@@ -714,24 +714,24 @@ const K = {
       queryReady: v,
       timeframe: o,
       tz: d,
-      hasTrendAccess: s,
+      hasTrendAccess: u,
       refreshInterval: r.refreshInterval,
       queryFn: a,
-      averageLatencies: l,
+      averageLatencies: s,
       abortController: r.abortController
     });
-    return Ye(Me, {
+    return Xe(Me, {
       data: {
-        traffic: u,
+        traffic: l,
         latency: c
       },
       description: J(() => r.description),
       containerTitle: J(() => r.containerTitle),
-      hasTrendAccess: s,
+      hasTrendAccess: u,
       longCardTitles: r.longCardTitles,
-      averageLatencies: l
+      averageLatencies: s
     }), (f, C) => qe(f.$slots, "default", {
-      hasTrendAccess: s.value,
+      hasTrendAccess: u.value,
       timeframe: o.value
     });
   }
@@ -742,26 +742,26 @@ function zr(e) {
 var Fe = { exports: {} };
 (function(e) {
   (function() {
-    function r(o, l) {
-      if (l.separator === !1 || o < 1e3)
+    function r(o, s) {
+      if (s.separator === !1 || o < 1e3)
         return o.toString();
-      var u = typeof l.separator == "string" ? l.separator : ",", c = [], f = Math.round(o).toString().split("");
+      var l = typeof s.separator == "string" ? s.separator : ",", c = [], f = Math.round(o).toString().split("");
       return f.reverse().forEach(function(C, m) {
-        m && m % 3 === 0 && c.push(u), c.push(C);
+        m && m % 3 === 0 && c.push(l), c.push(C);
       }), c.reverse().join("");
     }
-    function t(o, l, u) {
-      var c = o / l, f = u.round ? "round" : "floor";
-      return u.decimal === !1 ? (o = Math[f](c), o.toString()) : (u.precision ? o = c : o = c < 10 ? Math[f](c * 10) / 10 : Math[f](c), o = o.toString(), typeof u.decimal == "string" && (o = o.replace(".", u.decimal)), o);
+    function t(o, s, l) {
+      var c = o / s, f = l.round ? "round" : "floor";
+      return l.decimal === !1 ? (o = Math[f](c), o.toString()) : (l.precision ? o = c : o = c < 10 ? Math[f](c * 10) / 10 : Math[f](c), o = o.toString(), typeof l.decimal == "string" && (o = o.replace(".", l.decimal)), o);
     }
-    var a = 1e3, n = 1e4, i = 1e6, s = 1e9, v = 1e12;
-    function d(o, l) {
-      var u;
-      l = l || {};
+    var a = 1e3, n = 1e4, i = 1e6, u = 1e9, v = 1e12;
+    function d(o, s) {
+      var l;
+      s = s || {};
       var c = o < 0;
-      c && (o = Math.abs(o)), l.precision && (o = parseFloat(o.toPrecision(l.precision)));
-      var f = l.min10k ? n : a;
-      return o < f || l.precision && l.precision > Math.log10(o) ? u = r(t(o, 1, l), l) : o < i ? u = t(o, a, l) + "k" : o < s ? u = t(o, i, l) + "m" : o < v ? u = r(t(o, s, l), l) + "b" : u = r(t(o, v, l), l) + "t", c && (u = "-" + u), l.capital && (u = u.toUpperCase()), l.prefix && (u = l.prefix + u), l.suffix && (u = u + l.suffix), u;
+      c && (o = Math.abs(o)), s.precision && (o = parseFloat(o.toPrecision(s.precision)));
+      var f = s.min10k ? n : a;
+      return o < f || s.precision && s.precision > Math.log10(o) ? l = r(t(o, 1, s), s) : o < i ? l = t(o, a, s) + "k" : o < u ? l = t(o, i, s) + "m" : o < v ? l = r(t(o, u, s), s) + "b" : l = r(t(o, v, s), s) + "t", c && (l = "-" + l), s.capital && (l = l.toUpperCase()), s.prefix && (l = s.prefix + l), s.suffix && (l = l + s.suffix), l;
     }
     d.addCommas = r, e.exports = d;
   })();
@@ -774,7 +774,7 @@ const w = "24px", M = (e, r) => {
   for (const [a, n] of r)
     t[a] = n;
   return t;
-}, Vr = (e) => (V("data-v-d7a2b809"), e = e(), D(), e), Dr = ["aria-hidden"], Mr = {
+}, Vr = (e) => (V("data-v-80a84c23"), e = e(), D(), e), Dr = ["aria-hidden"], Mr = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Fr = /* @__PURE__ */ Vr(() => /* @__PURE__ */ x("path", {
@@ -873,7 +873,7 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), Hr = /* @__PURE__ */ M(Or, [["__scopeId", "data-v-d7a2b809"]]), Br = (e) => (V("data-v-30ee0f0f"), e = e(), D(), e), $r = ["aria-hidden"], Pr = {
+}), Hr = /* @__PURE__ */ M(Or, [["__scopeId", "data-v-80a84c23"]]), Br = (e) => (V("data-v-51fd13af"), e = e(), D(), e), $r = ["aria-hidden"], Pr = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Kr = /* @__PURE__ */ Br(() => /* @__PURE__ */ x("path", {
@@ -972,10 +972,10 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), Ur = /* @__PURE__ */ M(Zr, [["__scopeId", "data-v-30ee0f0f"]]), Gr = (e) => (V("data-v-50d919dd"), e = e(), D(), e), jr = ["aria-hidden"], Yr = {
+}), Ur = /* @__PURE__ */ M(Zr, [["__scopeId", "data-v-51fd13af"]]), Gr = (e) => (V("data-v-c5283a2c"), e = e(), D(), e), jr = ["aria-hidden"], Xr = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, Xr = /* @__PURE__ */ Gr(() => /* @__PURE__ */ x("path", {
+}, Yr = /* @__PURE__ */ Gr(() => /* @__PURE__ */ x("path", {
   d: "M5 11V9H15V11H5Z",
   fill: "currentColor"
 }, null, -1)), Qr = /* @__PURE__ */ k({
@@ -1064,14 +1064,14 @@ const w = "24px", M = (e, r) => {
           width: "100%",
           xmlns: "http://www.w3.org/2000/svg"
         }, [
-          e.title ? (p(), y("title", Yr, R(e.title), 1)) : T("", !0),
-          Xr
+          e.title ? (p(), y("title", Xr, R(e.title), 1)) : T("", !0),
+          Yr
         ], 8, jr))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), Oe = /* @__PURE__ */ M(Qr, [["__scopeId", "data-v-50d919dd"]]), Wr = (e) => (V("data-v-57e115a9"), e = e(), D(), e), Jr = ["aria-hidden"], et = {
+}), Oe = /* @__PURE__ */ M(Qr, [["__scopeId", "data-v-c5283a2c"]]), Wr = (e) => (V("data-v-7958c198"), e = e(), D(), e), Jr = ["aria-hidden"], et = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, rt = /* @__PURE__ */ Wr(() => /* @__PURE__ */ x("path", {
@@ -1170,13 +1170,13 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), it = /* @__PURE__ */ M(tt, [["__scopeId", "data-v-57e115a9"]]), nt = (e) => (V("data-v-6b672e11"), e = e(), D(), e), at = ["aria-hidden"], ot = {
+}), it = /* @__PURE__ */ M(tt, [["__scopeId", "data-v-7958c198"]]), nt = (e) => (V("data-v-d0ffb1de"), e = e(), D(), e), at = ["aria-hidden"], ot = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
-}, lt = /* @__PURE__ */ nt(() => /* @__PURE__ */ x("path", {
+}, st = /* @__PURE__ */ nt(() => /* @__PURE__ */ x("path", {
   d: "M15.25 5C14.9 5 14.6042 4.87917 14.3625 4.6375C14.1208 4.39583 14 4.1 14 3.75C14 3.4 14.1208 3.10417 14.3625 2.8625C14.6042 2.62083 14.9 2.5 15.25 2.5C15.6 2.5 15.8958 2.62083 16.1375 2.8625C16.3792 3.10417 16.5 3.4 16.5 3.75C16.5 4.1 16.3792 4.39583 16.1375 4.6375C15.8958 4.87917 15.6 5 15.25 5ZM15.25 21.5C14.9 21.5 14.6042 21.3792 14.3625 21.1375C14.1208 20.8958 14 20.6 14 20.25C14 19.9 14.1208 19.6042 14.3625 19.3625C14.6042 19.1208 14.9 19 15.25 19C15.6 19 15.8958 19.1208 16.1375 19.3625C16.3792 19.6042 16.5 19.9 16.5 20.25C16.5 20.6 16.3792 20.8958 16.1375 21.1375C15.8958 21.3792 15.6 21.5 15.25 21.5ZM19.25 8.5C18.9 8.5 18.6042 8.37917 18.3625 8.1375C18.1208 7.89583 18 7.6 18 7.25C18 6.9 18.1208 6.60417 18.3625 6.3625C18.6042 6.12083 18.9 6 19.25 6C19.6 6 19.8958 6.12083 20.1375 6.3625C20.3792 6.60417 20.5 6.9 20.5 7.25C20.5 7.6 20.3792 7.89583 20.1375 8.1375C19.8958 8.37917 19.6 8.5 19.25 8.5ZM19.25 18C18.9 18 18.6042 17.8792 18.3625 17.6375C18.1208 17.3958 18 17.1 18 16.75C18 16.4 18.1208 16.1042 18.3625 15.8625C18.6042 15.6208 18.9 15.5 19.25 15.5C19.6 15.5 19.8958 15.6208 20.1375 15.8625C20.3792 16.1042 20.5 16.4 20.5 16.75C20.5 17.1 20.3792 17.3958 20.1375 17.6375C19.8958 17.8792 19.6 18 19.25 18ZM20.75 13.25C20.4 13.25 20.1042 13.1292 19.8625 12.8875C19.6208 12.6458 19.5 12.35 19.5 12C19.5 11.65 19.6208 11.3542 19.8625 11.1125C20.1042 10.8708 20.4 10.75 20.75 10.75C21.1 10.75 21.3958 10.8708 21.6375 11.1125C21.8792 11.3542 22 11.65 22 12C22 12.35 21.8792 12.6458 21.6375 12.8875C21.3958 13.1292 21.1 13.25 20.75 13.25ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2V4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20V22ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.9167 10.0042 11.8292 10.0125 11.7375C10.0208 11.6458 10.0417 11.5583 10.075 11.475L8 9.4L9.4 8L11.475 10.075C11.5417 10.0583 11.7167 10.0333 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14Z",
   fill: "currentColor"
-}, null, -1)), st = /* @__PURE__ */ k({
+}, null, -1)), ut = /* @__PURE__ */ k({
   __name: "ResponseIcon",
   props: {
     /** The accessibility text provided to screen readers */
@@ -1263,13 +1263,13 @@ const w = "24px", M = (e, r) => {
           xmlns: "http://www.w3.org/2000/svg"
         }, [
           e.title ? (p(), y("title", ot, R(e.title), 1)) : T("", !0),
-          lt
+          st
         ], 8, at))
       ]),
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), ut = /* @__PURE__ */ M(st, [["__scopeId", "data-v-6b672e11"]]), dt = (e) => (V("data-v-8eef2915"), e = e(), D(), e), ct = ["aria-hidden"], ft = {
+}), lt = /* @__PURE__ */ M(ut, [["__scopeId", "data-v-d0ffb1de"]]), dt = (e) => (V("data-v-7939cf04"), e = e(), D(), e), ct = ["aria-hidden"], ft = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, pt = /* @__PURE__ */ dt(() => /* @__PURE__ */ x("path", {
@@ -1368,7 +1368,7 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), gt = /* @__PURE__ */ M(vt, [["__scopeId", "data-v-8eef2915"]]), yt = (e) => (V("data-v-19ce5507"), e = e(), D(), e), mt = ["aria-hidden"], ht = {
+}), gt = /* @__PURE__ */ M(vt, [["__scopeId", "data-v-7939cf04"]]), yt = (e) => (V("data-v-c6ab90e9"), e = e(), D(), e), mt = ["aria-hidden"], ht = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Ct = /* @__PURE__ */ yt(() => /* @__PURE__ */ x("path", {
@@ -1467,7 +1467,7 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), St = /* @__PURE__ */ M(bt, [["__scopeId", "data-v-19ce5507"]]), _t = (e) => (V("data-v-0b5f0394"), e = e(), D(), e), wt = ["aria-hidden"], Rt = {
+}), St = /* @__PURE__ */ M(bt, [["__scopeId", "data-v-c6ab90e9"]]), _t = (e) => (V("data-v-989e7f51"), e = e(), D(), e), wt = ["aria-hidden"], Rt = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Tt = /* @__PURE__ */ _t(() => /* @__PURE__ */ x("path", {
@@ -1566,7 +1566,7 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), Et = /* @__PURE__ */ M(Nt, [["__scopeId", "data-v-0b5f0394"]]), It = (e) => (V("data-v-9773d900"), e = e(), D(), e), xt = ["aria-hidden"], kt = {
+}), Et = /* @__PURE__ */ M(Nt, [["__scopeId", "data-v-989e7f51"]]), It = (e) => (V("data-v-5fc3c6c8"), e = e(), D(), e), xt = ["aria-hidden"], kt = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, qt = /* @__PURE__ */ It(() => /* @__PURE__ */ x("path", {
@@ -1665,7 +1665,7 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), Lt = /* @__PURE__ */ M(zt, [["__scopeId", "data-v-9773d900"]]), At = (e) => (V("data-v-976cebe6"), e = e(), D(), e), Vt = ["aria-hidden"], Dt = {
+}), Lt = /* @__PURE__ */ M(zt, [["__scopeId", "data-v-5fc3c6c8"]]), At = (e) => (V("data-v-9f0a015f"), e = e(), D(), e), Vt = ["aria-hidden"], Dt = {
   key: 0,
   "data-testid": "kui-icon-svg-title"
 }, Mt = /* @__PURE__ */ At(() => /* @__PURE__ */ x("path", {
@@ -1764,7 +1764,7 @@ const w = "24px", M = (e, r) => {
       _: 1
     }, 8, ["aria-hidden", "style"]));
   }
-}), He = /* @__PURE__ */ M(Ft, [["__scopeId", "data-v-976cebe6"]]), ye = 2, Ee = ye + 2, Ot = (e, r, t = !1) => {
+}), He = /* @__PURE__ */ M(Ft, [["__scopeId", "data-v-9f0a015f"]]), ye = 2, Ee = ye + 2, Ot = (e, r, t = !1) => {
   let a = !r || Number(e.toFixed(Ee)) === 0 ? 0 : Number(e.toFixed(Ee)) > 0 ? 1 : -1;
   return t && (a *= -1), a;
 }, Ht = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(ye)}%` : t, Bt = (e, r) => r === 0 ? 0 : e / r - 1, $t = (e, r = !1) => (r && (e *= -1), e > 0 ? St : e < 0 ? gt : Oe), Pt = "#ad000e", ve = "#6c7489", Ie = "#52596e", Kt = "#007d60", ee = "16px", Zt = "20px";
@@ -1775,10 +1775,10 @@ const Ut = { class: "metricscard" }, Gt = {
 }, jt = {
   key: 0,
   class: "metricscard-error"
-}, Yt = {
+}, Xt = {
   key: 2,
   class: "metricscard-trend"
-}, Xt = { "data-testid": "metric-trend-change" }, Qt = {
+}, Yt = { "data-testid": "metric-trend-change" }, Qt = {
   key: 0,
   class: "metricscard-trend-range"
 }, Wt = /* @__PURE__ */ k({
@@ -1857,7 +1857,7 @@ const Ut = { class: "metricscard" }, Gt = {
       [O.GENERIC_COUNT, Et],
       [O.TRAFFIC, Hr],
       [O.ERROR_RATE, Lt],
-      [O.LATENCY, ut]
+      [O.LATENCY, lt]
     ]), t = e, a = (d) => {
       const o = {
         red: `var(--kong-ui-metric-card-trend-negative, ${Pt})`,
@@ -1865,9 +1865,9 @@ const Ut = { class: "metricscard" }, Gt = {
         grey: `var(--kong-ui-metric-card-trend-neutral, ${Ie})`
       };
       return d > 0 ? o.green : d < 0 ? o.red : o.grey;
-    }, n = (d) => d > 0 ? "positive" : d < 0 ? "negative" : "neutral", i = [q.Medium, q.Large, q.LargeCompact].includes(t.cardSize), s = g(() => t.cardSize === q.LargeCompact), v = [q.Small, q.LargeCompact].includes(t.cardSize);
+    }, n = (d) => d > 0 ? "positive" : d < 0 ? "negative" : "neutral", i = [q.Medium, q.Large, q.LargeCompact].includes(t.cardSize), u = g(() => t.cardSize === q.LargeCompact), v = [q.Small, q.LargeCompact].includes(t.cardSize);
     return (d, o) => {
-      const l = ze("KTooltip");
+      const s = ze("KTooltip");
       return p(), y("div", Ut, [
         x("div", {
           class: G(["metricscard-title", e.cardSize])
@@ -1884,14 +1884,14 @@ const Ut = { class: "metricscard" }, Gt = {
             ]),
             _: 1
           })),
-          e.tooltip ? (p(), E(l, {
+          e.tooltip ? (p(), E(s, {
             key: 1,
             class: "metricscard-tooltip",
             placement: "right",
             text: e.tooltip
           }, {
             default: L(() => [
-              Y(_(it), {
+              X(_(it), {
                 color: _(ve),
                 size: _(ee)
               }, null, 8, ["color", "size"])
@@ -1899,14 +1899,14 @@ const Ut = { class: "metricscard" }, Gt = {
             _: 1
           }, 8, ["text"])) : T("", !0)
         ], 2),
-        e.description && _(i) && !s.value ? (p(), y("div", Gt, [
+        e.description && _(i) && !u.value ? (p(), y("div", Gt, [
           x("span", null, R(e.description), 1)
         ])) : T("", !0),
         x("div", {
-          class: G(["metricscard-valuetrend", { "is-compact": s.value }])
+          class: G(["metricscard-valuetrend", { "is-compact": u.value }])
         }, [
           e.hasError ? (p(), y("div", jt, [
-            Y(_(He), {
+            X(_(He), {
               color: _(ve),
               size: _(Zt)
             }, null, 8, ["color", "size"]),
@@ -1916,7 +1916,7 @@ const Ut = { class: "metricscard" }, Gt = {
             class: G(["metricscard-value", e.cardSize]),
             "data-testid": "metric-value"
           }, R(e.metricValue), 3)),
-          _(i) ? (p(), y("div", Yt, [
+          _(i) ? (p(), y("div", Xt, [
             x("div", {
               class: G(["metricscard-trend-change", n(e.changePolarity)]),
               "data-testid": "metric-trend-parent"
@@ -1930,7 +1930,7 @@ const Ut = { class: "metricscard" }, Gt = {
                 color: _(Ie),
                 size: _(ee)
               }, null, 8, ["color", "size"])),
-              x("div", Xt, R(e.metricChange), 1)
+              x("div", Yt, R(e.metricChange), 1)
             ], 2),
             e.trendRange && e.cardSize !== _(q).LargeCompact ? (p(), y("div", Qt, R(e.trendRange), 1)) : T("", !0)
           ])) : T("", !0)
@@ -1947,8 +1947,8 @@ const Ut = { class: "metricscard" }, Gt = {
 function ti(e, r) {
   const t = ze("KSkeletonBox");
   return p(), y("div", ri, [
-    Y(t, { width: "100" }),
-    Y(t, { width: "75" })
+    X(t, { width: "100" }),
+    X(t, { width: "75" })
   ]);
 }
 const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c40"]]), ni = {
@@ -1960,13 +1960,13 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
 }, oi = {
   key: 1,
   class: "error-display"
-}, li = {
+}, si = {
   key: 0,
   class: "error-display-message"
-}, si = {
+}, ui = {
   key: 2,
   class: "cards-wrapper"
-}, ui = /* @__PURE__ */ k({
+}, li = /* @__PURE__ */ k({
   __name: "MetricCardContainer",
   props: {
     fallbackDisplayText: {
@@ -2010,12 +2010,12 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
   },
   setup(e) {
     const r = e, t = g(() => r.cards.every((n) => (n == null ? void 0 : n.hasError) === !0)), a = (n) => {
-      const i = Bt(n.currentValue, n.previousValue) || 0, s = Ot(i, r.hasTrendAccess, n.increaseIsBad);
+      const i = Bt(n.currentValue, n.previousValue) || 0, u = Ot(i, r.hasTrendAccess, n.increaseIsBad);
       return {
         metricValue: n.formatValueFn ? n.formatValueFn(n.currentValue) : Ar(n.currentValue, { capital: !0, round: !0 }) || "0",
         metricChange: n.formatChangeFn ? n.formatChangeFn(i) : Ht(i, r.hasTrendAccess, r.fallbackDisplayText),
-        changePolarity: s,
-        trendIcon: $t(s, n.increaseIsBad),
+        changePolarity: u,
+        trendIcon: $t(u, n.increaseIsBad),
         cardSize: r.cardSize,
         hasContainerTitle: !!r.containerTitle
       };
@@ -2028,29 +2028,29 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
         r.containerDescription ? (p(), y("div", ai, R(r.containerDescription), 1)) : T("", !0)
       ])) : T("", !0),
       t.value ? (p(), y("div", oi, [
-        Y(_(He), { class: "error-display-icon" }),
-        e.errorMessage ? (p(), y("div", li, R(e.errorMessage), 1)) : T("", !0)
-      ])) : (p(), y("div", si, [
-        (p(!0), y(_e, null, Xe(e.cards, (s, v) => (p(), y(_e, null, [
+        X(_(He), { class: "error-display-icon" }),
+        e.errorMessage ? (p(), y("div", si, R(e.errorMessage), 1)) : T("", !0)
+      ])) : (p(), y("div", ui, [
+        (p(!0), y(_e, null, Ye(e.cards, (u, v) => (p(), y(_e, null, [
           e.loading ? (p(), E(ii, {
             key: `skeleton-${v}`,
             class: G(e.cardSize === _(q).Small ? "loading-tabs-small" : "loading-tabs-large")
-          }, null, 8, ["class"])) : (p(), E(Jt, Qe({ key: v }, a(s), {
+          }, null, 8, ["class"])) : (p(), E(Jt, Qe({ key: v }, a(u), {
             "card-size": e.cardSize,
-            "card-type": s.cardType,
-            description: s.description,
+            "card-type": u.cardType,
+            description: u.description,
             "error-message": e.errorMessage,
-            "has-error": s.hasError,
-            title: s.title,
-            "title-tag": s.titleTag,
-            tooltip: s.tooltip,
-            "trend-range": s.trendRange
+            "has-error": u.hasError,
+            title: u.title,
+            "title-tag": u.titleTag,
+            tooltip: u.tooltip,
+            "trend-range": u.trendRange
           }), null, 16, ["card-size", "card-type", "description", "error-message", "has-error", "title", "title-tag", "tooltip", "trend-range"]))
         ], 64))), 256))
       ]))
     ], 2));
   }
-}), di = /* @__PURE__ */ me(ui, [["__scopeId", "data-v-1bb4a6a4"]]), mi = /* @__PURE__ */ k({
+}), di = /* @__PURE__ */ me(li, [["__scopeId", "data-v-1bb4a6a4"]]), mi = /* @__PURE__ */ k({
   __name: "MetricsConsumer",
   props: {
     lookupKey: { default: void 0 },
@@ -2061,7 +2061,7 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
     const r = e, t = ke(Me);
     if (!t)
       throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");
-    const { traffic: a, latency: n } = t.data, { i18n: i } = K.useI18n(), s = K.useMetricCardBuilder({
+    const { traffic: a, latency: n } = t.data, { i18n: i } = K.useI18n(), u = K.useMetricCardBuilder({
       cardType: O.TRAFFIC,
       title: g(() => t.longCardTitles ? i.t("metricCard.long.traffic") : i.t("metricCard.short.traffic")),
       record: a.mapped,
@@ -2081,7 +2081,7 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
         increaseIsBad: !0,
         trendRange: a.trendRange.value
       };
-    }), o = (m) => `${m}ms`, l = K.useMetricCardBuilder({
+    }), o = (m) => `${m}ms`, s = K.useMetricCardBuilder({
       cardType: O.LATENCY,
       title: g(() => {
         const { longCardTitles: m, averageLatencies: b } = t, N = b.value ? "averageLatency" : "p99Latency";
@@ -2093,8 +2093,8 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
       increaseIsBad: !0,
       formatValueFn: o,
       trendRange: n.trendRange
-    }), u = g(() => r.cardToDisplay === "TRAFFIC" ? [s.value] : r.cardToDisplay === "ERROR_RATE" ? [d.value] : r.cardToDisplay === "LATENCY" ? [l.value] : [s.value, d.value, l.value]), c = g(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? a.isLoading.value : r.cardToDisplay === "LATENCY" ? n.isLoading.value : a.isLoading.value || n.isLoading.value), f = g(() => ({
-      cards: u.value,
+    }), l = g(() => r.cardToDisplay === "TRAFFIC" ? [u.value] : r.cardToDisplay === "ERROR_RATE" ? [d.value] : r.cardToDisplay === "LATENCY" ? [s.value] : [u.value, d.value, s.value]), c = g(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? a.isLoading.value : r.cardToDisplay === "LATENCY" ? n.isLoading.value : a.isLoading.value || n.isLoading.value), f = g(() => ({
+      cards: l.value,
       containerTitle: t.containerTitle.value,
       containerDescription: t.description.value,
       loading: c.value,
@@ -2105,14 +2105,14 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
       hideTitle: !0
     })), C = g(() => ({
       loading: f.value.loading,
-      trafficCard: s.value,
+      trafficCard: u.value,
       errorRateCard: d.value,
-      latencyCard: l.value,
+      latencyCard: s.value,
       errorRateFormatted: v(d.value.currentValue),
-      latencyFormatted: o(l.value.currentValue)
+      latencyFormatted: o(s.value.currentValue)
     }));
     return (m, b) => qe(m.$slots, "default", { cardValues: C.value }, () => [
-      Y(_(di), We(Je(f.value)), null, 16)
+      X(_(di), We(Je(f.value)), null, 16)
     ]);
   }
 }), re = (e) => new Date(e), hi = (e, r) => {
@@ -2123,30 +2123,30 @@ const ii = /* @__PURE__ */ me(ei, [["render", ti], ["__scopeId", "data-v-f7eb9c4
   });
 }, xe = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), ci = (e, r) => {
   var C, m;
-  const t = ie.get(ne.ONE_DAY), a = e.granularity === "trend" ? new rr(t) : new tr(t), n = a.endMs(), i = a.startMs(), s = a.granularityMs(), v = e.granularity === "trend" ? 2 : 1;
+  const t = ie.get(ne.ONE_DAY), a = e.granularity === "trend" ? new rr(t) : new tr(t), n = a.endMs(), i = a.startMs(), u = a.granularityMs(), v = e.granularity === "trend" ? 2 : 1;
   if ((e.dimensions ?? []).length > 2)
     throw new Error(`Explore only supports 0-2 dimensions; got: ${JSON.stringify(e.dimensions)}`);
-  const d = (e.dimensions ?? []).find((b) => b !== "time"), o = (r == null ? void 0 : r.dimensionNames) ?? [], l = Math.max(o.length, 1), u = e.metrics || [], c = [];
+  const d = (e.dimensions ?? []).find((b) => b !== "time"), o = (r == null ? void 0 : r.dimensionNames) ?? [], s = Math.max(o.length, 1), l = e.metrics || [], c = [];
   for (let b = 0; b < v; b++)
-    for (let N = 0; N < l; N++) {
+    for (let N = 0; N < s; N++) {
       const S = d ? { [d]: o[N] } : {};
       (C = e.dimensions) != null && C.includes("status_code_grouped") ? Q.forEach((h) => {
-        const H = u.reduce((I, $) => (I[$] = (v - b) * 1e3 + 100 * N + 1, I), { ...S, status_code_grouped: h });
+        const H = l.reduce((I, $) => (I[$] = (v - b) * 1e3 + 100 * N + 1, I), { ...S, status_code_grouped: h });
         c.push({
           version: "v1",
-          timestamp: b === 0 ? re(i).toISOString() : re(i + s).toISOString(),
+          timestamp: b === 0 ? re(i).toISOString() : re(i + u).toISOString(),
           event: H
         });
       }) : c.push({
         version: "v1",
-        timestamp: b === 0 ? re(i).toISOString() : re(i + s).toISOString(),
-        event: u.reduce((h, H) => (h[H] = (v - b) * 1e3 + 100 * N + 1, h), { ...S })
+        timestamp: b === 0 ? re(i).toISOString() : re(i + u).toISOString(),
+        event: l.reduce((h, H) => (h[H] = (v - b) * 1e3 + 100 * N + 1, h), { ...S })
       });
     }
   const f = {
     start_ms: i,
     end_ms: n,
-    granularity_ms: s,
+    granularity_ms: u,
     display: d ? {
       [d]: xe(o),
       ...(m = e.dimensions) != null && m.includes("status_code_grouped") ? { status_code_grouped: xe(Q) } : {}