vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 15.6 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),Q=require("./pdf-D6wHFpvv.cjs"),K=require("./useNestedProp-DUH233CH.cjs"),_=require("./index-B7zOq_yO.cjs"),J=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),Z={key:0,"data-dom-to-png-ignore":"",style:{width:"100%",display:"flex","justify-content":"end"}},ee=["disabled"],oe=["stroke"],ne={key:1},te=["id"],re=["onMousedown","onTouchstart"],ie=["onMousedown","onTouchstart"],ue=["onMousedown","onTouchstart"],se=["onMousedown","onTouchstart"],le=["onMousedown","onTouchstart"],A=1,ae={__name:"vue-ui-dashboard",props:{dataset:Array,config:Object},emits:["change"],setup(B,{expose:E,emit:z}){e.useCssVars(o=>({"56f02d00":R.value,"2fbe8dda":L.value}));const N={VueDataUi:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-data-ui-C3o_PUJM.cjs"))),VueUi3dBar:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-3d-bar-1L_FJakQ.cjs"))),VueUiAccordion:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-accordion-DkOSgEPp.cjs"))),VueUiAgePyramid:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-age-pyramid-BX5nAmcR.cjs"))),VueUiAnnotator:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-annotator-BCfRHpTL.cjs"))),VueUiCandlestick:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-candlestick-D_UWn-gv.cjs"))),VueUiChestnut:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-chestnut-Ds2IXobn.cjs"))),VueUiDigits:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-digits-VMbRXMfP.cjs"))),VueUiDonut:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-donut-BjGbzLsC.cjs"))),VueUiDonutEvolution:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-donut-evolution-B2MMB7lY.cjs"))),VueUiDumbbell:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-dumbbell-DgizrVYM.cjs"))),VueUiFlow:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-flow-v5zjc5i3.cjs"))),VueUiGalaxy:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-galaxy-qIl1Sp2I.cjs"))),VueUiGauge:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-gauge-BzmlwkZO.cjs"))),VueUiHeatmap:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-heatmap-CjUYm6Y8.cjs"))),VueUiKpi:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-kpi-BBpWvss7.cjs"))),VueUiMiniLoader:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-mini-loader-CnEXcdzr.cjs"))),VueUiMolecule:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-molecule-CXda1TRy.cjs"))),VueUiMoodRadar:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-mood-radar-DCz7WxHl.cjs"))),VueUiNestedDonuts:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-nested-donuts-CQHTFClA.cjs"))),VueUiOnion:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-onion-C3tsgeYq.cjs"))),VueUiParallelCoordinatePlot:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-parallel-coordinate-plot-tnKZr6bC.cjs"))),VueUiQuadrant:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-quadrant-CF7YSzrp.cjs"))),VueUiQuickChart:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-quick-chart-Y8-adLxE.cjs"))),VueUiRadar:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-radar-BvNWx4a8.cjs"))),VueUiRating:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-rating-DitReQ9n.cjs"))),VueUiRelationCircle:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-relation-circle-DcZyVpqG.cjs"))),VueUiRings:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-rings-DqF707hp.cjs"))),VueUiScatter:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-scatter-D9sIS4Dp.cjs"))),VueUiSkeleton:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-skeleton-Br6xw2QW.cjs"))),VueUiSmiley:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-smiley-B3JFedE5.cjs"))),VueUiSparkHistogram:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-sparkhistogram-WxGpd0TA.cjs"))),VueUiSparkStackbar:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-sparkstackbar-BFkweUWm.cjs"))),VueUiSparkTrend:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-spark-trend-DiZvQzSb.cjs"))),VueUiSparkbar:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-sparkbar-B1pBe2b4.cjs"))),VueUiSparkgauge:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-sparkgauge-ByMA0D5w.cjs"))),VueUiSparkline:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-sparkline-DPlkEVV6.cjs"))),VueUiStripPlot:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-strip-plot-BKsixkUU.cjs"))),VueUiTable:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-table-o_zUZsUz.cjs"))),VueUiTableHeatmap:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-table-heatmap-BidbeObz.cjs"))),VueUiTableSparkline:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-table-sparkline-BeWSYBle.cjs"))),VueUiThermometer:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-thermometer-Ds9lWEE_.cjs"))),VueUiTimer:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-timer-OAHpNcTb.cjs"))),VueUiTiremarks:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-tiremarks-B8dltsA4.cjs"))),VueUiTreemap:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-treemap-BjWTRcbW.cjs"))),VueUiVerticalBar:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-vertical-bar-kRBUbvs6.cjs"))),VueUiWaffle:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-waffle-XM92kEwZ.cjs"))),VueUiWheel:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-wheel-DMiRno4r.cjs"))),VueUiWordCloud:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-word-cloud-8-CU7ACz.cjs"))),VueUiXy:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-xy-CHcCU9pB.cjs"))),VueUiXyCanvas:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-xy-canvas-Cmax9zNa.cjs"))),VueUiCarouselTable:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-carousel-table-DZWUAetO.cjs"))),VueUiGizmo:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-gizmo-oMF4Uxgv.cjs"))),VueUiStackbar:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-stackbar-BFgWt2oG.cjs"))),VueUiBullet:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-bullet-BuoFM_Qt.cjs"))),VueUiFunnel:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-funnel-AOnxjmTY.cjs"))),VueUiHistoryPlot:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-history-plot-CPEbWJv-.cjs"))),VueUiCirclePack:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-circle-pack-DZjwCJfn.cjs"))),VueUiWorld:e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./vue-ui-world-C-TO7n_r.cjs")))},{vue_ui_dashboard:$}=_.useConfig(),q=B,l=e.computed(()=>K.useNestedProp({userConfig:q.config,defaultConfig:$})),U=e.ref(_.createUid()),c=e.ref(l.value.locked);function x(){c.value=!c.value}const s=e.ref(q.dataset.map((o,n)=>({...o,index:n}))),k=e.computed(()=>s.value.map(o=>({...o,resolvedComponent:typeof o.component=="string"?N[o.component]:o.component}))),h=e.ref(null),u=e.ref(null),v=e.ref({x:0,y:0}),f=e.ref({x:0,y:0}),a=e.ref(null),d=e.ref(!1),m=e.ref(null),C=e.ref(!1),y=e.ref(!1);function w(o){const n=o.target;(n.tagName==="INPUT"&&n.type==="range"||n.classList.contains("range-handle"))&&(y.value=!0)}function T(o){const n=o.target;n.tagName==="INPUT"&&n.type==="range"&&(y.value=!1)}function M(){C.value=!0,Q.default({domElement:document.getElementById(`vue-ui-dashboard_${U.value}`),fileName:"vue-ui-dashboard"}).finally(()=>{C.value=!1})}function D(o){if(!c.value&&(d.value=!0,m.value=o,u.value===null)){h.value=o,v.value={x:event.clientX,y:event.clientY};const n=s.value[o],r=100-n.width,t=100-n.height;n.left<0&&(n.left=0),n.top<0&&(n.top=0),n.left>r&&(n.left=r),n.top>t&&(n.top=t),n.left<0&&(n.left=0),n.top<0&&(n.top=0),n.left+n.width>100&&(n.left=100-n.width),n.top+n.height>100&&(n.top=100-n.height)}}function P(o,n){d.value=!0,m.value=o,u.value={index:o,direction:n};const r=s.value[o];f.value={x:event.clientX,y:event.clientY,initialWidth:r.width,initialHeight:r.height}}function S(o,n,r){if(u.value.direction.includes("top")){const t=o.height-r/a.value.offsetHeight*100;t>=A&&(o.top+=r/a.value.offsetHeight*100,o.height=t)}if(u.value.direction.includes("bottom")){const t=o.height+r/a.value.offsetHeight*100;t>=A&&(o.height=t)}if(u.value.direction.includes("left")){const t=o.width-n/a.value.offsetWidth*100;t>=A&&(o.left+=n/a.value.offsetWidth*100,o.width=t)}if(u.value.direction.includes("right")){const t=o.width+n/a.value.offsetWidth*100;t>=A&&(o.width=t)}}function H(o){if(!(c.value||y.value)){if(d.value=!0,h.value!==null){const n=s.value[h.value],r=o.clientX-v.value.x,t=o.clientY-v.value.y,i=n.left+r/a.value.offsetWidth*100,p=n.top+t/a.value.offsetHeight*100;i>=0&&p>=0&&i+n.width<=100&&p+n.height<=100&&(n.left=i,n.top=p),v.value={x:o.clientX,y:o.clientY}}if(u.value!==null){const n=s.value[u.value.index],r=o.clientX-f.value.x,t=o.clientY-f.value.y;S(n,r,t),f.value={x:o.clientX,y:o.clientY}}}}const X=z;e.watch(s,o=>{o&&!d.value&&X("change",s.value)},{deep:!0});function I(){h.value=null,u.value=null,d.value=!1,m.value=null,s.value.forEach(o=>{o.left=Math.round(o.left/100*100),o.top=Math.round(o.top/100*100),o.width=Math.round(o.width/100*100),o.height=Math.round(o.height/100*100)})}function Y(o){c.value||y.value||(d.value=!0,m.value=o,u.value===null&&(h.value=o,v.value={x:event.touches[0].clientX,y:event.touches[0].clientY}))}function V(o,n,r){if(d.value=!0,m.value=o,u.value===null){u.value={index:o,direction:n};const t=s.value[o];f.value={x:r.touches[0].clientX,y:r.touches[0].clientY,initialWidth:t.width,initialHeight:t.height}}}function b(o){if(d.value=!0,o.preventDefault(),u.value!==null){const n=s.value[u.value.index],r=o.touches[0].clientX-f.value.x,t=o.touches[0].clientY-f.value.y;S(n,r,t),f.value={x:o.touches[0].clientX,y:o.touches[0].clientY}}}function W(o){if(!(c.value||y.value)&&(d.value=!0,o.preventDefault(),h.value!==null)){const n=s.value[h.value],r=o.touches[0].clientX-v.value.x,t=o.touches[0].clientY-v.value.y,i=n.left+r/a.value.offsetWidth*100,p=n.top+t/a.value.offsetHeight*100;i>=0&&p>=0&&i+n.width<=100&&p+n.height<=100&&(n.left=i,n.top=p),v.value={x:o.touches[0].clientX,y:o.touches[0].clientY}}}function g(){d.value=!1,m.value=null,h.value=null,u.value=null,s.value.forEach(o=>{o.left=Math.round(o.left/100*100),o.top=Math.round(o.top/100*100),o.width=Math.round(o.width/100*100),o.height=Math.round(o.height/100*100)})}const R=e.computed(()=>l.value.style.item.borderColor),L=e.computed(()=>l.value.style.resizeHandles.backgroundColor),F=e.computed(()=>l.value.style.board.aspectRatio),O=e.computed(()=>l.value.style.board.backgroundColor),G=e.computed(()=>l.value.style.board.border);function j(){return s.value}return E({generatePdf:M,getItemsPositions:j,toggleLock:x}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{onMousedown:w,onMouseup:T,onTouchstart:w,onTouchend:T},[l.value.allowPrint?(e.openBlock(),e.createElementBlock("div",Z,[e.createElementVNode("button",{class:"vue-ui-dashboard-button",onClick:M,disabled:C.value,style:e.normalizeStyle([{"margin-top":"12px"},`color:${l.value.style.board.color}`])},[C.value?(e.openBlock(),e.createElementBlock("svg",{key:0,class:"vue-ui-dashboard-print-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:l.value.style.board.color,fill:"none","stroke-linecap":"round","stroke-linejoin":"round"},n[4]||(n[4]=[e.createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-f5946722></path><path d="M18 16v.01" data-v-f5946722></path><path d="M6 16v.01" data-v-f5946722></path><path d="M12 5v.01" data-v-f5946722></path><path d="M12 12v.01" data-v-f5946722></path><path d="M12 1a4 4 0 0 1 2.001 7.464l.001 .072a3.998 3.998 0 0 1 1.987 3.758l.22 .128a3.978 3.978 0 0 1 1.591 -.417l.2 -.005a4 4 0 1 1 -3.994 3.77l-.28 -.16c-.522 .25 -1.108 .39 -1.726 .39c-.619 0 -1.205 -.14 -1.728 -.391l-.279 .16l.007 .231a4 4 0 1 1 -2.212 -3.579l.222 -.129a3.998 3.998 0 0 1 1.988 -3.756l.002 -.071a4 4 0 0 1 -1.995 -3.265l-.005 -.2a4 4 0 0 1 4 -4z" data-v-f5946722></path>',6)]),8,oe)):(e.openBlock(),e.createElementBlock("span",ne,"PDF"))],12,ee)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"vue-ui-dashboard-container",ref_key:"dashboardContainer",ref:a,id:`vue-ui-dashboard_${U.value}`,style:e.normalizeStyle(`border:${G.value}; background:${O.value}; aspect-ratio:${F.value}`)},[e.createElementVNode("div",{class:"vue-ui-dashboard-grid-container",ref:"container",onMousemove:H,onMouseup:I,onTouchmove:W,onTouchend:g,style:e.normalizeStyle(`background:${l.value.style.board.backgroundColor}`)},[n[5]||(n[5]=e.createElementVNode("div",{class:"vue-ui-dashboard-grid"},null,-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(r,t)=>(e.openBlock(),e.createElementBlock("div",{key:r.id,class:e.normalizeClass({"vue-ui-dashboard-grid-item":!0,"vue-ui-dashboard-grid-item--locked":c.value}),style:e.normalizeStyle({width:`${r.width}%`,height:`${r.height}%`,left:`${r.left}%`,top:`${r.top}%`,cursor:"move",boxShadow:m.value===t?"0 6px 12px -3px rgba(0,0,0,0.3)":"",zIndex:m.value===t?k.value.length+1:r.index,backgroundColor:l.value.style.item.backgroundColor}),onMousedown:i=>D(t),onTouchstart:i=>Y(t)},[c.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-top-left",onMousedown:i=>P(t,"top-left"),onTouchstart:i=>V(t,"top-left",i),onTouchmove:n[0]||(n[0]=i=>b(i)),onTouchend:g},null,40,ie),e.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-top-right",onMousedown:i=>P(t,"top-right"),onTouchstart:i=>V(t,"top-right",i),onTouchmove:n[1]||(n[1]=i=>b(i)),onTouchend:g},null,40,ue),e.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-left",onMousedown:i=>P(t,"bottom-left"),onTouchstart:i=>V(t,"bottom-left",i),onTouchmove:n[2]||(n[2]=i=>b(i)),onTouchend:g},null,40,se),e.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-right",onMousedown:i=>P(t,"bottom-right"),onTouchstart:i=>V(t,"bottom-right",i),onTouchmove:n[3]||(n[3]=i=>b(i)),onTouchend:g},null,40,le)],64)),e.renderSlot(o.$slots,"top",{item:r,index:t},void 0,!0),r.resolvedComponent?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.resolvedComponent),e.mergeProps({key:1,ref_for:!0},r.props),null,16)):e.renderSlot(o.$slots,"content",{key:2,item:r,index:t,left:r.left,top:r.top,height:r.height,width:r.width},void 0,!0),e.renderSlot(o.$slots,"bottom",{item:r,index:t},void 0,!0)],46,re))),128))],36)],12,te)],32))}},de=J._export_sfc(ae,[["__scopeId","data-v-f5946722"]]);exports.default=de;