@kong-ui-public/dashboard-renderer 0.4.2 → 0.4.3

package/dist/dashboard-renderer.es.js

@@ -1,12 +1,13 @@
-import { ref as E, watchEffect as ee, defineComponent as f, inject as H, onUnmounted as B, computed as h, resolveComponent as z, openBlock as l, createBlock as _, withCtx as S, createTextVNode as U, toDisplayString as K, renderSlot as M, createCommentVNode as F, useCssVars as O, createElementVNode as P, createVNode as w, unref as D, createElementBlock as R, resolveDynamicComponent as te, normalizeProps as re, mergeProps as ae, onMounted as oe, Fragment as ne, renderList as se, normalizeClass as ie, normalizeStyle as x } from "vue";
+import { ref as E, watchEffect as ee, defineComponent as f, inject as H, onUnmounted as B, computed as h, resolveComponent as z, openBlock as l, createBlock as _, withCtx as S, createTextVNode as U, toDisplayString as K, renderSlot as M, createCommentVNode as F, useCssVars as k, createElementVNode as P, createVNode as w, unref as D, createElementBlock as R, resolveDynamicComponent as te, normalizeProps as re, mergeProps as ae, onMounted as oe, Fragment as ne, renderList as se, normalizeClass as ie, normalizeStyle as x } from "vue";
 import { ChartMetricDisplay as pe, ChartTypesSimple as ce, SimpleChart as le, ChartTypes as N, AnalyticsChart as Q } from "@kong-ui-public/analytics-chart";
 import ue from "swrv";
