@kong-ui-public/dashboard-renderer 0.1.14 → 0.2.0

package/dist/dashboard-renderer.es.js

@@ -1,10 +1,19 @@
-import { getCurrentInstance as pe, ref as L, reactive as me, onMounted as _e, onUnmounted as ae, watch as ge, isReadonly as be, toRefs as Re, watchEffect as Ae, defineComponent as V, inject as ie, computed as w, resolveComponent as U, unref as I, openBlock as m, createBlock as E, withCtx as P, createTextVNode as oe, toDisplayString as $, renderSlot as Se, createVNode as ue, createElementBlock as x, createCommentVNode as X, resolveDynamicComponent as Ee, normalizeProps as Ce, mergeProps as Te, Fragment as De, renderList as we } from "vue";
-import { ChartMetricDisplay as Ie, ChartTypesSimple as Oe, SimpleChart as qe, ChartTypes as ee, AnalyticsChart as Ve } from "@kong-ui-public/analytics-chart";
-import { createI18n as ke, i18nTComponent as Le } from "@kong-ui-public/i18n";
-var S = /* @__PURE__ */ ((e) => (e.HorizontalBar = "horizontal_bar", e.VerticalBar = "vertical_bar", e.Gauge = "gauge", e))(S || {});
-const se = {
+import { getCurrentInstance as Re, ref as O, reactive as Se, onMounted as ue, onUnmounted as Q, watch as we, isReadonly as Ce, toRefs as Ae, watchEffect as Ee, defineComponent as T, inject as le, computed as _, resolveComponent as M, unref as E, openBlock as v, createBlock as C, withCtx as k, createTextVNode as ce, toDisplayString as de, renderSlot as fe, createVNode as x, createElementBlock as P, resolveDynamicComponent as Te, normalizeProps as De, mergeProps as qe, createCommentVNode as Ie, useCssVars as Oe, Fragment as ke, renderList as Le, normalizeClass as Ve, normalizeStyle as ie } from "vue";
+import { ChartMetricDisplay as Pe, ChartTypesSimple as ze, SimpleChart as Ne, ChartTypes as W, AnalyticsChart as he } from "@kong-ui-public/analytics-chart";
+import { createI18n as je, i18nTComponent as xe } from "@kong-ui-public/i18n";
+const N = 170;
+var w = /* @__PURE__ */ ((e) => (e.HorizontalBar = "horizontal_bar", e.VerticalBar = "vertical_bar", e.Gauge = "gauge", e.TimeseriesLine = "timeseries_line", e))(w || {});
+const J = {
   type: "string"
-}, xe = {
+}, ye = {
+  type: ["object", "array"],
+  items: {
+    type: "string"
+  },
+  additionalProperties: {
+    type: "string"
+  }
+}, He = {
   type: "object",
   properties: {
     type: {
@@ -18,11 +27,36 @@ const se = {
     stacked: {
       type: "boolean"
     },
-    syntheticsDataKey: se
+    showAnnotations: {
+      type: "boolean"
+    },
+    chartDatasetColors: ye,
+    syntheticsDataKey: J
   },
   required: ["type"],
   additionalProperties: !1
-}, Ne = {
+}, Ge = {
+  type: "object",
+  properties: {
+    type: {
+      type: "string",
+      enum: [
+        "timeseries_line"
+        /* TimeseriesLine */
+      ]
+    },
+    stacked: {
+      type: "boolean"
+    },
+    fill: {
+      type: "boolean"
+    },
+    chartDatasetColors: ye,
+    syntheticsDataKey: J
+  },
+  required: ["type"],
+  additionalProperties: !1
+}, Be = {
   type: "object",
   properties: {
     type: {
@@ -34,7 +68,7 @@ const se = {
     },
     metricDisplay: {
       type: "string",
-      enum: Object.values(Ie)
+      enum: Object.values(Pe)
     },
     reverseDataset: {
       type: "boolean"
@@ -42,11 +76,11 @@ const se = {
     numerator: {
       type: "number"
     },
-    syntheticsDataKey: se
+    syntheticsDataKey: J
   },
   required: ["type"],
   additionalProperties: !1
-}, Pe = {
+}, $e = {
   type: "object",
   properties: {
     query: {
@@ -54,214 +88,272 @@ const se = {
       type: "object"
     },
     chart: {
-      oneOf: [xe, Ne]
+      oneOf: [He, Be, Ge]
+    }
+  },
+  required: ["query", "chart"],
+  additionalProperties: !1
+}, Ke = {
+  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
     },
-    title: {
-      type: "string"
+    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: ["chart", "query"],
+  required: ["position", "size"],
   additionalProperties: !1
-}, dt = {
+}, Fe = {
+  type: "object",
+  properties: {
+    definition: $e,
+    layout: Ke
+  },
+  required: ["definition", "layout"],
+  additionalProperties: !1
+}, Rt = {
   type: "object",
   properties: {
     tiles: {
       type: "array",
-      items: Pe
+      items: Fe
+    },
+    tileHeight: {
+      type: "number",
+      description: `Height of each tile in pixels. Default: ${N}`,
+      default: N
+    },
+    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"],
+  required: ["tiles", "gridSize"],
   additionalProperties: !1
-};
-var K = /* @__PURE__ */ new WeakMap(), te = 0;
-function Be(e) {
+}, pe = "analytics-query-provider";
+var K = /* @__PURE__ */ new WeakMap(), ae = 0;
+function Ue(e) {
   if (!e.length)
     return "";
-  for (var n = "arg", t = 0; t < e.length; ++t) {
-    var i = void 0;
-    e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? i = '"' + e[t] + '"' : i = String(e[t]) : K.has(e[t]) ? i = K.get(e[t]) : (i = te, K.set(e[t], te++)), n += "@" + i;
+  for (var r = "arg", t = 0; t < e.length; ++t) {
+    var a = void 0;
+    e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? a = '"' + e[t] + '"' : a = String(e[t]) : K.has(e[t]) ? a = K.get(e[t]) : (a = ae, K.set(e[t], ae++)), r += "@" + a;
   }
-  return n;
+  return r;
 }
-function Ge(e) {
+function Me(e) {
   if (typeof e == "function")
     try {
       e = e();
     } catch {
       e = "";
     }
-  return Array.isArray(e) ? e = Be(e) : e = String(e || ""), e;
+  return Array.isArray(e) ? e = Ue(e) : e = String(e || ""), e;
 }
-var M = (
+var Y = (
   /** @class */
   function() {
-    function e(n) {
-      n === void 0 && (n = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = n;
+    function e(r) {
+      r === void 0 && (r = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = r;
     }
-    return e.prototype.serializeKey = function(n) {
-      return Ge(n);
-    }, e.prototype.get = function(n) {
-      var t = this.serializeKey(n);
+    return e.prototype.serializeKey = function(r) {
+      return Me(r);
+    }, e.prototype.get = function(r) {
+      var t = this.serializeKey(r);
       return this.items.get(t);
-    }, e.prototype.set = function(n, t, i) {
-      var a = this.serializeKey(n), r = i || this.ttl, u = Date.now(), c = {
+    }, e.prototype.set = function(r, t, a) {
+      var i = this.serializeKey(r), n = a || this.ttl, s = Date.now(), d = {
         data: t,
-        createdAt: u,
-        expiresAt: r ? u + r : 1 / 0
+        createdAt: s,
+        expiresAt: n ? s + n : 1 / 0
       };
-      this.dispatchExpire(r, c, a), this.items.set(a, c);
-    }, e.prototype.dispatchExpire = function(n, t, i) {
-      var a = this;
-      n && setTimeout(function() {
-        var r = Date.now(), u = r >= t.expiresAt;
-        u && a.delete(i);
-      }, n);
-    }, e.prototype.delete = function(n) {
-      this.items.delete(n);
+      this.dispatchExpire(n, d, i), this.items.set(i, d);
+    }, e.prototype.dispatchExpire = function(r, t, a) {
+      var i = this;
+      r && setTimeout(function() {
+        var n = Date.now(), s = n >= t.expiresAt;
+        s && i.delete(a);
+      }, r);
+    }, e.prototype.delete = function(r) {
+      this.items.delete(r);
     }, e;
   }()
 );
-function je() {
+function We() {
   return typeof navigator.onLine < "u" ? navigator.onLine : !0;
 }
-function He() {
+function Qe() {
   return typeof document < "u" && typeof document.visibilityState < "u" ? document.visibilityState !== "hidden" : !0;
 }
-var Ke = function(e) {
-  return fetch(e).then(function(n) {
-    return n.json();
+var Je = function(e) {
+  return fetch(e).then(function(r) {
+    return r.json();
   });
 };
-const z = {
-  isOnline: je,
-  isDocumentVisible: He,
-  fetcher: Ke
+const F = {
+  isOnline: We,
+  isDocumentVisible: Qe,
+  fetcher: Je
 };
-var R = globalThis && globalThis.__assign || function() {
-  return R = Object.assign || function(e) {
-    for (var n, t = 1, i = arguments.length; t < i; t++) {
-      n = arguments[t];
-      for (var a in n)
-        Object.prototype.hasOwnProperty.call(n, a) && (e[a] = n[a]);
+var S = globalThis && globalThis.__assign || function() {
+  return S = Object.assign || function(e) {
+    for (var r, t = 1, a = arguments.length; t < a; t++) {
+      r = arguments[t];
+      for (var i in r)
+        Object.prototype.hasOwnProperty.call(r, i) && (e[i] = r[i]);
     }
     return e;
-  }, R.apply(this, arguments);
-}, T = globalThis && globalThis.__awaiter || function(e, n, t, i) {
-  function a(r) {
-    return r instanceof t ? r : new t(function(u) {
-      u(r);
+  }, S.apply(this, arguments);
+}, q = globalThis && globalThis.__awaiter || function(e, r, t, a) {
+  function i(n) {
+    return n instanceof t ? n : new t(function(s) {
+      s(n);
     });
   }
-  return new (t || (t = Promise))(function(r, u) {
-    function c(l) {
+  return new (t || (t = Promise))(function(n, s) {
+    function d(l) {
       try {
-        o(i.next(l));
-      } catch (h) {
-        u(h);
+        o(a.next(l));
+      } catch (c) {
+        s(c);
       }
     }
-    function v(l) {
+    function h(l) {
       try {
-        o(i.throw(l));
-      } catch (h) {
-        u(h);
+        o(a.throw(l));
+      } catch (c) {
+        s(c);
       }
     }
     function o(l) {
-      l.done ? r(l.value) : a(l.value).then(c, v);
+      l.done ? n(l.value) : i(l.value).then(d, h);
     }
-    o((i = i.apply(e, n || [])).next());
+    o((a = a.apply(e, r || [])).next());
   });
-}, D = globalThis && globalThis.__generator || function(e, n) {
+}, I = globalThis && globalThis.__generator || function(e, r) {
   var t = { label: 0, sent: function() {
-    if (r[0] & 1)
-      throw r[1];
-    return r[1];
-  }, trys: [], ops: [] }, i, a, r, u;
-  return u = { next: c(0), throw: c(1), return: c(2) }, typeof Symbol == "function" && (u[Symbol.iterator] = function() {
+    if (n[0] & 1)
+      throw n[1];
+    return n[1];
+  }, trys: [], ops: [] }, a, i, n, s;
+  return s = { next: d(0), throw: d(1), return: d(2) }, typeof Symbol == "function" && (s[Symbol.iterator] = function() {
     return this;
-  }), u;
-  function c(o) {
+  }), s;
+  function d(o) {
     return function(l) {
-      return v([o, l]);
+      return h([o, l]);
     };
   }
-  function v(o) {
-    if (i)
+  function h(o) {
+    if (a)
       throw new TypeError("Generator is already executing.");
     for (; t; )
       try {
-        if (i = 1, a && (r = o[0] & 2 ? a.return : o[0] ? a.throw || ((r = a.return) && r.call(a), 0) : a.next) && !(r = r.call(a, o[1])).done)
-          return r;
-        switch (a = 0, r && (o = [o[0] & 2, r.value]), o[0]) {
+        if (a = 1, i && (n = o[0] & 2 ? i.return : o[0] ? i.throw || ((n = i.return) && n.call(i), 0) : i.next) && !(n = n.call(i, o[1])).done)
+          return n;
+        switch (i = 0, n && (o = [o[0] & 2, n.value]), o[0]) {
           case 0:
           case 1:
-            r = o;
+            n = o;
             break;
           case 4:
             return t.label++, { value: o[1], done: !1 };
           case 5:
-            t.label++, a = o[1], o = [0];
+            t.label++, i = o[1], o = [0];
             continue;
           case 7:
             o = t.ops.pop(), t.trys.pop();
             continue;
           default:
-            if (r = t.trys, !(r = r.length > 0 && r[r.length - 1]) && (o[0] === 6 || o[0] === 2)) {
+            if (n = t.trys, !(n = n.length > 0 && n[n.length - 1]) && (o[0] === 6 || o[0] === 2)) {
               t = 0;
               continue;
             }
-            if (o[0] === 3 && (!r || o[1] > r[0] && o[1] < r[3])) {
+            if (o[0] === 3 && (!n || o[1] > n[0] && o[1] < n[3])) {
               t.label = o[1];
               break;
             }
-            if (o[0] === 6 && t.label < r[1]) {
-              t.label = r[1], r = o;
+            if (o[0] === 6 && t.label < n[1]) {
+              t.label = n[1], n = o;
               break;
             }
-            if (r && t.label < r[2]) {
-              t.label = r[2], t.ops.push(o);
+            if (n && t.label < n[2]) {
+              t.label = n[2], t.ops.push(o);
               break;
             }
-            r[2] && t.ops.pop(), t.trys.pop();
+            n[2] && t.ops.pop(), t.trys.pop();
             continue;
         }
-        o = n.call(e, t);
+        o = r.call(e, t);
       } catch (l) {
-        o = [6, l], a = 0;
+        o = [6, l], i = 0;
       } finally {
-        i = r = 0;
+        a = n = 0;
       }
     if (o[0] & 5)
       throw o[1];
     return { value: o[0] ? o[1] : void 0, done: !0 };
   }
-}, ze = globalThis && globalThis.__read || function(e, n) {
+}, Ye = globalThis && globalThis.__read || function(e, r) {
   var t = typeof Symbol == "function" && e[Symbol.iterator];
   if (!t)
     return e;
-  var i = t.call(e), a, r = [], u;
+  var a = t.call(e), i, n = [], s;
   try {
-    for (; (n === void 0 || n-- > 0) && !(a = i.next()).done; )
-      r.push(a.value);
-  } catch (c) {
-    u = { error: c };
+    for (; (r === void 0 || r-- > 0) && !(i = a.next()).done; )
+      n.push(i.value);
+  } catch (d) {
+    s = { error: d };
   } finally {
     try {
-      a && !a.done && (t = i.return) && t.call(i);
+      i && !i.done && (t = a.return) && t.call(a);
     } finally {
-      if (u)
-        throw u.error;
+      if (s)
+        throw s.error;
     }
   }
-  return r;
-}, Fe = globalThis && globalThis.__spreadArray || function(e, n, t) {
+  return n;
+}, Ze = globalThis && globalThis.__spreadArray || function(e, r, t) {
   if (t || arguments.length === 2)
-    for (var i = 0, a = n.length, r; i < a; i++)
-      (r || !(i in n)) && (r || (r = Array.prototype.slice.call(n, 0, i)), r[i] = n[i]);
-  return e.concat(r || Array.prototype.slice.call(n));
-}, le = new M(), N = new M(), F = new M(), ce = {
-  cache: le,
+    for (var a = 0, i = r.length, n; a < i; a++)
+      (n || !(a in r)) && (n || (n = Array.prototype.slice.call(r, 0, a)), n[a] = r[a]);
+  return e.concat(n || Array.prototype.slice.call(r));
+}, ve = new Y(), j = new Y(), U = new Y(), ge = {
+  cache: ve,
   refreshInterval: 0,
   ttl: 0,
   serverTTL: 1e3,
@@ -271,120 +363,120 @@ var R = globalThis && globalThis.__assign || function() {
   shouldRetryOnError: !0,
   errorRetryInterval: 5e3,
   errorRetryCount: 5,
-  fetcher: z.fetcher,
-  isOnline: z.isOnline,
-  isDocumentVisible: z.isDocumentVisible
+  fetcher: F.fetcher,
+  isOnline: F.isOnline,
+  isDocumentVisible: F.isDocumentVisible
 };
-function Ue(e, n, t) {
-  var i = N.get(e);
-  if (i)
-    i.data.push(n);
+function Xe(e, r, t) {
+  var a = j.get(e);
+  if (a)
+    a.data.push(r);
   else {
-    var a = 5e3;
-    N.set(e, [n], t > 0 ? t + a : t);
+    var i = 5e3;
+    j.set(e, [r], t > 0 ? t + i : t);
   }
 }
-function $e(e, n, t) {
-  if (t.isDocumentVisible() && !(t.errorRetryCount !== void 0 && n > t.errorRetryCount)) {
-    var i = Math.min(n || 0, t.errorRetryCount), a = i * t.errorRetryInterval;
+function et(e, r, t) {
+  if (t.isDocumentVisible() && !(t.errorRetryCount !== void 0 && r > t.errorRetryCount)) {
+    var a = Math.min(r || 0, t.errorRetryCount), i = a * t.errorRetryInterval;
     setTimeout(function() {
-      e(null, { errorRetryCount: i + 1, shouldRetryOnError: !0 });
-    }, a);
+      e(null, { errorRetryCount: a + 1, shouldRetryOnError: !0 });
+    }, i);
   }
 }
-var re = function(e, n, t, i) {
-  return t === void 0 && (t = le), i === void 0 && (i = ce.ttl), T(void 0, void 0, void 0, function() {
-    var a, r, u, c, v, o, l;
-    return D(this, function(h) {
-      switch (h.label) {
+var oe = function(e, r, t, a) {
+  return t === void 0 && (t = ve), a === void 0 && (a = ge.ttl), q(void 0, void 0, void 0, function() {
+    var i, n, s, d, h, o, l;
+    return I(this, function(c) {
+      switch (c.label) {
         case 0:
-          if (!Qe(n))
+          if (!rt(r))
             return [3, 5];
-          h.label = 1;
+          c.label = 1;
         case 1:
-          return h.trys.push([1, 3, , 4]), [4, n];
+          return c.trys.push([1, 3, , 4]), [4, r];
         case 2:
-          return a = h.sent(), [3, 4];
+          return i = c.sent(), [3, 4];
         case 3:
-          return c = h.sent(), r = c, [3, 4];
+          return d = c.sent(), n = d, [3, 4];
         case 4:
           return [3, 6];
         case 5:
-          a = n, h.label = 6;
+          i = r, c.label = 6;
         case 6:
-          if (u = !1, v = { data: a, error: r, isValidating: u }, typeof a < "u")
+          if (s = !1, h = { data: i, error: n, isValidating: s }, typeof i < "u")
             try {
-              t.set(e, v, i);
+              t.set(e, h, a);
             } catch (y) {
               console.error("swrv(mutate): failed to set cache", y);
             }
-          return o = N.get(e), o && o.data.length && (l = o.data.filter(function(y) {
+          return o = j.get(e), o && o.data.length && (l = o.data.filter(function(y) {
             return y.key === e;
-          }), l.forEach(function(y, d) {
-            typeof v.data < "u" && (y.data = v.data), y.error = v.error, y.isValidating = v.isValidating;
-            var _ = d === l.length - 1;
-            _ || delete l[d];
-          }), l = l.filter(Boolean)), [2, v];
+          }), l.forEach(function(y, f) {
+            typeof h.data < "u" && (y.data = h.data), y.error = h.error, y.isValidating = h.isValidating;
+            var g = f === l.length - 1;
+            g || delete l[f];
+          }), l = l.filter(Boolean)), [2, h];
       }
     });
   });
 };
-function Me() {
-  for (var e = this, n = [], t = 0; t < arguments.length; t++)
-    n[t] = arguments[t];
-  var i, a, r = R({}, ce), u = !1, c = !1, v = pe(), o = (v == null ? void 0 : v.proxy) || v;
+function tt() {
+  for (var e = this, r = [], t = 0; t < arguments.length; t++)
+    r[t] = arguments[t];
+  var a, i, n = S({}, ge), s = !1, d = !1, h = Re(), o = (h == null ? void 0 : h.proxy) || h;
   if (!o)
     return console.error("Could not get current instance, check to make sure that `useSwrv` is declared in the top level of the setup function."), null;
   var l = (o == null ? void 0 : o.$isServer) || !1;
-  n.length >= 1 && (i = n[0]), n.length >= 2 && (a = n[1]), n.length > 2 && (r = R(R({}, r), n[2]));
-  var h = l ? r.serverTTL : r.ttl, y = typeof i == "function" ? i : L(i);
-  typeof a > "u" && (a = r.fetcher);
-  var d = null;
-  d || (d = me({
+  r.length >= 1 && (a = r[0]), r.length >= 2 && (i = r[1]), r.length > 2 && (n = S(S({}, n), r[2]));
+  var c = l ? n.serverTTL : n.ttl, y = typeof a == "function" ? a : O(a);
+  typeof i > "u" && (i = n.fetcher);
+  var f = null;
+  f || (f = Se({
     data: void 0,
     error: void 0,
     isValidating: !0,
     key: null
   }));
-  var _ = function(f, s) {
-    return T(e, void 0, void 0, function() {
-      var Q, p, O, q, B, W, G, J = this;
-      return D(this, function(j) {
-        switch (j.label) {
+  var g = function(p, u) {
+    return q(e, void 0, void 0, function() {
+      var X, m, L, V, H, ee, G, te = this;
+      return I(this, function(B) {
+        switch (B.label) {
           case 0:
-            return Q = d.data === void 0, p = y.value, p ? (O = r.cache.get(p), q = O && O.data, d.isValidating = !0, q && (d.data = q.data, d.error = q.error), B = f || a, !B || !r.isDocumentVisible() && !Q || (s == null ? void 0 : s.forceRevalidate) !== void 0 && !(s != null && s.forceRevalidate) ? (d.isValidating = !1, [
+            return X = f.data === void 0, m = y.value, m ? (L = n.cache.get(m), V = L && L.data, f.isValidating = !0, V && (f.data = V.data, f.error = V.error), H = p || i, !H || !n.isDocumentVisible() && !X || (u == null ? void 0 : u.forceRevalidate) !== void 0 && !(u != null && u.forceRevalidate) ? (f.isValidating = !1, [
               2
               /*return*/
-            ]) : O && (W = !!(Date.now() - O.createdAt >= r.dedupingInterval || s != null && s.forceRevalidate), !W) ? (d.isValidating = !1, [
+            ]) : L && (ee = !!(Date.now() - L.createdAt >= n.dedupingInterval || u != null && u.forceRevalidate), !ee) ? (f.isValidating = !1, [
               2
               /*return*/
             ]) : (G = function() {
-              return T(J, void 0, void 0, function() {
-                var A, Y, H, Z;
-                return D(this, function(k) {
-                  switch (k.label) {
+              return q(te, void 0, void 0, function() {
+                var A, re, $, ne;
+                return I(this, function(z) {
+                  switch (z.label) {
                     case 0:
-                      return A = F.get(p), A ? [3, 2] : (Y = Array.isArray(p) ? p : [p], H = B.apply(void 0, Fe([], ze(Y), !1)), F.set(p, H, r.dedupingInterval), [4, re(p, H, r.cache, h)]);
+                      return A = U.get(m), A ? [3, 2] : (re = Array.isArray(m) ? m : [m], $ = H.apply(void 0, Ze([], Ye(re), !1)), U.set(m, $, n.dedupingInterval), [4, oe(m, $, n.cache, c)]);
                     case 1:
-                      return k.sent(), [3, 4];
+                      return z.sent(), [3, 4];
                     case 2:
-                      return [4, re(p, A.data, r.cache, h)];
+                      return [4, oe(m, A.data, n.cache, c)];
                     case 3:
-                      k.sent(), k.label = 4;
+                      z.sent(), z.label = 4;
                     case 4:
-                      return d.isValidating = !1, F.delete(p), d.error !== void 0 && (Z = !u && r.shouldRetryOnError && (s ? s.shouldRetryOnError : !0), Z && $e(_, s ? s.errorRetryCount : 1, r)), [
+                      return f.isValidating = !1, U.delete(m), f.error !== void 0 && (ne = !s && n.shouldRetryOnError && (u ? u.shouldRetryOnError : !0), ne && et(g, u ? u.errorRetryCount : 1, n)), [
                         2
                         /*return*/
                       ];
                   }
                 });
               });
-            }, q && r.revalidateDebounce ? (setTimeout(function() {
-              return T(J, void 0, void 0, function() {
-                return D(this, function(A) {
+            }, V && n.revalidateDebounce ? (setTimeout(function() {
+              return q(te, void 0, void 0, function() {
+                return I(this, function(A) {
                   switch (A.label) {
                     case 0:
-                      return u ? [3, 2] : [4, G()];
+                      return s ? [3, 2] : [4, G()];
                     case 1:
                       A.sent(), A.label = 2;
                     case 2:
@@ -395,14 +487,14 @@ function Me() {
                   }
                 });
               });
-            }, r.revalidateDebounce), [3, 3]) : [3, 1])) : [
+            }, n.revalidateDebounce), [3, 3]) : [3, 1])) : [
               2
               /*return*/
             ];
           case 1:
             return [4, G()];
           case 2:
-            j.sent(), j.label = 3;
+            B.sent(), B.label = 3;
           case 3:
             return [
               2
@@ -411,26 +503,26 @@ function Me() {
         }
       });
     });
-  }, b = function() {
-    return T(e, void 0, void 0, function() {
-      return D(this, function(f) {
-        return [2, _(null, { shouldRetryOnError: !1 })];
+  }, R = function() {
+    return q(e, void 0, void 0, function() {
+      return I(this, function(p) {
+        return [2, g(null, { shouldRetryOnError: !1 })];
       });
     });
-  }, g = null;
-  _e(function() {
-    var f = function() {
-      return T(e, void 0, void 0, function() {
-        return D(this, function(s) {
-          switch (s.label) {
+  }, b = null;
+  ue(function() {
+    var p = function() {
+      return q(e, void 0, void 0, function() {
+        return I(this, function(u) {
+          switch (u.label) {
             case 0:
-              return !d.error && r.isOnline() ? [4, _()] : [3, 2];
+              return !f.error && n.isOnline() ? [4, g()] : [3, 2];
             case 1:
-              return s.sent(), [3, 3];
+              return u.sent(), [3, 3];
             case 2:
-              g && clearTimeout(g), s.label = 3;
+              b && clearTimeout(b), u.label = 3;
             case 3:
-              return r.refreshInterval && !u && (g = setTimeout(f, r.refreshInterval)), [
+              return n.refreshInterval && !s && (b = setTimeout(p, n.refreshInterval)), [
                 2
                 /*return*/
               ];
@@ -438,243 +530,371 @@ function Me() {
         });
       });
     };
-    r.refreshInterval && (g = setTimeout(f, r.refreshInterval)), r.revalidateOnFocus && (document.addEventListener("visibilitychange", b, !1), window.addEventListener("focus", b, !1));
-  }), ae(function() {
-    u = !0, g && clearTimeout(g), r.revalidateOnFocus && (document.removeEventListener("visibilitychange", b, !1), window.removeEventListener("focus", b, !1));
-    var f = N.get(y.value);
-    f && (f.data = f.data.filter(function(s) {
-      return s !== d;
+    n.refreshInterval && (b = setTimeout(p, n.refreshInterval)), n.revalidateOnFocus && (document.addEventListener("visibilitychange", R, !1), window.addEventListener("focus", R, !1));
+  }), Q(function() {
+    s = !0, b && clearTimeout(b), n.revalidateOnFocus && (document.removeEventListener("visibilitychange", R, !1), window.removeEventListener("focus", R, !1));
+    var p = j.get(y.value);
+    p && (p.data = p.data.filter(function(u) {
+      return u !== f;
     }));
   });
   try {
-    ge(y, function(f) {
-      be(y) || (y.value = f), d.key = f, d.isValidating = !!f, Ue(y.value, d, h), !l && !c && y.value && _(), c = !1;
+    we(y, function(p) {
+      Ce(y) || (y.value = p), f.key = p, f.isValidating = !!p, Xe(y.value, f, c), !l && !d && y.value && g(), d = !1;
     }, {
       immediate: !0
     });
   } catch {
   }
-  var C = R(R({}, Re(d)), { mutate: function(f, s) {
-    return _(f, R(R({}, s), { forceRevalidate: !0 }));
+  var D = S(S({}, Ae(f)), { mutate: function(p, u) {
+    return g(p, S(S({}, u), { forceRevalidate: !0 }));
   } });
-  return C;
+  return D;
 }
-function Qe(e) {
+function rt(e) {
   return e !== null && typeof e == "object" && typeof e.then == "function";
 }
-const de = "analytics-query-provider";
-var fe = /* @__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))(fe || {});
-const We = (e) => {
-  var n, t, i, a, r;
+var me = /* @__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))(me || {});
+const nt = (e) => {
+  var r, t, a, i, n;
   return e ? !!// TODO: revisit: currently only the first check ever matters?
-  ((n = Object.keys(e)) != null && n.length || (t = e.data) != null && t.length || (a = (i = e.data) == null ? void 0 : i.data) != null && a.length || !((r = e.data) != null && r.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
+  ((r = Object.keys(e)) != null && r.length || (t = e.data) != null && t.length || (i = (a = e.data) == null ? void 0 : a.data) != null && i.length || !((n = e.data) != null && n.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
 };
-function Je(e = L({}), n, t, i = We) {
-  const a = L(
+function it(e = O({}), r, t, a = nt) {
+  const i = O(
     "PENDING"
     /* PENDING */
   );
-  return Ae(() => {
-    const r = i(e.value);
-    if (e.value && r && t.value) {
-      a.value = "VALIDATING_HAS_DATA";
+  return Ee(() => {
+    const n = a(e.value);
+    if (e.value && n && t.value) {
+      i.value = "VALIDATING_HAS_DATA";
       return;
     }
     if (e.value && t.value) {
-      a.value = "VALIDATING";
+      i.value = "VALIDATING";
       return;
     }
-    if (e.value && n.value) {
-      a.value = "STALE_IF_ERROR";
+    if (e.value && r.value) {
+      i.value = "STALE_IF_ERROR";
       return;
     }
-    if (e.value === void 0 && !n.value) {
-      a.value = "PENDING";
+    if (e.value === void 0 && !r.value) {
+      i.value = "PENDING";
       return;
     }
-    if (e.value && !n.value && r) {
-      a.value = "SUCCESS_HAS_DATA";
+    if (e.value && !r.value && n) {
+      i.value = "SUCCESS_HAS_DATA";
       return;
     }
-    if (e.value && !n.value) {
-      a.value = "SUCCESS";
+    if (e.value && !r.value) {
+      i.value = "SUCCESS";
       return;
     }
-    e.value === void 0 && n && (a.value = "ERROR");
+    e.value === void 0 && r && (i.value = "ERROR");
   }), {
-    state: a,
-    swrvState: fe
+    state: i,
+    swrvState: me
   };
 }
-const Ye = {
+const at = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard."
-}, Ze = {
+}, ot = {
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
-}, Xe = {
-  renderer: Ye,
-  queryDataProvider: Ze
+}, st = {
+  renderer: at,
+  queryDataProvider: ot
 };
-function et() {
-  const e = ke("en-us", Xe);
+function ut() {
+  const e = je("en-us", st);
   return {
     i18n: e,
-    i18nT: Le(e)
+    i18nT: xe(e)
     // Translation component <i18n-t>
   };
 }
-const ve = {
-  useI18n: et
-}, ye = /* @__PURE__ */ V({
+const be = {
+  useI18n: ut
+}, Z = /* @__PURE__ */ T({
   __name: "QueryDataProvider",
   props: {
     query: {},
     queryReady: { type: Boolean }
   },
   emits: ["queryComplete"],
-  setup(e, { emit: n }) {
-    const t = e, { i18n: i } = ve.useI18n(), a = ie(de), r = () => t.queryReady && a ? JSON.stringify(t.query) : null, u = new AbortController();
-    ae(() => {
-      u.abort();
+  setup(e, { emit: r }) {
+    const t = e, { i18n: a } = be.useI18n(), i = le(pe), n = () => t.queryReady && i ? JSON.stringify(t.query) : null, s = new AbortController();
+    Q(() => {
+      s.abort();
     });
-    const { data: c, error: v, isValidating: o } = Me(r, async () => {
-      var b, g, C, f;
+    const { data: d, error: h, isValidating: o } = tt(n, async () => {
+      var R, b, D, p;
       try {
-        return a == null ? void 0 : a.query(t.query, u);
-      } catch (s) {
-        y.value = ((g = (b = s == null ? void 0 : s.response) == null ? void 0 : b.data) == null ? void 0 : g.message) === "Range not allowed for this tier" ? i.t("queryDataProvider.timeRangeExceeded") : ((f = (C = s == null ? void 0 : s.response) == null ? void 0 : C.data) == null ? void 0 : f.message) || (s == null ? void 0 : s.message);
+        return i == null ? void 0 : i.query(t.query, s);
+      } catch (u) {
+        y.value = ((b = (R = u == null ? void 0 : u.response) == null ? void 0 : R.data) == null ? void 0 : b.message) === "Range not allowed for this tier" ? a.t("queryDataProvider.timeRangeExceeded") : ((p = (D = u == null ? void 0 : u.response) == null ? void 0 : D.data) == null ? void 0 : p.message) || (u == null ? void 0 : u.message);
       } finally {
-        n("queryComplete");
+        r("queryComplete");
       }
-    }), { state: l, swrvState: h } = Je(c, v, o), y = L(null), d = w(() => l.value === h.ERROR || !!y.value), _ = w(() => !t.queryReady || l.value === h.PENDING);
-    return (b, g) => {
-      const C = U("KSkeleton"), f = U("KEmptyState");
-      return _.value || !I(c) && !d.value ? (m(), E(C, {
+    }), { state: l, swrvState: c } = it(d, h, o), y = O(null), f = _(() => l.value === c.ERROR || !!y.value), g = _(() => !t.queryReady || l.value === c.PENDING);
+    return (R, b) => {
+      const D = M("KSkeleton"), p = M("KEmptyState");
+      return g.value || !E(d) && !f.value ? (v(), C(D, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : !_.value && d.value ? (m(), E(f, {
+      })) : !g.value && f.value ? (v(), C(p, {
         key: 1,
         "cta-is-hidden": "",
         "data-testid": "chart-empty-state",
         "is-error": ""
       }, {
-        message: P(() => [
-          oe($(y.value), 1)
+        message: k(() => [
+          ce(de(y.value), 1)
         ]),
         _: 1
-      })) : Se(b.$slots, "default", {
+      })) : fe(R.$slots, "default", {
         key: 2,
-        data: I(c)
+        data: E(d)
       });
     };
   }
-}), tt = /* @__PURE__ */ V({
+}), lt = /* @__PURE__ */ T({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
     queryReady: { type: Boolean },
-    chartOptions: {}
+    chartOptions: {},
+    height: {}
   },
   setup(e) {
-    const n = e, t = {
-      [S.Gauge]: Oe.GAUGE
-    }, i = w(() => ({
-      ...n.chartOptions,
-      type: t[n.chartOptions.type]
+    const r = e, t = {
+      [w.Gauge]: ze.GAUGE
+    }, a = _(() => ({
+      ...r.chartOptions,
+      type: t[r.chartOptions.type]
     }));
-    return (a, r) => (m(), E(ye, {
-      query: n.query,
-      "query-ready": n.queryReady
+    return (i, n) => (v(), C(Z, {
+      query: i.query,
+      "query-ready": i.queryReady
     }, {
-      default: P(({ data: u }) => [
-        ue(I(qe), {
-          "chart-data": u,
-          "chart-options": i.value,
-          "synthetics-data-key": n.chartOptions.syntheticsDataKey
-        }, null, 8, ["chart-data", "chart-options", "synthetics-data-key"])
+      default: k(({ data: s }) => [
+        x(E(Ne), {
+          "chart-data": s,
+          "chart-options": a.value,
+          height: `${i.height}px`,
+          "synthetics-data-key": i.chartOptions.syntheticsDataKey
+        }, null, 8, ["chart-data", "chart-options", "height", "synthetics-data-key"])
       ]),
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), ne = /* @__PURE__ */ V({
-  __name: "AnalyticsChartRenderer",
+}), se = /* @__PURE__ */ T({
+  __name: "BarChartRenderer",
   props: {
     query: {},
     queryReady: { type: Boolean },
-    chartOptions: {}
+    chartOptions: {},
+    height: {}
   },
   setup(e) {
-    const n = e, t = {
-      [S.HorizontalBar]: ee.HORIZONTAL_BAR,
-      [S.VerticalBar]: ee.VERTICAL_BAR
-    }, i = w(() => ({
-      type: t[n.chartOptions.type]
+    const r = e, t = {
+      [w.HorizontalBar]: W.HORIZONTAL_BAR,
+      [w.VerticalBar]: W.VERTICAL_BAR
+    }, a = _(() => ({
+      type: t[r.chartOptions.type],
+      stacked: r.chartOptions.stacked,
+      chartDatasetColors: r.chartOptions.chartDatasetColors
     }));
-    return (a, r) => (m(), E(ye, {
-      query: n.query,
-      "query-ready": n.queryReady
+    return (i, n) => (v(), C(Z, {
+      query: i.query,
+      "query-ready": i.queryReady
     }, {
-      default: P(({ data: u }) => [
-        ue(I(Ve), {
-          "chart-data": u,
-          "chart-options": i.value,
+      default: k(({ data: s }) => [
+        x(E(he), {
+          "chart-data": s,
+          "chart-options": a.value,
           "chart-title": "",
+          height: `${i.height}px`,
+          "legend-position": "bottom",
+          "show-annotations": i.chartOptions.showAnnotations,
           "tooltip-title": ""
-        }, null, 8, ["chart-data", "chart-options"])
+        }, null, 8, ["chart-data", "chart-options", "height", "show-annotations"])
       ]),
       _: 1
     }, 8, ["query", "query-ready"]));
   }
-}), rt = { class: "tile-boundary" }, nt = { key: 0 }, at = /* @__PURE__ */ V({
+}), ct = /* @__PURE__ */ T({
+  __name: "TimeseriesChartRenderer",
+  props: {
+    query: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {}
+  },
+  setup(e) {
+    const r = e, t = {
+      [w.TimeseriesLine]: W.TIMESERIES_LINE
+      // TODO: Timeseries bar
+    }, a = _(() => ({
+      type: t[r.chartOptions.type],
+      fill: r.chartOptions.fill,
+      stacked: r.chartOptions.stacked,
+      chartDatasetColors: r.chartOptions.chartDatasetColors
+    }));
+    return (i, n) => (v(), C(Z, {
+      query: i.query,
+      "query-ready": i.queryReady
+    }, {
+      default: k(({ data: s }) => [
+        x(E(he), {
+          "chart-data": s,
+          "chart-options": a.value,
+          "chart-title": "",
+          height: `${i.height}px`,
+          "legend-position": "bottom",
+          "tooltip-title": ""
+        }, null, 8, ["chart-data", "chart-options", "height"])
+      ]),
+      _: 1
+    }, 8, ["query", "query-ready"]));
+  }
+}), dt = { class: "tile-boundary" }, ft = /* @__PURE__ */ T({
   __name: "DashboardTile",
   props: {
-    definition: {}
+    definition: {
+      type: Object,
+      required: !0
+    },
+    height: {
+      type: Number,
+      required: !1,
+      default: () => N
+    }
   },
   setup(e) {
-    const n = e, t = w(() => n.definition.title), i = {
-      [S.HorizontalBar]: ne,
-      [S.VerticalBar]: ne,
-      [S.Gauge]: tt
-    }, a = w(() => ({
-      component: i[n.definition.chart.type],
+    const r = e, t = {
+      [w.TimeseriesLine]: ct,
+      [w.HorizontalBar]: se,
+      [w.VerticalBar]: se,
+      [w.Gauge]: lt
+    }, a = _(() => ({
+      component: t[r.definition.chart.type],
       rendererProps: {
-        query: n.definition.query,
+        query: r.definition.query,
         queryReady: !0,
         // TODO: Pipelining
-        chartOptions: n.definition.chart
+        chartOptions: r.definition.chart,
+        height: r.height
       }
     }));
-    return (r, u) => (m(), x("div", rt, [
-      t.value ? (m(), x("h2", nt, $(t.value), 1)) : X("", !0),
-      a.value ? (m(), E(Ee(a.value.component), Ce(Te({ key: 1 }, a.value.rendererProps)), null, 16)) : X("", !0)
+    return (i, n) => (v(), P("div", dt, [
+      a.value ? (v(), C(Te(a.value.component), De(qe({ key: 0 }, a.value.rendererProps)), null, 16)) : Ie("", !0)
     ]));
   }
+}), ht = "20px", yt = /* @__PURE__ */ T({
+  __name: "GridLayout",
+  props: {
+    gridSize: {
+      type: Object,
+      required: !0
+    },
+    tileHeight: {
+      type: Number,
+      required: !1,
+      default: () => N
+    },
+    tiles: {
+      type: Array,
+      required: !0
+    }
+  },
+  setup(e) {
+    const r = e;
+    Oe((o) => ({
+      "01f27c19": `${h.value}px`
+    }));
+    const t = parseInt(ht), a = O(null), i = O(0), n = new ResizeObserver((o) => {
+      i.value = o[0].contentRect.width;
+    });
+    ue(() => {
+      a.value && n.observe(a.value);
+    }), Q(() => {
+      a.value && n.unobserve(a.value);
+    });
+    const s = _(() => i.value / r.gridSize.cols - t), d = _(() => r.tiles.map((o, l) => {
+      const c = o.layout.position.col * (s.value + t), y = o.layout.position.row * (r.tileHeight + t), f = o.layout.size.cols * s.value + t * (o.layout.size.cols - 1), g = o.layout.size.rows * r.tileHeight + t * (o.layout.size.rows - 1);
+      return {
+        key: `tile-${l}`,
+        tile: o,
+        style: {
+          transform: `translate(${c}px, ${y}px)`,
+          width: `${f}px`,
+          height: `${g}px`
+        }
+      };
+    })), h = _(() => Math.max(...r.tiles.map((l) => l.layout.position.row + l.layout.size.rows)) * r.tileHeight + t * r.gridSize.rows);
+    return (o, l) => (v(), P("div", {
+      ref_key: "gridContainer",
+      ref: a,
+      class: "kong-ui-public-grid-layout"
+    }, [
+      (v(!0), P(ke, null, Le(d.value, (c) => (v(), P("div", {
+        key: c.key,
+        class: Ve(["grid-cell", {
+          "empty-cell": !c.tile
+        }]),
+        style: ie(c.style)
+      }, [
+        fe(o.$slots, "tile", {
+          style: ie(c.style),
+          tile: c.tile
+        }, void 0, !0)
+      ], 6))), 128))
+    ], 512));
+  }
 });
-const he = (e, n) => {
+const _e = (e, r) => {
   const t = e.__vccOpts || e;
-  for (const [i, a] of n)
-    t[i] = a;
+  for (const [a, i] of r)
+    t[a] = i;
   return t;
-}, it = /* @__PURE__ */ he(at, [["__scopeId", "data-v-eb4fff82"]]), ot = { class: "kong-ui-public-dashboard-renderer" }, ut = /* @__PURE__ */ V({
+}, pt = /* @__PURE__ */ _e(yt, [["__scopeId", "data-v-b6cb2d7b"]]), vt = { class: "kong-ui-public-dashboard-renderer" }, gt = /* @__PURE__ */ T({
   __name: "DashboardRenderer",
   props: {
     context: {},
-    definition: {}
+    config: {}
   },
   setup(e) {
-    const n = e, { i18n: t } = ve.useI18n(), i = ie(de);
-    return (a, r) => {
-      const u = U("KAlert");
-      return m(), x("div", ot, [
-        I(i) ? (m(!0), x(De, { key: 1 }, we(n.definition.tiles, (c, v) => (m(), E(it, {
-          key: v,
-          definition: c
-        }, null, 8, ["definition"]))), 128)) : (m(), E(u, {
+    const r = e, { i18n: t } = be.useI18n(), a = le(pe), i = _(() => r.config.tiles.map((n, s) => ({
+      layout: n.layout,
+      meta: n.definition,
+      // Add a unique key to each tile internally.
+      id: s
+    })));
+    return (n, s) => {
+      const d = M("KAlert");
+      return v(), P("div", vt, [
+        E(a) ? (v(), C(pt, {
+          key: 1,
+          "grid-size": n.config.gridSize,
+          "tile-height": n.config.tileHeight,
+          tiles: i.value
+        }, {
+          tile: k(({ tile: h, style: o }) => [
+            x(ft, {
+              class: "tile-container",
+              definition: h.meta,
+              height: parseInt(o.height)
+            }, null, 8, ["definition", "height"])
+          ]),
+          _: 1
+        }, 8, ["grid-size", "tile-height", "tiles"])) : (v(), C(d, {
           key: 0,
           appearance: "danger"
         }, {
-          default: P(() => [
-            oe($(I(t).t("renderer.noQueryBridge")), 1)
+          default: k(() => [
+            ce(de(E(t).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
@@ -682,12 +902,17 @@ const he = (e, n) => {
     };
   }
 });
-const ft = /* @__PURE__ */ he(ut, [["__scopeId", "data-v-d6a56abf"]]);
+const St = /* @__PURE__ */ _e(gt, [["__scopeId", "data-v-dec7d037"]]);
 export {
-  S as ChartTypes,
-  ft as DashboardRenderer,
-  xe as barChartSchema,
-  dt as dashboardDefinitionSchema,
-  Ne as gaugeChartSchema,
-  Pe as tileSchema
+  w as ChartTypes,
+  St as DashboardRenderer,
+  pt as GridLayout,
+  pe as INJECT_QUERY_PROVIDER,
+  He as barChartSchema,
+  Rt as dashboardConfigSchema,
+  Be as gaugeChartSchema,
+  Fe as tileConfigSchema,
+  $e as tileDefinitionSchema,
+  Ke as tileLayoutSchema,
+  Ge as timeseriesChartSchema
 };