@kong-ui-public/analytics-metric-provider 10.1.20-pr.2603.7ce4d8bd2.0 → 10.1.20-pr.2606.eb096907d.0

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

@@ -1,12 +1,12 @@
-import { ref as H, watchEffect as ke, computed as p, getCurrentInstance as Me, reactive as Fe, onMounted as xe, onUnmounted as qe, watch as Ue, isReadonly as Pe, toRefs as $e, defineComponent as Q, inject as Ce, toRef as X, provide as ze, renderSlot as Se, resolveComponent as Ie, createElementBlock as S, openBlock as E, normalizeClass as $, createElementVNode as x, createCommentVNode as N, createBlock as q, unref as C, resolveDynamicComponent as re, withCtx as me, createTextVNode as Ae, toDisplayString as O, createVNode as F, Fragment as ye, renderList as Ke, mergeProps as Be, normalizeProps as Xe, guardReactiveProps as Ge } from "vue";
-import { stripUnknownFilters as je, queryableExploreDimensions as He, DeltaQueryTime as Ye, UnaryQueryTime as Qe } from "@kong-ui-public/analytics-utilities";
-import { createI18n as We, i18nTComponent as Je } from "@kong-ui-public/i18n";
+import { ref as H, watchEffect as Fe, computed as g, getCurrentInstance as xe, reactive as qe, onMounted as Ue, onUnmounted as ze, watch as Ke, isReadonly as Pe, toRefs as $e, defineComponent as Q, inject as Se, toRef as X, provide as Be, renderSlot as Ie, resolveComponent as Ae, createElementBlock as S, openBlock as T, normalizeClass as K, createElementVNode as x, createCommentVNode as V, createBlock as q, unref as _, resolveDynamicComponent as re, withCtx as ye, createTextVNode as De, toDisplayString as w, createVNode as M, Fragment as he, renderList as Xe, mergeProps as Ge, normalizeProps as je, guardReactiveProps as He } from "vue";
+import { stripUnknownFilters as Ye, TimeframeKeys as se, queryableExploreDimensions as Qe, TimePeriods as be, DeltaQueryTime as We, UnaryQueryTime as Je } from "@kong-ui-public/analytics-utilities";
+import { createI18n as Ze, i18nTComponent as er } from "@kong-ui-public/i18n";
 import "axios";
