vue-data-ui-hq
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"),s=require("./index-ZfICPrrM.cjs"),ke=require("./Title-FbHK83tB.cjs"),te=require("./usePrinter-B-gh2f22.cjs"),ye=require("./DataTable-CC6dPSer.cjs"),be=require("./vue-ui-accordion-Dp6uTsJi.cjs"),we=require("./vue-ui-skeleton-Bvmpr51u.cjs"),oe=require("./useNestedProp-C14rfl0j.cjs"),Ce=require("./PackageVersion-D3dK8oA3.cjs"),Ne=require("./PenAndPaper-PL3bp4ud.cjs"),xe=require("./useUserOptionState-BgepsfED.cjs"),Be=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),$e=["id"],_e={key:1,ref:"noTitle",class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},Se={key:2,style:"width:100%;background:transparent;padding-bottom:24px"},Ee=["xmlns","viewBox"],Pe=["width","height"],Te=["id"],Oe=["stop-color"],Fe=["stop-color"],Le=["d","fill","stroke","stroke-width"],Ve=["x","y","height","width","fill","stroke","stroke-width","onMouseenter"],ze=["x","y","font-size","fill"],Ie=["x","y","font-size","fill"],Ae={key:4,class:"vue-data-ui-watermark"},He={key:6,ref:"source",dir:"auto"},Me=["innerHTML"],qe={__name:"vue-ui-flow",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},setup(ne,{expose:re}){const{vue_ui_flow:le}=s.useConfig(),h=ne,$=e.computed(()=>!!h.dataset&&h.dataset.length);e.onMounted(()=>{V()});function V(){s.objectIsEmpty(h.dataset)&&s.error({componentName:"VueUiFlow",type:"dataset"})}const _=e.ref(s.createUid()),S=e.ref(null),z=e.ref(0),I=e.ref(0),y=e.ref(!1);function ae(o){y.value=o,z.value+=1}const t=e.computed({get:()=>M(),set:o=>o}),{userOptionsVisible:E,setUserOptionsVisibility:A,keepUserOptionState:H}=xe.useUserOptionState({config:t.value});function M(){const o=oe.useNestedProp({userConfig:h.config,defaultConfig:le});return o.theme?{...oe.useNestedProp({userConfig:s.themes.vue_ui_flow[o.theme]||h.config,defaultConfig:o}),customPalette:s.themePalettes[o.theme]||s.palette}:o}e.watch(()=>h.config,o=>{t.value=M(),E.value=!t.value.showOnChartHover,V(),I.value+=1},{deep:!0});const{isPrinting:q,isImaging:D,generatePdf:U,generateImage:Y}=te.usePrinter({elementId:`flow_${_.value}`,fileName:t.value.style.chart.title.text||"vue-ui-flow"}),se=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),P=e.computed(()=>s.convertCustomPalette(t.value.customPalette)),G=e.computed(()=>t.value.style.chart.nodes.gap),v=e.computed(()=>t.value.style.chart.nodes.width),w=e.ref({showTable:t.value.table.show}),j=e.computed(()=>t.value.style.chart.links.width),T=e.computed(()=>!h.dataset||!h.dataset.length?[]:h.dataset.map(o=>[o[0],o[1],s.checkNaN(o[2])])),W=e.computed(()=>{const o={};function r(a){o[a]||(o[a]={inflow:0,outflow:0})}T.value.forEach(([a,l,c])=>{r(a),r(l),o[a].outflow+=c,o[l].inflow+=c});let n=0;for(const a in o){const l=Math.max(o[a].inflow,o[a].outflow);n=Math.max(n,l)}return n});function ue(o){return o/W.value*100+t.value.style.chart.nodes.minHeight}function ie(o){const r=t.value.style.chart.nodes.minHeight;return(o-r)/100*W.value}function ce(o){const r={},n={};function a(u,i){r[u]||(r[u]={height:0,level:null,inflow:0,outflow:0}),r[u].level===null&&(r[u].level=i),n[i]||(n[i]=[]),n[i].includes(u)||n[i].push(u)}o.forEach(([u,i,f],k)=>{const g=r[u]?r[u].level:0,B=g+1;a(u,g),a(i,B),r[u].children||(r[u].children=[]),r[u].children.push({target:i,value:f}),r[u].outflow+=f,r[i].inflow+=f}),Object.keys(r).forEach((u,i)=>{r[u].color=P.value[i]||P.value[i%P.value.length]||s.palette[i]||s.palette[i%d.length]});for(const u in r)r[u].height=ue(Math.max(r[u].inflow,r[u].outflow)),r[u].name=u;const l={};for(const u in n){let i=0;n[u].forEach((f,k)=>{const g=r[f].height;l[f]={x:parseInt(u,10)*j.value+t.value.style.chart.padding.left,y:i,absoluteY:i,height:g,i:k,color:r[f].color,value:ie(g)},i+=g+G.value})}const c=[];for(const u in r){let i=l[u].absoluteY+t.value.style.chart.padding.top;r[u].children&&r[u].children.forEach(({target:f,value:k},g)=>{const B=l[f].y+t.value.style.chart.padding.top,F=l[u],L=l[f],J=s.checkNaN(i),K=s.checkNaN(i+k/r[u].outflow*F.height),Q=s.checkNaN(B),ee=s.checkNaN(B+k/r[f].inflow*L.height),ve={id:s.createUid(),source:u,target:f,path:`M ${s.checkNaN(F.x)+s.checkNaN(v.value)} ${J} L ${s.checkNaN(F.x)+s.checkNaN(v.value)} ${K} L ${s.checkNaN(L.x)} ${ee} L ${s.checkNaN(L.x)} ${Q} Z`,value:k,sourceColor:r[u].color,targetColor:r[f].color};c.push(ve),i+=K-J,l[f].y+=ee-Q})}return{nodeCoordinates:l,links:c}}const p=e.computed(()=>{const o=ce(h.dataset);return{nodes:Object.keys(o.nodeCoordinates).map((r,n)=>({...o.nodeCoordinates[r],name:r})),links:o.links}}),fe=e.computed(()=>de(p.value.nodes));function de(o){const r={};for(const a in o){const{x:l,height:c}=o[a];r[l]||(r[l]=0),r[l]+=c+G.value}return Math.max(...Object.values(r))}const b=e.computed(()=>{const{top:o,right:r,left:n,bottom:a}=t.value.style.chart.padding,l=T.value.length*j.value;return{height:fe.value+o+a,width:r+Math.max(...p.value.nodes.map(c=>c.x))+v.value,left:n,top:o,right:l-r,p_top:o,p_bottom:a}});function he(o){const r={},n={},a=new Set;return T.value.forEach(([l,c,u])=>{r[l]||(r[l]=[]),n[c]||(n[c]=[]),r[l].push(c),n[c].push(l)}),r[o]&&r[o].forEach(l=>a.add(l)),n[o]&&n[o].forEach(l=>a.add(l)),Array.from(a).concat(o)}const m=e.ref(null),C=e.ref(null);function pe(o){m.value=he(o.name),C.value=o.name}function me(){m.value=null,C.value=null}const X=e.computed(()=>p.value.links.map(({source:o,target:r,sourceColor:n,targetColor:a,value:l})=>({source:o,target:r,sourceColor:n,targetColor:a,value:l})));function R(){e.nextTick(()=>{const o=X.value.map((a,l)=>[[a.source],[a.target],[a.value]]),r=[[t.value.style.chart.title.text],[t.value.style.chart.title.subtitle.text],[[t.value.table.columnNames.source],[t.value.table.columnNames.target],[t.value.table.columnNames.value]]].concat(o),n=s.createCsvContent(r);s.downloadCsv({csvContent:n,title:t.value.style.chart.title.text||"vue-ui-flow"})})}const N=e.computed(()=>{const o=[t.value.table.columnNames.source,t.value.table.columnNames.target,t.value.table.columnNames.value],r=X.value.map((l,c)=>[{color:l.sourceColor,name:l.source},{color:l.targetColor,name:l.target},s.dataLabel({p:t.value.style.chart.nodes.labels.prefix,v:l.value,s:t.value.style.chart.nodes.labels.suffix,r:t.value.style.chart.nodes.labels.rounding})]),n={th:{backgroundColor:t.value.table.th.backgroundColor,color:t.value.table.th.color,outline:t.value.table.th.outline},td:{backgroundColor:t.value.table.td.backgroundColor,color:t.value.table.td.color,outline:t.value.table.td.outline},breakpoint:t.value.table.responsiveBreakpoint};return{colNames:[t.value.table.columnNames.source,t.value.table.columnNames.target,t.value.table.columnNames.value],head:o,body:r,config:n}});function ge(){return p.value}function Z(){w.value.showTable=!w.value.showTable}const x=e.ref(!1);function O(){x.value=!x.value}return re({getData:ge,generateCsv:R,generateImage:Y,generatePdf:U,toggleTable:Z,toggleAnnotator:O}),(o,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"flowChart",ref:S,class:e.normalizeClass(`vue-ui-flow ${e.unref(y)?"vue-data-ui-wrapper-fullscreen":""}`),style:e.normalizeStyle(`font-family:${e.unref(t).style.fontFamily};width:100%; text-align:center;background:${e.unref(t).style.chart.backgroundColor}`),id:`flow_${e.unref(_)}`,onMouseenter:r[2]||(r[2]=()=>e.unref(A)(!0)),onMouseleave:r[3]||(r[3]=()=>e.unref(A)(!1))},[e.unref(t).userOptions.buttons.annotator?(e.openBlock(),e.createBlock(Ne.PenAndPaper,{key:0,parent:e.unref(S),backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,active:e.unref(x),onClose:O},null,8,["parent","backgroundColor","color","active"])):e.createCommentVNode("",!0),e.unref(se)?(e.openBlock(),e.createElementBlock("div",_e,null,512)):e.createCommentVNode("",!0),e.unref(t).style.chart.title.text?(e.openBlock(),e.createElementBlock("div",Se,[(e.openBlock(),e.createBlock(ke._sfc_main,{key:`title_${e.unref(I)}`,config:{title:{cy:"flow-title",...e.unref(t).style.chart.title},subtitle:{cy:"flow-subtitle",...e.unref(t).style.chart.title.subtitle}}},null,8,["config"]))])):e.createCommentVNode("",!0),e.unref(t).userOptions.show&&e.unref($)&&(e.unref(H)||e.unref(E))?(e.openBlock(),e.createBlock(te.UserOptions,{ref:"details",key:`user_option_${e.unref(z)}`,backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,isPrinting:e.unref(q),isImaging:e.unref(D),uid:e.unref(_),hasPdf:e.unref(t).userOptions.buttons.pdf,hasXls:e.unref(t).userOptions.buttons.csv,hasImg:e.unref(t).userOptions.buttons.img,hasTable:e.unref(t).userOptions.buttons.table,hasFullscreen:e.unref(t).userOptions.buttons.fullscreen,isFullscreen:e.unref(y),titles:{...e.unref(t).userOptions.buttonTitles},chartElement:e.unref(S),position:e.unref(t).userOptions.position,hasAnnotator:e.unref(t).userOptions.buttons.annotator,isAnnotation:e.unref(x),onToggleFullscreen:ae,onGeneratePdf:e.unref(U),onGenerateCsv:R,onGenerateImage:e.unref(Y),onToggleTable:Z,onToggleAnnotator:O,style:e.normalizeStyle({visibility:e.unref(H)?e.unref(E)?"visible":"hidden":"visible"})},e.createSlots({_:2},[o.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,o.$slots.optionCsv?{name:"optionCsv",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionCsv",{},void 0,!0)]),key:"1"}:void 0,o.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionImg",{},void 0,!0)]),key:"2"}:void 0,o.$slots.optionTable?{name:"optionTable",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionTable",{},void 0,!0)]),key:"3"}:void 0,o.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:n,isFullscreen:a})=>[e.renderSlot(o.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:n,isFullscreen:a})),void 0,!0)]),key:"4"}:void 0,o.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:n,isAnnotator:a})=>[e.renderSlot(o.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:n,isAnnotator:a})),void 0,!0)]),key:"5"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasXls","hasImg","hasTable","hasFullscreen","isFullscreen","titles","chartElement","position","hasAnnotator","isAnnotation","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(s.XMLNS),viewBox:`0 0 ${e.unref(b).width} ${e.unref(b).height}`,class:e.normalizeClass({"vue-data-ui-fullscreen--on":e.unref(y),"vue-data-ui-fulscreen--off":!e.unref(y)}),style:e.normalizeStyle(`max-width:100%; overflow: visible; background:transparent;color:${e.unref(t).style.chart.color}`)},[e.createVNode(Ce._sfc_main),o.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(b).width,height:e.unref(b).height,style:{pointerEvents:"none"}},[e.renderSlot(o.$slots,"chart-background",{},void 0,!0)],8,Pe)):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p).links,(n,a)=>(e.openBlock(),e.createElementBlock("linearGradient",{id:n.id,x1:"0%",y1:"0%",x2:"100%",y2:"0%"},[e.createElementVNode("stop",{offset:"0%","stop-color":n.sourceColor},null,8,Oe),e.createElementVNode("stop",{offset:"100%","stop-color":n.targetColor},null,8,Fe)],8,Te))),256))]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p).links,n=>(e.openBlock(),e.createElementBlock("path",{class:"vue-ui-flow-link",d:n.path,fill:`url(#${n.id})`,stroke:e.unref(t).style.chart.links.stroke,"stroke-width":e.unref(t).style.chart.links.strokeWidth,style:e.normalizeStyle(`opacity:${e.unref(C)?[n.target,n.source].includes(e.unref(C))?1:.3:e.unref(t).style.chart.links.opacity}`)},null,12,Le))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p).nodes,(n,a)=>(e.openBlock(),e.createElementBlock("rect",{class:"vue-ui-flow-node",x:n.x,y:e.unref(s.checkNaN)(n.absoluteY)+e.unref(t).style.chart.padding.top,height:e.unref(s.checkNaN)(n.height),width:e.unref(v),fill:n.color,stroke:e.unref(t).style.chart.nodes.stroke,"stroke-width":e.unref(t).style.chart.nodes.strokeWidth,onMouseenter:l=>pe(n),onMouseleave:r[0]||(r[0]=l=>me()),style:e.normalizeStyle(`opacity:${e.unref(m)?e.unref(m).includes(n.name)?1:.2:1}`)},null,44,Ve))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p).nodes,(n,a)=>(e.openBlock(),e.createElementBlock("text",{x:n.x+e.unref(v)/2,y:e.unref(s.checkNaN)(n.absoluteY+n.height/2-e.unref(t).style.chart.nodes.labels.fontSize/4)+e.unref(t).style.chart.padding.top,"font-size":e.unref(t).style.chart.nodes.labels.fontSize,fill:e.unref(s.adaptColorToBackground)(n.color),"text-anchor":"middle",style:e.normalizeStyle(`pointer-events: none; opacity:${e.unref(m)?e.unref(m).includes(n.name)?1:0:1}`)},e.toDisplayString(e.unref(t).style.chart.nodes.labels.abbreviation.use?e.unref(s.abbreviate)({source:n.name,length:e.unref(t).style.chart.nodes.labels.abbreviation.length}):n.name),13,ze))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p).nodes,(n,a)=>(e.openBlock(),e.createElementBlock("text",{x:n.x+e.unref(v)/2,y:e.unref(s.checkNaN)(n.absoluteY+n.height/2+e.unref(t).style.chart.nodes.labels.fontSize)+e.unref(t).style.chart.padding.top,"font-size":e.unref(t).style.chart.nodes.labels.fontSize,fill:e.unref(s.adaptColorToBackground)(n.color),"text-anchor":"middle",style:e.normalizeStyle(`pointer-events: none; opacity:${e.unref(m)?e.unref(m).includes(n.name)?1:0:1}`)},e.toDisplayString(e.unref(s.applyDataLabel)(e.unref(t).style.chart.nodes.labels.formatter,n.value,e.unref(s.dataLabel)({p:e.unref(t).style.chart.nodes.labels.prefix,v:n.value,s:e.unref(t).style.chart.nodes.labels.suffix,r:e.unref(t).style.chart.nodes.labels.rounding}),{datapoint:n,seriesIndex:a})),13,Ie))),256)),e.renderSlot(o.$slots,"svg",{svg:e.unref(b)},void 0,!0)],14,Ee)),o.$slots.watermark?(e.openBlock(),e.createElementBlock("div",Ae,[e.renderSlot(o.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(q)||e.unref(D)})),void 0,!0)])):e.createCommentVNode("",!0),e.unref($)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(we.default,{key:5,config:{type:"flow",style:{backgroundColor:e.unref(t).style.chart.backgroundColor}}},null,8,["config"])),o.$slots.source?(e.openBlock(),e.createElementBlock("div",He,[e.renderSlot(o.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),e.unref($)?(e.openBlock(),e.createBlock(be.default,{key:7,hideDetails:"",config:{open:e.unref(w).showTable,maxHeight:1e4,body:{backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color},head:{backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color}}},{content:e.withCtx(()=>[e.createVNode(ye.DataTable,{colNames:e.unref(N).colNames,head:e.unref(N).head,body:e.unref(N).body,config:e.unref(N).config,title:`${e.unref(t).style.chart.title.text}${e.unref(t).style.chart.title.subtitle.text?` : ${e.unref(t).style.chart.title.subtitle.text}`:""}`,onClose:r[1]||(r[1]=n=>e.unref(w).showTable=!1)},{th:e.withCtx(({th:n})=>[e.createElementVNode("div",{innerHTML:n,style:{display:"flex","align-items":"center"}},null,8,Me)]),td:e.withCtx(({td:n})=>[e.createTextVNode(e.toDisplayString(n.name||n),1)]),_:1},8,["colNames","head","body","config","title"])]),_:1},8,["config"])):e.createCommentVNode("",!0)],46,$e))}},De=Be._export_sfc(qe,[["__scopeId","data-v-ae461a22"]]);exports.default=De;