vue-data-ui 2.4.50 → 2.4.51

package/dist/vue-ui-funnel-DKxAPRi_.cjs

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