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

package/dist/dashboard-renderer.umd.js

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

package/dist/style.css

@@ -1 +1 @@
-.locked[data-v-a729d798]{cursor:move}.tooltip-container[data-v-a729d798]{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 .3s cubic-bezier(.25,.8,.25,1);z-index:999}.tooltip-container .tooltip-title[data-v-a729d798]{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-a729d798]{font-size:16px;font-weight:600}.tooltip-container .tooltip-title .subtitle[data-v-a729d798]{font-size:14px;margin-top:8px}.tooltip-container .tooltip-title .drag-icon[data-v-a729d798]{margin-top:6px;position:absolute;right:0;top:0}ul.tooltip[data-v-a729d798]{list-style:none;margin:0;max-height:300px;min-width:250px;overflow-y:scroll;padding-left:0;scrollbar-width:thin}ul.tooltip[data-v-a729d798]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}ul.tooltip[data-v-a729d798]::-webkit-scrollbar{width:10px}ul.tooltip[data-v-a729d798]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}ul.tooltip li[data-v-a729d798]{display:flex;font-size:14px;margin:8px}ul.tooltip li[data-v-a729d798]:last-child{padding-bottom:8px}ul.tooltip .display-label[data-v-a729d798]{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ul.tooltip .display-value[data-v-a729d798]{margin-left:auto;padding-left:8px;white-space:nowrap}ul.tooltip .tooltip-legend[data-v-a729d798]{display:inline-flex;flex-direction:row;height:15px;margin-right:8px;width:3px}.legend-container[data-v-22ddf722]{display:flex;max-height:inherit;-ms-overflow-style:thin;overflow-x:hidden;overflow-y:scroll;padding-left:12px;scrollbar-width:thin}.legend-container.vertical[data-v-22ddf722]{flex-direction:column;max-height:400px;max-width:15%;word-break:break-word}@media (max-width: 767px){.legend-container.vertical[data-v-22ddf722]{flex-direction:row;height:20%;max-width:100%;width:100%}}.legend-container.horizontal[data-v-22ddf722]{column-gap:2px;display:grid;justify-content:center;max-height:15%;width:100%}.legend-container.horizontal .truncate-label[data-v-22ddf722]{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-container[data-v-22ddf722]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}.legend-container[data-v-22ddf722]::-webkit-scrollbar{width:10px}.legend-container[data-v-22ddf722]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.legend-container li[data-v-22ddf722]{align-items:start;cursor:pointer;display:flex;margin-top:16px}.legend-container li .legend[data-v-22ddf722]{flex:0 0 14px;height:3px;margin-right:12px;margin-top:6px}.legend-container li .label[data-v-22ddf722]{font-size:14px;line-height:18px}.legend-container li .sub-label[data-v-22ddf722]{font-size:12px;line-height:14px;word-break:none}.legend-container li .strike-through[data-v-22ddf722]{text-decoration:line-through}.chart-parent[data-v-2d7e4a73]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-2d7e4a73]{flex-direction:column}.chart-parent.column .chart-container[data-v-2d7e4a73]{height:80%;width:100%}.chart-parent.legend-row[data-v-2d7e4a73]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-2d7e4a73]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-2d7e4a73]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-2d7e4a73]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-2d7e4a73]{position:relative}.chart-container[data-v-2d7e4a73]{-ms-overflow-style:thin;overflow-y:hidden;scrollbar-width:thin}.chart-container .chart-body[data-v-2d7e4a73]{height:100%}.chart-container[data-v-2d7e4a73]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}.chart-container[data-v-2d7e4a73]::-webkit-scrollbar{width:10px}.chart-container[data-v-2d7e4a73]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.axis[data-v-2d7e4a73]{left:0;pointer-events:none;position:absolute;top:0;z-index:99}.axis-tooltip[data-v-2d7e4a73]{background-color:#3a3f51;color:#fff;padding:4px 8px;position:absolute;width:max-content;z-index:100}.tooltip-boundary[data-v-2d7e4a73]{height:100%;left:0;position:relative;top:0;width:100%}.chart-parent[data-v-89d6e4ca]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-89d6e4ca]{flex-direction:column}.chart-parent.column .chart-container[data-v-89d6e4ca]{height:80%;width:100%}.chart-parent.legend-row[data-v-89d6e4ca]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-89d6e4ca]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-89d6e4ca]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-89d6e4ca]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-89d6e4ca]{position:relative}.chart-parent[data-v-19da6e6a]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-19da6e6a]{flex-direction:column}.chart-parent.column .chart-container[data-v-19da6e6a]{height:80%;width:100%}.chart-parent.legend-row[data-v-19da6e6a]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-19da6e6a]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-19da6e6a]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-19da6e6a]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-19da6e6a]{position:relative}.analytics-chart-shell[data-v-b12b2a26],.simple-chart-shell[data-v-b12b2a26]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-b12b2a26],.simple-chart-shell .chart-empty-state[data-v-b12b2a26]{display:flex;flex-direction:column;height:100%;justify-content:center}.analytics-chart-shell .analytics-chart-parent[data-v-b12b2a26]{height:100%;width:100%}.analytics-chart-shell .chart-empty-state[data-v-b12b2a26]{padding:20px 0 16px}.analytics-chart-shell .chart-header[data-v-b12b2a26]{display:flex;padding-bottom:16px}.analytics-chart-shell .chart-title[data-v-b12b2a26]{font-size:18px;font-weight:600}.analytics-chart-shell .tooltip[data-v-b12b2a26]{display:flex;margin-left:12px;margin-top:2px}.analytics-chart-shell .limit-icon-wrapper[data-v-b12b2a26]{display:flex;flex-direction:row}.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-f014a616],.simple-chart-shell[data-v-f014a616]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-f014a616],.simple-chart-shell .chart-empty-state[data-v-f014a616]{display:flex;flex-direction:column;height:100%;justify-content:center}.simple-chart-shell[data-v-f014a616]{margin:0;padding:0}.simple-chart-shell .chart-empty-state[data-v-f014a616]{display:flex;flex-direction:column;height:100px;justify-content:center;width:100px}.simple-chart-shell .chart-empty-state[data-v-f014a616] .k-empty-state-title-header{font-size:12px;line-height:16px;margin:0}.kong-ui-public-top-n-table[data-v-f4324893]{border-radius:8px!important}.kong-ui-public-top-n-table .top-n-card-title[data-v-f4324893]{font-size:16px}.kong-ui-public-top-n-table[data-v-f4324893] .k-card-actions{align-self:baseline;display:flex;line-height:22px}.kong-ui-public-top-n-table[data-v-f4324893] .k-card-actions .top-n-card-description{color:#6c7489;font-size:12px;text-align:right}.kong-ui-public-top-n-table .top-n-table[data-v-f4324893]{display:flex;flex-direction:column;width:100%}.kong-ui-public-top-n-table .top-n-table .table-headings[data-v-f4324893]{font-size:14px;font-weight:600;line-height:24px}.kong-ui-public-top-n-table .top-n-table .table-row[data-v-f4324893]{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-f4324893]:last-of-type{border-bottom:none}.kong-ui-public-top-n-table .top-n-table .column-1[data-v-f4324893]{padding:0 24px 12px 0}.kong-ui-public-top-n-table .top-n-table .column-2[data-v-f4324893]{flex:1;max-width:110px;padding:0 0 12px}.kong-ui-public-top-n-table .top-n-table .table-body .table-row[data-v-f4324893]:first-of-type{border-top:1px solid #e0e4ea}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-f4324893],.kong-ui-public-top-n-table .top-n-table .table-body .column-2[data-v-f4324893]{padding-top:12px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-f4324893]{color:#3a3f51;font-size:14px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-f4324893] 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}.tile-boundary[data-v-eb4fff82]{border:1px solid black;flex:1 0 0}.tile-boundary+.tile-boundary[data-v-eb4fff82]{margin-left:16px}.kong-ui-public-dashboard-renderer[data-v-d6a56abf]{display:flex;flex-flow:row nowrap;justify-content:space-around}
+.locked[data-v-a729d798]{cursor:move}.tooltip-container[data-v-a729d798]{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 .3s cubic-bezier(.25,.8,.25,1);z-index:999}.tooltip-container .tooltip-title[data-v-a729d798]{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-a729d798]{font-size:16px;font-weight:600}.tooltip-container .tooltip-title .subtitle[data-v-a729d798]{font-size:14px;margin-top:8px}.tooltip-container .tooltip-title .drag-icon[data-v-a729d798]{margin-top:6px;position:absolute;right:0;top:0}ul.tooltip[data-v-a729d798]{list-style:none;margin:0;max-height:300px;min-width:250px;overflow-y:scroll;padding-left:0;scrollbar-width:thin}ul.tooltip[data-v-a729d798]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}ul.tooltip[data-v-a729d798]::-webkit-scrollbar{width:10px}ul.tooltip[data-v-a729d798]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}ul.tooltip li[data-v-a729d798]{display:flex;font-size:14px;margin:8px}ul.tooltip li[data-v-a729d798]:last-child{padding-bottom:8px}ul.tooltip .display-label[data-v-a729d798]{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ul.tooltip .display-value[data-v-a729d798]{margin-left:auto;padding-left:8px;white-space:nowrap}ul.tooltip .tooltip-legend[data-v-a729d798]{display:inline-flex;flex-direction:row;height:15px;margin-right:8px;width:3px}.legend-container[data-v-77a4fc89]{display:flex;max-height:inherit;-ms-overflow-style:thin;overflow-x:hidden;overflow-y:scroll;padding-left:12px;scrollbar-width:thin}.legend-container.vertical[data-v-77a4fc89]{flex-direction:column;max-height:400px;max-width:15%;word-break:break-word}@media (max-width: 767px){.legend-container.vertical[data-v-77a4fc89]{flex-direction:row;height:20%;max-width:100%;width:100%}}.legend-container.horizontal[data-v-77a4fc89]{column-gap:2px;display:grid;justify-content:center;max-height:15%;width:95%}.legend-container.horizontal .truncate-label[data-v-77a4fc89]{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-container[data-v-77a4fc89]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}.legend-container[data-v-77a4fc89]::-webkit-scrollbar{width:10px}.legend-container[data-v-77a4fc89]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.legend-container li[data-v-77a4fc89]{align-items:start;cursor:pointer;display:flex;margin-top:16px}.legend-container li .legend[data-v-77a4fc89]{flex:0 0 14px;height:3px;margin-right:12px;margin-top:6px}.legend-container li .label[data-v-77a4fc89]{font-size:14px;line-height:18px}.legend-container li .sub-label[data-v-77a4fc89]{font-size:12px;line-height:14px;word-break:none}.legend-container li .strike-through[data-v-77a4fc89]{text-decoration:line-through}.chart-parent[data-v-2d7e4a73]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-2d7e4a73]{flex-direction:column}.chart-parent.column .chart-container[data-v-2d7e4a73]{height:80%;width:100%}.chart-parent.legend-row[data-v-2d7e4a73]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-2d7e4a73]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-2d7e4a73]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-2d7e4a73]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-2d7e4a73]{position:relative}.chart-container[data-v-2d7e4a73]{-ms-overflow-style:thin;overflow-y:hidden;scrollbar-width:thin}.chart-container .chart-body[data-v-2d7e4a73]{height:100%}.chart-container[data-v-2d7e4a73]::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}.chart-container[data-v-2d7e4a73]::-webkit-scrollbar{width:10px}.chart-container[data-v-2d7e4a73]::-webkit-scrollbar-thumb{background-color:#e0e4ea;border-radius:10px}.axis[data-v-2d7e4a73]{left:0;pointer-events:none;position:absolute;top:0;z-index:99}.axis-tooltip[data-v-2d7e4a73]{background-color:#3a3f51;color:#fff;padding:4px 8px;position:absolute;width:max-content;z-index:100}.tooltip-boundary[data-v-2d7e4a73]{height:100%;left:0;position:relative;top:0;width:100%}.chart-parent[data-v-89d6e4ca]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-89d6e4ca]{flex-direction:column}.chart-parent.column .chart-container[data-v-89d6e4ca]{height:80%;width:100%}.chart-parent.legend-row[data-v-89d6e4ca]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-89d6e4ca]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-89d6e4ca]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-89d6e4ca]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-89d6e4ca]{position:relative}.chart-parent[data-v-19da6e6a]{align-items:center;display:flex;height:inherit;position:relative;width:inherit}.chart-parent.column[data-v-19da6e6a]{flex-direction:column}.chart-parent.column .chart-container[data-v-19da6e6a]{height:80%;width:100%}.chart-parent.legend-row[data-v-19da6e6a]{flex-direction:row}.chart-parent.legend-row .chart-container[data-v-19da6e6a]{flex-grow:1;height:100%;width:85%}@media (max-width: 767px){.chart-parent.legend-row .chart-container[data-v-19da6e6a]{height:80%!important;width:100%!important}}@media (max-width: 767px){.chart-parent.legend-row[data-v-19da6e6a]{display:flex;flex-wrap:wrap}}.chart-parent .chart-container[data-v-19da6e6a]{position:relative}.analytics-chart-shell[data-v-4b83d697],.simple-chart-shell[data-v-4b83d697]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-4b83d697],.simple-chart-shell .chart-empty-state[data-v-4b83d697]{display:flex;flex-direction:column;height:100%;justify-content:center}.analytics-chart-shell[data-v-4b83d697]{height:var(--60943f86);width:var(--8cbe544e)}.analytics-chart-shell .analytics-chart-parent[data-v-4b83d697]{height:100%;width:100%}.analytics-chart-shell .chart-empty-state[data-v-4b83d697]{padding:20px 0 16px}.analytics-chart-shell .chart-header[data-v-4b83d697]{display:flex;padding-bottom:16px}.analytics-chart-shell .chart-title[data-v-4b83d697]{font-size:18px;font-weight:600}.analytics-chart-shell .tooltip[data-v-4b83d697]{display:flex;margin-left:12px;margin-top:2px}.analytics-chart-shell .limit-icon-wrapper[data-v-4b83d697]{display:flex;flex-direction:row}.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-f014a616],.simple-chart-shell[data-v-f014a616]{border-radius:4px;display:flex;flex-direction:column}.analytics-chart-shell .chart-empty-state[data-v-f014a616],.simple-chart-shell .chart-empty-state[data-v-f014a616]{display:flex;flex-direction:column;height:100%;justify-content:center}.simple-chart-shell[data-v-f014a616]{margin:0;padding:0}.simple-chart-shell .chart-empty-state[data-v-f014a616]{display:flex;flex-direction:column;height:100px;justify-content:center;width:100px}.simple-chart-shell .chart-empty-state[data-v-f014a616] .k-empty-state-title-header{font-size:12px;line-height:16px;margin:0}.kong-ui-public-top-n-table[data-v-f4324893]{border-radius:8px!important}.kong-ui-public-top-n-table .top-n-card-title[data-v-f4324893]{font-size:16px}.kong-ui-public-top-n-table[data-v-f4324893] .k-card-actions{align-self:baseline;display:flex;line-height:22px}.kong-ui-public-top-n-table[data-v-f4324893] .k-card-actions .top-n-card-description{color:#6c7489;font-size:12px;text-align:right}.kong-ui-public-top-n-table .top-n-table[data-v-f4324893]{display:flex;flex-direction:column;width:100%}.kong-ui-public-top-n-table .top-n-table .table-headings[data-v-f4324893]{font-size:14px;font-weight:600;line-height:24px}.kong-ui-public-top-n-table .top-n-table .table-row[data-v-f4324893]{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-f4324893]:last-of-type{border-bottom:none}.kong-ui-public-top-n-table .top-n-table .column-1[data-v-f4324893]{padding:0 24px 12px 0}.kong-ui-public-top-n-table .top-n-table .column-2[data-v-f4324893]{flex:1;max-width:110px;padding:0 0 12px}.kong-ui-public-top-n-table .top-n-table .table-body .table-row[data-v-f4324893]:first-of-type{border-top:1px solid #e0e4ea}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-f4324893],.kong-ui-public-top-n-table .top-n-table .table-body .column-2[data-v-f4324893]{padding-top:12px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-f4324893]{color:#3a3f51;font-size:14px}.kong-ui-public-top-n-table .top-n-table .table-body .column-1[data-v-f4324893] 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}.kong-ui-public-grid-layout[data-v-b6cb2d7b]{height:var(--01f27c19);width:100%}.grid-cell[data-v-b6cb2d7b]{position:absolute}.grid-cell .tile-container[data-v-b6cb2d7b]{margin:20px}@media (max-width: 768px){.kong-ui-public-grid-layout[data-v-b6cb2d7b]{display:flex;flex-direction:column}.kong-ui-public-grid-layout .grid-cell[data-v-b6cb2d7b]{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-b6cb2d7b]:not(:first-child){margin-top:20px}.kong-ui-public-grid-layout .empty-cell[data-v-b6cb2d7b]{display:none}}.kong-ui-public-dashboard-renderer .tile-container[data-v-dec7d037]{border:1px solid #e0e4ea;border-radius:4px}

package/dist/types/components/{AnalyticsChartRenderer.vue.d.ts → BarChartRenderer.vue.d.ts}

@@ -10,12 +10,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     chartOptions: {
         type: import("vue").PropType<{
+            chartDatasetColors?: {
+                [x: string]: string;
+            } | string[] | undefined;
             stacked?: boolean | undefined;
+            showAnnotations?: boolean | undefined;
             syntheticsDataKey?: string | undefined;
             type: ChartTypes.HorizontalBar | ChartTypes.VerticalBar;
         }>;
         required: true;
     };
+    height: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: import("vue").PropType<any>;
@@ -27,12 +35,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     chartOptions: {
         type: import("vue").PropType<{
+            chartDatasetColors?: {
+                [x: string]: string;
+            } | string[] | undefined;
             stacked?: boolean | undefined;
+            showAnnotations?: boolean | undefined;
             syntheticsDataKey?: string | undefined;
             type: ChartTypes.HorizontalBar | ChartTypes.VerticalBar;
         }>;
         required: true;
     };
+    height: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
 }>>, {}, {}>;
 export default _default;