+import "axios";
 import { createI18n as de, i18nTComponent as ye } from "@kong-ui-public/i18n";
 const L = 170, W = "analytics-query-provider";
 var m = /* @__PURE__ */ ((e) => (e.HorizontalBar = "horizontal_bar", e.VerticalBar = "vertical_bar", e.Gauge = "gauge", e.TimeseriesLine = "timeseries_line", e))(m || {});
 const j = {
   type: "string"
-}, J = {
+}, Y = {
   type: ["object", "array"],
   items: {
     type: "string"
@@ -31,7 +32,7 @@ const j = {
     showAnnotations: {
       type: "boolean"
     },
-    chartDatasetColors: J,
+    chartDatasetColors: Y,
     syntheticsDataKey: j
   },
   required: ["type"],
@@ -52,7 +53,7 @@ const j = {
     fill: {
       type: "boolean"
     },
-    chartDatasetColors: J,
+    chartDatasetColors: Y,
     syntheticsDataKey: j
   },
   required: ["type"],
@@ -316,7 +317,7 @@ const j = {
   },
   required: ["definition", "layout"],
   additionalProperties: !1
-}, We = {
+}, Ye = {
   type: "object",
   properties: {
     tiles: {
@@ -345,7 +346,7 @@ const j = {
   required: ["tiles", "gridSize"],
   additionalProperties: !1
 };
-var Y = /* @__PURE__ */ ((e) => (e.VALIDATING = "VALIDATING", e.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", e.PENDING = "PENDING", e.SUCCESS = "SUCCESS", e.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", e.ERROR = "ERROR", e.STALE_IF_ERROR = "STALE_IF_ERROR", e))(Y || {});
+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 Ae = (e) => {
   var r, a, o, t, n;
   return e ? !!// TODO: revisit: currently only the first check ever matters?
@@ -385,7 +386,7 @@ function Re(e = E({}), r, a, o = Ae) {
     e.value === void 0 && r && (t.value = "ERROR");
   }), {
     state: t,
-    swrvState: Y
+    swrvState: J
   };
 }
 const Ee = {
@@ -448,7 +449,7 @@ const Z = {
           dimensions: Object.entries(c.display).reduce((d, [y, i]) => (d[y.toUpperCase()] = Object.keys(i).map((A) => c.display[y][A].name), d), {})
         }
       };
-    }), { state: T, swrvState: k } = Re(u, s, v), C = E(null), V = h(() => T.value === k.ERROR || !!C.value), X = h(() => !a.queryReady || T.value === k.PENDING);
+    }), { state: T, swrvState: O } = Re(u, s, v), C = E(null), V = h(() => T.value === O.ERROR || !!C.value), X = h(() => !a.queryReady || T.value === O.PENDING);
     return (c, q) => {
       const d = z("KSkeleton"), y = z("KEmptyState");
       return X.value || !u.value && !V.value ? (l(), _(d, {
@@ -471,7 +472,7 @@ const Z = {
       }) : F("", !0);
     };
   }
-}), ke = { class: "analytics-chart" }, Oe = /* @__PURE__ */ f({
+}), Oe = { class: "analytics-chart" }, ke = /* @__PURE__ */ f({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -480,7 +481,7 @@ const Z = {
     height: {}
   },
   setup(e) {
-    O((t) => ({
+    k((t) => ({
       d7c11a10: `${t.height}px`
     }));
     const r = e, a = {
@@ -494,7 +495,7 @@ const Z = {
       "query-ready": t.queryReady
     }, {
       default: S(({ data: p }) => [
-        P("div", ke, [
+        P("div", Oe, [
           w(D(le), {
             "chart-data": p,
             "chart-options": o.value,
@@ -510,7 +511,7 @@ const Z = {
   for (const [o, t] of r)
     a[o] = t;
   return a;
-}, we = /* @__PURE__ */ I(Oe, [["__scopeId", "data-v-32bc569c"]]), ze = { class: "analytics-chart" }, Ne = /* @__PURE__ */ f({
+}, we = /* @__PURE__ */ I(ke, [["__scopeId", "data-v-32bc569c"]]), ze = { class: "analytics-chart" }, Ne = /* @__PURE__ */ f({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -519,7 +520,7 @@ const Z = {
     height: {}
   },
   setup(e) {
-    O((t) => ({
+    k((t) => ({
       c7abf1e0: `${t.height}px`
     }));
     const r = e, a = {
@@ -557,7 +558,7 @@ const Z = {
     height: {}
   },
   setup(e) {
-    O((t) => ({
+    k((t) => ({
       "5469a7c4": `${t.height}px`
     }));
     const r = e, a = {
@@ -637,7 +638,7 @@ const Z = {
     }
   },
   setup(e) {
-    O((s) => ({
+    k((s) => ({
       "01f27c19": `${g.value}px`
     }));
     const r = parseInt(xe), a = e, o = E(null), t = E(0), n = new ResizeObserver((s) => {
@@ -649,13 +650,13 @@ const Z = {
       o.value && n.unobserve(o.value);
     });
     const p = h(() => t.value / a.gridSize.cols - r), b = h(() => a.tiles.map((s, v) => {
-      const u = s.layout.position.col * (p.value + r), T = s.layout.position.row * (a.tileHeight + r), k = s.layout.size.cols * p.value + r * (s.layout.size.cols - 1), C = s.layout.size.rows * a.tileHeight + r * (s.layout.size.rows - 1);
+      const u = s.layout.position.col * (p.value + r), T = s.layout.position.row * (a.tileHeight + r), O = s.layout.size.cols * p.value + r * (s.layout.size.cols - 1), C = s.layout.size.rows * a.tileHeight + r * (s.layout.size.rows - 1);
       return {
         key: `tile-${v}`,
         tile: s,
         style: {
           transform: `translate(${u}px, ${T}px)`,
-          width: `${k}px`,
+          width: `${O}px`,
           height: `${C}px`
         }
       };
@@ -729,7 +730,7 @@ export {
   Je as DashboardRenderer,
   He as GridLayout,
   he as barChartSchema,
-  We as dashboardConfigSchema,
+  Ye as dashboardConfigSchema,
   be as exploreV4QuerySchema,
   _e as gaugeChartSchema,
   Ce as tileConfigSchema,

package/dist/dashboard-renderer.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong-ui-public/analytics-chart"),require("swrv"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/analytics-chart","swrv","@kong-ui-public/i18n"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-dashboard-renderer"]={},s.Vue,s["kong-ui-public-analytics-chart"],s.swrv,s["kong-ui-public-i18n"]))})(this,function(s,e,_,U,D){"use strict";const I="analytics-query-provider";var h=(t=>(t.HorizontalBar="horizontal_bar",t.VerticalBar="vertical_bar",t.Gauge="gauge",t.TimeseriesLine="timeseries_line",t))(h||{});const T={type:"string"},w={type:["object","array"],items:{type:"string"},additionalProperties:{type:"string"}},B={type:"object",properties:{type:{type:"string",enum:["horizontal_bar","vertical_bar"]},stacked:{type:"boolean"},showAnnotations:{type:"boolean"},chartDatasetColors:w,syntheticsDataKey:T},required:["type"],additionalProperties:!1},O={type:"object",properties:{type:{type:"string",enum:["timeseries_line"]},stacked:{type:"boolean"},fill:{type:"boolean"},chartDatasetColors:w,syntheticsDataKey:T},required:["type"],additionalProperties:!1},z={type:"object",properties:{type:{type:"string",enum:["gauge"]},metricDisplay:{type:"string",enum:Object.values(_.ChartMetricDisplay)},reverseDataset:{type:"boolean"},numerator:{type:"number"},syntheticsDataKey:T},required:["type"],additionalProperties:!1},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"}}},L={type:"object",properties:{query:N,chart:{oneOf:[B,z,O]}},required:["query","chart"],additionalProperties:!1},V={type:"object",properties:{position:{type:"object",properties:{col:{type:"number"},row:{type:"number"}},description:"Position of the tile in the grid.",required:["col","row"],additionalProperties:!1},size:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows the tile occupies.",required:["cols","rows"],additionalProperties:!1}},required:["position","size"],additionalProperties:!1},P={type:"object",properties:{definition:L,layout:V},required:["definition","layout"],additionalProperties:!1},x={type:"object",properties:{tiles:{type:"array",items:P},tileHeight:{type:"number",description:"Height of each tile in pixels. Default: 170"},gridSize:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows in the grid.",required:["cols","rows"],additionalProperties:!1}},required:["tiles","gridSize"],additionalProperties:!1};var j=(t=>(t.VALIDATING="VALIDATING",t.VALIDATING_HAS_DATA="VALIDATING_HAS_DATA",t.PENDING="PENDING",t.SUCCESS="SUCCESS",t.SUCCESS_HAS_DATA="SUCCESS_HAS_DATA",t.ERROR="ERROR",t.STALE_IF_ERROR="STALE_IF_ERROR",t))(j||{});const F=t=>{var o,n,a,r,i;return t?!!((o=Object.keys(t))!=null&&o.length||(n=t.data)!=null&&n.length||(r=(a=t.data)==null?void 0:a.data)!=null&&r.length||!((i=t.data)!=null&&i.data)&&typeof t.data=="object"&&Object.keys(t==null?void 0:t.data).length):!1};function K(t=e.ref({}),o,n,a=F){const r=e.ref("PENDING");return e.watchEffect(()=>{const i=a(t.value);if(t.value&&i&&n.value){r.value="VALIDATING_HAS_DATA";return}if(t.value&&n.value){r.value="VALIDATING";return}if(t.value&&o.value){r.value="STALE_IF_ERROR";return}if(t.value===void 0&&!o.value){r.value="PENDING";return}if(t.value&&!o.value&&i){r.value="SUCCESS_HAS_DATA";return}if(t.value&&!o.value){r.value="SUCCESS";return}t.value===void 0&&o&&(r.value="ERROR")}),{state:r,swrvState:j}}const M={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 Q(){const t=D.createI18n("en-us",M);return{i18n:t,i18nT:D.i18nTComponent(t)}}const v={useI18n:Q},R=e.defineComponent({__name:"QueryDataProvider",props:{query:{},queryReady:{type:Boolean}},emits:["queryComplete"],setup(t,{emit:o}){const n=t,a=o,{i18n:r}=v.useI18n(),i=e.inject(I),l=()=>n.queryReady&&i?JSON.stringify(n.query):null,b=new AbortController;e.onUnmounted(()=>{b.abort()});const{data:g,error:c,isValidating:f}=U(l,async()=>{var d,q,y,m;try{return i==null?void 0:i.queryFn(n.query,b)}catch(p){C.value=((q=(d=p==null?void 0:p.response)==null?void 0:d.data)==null?void 0:q.message)==="Range not allowed for this tier"?r.t("queryDataProvider.timeRangeExceeded"):((m=(y=p==null?void 0:p.response)==null?void 0:y.data)==null?void 0:m.message)||(p==null?void 0:p.message)}finally{a("queryComplete")}}),u=e.computed(()=>{var q;if(!g.value)return;const d=g.value.meta;return{records:g.value.data.map(y=>({...y,event:Object.entries(y.event).reduce((m,[p,k])=>(typeof k=="string"?m[p.toUpperCase()]=d.display[p][k].name:m[p.toUpperCase()]=k,m),{})})),meta:{...d,metricNames:(q=d.metric_names)==null?void 0:q.map(y=>y.toUpperCase()),granularity:d.granularity_ms,startMs:d.start_ms,endMs:d.end_ms,dimensions:Object.entries(d.display).reduce((y,[m,p])=>(y[m.toUpperCase()]=Object.keys(p).map(k=>d.display[m][k].name),y),{})}}}),{state:E,swrvState:A}=K(u,c,f),C=e.ref(null),G=e.computed(()=>E.value===A.ERROR||!!C.value),ie=e.computed(()=>!n.queryReady||E.value===A.PENDING);return(d,q)=>{const y=e.resolveComponent("KSkeleton"),m=e.resolveComponent("KEmptyState");return ie.value||!u.value&&!G.value?(e.openBlock(),e.createBlock(y,{key:0,class:"chart-skeleton",type:"table"})):G.value?(e.openBlock(),e.createBlock(m,{key:1,"cta-is-hidden":"","data-testid":"chart-empty-state","is-error":""},{message:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(C.value),1)]),_:1})):u.value?e.renderSlot(d.$slots,"default",{key:2,data:u.value}):e.createCommentVNode("",!0)}}}),J={class:"analytics-chart"},W=e.defineComponent({__name:"SimpleChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({d7c11a10:`${r.height}px`}));const o=t,n={[h.Gauge]:_.ChartTypesSimple.GAUGE},a=e.computed(()=>({...o.chartOptions,type:n[o.chartOptions.type]}));return(r,i)=>(e.openBlock(),e.createBlock(R,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",J,[e.createVNode(e.unref(_.SimpleChart),{"chart-data":l,"chart-options":a.value,"synthetics-data-key":r.chartOptions.syntheticsDataKey},null,8,["chart-data","chart-options","synthetics-data-key"])])]),_:1},8,["query","query-ready"]))}}),S=(t,o)=>{const n=t.__vccOpts||t;for(const[a,r]of o)n[a]=r;return n},Y=S(W,[["__scopeId","data-v-32bc569c"]]),Z={class:"analytics-chart"},H=S(e.defineComponent({__name:"BarChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({c7abf1e0:`${r.height}px`}));const o=t,n={[h.HorizontalBar]:_.ChartTypes.HORIZONTAL_BAR,[h.VerticalBar]:_.ChartTypes.VERTICAL_BAR},a=e.computed(()=>({type:n[o.chartOptions.type],stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,i)=>(e.openBlock(),e.createBlock(R,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",Z,[e.createVNode(e.unref(_.AnalyticsChart),{"chart-data":l,"chart-options":a.value,"legend-position":"bottom","show-annotations":r.chartOptions.showAnnotations,"tooltip-title":""},null,8,["chart-data","chart-options","show-annotations"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-5eb134a4"]]),X={class:"analytics-chart"},ee=S(e.defineComponent({__name:"TimeseriesChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"5469a7c4":`${r.height}px`}));const o=t,n={[h.TimeseriesLine]:_.ChartTypes.TIMESERIES_LINE},a=e.computed(()=>({type:n[o.chartOptions.type],fill:o.chartOptions.fill,stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,i)=>(e.openBlock(),e.createBlock(R,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",X,[e.createVNode(e.unref(_.AnalyticsChart),{"chart-data":l,"chart-options":a.value,"legend-position":"bottom","tooltip-title":""},null,8,["chart-data","chart-options"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-9960bfab"]]),te={class:"tile-boundary"},re=e.defineComponent({__name:"DashboardTile",props:{definition:{type:Object,required:!0},height:{type:Number,required:!1,default:()=>170}},setup(t){const o=t,n={[h.TimeseriesLine]:ee,[h.HorizontalBar]:H,[h.VerticalBar]:H,[h.Gauge]:Y},a=e.computed(()=>({component:n[o.definition.chart.type],rendererProps:{query:o.definition.query,queryReady:!0,chartOptions:o.definition.chart,height:o.height}}));return(r,i)=>(e.openBlock(),e.createElementBlock("div",te,[a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value.component),e.normalizeProps(e.mergeProps({key:0},a.value.rendererProps)),null,16)):e.createCommentVNode("",!0)]))}}),oe="20px",$=S(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(c=>({"01f27c19":`${g.value}px`}));const o=parseInt(oe),n=t,a=e.ref(null),r=e.ref(0),i=new ResizeObserver(c=>{r.value=c[0].contentRect.width});e.onMounted(()=>{a.value&&i.observe(a.value)}),e.onUnmounted(()=>{a.value&&i.unobserve(a.value)});const l=e.computed(()=>r.value/n.gridSize.cols-o),b=e.computed(()=>n.tiles.map((c,f)=>{const u=c.layout.position.col*(l.value+o),E=c.layout.position.row*(n.tileHeight+o),A=c.layout.size.cols*l.value+o*(c.layout.size.cols-1),C=c.layout.size.rows*n.tileHeight+o*(c.layout.size.rows-1);return{key:`tile-${f}`,tile:c,style:{transform:`translate(${u}px, ${E}px)`,width:`${A}px`,height:`${C}px`}}})),g=e.computed(()=>Math.max(...n.tiles.map(f=>f.layout.position.row+f.layout.size.rows))*n.tileHeight+o*n.gridSize.rows);return(c,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"gridContainer",ref:a,class:"kong-ui-public-grid-layout"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u.key,class:e.normalizeClass(["grid-cell",{"empty-cell":!u.tile}]),style:e.normalizeStyle(u.style)},[e.renderSlot(c.$slots,"tile",{style:e.normalizeStyle(u.style),tile:u.tile},void 0,!0)],6))),128))],512))}}),[["__scopeId","data-v-b6cb2d7b"]]),ne={class:"kong-ui-public-dashboard-renderer"},ae=S(e.defineComponent({__name:"DashboardRenderer",props:{context:{},config:{}},setup(t){const o=t,{i18n:n}=v.useI18n(),a=e.inject(I);a||(console.warn("Analytics dashboards require a query bridge supplied via provide / inject."),console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"),console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements"));const r=e.computed(()=>o.config.tiles.map((i,l)=>({layout:i.layout,meta:i.definition,id:l})));return(i,l)=>{const b=e.resolveComponent("KAlert");return e.openBlock(),e.createElementBlock("div",ne,[e.unref(a)?(e.openBlock(),e.createBlock($,{key:1,"grid-size":i.config.gridSize,"tile-height":i.config.tileHeight,tiles:r.value},{tile:e.withCtx(({tile:g,style:c})=>[e.createVNode(re,{class:"tile-container",definition:g.meta,height:parseInt(c.height)},null,8,["definition","height"])]),_:1},8,["grid-size","tile-height","tiles"])):(e.openBlock(),e.createBlock(b,{key:0,appearance:"danger"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(n).t("renderer.noQueryBridge")),1)]),_:1}))])}}}),[["__scopeId","data-v-e3197ec0"]]);s.ChartTypes=h,s.DashboardRenderer=ae,s.GridLayout=$,s.barChartSchema=B,s.dashboardConfigSchema=x,s.exploreV4QuerySchema=N,s.gaugeChartSchema=z,s.tileConfigSchema=P,s.tileDefinitionSchema=L,s.tileLayoutSchema=V,s.timeseriesChartSchema=O,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong-ui-public/analytics-chart"),require("swrv"),require("axios"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/analytics-chart","swrv","axios","@kong-ui-public/i18n"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-dashboard-renderer"]={},s.Vue,s["kong-ui-public-analytics-chart"],s.swrv,s.axios,s["kong-ui-public-i18n"]))})(this,function(s,e,_,G,se,D){"use strict";const I="analytics-query-provider";var h=(t=>(t.HorizontalBar="horizontal_bar",t.VerticalBar="vertical_bar",t.Gauge="gauge",t.TimeseriesLine="timeseries_line",t))(h||{});const T={type:"string"},w={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:w,syntheticsDataKey:T},required:["type"],additionalProperties:!1},B={type:"object",properties:{type:{type:"string",enum:["timeseries_line"]},stacked:{type:"boolean"},fill:{type:"boolean"},chartDatasetColors:w,syntheticsDataKey:T},required:["type"],additionalProperties:!1},z={type:"object",properties:{type:{type:"string",enum:["gauge"]},metricDisplay:{type:"string",enum:Object.values(_.ChartMetricDisplay)},reverseDataset:{type:"boolean"},numerator:{type:"number"},syntheticsDataKey:T},required:["type"],additionalProperties:!1},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"}}},L={type:"object",properties:{query:N,chart:{oneOf:[O,z,B]}},required:["query","chart"],additionalProperties:!1},V={type:"object",properties:{position:{type:"object",properties:{col:{type:"number"},row:{type:"number"}},description:"Position of the tile in the grid.",required:["col","row"],additionalProperties:!1},size:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows the tile occupies.",required:["cols","rows"],additionalProperties:!1}},required:["position","size"],additionalProperties:!1},P={type:"object",properties:{definition:L,layout:V},required:["definition","layout"],additionalProperties:!1},U={type:"object",properties:{tiles:{type:"array",items:P},tileHeight:{type:"number",description:"Height of each tile in pixels. Default: 170"},gridSize:{type:"object",properties:{cols:{type:"number"},rows:{type:"number"}},description:"Number of columns and rows in the grid.",required:["cols","rows"],additionalProperties:!1}},required:["tiles","gridSize"],additionalProperties:!1};var j=(t=>(t.VALIDATING="VALIDATING",t.VALIDATING_HAS_DATA="VALIDATING_HAS_DATA",t.PENDING="PENDING",t.SUCCESS="SUCCESS",t.SUCCESS_HAS_DATA="SUCCESS_HAS_DATA",t.ERROR="ERROR",t.STALE_IF_ERROR="STALE_IF_ERROR",t))(j||{});const F=t=>{var o,n,a,r,i;return t?!!((o=Object.keys(t))!=null&&o.length||(n=t.data)!=null&&n.length||(r=(a=t.data)==null?void 0:a.data)!=null&&r.length||!((i=t.data)!=null&&i.data)&&typeof t.data=="object"&&Object.keys(t==null?void 0:t.data).length):!1};function K(t=e.ref({}),o,n,a=F){const r=e.ref("PENDING");return e.watchEffect(()=>{const i=a(t.value);if(t.value&&i&&n.value){r.value="VALIDATING_HAS_DATA";return}if(t.value&&n.value){r.value="VALIDATING";return}if(t.value&&o.value){r.value="STALE_IF_ERROR";return}if(t.value===void 0&&!o.value){r.value="PENDING";return}if(t.value&&!o.value&&i){r.value="SUCCESS_HAS_DATA";return}if(t.value&&!o.value){r.value="SUCCESS";return}t.value===void 0&&o&&(r.value="ERROR")}),{state:r,swrvState:j}}const M={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 Q(){const t=D.createI18n("en-us",M);return{i18n:t,i18nT:D.i18nTComponent(t)}}const v={useI18n:Q},R=e.defineComponent({__name:"QueryDataProvider",props:{query:{},queryReady:{type:Boolean}},emits:["queryComplete"],setup(t,{emit:o}){const n=t,a=o,{i18n:r}=v.useI18n(),i=e.inject(I),l=()=>n.queryReady&&i?JSON.stringify(n.query):null,b=new AbortController;e.onUnmounted(()=>{b.abort()});const{data:g,error:c,isValidating:f}=G(l,async()=>{var d,q,y,m;try{return i==null?void 0:i.queryFn(n.query,b)}catch(p){C.value=((q=(d=p==null?void 0:p.response)==null?void 0:d.data)==null?void 0:q.message)==="Range not allowed for this tier"?r.t("queryDataProvider.timeRangeExceeded"):((m=(y=p==null?void 0:p.response)==null?void 0:y.data)==null?void 0:m.message)||(p==null?void 0:p.message)}finally{a("queryComplete")}}),u=e.computed(()=>{var q;if(!g.value)return;const d=g.value.meta;return{records:g.value.data.map(y=>({...y,event:Object.entries(y.event).reduce((m,[p,k])=>(typeof k=="string"?m[p.toUpperCase()]=d.display[p][k].name:m[p.toUpperCase()]=k,m),{})})),meta:{...d,metricNames:(q=d.metric_names)==null?void 0:q.map(y=>y.toUpperCase()),granularity:d.granularity_ms,startMs:d.start_ms,endMs:d.end_ms,dimensions:Object.entries(d.display).reduce((y,[m,p])=>(y[m.toUpperCase()]=Object.keys(p).map(k=>d.display[m][k].name),y),{})}}}),{state:E,swrvState:A}=K(u,c,f),C=e.ref(null),x=e.computed(()=>E.value===A.ERROR||!!C.value),ie=e.computed(()=>!n.queryReady||E.value===A.PENDING);return(d,q)=>{const y=e.resolveComponent("KSkeleton"),m=e.resolveComponent("KEmptyState");return ie.value||!u.value&&!x.value?(e.openBlock(),e.createBlock(y,{key:0,class:"chart-skeleton",type:"table"})):x.value?(e.openBlock(),e.createBlock(m,{key:1,"cta-is-hidden":"","data-testid":"chart-empty-state","is-error":""},{message:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(C.value),1)]),_:1})):u.value?e.renderSlot(d.$slots,"default",{key:2,data:u.value}):e.createCommentVNode("",!0)}}}),Y={class:"analytics-chart"},J=e.defineComponent({__name:"SimpleChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({d7c11a10:`${r.height}px`}));const o=t,n={[h.Gauge]:_.ChartTypesSimple.GAUGE},a=e.computed(()=>({...o.chartOptions,type:n[o.chartOptions.type]}));return(r,i)=>(e.openBlock(),e.createBlock(R,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",Y,[e.createVNode(e.unref(_.SimpleChart),{"chart-data":l,"chart-options":a.value,"synthetics-data-key":r.chartOptions.syntheticsDataKey},null,8,["chart-data","chart-options","synthetics-data-key"])])]),_:1},8,["query","query-ready"]))}}),S=(t,o)=>{const n=t.__vccOpts||t;for(const[a,r]of o)n[a]=r;return n},W=S(J,[["__scopeId","data-v-32bc569c"]]),Z={class:"analytics-chart"},H=S(e.defineComponent({__name:"BarChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({c7abf1e0:`${r.height}px`}));const o=t,n={[h.HorizontalBar]:_.ChartTypes.HORIZONTAL_BAR,[h.VerticalBar]:_.ChartTypes.VERTICAL_BAR},a=e.computed(()=>({type:n[o.chartOptions.type],stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,i)=>(e.openBlock(),e.createBlock(R,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",Z,[e.createVNode(e.unref(_.AnalyticsChart),{"chart-data":l,"chart-options":a.value,"legend-position":"bottom","show-annotations":r.chartOptions.showAnnotations,"tooltip-title":""},null,8,["chart-data","chart-options","show-annotations"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-5eb134a4"]]),X={class:"analytics-chart"},ee=S(e.defineComponent({__name:"TimeseriesChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"5469a7c4":`${r.height}px`}));const o=t,n={[h.TimeseriesLine]:_.ChartTypes.TIMESERIES_LINE},a=e.computed(()=>({type:n[o.chartOptions.type],fill:o.chartOptions.fill,stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,i)=>(e.openBlock(),e.createBlock(R,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:l})=>[e.createElementVNode("div",X,[e.createVNode(e.unref(_.AnalyticsChart),{"chart-data":l,"chart-options":a.value,"legend-position":"bottom","tooltip-title":""},null,8,["chart-data","chart-options"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-9960bfab"]]),te={class:"tile-boundary"},re=e.defineComponent({__name:"DashboardTile",props:{definition:{type:Object,required:!0},height:{type:Number,required:!1,default:()=>170}},setup(t){const o=t,n={[h.TimeseriesLine]:ee,[h.HorizontalBar]:H,[h.VerticalBar]:H,[h.Gauge]:W},a=e.computed(()=>({component:n[o.definition.chart.type],rendererProps:{query:o.definition.query,queryReady:!0,chartOptions:o.definition.chart,height:o.height}}));return(r,i)=>(e.openBlock(),e.createElementBlock("div",te,[a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value.component),e.normalizeProps(e.mergeProps({key:0},a.value.rendererProps)),null,16)):e.createCommentVNode("",!0)]))}}),oe="20px",$=S(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(c=>({"01f27c19":`${g.value}px`}));const o=parseInt(oe),n=t,a=e.ref(null),r=e.ref(0),i=new ResizeObserver(c=>{r.value=c[0].contentRect.width});e.onMounted(()=>{a.value&&i.observe(a.value)}),e.onUnmounted(()=>{a.value&&i.unobserve(a.value)});const l=e.computed(()=>r.value/n.gridSize.cols-o),b=e.computed(()=>n.tiles.map((c,f)=>{const u=c.layout.position.col*(l.value+o),E=c.layout.position.row*(n.tileHeight+o),A=c.layout.size.cols*l.value+o*(c.layout.size.cols-1),C=c.layout.size.rows*n.tileHeight+o*(c.layout.size.rows-1);return{key:`tile-${f}`,tile:c,style:{transform:`translate(${u}px, ${E}px)`,width:`${A}px`,height:`${C}px`}}})),g=e.computed(()=>Math.max(...n.tiles.map(f=>f.layout.position.row+f.layout.size.rows))*n.tileHeight+o*n.gridSize.rows);return(c,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"gridContainer",ref:a,class:"kong-ui-public-grid-layout"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u.key,class:e.normalizeClass(["grid-cell",{"empty-cell":!u.tile}]),style:e.normalizeStyle(u.style)},[e.renderSlot(c.$slots,"tile",{style:e.normalizeStyle(u.style),tile:u.tile},void 0,!0)],6))),128))],512))}}),[["__scopeId","data-v-b6cb2d7b"]]),ne={class:"kong-ui-public-dashboard-renderer"},ae=S(e.defineComponent({__name:"DashboardRenderer",props:{context:{},config:{}},setup(t){const o=t,{i18n:n}=v.useI18n(),a=e.inject(I);a||(console.warn("Analytics dashboards require a query bridge supplied via provide / inject."),console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"),console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements"));const r=e.computed(()=>o.config.tiles.map((i,l)=>({layout:i.layout,meta:i.definition,id:l})));return(i,l)=>{const b=e.resolveComponent("KAlert");return e.openBlock(),e.createElementBlock("div",ne,[e.unref(a)?(e.openBlock(),e.createBlock($,{key:1,"grid-size":i.config.gridSize,"tile-height":i.config.tileHeight,tiles:r.value},{tile:e.withCtx(({tile:g,style:c})=>[e.createVNode(re,{class:"tile-container",definition:g.meta,height:parseInt(c.height)},null,8,["definition","height"])]),_:1},8,["grid-size","tile-height","tiles"])):(e.openBlock(),e.createBlock(b,{key:0,appearance:"danger"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(n).t("renderer.noQueryBridge")),1)]),_:1}))])}}}),[["__scopeId","data-v-e3197ec0"]]);s.ChartTypes=h,s.DashboardRenderer=ae,s.GridLayout=$,s.barChartSchema=O,s.dashboardConfigSchema=U,s.exploreV4QuerySchema=N,s.gaugeChartSchema=z,s.tileConfigSchema=P,s.tileDefinitionSchema=L,s.tileLayoutSchema=V,s.timeseriesChartSchema=B,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/dashboard-renderer",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "main": "./dist/dashboard-renderer.umd.js",
   "module": "./dist/dashboard-renderer.es.js",
