@kong-ui-public/dashboard-renderer 0.32.4 → 0.32.5

package/dist/dashboard-renderer.es.js

@@ -1,20 +1,20 @@
-import { ref as I, watchEffect as ye, inject as N, defineComponent as S, onUnmounted as ae, computed as v, watch as he, resolveComponent as F, unref as c, openBlock as d, createBlock as b, withCtx as _, createTextVNode as U, toDisplayString as O, renderSlot as G, createCommentVNode as k, useCssVars as K, createElementVNode as L, createVNode as T, mergeProps as ie, createSlots as se, createElementBlock as E, normalizeProps as me, guardReactiveProps as fe, resolveDynamicComponent as ge, onMounted as ve, Fragment as be, renderList as _e, normalizeClass as qe, normalizeStyle as X } from "vue";
+import { ref as I, watchEffect as ye, inject as j, defineComponent as S, onUnmounted as ae, computed as g, watch as he, resolveComponent as P, unref as l, openBlock as d, createBlock as v, withCtx as b, createTextVNode as G, toDisplayString as F, renderSlot as H, createCommentVNode as k, useCssVars as B, createElementVNode as N, createVNode as T, mergeProps as ie, createSlots as se, createElementBlock as E, normalizeProps as me, guardReactiveProps as fe, resolveDynamicComponent as ge, onMounted as ve, Fragment as be, renderList as _e, normalizeClass as qe, normalizeStyle as X } from "vue";
 import { SimpleChart as Ce, AnalyticsChart as Ee, TopNTable as Se, CsvExportModal as xe, ChartMetricDisplay as Te } from "@kong-ui-public/analytics-chart";
 import Ae from "swrv";
 import "axios";
-import { createI18n as Re, i18nTComponent as De } from "@kong-ui-public/i18n";
-import { stripUnknownFilters as ke, Timeframe as Ie, TimePeriods as we, granularityValues as Oe, exploreFilterTypesV2 as Fe, exploreAggregations as Pe, queryableExploreDimensions as Le, filterableExploreDimensions as Ne, basicExploreAggregations as je, queryableBasicExploreDimensions as ze, filterableBasicExploreDimensions as $e, aiExploreAggregations as Ke, queryableAiExploreDimensions as Be, filterableAiExploreDimensions as Ve, relativeTimeRangeValuesV4 as Me } from "@kong-ui-public/analytics-utilities";
-import { MetricsProvider as Ue, MetricsConsumer as Ge } from "@kong-ui-public/analytics-metric-provider";
-import { EntityLink as He } from "@kong-ui-public/entities-shared";
-import { EditIcon as Qe, MoreIcon as Je } from "@kong/icons";
-import { useAnalyticsConfigStore as Ze } from "@kong-ui-public/analytics-config-store";
+import { createI18n as De, i18nTComponent as Re } from "@kong-ui-public/i18n";
+import { stripUnknownFilters as ke, Timeframe as Ie, TimePeriods as we, msToGranularity as Oe, granularityValues as Fe, exploreFilterTypesV2 as Pe, exploreAggregations as Le, queryableExploreDimensions as Ne, filterableExploreDimensions as je, basicExploreAggregations as ze, queryableBasicExploreDimensions as $e, filterableBasicExploreDimensions as Ke, aiExploreAggregations as Be, queryableAiExploreDimensions as Ve, filterableAiExploreDimensions as Me, relativeTimeRangeValuesV4 as Ue } from "@kong-ui-public/analytics-utilities";
+import { MetricsProvider as Ge, MetricsConsumer as He } from "@kong-ui-public/analytics-metric-provider";
+import { EntityLink as Qe } from "@kong-ui-public/entities-shared";
+import { EditIcon as Je, MoreIcon as Ze } from "@kong/icons";
+import { useAnalyticsConfigStore as We } from "@kong-ui-public/analytics-config-store";
 var ce = /* @__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))(ce || {});
-const We = (e) => {
+const Ye = (e) => {
   var r, t, o, i, 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 || (i = (o = e.data) == null ? void 0 : o.data) != null && i.length || !((n = e.data) != null && n.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
 };
-function Ye(e = I({}), r, t, o = We) {
+function Xe(e = I({}), r, t, o = Ye) {
   const i = I(
     "PENDING"
     /* PENDING */
@@ -51,7 +51,7 @@ function Ye(e = I({}), r, t, o = We) {
     swrvState: ce
   };
 }
-const Xe = {
+const et = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-Hour Summary",
@@ -59,36 +59,36 @@ const Xe = {
     "30d": "Last 30-Day Summary"
   },
   edit: "Edit"
-}, et = {
-  timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
 }, tt = {
+  timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
+}, rt = {
   defaultFilename: "Chart Export",
   exportAsCsv: "Export as CSV"
-}, rt = "Explore", ot = {
-  renderer: Xe,
-  queryDataProvider: et,
-  csvExport: tt,
-  jumpToExplore: rt
+}, ot = "Explore", nt = {
+  renderer: et,
+  queryDataProvider: tt,
+  csvExport: rt,
+  jumpToExplore: ot
 };
