@kong-ui-public/dashboard-renderer 0.33.8 → 0.34.0

package/dist/dashboard-renderer.es.js

@@ -1,25 +1,25 @@
-import { ref as x, watchEffect as oe, inject as K, defineComponent as I, onUnmounted as X, computed as v, watch as ie, resolveComponent as $, unref as l, openBlock as d, createBlock as g, withCtx as _, createTextVNode as M, toDisplayString as F, renderSlot as U, createCommentVNode as D, useCssVars as B, createElementVNode as L, createVNode as T, mergeProps as ee, createSlots as te, createElementBlock as E, normalizeProps as se, guardReactiveProps as ce, resolveDynamicComponent as le, onMounted as ue, Fragment as de, renderList as pe, normalizeClass as ye, normalizeStyle as j } from "vue";
-import { SimpleChart as he, AnalyticsChart as me, TopNTable as fe, CsvExportModal as ve } from "@kong-ui-public/analytics-chart";
-import ge from "swrv";
+import { ref as O, watchEffect as le, inject as B, defineComponent as k, onUnmounted as te, computed as g, watch as ue, resolveComponent as N, unref as l, openBlock as d, createBlock as _, withCtx as b, createTextVNode as U, toDisplayString as L, renderSlot as V, createCommentVNode as S, useCssVars as G, createElementVNode as K, createVNode as F, mergeProps as re, createSlots as ae, createElementBlock as R, normalizeProps as de, guardReactiveProps as pe, resolveDynamicComponent as ye, onMounted as he, Fragment as me, renderList as fe, normalizeClass as ve, normalizeStyle as Q } from "vue";
+import { stripUnknownFilters as ge, Timeframe as _e, TimePeriods as ne, TIMEFRAME_LOOKUP as qe, formatTime as J, msToGranularity as be } from "@kong-ui-public/analytics-utilities";
+import { SimpleChart as Ee, AnalyticsChart as Ce, TopNTable as Ie, CsvExportModal as Te } from "@kong-ui-public/analytics-chart";
+import Se from "swrv";
 import "axios";
