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

package/dist/dashboard-renderer.es.js

@@ -1,4 +1,4 @@
-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 { ref as I, 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 g, withCtx as b, createTextVNode as H, toDisplayString as U, renderSlot as K, createCommentVNode as F, useCssVars as O, createElementVNode as L, createVNode as A, createElementBlock as R, normalizeProps as M, guardReactiveProps as ee, 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";
@@ -6,7 +6,7 @@ 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 = {
+const $ = {
   type: "string"
 }, Y = {
   type: ["object", "array"],
@@ -34,7 +34,7 @@ const j = {
       type: "boolean"
     },
     chartDatasetColors: Y,
-    syntheticsDataKey: j
+    syntheticsDataKey: $
   },
   required: ["type"],
   additionalProperties: !1
@@ -55,7 +55,7 @@ const j = {
       type: "boolean"
     },
     chartDatasetColors: Y,
-    syntheticsDataKey: j
+    syntheticsDataKey: $
   },
   required: ["type"],
   additionalProperties: !1
@@ -79,7 +79,7 @@ const j = {
     numerator: {
       type: "number"
     },
-    syntheticsDataKey: j
+    syntheticsDataKey: $
   },
   required: ["type"],
   additionalProperties: !1
@@ -336,7 +336,7 @@ const j = {
   },
   required: ["definition", "layout"],
   additionalProperties: !1
-}, et = {
+}, rt = {
   type: "object",
   properties: {
     tiles: {
@@ -366,13 +366,13 @@ const j = {
   additionalProperties: !1
 };
 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) => {
+const we = (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 = (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 we(e = E({}), t, o, n = Ee) {
-  const r = E(
+function Ee(e = I({}), t, o, n = we) {
+  const r = I(
     "PENDING"
     /* PENDING */
   );
@@ -426,7 +426,7 @@ function ke() {
 }
 const Z = {
   useI18n: ke
-}, $ = /* @__PURE__ */ v({
+}, j = /* @__PURE__ */ v({
   __name: "QueryDataProvider",
   props: {
     query: {},
@@ -438,35 +438,35 @@ const Z = {
     B(() => {
       f.abort();
     });
-    const { data: m, error: R, isValidating: i } = le(p, async () => {
-      var q, A, S, k;
+    const { data: _, error: w, isValidating: i } = le(p, async () => {
+      var q, E, S, k;
       try {
         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);
+        m.value = ((E = (q = h == null ? void 0 : h.response) == null ? void 0 : q.data) == null ? void 0 : E.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 {
         n("queryComplete");
       }
-    }), { 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) => {
+    }), { state: s, swrvState: l } = Ee(_, w, i), m = I(null), T = u(() => s.value === l.ERROR || !!m.value), D = u(() => !o.queryReady || s.value === l.PENDING);
+    return (q, E) => {
       const S = z("KSkeleton"), k = z("KEmptyState");
-      return D.value || !y(m) && !T.value ? (c(), _(S, {
+      return D.value || !y(_) && !T.value ? (c(), g(S, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : T.value ? (c(), _(k, {
+      })) : T.value ? (c(), g(k, {
         key: 1,
         "cta-is-hidden": "",
         "data-testid": "chart-empty-state",
         "is-error": ""
       }, {
         message: b(() => [
-          H(U(g.value), 1)
+          H(U(m.value), 1)
         ]),
         _: 1
-      })) : y(m) ? K(q.$slots, "default", {
+      })) : y(_) ? K(q.$slots, "default", {
         key: 2,
-        data: y(m)
+        data: y(_)
       }) : F("", !0);
     };
   }
@@ -488,13 +488,13 @@ const Z = {
       ...t.chartOptions,
       type: o[t.chartOptions.type]
     }));
-    return (r, a) => (c(), _($, {
+    return (r, a) => (c(), g(j, {
       query: r.query,
       "query-ready": r.queryReady
     }, {
       default: b(({ data: p }) => [
         L("div", Oe, [
-          w(y(pe), {
+          A(y(pe), {
             "chart-data": p,
             "chart-options": n.value,
             "synthetics-data-key": r.chartOptions.syntheticsDataKey
@@ -504,12 +504,12 @@ const Z = {
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), I = (e, t) => {
+}), C = (e, t) => {
   const o = e.__vccOpts || e;
   for (const [n, r] of t)
     o[n] = r;
   return o;
-}, Pe = /* @__PURE__ */ I(ze, [["__scopeId", "data-v-ec989cc0"]]), Le = { class: "analytics-chart" }, Ne = /* @__PURE__ */ v({
+}, Pe = /* @__PURE__ */ C(ze, [["__scopeId", "data-v-ec989cc0"]]), Le = { class: "analytics-chart" }, Ne = /* @__PURE__ */ v({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -529,13 +529,13 @@ const Z = {
       stacked: t.chartOptions.stacked,
       chartDatasetColors: t.chartOptions.chartDatasetColors
     }));
-    return (r, a) => (c(), _($, {
+    return (r, a) => (c(), g(j, {
       query: r.query,
       "query-ready": r.queryReady
     }, {
       default: b(({ data: p }) => [
         L("div", Le, [
-          w(y(Q), {
+          A(y(Q), {
             "chart-data": p,
             "chart-options": n.value,
             "legend-position": "bottom",
@@ -547,7 +547,7 @@ const Z = {
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), x = /* @__PURE__ */ I(Ne, [["__scopeId", "data-v-1b9ab912"]]), je = { class: "analytics-chart" }, $e = /* @__PURE__ */ v({
+}), x = /* @__PURE__ */ C(Ne, [["__scopeId", "data-v-1b9ab912"]]), $e = { class: "analytics-chart" }, je = /* @__PURE__ */ v({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -568,13 +568,13 @@ const Z = {
       stacked: t.chartOptions.stacked,
       chartDatasetColors: t.chartOptions.chartDatasetColors
     }));
-    return (r, a) => (c(), _($, {
+    return (r, a) => (c(), g(j, {
       query: r.query,
       "query-ready": r.queryReady
     }, {
       default: b(({ data: p }) => [
-        L("div", je, [
-          w(y(Q), {
+        L("div", $e, [
+          A(y(Q), {
             "chart-data": p,
             "chart-options": n.value,
             "legend-position": "bottom",
@@ -585,7 +585,7 @@ const Z = {
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), Ge = /* @__PURE__ */ I($e, [["__scopeId", "data-v-efe3a03d"]]), xe = /* @__PURE__ */ v({
+}), Ge = /* @__PURE__ */ C(je, [["__scopeId", "data-v-efe3a03d"]]), xe = { class: "metric-card-tile-wrapper" }, Ve = /* @__PURE__ */ v({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -600,14 +600,16 @@ const Z = {
       hasTrendAccess: !0,
       refreshInterval: 0
     }));
-    return (n, r) => (c(), _(y(ye), M(ee(o.value)), {
-      default: b(() => [
-        w(y(he))
-      ]),
-      _: 1
-    }, 16));
+    return (n, r) => (c(), R("div", xe, [
+      A(y(ye), M(ee(o.value)), {
+        default: b(() => [
+          A(y(he), { class: "metric-consumer" })
+        ]),
+        _: 1
+      }, 16)
+    ]));
   }
-}), Ve = { class: "tile-boundary" }, Be = /* @__PURE__ */ v({
+}), Be = /* @__PURE__ */ C(Ve, [["__scopeId", "data-v-897181f6"]]), He = { class: "tile-boundary" }, Ue = /* @__PURE__ */ v({
   __name: "DashboardTile",
   props: {
     definition: {},
@@ -619,7 +621,7 @@ const Z = {
       [d.HorizontalBar]: x,
       [d.VerticalBar]: x,
       [d.Gauge]: Pe,
-      [d.GoldenSignals]: xe
+      [d.GoldenSignals]: Be
     }, n = u(() => ({
       component: o[t.definition.chart.type],
       rendererProps: {
@@ -630,11 +632,11 @@ const Z = {
         height: t.height
       }
     }));
-    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)
+    return (r, a) => (c(), R("div", He, [
+      n.value ? (c(), g(te(n.value.component), M(re({ key: 0 }, n.value.rendererProps)), null, 16)) : F("", !0)
     ]));
   }
-}), He = "20px", Ue = /* @__PURE__ */ v({
+}), Ke = "20px", Fe = /* @__PURE__ */ v({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -653,9 +655,9 @@ const Z = {
   },
   setup(e) {
     O((i) => ({
-      bbf5361e: `${R.value}px`
+      bbf5361e: `${w.value}px`
     }));
-    const t = parseInt(He), o = e, n = E(null), r = E(0), a = new ResizeObserver((i) => {
+    const t = parseInt(Ke), o = e, n = I(null), r = I(0), a = new ResizeObserver((i) => {
       r.value = i[0].contentRect.width;
     });
     oe(() => {
@@ -669,32 +671,32 @@ const Z = {
         const l = s.layout.position.row;
         i[l]++;
       }), i;
-    }), m = u(() => {
+    }), _ = 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];
+        const m = s.layout.position.row;
+        i[m] || (i[m] = 0), i[m]++;
+        const T = i[m];
         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);
+        const q = s.layout.position.row * (o.tileHeight + t), E = 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: s,
           style: {
             transform: `translate(${D}px, ${q}px)`,
-            width: `${A}px`,
+            width: `${E}px`,
             height: `${S}px`
           }
         };
       });
-    }), 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", {
+    }), w = 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(), R("div", {
       ref_key: "gridContainer",
       ref: n,
       class: "kong-ui-public-grid-layout"
     }, [
-      (c(!0), C(ne, null, ae(m.value, (l) => (c(), C("div", {
+      (c(!0), R(ne, null, ae(_.value, (l) => (c(), R("div", {
         key: l.key,
         class: se(["grid-cell", {
           "empty-cell": !l.tile
@@ -708,7 +710,7 @@ const Z = {
       ], 6))), 128))
     ], 512));
   }
-}), Ke = /* @__PURE__ */ I(Ue, [["__scopeId", "data-v-066610e8"]]), Fe = { class: "kong-ui-public-dashboard-renderer" }, Me = /* @__PURE__ */ v({
+}), Me = /* @__PURE__ */ C(Fe, [["__scopeId", "data-v-066610e8"]]), Qe = { class: "kong-ui-public-dashboard-renderer" }, We = /* @__PURE__ */ v({
   __name: "DashboardRenderer",
   props: {
     context: {},
@@ -725,22 +727,22 @@ const Z = {
     })));
     return (a, p) => {
       const f = z("KAlert");
-      return c(), C("div", Fe, [
-        y(n) ? (c(), _(Ke, {
+      return c(), R("div", Qe, [
+        y(n) ? (c(), g(Me, {
           key: 1,
           "grid-size": a.config.gridSize,
           "tile-height": a.config.tileHeight,
           tiles: r.value
         }, {
-          tile: b(({ tile: m, style: R }) => [
-            w(Be, {
+          tile: b(({ tile: _, style: w }) => [
+            A(Ue, {
               class: "tile-container",
-              definition: m.meta,
-              height: parseInt(R.height)
+              definition: _.meta,
+              height: parseInt(w.height)
             }, null, 8, ["definition", "height"])
           ]),
           _: 1
-        }, 8, ["grid-size", "tile-height", "tiles"])) : (c(), _(f, {
+        }, 8, ["grid-size", "tile-height", "tiles"])) : (c(), g(f, {
           key: 0,
           appearance: "danger"
         }, {
@@ -752,13 +754,13 @@ const Z = {
       ]);
     };
   }
-}), tt = /* @__PURE__ */ I(Me, [["__scopeId", "data-v-e3197ec0"]]);
+}), ot = /* @__PURE__ */ C(We, [["__scopeId", "data-v-b6d0c971"]]);
 export {
   d as ChartTypes,
-  tt as DashboardRenderer,
-  Ke as GridLayout,
+  ot as DashboardRenderer,
+  Me as GridLayout,
   _e as barChartSchema,
-  et as dashboardConfigSchema,
+  rt as dashboardConfigSchema,
   Se as exploreV4QuerySchema,
   ge as gaugeChartSchema,
   ve as metricCardSchema,

package/dist/dashboard-renderer.umd.js

@@ -1 +1 @@
-(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"})});
+(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,m,U,pe,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(m.ChartMetricDisplay)},reverseDataset:{type:"boolean"},numerator:{type:"number"},syntheticsDataKey:T},required:["type"],additionalProperties:!1},N={type:"object",properties:{type:{type:"string",enum:["golden_signals"]},longCardTitles:{type:"boolean"},description:{type:"string"}},required:["type"]},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"}}},P={type:"object",properties:{query:L,chart:{oneOf:[O,V,z,N]}},required:["query","chart"],additionalProperties:!1},$={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:$},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 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 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:j}}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:h,error:q,isValidating:p}=U(l,async()=>{var b,C,S,A;try{return s==null?void 0:s.queryFn(n.query,g)}catch(y){_.value=((C=(b=y==null?void 0:y.response)==null?void 0:b.data)==null?void 0:C.message)==="Range not allowed for this tier"?o.t("queryDataProvider.timeRangeExceeded"):((A=(S=y==null?void 0:y.response)==null?void 0:S.data)==null?void 0:A.message)||(y==null?void 0:y.message)}finally{i("queryComplete")}}),{state:c,swrvState:d}=M(h,q,p),_=e.ref(null),k=e.computed(()=>c.value===d.ERROR||!!_.value),E=e.computed(()=>!n.queryReady||c.value===d.PENDING);return(b,C)=>{const S=e.resolveComponent("KSkeleton"),A=e.resolveComponent("KEmptyState");return E.value||!e.unref(h)&&!k.value?(e.openBlock(),e.createBlock(S,{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(h)?e.renderSlot(b.$slots,"default",{key:2,data:e.unref(h)}):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]:m.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(m.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"]))}}),f=(t,r)=>{const n=t.__vccOpts||t;for(const[i,o]of r)n[i]=o;return n},X=f(W,[["__scopeId","data-v-ec989cc0"]]),Z={class:"analytics-chart"},H=f(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]:m.ChartTypes.HORIZONTAL_BAR,[u.VerticalBar]:m.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(m.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=f(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]:m.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(m.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={class:"metric-card-tile-wrapper"},oe=f(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.createElementBlock("div",re,[e.createVNode(e.unref(I.MetricsProviderInternal),e.normalizeProps(e.guardReactiveProps(n.value)),{default:e.withCtx(()=>[e.createVNode(e.unref(I.MetricsConsumer),{class:"metric-consumer"})]),_:1},16)]))}}),[["__scopeId","data-v-897181f6"]]),ne={class:"tile-boundary"},ie=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]:oe},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",ne,[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)]))}}),ae="20px",v=f(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:`${q.value}px`}));const r=parseInt(ae),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}),h=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 b=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,S=c.layout.size.rows*n.tileHeight+r*(c.layout.size.rows-1);return{key:`tile-${d}`,tile:c,style:{transform:`translate(${E}px, ${b}px)`,width:`${C}px`,height:`${S}px`}}})}),q=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(h.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"]]),se={class:"kong-ui-public-dashboard-renderer"},ce=f(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",se,[e.unref(i)?(e.openBlock(),e.createBlock(v,{key:1,"grid-size":s.config.gridSize,"tile-height":s.config.tileHeight,tiles:o.value},{tile:e.withCtx(({tile:h,style:q})=>[e.createVNode(ie,{class:"tile-container",definition:h.meta,height:parseInt(q.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-b6d0c971"]]);a.ChartTypes=u,a.DashboardRenderer=ce,a.GridLayout=v,a.barChartSchema=O,a.dashboardConfigSchema=F,a.exploreV4QuerySchema=L,a.gaugeChartSchema=V,a.metricCardSchema=N,a.tileConfigSchema=G,a.tileDefinitionSchema=P,a.tileLayoutSchema=$,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}.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}
+.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)}.metric-card-tile-wrapper[data-v-897181f6]{padding:24px}@media (min-width: 767px){.metric-card-tile-wrapper[data-v-897181f6]{align-items:center;display:flex;height:100%;padding:0 24px}}.metric-card-tile-wrapper[data-v-897181f6] .kong-ui-public-metric-card-container{height:100%}@media (min-width: 767px){.metric-card-tile-wrapper[data-v-897181f6] .kong-ui-public-metric-card-container{height:80%}}.metric-card-tile-wrapper[data-v-897181f6] .kong-ui-public-metric-card-container .metricscard{justify-content:space-evenly}@media (min-width: 767px){.metric-card-tile-wrapper[data-v-897181f6] .kong-ui-public-metric-card-container .metricscard:not(:last-of-type){border-right:1px solid #e0e4ea}}.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-b6d0c971]{border:1px solid #e0e4ea;border-radius:4px;height:100%}

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;AAiGhE,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/dashboard-renderer",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "main": "./dist/dashboard-renderer.umd.js",
   "module": "./dist/dashboard-renderer.es.js",
@@ -53,9 +53,9 @@
     "@kong/kongponents": "^8.126.2",
     "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/analytics-chart": "^2.1.1",
     "@kong-ui-public/i18n": "^2.1.2"
   },
   "dependencies": {