-function nt() {
-  const e = Re("en-us", ot);
+function at() {
+  const e = De("en-us", nt);
   return {
     i18n: e,
-    i18nT: De(e)
+    i18nT: Re(e)
     // Translation component <i18n-t>
   };
 }
-const B = 170, j = "analytics-query-provider", ee = "{entity-id}", at = "{cp-id}", it = "{timeframe}", st = 30 * 1e3;
-function ct() {
-  const e = N(j);
+const V = 170, z = "analytics-query-provider", ee = "{entity-id}", it = "{cp-id}", st = "{timeframe}", ct = 30 * 1e3;
+function lt() {
+  const e = j(z);
   return {
     evaluateFeatureFlag: (t, o) => e ? e.evaluateFeatureFlagFn(t, o) : o
   };
 }
 const w = {
-  useI18n: nt,
-  useEvaluateFeatureFlag: ct
-}, H = /* @__PURE__ */ S({
+  useI18n: at,
+  useEvaluateFeatureFlag: lt
+}, Q = /* @__PURE__ */ S({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -98,67 +98,67 @@ const w = {
   },
   emits: ["chart-data", "queryComplete"],
   setup(e, { emit: r }) {
-    const t = e, o = r, { i18n: i } = w.useI18n(), n = N(j), s = () => t.queryReady && n ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, a = new AbortController();
+    const t = e, o = r, { i18n: i } = w.useI18n(), n = j(z), c = () => t.queryReady && n ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, a = new AbortController();
     ae(() => {
       a.abort();
     });
-    const l = (p, g, q) => {
-      const u = [];
-      return g && u.push(...g), u.push(...ke(p, q)), u;
-    }, { data: f, error: A, isValidating: R } = Ae(s, async () => {
-      var p, g, q, u;
+    const u = (p, f, _) => {
+      const q = [];
+      return f && q.push(...f), q.push(...ke(p, _)), q;
+    }, { data: y, error: A, isValidating: D } = Ae(c, async () => {
+      var p, f, _, q;
       try {
         let {
-          datasource: h,
-          ...$
+          datasource: s,
+          ...O
         } = t.query;
-        h || (h = "basic");
-        const M = l(h, t.query.filters, t.context.filters), Y = {
-          datasource: h,
+        s || (s = "basic");
+        const K = u(s, t.query.filters, t.context.filters), U = {
+          datasource: s,
           query: {
-            ...$,
+            ...O,
             time_range: {
               ...t.context.timeSpec,
               tz: t.context.tz
             },
-            filters: M
+            filters: K
           }
         };
-        return n == null ? void 0 : n.queryFn(Y, a);
-      } catch (h) {
-        D.value = ((g = (p = h == null ? void 0 : h.response) == null ? void 0 : p.data) == null ? void 0 : g.message) === "Range not allowed for this tier" ? i.t("queryDataProvider.timeRangeExceeded") : ((u = (q = h == null ? void 0 : h.response) == null ? void 0 : q.data) == null ? void 0 : u.message) || (h == null ? void 0 : h.message);
+        return n == null ? void 0 : n.queryFn(U, a);
+      } catch (s) {
+        R.value = ((f = (p = s == null ? void 0 : s.response) == null ? void 0 : p.data) == null ? void 0 : f.message) === "Range not allowed for this tier" ? i.t("queryDataProvider.timeRangeExceeded") : ((q = (_ = s == null ? void 0 : s.response) == null ? void 0 : _.data) == null ? void 0 : q.message) || (s == null ? void 0 : s.message);
       } finally {
         o("queryComplete");
       }
     }, {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: m, swrvState: x } = Ye(f, A, R), D = I(null), y = v(() => m.value === x.ERROR || !!D.value), C = v(() => !t.queryReady || m.value === x.PENDING);
-    return he(f, (p) => {
+    }), { state: m, swrvState: x } = Xe(y, A, D), R = I(null), h = g(() => m.value === x.ERROR || !!R.value), C = g(() => !t.queryReady || m.value === x.PENDING);
+    return he(y, (p) => {
       p && o("chart-data", p);
-    }), (p, g) => {
-      const q = F("KSkeleton"), u = F("KEmptyState");
-      return C.value || !c(f) && !y.value ? (d(), b(q, {
+    }), (p, f) => {
+      const _ = P("KSkeleton"), q = P("KEmptyState");
+      return C.value || !l(y) && !h.value ? (d(), v(_, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : y.value ? (d(), b(u, {
+      })) : h.value ? (d(), v(q, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
-        default: _(() => [
-          U(O(D.value), 1)
+        default: b(() => [
+          G(F(R.value), 1)
         ]),
         _: 1
-      })) : c(f) ? G(p.$slots, "default", {
+      })) : l(y) ? H(p.$slots, "default", {
         key: 2,
-        data: c(f)
+        data: l(y)
       }) : k("", !0);
     };
   }
-}), lt = { class: "analytics-chart" }, ut = /* @__PURE__ */ S({
+}), ut = { class: "analytics-chart" }, dt = /* @__PURE__ */ S({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -169,19 +169,19 @@ const w = {
     refreshCounter: {}
   },
   setup(e) {
-    K((t) => ({
+    B((t) => ({
       bc149350: `${t.height}px`
     }));
     const r = e;
-    return (t, o) => (d(), b(H, {
+    return (t, o) => (d(), v(Q, {
       context: t.context,
       query: t.query,
       "query-ready": t.queryReady,
       "refresh-counter": t.refreshCounter
     }, {
-      default: _(({ data: i }) => [
-        L("div", lt, [
-          T(c(Ce), {
+      default: b(({ data: i }) => [
+        N("div", ut, [
+          T(l(Ce), {
             "chart-data": i,
             "chart-options": r.chartOptions,
             "synthetics-data-key": t.chartOptions.syntheticsDataKey
@@ -191,12 +191,12 @@ const w = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), P = (e, r) => {
+}), L = (e, r) => {
   const t = e.__vccOpts || e;
   for (const [o, i] of r)
     t[o] = i;
   return t;
-}, dt = /* @__PURE__ */ P(ut, [["__scopeId", "data-v-e770c4a0"]]), pt = { class: "analytics-chart" }, yt = /* @__PURE__ */ S({
+}, pt = /* @__PURE__ */ L(dt, [["__scopeId", "data-v-e770c4a0"]]), yt = { class: "analytics-chart" }, ht = /* @__PURE__ */ S({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -209,12 +209,12 @@ const w = {
   },
   emits: ["edit-tile", "chart-data"],
   setup(e, { emit: r }) {
-    const t = e, o = r, i = N(j), { i18n: n } = w.useI18n(), { evaluateFeatureFlag: s } = w.useEvaluateFeatureFlag(), a = s("ma-3043-analytics-chart-kebab-menu", !1), l = v(() => ({
+    const t = e, o = r, i = j(z), { i18n: n } = w.useI18n(), { evaluateFeatureFlag: c } = w.useEvaluateFeatureFlag(), a = c("ma-3043-analytics-chart-kebab-menu", !1), u = g(() => ({
       type: t.chartOptions.type,
       stacked: t.chartOptions.stacked ?? !1,
       chartDatasetColors: t.chartOptions.chartDatasetColors,
       threshold: t.chartOptions.threshold
-    })), f = v(() => {
+    })), y = g(() => {
       if (i && i.exploreBaseUrl) {
         const m = {
           filters: [...t.context.filters, ...t.query.filters ?? []],
@@ -227,26 +227,26 @@ const w = {
       return "";
     }), A = () => {
       o("edit-tile");
-    }, R = (m) => {
+    }, D = (m) => {
       o("chart-data", m);
     };
     return (m, x) => {
-      const D = F("KDropdownItem");
-      return d(), b(H, {
+      const R = P("KDropdownItem");
+      return d(), v(Q, {
         context: m.context,
         query: m.query,
         "query-ready": m.queryReady,
         "refresh-counter": m.refreshCounter,
-        onChartData: R
+        onChartData: D
       }, {
-        default: _(({ data: y }) => [
-          L("div", pt, [
-            T(c(Ee), ie({
+        default: b(({ data: h }) => [
+          N("div", yt, [
+            T(l(Ee), ie({
               "allow-csv-export": m.chartOptions.allowCsvExport,
-              "chart-data": y,
-              "chart-options": l.value,
-              "chart-title": !c(a) && m.chartOptions.chartTitle || "",
-              "go-to-explore": f.value,
+              "chart-data": h,
+              "chart-options": u.value,
+              "chart-title": !l(a) && m.chartOptions.chartTitle || "",
+              "go-to-explore": y.value,
               "legend-position": "bottom",
               "show-menu": m.context.editable,
               "synthetics-data-key": m.chartOptions.syntheticsDataKey,
@@ -254,10 +254,10 @@ const w = {
             }, m.extraProps), se({ _: 2 }, [
               m.context.editable ? {
                 name: "menu-items",
-                fn: _(() => [
-                  T(D, { onClick: A }, {
-                    default: _(() => [
-                      U(O(c(n).t("renderer.edit")), 1)
+                fn: b(() => [
+                  T(R, { onClick: A }, {
+                    default: b(() => [
+                      G(F(l(n).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -271,7 +271,7 @@ const w = {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), le = /* @__PURE__ */ P(yt, [["__scopeId", "data-v-1bc587d3"]]), te = /* @__PURE__ */ S({
+}), le = /* @__PURE__ */ L(ht, [["__scopeId", "data-v-1bc587d3"]]), te = /* @__PURE__ */ S({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -282,7 +282,7 @@ const w = {
     refreshCounter: {}
   },
   setup(e) {
-    return (r, t) => (d(), b(le, {
+    return (r, t) => (d(), v(le, {
       "chart-options": r.chartOptions,
       context: r.context,
       "extra-props": { showAnnotations: !1 },
@@ -303,7 +303,7 @@ const w = {
     refreshCounter: {}
   },
   setup(e) {
-    return (r, t) => (d(), b(le, {
+    return (r, t) => (d(), v(le, {
       "chart-options": r.chartOptions,
       context: r.context,
       height: r.height,
@@ -312,7 +312,7 @@ const w = {
       "refresh-counter": r.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), ht = { class: "metric-card-tile-wrapper" }, mt = /* @__PURE__ */ S({
+}), mt = { class: "metric-card-tile-wrapper" }, ft = /* @__PURE__ */ S({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -323,37 +323,37 @@ const w = {
     refreshCounter: {}
   },
   setup(e) {
-    K((s) => ({
-      "3e99e905": c(o) ? "90%" : "100%",
-      "345e89d8": c(o) ? "auto" : "100%",
-      "7fa58fd9": c(o) ? "100%" : "none"
+    B((c) => ({
+      "3e99e905": l(o) ? "90%" : "100%",
+      "345e89d8": l(o) ? "auto" : "100%",
+      "7fa58fd9": l(o) ? "100%" : "none"
     }));
-    const r = e, { evaluateFeatureFlag: t } = w.useEvaluateFeatureFlag(), o = t("ma-3043-analytics-chart-kebab-menu", !1), i = v(() => {
-      const s = r.context.timeSpec;
-      if (s.type === "absolute")
+    const r = e, { evaluateFeatureFlag: t } = w.useEvaluateFeatureFlag(), o = t("ma-3043-analytics-chart-kebab-menu", !1), i = g(() => {
+      const c = r.context.timeSpec;
+      if (c.type === "absolute")
         return new Ie({
           key: "custom",
           timeframeText: "custom",
           display: "custom",
-          startCustom: s.start,
-          endCustom: s.end,
-          timeframeLength: () => s.end.getTime() - s.start.getTime(),
+          startCustom: c.start,
+          endCustom: c.end,
+          timeframeLength: () => c.end.getTime() - c.start.getTime(),
           defaultResponseGranularity: "daily",
           dataGranularity: "daily",
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const a = we.get(s.time_range);
+      const a = we.get(c.time_range);
       if (!a)
         throw new Error("Unknown time range");
       return a;
-    }), n = v(() => {
-      var a, l;
-      const s = (a = r.query) == null ? void 0 : a.datasource;
-      if (s && s !== "advanced" && s !== "basic")
-        throw new Error(`Invalid datasource value: ${s}`);
+    }), n = g(() => {
+      var a, u;
+      const c = (a = r.query) == null ? void 0 : a.datasource;
+      if (c && c !== "advanced" && c !== "basic")
+        throw new Error(`Invalid datasource value: ${c}`);
       return {
-        datasource: (l = r.query) == null ? void 0 : l.datasource,
+        datasource: (u = r.query) == null ? void 0 : u.datasource,
         overrideTimeframe: i.value,
         tz: r.context.tz,
         additionalFilter: r.context.filters,
@@ -367,16 +367,16 @@ const w = {
         refreshCounter: r.refreshCounter
       };
     });
-    return (s, a) => (d(), E("div", ht, [
-      T(c(Ue), me(fe(n.value)), {
-        default: _(() => [
-          T(c(Ge))
+    return (c, a) => (d(), E("div", mt, [
+      T(l(Ge), me(fe(n.value)), {
+        default: b(() => [
+          T(l(He))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), ft = /* @__PURE__ */ P(mt, [["__scopeId", "data-v-84c4c1c8"]]), oe = "#6c7489", ne = "20px", ue = "20px", gt = /* @__PURE__ */ S({
+}), gt = /* @__PURE__ */ L(ft, [["__scopeId", "data-v-84c4c1c8"]]), oe = "#6c7489", ne = "20px", ue = "20px", vt = /* @__PURE__ */ S({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -388,38 +388,38 @@ const w = {
   },
   setup(e) {
     const r = e, { evaluateFeatureFlag: t } = w.useEvaluateFeatureFlag(), o = t("ma-3043-analytics-chart-kebab-menu", !1), i = (n) => {
-      var s;
-      if ((s = r.chartOptions) != null && s.entityLink)
+      var c;
+      if ((c = r.chartOptions) != null && c.entityLink)
         if (n.id.includes(":")) {
-          const [a, l] = n.id.split(":");
-          return r.chartOptions.entityLink.replace(at, a).replace(ee, l);
+          const [a, u] = n.id.split(":");
+          return r.chartOptions.entityLink.replace(it, a).replace(ee, u);
         } else
           return r.chartOptions.entityLink.replace(ee, n.id);
       return "";
     };
-    return (n, s) => (d(), b(H, {
+    return (n, c) => (d(), v(Q, {
       context: n.context,
       query: n.query,
       "query-ready": n.queryReady,
       "refresh-counter": n.refreshCounter
     }, {
-      default: _(({ data: a }) => [
-        T(c(Se), {
+      default: b(({ data: a }) => [
+        T(l(Se), {
           data: a,
-          description: !c(o) && n.chartOptions.description || "",
+          description: !l(o) && n.chartOptions.description || "",
           "synthetics-data-key": n.chartOptions.syntheticsDataKey,
-          title: !c(o) && n.chartOptions.chartTitle || ""
+          title: !l(o) && n.chartOptions.chartTitle || ""
         }, se({ _: 2 }, [
           r.chartOptions.entityLink ? {
             name: "name",
-            fn: _(({ record: l }) => [
-              T(c(He), {
+            fn: b(({ record: u }) => [
+              T(l(Qe), {
                 "entity-link-data": {
-                  id: l.id,
-                  label: l.name,
-                  deleted: l.deleted
+                  id: u.id,
+                  label: u.name,
+                  deleted: u.deleted
                 },
-                "external-link": i(l)
+                "external-link": i(u)
               }, null, 8, ["entity-link-data", "external-link"])
             ]),
             key: "0"
@@ -429,56 +429,57 @@ const w = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), vt = { class: "tile-boundary" }, bt = {
+}), bt = { class: "tile-boundary" }, _t = {
   key: 0,
   class: "tile-header"
-}, _t = { class: "title" }, qt = {
+}, qt = { class: "title" }, Ct = {
   key: 0,
   class: "tile-actions"
-}, Ct = {
+}, Et = {
   class: "chart-export-trigger",
   "data-testid": "csv-export-button"
-}, Et = {
+}, St = {
   key: 1,
   class: "header-description"
-}, St = { class: "tile-content" }, xt = /* @__PURE__ */ S({
+}, xt = { class: "tile-content" }, Tt = /* @__PURE__ */ S({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
-    height: { default: B },
+    height: { default: V },
     queryReady: { type: Boolean },
     refreshCounter: {}
   },
   emits: ["edit-tile"],
   setup(e, { emit: r }) {
-    K((u) => ({
-      "550edf72": `${u.height}px`
+    B((s) => ({
+      "1cbe86ac": `${s.height}px`
     }));
-    const t = parseInt(ue, 10), o = e, i = r, n = N(j), { evaluateFeatureFlag: s } = w.useEvaluateFeatureFlag(), { i18n: a } = w.useI18n(), l = s("ma-3043-analytics-chart-kebab-menu", !1), f = I(), A = I(!1), R = v(() => {
+    const t = parseInt(ue, 10), o = e, i = r, n = j(z), { evaluateFeatureFlag: c } = w.useEvaluateFeatureFlag(), { i18n: a } = w.useI18n(), u = c("ma-3043-analytics-chart-kebab-menu", !1), y = I(), A = I(!1), D = g(() => {
       if (n && n.exploreBaseUrl) {
-        const u = {
+        const s = {
           filters: [...o.context.filters, ...o.definition.query.filters ?? []],
           metrics: o.definition.query.metrics ?? [],
           dimensions: o.definition.query.dimensions ?? [],
-          time_range: o.definition.query.time_range || o.context.timeSpec
-        }, h = ["advanced", "ai"].includes(o.definition.query.datasource) ? o.definition.query.datasource : "advanced";
-        return `${n.exploreBaseUrl()}?q=${JSON.stringify(u)}&d=${h}&c=${o.definition.chart.type}`;
+          time_range: o.definition.query.time_range || o.context.timeSpec,
+          granularity: o.definition.query.granularity || C.value
+        }, O = ["advanced", "ai"].includes(o.definition.query.datasource) ? o.definition.query.datasource : "advanced";
+        return `${n.exploreBaseUrl()}?q=${JSON.stringify(s)}&d=${O}&c=${o.definition.chart.type}`;
       }
       return "";
-    }), m = v(() => a.t("csvExport.defaultFilename")), x = v(() => l && !["golden_signals", "top_n", "gauge"].includes(o.definition.chart.type)), D = {
+    }), m = g(() => a.t("csvExport.defaultFilename")), x = g(() => u && !["golden_signals", "top_n", "gauge"].includes(o.definition.chart.type)), R = {
       timeseries_line: re,
       timeseries_bar: re,
       horizontal_bar: te,
       vertical_bar: te,
-      gauge: dt,
-      golden_signals: ft,
-      top_n: gt,
+      gauge: pt,
+      golden_signals: gt,
+      top_n: vt,
       slottable: void 0
-    }, y = v(() => {
-      const u = D[o.definition.chart.type];
-      return u && {
-        component: u,
+    }, h = g(() => {
+      const s = R[o.definition.chart.type];
+      return s && {
+        component: s,
         rendererProps: {
           query: o.definition.query,
           context: o.context,
@@ -488,80 +489,80 @@ const w = {
           refreshCounter: o.refreshCounter
         }
       };
-    }), C = () => {
+    }), C = g(() => y.value ? Oe(y.value.meta.granularity_ms) : void 0), p = () => {
       i("edit-tile", o.definition);
-    }, p = (u) => {
-      f.value = u;
-    }, g = (u) => {
-      A.value = u;
+    }, f = (s) => {
+      y.value = s;
+    }, _ = (s) => {
+      A.value = s;
     }, q = () => {
-      g(!0);
+      _(!0);
     };
-    return (u, h) => {
-      const $ = F("KDropdownItem"), M = F("KDropdown");
-      return d(), E("div", vt, [
-        c(l) && u.definition.chart.type !== "slottable" ? (d(), E("div", bt, [
-          L("div", _t, O(u.definition.chart.chartTitle), 1),
-          x.value ? (d(), E("div", qt, [
-            u.context.editable ? (d(), b(c(Qe), {
+    return (s, O) => {
+      const K = P("KDropdownItem"), U = P("KDropdown");
+      return d(), E("div", bt, [
+        l(u) && s.definition.chart.type !== "slottable" ? (d(), E("div", _t, [
+          N("div", qt, F(s.definition.chart.chartTitle), 1),
+          x.value ? (d(), E("div", Ct, [
+            s.context.editable ? (d(), v(l(Je), {
               key: 0,
               class: "edit-icon",
-              color: c(oe),
-              size: c(ne),
-              onClick: C
+              color: l(oe),
+              size: l(ne),
+              onClick: p
             }, null, 8, ["color", "size"])) : k("", !0),
-            T(M, {
+            T(U, {
               class: "dropdown",
               "data-testid": "chart-action-menu",
               "kpop-attributes": { placement: "bottom-end" }
             }, {
-              items: _(() => [
-                R.value ? (d(), b($, {
+              items: b(() => [
+                D.value ? (d(), v(K, {
                   key: 0,
                   "data-testid": "chart-jump-to-explore",
-                  item: { label: c(a).t("jumpToExplore"), to: R.value }
+                  item: { label: l(a).t("jumpToExplore"), to: D.value }
                 }, null, 8, ["item"])) : k("", !0),
-                "allowCsvExport" in u.definition.chart && u.definition.chart.allowCsvExport ? (d(), b($, {
+                "allowCsvExport" in s.definition.chart && s.definition.chart.allowCsvExport ? (d(), v(K, {
                   key: 1,
                   class: "chart-export-button",
                   "data-testid": "chart-csv-export",
-                  onClick: h[0] || (h[0] = (Y) => q())
+                  onClick: O[0] || (O[0] = (Jt) => q())
                 }, {
-                  default: _(() => [
-                    L("span", Ct, O(c(a).t("csvExport.exportAsCsv")), 1)
+                  default: b(() => [
+                    N("span", Et, F(l(a).t("csvExport.exportAsCsv")), 1)
                   ]),
                   _: 1
                 })) : k("", !0)
               ]),
-              default: _(() => [
-                T(c(Je), {
+              default: b(() => [
+                T(l(Ze), {
                   class: "kebab-action-menu",
-                  color: c(oe),
+                  color: l(oe),
                   "data-testid": "kebab-action-menu",
-                  size: c(ne)
+                  size: l(ne)
                 }, null, 8, ["color", "size"])
               ]),
               _: 1
             })
-          ])) : "description" in u.definition.chart ? (d(), E("div", Et, O(u.definition.chart.description), 1)) : k("", !0),
-          A.value ? (d(), b(c(xe), {
+          ])) : "description" in s.definition.chart ? (d(), E("div", St, F(s.definition.chart.description), 1)) : k("", !0),
+          A.value ? (d(), v(l(xe), {
             key: 2,
-            "chart-data": f.value,
+            "chart-data": y.value,
             filename: m.value,
-            onToggleModal: g
+            onToggleModal: _
           }, null, 8, ["chart-data", "filename"])) : k("", !0)
         ])) : k("", !0),
-        L("div", St, [
-          y.value ? (d(), b(ge(y.value.component), ie({ key: 0 }, y.value.rendererProps, { onChartData: p }), null, 16)) : k("", !0)
+        N("div", xt, [
+          h.value ? (d(), v(ge(h.value.component), ie({ key: 0 }, h.value.rendererProps, { onChartData: f }), null, 16)) : k("", !0)
         ])
       ]);
     };
   }
-}), Tt = /* @__PURE__ */ P(xt, [["__scopeId", "data-v-a0c57f56"]]), At = (e, r, t) => {
+}), At = /* @__PURE__ */ L(Tt, [["__scopeId", "data-v-94b33bca"]]), Dt = (e, r, t) => {
   const o = /* @__PURE__ */ new Map();
   t.forEach((n) => {
-    const s = n.layout.position.row, a = o.get(s), l = n.layout.size.rows === 1 && !!n.layout.size.fitToContent;
-    a === void 0 ? o.set(s, l) : o.set(s, a && l);
+    const c = n.layout.position.row, a = o.get(c), u = n.layout.size.rows === 1 && !!n.layout.size.fitToContent;
+    a === void 0 ? o.set(c, u) : o.set(c, a && u);
   });
   const i = [];
   for (let n = 0; n < e; n++)
@@ -577,7 +578,7 @@ const w = {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => B
+      default: () => V
     },
     tiles: {
       type: Array,
@@ -585,7 +586,7 @@ const w = {
     }
   },
   setup(e) {
-    K((a) => ({
+    B((a) => ({
       "3bc5e939": e.gridSize.cols,
       "77aa3028": n.value
     }));
@@ -599,11 +600,11 @@ const w = {
     }), ae(() => {
       t.value && i.unobserve(t.value);
     });
-    const n = v(() => {
-      var l;
-      return At((l = r.gridSize) == null ? void 0 : l.rows, r.tileHeight, r.tiles).join(" ");
-    }), s = v(() => r.tiles.map((a, l) => ({
-      key: `tile-${l}`,
+    const n = g(() => {
+      var u;
+      return Dt((u = r.gridSize) == null ? void 0 : u.rows, r.tileHeight, r.tiles).join(" ");
+    }), c = g(() => r.tiles.map((a, u) => ({
+      key: `tile-${u}`,
       tile: a,
       style: {
         "grid-column-start": a.layout.position.col + 1,
@@ -612,29 +613,29 @@ const w = {
         "grid-row-end": a.layout.position.row + 1 + a.layout.size.rows
       }
     })));
-    return (a, l) => (d(), E("div", {
+    return (a, u) => (d(), E("div", {
       ref_key: "gridContainer",
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (d(!0), E(be, null, _e(s.value, (f) => (d(), E("div", {
-        key: f.key,
+      (d(!0), E(be, null, _e(c.value, (y) => (d(), E("div", {
+        key: y.key,
         class: qe(["grid-cell", {
-          "empty-cell": !f.tile
+          "empty-cell": !y.tile
         }]),
-        style: X(f.style)
+        style: X(y.style)
       }, [
-        G(a.$slots, "tile", {
-          style: X(f.style),
-          tile: f.tile
+        H(a.$slots, "tile", {
+          style: X(y.style),
+          tile: y.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), Dt = /* @__PURE__ */ P(Rt, [["__scopeId", "data-v-f43eb7b8"]]), kt = { class: "kong-ui-public-dashboard-renderer" }, It = {
+}), kt = /* @__PURE__ */ L(Rt, [["__scopeId", "data-v-f43eb7b8"]]), It = { class: "kong-ui-public-dashboard-renderer" }, wt = {
   key: 0,
   class: "tile-container"
-}, wt = /* @__PURE__ */ S({
+}, Ot = /* @__PURE__ */ S({
   __name: "DashboardRenderer",
   props: {
     context: {},
@@ -642,84 +643,84 @@ const w = {
   },
   emits: ["edit-tile"],
   setup(e, { expose: r, emit: t }) {
-    const o = e, i = t, { i18n: n } = w.useI18n(), s = I(0), a = N(j);
+    const o = e, i = t, { i18n: n } = w.useI18n(), c = I(0), a = j(z);
     a || (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 l = Ze(), f = v(() => o.context.timeSpec ? o.context.timeSpec : {
+    const u = We(), y = g(() => o.context.timeSpec ? o.context.timeSpec : {
       type: "relative",
-      time_range: l.defaultQueryTimeForOrg
-    }), A = v(() => !!o.context.timeSpec || !l.loading), R = v(() => o.config.tiles.map((y, C) => {
-      var g;
-      let p = y.definition;
+      time_range: u.defaultQueryTimeForOrg
+    }), A = g(() => !!o.context.timeSpec || !u.loading), D = g(() => o.config.tiles.map((h, C) => {
+      var f;
+      let p = h.definition;
       if ("description" in p.chart) {
-        const q = (g = p.chart.description) == null ? void 0 : g.replace(it, () => {
-          const h = `renderer.trendRange.${f.value.type === "absolute" ? "custom" : f.value.time_range}`;
-          return n.te(h) ? n.t(h) : "";
+        const _ = (f = p.chart.description) == null ? void 0 : f.replace(st, () => {
+          const s = `renderer.trendRange.${y.value.type === "absolute" ? "custom" : y.value.time_range}`;
+          return n.te(s) ? n.t(s) : "";
         });
         p = {
           ...p,
           chart: {
             ...p.chart,
-            description: q
+            description: _
           }
         };
       }
       return {
-        layout: y.layout,
+        layout: h.layout,
         meta: p,
         // Add a unique key to each tile internally.
         id: C
       };
-    })), m = v(() => {
-      let { tz: y, refreshInterval: C, editable: p } = o.context;
-      return y || (y = new Intl.DateTimeFormat().resolvedOptions().timeZone), C === void 0 && (C = st), p === void 0 && (p = !1), {
+    })), m = g(() => {
+      let { tz: h, refreshInterval: C, editable: p } = o.context;
+      return h || (h = new Intl.DateTimeFormat().resolvedOptions().timeZone), C === void 0 && (C = ct), p === void 0 && (p = !1), {
         ...o.context,
-        tz: y,
-        timeSpec: f.value,
+        tz: h,
+        timeSpec: y.value,
         refreshInterval: C,
         editable: p
       };
-    }), x = (y) => {
-      i("edit-tile", y);
+    }), x = (h) => {
+      i("edit-tile", h);
     };
     return r({ refresh: () => {
-      s.value++;
-    } }), (y, C) => {
-      const p = F("KAlert");
-      return d(), E("div", kt, [
-        c(a) ? (d(), b(Dt, {
+      c.value++;
+    } }), (h, C) => {
+      const p = P("KAlert");
+      return d(), E("div", It, [
+        l(a) ? (d(), v(kt, {
           key: 1,
-          "grid-size": y.config.gridSize,
-          "tile-height": y.config.tileHeight,
-          tiles: R.value
+          "grid-size": h.config.gridSize,
+          "tile-height": h.config.tileHeight,
+          tiles: D.value
         }, {
-          tile: _(({ tile: g }) => [
-            g.meta.chart.type === "slottable" ? (d(), E("div", It, [
-              G(y.$slots, g.meta.chart.id, {}, void 0, !0)
-            ])) : (d(), b(Tt, {
+          tile: b(({ tile: f }) => [
+            f.meta.chart.type === "slottable" ? (d(), E("div", wt, [
+              H(h.$slots, f.meta.chart.id, {}, void 0, !0)
+            ])) : (d(), v(At, {
               key: 1,
               class: "tile-container",
               context: m.value,
-              definition: g.meta,
-              height: g.layout.size.rows * (y.config.tileHeight || c(B)) + parseInt(c(ue), 10),
+              definition: f.meta,
+              height: f.layout.size.rows * (h.config.tileHeight || l(V)) + parseInt(l(ue), 10),
               "query-ready": A.value,
-              "refresh-counter": s.value,
-              onEditTile: (q) => x(g)
+              "refresh-counter": c.value,
+              onEditTile: (_) => x(f)
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "onEditTile"]))
           ]),
           _: 3
-        }, 8, ["grid-size", "tile-height", "tiles"])) : (d(), b(p, {
+        }, 8, ["grid-size", "tile-height", "tiles"])) : (d(), v(p, {
           key: 0,
           appearance: "danger"
         }, {
-          default: _(() => [
-            U(O(c(n).t("renderer.noQueryBridge")), 1)
+          default: b(() => [
+            G(F(l(n).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), nr = /* @__PURE__ */ P(wt, [["__scopeId", "data-v-26130807"]]), ar = [
+}), ir = /* @__PURE__ */ L(Ot, [["__scopeId", "data-v-26130807"]]), sr = [
   "horizontal_bar",
   "vertical_bar",
   "gauge",
@@ -728,9 +729,9 @@ const w = {
   "golden_signals",
   "top_n",
   "slottable"
-], V = {
+], M = {
   type: "string"
-}, z = {
+}, $ = {
   type: "string"
 }, de = {
   type: "boolean"
@@ -742,7 +743,7 @@ const w = {
   additionalProperties: {
     type: "string"
   }
-}, Ot = {
+}, Ft = {
   type: "object",
   properties: {
     type: {
@@ -755,7 +756,7 @@ const w = {
   },
   required: ["type", "id"],
   additionalProperties: !1
-}, Ft = {
+}, Pt = {
   type: "object",
   properties: {
     type: {
@@ -766,13 +767,13 @@ const w = {
       type: "boolean"
     },
     chartDatasetColors: pe,
-    syntheticsDataKey: V,
-    chartTitle: z,
+    syntheticsDataKey: M,
+    chartTitle: $,
     allowCsvExport: de
   },
   required: ["type"],
   additionalProperties: !1
-}, Pt = {
+}, Lt = {
   type: "object",
   properties: {
     type: {
@@ -789,13 +790,13 @@ const w = {
       }
     },
     chartDatasetColors: pe,
-    syntheticsDataKey: V,
-    chartTitle: z,
+    syntheticsDataKey: M,
+    chartTitle: $,
     allowCsvExport: de
   },
   required: ["type"],
   additionalProperties: !1
-}, Lt = {
+}, Nt = {
   type: "object",
   properties: {
     type: {
@@ -812,16 +813,16 @@ const w = {
     numerator: {
       type: "number"
     },
-    syntheticsDataKey: V,
-    chartTitle: z
+    syntheticsDataKey: M,
+    chartTitle: $
   },
   required: ["type"],
   additionalProperties: !1
-}, Nt = {
+}, jt = {
   type: "object",
   properties: {
-    chartTitle: z,
-    syntheticsDataKey: V,
+    chartTitle: $,
+    syntheticsDataKey: M,
     type: {
       type: "string",
       enum: ["top_n"]
@@ -835,10 +836,10 @@ const w = {
   },
   required: ["type"],
   additionalProperties: !1
-}, jt = {
+}, zt = {
   type: "object",
   properties: {
-    chartTitle: z,
+    chartTitle: $,
     type: {
       type: "string",
       enum: ["golden_signals"]
@@ -855,7 +856,7 @@ const w = {
   },
   required: ["type"],
   additionalProperties: !1
-}, zt = {
+}, $t = {
   type: "object",
   properties: {
     tz: {
@@ -870,7 +871,7 @@ const w = {
     },
     time_range: {
       type: "string",
-      enum: Me,
+      enum: Ue,
       default: "1h"
     }
   },
@@ -879,7 +880,7 @@ const w = {
     "time_range"
   ],
   additionalProperties: !1
-}, $t = {
+}, Kt = {
   type: "object",
   description: "A duration representing an exact start and end time.",
   properties: {
@@ -905,18 +906,18 @@ const w = {
     "end"
   ],
   additionalProperties: !1
-}, Q = {
+}, J = {
   granularity: {
     type: "string",
     description: 'Force time grouping into buckets of this duration. Only has an effect if "time" is in the "dimensions" list.',
-    enum: Oe
+    enum: Fe
   },
   time_range: {
     type: "object",
     description: "The time range to query.",
     anyOf: [
-      zt,
-      $t
+      $t,
+      Kt
     ],
     default: {
       type: "relative",
@@ -929,14 +930,14 @@ const w = {
   meta: {
     type: "object"
   }
-}, J = (e) => ({
+}, Z = (e) => ({
   type: "array",
   description: "List of aggregated metrics to collect across the requested time span.",
   items: {
     type: "string",
     enum: e
   }
-}), Z = (e) => ({
+}), W = (e) => ({
   type: "array",
   description: "List of attributes or entity types to group by.",
   minItems: 0,
@@ -945,7 +946,7 @@ const w = {
     type: "string",
     enum: e
   }
-}), W = (e) => ({
+}), Y = (e) => ({
   type: "array",
   description: "A list of filters to apply to the query.",
   items: {
@@ -958,7 +959,7 @@ const w = {
       },
       type: {
         type: "string",
-        enum: Fe
+        enum: Pe
       },
       values: {
         type: "array",
@@ -974,7 +975,7 @@ const w = {
     ],
     additionalProperties: !1
   }
-}), Kt = {
+}), Bt = {
   type: "object",
   description: "A query to launch at the advanced explore API",
   properties: {
@@ -984,14 +985,14 @@ const w = {
         "advanced"
       ]
     },
-    metrics: J(Pe),
-    dimensions: Z(Le),
-    filters: W(Ne),
-    ...Q
+    metrics: Z(Le),
+    dimensions: W(Ne),
+    filters: Y(je),
+    ...J
   },
   required: ["datasource"],
   additionalProperties: !1
-}, Bt = {
+}, Vt = {
   type: "object",
   description: "A query to launch at the basic explore API",
   properties: {
@@ -1001,14 +1002,14 @@ const w = {
         "basic"
       ]
     },
-    metrics: J(je),
-    dimensions: Z(ze),
-    filters: W($e),
-    ...Q
+    metrics: Z(ze),
+    dimensions: W($e),
+    filters: Y(Ke),
+    ...J
   },
   required: ["datasource"],
   additionalProperties: !1
-}, Vt = {
+}, Mt = {
   type: "object",
   description: "A query to launch at the AI explore API",
   properties: {
@@ -1018,26 +1019,26 @@ const w = {
         "ai"
       ]
     },
-    metrics: J(Ke),
-    dimensions: Z(Be),
-    filters: W(Ve),
-    ...Q
+    metrics: Z(Be),
+    dimensions: W(Ve),
+    filters: Y(Me),
+    ...J
   },
   required: ["datasource"],
   additionalProperties: !1
-}, Mt = {
-  anyOf: [Kt, Bt, Vt]
 }, Ut = {
+  anyOf: [Bt, Vt, Mt]
+}, Gt = {
   type: "object",
   properties: {
-    query: Mt,
+    query: Ut,
     chart: {
-      anyOf: [Ft, Lt, Pt, jt, Nt, Ot]
+      anyOf: [Pt, Nt, Lt, zt, jt, Ft]
     }
   },
   required: ["query", "chart"],
   additionalProperties: !1
-}, Gt = {
+}, Ht = {
   type: "object",
   properties: {
     position: {
@@ -1074,24 +1075,24 @@ const w = {
   },
   required: ["position", "size"],
   additionalProperties: !1
-}, Ht = {
+}, Qt = {
   type: "object",
   properties: {
-    definition: Ut,
-    layout: Gt
+    definition: Gt,
+    layout: Ht
   },
   required: ["definition", "layout"],
   additionalProperties: !1
-}, ir = {
+}, cr = {
   type: "object",
   properties: {
     tiles: {
       type: "array",
-      items: Ht
+      items: Qt
     },
     tileHeight: {
       type: "number",
-      description: `Height of each tile in pixels. Default: ${B}`
+      description: `Height of each tile in pixels. Default: ${V}`
     },
     gridSize: {
       type: "object",
@@ -1112,27 +1113,27 @@ const w = {
   additionalProperties: !1
 };
 export {
-  at as CP_ID_TOKEN,
-  B as DEFAULT_TILE_HEIGHT,
-  st as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  nr as DashboardRenderer,
+  it as CP_ID_TOKEN,
+  V as DEFAULT_TILE_HEIGHT,
+  ct as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  ir as DashboardRenderer,
   ee as ENTITY_ID_TOKEN,
-  Dt as GridLayout,
-  j as INJECT_QUERY_PROVIDER,
-  it as TIMEFRAME_TOKEN,
-  Vt as aiQuerySchema,
-  Ft as barChartSchema,
-  Bt as basicQuerySchema,
-  ir as dashboardConfigSchema,
-  ar as dashboardTileTypes,
-  Kt as exploreV4QuerySchema,
-  Lt as gaugeChartSchema,
-  jt as metricCardSchema,
-  Ot as slottableSchema,
-  Ht as tileConfigSchema,
-  Ut as tileDefinitionSchema,
-  Gt as tileLayoutSchema,
-  Pt as timeseriesChartSchema,
-  Nt as topNTableSchema,
-  Mt as validDashboardQuery
+  kt as GridLayout,
+  z as INJECT_QUERY_PROVIDER,
+  st as TIMEFRAME_TOKEN,
+  Mt as aiQuerySchema,
+  Pt as barChartSchema,
+  Vt as basicQuerySchema,
+  cr as dashboardConfigSchema,
+  sr as dashboardTileTypes,
+  Bt as exploreV4QuerySchema,
+  Nt as gaugeChartSchema,
+  zt as metricCardSchema,
+  Ft as slottableSchema,
+  Qt as tileConfigSchema,
+  Gt as tileDefinitionSchema,
+  Ht as tileLayoutSchema,
+  Lt as timeseriesChartSchema,
+  jt as topNTableSchema,
+  Ut as validDashboardQuery
 };