-import { createI18n as _e, i18nTComponent as qe } from "@kong-ui-public/i18n";
-import { stripUnknownFilters as be, Timeframe as Ce, TimePeriods as Ee, msToGranularity as Ie } from "@kong-ui-public/analytics-utilities";
-import { MetricsProvider as Se, MetricsConsumer as Te } from "@kong-ui-public/analytics-metric-provider";
-import { EntityLink as Re } from "@kong-ui-public/entities-shared";
-import { EditIcon as ke, MoreIcon as Ae } from "@kong/icons";
-import { useAnalyticsConfigStore as De } from "@kong-ui-public/analytics-config-store";
-var re = /* @__PURE__ */ ((a) => (a.VALIDATING = "VALIDATING", a.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", a.PENDING = "PENDING", a.SUCCESS = "SUCCESS", a.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", a.ERROR = "ERROR", a.STALE_IF_ERROR = "STALE_IF_ERROR", a))(re || {});
-const xe = (a) => {
+import { createI18n as Re, i18nTComponent as ke } from "@kong-ui-public/i18n";
+import { MetricsProvider as Ae, MetricsConsumer as De } from "@kong-ui-public/analytics-metric-provider";
+import { EntityLink as xe } from "@kong-ui-public/entities-shared";
+import { EditIcon as we, MoreIcon as Oe } from "@kong/icons";
+import { useAnalyticsConfigStore as Fe } from "@kong-ui-public/analytics-config-store";
+var oe = /* @__PURE__ */ ((a) => (a.VALIDATING = "VALIDATING", a.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", a.PENDING = "PENDING", a.SUCCESS = "SUCCESS", a.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", a.ERROR = "ERROR", a.STALE_IF_ERROR = "STALE_IF_ERROR", a))(oe || {});
+const $e = (a) => {
   var t, e, r, s, o;
   return a ? !!// TODO: revisit: currently only the first check ever matters?
   ((t = Object.keys(a)) != null && t.length || (e = a.data) != null && e.length || (s = (r = a.data) == null ? void 0 : r.data) != null && s.length || !((o = a.data) != null && o.data) && typeof a.data == "object" && Object.keys(a == null ? void 0 : a.data).length) : !1;
 };
-function we(a = x({}), t, e, r = xe) {
-  const s = x(
+function Le(a = O({}), t, e, r = $e) {
+  const s = O(
     "PENDING"
     /* PENDING */
   );
-  return oe(() => {
+  return le(() => {
     const o = r(a.value);
     if (a.value && o && e.value) {
       s.value = "VALIDATING_HAS_DATA";
@@ -48,10 +48,10 @@ function we(a = x({}), t, e, r = xe) {
     a.value === void 0 && t && (s.value = "ERROR");
   }), {
     state: s,
-    swrvState: re
+    swrvState: oe
   };
 }
-const Oe = {
+const Ne = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-Hour Summary",
@@ -59,36 +59,36 @@ const Oe = {
     "30d": "Last 30-Day Summary"
   },
   edit: "Edit"
-}, Fe = {
+}, ze = {
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
-}, $e = {
+}, Ke = {
   defaultFilename: "Chart Export",
   exportAsCsv: "Export as CSV"
-}, Ne = "Explore", Le = {
-  renderer: Oe,
-  queryDataProvider: Fe,
-  csvExport: $e,
-  jumpToExplore: Ne
+}, Be = "Explore", Pe = {
+  renderer: Ne,
+  queryDataProvider: ze,
+  csvExport: Ke,
+  jumpToExplore: Be
 };
-function Ke() {
-  const a = _e("en-us", Le);
+function Me() {
+  const a = Re("en-us", Pe);
   return {
     i18n: a,
-    i18nT: qe(a)
+    i18nT: ke(a)
     // Translation component <i18n-t>
   };
 }
-const V = 170, z = "analytics-query-provider", Q = "{entity-id}", ze = "{cp-id}", Pe = "{timeframe}", Be = 30 * 1e3;
-function Ge() {
-  const a = K(z);
+const H = 170, P = "analytics-query-provider", Z = "{entity-id}", Ue = "{cp-id}", Ge = "{timeframe}", Ve = 30 * 1e3;
+function He() {
+  const a = B(P);
   return {
     evaluateFeatureFlag: (e, r) => a ? a.evaluateFeatureFlagFn(e, r) : r
   };
 }
-const w = {
-  useI18n: Ke,
-  useEvaluateFeatureFlag: Ge
-}, H = /* @__PURE__ */ I({
+const $ = {
+  useI18n: Me,
+  useEvaluateFeatureFlag: He
+}, j = /* @__PURE__ */ k({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -98,67 +98,73 @@ const w = {
   },
   emits: ["chart-data", "queryComplete"],
   setup(a, { emit: t }) {
-    const e = a, r = t, { i18n: s } = w.useI18n(), o = K(z), c = () => e.queryReady && o ? JSON.stringify([e.query, e.context, e.refreshCounter]) : null, i = new AbortController();
-    X(() => {
+    const e = a, r = t, { i18n: s } = $.useI18n(), o = B(P), c = () => e.queryReady && o ? JSON.stringify([e.query, e.context, e.refreshCounter]) : null, i = new AbortController();
+    te(() => {
       i.abort();
     });
-    const u = (p, f, q) => {
-      const b = [];
-      return f && b.push(...f), b.push(...be(p, q)), b;
-    }, { data: y, error: R, isValidating: k } = ge(c, async () => {
-      var p, f, q, b;
+    const u = (p, v, T) => {
+      const C = [];
+      return v && C.push(...v), C.push(...ge(p, T)), C;
+    }, { data: y, error: D, isValidating: x } = Se(c, async () => {
+      var p, v, T, C;
       try {
         let {
-          datasource: n,
-          ...O
+          datasource: f,
+          ...n
         } = e.query;
-        n || (n = "basic");
-        const P = u(n, e.query.filters, e.context.filters), G = {
-          datasource: n,
+        f || (f = "basic");
+        const A = u(f, e.query.filters, e.context.filters);
+        let q = e.query.time_range;
+        q ? q.tz || (q = {
+          ...q,
+          tz: e.context.tz
+        }) : q = {
+          ...e.context.timeSpec,
+          tz: e.context.tz
+        };
+        const M = {
+          datasource: f,
           query: {
-            ...O,
-            time_range: {
-              ...e.context.timeSpec,
-              tz: e.context.tz
-            },
-            filters: P
+            ...n,
+            time_range: q,
+            filters: A
           }
         };
-        return o == null ? void 0 : o.queryFn(G, i);
-      } catch (n) {
-        A.value = ((f = (p = n == null ? void 0 : n.response) == null ? void 0 : p.data) == null ? void 0 : f.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((b = (q = n == null ? void 0 : n.response) == null ? void 0 : q.data) == null ? void 0 : b.message) || (n == null ? void 0 : n.message);
+        return o == null ? void 0 : o.queryFn(M, i);
+      } catch (f) {
+        w.value = ((v = (p = f == null ? void 0 : f.response) == null ? void 0 : p.data) == null ? void 0 : v.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((C = (T = f == null ? void 0 : f.response) == null ? void 0 : T.data) == null ? void 0 : C.message) || (f == null ? void 0 : f.message);
       } finally {
         r("queryComplete");
       }
     }, {
       refreshInterval: e.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: m, swrvState: S } = we(y, R, k), A = x(null), h = v(() => m.value === S.ERROR || !!A.value), C = v(() => !e.queryReady || m.value === S.PENDING);
-    return ie(y, (p) => {
+    }), { state: m, swrvState: I } = Le(y, D, x), w = O(null), h = g(() => m.value === I.ERROR || !!w.value), E = g(() => !e.queryReady || m.value === I.PENDING);
+    return ue(y, (p) => {
       p && r("chart-data", p);
-    }), (p, f) => {
-      const q = $("KSkeleton"), b = $("KEmptyState");
-      return C.value || !l(y) && !h.value ? (d(), g(q, {
+    }), (p, v) => {
+      const T = N("KSkeleton"), C = N("KEmptyState");
+      return E.value || !l(y) && !h.value ? (d(), _(T, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : h.value ? (d(), g(b, {
+      })) : h.value ? (d(), _(C, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
-        default: _(() => [
-          M(F(A.value), 1)
+        default: b(() => [
+          U(L(w.value), 1)
         ]),
         _: 1
-      })) : l(y) ? U(p.$slots, "default", {
+      })) : l(y) ? V(p.$slots, "default", {
         key: 2,
         data: l(y)
-      }) : D("", !0);
+      }) : S("", !0);
     };
   }
-}), Me = { class: "analytics-chart" }, Ue = /* @__PURE__ */ I({
+}), je = { class: "analytics-chart" }, Qe = /* @__PURE__ */ k({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -169,19 +175,19 @@ const w = {
     refreshCounter: {}
   },
   setup(a) {
-    B((e) => ({
+    G((e) => ({
       c40c0e86: `${e.height}px`
     }));
     const t = a;
-    return (e, r) => (d(), g(H, {
+    return (e, r) => (d(), _(j, {
       context: e.context,
       query: e.query,
       "query-ready": e.queryReady,
       "refresh-counter": e.refreshCounter
     }, {
-      default: _(({ data: s }) => [
-        L("div", Me, [
-          T(l(he), {
+      default: b(({ data: s }) => [
+        K("div", je, [
+          F(l(Ee), {
             "chart-data": s,
             "chart-options": t.chartOptions,
             "synthetics-data-key": e.chartOptions.syntheticsDataKey
@@ -191,12 +197,12 @@ const w = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), N = (a, t) => {
+}), z = (a, t) => {
   const e = a.__vccOpts || a;
   for (const [r, s] of t)
     e[r] = s;
   return e;
-}, Ve = /* @__PURE__ */ N(Ue, [["__scopeId", "data-v-694cf637"]]), He = { class: "analytics-chart" }, je = /* @__PURE__ */ I({
+}, Je = /* @__PURE__ */ z(Qe, [["__scopeId", "data-v-694cf637"]]), Ze = { class: "analytics-chart" }, We = /* @__PURE__ */ k({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -209,39 +215,39 @@ const w = {
   },
   emits: ["edit-tile", "chart-data"],
   setup(a, { emit: t }) {
-    const e = a, r = t, s = K(z), { i18n: o } = w.useI18n(), { evaluateFeatureFlag: c } = w.useEvaluateFeatureFlag(), i = c("ma-3043-analytics-chart-kebab-menu", !1), u = v(() => ({
+    const e = a, r = t, s = B(P), { i18n: o } = $.useI18n(), { evaluateFeatureFlag: c } = $.useEvaluateFeatureFlag(), i = c("ma-3043-analytics-chart-kebab-menu", !1), u = g(() => ({
       type: e.chartOptions.type,
       stacked: e.chartOptions.stacked ?? !1,
       chartDatasetColors: e.chartOptions.chartDatasetColors,
       threshold: e.chartOptions.threshold
-    })), y = v(() => {
+    })), y = g(() => {
       if (s && s.exploreBaseUrl) {
         const m = {
           filters: [...e.context.filters, ...e.query.filters ?? []],
           metrics: e.query.metrics ?? [],
           dimensions: e.query.dimensions ?? [],
           time_range: e.query.time_range || e.context.timeSpec
-        }, S = ["advanced", "ai"].includes(e.query.datasource) ? e.query.datasource : "advanced";
-        return `${s.exploreBaseUrl()}?q=${JSON.stringify(m)}&d=${S}&c=${e.chartOptions.type}`;
+        }, I = ["advanced", "ai"].includes(e.query.datasource) ? e.query.datasource : "advanced";
+        return `${s.exploreBaseUrl()}?q=${JSON.stringify(m)}&d=${I}&c=${e.chartOptions.type}`;
       }
       return "";
-    }), R = () => {
+    }), D = () => {
       r("edit-tile");
-    }, k = (m) => {
+    }, x = (m) => {
       r("chart-data", m);
     };
-    return (m, S) => {
-      const A = $("KDropdownItem");
-      return d(), g(H, {
+    return (m, I) => {
+      const w = N("KDropdownItem");
+      return d(), _(j, {
         context: m.context,
         query: m.query,
         "query-ready": m.queryReady,
         "refresh-counter": m.refreshCounter,
-        onChartData: k
+        onChartData: x
       }, {
-        default: _(({ data: h }) => [
-          L("div", He, [
-            T(l(me), ee({
+        default: b(({ data: h }) => [
+          K("div", Ze, [
+            F(l(Ce), re({
               "allow-csv-export": m.chartOptions.allowCsvExport,
               "chart-data": h,
               "chart-options": u.value,
@@ -251,13 +257,13 @@ const w = {
               "show-menu": m.context.editable,
               "synthetics-data-key": m.chartOptions.syntheticsDataKey,
               "tooltip-title": ""
-            }, m.extraProps), te({ _: 2 }, [
+            }, m.extraProps), ae({ _: 2 }, [
               m.context.editable ? {
                 name: "menu-items",
-                fn: _(() => [
-                  T(A, { onClick: R }, {
-                    default: _(() => [
-                      M(F(l(o).t("renderer.edit")), 1)
+                fn: b(() => [
+                  F(w, { onClick: D }, {
+                    default: b(() => [
+                      U(L(l(o).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -271,7 +277,7 @@ const w = {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), ae = /* @__PURE__ */ N(je, [["__scopeId", "data-v-1bc587d3"]]), J = /* @__PURE__ */ I({
+}), ie = /* @__PURE__ */ z(We, [["__scopeId", "data-v-1bc587d3"]]), W = /* @__PURE__ */ k({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -282,7 +288,7 @@ const w = {
     refreshCounter: {}
   },
   setup(a) {
-    return (t, e) => (d(), g(ae, {
+    return (t, e) => (d(), _(ie, {
       "chart-options": t.chartOptions,
       context: t.context,
       "extra-props": { showAnnotations: !1 },
@@ -292,7 +298,7 @@ const w = {
       "refresh-counter": t.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Z = /* @__PURE__ */ I({
+}), Y = /* @__PURE__ */ k({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -303,7 +309,7 @@ const w = {
     refreshCounter: {}
   },
   setup(a) {
-    return (t, e) => (d(), g(ae, {
+    return (t, e) => (d(), _(ie, {
       "chart-options": t.chartOptions,
       context: t.context,
       height: t.height,
@@ -312,7 +318,7 @@ const w = {
       "refresh-counter": t.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Qe = { class: "metric-card-tile-wrapper" }, Je = /* @__PURE__ */ I({
+}), Ye = { class: "metric-card-tile-wrapper" }, Xe = /* @__PURE__ */ k({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -323,15 +329,15 @@ const w = {
     refreshCounter: {}
   },
   setup(a) {
-    B((c) => ({
+    G((c) => ({
       "926e3b48": l(r) ? "90%" : "100%",
       "7be2893e": l(r) ? "auto" : "100%",
       "0d55c162": l(r) ? "100%" : "none"
     }));
-    const t = a, { evaluateFeatureFlag: e } = w.useEvaluateFeatureFlag(), r = e("ma-3043-analytics-chart-kebab-menu", !1), s = v(() => {
+    const t = a, { evaluateFeatureFlag: e } = $.useEvaluateFeatureFlag(), r = e("ma-3043-analytics-chart-kebab-menu", !1), s = g(() => {
       const c = t.context.timeSpec;
       if (c.type === "absolute")
-        return new Ce({
+        return new _e({
           key: "custom",
           timeframeText: "custom",
           display: "custom",
@@ -343,11 +349,11 @@ const w = {
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const i = Ee.get(c.time_range);
+      const i = ne.get(c.time_range);
       if (!i)
         throw new Error("Unknown time range");
       return i;
-    }), o = v(() => {
+    }), o = g(() => {
       var i, u;
       const c = (i = t.query) == null ? void 0 : i.datasource;
       if (c && c !== "advanced" && c !== "basic")
@@ -367,16 +373,16 @@ const w = {
         refreshCounter: t.refreshCounter
       };
     });
-    return (c, i) => (d(), E("div", Qe, [
-      T(l(Se), se(ce(o.value)), {
-        default: _(() => [
-          T(l(Te))
+    return (c, i) => (d(), R("div", Ye, [
+      F(l(Ae), de(pe(o.value)), {
+        default: b(() => [
+          F(l(De))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), Ze = /* @__PURE__ */ N(Je, [["__scopeId", "data-v-0f571079"]]), W = "#6c7489", Y = "20px", ne = "20px", We = /* @__PURE__ */ I({
+}), et = /* @__PURE__ */ z(Xe, [["__scopeId", "data-v-0f571079"]]), X = "#6c7489", ee = "20px", se = "20px", tt = /* @__PURE__ */ k({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -387,33 +393,33 @@ const w = {
     refreshCounter: {}
   },
   setup(a) {
-    const t = a, { evaluateFeatureFlag: e } = w.useEvaluateFeatureFlag(), r = e("ma-3043-analytics-chart-kebab-menu", !1), s = (o) => {
+    const t = a, { evaluateFeatureFlag: e } = $.useEvaluateFeatureFlag(), r = e("ma-3043-analytics-chart-kebab-menu", !1), s = (o) => {
       var c;
       if ((c = t.chartOptions) != null && c.entityLink)
         if (o.id.includes(":")) {
           const [i, u] = o.id.split(":");
-          return t.chartOptions.entityLink.replace(ze, i).replace(Q, u);
+          return t.chartOptions.entityLink.replace(Ue, i).replace(Z, u);
         } else
-          return t.chartOptions.entityLink.replace(Q, o.id);
+          return t.chartOptions.entityLink.replace(Z, o.id);
       return "";
     };
-    return (o, c) => (d(), g(H, {
+    return (o, c) => (d(), _(j, {
       context: o.context,
       query: o.query,
       "query-ready": o.queryReady,
       "refresh-counter": o.refreshCounter
     }, {
-      default: _(({ data: i }) => [
-        T(l(fe), {
+      default: b(({ data: i }) => [
+        F(l(Ie), {
           data: i,
           description: !l(r) && o.chartOptions.description || "",
           "synthetics-data-key": o.chartOptions.syntheticsDataKey,
           title: !l(r) && o.chartOptions.chartTitle || ""
-        }, te({ _: 2 }, [
+        }, ae({ _: 2 }, [
           t.chartOptions.entityLink ? {
             name: "name",
-            fn: _(({ record: u }) => [
-              T(l(Re), {
+            fn: b(({ record: u }) => [
+              F(l(xe), {
                 "entity-link-data": {
                   id: u.id,
                   label: u.name,
@@ -429,47 +435,47 @@ const w = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), Ye = ["data-testid"], Xe = {
+}), rt = ["data-testid"], at = {
   key: 0,
   class: "tile-header"
-}, et = ["data-testid"], tt = ["data-testid"], rt = ["data-testid"], at = ["data-testid"], nt = ["data-testid"], ot = /* @__PURE__ */ I({
+}, nt = ["data-testid"], ot = ["data-testid"], it = ["data-testid"], st = ["data-testid"], ct = ["data-testid"], lt = /* @__PURE__ */ k({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
-    height: { default: V },
+    height: { default: H },
     queryReady: { type: Boolean },
     refreshCounter: {},
     tileId: {}
   },
   emits: ["edit-tile"],
   setup(a, { emit: t }) {
-    B((n) => ({
-      bc8541b6: `${n.height}px`
+    G((n) => ({
+      "4fd5b2d2": `${n.height}px`
     }));
-    const e = parseInt(ne, 10), r = a, s = t, o = K(z), { evaluateFeatureFlag: c } = w.useEvaluateFeatureFlag(), { i18n: i } = w.useI18n(), u = c("ma-3043-analytics-chart-kebab-menu", !1), y = x(), R = x(!1), k = v(() => {
+    const e = parseInt(se, 10), r = a, s = t, o = B(P), { evaluateFeatureFlag: c } = $.useEvaluateFeatureFlag(), { i18n: i } = $.useI18n(), u = c("ma-3043-analytics-chart-kebab-menu", !1), y = O(), D = O(!1), x = g(() => {
       if (o && o.exploreBaseUrl) {
         const n = {
           filters: [...r.context.filters, ...r.definition.query.filters ?? []],
           metrics: r.definition.query.metrics ?? [],
           dimensions: r.definition.query.dimensions ?? [],
           time_range: r.definition.query.time_range || r.context.timeSpec,
-          granularity: r.definition.query.granularity || C.value
-        }, O = ["advanced", "ai"].includes(r.definition.query.datasource) ? r.definition.query.datasource : "advanced";
-        return `${o.exploreBaseUrl()}?q=${JSON.stringify(n)}&d=${O}&c=${r.definition.chart.type}`;
+          granularity: r.definition.query.granularity || p.value
+        }, A = ["advanced", "ai"].includes(r.definition.query.datasource) ? r.definition.query.datasource : "advanced";
+        return `${o.exploreBaseUrl()}?q=${JSON.stringify(n)}&d=${A}&c=${r.definition.chart.type}`;
       }
       return "";
-    }), m = v(() => i.t("csvExport.defaultFilename")), S = v(() => u && !["golden_signals", "top_n", "gauge"].includes(r.definition.chart.type)), A = {
-      timeseries_line: Z,
-      timeseries_bar: Z,
-      horizontal_bar: J,
-      vertical_bar: J,
-      gauge: Ve,
-      golden_signals: Ze,
-      top_n: We,
+    }), m = g(() => i.t("csvExport.defaultFilename")), I = g(() => u && !["golden_signals", "top_n", "gauge"].includes(r.definition.chart.type)), w = {
+      timeseries_line: Y,
+      timeseries_bar: Y,
+      horizontal_bar: W,
+      vertical_bar: W,
+      gauge: Je,
+      golden_signals: et,
+      top_n: tt,
       slottable: void 0
-    }, h = v(() => {
-      const n = A[r.definition.chart.type];
+    }, h = g(() => {
+      const n = w[r.definition.chart.type];
       return n && {
         component: n,
         rendererProps: {
@@ -481,98 +487,116 @@ const w = {
           refreshCounter: r.refreshCounter
         }
       };
-    }), C = v(() => y.value ? Ie(y.value.meta.granularity_ms) : void 0), p = () => {
+    }), E = g(() => {
+      var A;
+      const n = (A = r.definition.query) == null ? void 0 : A.time_range;
+      if ((n == null ? void 0 : n.type) === "relative") {
+        const q = ne.get(qe[n.time_range]);
+        return q ? q.display : (console.warn("Did not recognize the given relative time range:", n.time_range), n.time_range);
+      } else if ((n == null ? void 0 : n.type) === "absolute") {
+        const q = n.tz || "Etc/UTC";
+        return `${J(n.start, { short: !0, tz: q })} - ${J(n.end, { short: !0, tz: q })}`;
+      }
+      return null;
+    }), p = g(() => y.value ? be(y.value.meta.granularity_ms) : void 0), v = () => {
       s("edit-tile", r.definition);
-    }, f = (n) => {
+    }, T = (n) => {
       y.value = n;
-    }, q = (n) => {
-      R.value = n;
-    }, b = () => {
-      q(!0);
+    }, C = (n) => {
+      D.value = n;
+    }, f = () => {
+      C(!0);
     };
-    return (n, O) => {
-      const P = $("KDropdownItem"), G = $("KDropdown");
-      return d(), E("div", {
+    return (n, A) => {
+      const q = N("KBadge"), M = N("KDropdownItem"), ce = N("KDropdown");
+      return d(), R("div", {
         class: "tile-boundary",
         "data-testid": `tile-${n.tileId}`
       }, [
-        l(u) && n.definition.chart.type !== "slottable" ? (d(), E("div", Xe, [
-          L("div", {
+        l(u) && n.definition.chart.type !== "slottable" ? (d(), R("div", at, [
+          K("div", {
             class: "title",
             "data-testid": `tile-title-${n.tileId}`
-          }, F(n.definition.chart.chartTitle), 9, et),
-          S.value ? (d(), E("div", {
+          }, L(n.definition.chart.chartTitle), 9, nt),
+          I.value || E.value ? (d(), R("div", {
             key: 0,
             class: "tile-actions",
             "data-testid": `tile-actions-${n.tileId}`
           }, [
-            n.context.editable ? (d(), g(l(ke), {
-              key: 0,
+            E.value ? (d(), _(q, { key: 0 }, {
+              default: b(() => [
+                U(L(E.value), 1)
+              ]),
+              _: 1
+            })) : S("", !0),
+            I.value && n.context.editable ? (d(), _(l(we), {
+              key: 1,
               class: "edit-icon",
-              color: l(W),
+              color: l(X),
               "data-testid": `edit-tile-${n.tileId}`,
-              size: l(Y),
-              onClick: p
-            }, null, 8, ["color", "data-testid", "size"])) : D("", !0),
-            T(G, {
+              size: l(ee),
+              onClick: v
+            }, null, 8, ["color", "data-testid", "size"])) : S("", !0),
+            I.value ? (d(), _(ce, {
+              key: 2,
               class: "dropdown",
               "data-testid": `chart-action-menu-${n.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
-              items: _(() => [
-                k.value ? (d(), g(P, {
+              items: b(() => [
+                x.value ? (d(), _(M, {
                   key: 0,
                   "data-testid": `chart-jump-to-explore-${n.tileId}`,
-                  item: { label: l(i).t("jumpToExplore"), to: k.value }
-                }, null, 8, ["data-testid", "item"])) : D("", !0),
-                "allowCsvExport" in n.definition.chart && n.definition.chart.allowCsvExport ? (d(), g(P, {
+                  item: { label: l(i).t("jumpToExplore"), to: x.value }
+                }, null, 8, ["data-testid", "item"])) : S("", !0),
+                "allowCsvExport" in n.definition.chart && n.definition.chart.allowCsvExport ? (d(), _(M, {
                   key: 1,
                   class: "chart-export-button",
                   "data-testid": `chart-csv-export-${n.tileId}`,
-                  onClick: O[0] || (O[0] = (yt) => b())
+                  onClick: A[0] || (A[0] = (vt) => f())
                 }, {
-                  default: _(() => [
-                    L("span", {
+                  default: b(() => [
+                    K("span", {
                       class: "chart-export-trigger",
                       "data-testid": `csv-export-button-${n.tileId}`
-                    }, F(l(i).t("csvExport.exportAsCsv")), 9, rt)
+                    }, L(l(i).t("csvExport.exportAsCsv")), 9, it)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : D("", !0)
+                }, 8, ["data-testid"])) : S("", !0)
               ]),
-              default: _(() => [
-                T(l(Ae), {
+              default: b(() => [
+                F(l(Oe), {
                   class: "kebab-action-menu",
-                  color: l(W),
+                  color: l(X),
                   "data-testid": `kebab-action-menu-${n.tileId}`,
-                  size: l(Y)
+                  size: l(ee)
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
-            }, 8, ["data-testid"])
-          ], 8, tt)) : "description" in n.definition.chart ? (d(), E("div", {
+            }, 8, ["data-testid"])) : S("", !0)
+          ], 8, ot)) : "description" in n.definition.chart ? (d(), R("div", {
             key: 1,
             class: "header-description",
             "data-testid": `tile-description-${n.tileId}`
-          }, F(n.definition.chart.description), 9, at)) : D("", !0),
-          R.value ? (d(), g(l(ve), {
+          }, L(n.definition.chart.description), 9, st)) : S("", !0),
+          D.value ? (d(), _(l(Te), {
             key: 2,
             "chart-data": y.value,
             "data-testid": `csv-export-modal-${n.tileId}`,
             filename: m.value,
-            onToggleModal: q
-          }, null, 8, ["chart-data", "data-testid", "filename"])) : D("", !0)
-        ])) : D("", !0),
-        L("div", {
+            onToggleModal: C
+          }, null, 8, ["chart-data", "data-testid", "filename"])) : S("", !0)
+        ])) : S("", !0),
+        K("div", {
           class: "tile-content",
           "data-testid": `tile-content-${n.tileId}`
         }, [
-          h.value ? (d(), g(le(h.value.component), ee({ key: 0 }, h.value.rendererProps, { onChartData: f }), null, 16)) : D("", !0)
-        ], 8, nt)
-      ], 8, Ye);
+          h.value ? (d(), _(ye(h.value.component), re({ key: 0 }, h.value.rendererProps, { onChartData: T }), null, 16)) : S("", !0)
+        ], 8, ct)
+      ], 8, rt);
     };
   }
-}), it = /* @__PURE__ */ N(ot, [["__scopeId", "data-v-e958ea7b"]]), st = (a, t, e) => {
+}), ut = /* @__PURE__ */ z(lt, [["__scopeId", "data-v-3031ac6e"]]), dt = (a, t, e) => {
   const r = /* @__PURE__ */ new Map();
   e.forEach((o) => {
     const c = o.layout.position.row, i = r.get(c), u = o.layout.size.rows === 1 && !!o.layout.size.fitToContent;
@@ -582,7 +606,7 @@ const w = {
   for (let o = 0; o < a; o++)
     r.get(o) ? s.push("auto") : s.push(`${t}px`);
   return s;
-}, ct = /* @__PURE__ */ I({
+}, pt = /* @__PURE__ */ k({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -592,7 +616,7 @@ const w = {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => V
+      default: () => H
     },
     tiles: {
       type: Array,
@@ -600,24 +624,24 @@ const w = {
     }
   },
   setup(a) {
-    B((i) => ({
+    G((i) => ({
       "3bc5e939": a.gridSize.cols,
       "77aa3028": o.value
     }));
-    const t = a, e = x(null), r = x(0), s = new ResizeObserver((i) => {
+    const t = a, e = O(null), r = O(0), s = new ResizeObserver((i) => {
       window.requestAnimationFrame(() => {
         !Array.isArray(i) || !i.length || (r.value = i[0].contentRect.width);
       });
     });
-    ue(() => {
+    he(() => {
       e.value && s.observe(e.value);
-    }), X(() => {
+    }), te(() => {
       e.value && s.unobserve(e.value);
     });
-    const o = v(() => {
+    const o = g(() => {
       var u;
-      return st((u = t.gridSize) == null ? void 0 : u.rows, t.tileHeight, t.tiles).join(" ");
-    }), c = v(() => t.tiles.map((i, u) => ({
+      return dt((u = t.gridSize) == null ? void 0 : u.rows, t.tileHeight, t.tiles).join(" ");
+    }), c = g(() => t.tiles.map((i, u) => ({
       key: `tile-${u}`,
       tile: i,
       style: {
@@ -627,29 +651,29 @@ const w = {
         "grid-row-end": i.layout.position.row + 1 + i.layout.size.rows
       }
     })));
-    return (i, u) => (d(), E("div", {
+    return (i, u) => (d(), R("div", {
       ref_key: "gridContainer",
       ref: e,
       class: "kong-ui-public-grid-layout"
     }, [
-      (d(!0), E(de, null, pe(c.value, (y) => (d(), E("div", {
+      (d(!0), R(me, null, fe(c.value, (y) => (d(), R("div", {
         key: y.key,
-        class: ye(["grid-cell", {
+        class: ve(["grid-cell", {
           "empty-cell": !y.tile
         }]),
-        style: j(y.style)
+        style: Q(y.style)
       }, [
-        U(i.$slots, "tile", {
-          style: j(y.style),
+        V(i.$slots, "tile", {
+          style: Q(y.style),
           tile: y.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), lt = /* @__PURE__ */ N(ct, [["__scopeId", "data-v-f43eb7b8"]]), ut = { class: "kong-ui-public-dashboard-renderer" }, dt = {
+}), yt = /* @__PURE__ */ z(pt, [["__scopeId", "data-v-f43eb7b8"]]), ht = { class: "kong-ui-public-dashboard-renderer" }, mt = {
   key: 0,
   class: "tile-container"
-}, pt = /* @__PURE__ */ I({
+}, ft = /* @__PURE__ */ k({
   __name: "DashboardRenderer",
   props: {
     context: {},
@@ -657,24 +681,24 @@ const w = {
   },
   emits: ["edit-tile"],
   setup(a, { expose: t, emit: e }) {
-    const r = a, s = e, { i18n: o } = w.useI18n(), c = x(0), i = K(z);
+    const r = a, s = e, { i18n: o } = $.useI18n(), c = O(0), i = B(P);
     i || (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/dashboard-renderer/README.md#requirements"));
-    const u = De(), y = v(() => r.context.timeSpec ? r.context.timeSpec : {
+    const u = Fe(), y = g(() => r.context.timeSpec ? r.context.timeSpec : {
       type: "relative",
       time_range: u.defaultQueryTimeForOrg
-    }), R = v(() => !!r.context.timeSpec || !u.loading), k = v(() => r.config.tiles.map((h, C) => {
-      var f;
+    }), D = g(() => !!r.context.timeSpec || !u.loading), x = g(() => r.config.tiles.map((h, E) => {
+      var v;
       let p = h.definition;
       if ("description" in p.chart) {
-        const q = (f = p.chart.description) == null ? void 0 : f.replace(Pe, () => {
-          const n = `renderer.trendRange.${y.value.type === "absolute" ? "custom" : y.value.time_range}`;
-          return o.te(n) ? o.t(n) : "";
+        const T = (v = p.chart.description) == null ? void 0 : v.replace(Ge, () => {
+          const f = `renderer.trendRange.${y.value.type === "absolute" ? "custom" : y.value.time_range}`;
+          return o.te(f) ? o.t(f) : "";
         });
         p = {
           ...p,
           chart: {
             ...p.chart,
-            description: q
+            description: T
           }
         };
       }
@@ -682,67 +706,67 @@ const w = {
         layout: h.layout,
         meta: p,
         // Add a unique key to each tile internally.
-        id: C
+        id: E
       };
-    })), m = v(() => {
-      let { tz: h, refreshInterval: C, editable: p } = r.context;
-      return h || (h = new Intl.DateTimeFormat().resolvedOptions().timeZone), C === void 0 && (C = Be), p === void 0 && (p = !1), {
+    })), m = g(() => {
+      let { tz: h, refreshInterval: E, editable: p } = r.context;
+      return h || (h = new Intl.DateTimeFormat().resolvedOptions().timeZone), E === void 0 && (E = Ve), p === void 0 && (p = !1), {
         ...r.context,
         tz: h,
         timeSpec: y.value,
-        refreshInterval: C,
+        refreshInterval: E,
         editable: p
       };
-    }), S = (h) => {
+    }), I = (h) => {
       s("edit-tile", h);
     };
     return t({ refresh: () => {
       c.value++;
-    } }), (h, C) => {
-      const p = $("KAlert");
-      return d(), E("div", ut, [
-        l(i) ? (d(), g(lt, {
+    } }), (h, E) => {
+      const p = N("KAlert");
+      return d(), R("div", ht, [
+        l(i) ? (d(), _(yt, {
           key: 1,
           "grid-size": h.config.gridSize,
           "tile-height": h.config.tileHeight,
-          tiles: k.value
+          tiles: x.value
         }, {
-          tile: _(({ tile: f }) => [
-            f.meta.chart.type === "slottable" ? (d(), E("div", dt, [
-              U(h.$slots, f.meta.chart.id, {}, void 0, !0)
-            ])) : (d(), g(it, {
+          tile: b(({ tile: v }) => [
+            v.meta.chart.type === "slottable" ? (d(), R("div", mt, [
+              V(h.$slots, v.meta.chart.id, {}, void 0, !0)
+            ])) : (d(), _(ut, {
               key: 1,
               class: "tile-container",
               context: m.value,
-              definition: f.meta,
-              height: f.layout.size.rows * (h.config.tileHeight || l(V)) + parseInt(l(ne), 10),
-              "query-ready": R.value,
+              definition: v.meta,
+              height: v.layout.size.rows * (h.config.tileHeight || l(H)) + parseInt(l(se), 10),
+              "query-ready": D.value,
               "refresh-counter": c.value,
-              "tile-id": f.id,
-              onEditTile: (q) => S(f)
+              "tile-id": v.id,
+              onEditTile: (T) => I(v)
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onEditTile"]))
           ]),
           _: 3
-        }, 8, ["grid-size", "tile-height", "tiles"])) : (d(), g(p, {
+        }, 8, ["grid-size", "tile-height", "tiles"])) : (d(), _(p, {
           key: 0,
           appearance: "danger"
         }, {
-          default: _(() => [
-            M(F(l(o).t("renderer.noQueryBridge")), 1)
+          default: b(() => [
+            U(L(l(o).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), It = /* @__PURE__ */ N(pt, [["__scopeId", "data-v-6ee19c24"]]);
+}), kt = /* @__PURE__ */ z(ft, [["__scopeId", "data-v-6ee19c24"]]);
 export {
-  ze as CP_ID_TOKEN,
-  V as DEFAULT_TILE_HEIGHT,
-  Be as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  It as DashboardRenderer,
-  Q as ENTITY_ID_TOKEN,
-  lt as GridLayout,
-  z as INJECT_QUERY_PROVIDER,
-  Pe as TIMEFRAME_TOKEN
+  Ue as CP_ID_TOKEN,
+  H as DEFAULT_TILE_HEIGHT,
+  Ve as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  kt as DashboardRenderer,
+  Z as ENTITY_ID_TOKEN,
+  yt as GridLayout,
+  P as INJECT_QUERY_PROVIDER,
+  Ge as TIMEFRAME_TOKEN
 };