-//# sourceMappingURL=AnalyticsChartRenderer.vue.d.ts.map
+//# sourceMappingURL=BarChartRenderer.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/BarChartRenderer.vue.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFrC,wBAQG"}

package/dist/types/components/DashboardRenderer.vue.d.ts

@@ -4,25 +4,53 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<DashboardRendererContext>;
         required: true;
     };
-    definition: {
+    config: {
         type: import("vue").PropType<{
+            tileHeight?: number | undefined;
             tiles: {
-                title?: string | undefined;
-                query: {
-                    [x: string]: unknown;
+                definition: {
+                    query: {
+                        [x: string]: unknown;
+                    };
+                    chart: {
+                        chartDatasetColors?: {
+                            [x: string]: string;
+                        } | string[] | undefined;
+                        stacked?: boolean | undefined;
+                        showAnnotations?: boolean | undefined;
+                        syntheticsDataKey?: string | undefined;
+                        type: import("../types").ChartTypes.HorizontalBar | import("../types").ChartTypes.VerticalBar;
+                    } | {
+                        syntheticsDataKey?: string | undefined;
+                        metricDisplay?: import("@kong-ui-public/analytics-chart").ChartMetricDisplay | undefined;
+                        reverseDataset?: boolean | undefined;
+                        numerator?: number | undefined;
+                        type: import("../types").ChartTypes.Gauge;
+                    } | {
+                        chartDatasetColors?: {
+                            [x: string]: string;
+                        } | string[] | undefined;
+                        stacked?: boolean | undefined;
+                        syntheticsDataKey?: string | undefined;
+                        fill?: boolean | undefined;
+                        type: import("../types").ChartTypes.TimeseriesLine;
+                    };
                 };
-                chart: {
-                    stacked?: boolean | undefined;
-                    syntheticsDataKey?: string | undefined;
-                    type: import("../types").ChartTypes.HorizontalBar | import("../types").ChartTypes.VerticalBar;
-                } | {
-                    syntheticsDataKey?: string | undefined;
-                    metricDisplay?: import("@kong-ui-public/analytics-chart").ChartMetricDisplay | undefined;
-                    reverseDataset?: boolean | undefined;
-                    numerator?: number | undefined;
-                    type: import("../types").ChartTypes.Gauge;
+                layout: {
+                    position: {
+                        col: number;
+                        row: number;
+                    };
+                    size: {
+                        cols: number;
+                        rows: number;
+                    };
                 };
             }[];
+            gridSize: {
+                cols: number;
+                rows: number;
+            };
         }>;
         required: true;
     };
@@ -31,25 +59,53 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<DashboardRendererContext>;
         required: true;
     };
-    definition: {
+    config: {
         type: import("vue").PropType<{
+            tileHeight?: number | undefined;
             tiles: {
-                title?: string | undefined;
-                query: {
-                    [x: string]: unknown;
+                definition: {
+                    query: {
+                        [x: string]: unknown;
+                    };
+                    chart: {
+                        chartDatasetColors?: {
+                            [x: string]: string;
+                        } | string[] | undefined;
+                        stacked?: boolean | undefined;
+                        showAnnotations?: boolean | undefined;
+                        syntheticsDataKey?: string | undefined;
+                        type: import("../types").ChartTypes.HorizontalBar | import("../types").ChartTypes.VerticalBar;
+                    } | {
+                        syntheticsDataKey?: string | undefined;
+                        metricDisplay?: import("@kong-ui-public/analytics-chart").ChartMetricDisplay | undefined;
+                        reverseDataset?: boolean | undefined;
+                        numerator?: number | undefined;
+                        type: import("../types").ChartTypes.Gauge;
+                    } | {
+                        chartDatasetColors?: {
+                            [x: string]: string;
+                        } | string[] | undefined;
+                        stacked?: boolean | undefined;
+                        syntheticsDataKey?: string | undefined;
+                        fill?: boolean | undefined;
+                        type: import("../types").ChartTypes.TimeseriesLine;
+                    };
                 };
-                chart: {
-                    stacked?: boolean | undefined;
-                    syntheticsDataKey?: string | undefined;
-                    type: import("../types").ChartTypes.HorizontalBar | import("../types").ChartTypes.VerticalBar;
-                } | {
-                    syntheticsDataKey?: string | undefined;
-                    metricDisplay?: import("@kong-ui-public/analytics-chart").ChartMetricDisplay | undefined;
-                    reverseDataset?: boolean | undefined;
-                    numerator?: number | undefined;
-                    type: import("../types").ChartTypes.Gauge;
+                layout: {
+                    position: {
+                        col: number;
+                        row: number;
+                    };
+                    size: {
+                        cols: number;
+                        rows: number;
+                    };
                 };
             }[];
+            gridSize: {
+                cols: number;
+                rows: number;
+            };
         }>;
         required: true;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardRenderer.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,wBAAwB,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+G7E,wBAWG"}
+{"version":3,"file":"DashboardRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardRenderer.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAyC,wBAAwB,EAAkB,MAAM,UAAU,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyJ/G,wBAWG"}

package/dist/types/components/DashboardTile.vue.d.ts

@@ -1,14 +1,18 @@
 import { ChartTypes } from '../types';
+import type { PropType } from 'vue';
 import '@kong-ui-public/analytics-chart/dist/style.css';
 declare const _default: import("vue").DefineComponent<{
     definition: {
-        type: import("vue").PropType<{
-            title?: string | undefined;
+        type: PropType<{
             query: {
                 [x: string]: unknown;
             };
             chart: {
+                chartDatasetColors?: {
+                    [x: string]: string;
+                } | string[] | undefined;
                 stacked?: boolean | undefined;
+                showAnnotations?: boolean | undefined;
                 syntheticsDataKey?: string | undefined;
                 type: ChartTypes.HorizontalBar | ChartTypes.VerticalBar;
             } | {
@@ -17,19 +21,35 @@ declare const _default: import("vue").DefineComponent<{
                 reverseDataset?: boolean | undefined;
                 numerator?: number | undefined;
                 type: ChartTypes.Gauge;
+            } | {
+                chartDatasetColors?: {
+                    [x: string]: string;
+                } | string[] | undefined;
+                stacked?: boolean | undefined;
+                syntheticsDataKey?: string | undefined;
+                fill?: boolean | undefined;
+                type: ChartTypes.TimeseriesLine;
             };
         }>;
         required: true;
     };
+    height: {
+        type: NumberConstructor;
+        required: false;
+        default: () => number;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     definition: {
-        type: import("vue").PropType<{
-            title?: string | undefined;
+        type: PropType<{
             query: {
                 [x: string]: unknown;
             };
             chart: {
+                chartDatasetColors?: {
+                    [x: string]: string;
+                } | string[] | undefined;
                 stacked?: boolean | undefined;
+                showAnnotations?: boolean | undefined;
                 syntheticsDataKey?: string | undefined;
                 type: ChartTypes.HorizontalBar | ChartTypes.VerticalBar;
             } | {
@@ -38,10 +58,25 @@ declare const _default: import("vue").DefineComponent<{
                 reverseDataset?: boolean | undefined;
                 numerator?: number | undefined;
                 type: ChartTypes.Gauge;
+            } | {
+                chartDatasetColors?: {
+                    [x: string]: string;
+                } | string[] | undefined;
+                stacked?: boolean | undefined;
+                syntheticsDataKey?: string | undefined;
+                fill?: boolean | undefined;
+                type: ChartTypes.TimeseriesLine;
             };
         }>;
         required: true;
     };
-}>>, {}, {}>;
+    height: {
+        type: NumberConstructor;
+        required: false;
+        default: () => number;
+    };
+}>>, {
+    height: number;
+}, {}>;
 export default _default;
 //# sourceMappingURL=DashboardTile.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardTile.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardTile.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAKrC,OAAO,gDAAgD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHvD,wBAUG"}
+{"version":3,"file":"DashboardTile.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardTile.vue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EACC,QAAQ,EACpB,MAAM,KAAK,CAAA;AAEZ,OAAO,gDAAgD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GvD,wBAkBG"}

package/dist/types/components/SimpleChartRenderer.vue.d.ts

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         required: true;
     };
+    height: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: import("vue").PropType<any>;
@@ -37,6 +41,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         required: true;
     };
+    height: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
 }>>, {}, {}>;
 export default _default;
 //# sourceMappingURL=SimpleChartRenderer.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleChartRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SimpleChartRenderer.vue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFrC,wBAQG"}
+{"version":3,"file":"SimpleChartRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SimpleChartRenderer.vue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFrC,wBAQG"}

package/dist/types/components/TimeseriesChartRenderer.vue.d.ts

@@ -0,0 +1,54 @@
+import { ChartTypes } from '../types';
+declare const _default: import("vue").DefineComponent<{
+    query: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+    queryReady: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    chartOptions: {
+        type: import("vue").PropType<{
+            chartDatasetColors?: {
+                [x: string]: string;
+            } | string[] | undefined;
+            stacked?: boolean | undefined;
+            syntheticsDataKey?: string | undefined;
+            fill?: boolean | undefined;
+            type: ChartTypes.TimeseriesLine;
+        }>;
+        required: true;
+    };
+    height: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    query: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+    queryReady: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    chartOptions: {
+        type: import("vue").PropType<{
+            chartDatasetColors?: {
+                [x: string]: string;
+            } | string[] | undefined;
+            stacked?: boolean | undefined;
+            syntheticsDataKey?: string | undefined;
+            fill?: boolean | undefined;
+            type: ChartTypes.TimeseriesLine;
+        }>;
+        required: true;
+    };
+    height: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=TimeseriesChartRenderer.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeseriesChartRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TimeseriesChartRenderer.vue.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFrC,wBAQG"}

package/dist/types/components/layout/GridLayout.vue.d.ts

@@ -0,0 +1,63 @@
+import type { GridSize, GridTile } from 'src/types';
+declare const _default: <T>(__VLS_props: {
+    readonly tiles: GridTile<T>[];
+    tileHeight?: number | undefined;
+    readonly gridSize: GridSize;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        tile?(_: {
+            style: {
+                width: string;
+                height: string;
+                transform: string;
+            };
+            tile: GridTile<T>;
+        }): any;
+    };
+    emit: any;
+} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        readonly tiles: GridTile<T>[];
+        tileHeight?: number | undefined;
+        readonly gridSize: GridSize;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        tile?(_: {
+            style: {
+                width: string;
+                height: string;
+                transform: string;
+            };
+            tile: GridTile<T>;
+        }): any;
+    };
+    emit: any;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            readonly tiles: GridTile<T>[];
+            tileHeight?: number | undefined;
+            readonly gridSize: GridSize;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+        attrs: any;
+        slots: {
+            tile?(_: {
+                style: {
+                    width: string;
+                    height: string;
+                    transform: string;
+                };
+                tile: GridTile<T>;
+            }): any;
+        };
+        emit: any;
+    } | undefined;
+};
+export default _default;
+//# sourceMappingURL=GridLayout.vue.d.ts.map

package/dist/types/components/layout/GridLayout.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayout.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/GridLayout.vue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAQ,QAAQ,EAAE,MAAM,WAAW,CAAA;;;;;;WAqNlD,GAAG;;;;;;;;;YAtDiB,GAAG;;;yCAqDd,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;;;;;oBAAzC,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;;;;;;YAtDiB,GAAG;;;;;;;;;;;;wBAqDd,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;;;;;;;;;gBAtDiB,GAAG;;;;;AA1J9B,wBAqN2E"}

package/dist/types/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_TILE_HEIGHT = 170;
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,mBAAmB,MAAM,CAAA"}

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import DashboardRenderer from './components/DashboardRenderer.vue';
-export { DashboardRenderer };
+import GridLayout from './components/layout/GridLayout.vue';
+export { DashboardRenderer, GridLayout };
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,oCAAoC,CAAA;AAElE,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,oCAAoC,CAAA;AAClE,OAAO,UAAU,MAAM,oCAAoC,CAAA;AAE3D,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAA;AAExC,cAAc,SAAS,CAAA"}