@kong-ui-public/dashboard-renderer 0.7.2 → 0.7.3

package/dist/dashboard-renderer.es.js

@@ -534,7 +534,7 @@ const X = {
   },
   setup(e) {
     k((r) => ({
-      "1f8df81a": `${r.height}px`
+      "72d886ee": `${r.height}px`
     }));
     const t = e, o = {
       [y.HorizontalBar]: O.HORIZONTAL_BAR,
@@ -563,7 +563,7 @@ const X = {
       _: 1
     }, 8, ["context", "query", "query-ready"]));
   }
-}), V = /* @__PURE__ */ A(je, [["__scopeId", "data-v-3142376f"]]), Ve = { class: "analytics-chart" }, Be = /* @__PURE__ */ v({
+}), V = /* @__PURE__ */ A(je, [["__scopeId", "data-v-37032a21"]]), Ve = { class: "analytics-chart" }, Be = /* @__PURE__ */ v({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -574,7 +574,7 @@ const X = {
   },
   setup(e) {
     k((r) => ({
-      "285f077a": `${r.height}px`
+      ac514926: `${r.height}px`
     }));
     const t = e, o = {
       [y.TimeseriesLine]: O.TIMESERIES_LINE
@@ -603,7 +603,7 @@ const X = {
       _: 1
     }, 8, ["context", "query", "query-ready"]));
   }
-}), He = /* @__PURE__ */ A(Be, [["__scopeId", "data-v-978ded11"]]), Ue = { class: "metric-card-tile-wrapper" }, Ke = /* @__PURE__ */ v({
+}), He = /* @__PURE__ */ A(Be, [["__scopeId", "data-v-65cdd428"]]), Ue = { class: "metric-card-tile-wrapper" }, Ke = /* @__PURE__ */ v({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -801,7 +801,7 @@ const X = {
       ]);
     };
   }
-}), ct = /* @__PURE__ */ A(Xe, [["__scopeId", "data-v-e6398a0a"]]);
+}), ct = /* @__PURE__ */ A(Xe, [["__scopeId", "data-v-ae27b00a"]]);
 export {
   y as ChartTypes,
   ct as DashboardRenderer,

package/dist/dashboard-renderer.umd.js

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

package/dist/style.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/dashboard-renderer",
-  "version": "0.7.2",
+  "version": "0.7.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.18",
-    "@kong-ui-public/analytics-chart": "^2.1.2",
-    "@kong-ui-public/analytics-metric-provider": "^4.0.3",
-    "@kong-ui-public/analytics-utilities": "^1.1.1",
     "@kong-ui-public/i18n": "^2.1.3",
+    "@kong-ui-public/analytics-utilities": "^1.1.1",
+    "@kong-ui-public/analytics-chart": "^2.1.3",
+    "@kong-ui-public/analytics-metric-provider": "^4.0.4",
     "@kong-ui-public/sandbox-layout": "^2.0.34"
   },
   "repository": {
@@ -53,8 +53,8 @@
     "@kong/kongponents": "^8.126.2",
     "swrv": "^1.0.4",
     "vue": ">= 3.3.13 < 4",
-    "@kong-ui-public/analytics-chart": "^2.1.2",
-    "@kong-ui-public/analytics-metric-provider": "^4.0.3",
+    "@kong-ui-public/analytics-chart": "^2.1.3",
+    "@kong-ui-public/analytics-metric-provider": "^4.0.4",
     "@kong-ui-public/analytics-utilities": "^1.1.1",
     "@kong-ui-public/i18n": "^2.1.3"
   },