@kong-ui-public/dashboard-renderer 0.5.10 → 0.6.0

package/dist/dashboard-renderer.es.js

@@ -1,13 +1,14 @@
-import { ref as E, watchEffect as Z, defineComponent as f, inject as G, onUnmounted as H, computed as u, resolveComponent as z, unref as m, openBlock as p, createBlock as g, withCtx as S, createTextVNode as B, toDisplayString as U, renderSlot as K, createCommentVNode as F, useCssVars as k, createElementVNode as N, createVNode as O, createElementBlock as C, resolveDynamicComponent as X, normalizeProps as ee, mergeProps as te, onMounted as re, Fragment as oe, renderList as ae, normalizeClass as ne, normalizeStyle as V } from "vue";
-import { ChartMetricDisplay as ie, ChartTypesSimple as se, SimpleChart as ce, ChartTypes as P, AnalyticsChart as M } from "@kong-ui-public/analytics-chart";
-import pe from "swrv";
+import { ref as E, watchEffect as X, defineComponent as v, inject as V, onUnmounted as B, computed as u, resolveComponent as z, unref as y, openBlock as c, createBlock as _, withCtx as b, createTextVNode as H, toDisplayString as U, renderSlot as K, createCommentVNode as F, useCssVars as O, createElementVNode as L, createVNode as w, normalizeProps as M, guardReactiveProps as ee, createElementBlock as C, resolveDynamicComponent as te, mergeProps as re, onMounted as oe, Fragment as ne, renderList as ae, normalizeClass as se, normalizeStyle as G } from "vue";
+import { ChartMetricDisplay as ie, ChartTypesSimple as ce, SimpleChart as pe, ChartTypes as P, AnalyticsChart as Q } from "@kong-ui-public/analytics-chart";
+import le from "swrv";
 import "axios";
