vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 18.1 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("./index-ZfICPrrM.cjs"),W=require("./useNestedProp-C14rfl0j.cjs"),J=require("./usePrinter-B-gh2f22.cjs"),se=require("./Title-FbHK83tB.cjs"),ue=require("./PenAndPaper-PL3bp4ud.cjs"),ie=require("./DataTable-CC6dPSer.cjs"),ce=require("./vue-ui-accordion-Dp6uTsJi.cjs"),K=require("./useResponsive-BJ7DTGpm.cjs"),fe=require("./vue-ui-skeleton-Bvmpr51u.cjs"),de=require("./useUserOptionState-BgepsfED.cjs"),he=require("./PackageVersion-D3dK8oA3.cjs"),ve=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),me=["id"],pe=["xmlns","viewBox"],be=["width","height"],ye=["id"],ge=["stop-color"],ke=["stop-color"],Ce=["stop-color"],we=["stroke","stroke-width"],xe=["stroke","stroke-width"],Le=["x","y","font-size","fill","font-weight"],Be=["points","fill"],$e=["stroke","stroke-width","rx"],_e=["x","y","font-size","fill","font-weight"],Ne=["x","y","font-size","fill","font-weight"],Se={key:5,class:"vue-data-ui-watermark"},ze=["innerHTML"],Te={__name:"vue-ui-funnel",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},setup(Q,{expose:Z}){e.useCssVars(a=>({"76b14b0c":e.unref(le)}));const{vue_ui_funnel:ee}=l.useConfig(),d=Q,b=e.computed(()=>!!d.dataset&&d.dataset.length);e.onMounted(z);function z(){if(l.objectIsEmpty(d.dataset)?l.error({componentName:"VueUiFunnel",type:"dataset"}):d.dataset.forEach((a,n)=>{l.getMissingDatasetAttributes({datasetObject:a,requiredAttributes:["name","value"]}).forEach(r=>{b.value=!1,l.error({componentName:"VueUiFunnel",type:"datasetSerieAttribute",property:r,index:n})})}),t.value.responsive){const a=K.throttle(()=>{const{width:n,height:r}=K.useResponsive({chart:g.value,title:t.value.style.chart.title.text?O.value:null,source:V.value,noTitle:E.value});u.value.height=r,u.value.width=n,v.value=G(),i.value.circles=l.translateSize({relator:Math.min(n,r),adjuster:600,source:t.value.style.chart.circles.dataLabels.fontSize,threshold:10,fallback:10}),i.value.names=l.translateSize({relator:Math.min(n,r),adjuster:600,source:t.value.style.chart.bars.dataLabels.name.fontSize,threshold:10,fallback:10}),i.value.values=l.translateSize({relator:Math.min(n,r),adjuster:600,source:t.value.style.chart.bars.dataLabels.value.fontSize,threshold:10,fallback:10})});D.value=new ResizeObserver(a),D.value.observe(g.value.parentNode)}}const g=e.ref(null),k=e.ref(l.createUid()),T=e.ref(0),P=e.ref(0),A=e.ref(0),E=e.ref(null),V=e.ref(null),O=e.ref(null),D=e.ref(null),m=e.ref(!1);function F(){const a=W.useNestedProp({userConfig:d.config,defaultConfig:ee});return a.theme?{...W.useNestedProp({userConfig:l.themes.vue_ui_funnel[a.theme]||d.config,defaultConfig:a})}:a}const t=e.computed({get:()=>F(),set:a=>a}),{userOptionsVisible:_,setUserOptionsVisibility:I,keepUserOptionState:q}=de.useUserOptionState({config:t.value});e.watch(()=>d.config,a=>{t.value=F(),_.value=!t.value.showOnChartHover,z(),P.value+=1,A.value+=1,i.value.circles=t.value.style.chart.circles.dataLabels.fontSize,i.value.names=t.value.style.chart.bars.dataLabels.name.fontSize,i.value.values=t.value.style.chart.bars.dataLabels.value.fontSize},{deep:!0});const{isPrinting:M,isImaging:R,generatePdf:U,generateImage:j}=J.usePrinter({elementId:`funnel_${k.value}`,fileName:t.value.style.chart.title.text||"vue-ui-funnel"}),te=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),L=e.ref({showTable:t.value.table.show}),i=e.ref({circles:t.value.style.chart.circles.dataLabels.fontSize,names:t.value.style.chart.bars.dataLabels.name.fontSize,values:t.value.style.chart.bars.dataLabels.value.fontSize}),u=e.computed({get:()=>({height:t.value.style.chart.height,width:t.value.style.chart.width}),set:a=>a}),h=e.computed(()=>b.value?d.dataset.map((a,n)=>({...a,color:a.color?l.convertColorToHex(a.color):l.lightenHexColor(t.value.style.chart.bars.defaultColor,n/d.dataset.length)})):[]);setTimeout(()=>{m.value=!0},h.value.length*150);function G(){const a=t.value.style.chart.padding.left,n=t.value.style.chart.padding.top;return{left:a,top:n,right:u.value.width-t.value.style.chart.padding.right,bottom:u.value.height-t.value.style.chart.padding.bottom,width:u.value.width-a-t.value.style.chart.padding.right,height:u.value.height-n-t.value.style.chart.padding.bottom}}const v=e.ref(G()),y=e.computed(()=>v.value.height/d.dataset.length),p=e.computed(()=>y.value*t.value.style.chart.bars.gapRatio),H=e.computed(()=>v.value.width*t.value.style.chart.barCircleSpacingRatio),o=e.computed(()=>h.value.map((a,n)=>{const r=y.value-p.value,s=v.value.top+p.value/2*n+(y.value-p.value/2)*n+p.value/2,f=a.value/h.value[0].value,c=(v.value.width-r-H.value)*(a.value/h.value[0].value);return{...a,cx:v.value.left+r/2,cy:s+r/2,datapointIndex:n,fill:a.color,height:Math.max(r,0),proportion:f,r:Math.max(r/2,0),width:Math.max(c,0),x:v.value.left+r+H.value,y:s}})),ae=e.computed(()=>{const a=o.value.map(n=>`${n.x+n.width},${n.y+(y.value-p.value)/2}`);return`${o.value[0].x},${o.value[0].y+(y.value-p.value)/2} ${a.toString()} ${o.value.at(-1).x},${o.value.at(-1).y+(y.value-p.value)/2}`}),re=e.computed(()=>({x1:o.value[0].cx,y1:o.value[0].cy,x2:o.value.at(-1).cx,y2:o.value.at(-1).cy})),C=e.ref(!1);function ne(a){C.value=a,T.value+=1}const le=e.computed(()=>`${h.value.length*150}ms`),B=e.ref(!1);function N(){B.value=!B.value}function X(){L.value.showTable=!L.value.showTable}const w=e.computed(()=>{const a=h.value.map(r=>({name:r.name,color:r.color})),n=h.value.map(r=>r.value);return{head:a,body:n}}),$=e.computed(()=>{const a=[t.value.table.columnNames.series,t.value.table.columnNames.value,t.value.table.columnNames.percentage],n=w.value.head.map((f,c)=>{const x=l.applyDataLabel(t.value.style.chart.bars.dataLabels.value.formatter,w.value.body[c],l.dataLabel({p:t.value.style.chart.bars.dataLabels.value.prefix,v:w.value.body[c],s:t.value.style.chart.bars.dataLabels.value.suffix,r:t.value.table.td.roundingValue}),{datapoint:o.value[c]}),S=l.applyDataLabel(t.value.style.chart.circles.dataLabels.formatter,o.value[c].proportion*100,l.dataLabel({v:o.value[c].proportion*100,s:"%",r:t.value.table.td.roundingPercentage}),{datapoint:o.value[c]});return[{color:f.color,name:f.name},x,S]}),r={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.series,t.value.table.columnNames.value,t.value.table.columnNames.percentage],head:a,body:n,config:r}});function Y(){e.nextTick(()=>{const a=w.value.head.map((s,f)=>[[s.name],[w.value.body[f]],[o.value[f].proportion*100]]),n=[[t.value.style.chart.title.text],[t.value.style.chart.title.subtitle.text],[[t.value.table.columnNames.series],[t.value.table.columnNames.value],["%"]]].concat(a),r=l.createCsvContent(n);l.downloadCsv({csvContent:r,title:t.value.style.chart.title.text||"vue-ui-funnel"})})}function oe(){return h.value}return Z({getData:oe,generatePdf:U,generateCsv:Y,generateImage:j,toggleTable:X,toggleAnnotator:N}),(a,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"funnelChart",ref:g,class:e.normalizeClass(`vue-ui-funnel ${e.unref(C)?"vue-data-ui-wrapper-fullscreen":""} ${e.unref(t).useCssAnimation?"":"vue-ui-dna"}`),style:e.normalizeStyle(`font-family:${e.unref(t).style.fontFamily};width:100%; ${e.unref(t).responsive?"height:100%;":""} text-align:center;background:${e.unref(t).style.chart.backgroundColor}`),id:`funnel_${e.unref(k)}`,onMouseenter:n[1]||(n[1]=()=>e.unref(I)(!0)),onMouseleave:n[2]||(n[2]=()=>e.unref(I)(!1))},[e.unref(t).userOptions.buttons.annotator?(e.openBlock(),e.createBlock(ue.PenAndPaper,{key:0,parent:e.unref(g),backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,active:e.unref(B),onClose:N},null,8,["parent","backgroundColor","color","active"])):e.createCommentVNode("",!0),e.unref(te)?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"noTitle",ref:E,class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},null,512)):e.createCommentVNode("",!0),e.unref(t).style.chart.title.text?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"chartTitle",ref:O,style:"width:100%;background:transparent;padding-bottom:24px"},[(e.openBlock(),e.createBlock(se._sfc_main,{key:`title_${e.unref(P)}`,config:{title:{cy:"funnel-div-title",...e.unref(t).style.chart.title},subtitle:{cy:"funnel-div-subtitle",...e.unref(t).style.chart.title.subtitle}}},null,8,["config"]))],512)):e.createCommentVNode("",!0),e.unref(t).userOptions.show&&e.unref(b)&&(e.unref(q)||e.unref(_))?(e.openBlock(),e.createBlock(J.UserOptions,{ref:"details",key:`user_option_${e.unref(T)}`,backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,isPrinting:e.unref(M),isImaging:e.unref(R),uid:e.unref(k),hasTooltip:!1,hasPdf:e.unref(t).userOptions.buttons.pdf,hasImg:e.unref(t).userOptions.buttons.img,hasXls:e.unref(t).userOptions.buttons.csv,hasTable:e.unref(t).userOptions.buttons.table,hasLabel:!1,hasFullscreen:e.unref(t).userOptions.buttons.fullscreen,isFullscreen:e.unref(C),chartElement:e.unref(g),position:e.unref(t).userOptions.position,titles:{...e.unref(t).userOptions.buttonTitles},hasAnnotator:e.unref(t).userOptions.buttons.annotator,isAnnotation:e.unref(B),onToggleAnnotator:N,onToggleFullscreen:ne,onGeneratePdf:e.unref(U),onGenerateImage:e.unref(j),onToggleTable:X,onGenerateCsv:Y,style:e.normalizeStyle({visibility:e.unref(q)?e.unref(_)?"visible":"hidden":"visible"})},e.createSlots({_:2},[a.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,a.$slots.optionCsv?{name:"optionCsv",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"optionCsv",{},void 0,!0)]),key:"1"}:void 0,a.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"optionImg",{},void 0,!0)]),key:"2"}:void 0,a.$slots.optionTable?{name:"optionTable",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"optionTable",{},void 0,!0)]),key:"3"}:void 0,a.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:r,isFullscreen:s})=>[e.renderSlot(a.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:r,isFullscreen:s})),void 0,!0)]),key:"4"}:void 0,a.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:r,isAnnotator:s})=>[e.renderSlot(a.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:r,isAnnotator:s})),void 0,!0)]),key:"5"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasXls","hasTable","hasFullscreen","isFullscreen","chartElement","position","titles","hasAnnotator","isAnnotation","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),e.unref(b)?(e.openBlock(),e.createElementBlock("svg",{key:4,xmlns:e.unref(l.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":e.unref(C),"vue-data-ui-fulscreen--off":!e.unref(C)}),viewBox:`0 0 ${e.unref(u).width<=0?10:e.unref(u).width} ${e.unref(u).height<=0?10:e.unref(u).height}`,style:e.normalizeStyle(`max-width:100%; overflow: visible; background:transparent;color:${e.unref(t).style.chart.color}`)},[e.createVNode(he._sfc_main),a.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(u).width<=0?10:e.unref(u).width,height:e.unref(u).height<=0?10:e.unref(u).height,style:{pointerEvents:"none"}},[e.renderSlot(a.$slots,"chart-background",{},void 0,!0)],8,be)):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:`funnel_area_${e.unref(k)}`,x1:"0%",x2:"100%",y1:"0%",y2:"0%"},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(t).style.chart.backgroundColor,"stop-opacity":0},null,8,ge),e.createElementVNode("stop",{offset:"20%","stop-color":e.unref(t).style.chart.area.color},null,8,ke),e.createElementVNode("stop",{offset:"100%","stop-color":e.unref(t).style.chart.area.color},null,8,Ce)],8,ye)]),e.unref(t).style.chart.circleLinks.show?(e.openBlock(),e.createElementBlock("line",e.mergeProps({key:1},e.unref(re),{stroke:e.unref(t).style.chart.circleLinks.color,"stroke-width":12*e.unref(t).style.chart.circleLinks.widthRatio,"stroke-linecap":"round",class:{animated:e.unref(t).useCssAnimation},style:{strokeDasharray:e.unref(t).useCssAnimation?e.unref(v).height:0,strokeDashoffset:e.unref(t).useCssAnimation?e.unref(v).height:0}}),null,16,we)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),({cx:r,cy:s,r:f,fill:c},x)=>(e.openBlock(),e.createElementBlock("circle",e.mergeProps({ref_for:!0},{cx:r,cy:s,r:f,fill:c},{stroke:e.unref(t).style.chart.circles.stroke,"stroke-width":e.unref(t).style.chart.circles.strokeWidth,class:{animated:e.unref(t).useCssAnimation&&!e.unref(m)},style:{animationDelay:`${150*x}ms`}}),null,16,xe))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(r,s)=>(e.openBlock(),e.createElementBlock("text",{x:r.cx,y:r.cy+e.unref(i).circles/3+e.unref(t).style.chart.circles.dataLabels.offsetY,"text-anchor":"middle","font-size":e.unref(i).circles,fill:e.unref(t).style.chart.circles.dataLabels.adaptColorToBackground?e.unref(l.adaptColorToBackground)(r.color):e.unref(t).style.chart.circles.dataLabels.color,"font-weight":e.unref(t).style.chart.circles.dataLabels.bold?"bold":"normal",class:e.normalizeClass({animated:e.unref(t).useCssAnimation&&!e.unref(m)}),style:e.normalizeStyle({animationDelay:`${150*s}ms`})},e.toDisplayString(e.unref(l.applyDataLabel)(e.unref(t).style.chart.circles.dataLabels.formatter,r.proportion*100,e.unref(l.dataLabel)({v:r.proportion*100,s:"%",r:e.unref(t).style.chart.circles.dataLabels.rounding}),{datapoint:r})),15,Le))),256)),e.unref(t).style.chart.area.show?(e.openBlock(),e.createElementBlock("polygon",{key:2,points:e.unref(ae),fill:`url(#funnel_area_${e.unref(k)})`,class:e.normalizeClass({animated:e.unref(t).useCssAnimation&&!e.unref(m)}),style:e.normalizeStyle({transition:e.unref(t).useCssAnimation?`all ${150*e.unref(h).length}ms ease-in`:"none"})},null,14,Be)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),({x:r,y:s,height:f,width:c,fill:x},S)=>(e.openBlock(),e.createElementBlock("rect",e.mergeProps({ref_for:!0},{x:r,y:s,height:f,width:c,fill:x},{stroke:e.unref(t).style.chart.bars.stroke,"stroke-width":e.unref(t).style.chart.bars.strokeWidth,rx:e.unref(t).style.chart.bars.borderRadius,class:{animated:e.unref(t).useCssAnimation&&!e.unref(m)},style:{animationDelay:`${150*S}ms`}}),null,16,$e))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(r,s)=>(e.openBlock(),e.createElementBlock("g",null,[e.createElementVNode("text",{x:r.x+r.width+e.unref(t).style.chart.bars.dataLabels.name.offsetX+12,y:r.cy-e.unref(i).names/2+e.unref(t).style.chart.bars.dataLabels.name.offsetY,"text-anchor":"start","font-size":e.unref(i).names,fill:e.unref(t).style.chart.bars.dataLabels.name.color,"font-weight":e.unref(t).style.chart.bars.dataLabels.name.bold?"bold":"normal",class:e.normalizeClass({animated:e.unref(t).useCssAnimation&&!e.unref(m)}),style:e.normalizeStyle({animationDelay:`${150*s}ms`})},e.toDisplayString(r.name),15,_e),e.createElementVNode("text",{x:r.x+r.width+e.unref(t).style.chart.bars.dataLabels.value.offsetX+12,y:r.cy+e.unref(i).values+e.unref(t).style.chart.bars.dataLabels.value.offsetY,"text-anchor":"start","font-size":e.unref(i).values,fill:e.unref(t).style.chart.bars.dataLabels.value.color,"font-weight":e.unref(t).style.chart.bars.dataLabels.value.bold?"bold":"normal",class:e.normalizeClass({animated:e.unref(t).useCssAnimation&&!e.unref(m)}),style:e.normalizeStyle({animationDelay:`${150*s}ms`})},e.toDisplayString(e.unref(l.applyDataLabel)(e.unref(t).style.chart.bars.dataLabels.value.formatter,r.value,e.unref(l.dataLabel)({p:e.unref(t).style.chart.bars.dataLabels.value.prefix,v:r.value,s:e.unref(t).style.chart.bars.dataLabels.value.suffix,r:e.unref(t).style.chart.bars.dataLabels.value.rounding}),{datapoint:r})),15,Ne)]))),256)),e.renderSlot(a.$slots,"svg",{svg:e.unref(u)},void 0,!0)],14,pe)):e.createCommentVNode("",!0),a.$slots.watermark?(e.openBlock(),e.createElementBlock("div",Se,[e.renderSlot(a.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(M)||e.unref(R)})),void 0,!0)])):e.createCommentVNode("",!0),e.unref(b)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(fe.default,{key:6,config:{type:"verticalBar",style:{backgroundColor:e.unref(t).style.chart.backgroundColor,verticalBar:{axis:{color:"#CCCCCC"},color:"#CCCCCC"}}}},null,8,["config"])),a.$slots.source?(e.openBlock(),e.createElementBlock("div",{key:7,ref_key:"source",ref:V,dir:"auto"},[e.renderSlot(a.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),e.unref(b)?(e.openBlock(),e.createBlock(ce.default,{key:8,hideDetails:"",config:{open:e.unref(L).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.openBlock(),e.createBlock(ie.DataTable,{key:`table_${e.unref(A)}`,colNames:e.unref($).colNames,head:e.unref($).head,body:e.unref($).body,config:e.unref($).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:n[0]||(n[0]=r=>e.unref(L).showTable=!1)},{th:e.withCtx(({th:r})=>[e.createElementVNode("div",{innerHTML:r,style:{display:"flex","align-items":"center"}},null,8,ze)]),td:e.withCtx(({td:r})=>[e.createTextVNode(e.toDisplayString(r.name?r.name:r),1)]),_:1},8,["colNames","head","body","config","title"]))]),_:1},8,["config"])):e.createCommentVNode("",!0)],46,me))}},Pe=ve._export_sfc(Te,[["__scopeId","data-v-ca367e26"]]);exports.default=Pe;