@kong-ui-public/dashboard-renderer 0.5.4 → 0.5.5

package/dist/dashboard-renderer.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong-ui-public/analytics-chart"),require("swrv"),require("axios"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/analytics-chart","swrv","axios","@kong-ui-public/i18n"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["kong-ui-public-dashboard-renderer"]={},s.Vue,s["kong-ui-public-analytics-chart"],s.swrv,s.axios,s["kong-ui-public-i18n"]))})(this,function(s,e,y,x,ie,R){"use strict";const D="analytics-query-provider";var l=(t=>(t.HorizontalBar="horizontal_bar",t.VerticalBar="vertical_bar",t.Gauge="gauge",t.TimeseriesLine="timeseries_line",t))(l||{});const E={type:"string"},I={type:["object","array"],items:{type:"string"},additionalProperties:{type:"string"}},w={type:"object",properties:{type:{type:"string",enum:["horizontal_bar","vertical_bar"]},stacked:{type:"boolean"},showAnnotations:{type:"boolean"},chartDatasetColors:I,syntheticsDataKey:E},required:["type"],additionalProperties:!1},B={type:"object",properties:{type:{type:"string",enum:["timeseries_line"]},stacked:{type:"boolean"},fill:{type:"boolean"},chartDatasetColors:I,syntheticsDataKey:E},required:["type"],additionalProperties:!1},O={type:"object",properties:{type:{type:"string",enum:["gauge"]},metricDisplay:{type:"string",enum:Object.values(y.ChartMetricDisplay)},reverseDataset:{type:"boolean"},numerator:{type:"number"},syntheticsDataKey:E},required:["type"],additionalProperties:!1},z={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:z,chart:{oneOf:[w,O,B]}},required:["query","chart"],additionalProperties:!1},N={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},V={type:"object",properties:{definition:L,layout:N},required:["definition","layout"],additionalProperties:!1},G={type:"object",properties:{tiles:{type:"array",items:V},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 P=(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))(P||{});const v=t=>{var o,n,i,r,a;return t?!!((o=Object.keys(t))!=null&&o.length||(n=t.data)!=null&&n.length||(r=(i=t.data)==null?void 0:i.data)!=null&&r.length||!((a=t.data)!=null&&a.data)&&typeof t.data=="object"&&Object.keys(t==null?void 0:t.data).length):!1};function U(t=e.ref({}),o,n,i=v){const r=e.ref("PENDING");return e.watchEffect(()=>{const a=i(t.value);if(t.value&&a&&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&&a){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:P}}const F={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 K(){const t=R.createI18n("en-us",F);return{i18n:t,i18nT:R.i18nTComponent(t)}}const j={useI18n:K},A=e.defineComponent({__name:"QueryDataProvider",props:{query:{},queryReady:{type:Boolean}},emits:["queryComplete"],setup(t,{emit:o}){const n=t,i=o,{i18n:r}=j.useI18n(),a=e.inject(D),p=()=>n.queryReady&&a?JSON.stringify(n.query):null,_=new AbortController;e.onUnmounted(()=>{_.abort()});const{data:h,error:c,isValidating:m}=x(p,async()=>{var S,T,k,C;try{return a==null?void 0:a.queryFn(n.query,_)}catch(u){f.value=((T=(S=u==null?void 0:u.response)==null?void 0:S.data)==null?void 0:T.message)==="Range not allowed for this tier"?r.t("queryDataProvider.timeRangeExceeded"):((C=(k=u==null?void 0:u.response)==null?void 0:k.data)==null?void 0:C.message)||(u==null?void 0:u.message)}finally{i("queryComplete")}}),{state:d,swrvState:b}=U(h,c,m),f=e.ref(null),q=e.computed(()=>d.value===b.ERROR||!!f.value),ne=e.computed(()=>!n.queryReady||d.value===b.PENDING);return(S,T)=>{const k=e.resolveComponent("KSkeleton"),C=e.resolveComponent("KEmptyState");return ne.value||!e.unref(h)&&!q.value?(e.openBlock(),e.createBlock(k,{key:0,class:"chart-skeleton",type:"table"})):q.value?(e.openBlock(),e.createBlock(C,{key:1,"cta-is-hidden":"","data-testid":"chart-empty-state","is-error":""},{message:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.value),1)]),_:1})):e.unref(h)?e.renderSlot(S.$slots,"default",{key:2,data:e.unref(h)}):e.createCommentVNode("",!0)}}}),M={class:"analytics-chart"},Q=e.defineComponent({__name:"SimpleChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"134a876f":`${r.height}px`}));const o=t,n={[l.Gauge]:y.ChartTypesSimple.GAUGE},i=e.computed(()=>({...o.chartOptions,type:n[o.chartOptions.type]}));return(r,a)=>(e.openBlock(),e.createBlock(A,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:p})=>[e.createElementVNode("div",M,[e.createVNode(e.unref(y.SimpleChart),{"chart-data":p,"chart-options":i.value,"synthetics-data-key":r.chartOptions.syntheticsDataKey},null,8,["chart-data","chart-options","synthetics-data-key"])])]),_:1},8,["query","query-ready"]))}}),g=(t,o)=>{const n=t.__vccOpts||t;for(const[i,r]of o)n[i]=r;return n},Y=g(Q,[["__scopeId","data-v-ec989cc0"]]),J={class:"analytics-chart"},H=g(e.defineComponent({__name:"BarChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"381b03f2":`${r.height}px`}));const o=t,n={[l.HorizontalBar]:y.ChartTypes.HORIZONTAL_BAR,[l.VerticalBar]:y.ChartTypes.VERTICAL_BAR},i=e.computed(()=>({type:n[o.chartOptions.type],stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,a)=>(e.openBlock(),e.createBlock(A,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:p})=>[e.createElementVNode("div",J,[e.createVNode(e.unref(y.AnalyticsChart),{"chart-data":p,"chart-options":i.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-1b9ab912"]]),W={class:"analytics-chart"},Z=g(e.defineComponent({__name:"TimeseriesChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"01f81c18":`${r.height}px`}));const o=t,n={[l.TimeseriesLine]:y.ChartTypes.TIMESERIES_LINE},i=e.computed(()=>({type:n[o.chartOptions.type],fill:o.chartOptions.fill,stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,a)=>(e.openBlock(),e.createBlock(A,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:p})=>[e.createElementVNode("div",W,[e.createVNode(e.unref(y.AnalyticsChart),{"chart-data":p,"chart-options":i.value,"legend-position":"bottom","tooltip-title":""},null,8,["chart-data","chart-options"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-efe3a03d"]]),X={class:"tile-boundary"},ee=e.defineComponent({__name:"DashboardTile",props:{definition:{type:Object,required:!0},height:{type:Number,required:!1,default:()=>170}},setup(t){const o=t,n={[l.TimeseriesLine]:Z,[l.HorizontalBar]:H,[l.VerticalBar]:H,[l.Gauge]:Y},i=e.computed(()=>({component:n[o.definition.chart.type],rendererProps:{query:o.definition.query,queryReady:!0,chartOptions:o.definition.chart,height:o.height}}));return(r,a)=>(e.openBlock(),e.createElementBlock("div",X,[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)]))}}),te="20px",$=g(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":`${h.value}px`}));const o=parseInt(te),n=t,i=e.ref(null),r=e.ref(0),a=new ResizeObserver(c=>{r.value=c[0].contentRect.width});e.onMounted(()=>{i.value&&a.observe(i.value)}),e.onUnmounted(()=>{i.value&&a.unobserve(i.value)});const p=e.computed(()=>r.value/n.gridSize.cols-o),_=e.computed(()=>n.tiles.map((c,m)=>{const d=c.layout.position.col*(p.value+o),b=c.layout.position.row*(n.tileHeight+o),f=c.layout.size.cols*p.value+o*(c.layout.size.cols-1),q=c.layout.size.rows*n.tileHeight+o*(c.layout.size.rows-1);return{key:`tile-${m}`,tile:c,style:{transform:`translate(${d}px, ${b}px)`,width:`${f}px`,height:`${q}px`}}})),h=e.computed(()=>Math.max(...n.tiles.map(m=>m.layout.position.row+m.layout.size.rows))*n.tileHeight+o*n.gridSize.rows);return(c,m)=>(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(_.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(c.$slots,"tile",{style:e.normalizeStyle(d.style),tile:d.tile},void 0,!0)],6))),128))],512))}}),[["__scopeId","data-v-b6cb2d7b"]]),re={class:"kong-ui-public-dashboard-renderer"},oe=g(e.defineComponent({__name:"DashboardRenderer",props:{context:{},config:{}},setup(t){const o=t,{i18n:n}=j.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 r=e.computed(()=>o.config.tiles.map((a,p)=>({layout:a.layout,meta:a.definition,id:p})));return(a,p)=>{const _=e.resolveComponent("KAlert");return e.openBlock(),e.createElementBlock("div",re,[e.unref(i)?(e.openBlock(),e.createBlock($,{key:1,"grid-size":a.config.gridSize,"tile-height":a.config.tileHeight,tiles:r.value},{tile:e.withCtx(({tile:h,style:c})=>[e.createVNode(ee,{class:"tile-container",definition:h.meta,height:parseInt(c.height)},null,8,["definition","height"])]),_:1},8,["grid-size","tile-height","tiles"])):(e.openBlock(),e.createBlock(_,{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=l,s.DashboardRenderer=oe,s.GridLayout=$,s.barChartSchema=w,s.dashboardConfigSchema=G,s.exploreV4QuerySchema=z,s.gaugeChartSchema=O,s.tileConfigSchema=V,s.tileDefinitionSchema=L,s.tileLayoutSchema=N,s.timeseriesChartSchema=B,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,y,x,ie,R){"use strict";const D="analytics-query-provider";var l=(t=>(t.HorizontalBar="horizontal_bar",t.VerticalBar="vertical_bar",t.Gauge="gauge",t.TimeseriesLine="timeseries_line",t))(l||{});const E={type:"string"},I={type:["object","array"],items:{type:"string"},additionalProperties:{type:"string"}},w={type:"object",properties:{type:{type:"string",enum:["horizontal_bar","vertical_bar"]},stacked:{type:"boolean"},showAnnotations:{type:"boolean"},chartDatasetColors:I,syntheticsDataKey:E},required:["type"],additionalProperties:!1},B={type:"object",properties:{type:{type:"string",enum:["timeseries_line"]},stacked:{type:"boolean"},fill:{type:"boolean"},chartDatasetColors:I,syntheticsDataKey:E},required:["type"],additionalProperties:!1},O={type:"object",properties:{type:{type:"string",enum:["gauge"]},metricDisplay:{type:"string",enum:Object.values(y.ChartMetricDisplay)},reverseDataset:{type:"boolean"},numerator:{type:"number"},syntheticsDataKey:E},required:["type"],additionalProperties:!1},z={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:z,chart:{oneOf:[w,O,B]}},required:["query","chart"],additionalProperties:!1},N={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},V={type:"object",properties:{definition:L,layout:N},required:["definition","layout"],additionalProperties:!1},G={type:"object",properties:{tiles:{type:"array",items:V},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 P=(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))(P||{});const v=t=>{var o,n,i,r,a;return t?!!((o=Object.keys(t))!=null&&o.length||(n=t.data)!=null&&n.length||(r=(i=t.data)==null?void 0:i.data)!=null&&r.length||!((a=t.data)!=null&&a.data)&&typeof t.data=="object"&&Object.keys(t==null?void 0:t.data).length):!1};function U(t=e.ref({}),o,n,i=v){const r=e.ref("PENDING");return e.watchEffect(()=>{const a=i(t.value);if(t.value&&a&&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&&a){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:P}}const F={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 K(){const t=R.createI18n("en-us",F);return{i18n:t,i18nT:R.i18nTComponent(t)}}const j={useI18n:K},A=e.defineComponent({__name:"QueryDataProvider",props:{query:{},queryReady:{type:Boolean}},emits:["queryComplete"],setup(t,{emit:o}){const n=t,i=o,{i18n:r}=j.useI18n(),a=e.inject(D),p=()=>n.queryReady&&a?JSON.stringify(n.query):null,_=new AbortController;e.onUnmounted(()=>{_.abort()});const{data:h,error:c,isValidating:m}=x(p,async()=>{var S,T,k,C;try{return a==null?void 0:a.queryFn(n.query,_)}catch(u){f.value=((T=(S=u==null?void 0:u.response)==null?void 0:S.data)==null?void 0:T.message)==="Range not allowed for this tier"?r.t("queryDataProvider.timeRangeExceeded"):((C=(k=u==null?void 0:u.response)==null?void 0:k.data)==null?void 0:C.message)||(u==null?void 0:u.message)}finally{i("queryComplete")}}),{state:d,swrvState:b}=U(h,c,m),f=e.ref(null),q=e.computed(()=>d.value===b.ERROR||!!f.value),ne=e.computed(()=>!n.queryReady||d.value===b.PENDING);return(S,T)=>{const k=e.resolveComponent("KSkeleton"),C=e.resolveComponent("KEmptyState");return ne.value||!e.unref(h)&&!q.value?(e.openBlock(),e.createBlock(k,{key:0,class:"chart-skeleton",type:"table"})):q.value?(e.openBlock(),e.createBlock(C,{key:1,"cta-is-hidden":"","data-testid":"chart-empty-state","is-error":""},{message:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.value),1)]),_:1})):e.unref(h)?e.renderSlot(S.$slots,"default",{key:2,data:e.unref(h)}):e.createCommentVNode("",!0)}}}),M={class:"analytics-chart"},Q=e.defineComponent({__name:"SimpleChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"134a876f":`${r.height}px`}));const o=t,n={[l.Gauge]:y.ChartTypesSimple.GAUGE},i=e.computed(()=>({...o.chartOptions,type:n[o.chartOptions.type]}));return(r,a)=>(e.openBlock(),e.createBlock(A,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:p})=>[e.createElementVNode("div",M,[e.createVNode(e.unref(y.SimpleChart),{"chart-data":p,"chart-options":i.value,"synthetics-data-key":r.chartOptions.syntheticsDataKey},null,8,["chart-data","chart-options","synthetics-data-key"])])]),_:1},8,["query","query-ready"]))}}),g=(t,o)=>{const n=t.__vccOpts||t;for(const[i,r]of o)n[i]=r;return n},Y=g(Q,[["__scopeId","data-v-ec989cc0"]]),J={class:"analytics-chart"},H=g(e.defineComponent({__name:"BarChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"381b03f2":`${r.height}px`}));const o=t,n={[l.HorizontalBar]:y.ChartTypes.HORIZONTAL_BAR,[l.VerticalBar]:y.ChartTypes.VERTICAL_BAR},i=e.computed(()=>({type:n[o.chartOptions.type],stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,a)=>(e.openBlock(),e.createBlock(A,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:p})=>[e.createElementVNode("div",J,[e.createVNode(e.unref(y.AnalyticsChart),{"chart-data":p,"chart-options":i.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-1b9ab912"]]),W={class:"analytics-chart"},X=g(e.defineComponent({__name:"TimeseriesChartRenderer",props:{query:{},queryReady:{type:Boolean},chartOptions:{},height:{}},setup(t){e.useCssVars(r=>({"01f81c18":`${r.height}px`}));const o=t,n={[l.TimeseriesLine]:y.ChartTypes.TIMESERIES_LINE},i=e.computed(()=>({type:n[o.chartOptions.type],fill:o.chartOptions.fill,stacked:o.chartOptions.stacked,chartDatasetColors:o.chartOptions.chartDatasetColors}));return(r,a)=>(e.openBlock(),e.createBlock(A,{query:r.query,"query-ready":r.queryReady},{default:e.withCtx(({data:p})=>[e.createElementVNode("div",W,[e.createVNode(e.unref(y.AnalyticsChart),{"chart-data":p,"chart-options":i.value,"legend-position":"bottom","tooltip-title":""},null,8,["chart-data","chart-options"])])]),_:1},8,["query","query-ready"]))}}),[["__scopeId","data-v-efe3a03d"]]),Z={class:"tile-boundary"},ee=e.defineComponent({__name:"DashboardTile",props:{definition:{type:Object,required:!0},height:{type:Number,required:!1,default:()=>170}},setup(t){const o=t,n={[l.TimeseriesLine]:X,[l.HorizontalBar]:H,[l.VerticalBar]:H,[l.Gauge]:Y},i=e.computed(()=>({component:n[o.definition.chart.type],rendererProps:{query:o.definition.query,queryReady:!0,chartOptions:o.definition.chart,height:o.height}}));return(r,a)=>(e.openBlock(),e.createElementBlock("div",Z,[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)]))}}),te="20px",$=g(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":`${h.value}px`}));const o=parseInt(te),n=t,i=e.ref(null),r=e.ref(0),a=new ResizeObserver(c=>{r.value=c[0].contentRect.width});e.onMounted(()=>{i.value&&a.observe(i.value)}),e.onUnmounted(()=>{i.value&&a.unobserve(i.value)});const p=e.computed(()=>r.value/n.gridSize.cols-o),_=e.computed(()=>n.tiles.map((c,m)=>{const d=c.layout.position.col*(p.value+o),b=c.layout.position.row*(n.tileHeight+o),f=c.layout.size.cols*p.value+o*(c.layout.size.cols-1),q=c.layout.size.rows*n.tileHeight+o*(c.layout.size.rows-1);return{key:`tile-${m}`,tile:c,style:{transform:`translate(${d}px, ${b}px)`,width:`${f}px`,height:`${q}px`}}})),h=e.computed(()=>Math.max(...n.tiles.map(m=>m.layout.position.row+m.layout.size.rows))*n.tileHeight+o*n.gridSize.rows);return(c,m)=>(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(_.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(c.$slots,"tile",{style:e.normalizeStyle(d.style),tile:d.tile},void 0,!0)],6))),128))],512))}}),[["__scopeId","data-v-b6cb2d7b"]]),re={class:"kong-ui-public-dashboard-renderer"},oe=g(e.defineComponent({__name:"DashboardRenderer",props:{context:{},config:{}},setup(t){const o=t,{i18n:n}=j.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 r=e.computed(()=>o.config.tiles.map((a,p)=>({layout:a.layout,meta:a.definition,id:p})));return(a,p)=>{const _=e.resolveComponent("KAlert");return e.openBlock(),e.createElementBlock("div",re,[e.unref(i)?(e.openBlock(),e.createBlock($,{key:1,"grid-size":a.config.gridSize,"tile-height":a.config.tileHeight,tiles:r.value},{tile:e.withCtx(({tile:h,style:c})=>[e.createVNode(ee,{class:"tile-container",definition:h.meta,height:parseInt(c.height)},null,8,["definition","height"])]),_:1},8,["grid-size","tile-height","tiles"])):(e.openBlock(),e.createBlock(_,{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=l,s.DashboardRenderer=oe,s.GridLayout=$,s.barChartSchema=w,s.dashboardConfigSchema=G,s.exploreV4QuerySchema=z,s.gaugeChartSchema=O,s.tileConfigSchema=V,s.tileDefinitionSchema=L,s.tileLayoutSchema=N,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.5.4",
+  "version": "0.5.5",
   "type": "module",
   "main": "./dist/dashboard-renderer.umd.js",
   "module": "./dist/dashboard-renderer.es.js",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "ajv": "^8.12.0",
-    "@kong-ui-public/core": "^1.5.0"
+    "@kong-ui-public/core": "^1.5.1"
   },
   "scripts": {
     "dev": "cross-env USE_SANDBOX=true vite",