-import { createI18n as le, i18nTComponent as ue } from "@kong-ui-public/i18n";
-const L = 170, Q = "analytics-query-provider";
-var y = /* @__PURE__ */ ((e) => (e.HorizontalBar = "horizontal_bar", e.VerticalBar = "vertical_bar", e.Gauge = "gauge", e.TimeseriesLine = "timeseries_line", e))(y || {});
+import { createI18n as ue, i18nTComponent as de } from "@kong-ui-public/i18n";
+import { MetricsProviderInternal as ye, MetricsConsumer as he } from "@kong-ui-public/analytics-metric-provider";
+const N = 170, W = "analytics-query-provider";
+var d = /* @__PURE__ */ ((e) => (e.HorizontalBar = "horizontal_bar", e.VerticalBar = "vertical_bar", e.Gauge = "gauge", e.TimeseriesLine = "timeseries_line", e.GoldenSignals = "golden_signals", e))(d || {});
 const j = {
   type: "string"
-}, W = {
+}, Y = {
   type: ["object", "array"],
   items: {
     type: "string"
@@ -15,7 +16,7 @@ const j = {
   additionalProperties: {
     type: "string"
   }
-}, de = {
+}, _e = {
   type: "object",
   properties: {
     type: {
@@ -32,12 +33,12 @@ const j = {
     showAnnotations: {
       type: "boolean"
     },
-    chartDatasetColors: W,
+    chartDatasetColors: Y,
     syntheticsDataKey: j
   },
   required: ["type"],
   additionalProperties: !1
-}, ye = {
+}, me = {
   type: "object",
   properties: {
     type: {
@@ -53,12 +54,12 @@ const j = {
     fill: {
       type: "boolean"
     },
-    chartDatasetColors: W,
+    chartDatasetColors: Y,
     syntheticsDataKey: j
   },
   required: ["type"],
   additionalProperties: !1
-}, he = {
+}, ge = {
   type: "object",
   properties: {
     type: {
@@ -82,7 +83,25 @@ const j = {
   },
   required: ["type"],
   additionalProperties: !1
-}, _e = {
+}, ve = {
+  type: "object",
+  properties: {
+    type: {
+      type: "string",
+      enum: [
+        "golden_signals"
+        /* GoldenSignals */
+      ]
+    },
+    longCardTitles: {
+      type: "boolean"
+    },
+    description: {
+      type: "string"
+    }
+  },
+  required: ["type"]
+}, fe = {
   type: "object",
   description: "A filter that specifies which data to include in the query",
   properties: {
@@ -123,7 +142,7 @@ const j = {
     "type",
     "values"
   ]
-}, me = {
+}, be = {
   type: "object",
   properties: {
     tz: {
@@ -158,7 +177,7 @@ const j = {
     "type",
     "time_range"
   ]
-}, ge = {
+}, qe = {
   type: "object",
   description: "A duration representing an exact start and end time.",
   properties: {
@@ -182,7 +201,7 @@ const j = {
   required: [
     "type"
   ]
-}, ve = {
+}, Se = {
   type: "object",
   description: "A query to launch at the API",
   properties: {
@@ -243,7 +262,7 @@ const j = {
     filters: {
       type: "array",
       description: "A list of filters to apply to the query.",
-      items: _e
+      items: fe
     },
     granularity_ms: {
       type: "number",
@@ -253,8 +272,8 @@ const j = {
     time_range: {
       description: "The time range to query.",
       oneOf: [
-        me,
-        ge
+        be,
+        qe
       ],
       default: {
         type: "relative",
@@ -265,17 +284,17 @@ const j = {
       type: "object"
     }
   }
-}, fe = {
+}, Re = {
   type: "object",
   properties: {
-    query: ve,
+    query: Se,
     chart: {
-      oneOf: [de, he, ye]
+      oneOf: [_e, ge, me, ve]
     }
   },
   required: ["query", "chart"],
   additionalProperties: !1
-}, be = {
+}, Ae = {
   type: "object",
   properties: {
     position: {
@@ -309,24 +328,24 @@ const j = {
   },
   required: ["position", "size"],
   additionalProperties: !1
-}, qe = {
+}, Ce = {
   type: "object",
   properties: {
-    definition: fe,
-    layout: be
+    definition: Re,
+    layout: Ae
   },
   required: ["definition", "layout"],
   additionalProperties: !1
-}, Qe = {
+}, et = {
   type: "object",
   properties: {
     tiles: {
       type: "array",
-      items: qe
+      items: Ce
     },
     tileHeight: {
       type: "number",
-      description: `Height of each tile in pixels. Default: ${L}`
+      description: `Height of each tile in pixels. Default: ${N}`
     },
     gridSize: {
       type: "object",
@@ -346,20 +365,20 @@ const j = {
   required: ["tiles", "gridSize"],
   additionalProperties: !1
 };
-var Y = /* @__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))(Y || {});
-const Se = (e) => {
-  var t, o, a, r, n;
+var J = /* @__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))(J || {});
+const Ee = (e) => {
+  var t, o, n, r, a;
   return e ? !!// TODO: revisit: currently only the first check ever matters?
-  ((t = Object.keys(e)) != null && t.length || (o = e.data) != null && o.length || (r = (a = e.data) == null ? void 0 : a.data) != null && r.length || !((n = e.data) != null && n.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
+  ((t = Object.keys(e)) != null && t.length || (o = e.data) != null && o.length || (r = (n = e.data) == null ? void 0 : n.data) != null && r.length || !((a = e.data) != null && a.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
 };
-function Ae(e = E({}), t, o, a = Se) {
+function we(e = E({}), t, o, n = Ee) {
   const r = E(
     "PENDING"
     /* PENDING */
   );
-  return Z(() => {
-    const n = a(e.value);
-    if (e.value && n && o.value) {
+  return X(() => {
+    const a = n(e.value);
+    if (e.value && a && o.value) {
       r.value = "VALIDATING_HAS_DATA";
       return;
     }
@@ -375,7 +394,7 @@ function Ae(e = E({}), t, o, a = Se) {
       r.value = "PENDING";
       return;
     }
-    if (e.value && !t.value && n) {
+    if (e.value && !t.value && a) {
       r.value = "SUCCESS_HAS_DATA";
       return;
     }
@@ -386,28 +405,28 @@ function Ae(e = E({}), t, o, a = Se) {
     e.value === void 0 && t && (r.value = "ERROR");
   }), {
     state: r,
-    swrvState: Y
+    swrvState: J
   };
 }
-const Re = {
+const Ie = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard."
-}, Ce = {
+}, Te = {
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
-}, Ee = {
-  renderer: Re,
-  queryDataProvider: Ce
+}, De = {
+  renderer: Ie,
+  queryDataProvider: Te
 };
-function we() {
-  const e = le("en-us", Ee);
+function ke() {
+  const e = ue("en-us", De);
   return {
     i18n: e,
-    i18nT: ue(e)
+    i18nT: de(e)
     // Translation component <i18n-t>
   };
 }
-const J = {
-  useI18n: we
-}, $ = /* @__PURE__ */ f({
+const Z = {
+  useI18n: ke
+}, $ = /* @__PURE__ */ v({
   __name: "QueryDataProvider",
   props: {
     query: {},
@@ -415,43 +434,43 @@ const J = {
   },
   emits: ["queryComplete"],
   setup(e, { emit: t }) {
-    const o = e, a = t, { i18n: r } = J.useI18n(), n = G(Q), c = () => o.queryReady && n ? JSON.stringify(o.query) : null, v = new AbortController();
-    H(() => {
-      v.abort();
+    const o = e, n = t, { i18n: r } = Z.useI18n(), a = V(W), p = () => o.queryReady && a ? JSON.stringify(o.query) : null, f = new AbortController();
+    B(() => {
+      f.abort();
     });
-    const { data: h, error: A, isValidating: s } = pe(c, async () => {
-      var b, R, q, T;
+    const { data: m, error: R, isValidating: i } = le(p, async () => {
+      var q, A, S, k;
       try {
-        return n == null ? void 0 : n.queryFn(o.query, v);
-      } catch (d) {
-        _.value = ((R = (b = d == null ? void 0 : d.response) == null ? void 0 : b.data) == null ? void 0 : R.message) === "Range not allowed for this tier" ? r.t("queryDataProvider.timeRangeExceeded") : ((T = (q = d == null ? void 0 : d.response) == null ? void 0 : q.data) == null ? void 0 : T.message) || (d == null ? void 0 : d.message);
+        return a == null ? void 0 : a.queryFn(o.query, f);
+      } catch (h) {
+        g.value = ((A = (q = h == null ? void 0 : h.response) == null ? void 0 : q.data) == null ? void 0 : A.message) === "Range not allowed for this tier" ? r.t("queryDataProvider.timeRangeExceeded") : ((k = (S = h == null ? void 0 : h.response) == null ? void 0 : S.data) == null ? void 0 : k.message) || (h == null ? void 0 : h.message);
       } finally {
-        a("queryComplete");
+        n("queryComplete");
       }
-    }), { state: i, swrvState: l } = Ae(h, A, s), _ = E(null), I = u(() => i.value === l.ERROR || !!_.value), D = u(() => !o.queryReady || i.value === l.PENDING);
-    return (b, R) => {
-      const q = z("KSkeleton"), T = z("KEmptyState");
-      return D.value || !m(h) && !I.value ? (p(), g(q, {
+    }), { state: s, swrvState: l } = we(m, R, i), g = E(null), T = u(() => s.value === l.ERROR || !!g.value), D = u(() => !o.queryReady || s.value === l.PENDING);
+    return (q, A) => {
+      const S = z("KSkeleton"), k = z("KEmptyState");
+      return D.value || !y(m) && !T.value ? (c(), _(S, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : I.value ? (p(), g(T, {
+      })) : T.value ? (c(), _(k, {
         key: 1,
         "cta-is-hidden": "",
         "data-testid": "chart-empty-state",
         "is-error": ""
       }, {
-        message: S(() => [
-          B(U(_.value), 1)
+        message: b(() => [
+          H(U(g.value), 1)
         ]),
         _: 1
-      })) : m(h) ? K(b.$slots, "default", {
+      })) : y(m) ? K(q.$slots, "default", {
         key: 2,
-        data: m(h)
+        data: y(m)
       }) : F("", !0);
     };
   }
-}), Ie = { class: "analytics-chart" }, De = /* @__PURE__ */ f({
+}), Oe = { class: "analytics-chart" }, ze = /* @__PURE__ */ v({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -460,24 +479,24 @@ const J = {
     height: {}
   },
   setup(e) {
-    k((r) => ({
+    O((r) => ({
       "134a876f": `${r.height}px`
     }));
     const t = e, o = {
-      [y.Gauge]: se.GAUGE
-    }, a = u(() => ({
+      [d.Gauge]: ce.GAUGE
+    }, n = u(() => ({
       ...t.chartOptions,
       type: o[t.chartOptions.type]
     }));
-    return (r, n) => (p(), g($, {
+    return (r, a) => (c(), _($, {
       query: r.query,
       "query-ready": r.queryReady
     }, {
-      default: S(({ data: c }) => [
-        N("div", Ie, [
-          O(m(ce), {
-            "chart-data": c,
-            "chart-options": a.value,
+      default: b(({ data: p }) => [
+        L("div", Oe, [
+          w(y(pe), {
+            "chart-data": p,
+            "chart-options": n.value,
             "synthetics-data-key": r.chartOptions.syntheticsDataKey
           }, null, 8, ["chart-data", "chart-options", "synthetics-data-key"])
         ])
@@ -485,12 +504,12 @@ const J = {
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), w = (e, t) => {
+}), I = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [a, r] of t)
-    o[a] = r;
+  for (const [n, r] of t)
+    o[n] = r;
   return o;
-}, Te = /* @__PURE__ */ w(De, [["__scopeId", "data-v-ec989cc0"]]), ke = { class: "analytics-chart" }, Oe = /* @__PURE__ */ f({
+}, Pe = /* @__PURE__ */ I(ze, [["__scopeId", "data-v-ec989cc0"]]), Le = { class: "analytics-chart" }, Ne = /* @__PURE__ */ v({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -499,26 +518,26 @@ const J = {
     height: {}
   },
   setup(e) {
-    k((r) => ({
+    O((r) => ({
       "381b03f2": `${r.height}px`
     }));
     const t = e, o = {
-      [y.HorizontalBar]: P.HORIZONTAL_BAR,
-      [y.VerticalBar]: P.VERTICAL_BAR
-    }, a = u(() => ({
+      [d.HorizontalBar]: P.HORIZONTAL_BAR,
+      [d.VerticalBar]: P.VERTICAL_BAR
+    }, n = u(() => ({
       type: o[t.chartOptions.type],
       stacked: t.chartOptions.stacked,
       chartDatasetColors: t.chartOptions.chartDatasetColors
     }));
-    return (r, n) => (p(), g($, {
+    return (r, a) => (c(), _($, {
       query: r.query,
       "query-ready": r.queryReady
     }, {
-      default: S(({ data: c }) => [
-        N("div", ke, [
-          O(m(M), {
-            "chart-data": c,
-            "chart-options": a.value,
+      default: b(({ data: p }) => [
+        L("div", Le, [
+          w(y(Q), {
+            "chart-data": p,
+            "chart-options": n.value,
             "legend-position": "bottom",
             "show-annotations": r.chartOptions.showAnnotations,
             "tooltip-title": ""
@@ -528,7 +547,7 @@ const J = {
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), x = /* @__PURE__ */ w(Oe, [["__scopeId", "data-v-1b9ab912"]]), ze = { class: "analytics-chart" }, Pe = /* @__PURE__ */ f({
+}), x = /* @__PURE__ */ I(Ne, [["__scopeId", "data-v-1b9ab912"]]), je = { class: "analytics-chart" }, $e = /* @__PURE__ */ v({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -537,27 +556,27 @@ const J = {
     height: {}
   },
   setup(e) {
-    k((r) => ({
+    O((r) => ({
       "01f81c18": `${r.height}px`
     }));
     const t = e, o = {
-      [y.TimeseriesLine]: P.TIMESERIES_LINE
+      [d.TimeseriesLine]: P.TIMESERIES_LINE
       // TODO: Timeseries bar
-    }, a = u(() => ({
+    }, n = u(() => ({
       type: o[t.chartOptions.type],
       fill: t.chartOptions.fill,
       stacked: t.chartOptions.stacked,
       chartDatasetColors: t.chartOptions.chartDatasetColors
     }));
-    return (r, n) => (p(), g($, {
+    return (r, a) => (c(), _($, {
       query: r.query,
       "query-ready": r.queryReady
     }, {
-      default: S(({ data: c }) => [
-        N("div", ze, [
-          O(m(M), {
-            "chart-data": c,
-            "chart-options": a.value,
+      default: b(({ data: p }) => [
+        L("div", je, [
+          w(y(Q), {
+            "chart-data": p,
+            "chart-options": n.value,
             "legend-position": "bottom",
             "tooltip-title": ""
           }, null, 8, ["chart-data", "chart-options"])
@@ -566,26 +585,42 @@ const J = {
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), Ne = /* @__PURE__ */ w(Pe, [["__scopeId", "data-v-efe3a03d"]]), Le = { class: "tile-boundary" }, je = /* @__PURE__ */ f({
+}), Ge = /* @__PURE__ */ I($e, [["__scopeId", "data-v-efe3a03d"]]), xe = /* @__PURE__ */ v({
+  __name: "GoldenSignalsRenderer",
+  props: {
+    query: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {}
+  },
+  setup(e) {
+    const t = e, o = u(() => ({
+      longCardTitles: t.chartOptions.longCardTitles,
+      description: t.chartOptions.description,
+      hasTrendAccess: !0,
+      refreshInterval: 0
+    }));
+    return (n, r) => (c(), _(y(ye), M(ee(o.value)), {
+      default: b(() => [
+        w(y(he))
+      ]),
+      _: 1
+    }, 16));
+  }
+}), Ve = { class: "tile-boundary" }, Be = /* @__PURE__ */ v({
   __name: "DashboardTile",
   props: {
-    definition: {
-      type: Object,
-      required: !0
-    },
-    height: {
-      type: Number,
-      required: !1,
-      default: () => L
-    }
+    definition: {},
+    height: { default: N }
   },
   setup(e) {
     const t = e, o = {
-      [y.TimeseriesLine]: Ne,
-      [y.HorizontalBar]: x,
-      [y.VerticalBar]: x,
-      [y.Gauge]: Te
-    }, a = u(() => ({
+      [d.TimeseriesLine]: Ge,
+      [d.HorizontalBar]: x,
+      [d.VerticalBar]: x,
+      [d.Gauge]: Pe,
+      [d.GoldenSignals]: xe
+    }, n = u(() => ({
       component: o[t.definition.chart.type],
       rendererProps: {
         query: t.definition.query,
@@ -595,11 +630,11 @@ const J = {
         height: t.height
       }
     }));
-    return (r, n) => (p(), C("div", Le, [
-      a.value ? (p(), g(X(a.value.component), ee(te({ key: 0 }, a.value.rendererProps)), null, 16)) : F("", !0)
+    return (r, a) => (c(), C("div", Ve, [
+      n.value ? (c(), _(te(n.value.component), M(re({ key: 0 }, n.value.rendererProps)), null, 16)) : F("", !0)
     ]));
   }
-}), $e = "20px", Ve = /* @__PURE__ */ f({
+}), He = "20px", Ue = /* @__PURE__ */ v({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -609,7 +644,7 @@ const J = {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => L
+      default: () => N
     },
     tiles: {
       type: Array,
@@ -617,117 +652,118 @@ const J = {
     }
   },
   setup(e) {
-    k((s) => ({
-      bbf5361e: `${A.value}px`
+    O((i) => ({
+      bbf5361e: `${R.value}px`
     }));
-    const t = parseInt($e), o = e, a = E(null), r = E(0), n = new ResizeObserver((s) => {
-      r.value = s[0].contentRect.width;
+    const t = parseInt(He), o = e, n = E(null), r = E(0), a = new ResizeObserver((i) => {
+      r.value = i[0].contentRect.width;
     });
-    re(() => {
-      a.value && n.observe(a.value);
-    }), H(() => {
-      a.value && n.unobserve(a.value);
+    oe(() => {
+      n.value && a.observe(n.value);
+    }), B(() => {
+      n.value && a.unobserve(n.value);
     });
-    const c = u(() => r.value / o.gridSize.cols - t), v = u(() => {
-      const s = new Array(o.gridSize.rows).fill(0);
-      return o.tiles.forEach((i) => {
-        const l = i.layout.position.row;
-        s[l]++;
-      }), s;
-    }), h = u(() => {
-      const s = [];
-      return o.tiles.map((i, l) => {
-        const _ = i.layout.position.row;
-        s[_] || (s[_] = 0), s[_]++;
-        const I = s[_];
-        let D = i.layout.position.col * (c.value + t);
-        i.layout.position.col > 0 && (D += t / v.value[i.layout.position.row] * (I - 1));
-        const b = i.layout.position.row * (o.tileHeight + t), R = i.layout.size.cols * c.value + t * (i.layout.size.cols - 1) + t / v.value[i.layout.position.row] - 1, q = i.layout.size.rows * o.tileHeight + t * (i.layout.size.rows - 1);
+    const p = u(() => r.value / o.gridSize.cols - t), f = u(() => {
+      const i = new Array(o.gridSize.rows).fill(0);
+      return o.tiles.forEach((s) => {
+        const l = s.layout.position.row;
+        i[l]++;
+      }), i;
+    }), m = u(() => {
+      const i = [];
+      return o.tiles.map((s, l) => {
+        const g = s.layout.position.row;
+        i[g] || (i[g] = 0), i[g]++;
+        const T = i[g];
+        let D = s.layout.position.col * (p.value + t);
+        s.layout.position.col > 0 && (D += t / f.value[s.layout.position.row] * (T - 1));
+        const q = s.layout.position.row * (o.tileHeight + t), A = s.layout.size.cols * p.value + t * (s.layout.size.cols - 1) + t / f.value[s.layout.position.row] - 1, S = s.layout.size.rows * o.tileHeight + t * (s.layout.size.rows - 1);
         return {
           key: `tile-${l}`,
-          tile: i,
+          tile: s,
           style: {
-            transform: `translate(${D}px, ${b}px)`,
-            width: `${R}px`,
-            height: `${q}px`
+            transform: `translate(${D}px, ${q}px)`,
+            width: `${A}px`,
+            height: `${S}px`
           }
         };
       });
-    }), A = u(() => Math.max(...o.tiles.map((i) => i.layout.position.row + i.layout.size.rows)) * o.tileHeight + t * o.gridSize.rows);
-    return (s, i) => (p(), C("div", {
+    }), R = u(() => Math.max(...o.tiles.map((s) => s.layout.position.row + s.layout.size.rows)) * o.tileHeight + t * o.gridSize.rows);
+    return (i, s) => (c(), C("div", {
       ref_key: "gridContainer",
-      ref: a,
+      ref: n,
       class: "kong-ui-public-grid-layout"
     }, [
-      (p(!0), C(oe, null, ae(h.value, (l) => (p(), C("div", {
+      (c(!0), C(ne, null, ae(m.value, (l) => (c(), C("div", {
         key: l.key,
-        class: ne(["grid-cell", {
+        class: se(["grid-cell", {
           "empty-cell": !l.tile
         }]),
-        style: V(l.style)
+        style: G(l.style)
       }, [
-        K(s.$slots, "tile", {
-          style: V(l.style),
+        K(i.$slots, "tile", {
+          style: G(l.style),
           tile: l.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), xe = /* @__PURE__ */ w(Ve, [["__scopeId", "data-v-066610e8"]]), Ge = { class: "kong-ui-public-dashboard-renderer" }, He = /* @__PURE__ */ f({
+}), Ke = /* @__PURE__ */ I(Ue, [["__scopeId", "data-v-066610e8"]]), Fe = { class: "kong-ui-public-dashboard-renderer" }, Me = /* @__PURE__ */ v({
   __name: "DashboardRenderer",
   props: {
     context: {},
     config: {}
   },
   setup(e) {
-    const t = e, { i18n: o } = J.useI18n(), a = G(Q);
-    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 r = u(() => t.config.tiles.map((n, c) => ({
-      layout: n.layout,
-      meta: n.definition,
+    const t = e, { i18n: o } = Z.useI18n(), n = V(W);
+    n || (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 r = u(() => t.config.tiles.map((a, p) => ({
+      layout: a.layout,
+      meta: a.definition,
       // Add a unique key to each tile internally.
-      id: c
+      id: p
     })));
-    return (n, c) => {
-      const v = z("KAlert");
-      return p(), C("div", Ge, [
-        m(a) ? (p(), g(xe, {
+    return (a, p) => {
+      const f = z("KAlert");
+      return c(), C("div", Fe, [
+        y(n) ? (c(), _(Ke, {
           key: 1,
-          "grid-size": n.config.gridSize,
-          "tile-height": n.config.tileHeight,
+          "grid-size": a.config.gridSize,
+          "tile-height": a.config.tileHeight,
           tiles: r.value
         }, {
-          tile: S(({ tile: h, style: A }) => [
-            O(je, {
+          tile: b(({ tile: m, style: R }) => [
+            w(Be, {
               class: "tile-container",
-              definition: h.meta,
-              height: parseInt(A.height)
+              definition: m.meta,
+              height: parseInt(R.height)
             }, null, 8, ["definition", "height"])
           ]),
           _: 1
-        }, 8, ["grid-size", "tile-height", "tiles"])) : (p(), g(v, {
+        }, 8, ["grid-size", "tile-height", "tiles"])) : (c(), _(f, {
           key: 0,
           appearance: "danger"
         }, {
-          default: S(() => [
-            B(U(m(o).t("renderer.noQueryBridge")), 1)
+          default: b(() => [
+            H(U(y(o).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), We = /* @__PURE__ */ w(He, [["__scopeId", "data-v-e3197ec0"]]);
+}), tt = /* @__PURE__ */ I(Me, [["__scopeId", "data-v-e3197ec0"]]);
 export {
-  y as ChartTypes,
-  We as DashboardRenderer,
-  xe as GridLayout,
-  de as barChartSchema,
-  Qe as dashboardConfigSchema,
-  ve as exploreV4QuerySchema,
-  he as gaugeChartSchema,
-  qe as tileConfigSchema,
-  fe as tileDefinitionSchema,
-  be as tileLayoutSchema,
-  ye as timeseriesChartSchema
+  d as ChartTypes,
+  tt as DashboardRenderer,
+  Ke as GridLayout,
+  _e as barChartSchema,
+  et as dashboardConfigSchema,
+  Se as exploreV4QuerySchema,
+  ge as gaugeChartSchema,
+  ve as metricCardSchema,
+  Ce as tileConfigSchema,
+  Re as tileDefinitionSchema,
+  Ae as tileLayoutSchema,
+  me as timeseriesChartSchema
 };

package/dist/dashboard-renderer.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong-ui-public/analytics-chart"),require("swrv"),require("axios"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/analytics-chart","swrv","axios","@kong-ui-public/i18n"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-dashboard-renderer"]={},s.Vue,s["kong-ui-public-analytics-chart"],s.swrv,s.axios,s["kong-ui-public-i18n"]))})(this,function(s,e,h,G,ie,w){"use strict";const D="analytics-query-provider";var u=(t=>(t.HorizontalBar="horizontal_bar",t.VerticalBar="vertical_bar",t.Gauge="gauge",t.TimeseriesLine="timeseries_line",t))(u||{});const T={type:"string"},I={type:["object","array"],items:{type:"string"},additionalProperties:{type:"string"}},B={type:"object",properties:{type:{type:"string",enum:["horizontal_bar","vertical_bar"]},stacked:{type:"boolean"},showAnnotations:{type:"boolean"},chartDatasetColors:I,syntheticsDataKey:T},required:["type"],additionalProperties:!1},O={type:"object",properties:{type:{type:"string",enum:["timeseries_line"]},stacked:{type:"boolean"},fill:{type:"boolean"},chartDatasetColors:I,syntheticsDataKey:T},required:["type"],additionalProperties:!1},z={type:"object",properties:{type:{type:"string",enum:["gauge"]},metricDisplay:{type:"string",enum:Object.values(h.ChartMetricDisplay)},reverseDataset:{type:"boolean"},numerator:{type:"number"},syntheticsDataKey:T},required:["type"],additionalProperties:!1},L={type:"object",description:"A query to launch at the API",properties:{metrics:{type:"array",description:"List of aggregated metrics to collect across the requested time span.",items:{type:"string",enum:["request_count","request_per_minute","response_latency_p99","response_latency_p95","response_latency_p50","response_latency_average","upstream_latency_p99","upstream_latency_p95","upstream_latency_p50","upstream_latency_average","kong_latency_p99","kong_latency_p95","kong_latency_p50","kong_latency_average","response_size_p99","response_size_p95","response_size_p50","request_size_p99","request_size_p95","request_size_p50","request_size_average","response_size_average"]}},dimensions:{type:"array",description:"List of attributes or entity types to group by.",minItems:0,maxItems:2,items:{type:"string",enum:["api_product","api_product_version","application","consumer","control_plane","control_plane_group","data_plane_node","gateway_service","route","status_code","status_code_grouped","time"]}},filters:{type:"array",description:"A list of filters to apply to the query.",items:{type:"object",description:"A filter that specifies which data to include in the query",properties:{dimension:{type:"string",enum:["api_product","api_product_version","application","consumer","control_plane","control_plane_group","data_plane_node","gateway_service","route","status_code","status_code_grouped","time"]},type:{type:"string",enum:["in","not_in","selector"]},values:{type:"array",items:{type:"string"}}},required:["dimension","type","values"]}},granularity_ms:{type:"number",description:'Force time grouping into buckets of this duration in milliseconds. Only has an effect if "time" is in the "dimensions" list.',minimum:6e4},time_range:{description:"The time range to query.",oneOf:[{type:"object",properties:{tz:{type:"string",default:"Etc/UTC"},type:{type:"string",enum:["relative"]},time_range:{type:"string",enum:["15m","1h","6h","12h","24h","7d","30d","current_week","current_month","previous_week","previous_month"],default:"1h"}},required:["type","time_range"]},{type:"object",description:"A duration representing an exact start and end time.",properties:{tz:{type:"string",default:"Etc/UTC"},type:{type:"string",enum:["absolute"]},start:{type:"string"},end:{type:"string"}},required:["type"]}],default:{type:"relative",time_range:"1h"}},meta:{type:"object"}}},N={type:"object",properties:{query:L,chart:{oneOf:[B,z,O]}},required:["query","chart"],additionalProperties:!1},V={type:"object",properties:{position:{type:"object",properties:{col:{type:"number"},row:{type:"number"}},description:"Position of the tile in the grid.",required:["col","row"],additionalProperties:!1},size:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows the tile occupies.",required:["cols","rows"],additionalProperties:!1}},required:["position","size"],additionalProperties:!1},P={type:"object",properties:{definition:N,layout:V},required:["definition","layout"],additionalProperties:!1},v={type:"object",properties:{tiles:{type:"array",items:P},tileHeight:{type:"number",description:"Height of each tile in pixels. Default: 170"},gridSize:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows in the grid.",required:["cols","rows"],additionalProperties:!1}},required:["tiles","gridSize"],additionalProperties:!1};var j=(t=>(t.VALIDATING="VALIDATING",t.VALIDATING_HAS_DATA="VALIDATING_HAS_DATA",t.PENDING="PENDING",t.SUCCESS="SUCCESS",t.SUCCESS_HAS_DATA="SUCCESS_HAS_DATA",t.ERROR="ERROR",t.STALE_IF_ERROR="STALE_IF_ERROR",t))(j||{});const U=t=>{var r,n,i,o,a;return t?!!((r=Object.keys(t))!=null&&r.length||(n=t.data)!=null&&n.length||(o=(i=t.data)==null?void 0:i.data)!=null&&o.length||!((a=t.data)!=null&&a.data)&&typeof t.data=="object"&&Object.keys(t==null?void 0:t.data).length):!1};function F(t=e.ref({}),r,n,i=U){const o=e.ref("PENDING");return e.watchEffect(()=>{const a=i(t.value);if(t.value&&a&&n.value){o.value="VALIDATING_HAS_DATA";return}if(t.value&&n.value){o.value="VALIDATING";return}if(t.value&&r.value){o.value="STALE_IF_ERROR";return}if(t.value===void 0&&!r.value){o.value="PENDING";return}if(t.value&&!r.value&&a){o.value="SUCCESS_HAS_DATA";return}if(t.value&&!r.value){o.value="SUCCESS";return}t.value===void 0&&r&&(o.value="ERROR")}),{state:o,swrvState:j}}const K={renderer:{noQueryBridge:"No query bridge provided.  Unable to render dashboard."},queryDataProvider:{timeRangeExceeded:"The time range for this report is outside of your organization's data retention period"}};function M(){const t=w.createI18n("en-us",K);return{i18n:t,i18nT:w.i18nTComponent(t)}}const H={useI18n:M},R=e.defineComponent({__name:"QueryDataProvider",props:{query:{},queryReady:{type:Boolean}},emits:["queryComplete"],setup(t,{emit:r}){const n=t,i=r,{i18n:o}=H.useI18n(),a=e.inject(D),l=()=>n.queryReady&&a?JSON.stringify(n.query):null,g=new AbortController;e.onUnmounted(()=>{g.abort()});const{data:m,error:S,isValidating:p}=G(l,async()=>{var f,C,b,A;try{return a==null?void 0:a.queryFn(n.query,g)}catch(y){_.value=((C=(f=y==null?void 0:y.response)==null?void 0:f.data)==null?void 0:C.message)==="Range not allowed for this tier"?o.t("queryDataProvider.timeRangeExceeded"):((A=(b=y==null?void 0:y.response)==null?void 0:b.data)==null?void 0:A.message)||(y==null?void 0:y.message)}finally{i("queryComplete")}}),{state:c,swrvState:d}=F(m,S,p),_=e.ref(null),k=e.computed(()=>c.value===d.ERROR||!!_.value),E=e.computed(()=>!n.queryReady||c.value===d.PENDING);return(f,C)=>{const b=e.resolveComponent("KSkeleton"),A=e.resolveComponent("KEmptyState");return E.value||!e.unref(m)&&!k.value?(e.openBlock(),e.createBlock(b,{key:0,class:"chart-skeleton",type:"table"})):k.value?(e.openBlock(),e.createBlock(A,{key:1,"cta-is-hidden":"","data-testid":"chart-empty-state","is-error":""},{message:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(_.value),1)]),_:1})):e.unref(m)?e.renderSlot(f.$slots,"default",{key:2,data:e.unref(m)}):e.createCommentVNode("",!0)}}}),Q={class:"analytics-chart"},Y=e.defineComponent({__name:"SimpleChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(o=>({"134a876f":`${o.height}px`}));const r=t,n={[u.Gauge]:h.ChartTypesSimple.GAUGE},i=e.computed(()=>({...r.chartOptions,type:n[r.chartOptions.type]}));return(o,a)=>(e.openBlock(),e.createBlock(R,{query:o.query,"query-ready":o.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",Q,[e.createVNode(e.unref(h.SimpleChart),{"chart-data":l,"chart-options":i.value,"synthetics-data-key":o.chartOptions.syntheticsDataKey},null,8,["chart-data","chart-options","synthetics-data-key"])])]),_:1},8,["query","query-ready"]))}}),q=(t,r)=>{const n=t.__vccOpts||t;for(const[i,o]of r)n[i]=o;return n},J=q(Y,[["__scopeId","data-v-ec989cc0"]]),W={class:"analytics-chart"},$=q(e.defineComponent({__name:"BarChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(o=>({"381b03f2":`${o.height}px`}));const r=t,n={[u.HorizontalBar]:h.ChartTypes.HORIZONTAL_BAR,[u.VerticalBar]:h.ChartTypes.VERTICAL_BAR},i=e.computed(()=>({type:n[r.chartOptions.type],stacked:r.chartOptions.stacked,chartDatasetColors:r.chartOptions.chartDatasetColors}));return(o,a)=>(e.openBlock(),e.createBlock(R,{query:o.query,"query-ready":o.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",W,[e.createVNode(e.unref(h.AnalyticsChart),{"chart-data":l,"chart-options":i.value,"legend-position":"bottom","show-annotations":o.chartOptions.showAnnotations,"tooltip-title":""},null,8,["chart-data","chart-options","show-annotations"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-1b9ab912"]]),X={class:"analytics-chart"},Z=q(e.defineComponent({__name:"TimeseriesChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(o=>({"01f81c18":`${o.height}px`}));const r=t,n={[u.TimeseriesLine]:h.ChartTypes.TIMESERIES_LINE},i=e.computed(()=>({type:n[r.chartOptions.type],fill:r.chartOptions.fill,stacked:r.chartOptions.stacked,chartDatasetColors:r.chartOptions.chartDatasetColors}));return(o,a)=>(e.openBlock(),e.createBlock(R,{query:o.query,"query-ready":o.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",X,[e.createVNode(e.unref(h.AnalyticsChart),{"chart-data":l,"chart-options":i.value,"legend-position":"bottom","tooltip-title":""},null,8,["chart-data","chart-options"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-efe3a03d"]]),ee={class:"tile-boundary"},te=e.defineComponent({__name:"DashboardTile",props:{definition:{type:Object,required:!0},height:{type:Number,required:!1,default:()=>170}},setup(t){const r=t,n={[u.TimeseriesLine]:Z,[u.HorizontalBar]:$,[u.VerticalBar]:$,[u.Gauge]:J},i=e.computed(()=>({component:n[r.definition.chart.type],rendererProps:{query:r.definition.query,queryReady:!0,chartOptions:r.definition.chart,height:r.height}}));return(o,a)=>(e.openBlock(),e.createElementBlock("div",ee,[i.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value.component),e.normalizeProps(e.mergeProps({key:0},i.value.rendererProps)),null,16)):e.createCommentVNode("",!0)]))}}),re="20px",x=q(e.defineComponent({__name:"GridLayout",props:{gridSize:{type:Object,required:!0},tileHeight:{type:Number,required:!1,default:()=>170},tiles:{type:Array,required:!0}},setup(t){e.useCssVars(p=>({bbf5361e:`${S.value}px`}));const r=parseInt(re),n=t,i=e.ref(null),o=e.ref(0),a=new ResizeObserver(p=>{o.value=p[0].contentRect.width});e.onMounted(()=>{i.value&&a.observe(i.value)}),e.onUnmounted(()=>{i.value&&a.unobserve(i.value)});const l=e.computed(()=>o.value/n.gridSize.cols-r),g=e.computed(()=>{const p=new Array(n.gridSize.rows).fill(0);return n.tiles.forEach(c=>{const d=c.layout.position.row;p[d]++}),p}),m=e.computed(()=>{const p=[];return n.tiles.map((c,d)=>{const _=c.layout.position.row;p[_]||(p[_]=0),p[_]++;const k=p[_];let E=c.layout.position.col*(l.value+r);c.layout.position.col>0&&(E+=r/g.value[c.layout.position.row]*(k-1));const f=c.layout.position.row*(n.tileHeight+r),C=c.layout.size.cols*l.value+r*(c.layout.size.cols-1)+r/g.value[c.layout.position.row]-1,b=c.layout.size.rows*n.tileHeight+r*(c.layout.size.rows-1);return{key:`tile-${d}`,tile:c,style:{transform:`translate(${E}px, ${f}px)`,width:`${C}px`,height:`${b}px`}}})}),S=e.computed(()=>Math.max(...n.tiles.map(c=>c.layout.position.row+c.layout.size.rows))*n.tileHeight+r*n.gridSize.rows);return(p,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"gridContainer",ref:i,class:"kong-ui-public-grid-layout"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,d=>(e.openBlock(),e.createElementBlock("div",{key:d.key,class:e.normalizeClass(["grid-cell",{"empty-cell":!d.tile}]),style:e.normalizeStyle(d.style)},[e.renderSlot(p.$slots,"tile",{style:e.normalizeStyle(d.style),tile:d.tile},void 0,!0)],6))),128))],512))}}),[["__scopeId","data-v-066610e8"]]),oe={class:"kong-ui-public-dashboard-renderer"},ne=q(e.defineComponent({__name:"DashboardRenderer",props:{context:{},config:{}},setup(t){const r=t,{i18n:n}=H.useI18n(),i=e.inject(D);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 o=e.computed(()=>r.config.tiles.map((a,l)=>({layout:a.layout,meta:a.definition,id:l})));return(a,l)=>{const g=e.resolveComponent("KAlert");return e.openBlock(),e.createElementBlock("div",oe,[e.unref(i)?(e.openBlock(),e.createBlock(x,{key:1,"grid-size":a.config.gridSize,"tile-height":a.config.tileHeight,tiles:o.value},{tile:e.withCtx(({tile:m,style:S})=>[e.createVNode(te,{class:"tile-container",definition:m.meta,height:parseInt(S.height)},null,8,["definition","height"])]),_:1},8,["grid-size","tile-height","tiles"])):(e.openBlock(),e.createBlock(g,{key:0,appearance:"danger"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(n).t("renderer.noQueryBridge")),1)]),_:1}))])}}}),[["__scopeId","data-v-e3197ec0"]]);s.ChartTypes=u,s.DashboardRenderer=ne,s.GridLayout=x,s.barChartSchema=B,s.dashboardConfigSchema=v,s.exploreV4QuerySchema=L,s.gaugeChartSchema=z,s.tileConfigSchema=P,s.tileDefinitionSchema=N,s.tileLayoutSchema=V,s.timeseriesChartSchema=O,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong-ui-public/analytics-chart"),require("swrv"),require("axios"),require("@kong-ui-public/i18n"),require("@kong-ui-public/analytics-metric-provider")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/analytics-chart","swrv","axios","@kong-ui-public/i18n","@kong-ui-public/analytics-metric-provider"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a["kong-ui-public-dashboard-renderer"]={},a.Vue,a["kong-ui-public-analytics-chart"],a.swrv,a.axios,a["kong-ui-public-i18n"],a["kong-ui-public-analytics-metric-provider"]))})(this,function(a,e,h,v,ce,w,I){"use strict";const D="analytics-query-provider";var u=(t=>(t.HorizontalBar="horizontal_bar",t.VerticalBar="vertical_bar",t.Gauge="gauge",t.TimeseriesLine="timeseries_line",t.GoldenSignals="golden_signals",t))(u||{});const T={type:"string"},B={type:["object","array"],items:{type:"string"},additionalProperties:{type:"string"}},O={type:"object",properties:{type:{type:"string",enum:["horizontal_bar","vertical_bar"]},stacked:{type:"boolean"},showAnnotations:{type:"boolean"},chartDatasetColors:B,syntheticsDataKey:T},required:["type"],additionalProperties:!1},z={type:"object",properties:{type:{type:"string",enum:["timeseries_line"]},stacked:{type:"boolean"},fill:{type:"boolean"},chartDatasetColors:B,syntheticsDataKey:T},required:["type"],additionalProperties:!1},V={type:"object",properties:{type:{type:"string",enum:["gauge"]},metricDisplay:{type:"string",enum:Object.values(h.ChartMetricDisplay)},reverseDataset:{type:"boolean"},numerator:{type:"number"},syntheticsDataKey:T},required:["type"],additionalProperties:!1},L={type:"object",properties:{type:{type:"string",enum:["golden_signals"]},longCardTitles:{type:"boolean"},description:{type:"string"}},required:["type"]},N={type:"object",description:"A query to launch at the API",properties:{metrics:{type:"array",description:"List of aggregated metrics to collect across the requested time span.",items:{type:"string",enum:["request_count","request_per_minute","response_latency_p99","response_latency_p95","response_latency_p50","response_latency_average","upstream_latency_p99","upstream_latency_p95","upstream_latency_p50","upstream_latency_average","kong_latency_p99","kong_latency_p95","kong_latency_p50","kong_latency_average","response_size_p99","response_size_p95","response_size_p50","request_size_p99","request_size_p95","request_size_p50","request_size_average","response_size_average"]}},dimensions:{type:"array",description:"List of attributes or entity types to group by.",minItems:0,maxItems:2,items:{type:"string",enum:["api_product","api_product_version","application","consumer","control_plane","control_plane_group","data_plane_node","gateway_service","route","status_code","status_code_grouped","time"]}},filters:{type:"array",description:"A list of filters to apply to the query.",items:{type:"object",description:"A filter that specifies which data to include in the query",properties:{dimension:{type:"string",enum:["api_product","api_product_version","application","consumer","control_plane","control_plane_group","data_plane_node","gateway_service","route","status_code","status_code_grouped","time"]},type:{type:"string",enum:["in","not_in","selector"]},values:{type:"array",items:{type:"string"}}},required:["dimension","type","values"]}},granularity_ms:{type:"number",description:'Force time grouping into buckets of this duration in milliseconds. Only has an effect if "time" is in the "dimensions" list.',minimum:6e4},time_range:{description:"The time range to query.",oneOf:[{type:"object",properties:{tz:{type:"string",default:"Etc/UTC"},type:{type:"string",enum:["relative"]},time_range:{type:"string",enum:["15m","1h","6h","12h","24h","7d","30d","current_week","current_month","previous_week","previous_month"],default:"1h"}},required:["type","time_range"]},{type:"object",description:"A duration representing an exact start and end time.",properties:{tz:{type:"string",default:"Etc/UTC"},type:{type:"string",enum:["absolute"]},start:{type:"string"},end:{type:"string"}},required:["type"]}],default:{type:"relative",time_range:"1h"}},meta:{type:"object"}}},P={type:"object",properties:{query:N,chart:{oneOf:[O,V,z,L]}},required:["query","chart"],additionalProperties:!1},j={type:"object",properties:{position:{type:"object",properties:{col:{type:"number"},row:{type:"number"}},description:"Position of the tile in the grid.",required:["col","row"],additionalProperties:!1},size:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows the tile occupies.",required:["cols","rows"],additionalProperties:!1}},required:["position","size"],additionalProperties:!1},G={type:"object",properties:{definition:P,layout:j},required:["definition","layout"],additionalProperties:!1},F={type:"object",properties:{tiles:{type:"array",items:G},tileHeight:{type:"number",description:"Height of each tile in pixels. Default: 170"},gridSize:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows in the grid.",required:["cols","rows"],additionalProperties:!1}},required:["tiles","gridSize"],additionalProperties:!1};var $=(t=>(t.VALIDATING="VALIDATING",t.VALIDATING_HAS_DATA="VALIDATING_HAS_DATA",t.PENDING="PENDING",t.SUCCESS="SUCCESS",t.SUCCESS_HAS_DATA="SUCCESS_HAS_DATA",t.ERROR="ERROR",t.STALE_IF_ERROR="STALE_IF_ERROR",t))($||{});const K=t=>{var r,n,i,o,s;return t?!!((r=Object.keys(t))!=null&&r.length||(n=t.data)!=null&&n.length||(o=(i=t.data)==null?void 0:i.data)!=null&&o.length||!((s=t.data)!=null&&s.data)&&typeof t.data=="object"&&Object.keys(t==null?void 0:t.data).length):!1};function M(t=e.ref({}),r,n,i=K){const o=e.ref("PENDING");return e.watchEffect(()=>{const s=i(t.value);if(t.value&&s&&n.value){o.value="VALIDATING_HAS_DATA";return}if(t.value&&n.value){o.value="VALIDATING";return}if(t.value&&r.value){o.value="STALE_IF_ERROR";return}if(t.value===void 0&&!r.value){o.value="PENDING";return}if(t.value&&!r.value&&s){o.value="SUCCESS_HAS_DATA";return}if(t.value&&!r.value){o.value="SUCCESS";return}t.value===void 0&&r&&(o.value="ERROR")}),{state:o,swrvState:$}}const Q={renderer:{noQueryBridge:"No query bridge provided.  Unable to render dashboard."},queryDataProvider:{timeRangeExceeded:"The time range for this report is outside of your organization's data retention period"}};function Y(){const t=w.createI18n("en-us",Q);return{i18n:t,i18nT:w.i18nTComponent(t)}}const x={useI18n:Y},R=e.defineComponent({__name:"QueryDataProvider",props:{query:{},queryReady:{type:Boolean}},emits:["queryComplete"],setup(t,{emit:r}){const n=t,i=r,{i18n:o}=x.useI18n(),s=e.inject(D),l=()=>n.queryReady&&s?JSON.stringify(n.query):null,g=new AbortController;e.onUnmounted(()=>{g.abort()});const{data:m,error:S,isValidating:p}=v(l,async()=>{var f,C,b,E;try{return s==null?void 0:s.queryFn(n.query,g)}catch(y){_.value=((C=(f=y==null?void 0:y.response)==null?void 0:f.data)==null?void 0:C.message)==="Range not allowed for this tier"?o.t("queryDataProvider.timeRangeExceeded"):((E=(b=y==null?void 0:y.response)==null?void 0:b.data)==null?void 0:E.message)||(y==null?void 0:y.message)}finally{i("queryComplete")}}),{state:c,swrvState:d}=M(m,S,p),_=e.ref(null),k=e.computed(()=>c.value===d.ERROR||!!_.value),A=e.computed(()=>!n.queryReady||c.value===d.PENDING);return(f,C)=>{const b=e.resolveComponent("KSkeleton"),E=e.resolveComponent("KEmptyState");return A.value||!e.unref(m)&&!k.value?(e.openBlock(),e.createBlock(b,{key:0,class:"chart-skeleton",type:"table"})):k.value?(e.openBlock(),e.createBlock(E,{key:1,"cta-is-hidden":"","data-testid":"chart-empty-state","is-error":""},{message:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(_.value),1)]),_:1})):e.unref(m)?e.renderSlot(f.$slots,"default",{key:2,data:e.unref(m)}):e.createCommentVNode("",!0)}}}),J={class:"analytics-chart"},W=e.defineComponent({__name:"SimpleChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(o=>({"134a876f":`${o.height}px`}));const r=t,n={[u.Gauge]:h.ChartTypesSimple.GAUGE},i=e.computed(()=>({...r.chartOptions,type:n[r.chartOptions.type]}));return(o,s)=>(e.openBlock(),e.createBlock(R,{query:o.query,"query-ready":o.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",J,[e.createVNode(e.unref(h.SimpleChart),{"chart-data":l,"chart-options":i.value,"synthetics-data-key":o.chartOptions.syntheticsDataKey},null,8,["chart-data","chart-options","synthetics-data-key"])])]),_:1},8,["query","query-ready"]))}}),q=(t,r)=>{const n=t.__vccOpts||t;for(const[i,o]of r)n[i]=o;return n},X=q(W,[["__scopeId","data-v-ec989cc0"]]),Z={class:"analytics-chart"},H=q(e.defineComponent({__name:"BarChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(o=>({"381b03f2":`${o.height}px`}));const r=t,n={[u.HorizontalBar]:h.ChartTypes.HORIZONTAL_BAR,[u.VerticalBar]:h.ChartTypes.VERTICAL_BAR},i=e.computed(()=>({type:n[r.chartOptions.type],stacked:r.chartOptions.stacked,chartDatasetColors:r.chartOptions.chartDatasetColors}));return(o,s)=>(e.openBlock(),e.createBlock(R,{query:o.query,"query-ready":o.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",Z,[e.createVNode(e.unref(h.AnalyticsChart),{"chart-data":l,"chart-options":i.value,"legend-position":"bottom","show-annotations":o.chartOptions.showAnnotations,"tooltip-title":""},null,8,["chart-data","chart-options","show-annotations"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-1b9ab912"]]),ee={class:"analytics-chart"},te=q(e.defineComponent({__name:"TimeseriesChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(o=>({"01f81c18":`${o.height}px`}));const r=t,n={[u.TimeseriesLine]:h.ChartTypes.TIMESERIES_LINE},i=e.computed(()=>({type:n[r.chartOptions.type],fill:r.chartOptions.fill,stacked:r.chartOptions.stacked,chartDatasetColors:r.chartOptions.chartDatasetColors}));return(o,s)=>(e.openBlock(),e.createBlock(R,{query:o.query,"query-ready":o.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",ee,[e.createVNode(e.unref(h.AnalyticsChart),{"chart-data":l,"chart-options":i.value,"legend-position":"bottom","tooltip-title":""},null,8,["chart-data","chart-options"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-efe3a03d"]]),re=e.defineComponent({__name:"GoldenSignalsRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){const r=t,n=e.computed(()=>({longCardTitles:r.chartOptions.longCardTitles,description:r.chartOptions.description,hasTrendAccess:!0,refreshInterval:0}));return(i,o)=>(e.openBlock(),e.createBlock(e.unref(I.MetricsProviderInternal),e.normalizeProps(e.guardReactiveProps(n.value)),{default:e.withCtx(()=>[e.createVNode(e.unref(I.MetricsConsumer))]),_:1},16))}}),oe={class:"tile-boundary"},ne=e.defineComponent({__name:"DashboardTile",props:{definition:{},height:{default:170}},setup(t){const r=t,n={[u.TimeseriesLine]:te,[u.HorizontalBar]:H,[u.VerticalBar]:H,[u.Gauge]:X,[u.GoldenSignals]:re},i=e.computed(()=>({component:n[r.definition.chart.type],rendererProps:{query:r.definition.query,queryReady:!0,chartOptions:r.definition.chart,height:r.height}}));return(o,s)=>(e.openBlock(),e.createElementBlock("div",oe,[i.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value.component),e.normalizeProps(e.mergeProps({key:0},i.value.rendererProps)),null,16)):e.createCommentVNode("",!0)]))}}),ie="20px",U=q(e.defineComponent({__name:"GridLayout",props:{gridSize:{type:Object,required:!0},tileHeight:{type:Number,required:!1,default:()=>170},tiles:{type:Array,required:!0}},setup(t){e.useCssVars(p=>({bbf5361e:`${S.value}px`}));const r=parseInt(ie),n=t,i=e.ref(null),o=e.ref(0),s=new ResizeObserver(p=>{o.value=p[0].contentRect.width});e.onMounted(()=>{i.value&&s.observe(i.value)}),e.onUnmounted(()=>{i.value&&s.unobserve(i.value)});const l=e.computed(()=>o.value/n.gridSize.cols-r),g=e.computed(()=>{const p=new Array(n.gridSize.rows).fill(0);return n.tiles.forEach(c=>{const d=c.layout.position.row;p[d]++}),p}),m=e.computed(()=>{const p=[];return n.tiles.map((c,d)=>{const _=c.layout.position.row;p[_]||(p[_]=0),p[_]++;const k=p[_];let A=c.layout.position.col*(l.value+r);c.layout.position.col>0&&(A+=r/g.value[c.layout.position.row]*(k-1));const f=c.layout.position.row*(n.tileHeight+r),C=c.layout.size.cols*l.value+r*(c.layout.size.cols-1)+r/g.value[c.layout.position.row]-1,b=c.layout.size.rows*n.tileHeight+r*(c.layout.size.rows-1);return{key:`tile-${d}`,tile:c,style:{transform:`translate(${A}px, ${f}px)`,width:`${C}px`,height:`${b}px`}}})}),S=e.computed(()=>Math.max(...n.tiles.map(c=>c.layout.position.row+c.layout.size.rows))*n.tileHeight+r*n.gridSize.rows);return(p,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"gridContainer",ref:i,class:"kong-ui-public-grid-layout"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,d=>(e.openBlock(),e.createElementBlock("div",{key:d.key,class:e.normalizeClass(["grid-cell",{"empty-cell":!d.tile}]),style:e.normalizeStyle(d.style)},[e.renderSlot(p.$slots,"tile",{style:e.normalizeStyle(d.style),tile:d.tile},void 0,!0)],6))),128))],512))}}),[["__scopeId","data-v-066610e8"]]),ae={class:"kong-ui-public-dashboard-renderer"},se=q(e.defineComponent({__name:"DashboardRenderer",props:{context:{},config:{}},setup(t){const r=t,{i18n:n}=x.useI18n(),i=e.inject(D);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 o=e.computed(()=>r.config.tiles.map((s,l)=>({layout:s.layout,meta:s.definition,id:l})));return(s,l)=>{const g=e.resolveComponent("KAlert");return e.openBlock(),e.createElementBlock("div",ae,[e.unref(i)?(e.openBlock(),e.createBlock(U,{key:1,"grid-size":s.config.gridSize,"tile-height":s.config.tileHeight,tiles:o.value},{tile:e.withCtx(({tile:m,style:S})=>[e.createVNode(ne,{class:"tile-container",definition:m.meta,height:parseInt(S.height)},null,8,["definition","height"])]),_:1},8,["grid-size","tile-height","tiles"])):(e.openBlock(),e.createBlock(g,{key:0,appearance:"danger"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(n).t("renderer.noQueryBridge")),1)]),_:1}))])}}}),[["__scopeId","data-v-e3197ec0"]]);a.ChartTypes=u,a.DashboardRenderer=se,a.GridLayout=U,a.barChartSchema=O,a.dashboardConfigSchema=F,a.exploreV4QuerySchema=N,a.gaugeChartSchema=V,a.metricCardSchema=L,a.tileConfigSchema=G,a.tileDefinitionSchema=P,a.tileLayoutSchema=j,a.timeseriesChartSchema=z,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.locked[data-v-d8d2d0cd]{cursor:move}.tooltip-container[data-v-d8d2d0cd]{background-color:#fff;border-radius:3px;box-shadow:0 5px 15px #0000001f,0 5px 10px #0000003d;max-width:425px;min-width:250px;position:absolute;transition:all .2s cubic-bezier(.25,.8,.25,1);z-index:999}.tooltip-container .tooltip-title[data-v-d8d2d0cd]{border-bottom:1px solid rgba(0,0,0,.1);display:flex;flex-direction:column;margin:8px;min-height:24px;padding-bottom:8px}.tooltip-container .tooltip-title .title[data-v-d8d2d0cd]{font-size:16px;font-weight:600}.tooltip-container .tooltip-title .subtitle[data-v-d8d2d0cd]{font-size:14px;margin-top:8px}.tooltip-container .tooltip-title .drag-icon[data-v-d8d2d0cd]{margin-top:6px;position:absolute;right:0;top:0}ul.tooltip[data-v-d8d2d0cd]{list-style:none;margin:0;max-height:300px;min-width:250px;overflow-y:auto;padding-left:0;-ms-overflow-style:thin;scrollbar-color:#e0e4ea transparent;scrollbar-width:auto}ul.tooltip[data-v-d8d2d0cd] ::-webkit-scrollbar{width:8px}ul.tooltip[data-v-d8d2d0cd] ::-webkit-scrollbar-track{background:transparent}ul.tooltip[data-v-d8d2d0cd] ::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}ul.tooltip li[data-v-d8d2d0cd]{display:flex;font-size:14px;line-height:1;margin:8px}ul.tooltip li[data-v-d8d2d0cd]:last-child{padding-bottom:8px}ul.tooltip .display-label[data-v-d8d2d0cd]{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ul.tooltip .display-value[data-v-d8d2d0cd]{margin-left:auto;padding-left:8px;white-space:nowrap}ul.tooltip .tooltip-legend[data-v-d8d2d0cd]{display:inline-flex;flex-direction:row;height:15px;margin-right:8px;width:3px}.legend-container[data-v-6a4f1f3c]{display:flex;max-height:inherit;overflow-x:hidden;overflow-y:auto;padding-left:12px;-ms-overflow-style:thin;scrollbar-color:#e0e4ea transparent;scrollbar-width:auto}.legend-container[data-v-6a4f1f3c] ::-webkit-scrollbar{width:8px}.legend-container[data-v-6a4f1f3c] ::-webkit-scrollbar-track{background:transparent}.legend-container[data-v-6a4f1f3c] ::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.legend-container.vertical[data-v-6a4f1f3c]{flex-direction:column;max-height:90%;max-width:15%;min-width:10%}.legend-container.vertical .truncate-label[data-v-6a4f1f3c]{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 767px){.legend-container.vertical[data-v-6a4f1f3c]{column-gap:24px;display:grid;grid-template-columns:repeat(auto-fit,10ch);justify-content:center;max-height:12%;width:99%}.legend-container.vertical .sub-label[data-v-6a4f1f3c]{display:none}}.legend-container.horizontal[data-v-6a4f1f3c]{column-gap:24px;display:grid;justify-content:center;max-height:12%;width:99%}.legend-container.horizontal .truncate-label[data-v-6a4f1f3c]{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-container.horizontal li[data-v-6a4f1f3c]{margin-top:0}.legend-container.horizontal li .legend[data-v-6a4f1f3c]{margin-top:12px}.legend-container.horizontal li .label[data-v-6a4f1f3c]{line-height:28px}.legend-container li[data-v-6a4f1f3c]{align-items:start;cursor:pointer;display:flex;line-height:1;margin-top:16px}.legend-container li .legend[data-v-6a4f1f3c]{flex:0 0 14px;height:3px;margin-right:12px;margin-top:4px}.legend-container li .label[data-v-6a4f1f3c]{font-size:14px}.legend-container li .sub-label[data-v-6a4f1f3c]{font-size:12px;line-height:16px;word-break:none}.legend-container li .strike-through[data-v-6a4f1f3c]{text-decoration:line-through}.chart-parent[data-v-969f27ea]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-969f27ea]{flex-direction:column}.chart-parent.column .chart-container[data-v-969f27ea]{height:80%;width:100%}.chart-parent.legend-row[data-v-969f27ea]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-969f27ea]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-969f27ea]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-969f27ea]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-969f27ea]{position:relative}.chart-container[data-v-969f27ea]{overflow:auto;-ms-overflow-style:thin;scrollbar-color:#e0e4ea transparent;scrollbar-width:auto}.chart-container[data-v-969f27ea] ::-webkit-scrollbar{width:8px}.chart-container[data-v-969f27ea] ::-webkit-scrollbar-track{background:transparent}.chart-container[data-v-969f27ea] ::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.chart-container .chart-body[data-v-969f27ea]{height:100%}.chart-container[data-v-969f27ea]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}.chart-container[data-v-969f27ea]::-webkit-scrollbar{width:10px}.chart-container[data-v-969f27ea]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.axis[data-v-969f27ea]{left:0;pointer-events:none;position:absolute;top:0;z-index:99}.axis-tooltip[data-v-969f27ea]{background-color:#3a3f51;color:#fff;padding:4px 8px;position:absolute;width:max-content;z-index:100}.tooltip-boundary[data-v-969f27ea]{height:100%;left:0;position:relative;top:0;width:100%}.chart-parent[data-v-b3095003]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-b3095003]{flex-direction:column}.chart-parent.column .chart-container[data-v-b3095003]{height:80%;width:100%}.chart-parent.legend-row[data-v-b3095003]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-b3095003]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-b3095003]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-b3095003]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-b3095003]{position:relative}.chart-parent[data-v-3abbf084]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-3abbf084]{flex-direction:column}.chart-parent.column .chart-container[data-v-3abbf084]{height:80%;width:100%}.chart-parent.legend-row[data-v-3abbf084]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-3abbf084]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-3abbf084]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-3abbf084]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-3abbf084]{position:relative}.kong-ui-public-csv-export-modal .modal-container{min-width:580px}.kong-ui-public-csv-export-modal .modal-container .k-empty-state-message{max-width:80%}.kong-ui-public-csv-export-modal .modal-container .selected-range{font-size:14px}.kong-ui-public-csv-export-modal .modal-container .text-muted{color:#00000073!important;font-size:14px}.kong-ui-public-csv-export-modal .modal-container .vitals-table{font-size:14px;margin-bottom:20px;margin-top:6px;width:100%}.kong-ui-public-csv-export-modal .modal-container .k-table thead{border-top:1px solid #e0e4ea;height:auto}.kong-ui-public-csv-export-modal .modal-container .modal-footer .vitals-report-export-button{display:inline-flex}.analytics-chart-shell[data-v-410a8b13],.simple-chart-shell[data-v-410a8b13]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-410a8b13],.simple-chart-shell .chart-empty-state[data-v-410a8b13]{display:flex;flex-direction:column;height:100%;justify-content:center}.analytics-chart-shell[data-v-410a8b13]{height:100%;width:100%}.analytics-chart-shell .analytics-chart-parent[data-v-410a8b13]{height:inherit;width:inherit}.analytics-chart-shell .chart-empty-state[data-v-410a8b13]{padding:20px 0 16px}.analytics-chart-shell .chart-header[data-v-410a8b13]{align-items:center;display:flex;justify-content:flex-start;padding-bottom:16px}.analytics-chart-shell .chart-header .chart-header-icons-wrapper[data-v-410a8b13]{display:flex;justify-content:end}.analytics-chart-shell .chart-header .chart-export-button[data-v-410a8b13]{display:flex;margin-left:auto;margin-right:0}.analytics-chart-shell .chart-title[data-v-410a8b13]{font-size:18px;font-weight:600}.analytics-chart-shell .tooltip[data-v-410a8b13]{display:flex;margin-left:12px;margin-top:2px}.chart-parent[data-v-5871cb7a]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-5871cb7a]{flex-direction:column}.chart-parent.column .chart-container[data-v-5871cb7a]{height:80%;width:100%}.chart-parent.legend-row[data-v-5871cb7a]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-5871cb7a]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-5871cb7a]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-5871cb7a]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-5871cb7a]{position:relative}.chart-parent[data-v-5871cb7a]{height:auto;margin:0;padding:0;width:auto}.chart-parent .chart-container[data-v-5871cb7a]{margin:0;max-height:100px;max-width:100px;padding:0}.chart-parent .chart-totals-flex[data-v-5871cb7a]{align-items:center;display:flex;flex-direction:column;height:100px;justify-content:center;padding:24px 0 0;position:absolute;width:100px;z-index:2}.chart-parent .chart-totals-flex .metric-large[data-v-5871cb7a]{font-size:20px;font-weight:500;line-height:28px}.chart-parent .chart-totals-flex .metric-small[data-v-5871cb7a]{color:#6c7489;font-size:10px;font-weight:400;line-height:12px}.analytics-chart-shell[data-v-7d1a0034],.simple-chart-shell[data-v-7d1a0034]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-7d1a0034],.simple-chart-shell .chart-empty-state[data-v-7d1a0034]{display:flex;flex-direction:column;height:100%;justify-content:center}.simple-chart-shell[data-v-7d1a0034]{margin:0;padding:0}.simple-chart-shell .chart-empty-state[data-v-7d1a0034]{display:flex;flex-direction:column;height:100px;justify-content:center;width:100px}.simple-chart-shell .chart-empty-state[data-v-7d1a0034] .k-empty-state-title-header{font-size:12px;line-height:16px;margin:0}.kong-ui-public-top-n-table[data-v-613dbb8f]{border-radius:8px!important}.kong-ui-public-top-n-table .top-n-card-title[data-v-613dbb8f]{font-size:16px}.kong-ui-public-top-n-table .top-n-card-description[data-v-613dbb8f]{color:#6c7489;font-size:12px;text-align:right}.kong-ui-public-top-n-table[data-v-613dbb8f] .k-card-actions{align-self:baseline;display:flex;line-height:22px}.kong-ui-public-top-n-table .top-n-table[data-v-613dbb8f]{display:flex;flex-direction:column;width:100%}.kong-ui-public-top-n-table .top-n-table .table-headings[data-v-613dbb8f]{font-size:14px;font-weight:600;line-height:24px}.kong-ui-public-top-n-table .top-n-table .table-row[data-v-613dbb8f]{align-self:stretch;border-bottom:1px solid #e0e4ea;display:flex;justify-content:space-between}.kong-ui-public-top-n-table .top-n-table .table-row[data-v-613dbb8f]:last-of-type{border-bottom:none}.kong-ui-public-top-n-table .top-n-table .column-1[data-v-613dbb8f]{padding:0 24px 12px 0}.kong-ui-public-top-n-table .top-n-table .column-2[data-v-613dbb8f]{flex:1;max-width:110px;padding:0 0 12px}.kong-ui-public-top-n-table .top-n-table .table-body .table-row[data-v-613dbb8f]:first-of-type{border-top:1px solid #e0e4ea}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-613dbb8f],.kong-ui-public-top-n-table .top-n-table .table-body .column-2[data-v-613dbb8f]{padding-top:12px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-613dbb8f]{color:#3a3f51;font-size:14px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-613dbb8f] a{color:#0044f4;font-weight:700;text-decoration:none}.kong-ui-public-top-n-table.kong-card.border{border-radius:4px;padding:20px}.kong-ui-public-top-n-table.kong-card.border .k-card-header{align-items:baseline;margin-bottom:0!important}.kong-ui-public-top-n-table.kong-card.border .k-card-header .k-card-title{margin-bottom:16px}.kong-ui-public-top-n-table.kong-card.border .k-card-header .k-card-title h4{font-size:16px;font-weight:600}.analytics-chart[data-v-ec989cc0]{height:var(--134a876f)}.analytics-chart[data-v-1b9ab912]{height:var(--381b03f2)}.analytics-chart[data-v-efe3a03d]{height:var(--01f81c18)}.kong-ui-public-grid-layout[data-v-066610e8]{height:var(--bbf5361e);width:100%}.grid-cell[data-v-066610e8]{position:absolute}.grid-cell .tile-container[data-v-066610e8]{margin:20px}@media (max-width: 768px){.kong-ui-public-grid-layout[data-v-066610e8]{display:flex;flex-direction:column}.kong-ui-public-grid-layout .grid-cell[data-v-066610e8]{height:auto!important;left:auto!important;position:relative;top:auto!important;transform:none!important;width:auto!important}.kong-ui-public-grid-layout .grid-cell[data-v-066610e8]:not(:first-child){margin-top:20px}.kong-ui-public-grid-layout .empty-cell[data-v-066610e8]{display:none}}.kong-ui-public-dashboard-renderer .tile-container[data-v-e3197ec0]{border:1px solid #e0e4ea;border-radius:4px}
+.locked[data-v-d8d2d0cd]{cursor:move}.tooltip-container[data-v-d8d2d0cd]{background-color:#fff;border-radius:3px;box-shadow:0 5px 15px #0000001f,0 5px 10px #0000003d;max-width:425px;min-width:250px;position:absolute;transition:all .2s cubic-bezier(.25,.8,.25,1);z-index:999}.tooltip-container .tooltip-title[data-v-d8d2d0cd]{border-bottom:1px solid rgba(0,0,0,.1);display:flex;flex-direction:column;margin:8px;min-height:24px;padding-bottom:8px}.tooltip-container .tooltip-title .title[data-v-d8d2d0cd]{font-size:16px;font-weight:600}.tooltip-container .tooltip-title .subtitle[data-v-d8d2d0cd]{font-size:14px;margin-top:8px}.tooltip-container .tooltip-title .drag-icon[data-v-d8d2d0cd]{margin-top:6px;position:absolute;right:0;top:0}ul.tooltip[data-v-d8d2d0cd]{list-style:none;margin:0;max-height:300px;min-width:250px;overflow-y:auto;padding-left:0;-ms-overflow-style:thin;scrollbar-color:#e0e4ea transparent;scrollbar-width:auto}ul.tooltip[data-v-d8d2d0cd] ::-webkit-scrollbar{width:8px}ul.tooltip[data-v-d8d2d0cd] ::-webkit-scrollbar-track{background:transparent}ul.tooltip[data-v-d8d2d0cd] ::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}ul.tooltip li[data-v-d8d2d0cd]{display:flex;font-size:14px;line-height:1;margin:8px}ul.tooltip li[data-v-d8d2d0cd]:last-child{padding-bottom:8px}ul.tooltip .display-label[data-v-d8d2d0cd]{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ul.tooltip .display-value[data-v-d8d2d0cd]{margin-left:auto;padding-left:8px;white-space:nowrap}ul.tooltip .tooltip-legend[data-v-d8d2d0cd]{display:inline-flex;flex-direction:row;height:15px;margin-right:8px;width:3px}.legend-container[data-v-6a4f1f3c]{display:flex;max-height:inherit;overflow-x:hidden;overflow-y:auto;padding-left:12px;-ms-overflow-style:thin;scrollbar-color:#e0e4ea transparent;scrollbar-width:auto}.legend-container[data-v-6a4f1f3c] ::-webkit-scrollbar{width:8px}.legend-container[data-v-6a4f1f3c] ::-webkit-scrollbar-track{background:transparent}.legend-container[data-v-6a4f1f3c] ::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.legend-container.vertical[data-v-6a4f1f3c]{flex-direction:column;max-height:90%;max-width:15%;min-width:10%}.legend-container.vertical .truncate-label[data-v-6a4f1f3c]{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 767px){.legend-container.vertical[data-v-6a4f1f3c]{column-gap:24px;display:grid;grid-template-columns:repeat(auto-fit,10ch);justify-content:center;max-height:12%;width:99%}.legend-container.vertical .sub-label[data-v-6a4f1f3c]{display:none}}.legend-container.horizontal[data-v-6a4f1f3c]{column-gap:24px;display:grid;justify-content:center;max-height:12%;width:99%}.legend-container.horizontal .truncate-label[data-v-6a4f1f3c]{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-container.horizontal li[data-v-6a4f1f3c]{margin-top:0}.legend-container.horizontal li .legend[data-v-6a4f1f3c]{margin-top:12px}.legend-container.horizontal li .label[data-v-6a4f1f3c]{line-height:28px}.legend-container li[data-v-6a4f1f3c]{align-items:start;cursor:pointer;display:flex;line-height:1;margin-top:16px}.legend-container li .legend[data-v-6a4f1f3c]{flex:0 0 14px;height:3px;margin-right:12px;margin-top:4px}.legend-container li .label[data-v-6a4f1f3c]{font-size:14px}.legend-container li .sub-label[data-v-6a4f1f3c]{font-size:12px;line-height:16px;word-break:none}.legend-container li .strike-through[data-v-6a4f1f3c]{text-decoration:line-through}.chart-parent[data-v-969f27ea]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-969f27ea]{flex-direction:column}.chart-parent.column .chart-container[data-v-969f27ea]{height:80%;width:100%}.chart-parent.legend-row[data-v-969f27ea]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-969f27ea]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-969f27ea]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-969f27ea]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-969f27ea]{position:relative}.chart-container[data-v-969f27ea]{overflow:auto;-ms-overflow-style:thin;scrollbar-color:#e0e4ea transparent;scrollbar-width:auto}.chart-container[data-v-969f27ea] ::-webkit-scrollbar{width:8px}.chart-container[data-v-969f27ea] ::-webkit-scrollbar-track{background:transparent}.chart-container[data-v-969f27ea] ::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.chart-container .chart-body[data-v-969f27ea]{height:100%}.chart-container[data-v-969f27ea]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}.chart-container[data-v-969f27ea]::-webkit-scrollbar{width:10px}.chart-container[data-v-969f27ea]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.axis[data-v-969f27ea]{left:0;pointer-events:none;position:absolute;top:0;z-index:99}.axis-tooltip[data-v-969f27ea]{background-color:#3a3f51;color:#fff;padding:4px 8px;position:absolute;width:max-content;z-index:100}.tooltip-boundary[data-v-969f27ea]{height:100%;left:0;position:relative;top:0;width:100%}.chart-parent[data-v-b3095003]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-b3095003]{flex-direction:column}.chart-parent.column .chart-container[data-v-b3095003]{height:80%;width:100%}.chart-parent.legend-row[data-v-b3095003]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-b3095003]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-b3095003]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-b3095003]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-b3095003]{position:relative}.chart-parent[data-v-3abbf084]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-3abbf084]{flex-direction:column}.chart-parent.column .chart-container[data-v-3abbf084]{height:80%;width:100%}.chart-parent.legend-row[data-v-3abbf084]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-3abbf084]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-3abbf084]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-3abbf084]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-3abbf084]{position:relative}.kong-ui-public-csv-export-modal .modal-container{min-width:580px}.kong-ui-public-csv-export-modal .modal-container .k-empty-state-message{max-width:80%}.kong-ui-public-csv-export-modal .modal-container .selected-range{font-size:14px}.kong-ui-public-csv-export-modal .modal-container .text-muted{color:#00000073!important;font-size:14px}.kong-ui-public-csv-export-modal .modal-container .vitals-table{font-size:14px;margin-bottom:20px;margin-top:6px;width:100%}.kong-ui-public-csv-export-modal .modal-container .k-table thead{border-top:1px solid #e0e4ea;height:auto}.kong-ui-public-csv-export-modal .modal-container .modal-footer .vitals-report-export-button{display:inline-flex}.analytics-chart-shell[data-v-410a8b13],.simple-chart-shell[data-v-410a8b13]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-410a8b13],.simple-chart-shell .chart-empty-state[data-v-410a8b13]{display:flex;flex-direction:column;height:100%;justify-content:center}.analytics-chart-shell[data-v-410a8b13]{height:100%;width:100%}.analytics-chart-shell .analytics-chart-parent[data-v-410a8b13]{height:inherit;width:inherit}.analytics-chart-shell .chart-empty-state[data-v-410a8b13]{padding:20px 0 16px}.analytics-chart-shell .chart-header[data-v-410a8b13]{align-items:center;display:flex;justify-content:flex-start;padding-bottom:16px}.analytics-chart-shell .chart-header .chart-header-icons-wrapper[data-v-410a8b13]{display:flex;justify-content:end}.analytics-chart-shell .chart-header .chart-export-button[data-v-410a8b13]{display:flex;margin-left:auto;margin-right:0}.analytics-chart-shell .chart-title[data-v-410a8b13]{font-size:18px;font-weight:600}.analytics-chart-shell .tooltip[data-v-410a8b13]{display:flex;margin-left:12px;margin-top:2px}.chart-parent[data-v-5871cb7a]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-5871cb7a]{flex-direction:column}.chart-parent.column .chart-container[data-v-5871cb7a]{height:80%;width:100%}.chart-parent.legend-row[data-v-5871cb7a]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-5871cb7a]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-5871cb7a]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-5871cb7a]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-5871cb7a]{position:relative}.chart-parent[data-v-5871cb7a]{height:auto;margin:0;padding:0;width:auto}.chart-parent .chart-container[data-v-5871cb7a]{margin:0;max-height:100px;max-width:100px;padding:0}.chart-parent .chart-totals-flex[data-v-5871cb7a]{align-items:center;display:flex;flex-direction:column;height:100px;justify-content:center;padding:24px 0 0;position:absolute;width:100px;z-index:2}.chart-parent .chart-totals-flex .metric-large[data-v-5871cb7a]{font-size:20px;font-weight:500;line-height:28px}.chart-parent .chart-totals-flex .metric-small[data-v-5871cb7a]{color:#6c7489;font-size:10px;font-weight:400;line-height:12px}.analytics-chart-shell[data-v-7d1a0034],.simple-chart-shell[data-v-7d1a0034]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-7d1a0034],.simple-chart-shell .chart-empty-state[data-v-7d1a0034]{display:flex;flex-direction:column;height:100%;justify-content:center}.simple-chart-shell[data-v-7d1a0034]{margin:0;padding:0}.simple-chart-shell .chart-empty-state[data-v-7d1a0034]{display:flex;flex-direction:column;height:100px;justify-content:center;width:100px}.simple-chart-shell .chart-empty-state[data-v-7d1a0034] .k-empty-state-title-header{font-size:12px;line-height:16px;margin:0}.kong-ui-public-top-n-table[data-v-613dbb8f]{border-radius:8px!important}.kong-ui-public-top-n-table .top-n-card-title[data-v-613dbb8f]{font-size:16px}.kong-ui-public-top-n-table .top-n-card-description[data-v-613dbb8f]{color:#6c7489;font-size:12px;text-align:right}.kong-ui-public-top-n-table[data-v-613dbb8f] .k-card-actions{align-self:baseline;display:flex;line-height:22px}.kong-ui-public-top-n-table .top-n-table[data-v-613dbb8f]{display:flex;flex-direction:column;width:100%}.kong-ui-public-top-n-table .top-n-table .table-headings[data-v-613dbb8f]{font-size:14px;font-weight:600;line-height:24px}.kong-ui-public-top-n-table .top-n-table .table-row[data-v-613dbb8f]{align-self:stretch;border-bottom:1px solid #e0e4ea;display:flex;justify-content:space-between}.kong-ui-public-top-n-table .top-n-table .table-row[data-v-613dbb8f]:last-of-type{border-bottom:none}.kong-ui-public-top-n-table .top-n-table .column-1[data-v-613dbb8f]{padding:0 24px 12px 0}.kong-ui-public-top-n-table .top-n-table .column-2[data-v-613dbb8f]{flex:1;max-width:110px;padding:0 0 12px}.kong-ui-public-top-n-table .top-n-table .table-body .table-row[data-v-613dbb8f]:first-of-type{border-top:1px solid #e0e4ea}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-613dbb8f],.kong-ui-public-top-n-table .top-n-table .table-body .column-2[data-v-613dbb8f]{padding-top:12px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-613dbb8f]{color:#3a3f51;font-size:14px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-613dbb8f] a{color:#0044f4;font-weight:700;text-decoration:none}.kong-ui-public-top-n-table.kong-card.border{border-radius:4px;padding:20px}.kong-ui-public-top-n-table.kong-card.border .k-card-header{align-items:baseline;margin-bottom:0!important}.kong-ui-public-top-n-table.kong-card.border .k-card-header .k-card-title{margin-bottom:16px}.kong-ui-public-top-n-table.kong-card.border .k-card-header .k-card-title h4{font-size:16px;font-weight:600}.metricscard-tooltip,.trafficcard.active .metricscard-tooltip{pointer-events:all}.metricscard[data-v-92346195]{display:flex;flex-direction:column;width:100%}@media (max-width: 767px){.metricscard[data-v-92346195]{max-width:none;width:auto}}.metricscard[data-v-92346195]:hover{border:none;text-decoration:none}.metricscard-title[data-v-92346195]{align-items:center;color:#000933;color:var(--kong-ui-metric-card-title, #000933);display:flex;flex-direction:row;font-size:14px;font-weight:500}.metricscard-title.sm[data-v-92346195]{font-size:12px}.metricscard-description[data-v-92346195]{color:#afb7c5;color:var(--kong-ui-metric-card-value, #afb7c5);font-size:12px;line-height:16px;margin-top:10px}.metricscard-icon[data-v-92346195]{margin-right:6px}.metricscard-value[data-v-92346195]{color:#000933;color:var(--kong-ui-metric-card-value, #000933);display:flex;flex-direction:row;font-weight:600;justify-content:space-between;line-height:32px;margin-top:16px}.metricscard-value.sm[data-v-92346195]{line-height:24px;margin-top:4px}.metricscard-valuetrend[data-v-92346195]{display:flex;flex-direction:column;row-gap:12px}.metricscard-valuetrend.is-compact[data-v-92346195]{align-items:center;flex-direction:row!important;justify-content:space-between;margin-top:0}.metricscard-trend[data-v-92346195]{align-items:center;column-gap:8px;display:flex}.metricscard-trend-change[data-v-92346195]{align-items:center;border-radius:4px;display:flex;flex-direction:row;font-size:12px;font-weight:600;padding:4px 8px}.metricscard-trend-change .kui-icon[data-v-92346195]{margin-right:4px}.metricscard-trend-change.positive[data-v-92346195]{background-color:#ecfffb;background-color:var(--kong-ui-metric-card-trend-bg-positive, #ecfffb);color:#007d60;color:var(--kong-ui-metric-card-trend-positive, #007d60)}.metricscard-trend-change.negative[data-v-92346195]{background-color:#ffe5e5;background-color:var(--kong-ui-metric-card-trend-bg-negative, #ffe5e5);color:#ad000e;color:var(--kong-ui-metric-card-trend-negative, #ad000e)}.metricscard-trend-change.neutral[data-v-92346195]{background-color:#e0e4ea;background-color:var(--kong-ui-metric-card-trend-bg-neutral, #e0e4ea);color:#52596e;color:var(--kong-ui-metric-card-trend-neutral, #52596e)}.metricscard-trend-range[data-v-92346195]{color:#000933;font-size:12px}.metricscard-tooltip[data-v-92346195]{display:inline-flex;margin:auto 0 auto 4px;vertical-align:middle}.metricscard-error[data-v-92346195]{align-items:center;color:#3a3f51;display:flex;flex-direction:row;font-size:12px;margin-top:8px}.metricscard-error .kong-icon-warning[data-v-92346195]{margin-right:12px}.metricscard.active .metricscard-tooltip[data-v-92346195]{pointer-events:all}.loading-tabs[data-v-f7eb9c40]{display:flex;flex-direction:column}.loading-tabs-large[data-v-f7eb9c40]{padding:4px;row-gap:12px;width:240px}.loading-tabs-small[data-v-f7eb9c40]{padding:2px;row-gap:8px;width:120px}.loading-tabs-small .box[data-v-f7eb9c40]{height:12px}@media (max-width: 767px){.loading-tabs[data-v-f7eb9c40]{width:auto}}.kong-ui-public-metric-card-container[data-v-80b51a84]{background-color:transparent;background-color:var(--kong-ui-metric-card-background, transparent);display:flex;flex-direction:row;justify-content:space-between;width:100%;column-gap:24px;row-gap:16px}@media (max-width: 767px){.kong-ui-public-metric-card-container[data-v-80b51a84]{column-gap:16px;row-gap:16px;flex-direction:column}}.kong-ui-public-metric-card-container.sm[data-v-80b51a84]{column-gap:0;row-gap:0}.kong-ui-public-metric-card-container .error-display[data-v-80b51a84]{align-items:center;display:flex;justify-content:center;margin:auto}.kong-ui-public-metric-card-container .error-display-icon[data-v-80b51a84]{display:flex}.kong-ui-public-metric-card-container .error-display-message[data-v-80b51a84]{color:#6c7489;font-size:14px;margin-left:12px}.analytics-chart[data-v-ec989cc0]{height:var(--134a876f)}.analytics-chart[data-v-1b9ab912]{height:var(--381b03f2)}.analytics-chart[data-v-efe3a03d]{height:var(--01f81c18)}.kong-ui-public-grid-layout[data-v-066610e8]{height:var(--bbf5361e);width:100%}.grid-cell[data-v-066610e8]{position:absolute}.grid-cell .tile-container[data-v-066610e8]{margin:20px}@media (max-width: 768px){.kong-ui-public-grid-layout[data-v-066610e8]{display:flex;flex-direction:column}.kong-ui-public-grid-layout .grid-cell[data-v-066610e8]{height:auto!important;left:auto!important;position:relative;top:auto!important;transform:none!important;width:auto!important}.kong-ui-public-grid-layout .grid-cell[data-v-066610e8]:not(:first-child){margin-top:20px}.kong-ui-public-grid-layout .empty-cell[data-v-066610e8]{display:none}}.kong-ui-public-dashboard-renderer .tile-container[data-v-e3197ec0]{border:1px solid #e0e4ea;border-radius:4px}

package/dist/types/components/DashboardTile.vue.d.ts

@@ -1,130 +1,35 @@
-import { ChartTypes } from '../types';
-import type { PropType } from 'vue';
+import type { TileDefinition } from '../types';
 import '@kong-ui-public/analytics-chart/dist/style.css';
-declare const _default: import("vue").DefineComponent<{
-    definition: {
-        type: PropType<{
-            query: {
-                [x: string]: unknown;
-                metrics?: ("request_count" | "request_per_minute" | "response_latency_p99" | "response_latency_p95" | "response_latency_p50" | "response_latency_average" | "upstream_latency_p99" | "upstream_latency_p95" | "upstream_latency_p50" | "upstream_latency_average" | "kong_latency_p99" | "kong_latency_p95" | "kong_latency_p50" | "kong_latency_average" | "response_size_p99" | "response_size_p95" | "response_size_p50" | "request_size_p99" | "request_size_p95" | "request_size_p50" | "request_size_average" | "response_size_average")[] | undefined;
-                dimensions?: ("api_product" | "api_product_version" | "application" | "consumer" | "control_plane" | "control_plane_group" | "data_plane_node" | "gateway_service" | "route" | "status_code" | "status_code_grouped" | "time")[] | undefined;
-                filters?: {
-                    [x: string]: unknown;
-                    type: "in" | "not_in" | "selector";
-                    values: string[];
-                    dimension: "api_product" | "api_product_version" | "application" | "consumer" | "control_plane" | "control_plane_group" | "data_plane_node" | "gateway_service" | "route" | "status_code" | "status_code_grouped" | "time";
-                }[] | undefined;
-                granularity_ms?: number | undefined;
-                meta?: {
-                    [x: string]: unknown;
-                } | undefined;
-                time_range: {
-                    [x: string]: unknown;
-                    type: "relative";
-                    tz: string;
-                    time_range: "15m" | "1h" | "6h" | "12h" | "24h" | "7d" | "30d" | "current_week" | "current_month" | "previous_week" | "previous_month";
-                } | {
-                    [x: string]: unknown;
-                    start?: string | undefined;
-                    end?: string | undefined;
-                    type: "absolute";
-                    tz: string;
-                };
-            };
-            chart: {
-                chartDatasetColors?: {
-                    [x: string]: string;
-                } | string[] | undefined;
-                syntheticsDataKey?: string | undefined;
-                stacked?: boolean | undefined;
-                showAnnotations?: boolean | undefined;
-                type: ChartTypes.HorizontalBar | ChartTypes.VerticalBar;
-            } | {
-                syntheticsDataKey?: string | undefined;
-                metricDisplay?: import("@kong-ui-public/analytics-chart").ChartMetricDisplay | undefined;
-                reverseDataset?: boolean | undefined;
-                numerator?: number | undefined;
-                type: ChartTypes.Gauge;
-            } | {
-                chartDatasetColors?: {
-                    [x: string]: string;
-                } | string[] | undefined;
-                syntheticsDataKey?: string | undefined;
-                stacked?: boolean | undefined;
-                fill?: boolean | undefined;
-                type: ChartTypes.TimeseriesLine;
-            };
-        }>;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: false;
-        default: () => number;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    definition: {
-        type: PropType<{
-            query: {
-                [x: string]: unknown;
-                metrics?: ("request_count" | "request_per_minute" | "response_latency_p99" | "response_latency_p95" | "response_latency_p50" | "response_latency_average" | "upstream_latency_p99" | "upstream_latency_p95" | "upstream_latency_p50" | "upstream_latency_average" | "kong_latency_p99" | "kong_latency_p95" | "kong_latency_p50" | "kong_latency_average" | "response_size_p99" | "response_size_p95" | "response_size_p50" | "request_size_p99" | "request_size_p95" | "request_size_p50" | "request_size_average" | "response_size_average")[] | undefined;
-                dimensions?: ("api_product" | "api_product_version" | "application" | "consumer" | "control_plane" | "control_plane_group" | "data_plane_node" | "gateway_service" | "route" | "status_code" | "status_code_grouped" | "time")[] | undefined;
-                filters?: {
-                    [x: string]: unknown;
-                    type: "in" | "not_in" | "selector";
-                    values: string[];
-                    dimension: "api_product" | "api_product_version" | "application" | "consumer" | "control_plane" | "control_plane_group" | "data_plane_node" | "gateway_service" | "route" | "status_code" | "status_code_grouped" | "time";
-                }[] | undefined;
-                granularity_ms?: number | undefined;
-                meta?: {
-                    [x: string]: unknown;
-                } | undefined;
-                time_range: {
-                    [x: string]: unknown;
-                    type: "relative";
-                    tz: string;
-                    time_range: "15m" | "1h" | "6h" | "12h" | "24h" | "7d" | "30d" | "current_week" | "current_month" | "previous_week" | "previous_month";
-                } | {
-                    [x: string]: unknown;
-                    start?: string | undefined;
-                    end?: string | undefined;
-                    type: "absolute";
-                    tz: string;
-                };
-            };
-            chart: {
-                chartDatasetColors?: {
-                    [x: string]: string;
-                } | string[] | undefined;
-                syntheticsDataKey?: string | undefined;
-                stacked?: boolean | undefined;
-                showAnnotations?: boolean | undefined;
-                type: ChartTypes.HorizontalBar | ChartTypes.VerticalBar;
-            } | {
-                syntheticsDataKey?: string | undefined;
-                metricDisplay?: import("@kong-ui-public/analytics-chart").ChartMetricDisplay | undefined;
-                reverseDataset?: boolean | undefined;
-                numerator?: number | undefined;
-                type: ChartTypes.Gauge;
-            } | {
-                chartDatasetColors?: {
-                    [x: string]: string;
-                } | string[] | undefined;
-                syntheticsDataKey?: string | undefined;
-                stacked?: boolean | undefined;
-                fill?: boolean | undefined;
-                type: ChartTypes.TimeseriesLine;
-            };
-        }>;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: false;
-        default: () => number;
-    };
-}>>, {
+import '@kong-ui-public/analytics-metric-provider/dist/style.css';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    definition: TileDefinition;
+    height?: number | undefined;
+}>, {
+    height: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    definition: TileDefinition;
+    height?: number | undefined;
+}>, {
+    height: number;
+}>>>, {
     height: number;
 }, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=DashboardTile.vue.d.ts.map

package/dist/types/components/DashboardTile.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardTile.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardTile.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EACC,QAAQ,EACpB,MAAM,KAAK,CAAA;AAEZ,OAAO,gDAAgD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GvD,wBAgBG"}
+{"version":3,"file":"DashboardTile.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardTile.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAM9C,OAAO,gDAAgD,CAAA;AACvD,OAAO,0DAA0D,CAAA;;gBAyGnD,cAAc;;;;;gBAAd,cAAc;;;;;YACjB,MAAM;;AAPjB,wBASG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/types/components/GoldenSignalsRenderer.vue.d.ts

@@ -0,0 +1,23 @@
+import type { RendererProps } from '../types';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<RendererProps<{
+    [x: string]: unknown;
+    description?: string | undefined;
+    longCardTitles?: boolean | undefined;
+    type: import("../types").ChartTypes.GoldenSignals;
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<RendererProps<{
+    [x: string]: unknown;
+    description?: string | undefined;
+    longCardTitles?: boolean | undefined;
+    type: import("../types").ChartTypes.GoldenSignals;
+}>>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=GoldenSignalsRenderer.vue.d.ts.map

package/dist/types/components/GoldenSignalsRenderer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoldenSignalsRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/GoldenSignalsRenderer.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAqB,aAAa,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;;AAmFhE,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/types/types/dashboard-renderer-types.d.ts

@@ -9,7 +9,8 @@ export declare enum ChartTypes {
     HorizontalBar = "horizontal_bar",
     VerticalBar = "vertical_bar",
     Gauge = "gauge",
-    TimeseriesLine = "timeseries_line"
+    TimeseriesLine = "timeseries_line",
+    GoldenSignals = "golden_signals"
 }
 export declare const barChartSchema: {
     readonly type: "object";
@@ -96,6 +97,23 @@ export declare const gaugeChartSchema: {
     readonly additionalProperties: false;
 };
 export type GaugeChartOptions = FromSchema<typeof gaugeChartSchema>;
+export declare const metricCardSchema: {
+    readonly type: "object";
+    readonly properties: {
+        readonly type: {
+            readonly type: "string";
+            readonly enum: readonly [ChartTypes.GoldenSignals];
+        };
+        readonly longCardTitles: {
+            readonly type: "boolean";
+        };
+        readonly description: {
+            readonly type: "string";
+        };
+    };
+    readonly required: readonly ["type"];
+};
+export type MetricCardOptions = FromSchema<typeof metricCardSchema>;
 export declare const exploreV4QuerySchema: {
     readonly type: "object";
     readonly description: "A query to launch at the API";
@@ -385,6 +403,21 @@ export declare const tileDefinitionSchema: {
                 };
                 readonly required: readonly ["type"];
                 readonly additionalProperties: false;
+            }, {
+                readonly type: "object";
+                readonly properties: {
+                    readonly type: {
+                        readonly type: "string";
+                        readonly enum: readonly [ChartTypes.GoldenSignals];
+                    };
+                    readonly longCardTitles: {
+                        readonly type: "boolean";
+                    };
+                    readonly description: {
+                        readonly type: "string";
+                    };
+                };
+                readonly required: readonly ["type"];
             }];
         };
     };
@@ -617,6 +650,21 @@ export declare const tileConfigSchema: {
                         };
                         readonly required: readonly ["type"];
                         readonly additionalProperties: false;
+                    }, {
+                        readonly type: "object";
+                        readonly properties: {
+                            readonly type: {
+                                readonly type: "string";
+                                readonly enum: readonly [ChartTypes.GoldenSignals];
+                            };
+                            readonly longCardTitles: {
+                                readonly type: "boolean";
+                            };
+                            readonly description: {
+                                readonly type: "string";
+                            };
+                        };
+                        readonly required: readonly ["type"];
                     }];
                 };
             };
@@ -857,6 +905,21 @@ export declare const dashboardConfigSchema: {
                                     };
                                     readonly required: readonly ["type"];
                                     readonly additionalProperties: false;
+                                }, {
+                                    readonly type: "object";
+                                    readonly properties: {
+                                        readonly type: {
+                                            readonly type: "string";
+                                            readonly enum: readonly [ChartTypes.GoldenSignals];
+                                        };
+                                        readonly longCardTitles: {
+                                            readonly type: "boolean";
+                                        };
+                                        readonly description: {
+                                            readonly type: "string";
+                                        };
+                                    };
+                                    readonly required: readonly ["type"];
                                 }];
                             };
                         };

package/dist/types/types/dashboard-renderer-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-renderer-types.d.ts","sourceRoot":"","sources":["../../../src/types/dashboard-renderer-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAEpE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAEnG,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,QAAQ,EAAE,WAAW,CAAA;CACtB;AAED,oBAAY,UAAU;IACpB,aAAa,mBAAmB;IAChC,WAAW,iBAAiB;IAC5B,KAAK,UAAU;IACf,cAAc,oBAAoB;CACnC;AAiBD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBI,CAAA;AAE/B,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE/D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBH,CAAA;AAE/B,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAE7E,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;CAqBE,CAAA;AAE/B,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AA4GnE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFF,CAAA;AAE/B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUF,CAAA;AAE/B,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAEpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCE,CAAA;AAE/B,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE5D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQE,CAAA;AAE/B,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE5D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BH,CAAA;AAE/B,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAEtE,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,CAAC,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;CACf"}
+{"version":3,"file":"dashboard-renderer-types.d.ts","sourceRoot":"","sources":["../../../src/types/dashboard-renderer-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AAEpE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAEnG,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,QAAQ,EAAE,WAAW,CAAA;CACtB;AAED,oBAAY,UAAU;IACpB,aAAa,mBAAmB;IAChC,WAAW,iBAAiB;IAC5B,KAAK,UAAU;IACf,cAAc,oBAAoB;IAClC,aAAa,mBAAmB;CACjC;AAiBD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBI,CAAA;AAE/B,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE/D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBH,CAAA;AAE/B,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAE7E,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;CAqBE,CAAA;AAE/B,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEnE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAeE,CAAA;AAE/B,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AA4GnE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFF,CAAA;AAE/B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUF,CAAA;AAE/B,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAEpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCE,CAAA;AAE/B,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE5D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQE,CAAA;AAE/B,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE5D,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BH,CAAA;AAE/B,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAEtE,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,CAAC,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;CACf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/dashboard-renderer",
-  "version": "0.5.10",
+  "version": "0.6.0",
   "type": "module",
   "main": "./dist/dashboard-renderer.umd.js",
   "module": "./dist/dashboard-renderer.es.js",
@@ -27,9 +27,10 @@
     "swrv": "^1.0.4",
     "vue": "^3.4.13",
     "@kong-ui-public/analytics-chart": "^2.1.1",
+    "@kong-ui-public/analytics-metric-provider": "^4.0.1",
     "@kong-ui-public/analytics-utilities": "^1.1.1",
-    "@kong-ui-public/sandbox-layout": "^2.0.33",
-    "@kong-ui-public/i18n": "^2.1.2"
+    "@kong-ui-public/i18n": "^2.1.2",
+    "@kong-ui-public/sandbox-layout": "^2.0.33"
   },
   "repository": {
     "type": "git",
@@ -53,6 +54,7 @@
     "swrv": "^1.0.4",
     "vue": ">= 3.3.13 < 4",
     "@kong-ui-public/analytics-chart": "^2.1.1",
+    "@kong-ui-public/analytics-metric-provider": "^4.0.1",
     "@kong-ui-public/analytics-utilities": "^1.1.1",
     "@kong-ui-public/i18n": "^2.1.2"
   },