@@ -26,10 +26,10 @@
     "json-schema-to-ts": "^3.0.0",
     "swrv": "^1.0.4",
     "vue": "^3.4.13",
+    "@kong-ui-public/analytics-utilities": "^0.13.0",
     "@kong-ui-public/analytics-chart": "^1.3.5",
-    "@kong-ui-public/i18n": "^2.1.2",
     "@kong-ui-public/sandbox-layout": "^2.0.32",
-    "@kong-ui-public/analytics-utilities": "^0.13.0"
+    "@kong-ui-public/i18n": "^2.1.2"
   },
   "repository": {
     "type": "git",
@@ -53,12 +53,12 @@
     "swrv": "^1.0.4",
     "vue": ">= 3.3.13 < 4",
     "@kong-ui-public/analytics-chart": "^1.3.5",
-    "@kong-ui-public/analytics-utilities": "^0.13.0",
-    "@kong-ui-public/i18n": "^2.1.2"
+    "@kong-ui-public/i18n": "^2.1.2",
+    "@kong-ui-public/analytics-utilities": "^0.13.0"
   },
   "dependencies": {
     "ajv": "^8.12.0",
-    "@kong-ui-public/core": "^1.4.23"
+    "@kong-ui-public/core": "^1.5.0"
   },
   "scripts": {
     "dev": "cross-env USE_SANDBOX=true vite",