-import { useAnalyticsConfigStore as Ze } from "@kong-ui-public/analytics-config-store";
-import { TrendUpIcon as er, TrendDownIcon as rr, IndeterminateSmallIcon as De, VitalsIcon as tr, CloudUploadIcon as nr, WarningOutlineIcon as ar, ResponseIcon as ir, InfoIcon as or, WarningIcon as we, EqualIcon as sr } from "@kong/icons";
-const ur = {
+import { useAnalyticsConfigStore as rr } from "@kong-ui-public/analytics-config-store";
+import { TrendUpIcon as tr, TrendDownIcon as nr, IndeterminateSmallIcon as we, VitalsIcon as ar, CloudUploadIcon as ir, WarningOutlineIcon as or, ResponseIcon as sr, InfoIcon as ur, WarningIcon as Oe, EqualIcon as lr } from "@kong/icons";
+const cr = {
   notAvailable: "N/A"
-}, lr = {
+}, dr = {
   small: {
     traffic: "Requests",
     errorRate: "Error rate",
@@ -25,7 +25,7 @@ const ur = {
     averageLatency: "Average latency",
     p99Latency: "P99 latency"
   }
-}, cr = {
+}, fr = {
   custom_days: "vs previous {numDays, plural, =1 {day} other {# days}}",
   custom_hours: "vs previous {numHours, plural, =1 {hour} other {# hours}}",
   custom_minutes: "vs previous {numMinutes, plural, =1 {minute} other {# minutes}}",
@@ -42,32 +42,32 @@ const ur = {
   previous_week: "vs previous time period",
   previous_month: "vs previous time period",
   previous_quarter: "vs previous quarter"
-}, dr = {
-  general: ur,
-  metricCard: lr,
-  trendRange: cr
+}, vr = {
+  general: cr,
+  metricCard: dr,
+  trendRange: fr
 };
-function fr() {
-  const e = We("en-us", dr);
+function mr() {
+  const e = Ze("en-us", vr);
   return {
     i18n: e,
-    i18nT: Je(e)
+    i18nT: er(e)
     // Translation component <i18n-t>
   };
 }
-const vr = 2, K = ["1XX", "2XX", "3XX", "4XX", "5XX"], he = ["4XX", "5XX"], ht = ["1XX", "2XX", "3XX"], mr = 30 * 1e3, yr = "analytics-query-provider";
-var be = /* @__PURE__ */ ((e) => (e.VALIDATING = "VALIDATING", e.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", e.PENDING = "PENDING", e.SUCCESS = "SUCCESS", e.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", e.ERROR = "ERROR", e.STALE_IF_ERROR = "STALE_IF_ERROR", e))(be || {});
-const hr = (e) => {
+const yr = 2, $ = ["1XX", "2XX", "3XX", "4XX", "5XX"], ge = ["4XX", "5XX"], pt = ["1XX", "2XX", "3XX"], hr = 30 * 1e3, gr = "analytics-query-provider";
+var Le = /* @__PURE__ */ ((e) => (e.VALIDATING = "VALIDATING", e.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", e.PENDING = "PENDING", e.SUCCESS = "SUCCESS", e.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", e.ERROR = "ERROR", e.STALE_IF_ERROR = "STALE_IF_ERROR", e))(Le || {});
+const pr = (e) => {
   var r, t, o, a, n;
   return e ? !!// TODO: revisit: currently only the first check ever matters?
   ((r = Object.keys(e)) != null && r.length || (t = e.data) != null && t.length || (a = (o = e.data) == null ? void 0 : o.data) != null && a.length || !((n = e.data) != null && n.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
 };
-function gr(e = H({}), r, t, o = hr) {
+function Rr(e = H({}), r, t, o = pr) {
   const a = H(
     "PENDING"
     /* PENDING */
   );
-  return ke(() => {
+  return Fe(() => {
     const n = o(e.value);
     if (e.value && n && t.value) {
       a.value = "VALIDATING_HAS_DATA";
@@ -96,30 +96,30 @@ function gr(e = H({}), r, t, o = hr) {
     e.value === void 0 && r && (a.value = "ERROR");
   }), {
     state: a,
-    swrvState: be
+    swrvState: Le
   };
 }
-const V = Symbol("default"), te = "status_code_grouped", ge = (e, r, t, o, a) => {
+const L = Symbol("default"), te = "status_code_grouped", pe = (e, r, t, o, a) => {
   e[r][t] || (e[r][t] = {}), e[r][t][o] = a;
 };
-function pr(e, r) {
-  var d;
-  const t = ((d = e.meta.metric_names) == null ? void 0 : d[0]) || "", o = e.meta.start_ms, a = Object.keys(e.meta.display || {}), n = !!a.find((f) => f === te), l = a.find((f) => f !== te);
+function Tr(e, r) {
+  var c;
+  const t = ((c = e.meta.metric_names) == null ? void 0 : c[0]) || "", o = e.meta.start_ms, a = Object.keys(e.meta.display || {}), n = !!a.find((f) => f === te), l = a.find((f) => f !== te);
   return a.length > 2 || a.length > 1 && !n ? (console.error("Don't know how to work with provided dimensions:", a), {
-    previous: { [V]: { [V]: 0 } },
-    current: { [V]: { [V]: 0 } }
+    previous: { [L]: { [L]: 0 } },
+    current: { [L]: { [L]: 0 } }
   }) : e.data.reduce((f, i) => {
-    const s = i.event[t], u = l ? i.event[l] : V, c = n ? i.event[te] : V;
-    return new Date(i.timestamp).getTime() === o && r ? ge(f, "previous", u, c, s) : ge(f, "current", u, c, s), f;
+    const s = i.event[t], u = l ? i.event[l] : L, d = n ? i.event[te] : L;
+    return new Date(i.timestamp).getTime() === o && r ? pe(f, "previous", u, d, s) : pe(f, "current", u, d, s), f;
   }, {
     previous: {},
     current: {}
   });
 }
-function Rr(e) {
-  e.queryReady === void 0 && (e.queryReady = p(() => !0));
-  const { i18n: r } = M.useI18n(), t = p(() => {
-    var u, c;
+function Er(e) {
+  e.queryReady === void 0 && (e.queryReady = g(() => !0));
+  const { i18n: r } = N.useI18n(), t = g(() => {
+    var u, d;
     return {
       metrics: e.metrics.value,
       dimensions: [
@@ -127,16 +127,16 @@ function Rr(e) {
         ...e.withTrend.value ? ["time"] : []
       ],
       granularity: e.withTrend.value ? "trend" : void 0,
-      ...(c = e.filter.value) != null && c.length ? { filters: e.filter.value } : {},
-      time_range: e.timeRange.value
+      ...(d = e.filter.value) != null && d.length ? { filters: e.filter.value } : {},
+      time_range: e.timeframe.value.v4Query(e.tz.value)
     };
-  }), o = p(() => {
-    var c, v, g, R;
-    if (!((c = e.queryReady) != null && c.value))
+  }), o = g(() => {
+    var d, v, h, R;
+    if (!((d = e.queryReady) != null && d.value))
       return null;
     const u = (v = e.filter) != null && v.value ? JSON.stringify(e.filter.value) : "";
-    return `metric-fetcher-${JSON.stringify(e.timeRange.value)}-${(g = e.dimensions) == null ? void 0 : g.join("-")}-${(R = e.metrics.value) == null ? void 0 : R.join("-")}-${u}-${e.refreshCounter.value}`;
-  }), { response: a, error: n, isValidating: l } = M.useRequest(
+    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(h = e.dimensions) == null ? void 0 : h.join("-")}-${(R = e.metrics.value) == null ? void 0 : R.join("-")}-${u}-${e.refreshCounter.value}`;
+  }), { response: a, error: n, isValidating: l } = N.useRequest(
     () => o.value,
     () => e.queryFn({
       // TODO: Use a type guard to validate that if the datasource is basic,
@@ -147,35 +147,35 @@ function Rr(e) {
     {
       refreshInterval: e.refreshInterval,
       revalidateOnFocus: !1,
-      errorRetryCount: vr
+      errorRetryCount: yr
     }
-  ), { state: d, swrvState: f } = gr(a, n, l), i = p(() => {
-    var u, c, v, g, R, m, T;
-    return !((c = (u = a.value) == null ? void 0 : u.data) != null && c.length) || !((g = (v = a.value) == null ? void 0 : v.meta) != null && g.display) || !((T = (m = (R = a.value) == null ? void 0 : R.meta) == null ? void 0 : m.metric_names) != null && T.length) ? { current: {}, previous: {} } : pr(a.value, e.withTrend.value);
-  }), s = p(() => {
-    var u, c;
-    if (e.timeRange.value.type === "absolute") {
-      if (!((c = (u = a.value) == null ? void 0 : u.meta) != null && c.start_ms))
+  ), { state: c, swrvState: f } = Rr(a, n, l), i = g(() => {
+    var u, d, v, h, R, m, E;
+    return !((d = (u = a.value) == null ? void 0 : u.data) != null && d.length) || !((h = (v = a.value) == null ? void 0 : v.meta) != null && h.display) || !((E = (m = (R = a.value) == null ? void 0 : R.meta) == null ? void 0 : m.metric_names) != null && E.length) ? { current: {}, previous: {} } : Tr(a.value, e.withTrend.value);
+  }), s = g(() => {
+    var u, d;
+    if (e.timeframe.value.key === "custom") {
+      if (!((d = (u = a.value) == null ? void 0 : u.meta) != null && d.start_ms))
         return "";
-      const { start_ms: v, end_ms: g } = a.value.meta;
-      let R = (g - v) / (1e3 * 60 * 60 * 24), m = (g - v) / (1e3 * 60 * 60), T = (g - v) / (1e3 * 60);
-      return e.withTrend.value && (R /= 2, m /= 2, T /= 2), R >= 1 ? r.t("trendRange.custom_days", { numDays: Math.round(R) }) : m >= 1 ? r.t("trendRange.custom_hours", { numHours: Math.round(m) }) : T >= 1 ? r.t("trendRange.custom_minutes", { numMinutes: Math.round(T) }) : r.t("trendRange.custom_days", { numDays: Math.round(R) });
+      const { start_ms: v, end_ms: h } = a.value.meta;
+      let R = (h - v) / (1e3 * 60 * 60 * 24), m = (h - v) / (1e3 * 60 * 60), E = (h - v) / (1e3 * 60);
+      return e.withTrend.value && (R /= 2, m /= 2, E /= 2), R >= 1 ? r.t("trendRange.custom_days", { numDays: Math.round(R) }) : m >= 1 ? r.t("trendRange.custom_hours", { numHours: Math.round(m) }) : E >= 1 ? r.t("trendRange.custom_minutes", { numMinutes: Math.round(E) }) : r.t("trendRange.custom_days", { numDays: Math.round(R) });
     } else
-      return e.withTrend.value ? r.t(`trendRange.${e.timeRange.value.time_range}`) : "";
+      return e.withTrend.value ? r.t(`trendRange.${e.timeframe.value.key}`) : "";
   });
   return {
-    isLoading: p(() => f.PENDING === d.value),
-    hasError: p(() => f.ERROR === d.value),
+    isLoading: g(() => f.PENDING === c.value),
+    hasError: g(() => f.ERROR === c.value),
     raw: a,
     mapped: i,
     trendRange: s
   };
 }
-const z = (e, r, t = V, o) => (o ?? [V]).reduce((n, l) => {
-  const d = e[r][t];
-  return d ? n + (d[l] || 0) : n;
+const P = (e, r, t = L, o) => (o ?? [L]).reduce((n, l) => {
+  const c = e[r][t];
+  return c ? n + (c[l] || 0) : n;
 }, 0);
-function Tr(e) {
+function _r(e) {
   const {
     cardType: r,
     title: t,
@@ -183,14 +183,14 @@ function Tr(e) {
     record: a,
     hasError: n,
     increaseIsBad: l,
-    formatValueFn: d,
+    formatValueFn: c,
     trendRange: f
   } = e;
-  return p(() => {
+  return g(() => {
     let i = 0, s = 0;
     if (a != null && a.value)
       try {
-        i = z(a.value, "current", e.lookupKey, e.sumGroupedValues), s = z(a.value, "previous", e.lookupKey, e.sumGroupedValues);
+        i = P(a.value, "current", e.lookupKey, e.sumGroupedValues), s = P(a.value, "previous", e.lookupKey, e.sumGroupedValues);
       } catch (u) {
         console.error(
           "Metric card data doesn't have the expected structure:",
@@ -206,48 +206,48 @@ function Tr(e) {
       description: o,
       increaseIsBad: !!l,
       // Coerce undefined to false
-      formatValueFn: d,
+      formatValueFn: c,
       trendRange: f == null ? void 0 : f.value
     };
   });
 }
-var ne = /* @__PURE__ */ new WeakMap(), pe = 0;
-function Er(e) {
+var ne = /* @__PURE__ */ new WeakMap(), Re = 0;
+function Cr(e) {
   if (!e.length)
     return "";
   for (var r = "arg", t = 0; t < e.length; ++t) {
     var o = void 0;
-    e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? o = '"' + e[t] + '"' : o = String(e[t]) : ne.has(e[t]) ? o = ne.get(e[t]) : (o = pe, ne.set(e[t], pe++)), r += "@" + o;
+    e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? o = '"' + e[t] + '"' : o = String(e[t]) : ne.has(e[t]) ? o = ne.get(e[t]) : (o = Re, ne.set(e[t], Re++)), r += "@" + o;
   }
   return r;
 }
-function _r(e) {
+function Sr(e) {
   if (typeof e == "function")
     try {
       e = e();
     } catch {
       e = "";
     }
-  return Array.isArray(e) ? e = Er(e) : e = String(e || ""), e;
+  return Array.isArray(e) ? e = Cr(e) : e = String(e || ""), e;
 }
-var se = (
+var ue = (
   /** @class */
   function() {
     function e(r) {
       r === void 0 && (r = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = r;
     }
     return e.prototype.serializeKey = function(r) {
-      return _r(r);
+      return Sr(r);
     }, e.prototype.get = function(r) {
       var t = this.serializeKey(r);
       return this.items.get(t);
     }, e.prototype.set = function(r, t, o) {
-      var a = this.serializeKey(r), n = o || this.ttl, l = Date.now(), d = {
+      var a = this.serializeKey(r), n = o || this.ttl, l = Date.now(), c = {
         data: t,
         createdAt: l,
         expiresAt: n ? l + n : 1 / 0
       };
-      this.dispatchExpire(n, d, a), this.items.set(a, d);
+      this.dispatchExpire(n, c, a), this.items.set(a, c);
     }, e.prototype.dispatchExpire = function(r, t, o) {
       var a = this;
       r && setTimeout(function() {
@@ -259,21 +259,21 @@ var se = (
     }, e;
   }()
 );
-function Cr() {
+function Ir() {
   return typeof navigator.onLine < "u" ? navigator.onLine : !0;
 }
-function Sr() {
+function Ar() {
   return typeof document < "u" && typeof document.visibilityState < "u" ? document.visibilityState !== "hidden" : !0;
 }
-var Ir = function(e) {
+var Dr = function(e) {
   return fetch(e).then(function(r) {
     return r.json();
   });
 };
 const ae = {
-  isOnline: Cr,
-  isDocumentVisible: Sr,
-  fetcher: Ir
+  isOnline: Ir,
+  isDocumentVisible: Ar,
+  fetcher: Dr
 };
 var b = function() {
   return b = Object.assign || function(e) {
@@ -290,7 +290,7 @@ var b = function() {
     });
   }
   return new (t || (t = Promise))(function(n, l) {
-    function d(s) {
+    function c(s) {
       try {
         i(o.next(s));
       } catch (u) {
@@ -305,19 +305,19 @@ var b = function() {
       }
     }
     function i(s) {
-      s.done ? n(s.value) : a(s.value).then(d, f);
+      s.done ? n(s.value) : a(s.value).then(c, f);
     }
     i((o = o.apply(e, r || [])).next());
   });
-}, P = function(e, r) {
+}, z = function(e, r) {
   var t = { label: 0, sent: function() {
     if (n[0] & 1) throw n[1];
     return n[1];
   }, trys: [], ops: [] }, o, a, n, l;
-  return l = { next: d(0), throw: d(1), return: d(2) }, typeof Symbol == "function" && (l[Symbol.iterator] = function() {
+  return l = { next: c(0), throw: c(1), return: c(2) }, typeof Symbol == "function" && (l[Symbol.iterator] = function() {
     return this;
   }), l;
-  function d(i) {
+  function c(i) {
     return function(s) {
       return f([i, s]);
     };
@@ -368,14 +368,14 @@ var b = function() {
     if (i[0] & 5) throw i[1];
     return { value: i[0] ? i[1] : void 0, done: !0 };
   }
-}, Ar = function(e, r) {
+}, br = function(e, r) {
   var t = typeof Symbol == "function" && e[Symbol.iterator];
   if (!t) return e;
   var o = t.call(e), a, n = [], l;
   try {
     for (; (r === void 0 || r-- > 0) && !(a = o.next()).done; ) n.push(a.value);
-  } catch (d) {
-    l = { error: d };
+  } catch (c) {
+    l = { error: c };
   } finally {
     try {
       a && !a.done && (t = o.return) && t.call(o);
@@ -384,12 +384,12 @@ var b = function() {
     }
   }
   return n;
-}, Dr = function(e, r, t) {
+}, wr = function(e, r, t) {
   if (t || arguments.length === 2) for (var o = 0, a = r.length, n; o < a; o++)
     (n || !(o in r)) && (n || (n = Array.prototype.slice.call(r, 0, o)), n[o] = r[o]);
   return e.concat(n || Array.prototype.slice.call(r));
-}, Oe = new se(), Y = new se(), ie = new se(), Le = {
-  cache: Oe,
+}, Ve = new ue(), Y = new ue(), ie = new ue(), ke = {
+  cache: Ve,
   refreshInterval: 0,
   ttl: 0,
   serverTTL: 1e3,
@@ -403,7 +403,7 @@ var b = function() {
   isOnline: ae.isOnline,
   isDocumentVisible: ae.isDocumentVisible
 };
-function wr(e, r, t) {
+function Or(e, r, t) {
   var o = Y.get(e);
   if (o)
     o.data.push(r);
@@ -412,7 +412,7 @@ function wr(e, r, t) {
     Y.set(e, [r], t > 0 ? t + a : t);
   }
 }
-function br(e, r, t) {
+function Lr(e, r, t) {
   if (t.isDocumentVisible() && !(t.errorRetryCount !== void 0 && r > t.errorRetryCount)) {
     var o = Math.min(r || 0, t.errorRetryCount), a = o * t.errorRetryInterval;
     setTimeout(function() {
@@ -420,20 +420,20 @@ function br(e, r, t) {
     }, a);
   }
 }
-var Re = function(e, r, t, o) {
-  return t === void 0 && (t = Oe), o === void 0 && (o = Le.ttl), U(void 0, void 0, void 0, function() {
-    var a, n, l, d, f, i, s;
-    return P(this, function(u) {
+var Te = function(e, r, t, o) {
+  return t === void 0 && (t = Ve), o === void 0 && (o = ke.ttl), U(void 0, void 0, void 0, function() {
+    var a, n, l, c, f, i, s;
+    return z(this, function(u) {
       switch (u.label) {
         case 0:
-          if (!Lr(r)) return [3, 5];
+          if (!kr(r)) return [3, 5];
           u.label = 1;
         case 1:
           return u.trys.push([1, 3, , 4]), [4, r];
         case 2:
           return a = u.sent(), [3, 4];
         case 3:
-          return d = u.sent(), n = d, [3, 4];
+          return c = u.sent(), n = c, [3, 4];
         case 4:
           return [3, 6];
         case 5:
@@ -442,74 +442,74 @@ var Re = function(e, r, t, o) {
           if (l = !1, f = { data: a, error: n, isValidating: l }, typeof a < "u")
             try {
               t.set(e, f, o);
-            } catch (c) {
-              console.error("swrv(mutate): failed to set cache", c);
+            } catch (d) {
+              console.error("swrv(mutate): failed to set cache", d);
             }
-          return i = Y.get(e), i && i.data.length && (s = i.data.filter(function(c) {
-            return c.key === e;
-          }), s.forEach(function(c, v) {
-            typeof f.data < "u" && (c.data = f.data), c.error = f.error, c.isValidating = f.isValidating, c.isLoading = f.isValidating;
-            var g = v === s.length - 1;
-            g || delete s[v];
+          return i = Y.get(e), i && i.data.length && (s = i.data.filter(function(d) {
+            return d.key === e;
+          }), s.forEach(function(d, v) {
+            typeof f.data < "u" && (d.data = f.data), d.error = f.error, d.isValidating = f.isValidating, d.isLoading = f.isValidating;
+            var h = v === s.length - 1;
+            h || delete s[v];
           }), s = s.filter(Boolean)), [2, f];
       }
     });
   });
 };
-function Or() {
+function Vr() {
   for (var e = this, r = [], t = 0; t < arguments.length; t++)
     r[t] = arguments[t];
-  var o, a, n = b({}, Le), l = !1, d = !1, f = Me(), i = (f == null ? void 0 : f.proxy) || f;
+  var o, a, n = b({}, ke), l = !1, c = !1, f = xe(), i = (f == null ? void 0 : f.proxy) || f;
   if (!i)
     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 s = (i == null ? void 0 : i.$isServer) || !1;
   r.length >= 1 && (o = r[0]), r.length >= 2 && (a = r[1]), r.length > 2 && (n = b(b({}, n), r[2]));
-  var u = s ? n.serverTTL : n.ttl, c = typeof o == "function" ? o : H(o);
+  var u = s ? n.serverTTL : n.ttl, d = typeof o == "function" ? o : H(o);
   typeof a > "u" && (a = n.fetcher);
   var v = null;
-  v || (v = Fe({
+  v || (v = qe({
     data: void 0,
     error: void 0,
     isValidating: !0,
     isLoading: !0,
     key: null
   }));
-  var g = function(y, h) {
+  var h = function(p, y) {
     return U(e, void 0, void 0, function() {
-      var A, _, I, w, W, ce, J, de = this;
-      return P(this, function(Z) {
+      var I, C, A, F, W, de, J, fe = this;
+      return z(this, function(Z) {
         switch (Z.label) {
           case 0:
-            return A = v.data === void 0, _ = c.value, _ ? (I = n.cache.get(_), w = I && I.data, v.isValidating = !0, v.isLoading = !w, w && (v.data = w.data, v.error = w.error), W = y || a, !W || !n.isDocumentVisible() && !A || (h == null ? void 0 : h.forceRevalidate) !== void 0 && !(h != null && h.forceRevalidate) ? (v.isValidating = !1, v.isLoading = !1, [
+            return I = v.data === void 0, C = d.value, C ? (A = n.cache.get(C), F = A && A.data, v.isValidating = !0, v.isLoading = !F, F && (v.data = F.data, v.error = F.error), W = p || a, !W || !n.isDocumentVisible() && !I || (y == null ? void 0 : y.forceRevalidate) !== void 0 && !(y != null && y.forceRevalidate) ? (v.isValidating = !1, v.isLoading = !1, [
               2
               /*return*/
-            ]) : I && (ce = !!(Date.now() - I.createdAt >= n.dedupingInterval || h != null && h.forceRevalidate), !ce) ? (v.isValidating = !1, v.isLoading = !1, [
+            ]) : A && (de = !!(Date.now() - A.createdAt >= n.dedupingInterval || y != null && y.forceRevalidate), !de) ? (v.isValidating = !1, v.isLoading = !1, [
               2
               /*return*/
             ]) : (J = function() {
-              return U(de, void 0, void 0, function() {
-                var k, fe, ee, ve;
-                return P(this, function(B) {
+              return U(fe, void 0, void 0, function() {
+                var k, ve, ee, me;
+                return z(this, function(B) {
                   switch (B.label) {
                     case 0:
-                      return k = ie.get(_), k ? [3, 2] : (fe = Array.isArray(_) ? _ : [_], ee = W.apply(void 0, Dr([], Ar(fe), !1)), ie.set(_, ee, n.dedupingInterval), [4, Re(_, ee, n.cache, u)]);
+                      return k = ie.get(C), k ? [3, 2] : (ve = Array.isArray(C) ? C : [C], ee = W.apply(void 0, wr([], br(ve), !1)), ie.set(C, ee, n.dedupingInterval), [4, Te(C, ee, n.cache, u)]);
                     case 1:
                       return B.sent(), [3, 4];
                     case 2:
-                      return [4, Re(_, k.data, n.cache, u)];
+                      return [4, Te(C, k.data, n.cache, u)];
                     case 3:
                       B.sent(), B.label = 4;
                     case 4:
-                      return v.isValidating = !1, v.isLoading = !1, ie.delete(_), v.error !== void 0 && (ve = !l && n.shouldRetryOnError && (h ? h.shouldRetryOnError : !0), ve && br(g, h ? h.errorRetryCount : 1, n)), [
+                      return v.isValidating = !1, v.isLoading = !1, ie.delete(C), v.error !== void 0 && (me = !l && n.shouldRetryOnError && (y ? y.shouldRetryOnError : !0), me && Lr(h, y ? y.errorRetryCount : 1, n)), [
                         2
                         /*return*/
                       ];
                   }
                 });
               });
-            }, w && n.revalidateDebounce ? (setTimeout(function() {
-              return U(de, void 0, void 0, function() {
-                return P(this, function(k) {
+            }, F && n.revalidateDebounce ? (setTimeout(function() {
+              return U(fe, void 0, void 0, function() {
+                return z(this, function(k) {
                   switch (k.label) {
                     case 0:
                       return l ? [3, 2] : [4, J()];
@@ -541,24 +541,24 @@ function Or() {
     });
   }, R = function() {
     return U(e, void 0, void 0, function() {
-      return P(this, function(y) {
-        return [2, g(null, { shouldRetryOnError: !1 })];
+      return z(this, function(p) {
+        return [2, h(null, { shouldRetryOnError: !1 })];
       });
     });
   }, m = null;
-  xe(function() {
-    var y = function() {
+  Ue(function() {
+    var p = function() {
       return U(e, void 0, void 0, function() {
-        return P(this, function(h) {
-          switch (h.label) {
+        return z(this, function(y) {
+          switch (y.label) {
             case 0:
-              return !v.error && n.isOnline() ? [4, g()] : [3, 2];
+              return !v.error && n.isOnline() ? [4, h()] : [3, 2];
             case 1:
-              return h.sent(), [3, 3];
+              return y.sent(), [3, 3];
             case 2:
-              m && clearTimeout(m), h.label = 3;
+              m && clearTimeout(m), y.label = 3;
             case 3:
-              return n.refreshInterval && !l && (m = setTimeout(y, n.refreshInterval)), [
+              return n.refreshInterval && !l && (m = setTimeout(p, n.refreshInterval)), [
                 2
                 /*return*/
               ];
@@ -566,79 +566,80 @@ function Or() {
         });
       });
     };
-    n.refreshInterval && (m = setTimeout(y, n.refreshInterval)), n.revalidateOnFocus && (document.addEventListener("visibilitychange", R, !1), window.addEventListener("focus", R, !1));
-  }), qe(function() {
+    n.refreshInterval && (m = setTimeout(p, n.refreshInterval)), n.revalidateOnFocus && (document.addEventListener("visibilitychange", R, !1), window.addEventListener("focus", R, !1));
+  }), ze(function() {
     l = !0, m && clearTimeout(m), n.revalidateOnFocus && (document.removeEventListener("visibilitychange", R, !1), window.removeEventListener("focus", R, !1));
-    var y = Y.get(c.value);
-    y && (y.data = y.data.filter(function(h) {
-      return h !== v;
+    var p = Y.get(d.value);
+    p && (p.data = p.data.filter(function(y) {
+      return y !== v;
     }));
   });
   try {
-    Ue(c, function(y) {
-      Pe(c) || (c.value = y), v.key = y, v.isValidating = !!y, wr(c.value, v, u), !s && !d && c.value && g(), d = !1;
+    Ke(d, function(p) {
+      Pe(d) || (d.value = p), v.key = p, v.isValidating = !!p, Or(d.value, v, u), !s && !c && d.value && h(), c = !1;
     }, {
       immediate: !0
     });
   } catch {
   }
-  var T = b(b({}, $e(v)), { mutate: function(y, h) {
-    return g(y, b(b({}, h), { forceRevalidate: !0 }));
+  var E = b(b({}, $e(v)), { mutate: function(p, y) {
+    return h(p, b(b({}, y), { forceRevalidate: !0 }));
   } });
-  return T;
+  return E;
 }
-function Lr(e) {
+function kr(e) {
   return e !== null && typeof e == "object" && typeof e.then == "function";
 }
-function Vr(e, r, t) {
+function Nr(e, r, t) {
   const {
     data: o,
     error: a,
     isValidating: n,
     mutate: l
-  } = Or(e, r, {
+  } = Vr(e, r, {
     revalidateDebounce: 500,
     revalidateOnFocus: !1,
     dedupingInterval: 100,
     ...t
   });
   return {
-    data: p(() => o.value),
+    data: g(() => o.value),
     response: o,
     error: a,
     isValidating: n,
     revalidate: l
   };
 }
-const M = {
-  useI18n: fr,
-  useMetricCardBuilder: Tr,
-  useMetricFetcher: Rr,
-  useRequest: Vr
-}, Ve = Symbol("METRICS_PROVIDER_KEY"), Nr = (e) => {
+const N = {
+  useI18n: mr,
+  useMetricCardBuilder: _r,
+  useMetricFetcher: Er,
+  useRequest: Nr
+}, Ne = Symbol("METRICS_PROVIDER_KEY"), Mr = (e) => {
   const {
     datasource: r,
     dimension: t,
     dimensionFilterValue: o,
     additionalFilter: a,
     queryReady: n,
-    timeRange: l,
-    hasTrendAccess: d,
-    refreshInterval: f,
-    abortController: i,
-    queryFn: s,
-    averageLatencies: u
+    timeframe: l,
+    tz: c,
+    hasTrendAccess: f,
+    refreshInterval: i,
+    abortController: s,
+    queryFn: u,
+    averageLatencies: d
   } = e;
   if (o && !t)
     throw new Error("Must provide a dimension if filtering by a value");
-  const c = !!(t && o), v = !!(t && !o), g = p(() => {
-    const h = [];
-    return c && h.push({
+  const v = !!(t && o), h = !!(t && !o), R = g(() => {
+    const I = [];
+    return v && I.push({
       field: t,
       operator: "in",
       value: [o]
-    }), a.value && h.push(...je(r.value, a.value)), h;
-  }), R = {
+    }), a.value && I.push(...Ye(r.value, a.value)), I;
+  }), m = {
     datasource: r,
     metrics: H([
       "request_count"
@@ -646,51 +647,54 @@ const M = {
     // Traffic and error rate cards should only try to query for the dimension if it's going to be used.
     // It isn't used for single entity queries.
     dimensions: [
-      ...t && !c ? [t] : [],
+      ...t && !v ? [t] : [],
       "status_code_grouped"
     ],
-    filter: g,
+    filter: R,
     queryReady: n,
-    timeRange: l,
+    timeframe: l,
+    tz: c,
     // Traffic and error rate cards can't query trend if multiple entities are expected.
-    withTrend: p(() => d.value && !v),
-    refreshInterval: f,
-    queryFn: s,
-    abortController: i,
+    withTrend: g(() => f.value && !h),
+    refreshInterval: i,
+    queryFn: u,
+    abortController: s,
     refreshCounter: e.refreshCounter
-  }, m = {
+  }, E = {
     datasource: r,
-    metrics: p(() => [
-      u.value ? "response_latency_average" : "response_latency_p99"
+    metrics: g(() => [
+      d.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.
-    ...t && !c ? { dimensions: [t] } : {},
-    filter: g,
+    ...t && !v ? { dimensions: [t] } : {},
+    filter: R,
     queryReady: n,
-    timeRange: l,
+    timeframe: l,
+    tz: c,
     // Don't query latency trends in the multi-entity case: it's possible, but wasteful.
-    withTrend: p(() => d.value && !v),
-    refreshInterval: f,
-    queryFn: s,
-    abortController: i,
+    withTrend: g(() => f.value && !h),
+    refreshInterval: i,
+    queryFn: u,
+    abortController: s,
     refreshCounter: e.refreshCounter
-  }, T = M.useMetricFetcher(R), y = M.useMetricFetcher(m);
+  }, p = N.useMetricFetcher(m), y = N.useMetricFetcher(E);
   return {
-    trafficData: T,
+    trafficData: p,
     latencyData: y
   };
-}, gt = /* @__PURE__ */ Q({
+}, Rt = /* @__PURE__ */ Q({
   __name: "MetricsProvider",
   props: {
     datasource: { default: void 0 },
-    maxTimeRange: { default: "30d" },
-    overrideTimeRange: { default: void 0 },
+    maxTimeframe: { default: se.THIRTY_DAY },
+    overrideTimeframe: { default: void 0 },
+    tz: { default: void 0 },
     dimension: { default: void 0 },
     filterValue: { default: void 0 },
     additionalFilter: { default: void 0 },
     queryReady: { type: Boolean, default: !0 },
-    refreshInterval: { default: mr },
+    refreshInterval: { default: hr },
     longCardTitles: { type: Boolean, default: !1 },
     containerTitle: { default: void 0 },
     description: { default: void 0 },
@@ -700,106 +704,100 @@ const M = {
   },
   setup(e) {
     const r = e;
-    if (r.dimension && He.findIndex((c) => c === r.dimension) === -1)
+    if (r.dimension && Qe.findIndex((v) => v === r.dimension) === -1)
       throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${r.dimension}`);
-    const t = Ce(yr);
+    const t = Se(gr);
     let o;
     t ? o = t.queryFn : (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"), o = () => Promise.reject(new Error("Query bridge required")));
-    const a = Ze(), n = p(() => !0), l = p(() => !a.loading && r.queryReady), d = p(() => r.datasource ? r.datasource : "basic"), f = p(() => {
-      const c = r.overrideTimeRange;
-      return c && !c.tz && (c.tz = new Intl.DateTimeFormat().resolvedOptions().timeZone), c || {
-        type: "relative",
-        time_range: "7d",
-        tz: new Intl.DateTimeFormat().resolvedOptions().timeZone
-      };
-    }), i = p(() => !r.percentileLatency), {
-      trafficData: s,
-      latencyData: u
-    } = Nr({
-      datasource: d,
+    const a = rr(), n = g(() => !0), l = g(() => !a.loading && r.queryReady), c = g(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), f = g(() => r.datasource ? r.datasource : "basic"), i = g(() => r.overrideTimeframe || be.get(se.SEVEN_DAY)), s = g(() => !r.percentileLatency), {
+      trafficData: u,
+      latencyData: d
+    } = Mr({
+      datasource: f,
       dimension: r.dimension,
       dimensionFilterValue: r.filterValue,
       additionalFilter: X(r, "additionalFilter"),
       queryReady: l,
-      timeRange: f,
+      timeframe: i,
+      tz: c,
       hasTrendAccess: n,
       refreshInterval: r.refreshInterval,
       queryFn: o,
-      averageLatencies: i,
+      averageLatencies: s,
       abortController: r.abortController,
       refreshCounter: X(r, "refreshCounter")
     });
-    return ze(Ve, {
+    return Be(Ne, {
       data: {
-        traffic: s,
-        latency: u
+        traffic: u,
+        latency: d
       },
       description: X(() => r.description),
       containerTitle: X(() => r.containerTitle),
       hasTrendAccess: n,
       longCardTitles: r.longCardTitles,
-      averageLatencies: i
-    }), (c, v) => Se(c.$slots, "default", {
+      averageLatencies: s
+    }), (v, h) => Ie(v.$slots, "default", {
       hasTrendAccess: n.value,
-      timeRange: f.value
+      timeframe: i.value
     });
   }
 });
-function kr(e) {
+function Fr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Ne = { exports: {} };
+var Me = { exports: {} };
 (function(e) {
   (function() {
     function r(i, s) {
       if (s.separator === !1 || i < 1e3)
         return i.toString();
-      var u = typeof s.separator == "string" ? s.separator : ",", c = [], v = Math.round(i).toString().split("");
-      return v.reverse().forEach(function(g, R) {
-        R && R % 3 === 0 && c.push(u), c.push(g);
-      }), c.reverse().join("");
+      var u = typeof s.separator == "string" ? s.separator : ",", d = [], v = Math.round(i).toString().split("");
+      return v.reverse().forEach(function(h, R) {
+        R && R % 3 === 0 && d.push(u), d.push(h);
+      }), d.reverse().join("");
     }
     function t(i, s, u) {
-      var c = i / s, v = u.round ? "round" : "floor";
-      return u.decimal === !1 ? (i = Math[v](c), i.toString()) : (u.precision ? i = c : i = c < 10 ? Math[v](c * 10) / 10 : Math[v](c), i = i.toString(), typeof u.decimal == "string" && (i = i.replace(".", u.decimal)), i);
+      var d = i / s, v = u.round ? "round" : "floor";
+      return u.decimal === !1 ? (i = Math[v](d), i.toString()) : (u.precision ? i = d : i = d < 10 ? Math[v](d * 10) / 10 : Math[v](d), i = i.toString(), typeof u.decimal == "string" && (i = i.replace(".", u.decimal)), i);
     }
-    var o = 1e3, a = 1e4, n = 1e6, l = 1e9, d = 1e12;
+    var o = 1e3, a = 1e4, n = 1e6, l = 1e9, c = 1e12;
     function f(i, s) {
       var u;
       s = s || {};
-      var c = i < 0;
-      c && (i = Math.abs(i)), s.precision && (i = parseFloat(i.toPrecision(s.precision)));
+      var d = i < 0;
+      d && (i = Math.abs(i)), s.precision && (i = parseFloat(i.toPrecision(s.precision)));
       var v = s.min10k ? a : o;
-      return i < v || s.precision && s.precision > Math.log10(i) ? u = r(t(i, 1, s), s) : i < n ? u = t(i, o, s) + "k" : i < l ? u = t(i, n, s) + "m" : i < d ? u = r(t(i, l, s), s) + "b" : u = r(t(i, d, s), s) + "t", c && (u = "-" + u), s.capital && (u = u.toUpperCase()), s.prefix && (u = s.prefix + u), s.suffix && (u = u + s.suffix), u;
+      return i < v || s.precision && s.precision > Math.log10(i) ? u = r(t(i, 1, s), s) : i < n ? u = t(i, o, s) + "k" : i < l ? u = t(i, n, s) + "m" : i < c ? u = r(t(i, l, s), s) + "b" : u = r(t(i, c, s), s) + "t", d && (u = "-" + u), s.capital && (u = u.toUpperCase()), s.prefix && (u = s.prefix + u), s.suffix && (u = u + s.suffix), u;
     }
     f.addCommas = r, e.exports = f;
   })();
-})(Ne);
-var Mr = Ne.exports;
-const Fr = /* @__PURE__ */ kr(Mr);
-var L = /* @__PURE__ */ ((e) => (e.GENERIC_COUNT = "GenericCount", e.TRAFFIC = "Traffic", e.ERROR_RATE = "ErrorRate", e.LATENCY = "Latency", e))(L || {}), D = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.ExtraLarge = "xl", e))(D || {});
-const ue = 2, Te = ue + 2, xr = (e, r, t = !1) => {
-  let o = !r || Number(e.toFixed(Te)) === 0 ? 0 : Number(e.toFixed(Te)) > 0 ? 1 : -1;
+})(Me);
+var xr = Me.exports;
+const qr = /* @__PURE__ */ Fr(xr);
+var O = /* @__PURE__ */ ((e) => (e.GENERIC_COUNT = "GenericCount", e.TRAFFIC = "Traffic", e.ERROR_RATE = "ErrorRate", e.LATENCY = "Latency", e))(O || {}), D = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.ExtraLarge = "xl", e))(D || {});
+const le = 2, Ee = le + 2, Ur = (e, r, t = !1) => {
+  let o = !r || Number(e.toFixed(Ee)) === 0 ? 0 : Number(e.toFixed(Ee)) > 0 ? 1 : -1;
   return t && (o *= -1), o;
-}, qr = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(ue)}%` : t, Ur = (e, r) => r === 0 ? 0 : e / r - 1, Pr = (e, r = !1) => (r && (e *= -1), e > 0 ? er : e < 0 ? rr : De), $r = "#ad000e", oe = "#6c7489", Ee = "#52596e", zr = "#007d60", G = "16px", Kr = "20px", Br = {
+}, zr = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(le)}%` : t, Kr = (e, r) => r === 0 ? 0 : e / r - 1, Pr = (e, r = !1) => (r && (e *= -1), e > 0 ? tr : e < 0 ? nr : we), $r = "#ad000e", oe = "#6c7489", _e = "#52596e", Br = "#007d60", G = "16px", Xr = "20px", Gr = {
   key: 0,
   class: "metricscard-description"
-}, Xr = { class: "metricscard-valuetrend" }, Gr = {
+}, jr = { class: "metricscard-valuetrend" }, Hr = {
   key: 0,
   class: "metricscard-error"
-}, jr = {
+}, Yr = {
   key: 2,
   class: "metricscard-trend"
-}, Hr = { "data-testid": "metric-trend-change" }, Yr = {
+}, Qr = { "data-testid": "metric-trend-change" }, Wr = {
   key: 0,
   class: "metricscard-trend-range"
-}, Qr = /* @__PURE__ */ Q({
+}, Jr = /* @__PURE__ */ Q({
   __name: "MetricsCard",
   props: {
     cardType: {
       type: String,
       required: !0,
-      default: L.GENERIC_COUNT
+      default: O.GENERIC_COUNT
     },
     title: {
       type: String,
@@ -835,7 +833,7 @@ const ue = 2, Te = ue + 2, xr = (e, r, t = !1) => {
     },
     trendIcon: {
       type: Object,
-      default: De
+      default: we
     },
     trendRange: {
       type: String,
@@ -866,119 +864,119 @@ const ue = 2, Te = ue + 2, xr = (e, r, t = !1) => {
   },
   setup(e) {
     const r = /* @__PURE__ */ new Map([
-      [L.GENERIC_COUNT, tr],
-      [L.TRAFFIC, nr],
-      [L.ERROR_RATE, ar],
-      [L.LATENCY, ir]
-    ]), t = e, o = (d) => {
+      [O.GENERIC_COUNT, ar],
+      [O.TRAFFIC, ir],
+      [O.ERROR_RATE, or],
+      [O.LATENCY, sr]
+    ]), t = e, o = (c) => {
       const f = {
         red: `var(--kui-color-text-danger-strong, ${$r})`,
-        green: `var(--kui-color-text-success, ${zr})`,
-        grey: `var(--kui-color-text-neutral-strong, ${Ee})`
+        green: `var(--kui-color-text-success, ${Br})`,
+        grey: `var(--kui-color-text-neutral-strong, ${_e})`
       };
-      return d > 0 ? f.green : d < 0 ? f.red : f.grey;
-    }, a = (d) => d > 0 ? "positive" : d < 0 ? "negative" : "neutral", n = [D.Medium, D.Large].includes(t.cardSize), l = [D.Small].includes(t.cardSize);
-    return (d, f) => {
-      const i = Ie("KTooltip");
-      return E(), S("div", {
-        class: $(["metricscard", e.cardSize])
+      return c > 0 ? f.green : c < 0 ? f.red : f.grey;
+    }, a = (c) => c > 0 ? "positive" : c < 0 ? "negative" : "neutral", n = [D.Medium, D.Large].includes(t.cardSize), l = [D.Small].includes(t.cardSize);
+    return (c, f) => {
+      const i = Ae("KTooltip");
+      return T(), S("div", {
+        class: K(["metricscard", e.cardSize])
       }, [
         x("div", {
-          class: $(["metricscard-title", e.cardSize])
+          class: K(["metricscard-title", e.cardSize])
         }, [
-          C(l) ? N("", !0) : (E(), q(re(C(r).get(e.cardType)), {
+          _(l) ? V("", !0) : (T(), q(re(_(r).get(e.cardType)), {
             key: 0,
             class: "metricscard-icon",
-            color: `var(--kui-color-text-neutral, ${C(oe)})`,
-            size: C(G)
+            color: `var(--kui-color-text-neutral, ${_(oe)})`,
+            size: _(G)
           }, null, 8, ["color", "size"])),
-          (E(), q(re(e.titleTag), null, {
-            default: me(() => [
-              Ae(O(e.title), 1)
+          (T(), q(re(e.titleTag), null, {
+            default: ye(() => [
+              De(w(e.title), 1)
             ]),
             _: 1
           })),
-          e.tooltip ? (E(), q(i, {
+          e.tooltip ? (T(), q(i, {
             key: 1,
             class: "metricscard-tooltip",
             placement: "right",
             text: e.tooltip
           }, {
-            default: me(() => [
-              F(C(or), {
-                color: `var(--kui-color-text-neutral, ${C(oe)})`,
-                size: C(G)
+            default: ye(() => [
+              M(_(ur), {
+                color: `var(--kui-color-text-neutral, ${_(oe)})`,
+                size: _(G)
               }, null, 8, ["color", "size"])
             ]),
             _: 1
-          }, 8, ["text"])) : N("", !0)
+          }, 8, ["text"])) : V("", !0)
         ], 2),
-        e.description && C(n) ? (E(), S("div", Br, [
-          x("span", null, O(e.description), 1)
-        ])) : N("", !0),
-        x("div", Xr, [
-          e.hasError ? (E(), S("div", Gr, [
-            F(C(we), {
-              color: `var(--kui-color-text-neutral, ${C(oe)})`,
-              size: C(Kr)
+        e.description && _(n) ? (T(), S("div", Gr, [
+          x("span", null, w(e.description), 1)
+        ])) : V("", !0),
+        x("div", jr, [
+          e.hasError ? (T(), S("div", Hr, [
+            M(_(Oe), {
+              color: `var(--kui-color-text-neutral, ${_(oe)})`,
+              size: _(Xr)
             }, null, 8, ["color", "size"]),
-            x("div", null, " " + O(e.errorMessage), 1)
-          ])) : (E(), S("div", {
+            x("div", null, " " + w(e.errorMessage), 1)
+          ])) : (T(), S("div", {
             key: 1,
-            class: $(["metricscard-value", e.cardSize]),
+            class: K(["metricscard-value", e.cardSize]),
             "data-testid": "metric-value"
-          }, O(e.metricValue), 3)),
-          C(n) ? (E(), S("div", jr, [
+          }, w(e.metricValue), 3)),
+          _(n) ? (T(), S("div", Yr, [
             x("div", {
-              class: $(["metricscard-trend-change", a(e.changePolarity)]),
+              class: K(["metricscard-trend-change", a(e.changePolarity)]),
               "data-testid": "metric-trend-parent"
             }, [
-              e.changePolarity !== 0 ? (E(), q(re(e.trendIcon), {
+              e.changePolarity !== 0 ? (T(), q(re(e.trendIcon), {
                 key: 0,
                 color: o(e.changePolarity),
-                size: C(G)
-              }, null, 8, ["color", "size"])) : (E(), q(C(sr), {
+                size: _(G)
+              }, null, 8, ["color", "size"])) : (T(), q(_(lr), {
                 key: 1,
-                color: `var(--kui-color-text-neutral-strong, ${C(Ee)})`,
-                size: C(G)
+                color: `var(--kui-color-text-neutral-strong, ${_(_e)})`,
+                size: _(G)
               }, null, 8, ["color", "size"])),
-              x("div", Hr, O(e.metricChange), 1)
+              x("div", Qr, w(e.metricChange), 1)
             ], 2),
-            e.trendRange ? (E(), S("div", Yr, O(e.trendRange), 1)) : N("", !0)
-          ])) : N("", !0)
+            e.trendRange ? (T(), S("div", Wr, w(e.trendRange), 1)) : V("", !0)
+          ])) : V("", !0)
         ])
       ], 2);
     };
   }
-}), le = (e, r) => {
+}), ce = (e, r) => {
   const t = e.__vccOpts || e;
   for (const [o, a] of r)
     t[o] = a;
   return t;
-}, Wr = /* @__PURE__ */ le(Qr, [["__scopeId", "data-v-b1513f6f"]]), Jr = {}, Zr = { class: "loading-tabs" };
-function et(e, r) {
-  const t = Ie("KSkeletonBox");
-  return E(), S("div", Zr, [
-    F(t, { width: "100" }),
-    F(t, { width: "75" })
+}, Zr = /* @__PURE__ */ ce(Jr, [["__scopeId", "data-v-b1513f6f"]]), et = {}, rt = { class: "loading-tabs" };
+function tt(e, r) {
+  const t = Ae("KSkeletonBox");
+  return T(), S("div", rt, [
+    M(t, { width: "100" }),
+    M(t, { width: "75" })
   ]);
 }
-const rt = /* @__PURE__ */ le(Jr, [["render", et], ["__scopeId", "data-v-9c7113d7"]]), tt = {
+const nt = /* @__PURE__ */ ce(et, [["render", tt], ["__scopeId", "data-v-9c7113d7"]]), at = {
   key: 0,
   class: "container-title"
-}, nt = {
+}, it = {
   key: 0,
   class: "container-description"
-}, at = {
+}, ot = {
   key: 1,
   class: "error-display"
-}, it = {
+}, st = {
   key: 0,
   class: "error-display-message"
-}, ot = {
+}, ut = {
   key: 2,
   class: "cards-wrapper"
-}, st = /* @__PURE__ */ Q({
+}, lt = /* @__PURE__ */ Q({
   __name: "MetricCardContainer",
   props: {
     fallbackDisplayText: {
@@ -1021,37 +1019,37 @@ const rt = /* @__PURE__ */ le(Jr, [["render", et], ["__scopeId", "data-v-9c7113d
     }
   },
   setup(e) {
-    const r = e, t = p(() => r.cards.every((a) => (a == null ? void 0 : a.hasError) === !0)), o = (a) => {
-      const n = Ur(a.currentValue, a.previousValue) || 0, l = xr(n, r.hasTrendAccess, a.increaseIsBad);
+    const r = e, t = g(() => r.cards.every((a) => (a == null ? void 0 : a.hasError) === !0)), o = (a) => {
+      const n = Kr(a.currentValue, a.previousValue) || 0, l = Ur(n, r.hasTrendAccess, a.increaseIsBad);
       return {
-        metricValue: a.formatValueFn ? a.formatValueFn(a.currentValue) : Fr(a.currentValue, { capital: !0, round: !0 }) || "0",
-        metricChange: a.formatChangeFn ? a.formatChangeFn(n) : qr(n, r.hasTrendAccess, r.fallbackDisplayText),
+        metricValue: a.formatValueFn ? a.formatValueFn(a.currentValue) : qr(a.currentValue, { capital: !0, round: !0 }) || "0",
+        metricChange: a.formatChangeFn ? a.formatChangeFn(n) : zr(n, r.hasTrendAccess, r.fallbackDisplayText),
         changePolarity: l,
         trendIcon: Pr(l, a.increaseIsBad),
         cardSize: r.cardSize,
         hasContainerTitle: !!r.containerTitle
       };
     };
-    return (a, n) => (E(), S("div", {
-      class: $(["kong-ui-public-metric-card-container", e.cardSize])
+    return (a, n) => (T(), S("div", {
+      class: K(["kong-ui-public-metric-card-container", e.cardSize])
     }, [
-      r.containerTitle || r.containerDescription ? (E(), S("div", tt, [
-        Ae(O(r.containerTitle) + " ", 1),
-        r.containerDescription ? (E(), S("div", nt, O(r.containerDescription), 1)) : N("", !0)
-      ])) : N("", !0),
-      t.value ? (E(), S("div", at, [
-        F(C(we), { class: "error-display-icon" }),
-        e.errorMessage ? (E(), S("div", it, O(e.errorMessage), 1)) : N("", !0)
-      ])) : (E(), S("div", ot, [
-        (E(!0), S(ye, null, Ke(e.cards, (l, d) => (E(), S(ye, null, [
-          e.loading ? (E(), S("div", {
-            key: `skeleton-${d}`,
+      r.containerTitle || r.containerDescription ? (T(), S("div", at, [
+        De(w(r.containerTitle) + " ", 1),
+        r.containerDescription ? (T(), S("div", it, w(r.containerDescription), 1)) : V("", !0)
+      ])) : V("", !0),
+      t.value ? (T(), S("div", ot, [
+        M(_(Oe), { class: "error-display-icon" }),
+        e.errorMessage ? (T(), S("div", st, w(e.errorMessage), 1)) : V("", !0)
+      ])) : (T(), S("div", ut, [
+        (T(!0), S(he, null, Xe(e.cards, (l, c) => (T(), S(he, null, [
+          e.loading ? (T(), S("div", {
+            key: `skeleton-${c}`,
             class: "loading-tab"
           }, [
-            F(rt, {
-              class: $(e.cardSize === C(D).Small ? "loading-tabs-small" : "loading-tabs-large")
+            M(nt, {
+              class: K(e.cardSize === _(D).Small ? "loading-tabs-small" : "loading-tabs-large")
             }, null, 8, ["class"])
-          ])) : (E(), q(Wr, Be({ key: d }, { ref_for: !0 }, o(l), {
+          ])) : (T(), q(Zr, Ge({ key: c }, { ref_for: !0 }, o(l), {
             "card-size": e.cardSize,
             "card-type": l.cardType,
             description: l.description,
@@ -1066,7 +1064,7 @@ const rt = /* @__PURE__ */ le(Jr, [["render", et], ["__scopeId", "data-v-9c7113d
       ]))
     ], 2));
   }
-}), ut = /* @__PURE__ */ le(st, [["__scopeId", "data-v-7080ba56"]]), pt = /* @__PURE__ */ Q({
+}), ct = /* @__PURE__ */ ce(lt, [["__scopeId", "data-v-7080ba56"]]), Tt = /* @__PURE__ */ Q({
   __name: "MetricsConsumer",
   props: {
     lookupKey: { default: void 0 },
@@ -1074,34 +1072,34 @@ const rt = /* @__PURE__ */ le(Jr, [["render", et], ["__scopeId", "data-v-9c7113d
     cardToDisplay: { default: void 0 }
   },
   setup(e) {
-    const r = e, t = Ce(Ve);
+    const r = e, t = Se(Ne);
     if (!t)
       throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");
-    const { traffic: o, latency: a } = t.data, { i18n: n } = M.useI18n(), l = p(() => t.containerTitle.value ? D.Medium : r.cardSize), d = M.useMetricCardBuilder({
-      cardType: L.TRAFFIC,
-      title: p(() => t.longCardTitles ? n.t("metricCard.long.traffic") : n.t("metricCard.short.traffic")),
+    const { traffic: o, latency: a } = t.data, { i18n: n } = N.useI18n(), l = g(() => t.containerTitle.value ? D.Medium : r.cardSize), c = N.useMetricCardBuilder({
+      cardType: O.TRAFFIC,
+      title: g(() => t.longCardTitles ? n.t("metricCard.long.traffic") : n.t("metricCard.short.traffic")),
       record: o.mapped,
       hasError: o.hasError,
       lookupKey: r.lookupKey,
-      sumGroupedValues: K,
+      sumGroupedValues: $,
       trendRange: o.trendRange
-    }), f = (m) => `${m.toFixed(ue)}%`, i = p(() => {
-      const m = o.mapped.value, T = z(m, "current", r.lookupKey, he), y = z(m, "current", r.lookupKey, K), h = T / y * 100 || 0, A = z(m, "previous", r.lookupKey, he), _ = z(m, "previous", r.lookupKey, K), I = A / _ * 100 || 0;
+    }), f = (m) => `${m.toFixed(le)}%`, i = g(() => {
+      const m = o.mapped.value, E = P(m, "current", r.lookupKey, ge), p = P(m, "current", r.lookupKey, $), y = E / p * 100 || 0, I = P(m, "previous", r.lookupKey, ge), C = P(m, "previous", r.lookupKey, $), A = I / C * 100 || 0;
       return {
-        cardType: L.ERROR_RATE,
+        cardType: O.ERROR_RATE,
         hasError: o.hasError.value,
-        currentValue: h,
-        previousValue: I,
+        currentValue: y,
+        previousValue: A,
         formatValueFn: f,
         title: t.longCardTitles ? n.t("metricCard.long.errorRate") : n.t("metricCard.short.errorRate"),
         increaseIsBad: !0,
         trendRange: o.trendRange.value
       };
-    }), s = (m) => `${m}ms`, u = M.useMetricCardBuilder({
-      cardType: L.LATENCY,
-      title: p(() => {
-        const { longCardTitles: m, averageLatencies: T } = t, y = T.value ? "averageLatency" : "p99Latency";
-        return m ? n.t(`metricCard.long.${y}`) : l.value === D.Small ? n.t(`metricCard.small.${y}`) : n.t(`metricCard.short.${y}`);
+    }), s = (m) => `${m}ms`, u = N.useMetricCardBuilder({
+      cardType: O.LATENCY,
+      title: g(() => {
+        const { longCardTitles: m, averageLatencies: E } = t, p = E.value ? "averageLatency" : "p99Latency";
+        return m ? n.t(`metricCard.long.${p}`) : l.value === D.Small ? n.t(`metricCard.small.${p}`) : n.t(`metricCard.short.${p}`);
       }),
       hasError: a.hasError,
       record: a.mapped,
@@ -1109,8 +1107,8 @@ const rt = /* @__PURE__ */ le(Jr, [["render", et], ["__scopeId", "data-v-9c7113d
       increaseIsBad: !0,
       formatValueFn: s,
       trendRange: a.trendRange
-    }), c = p(() => r.cardToDisplay === "TRAFFIC" ? [d.value] : r.cardToDisplay === "ERROR_RATE" ? [i.value] : r.cardToDisplay === "LATENCY" ? [u.value] : [d.value, i.value, u.value]), v = p(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? o.isLoading.value : r.cardToDisplay === "LATENCY" ? a.isLoading.value : o.isLoading.value || a.isLoading.value), g = p(() => ({
-      cards: c.value,
+    }), d = g(() => r.cardToDisplay === "TRAFFIC" ? [c.value] : r.cardToDisplay === "ERROR_RATE" ? [i.value] : r.cardToDisplay === "LATENCY" ? [u.value] : [c.value, i.value, u.value]), v = g(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? o.isLoading.value : r.cardToDisplay === "LATENCY" ? a.isLoading.value : o.isLoading.value || a.isLoading.value), h = g(() => ({
+      cards: d.value,
       containerTitle: t.containerTitle.value,
       containerDescription: t.description.value,
       loading: v.value,
@@ -1118,55 +1116,44 @@ const rt = /* @__PURE__ */ le(Jr, [["render", et], ["__scopeId", "data-v-9c7113d
       fallbackDisplayText: n.t("general.notAvailable"),
       cardSize: l.value,
       hideTitle: !0
-    })), R = p(() => ({
-      loading: g.value.loading,
-      trafficCard: d.value,
+    })), R = g(() => ({
+      loading: h.value.loading,
+      trafficCard: c.value,
       errorRateCard: i.value,
       latencyCard: u.value,
       errorRateFormatted: f(i.value.currentValue),
       latencyFormatted: s(u.value.currentValue)
     }));
-    return (m, T) => Se(m.$slots, "default", { cardValues: R.value }, () => [
-      F(ut, Xe(Ge(g.value)), null, 16)
+    return (m, E) => Ie(m.$slots, "default", { cardValues: R.value }, () => [
+      M(ct, je(He(h.value)), null, 16)
     ]);
   }
-}), j = (e) => new Date(e), Rt = (e, r) => {
+}), j = (e) => new Date(e), Et = (e, r) => {
   const t = e.body;
   e.reply({
     statusCode: 200,
-    body: lt(t, r)
+    body: dt(t, r)
   });
-}, _e = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), lt = (e, r) => {
-  var g, R, m;
-  const t = r != null && r.timeRange && {
-    start: r.timeRange.start,
-    end: r.timeRange.end
-  } || ((g = e.time_range) == null ? void 0 : g.type) === "absolute" ? {
-    // @ts-ignore - already asserted time range is absolute above
-    start: new Date(e.time_range.start),
-    // @ts-ignore - already asserted time range is absolute above
-    end: new Date(e.time_range.end)
-  } : {
-    start: new Date(Date.now() - 864e5),
-    end: /* @__PURE__ */ new Date()
-  }, o = e.granularity === "trend" ? new Ye(t, "secondly") : new Qe(t, "secondly"), a = o.endMs(), n = o.startMs(), l = o.granularityMs(), d = e.granularity === "trend" ? 2 : 1;
+}, Ce = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), dt = (e, r) => {
+  var h, R;
+  const t = (r == null ? void 0 : r.timeFrame) || be.get(se.ONE_DAY), o = e.granularity === "trend" ? new We(t) : new Je(t), a = o.endMs(), n = o.startMs(), l = o.granularityMs(), c = 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 f = (e.dimensions ?? []).find((T) => T !== "time"), i = (r == null ? void 0 : r.dimensionNames) ?? [], s = Math.max(i.length, 1), u = e.metrics || [], c = [];
-  for (let T = 0; T < d; T++)
-    for (let y = 0; y < s; y++) {
-      const h = f ? { [f]: i[y] } : {};
-      (R = e.dimensions) != null && R.includes("status_code_grouped") ? K.forEach((A) => {
-        const _ = u.reduce((I, w) => ((r == null ? void 0 : r.deterministic) ?? !0 ? I[w] = (d - T) * 1e3 + 100 * y + 1 : I[w] = Math.round(Math.random() * 1e3), I), { ...h, status_code_grouped: A });
-        c.push({
+  const f = (e.dimensions ?? []).find((m) => m !== "time"), i = (r == null ? void 0 : r.dimensionNames) ?? [], s = Math.max(i.length, 1), u = e.metrics || [], d = [];
+  for (let m = 0; m < c; m++)
+    for (let E = 0; E < s; E++) {
+      const p = f ? { [f]: i[E] } : {};
+      (h = e.dimensions) != null && h.includes("status_code_grouped") ? $.forEach((y) => {
+        const I = u.reduce((C, A) => ((r == null ? void 0 : r.deterministic) ?? !0 ? C[A] = (c - m) * 1e3 + 100 * E + 1 : C[A] = Math.round(Math.random() * 1e3), C), { ...p, status_code_grouped: y });
+        d.push({
           version: "v1",
-          timestamp: T === 0 ? j(n).toISOString() : j(n + l).toISOString(),
-          event: _
+          timestamp: m === 0 ? j(n).toISOString() : j(n + l).toISOString(),
+          event: I
         });
-      }) : c.push({
+      }) : d.push({
         version: "v1",
-        timestamp: T === 0 ? j(n).toISOString() : j(n + l).toISOString(),
-        event: u.reduce((A, _) => ((r == null ? void 0 : r.deterministic) ?? !0 ? A[_] = (d - T) * 1e3 + 100 * y + 1 : A[_] = Math.round(Math.random() * 1e3), A), { ...h })
+        timestamp: m === 0 ? j(n).toISOString() : j(n + l).toISOString(),
+        event: u.reduce((y, I) => ((r == null ? void 0 : r.deterministic) ?? !0 ? y[I] = (c - m) * 1e3 + 100 * E + 1 : y[I] = Math.round(Math.random() * 1e3), y), { ...p })
       });
     }
   const v = {
@@ -1176,28 +1163,28 @@ const rt = /* @__PURE__ */ le(Jr, [["render", et], ["__scopeId", "data-v-9c7113d
     end: new Date(a).toISOString(),
     granularity_ms: l,
     display: f ? {
-      [f]: _e(i),
-      ...(m = e.dimensions) != null && m.includes("status_code_grouped") ? { status_code_grouped: _e(K) } : {}
+      [f]: Ce(i),
+      ...(R = e.dimensions) != null && R.includes("status_code_grouped") ? { status_code_grouped: Ce($) } : {}
     } : {},
     metric_names: e.metrics,
     query_id: "test"
   };
   return {
-    data: c,
+    data: d,
     meta: v
   };
 };
 export {
-  K as ALL_STATUS_CODE_GROUPS,
-  mr as DEFAULT_REFRESH_INTERVAL,
-  yr as INJECT_QUERY_PROVIDER,
-  vr as MAX_ANALYTICS_REQUEST_RETRIES,
+  $ as ALL_STATUS_CODE_GROUPS,
+  hr as DEFAULT_REFRESH_INTERVAL,
+  gr as INJECT_QUERY_PROVIDER,
+  yr as MAX_ANALYTICS_REQUEST_RETRIES,
   D as MetricCardSize,
-  L as MetricCardType,
-  pt as MetricsConsumer,
-  gt as MetricsProvider,
-  he as STATUS_CODES_FAILED,
-  ht as STATUS_CODES_SUCCESS,
-  lt as mockExploreResponse,
-  Rt as mockExploreResponseFromCypress
+  O as MetricCardType,
+  Tt as MetricsConsumer,
+  Rt as MetricsProvider,
+  ge as STATUS_CODES_FAILED,
+  pt as STATUS_CODES_SUCCESS,
+  dt as mockExploreResponse,
+  Et as mockExploreResponseFromCypress
 };