vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 11.2 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i=require("./index-CBRI5uwl.cjs"),Q=require("./Title-BP4K_GLE.cjs"),R=require("./usePrinter-C1Rlqzcj.cjs"),V=require("./useResponsive-N8jl0-aC.cjs"),Z=require("./vue-ui-skeleton-CM4wEsYA.cjs"),U=require("./useNestedProp-0jJvFRhK.cjs"),ee=require("./PackageVersion-D_gJvbGU.cjs"),te=require("./PenAndPaper-DWG9pfri.cjs"),le=require("./useUserOptionState-BgepsfED.cjs"),ne=require("./useChartAccessibility-Cm7nkzTG.cjs"),oe=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),ae=["id"],re=["xmlns","viewBox"],se=["width","height"],ue=["x1","x2","y1","y2","stroke","stroke-width","stroke-linecap"],ie=["d","fill"],ce=["cx","cy","r","stroke","stroke-width"],ve=["x","y","font-size","fill","font-weight"],de={key:5,class:"vue-data-ui-watermark"},he={__name:"vue-ui-wheel",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(L,{expose:X}){const{vue_ui_wheel:j}=i.useConfig(),c=L,m=e.computed(()=>!!c.dataset&&Object.keys(c.dataset).length),g=e.ref(i.createUid()),G=e.ref(null),b=e.ref(0),d=e.ref(null),B=e.ref(null),P=e.ref(null),S=e.ref(null),_=e.ref(0),t=e.computed({get:()=>$(),set:l=>l}),{userOptionsVisible:k,setUserOptionsVisibility:N,keepUserOptionState:O}=le.useUserOptionState({config:t.value}),{svgRef:x}=ne.useChartAccessibility({config:t.value.style.chart.title});function $(){const l=U.useNestedProp({userConfig:c.config,defaultConfig:j});return l.theme?{...U.useNestedProp({userConfig:i.themes.vue_ui_wheel[l.theme]||c.config,defaultConfig:l})}:l}e.watch(()=>c.config,l=>{t.value=$(),k.value=!t.value.userOptions.showOnChartHover,M(),_.value+=1},{deep:!0});const{isPrinting:I,isImaging:z,generatePdf:A,generateImage:F}=R.usePrinter({elementId:g.value,fileName:t.value.style.chart.title.text||"vue-ui-wheel"}),H=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),o=e.ref({size:360,height:360,width:360}),w=e.ref(t.value.style.chart.layout.percentage.fontSize),r=e.computed(()=>({radius:Math.min(o.value.width,o.value.height)*.9/2,centerX:o.value.width/2,centerY:o.value.height/2}));function E(l,a=1){return{x:r.value.centerX+r.value.radius*Math.cos(29.85+l*Math.PI/180)*a,y:r.value.centerY+r.value.radius*Math.sin(29.85+l*Math.PI/180)*a}}const s=e.ref(t.value.style.chart.animation.use?0:c.dataset.percentage||0);e.watch(()=>c.dataset,l=>{t.value.style.chart.animation.use?T(l.percentage):s.value=l.percentage||0},{deep:!0});const h=e.ref(null);e.onMounted(()=>{M()});function M(){if(i.objectIsEmpty(c.dataset)&&i.error({componentName:"VueUiWheel",type:"dataset"}),T(c.dataset.percentage||0),t.value.responsive){const l=V.throttle(()=>{const{width:a,height:n}=V.useResponsive({chart:d.value,title:t.value.style.chart.title.text?B.value:null,source:P.value,noTitle:S.value});requestAnimationFrame(()=>{o.value.width=a,o.value.height=n,w.value=t.value.style.chart.layout.percentage.fontSize/360*Math.min(a,n)})});h.value=new ResizeObserver(l),h.value.observe(d.value.parentNode)}}e.onBeforeUnmount(()=>{h.value&&h.value.disconnect()});function T(l){let a=t.value.style.chart.animation.speed;const n=Math.abs(l-s.value)/(a*120);function u(){s.value<l?s.value=Math.min(s.value+n,l):s.value>l&&(s.value=Math.max(s.value-n,l)),s.value!==l&&requestAnimationFrame(u)}u()}const v=e.computed(()=>Math.max(100,t.value.style.chart.layout.wheel.ticks.quantity)),f=e.computed(()=>100/v.value),q=e.computed(()=>{const l=[];for(let a=0;a<v.value;a+=1){const n=s.value>a*f.value?t.value.style.chart.layout.wheel.ticks.activeColor:t.value.style.chart.layout.wheel.ticks.inactiveColor,{x:u,y:W}=E(o.value.size/v.value*a),{x:J,y:K}=E(o.value.size/v.value*a,t.value.style.chart.layout.wheel.ticks.sizeRatio);l.push({x1:u,y1:W,x2:J,y2:K,color:t.value.style.chart.layout.wheel.ticks.gradient.show?i.shiftHue(n,a*f.value/v.value*(t.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity/100)):n})}return l}),D=e.computed(()=>i.makeDonut({series:q.value.map(l=>({name:"",value:1,color:l.color}))},r.value.centerX,r.value.centerY,r.value.radius,r.value.radius,1.99999,2,1,360,105.25,r.value.radius*(1-t.value.style.chart.layout.wheel.ticks.sizeRatio))),y=e.ref(!1);function Y(l){y.value=l,b.value+=1}const p=e.ref(!1);function C(){p.value=!p.value}return X({generatePdf:A,generateImage:F,toggleAnnotator:C}),(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:"vue-ui-wheel",ref_key:"wheelChart",ref:d,id:g.value,style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor};${t.value.responsive?"height:100%":""}`),onMouseenter:a[0]||(a[0]=()=>e.unref(N)(!0)),onMouseleave:a[1]||(a[1]=()=>e.unref(N)(!1))},[t.value.userOptions.buttons.annotator?(e.openBlock(),e.createBlock(te.PenAndPaper,{key:0,svgRef:e.unref(x),backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,active:p.value,onClose:C},null,8,["svgRef","backgroundColor","color","active"])):e.createCommentVNode("",!0),H.value?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"noTitle",ref:S,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:B,style:"width:100%;background:transparent;padding-bottom:12px"},[(e.openBlock(),e.createBlock(Q._sfc_main,{key:`title_${_.value}`,config:{title:{cy:"wheel-title",...t.value.style.chart.title},subtitle:{cy:"wheel-subtitle",...t.value.style.chart.title.subtitle}}},null,8,["config"]))],512)):e.createCommentVNode("",!0),t.value.userOptions.show&&m.value&&(e.unref(O)||e.unref(k))?(e.openBlock(),e.createBlock(R.UserOptions,{ref_key:"details",ref:G,key:`user_options_${b.value}`,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,isPrinting:e.unref(I),isImaging:e.unref(z),uid:g.value,hasPdf:t.value.userOptions.buttons.pdf,hasImg:t.value.userOptions.buttons.img,hasFullscreen:t.value.userOptions.buttons.fullscreen,hasXls:!1,isFullscreen:y.value,position:t.value.userOptions.position,titles:{...t.value.userOptions.buttonTitles},hasAnnotator:t.value.userOptions.buttons.annotator,isAnnotation:p.value,chartElement:d.value,onToggleFullscreen:Y,onGeneratePdf:e.unref(A),onGenerateImage:e.unref(F),onToggleAnnotator:C,style:e.normalizeStyle({visibility:e.unref(O)?e.unref(k)?"visible":"hidden":"visible"})},e.createSlots({_:2},[l.$slots.menuIcon?{name:"menuIcon",fn:e.withCtx(({isOpen:n,color:u})=>[e.renderSlot(l.$slots,"menuIcon",e.normalizeProps(e.guardReactiveProps({isOpen:n,color:u})),void 0,!0)]),key:"0"}:void 0,l.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(l.$slots,"optionPdf",{},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.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:n,isFullscreen:u})=>[e.renderSlot(l.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:n,isFullscreen:u})),void 0,!0)]),key:"3"}:void 0,l.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:n,isAnnotator:u})=>[e.renderSlot(l.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:n,isAnnotator:u})),void 0,!0)]),key:"4"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasFullscreen","isFullscreen","position","titles","hasAnnotator","isAnnotation","chartElement","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createElementBlock("svg",{key:4,ref_key:"svgRef",ref:x,xmlns:e.unref(i.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":y.value,"vue-data-ui-fulscreen--off":!y.value}),viewBox:`0 0 ${o.value.width<=0?10:o.value.width} ${o.value.height<=0?10:o.value.height}`,style:e.normalizeStyle(`max-width:100%;overflow:visible;background:transparent;color:${t.value.style.chart.color}`)},[e.createVNode(ee._sfc_main),l.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:o.value.width<=0?10:o.value.width,height:o.value.height<=0?10:o.value.height,style:{pointerEvents:"none"}},[e.renderSlot(l.$slots,"chart-background",{},void 0,!0)],8,se)):e.createCommentVNode("",!0),t.value.style.chart.layout.wheel.ticks.type==="classic"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(q.value,(n,u)=>(e.openBlock(),e.createElementBlock("line",{x1:n.x1,x2:n.x2,y1:n.y1,y2:n.y2,stroke:n.color,"stroke-width":t.value.style.chart.layout.wheel.ticks.strokeWidth/360*Math.min(o.value.width,o.value.height),"stroke-linecap":t.value.style.chart.layout.wheel.ticks.rounded?"round":"butt",class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&u*f.value<=s.value})},null,10,ue))),256)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(D.value,(n,u)=>(e.openBlock(),e.createElementBlock("path",{d:n.arcSlice,fill:n.color,class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&u*f.value<=s.value})},null,10,ie))),256)),t.value.style.chart.layout.innerCircle.show?(e.openBlock(),e.createElementBlock("circle",{key:3,cx:r.value.centerX,cy:r.value.centerY,r:r.value.radius*.8<=0?1e-4:r.value.radius*.8,stroke:t.value.style.chart.layout.innerCircle.stroke,"stroke-width":t.value.style.chart.layout.innerCircle.strokeWidth,fill:"none"},null,8,ce)):e.createCommentVNode("",!0),t.value.style.chart.layout.percentage.show?(e.openBlock(),e.createElementBlock("text",{key:4,x:r.value.centerX,y:r.value.centerY+w.value/3,"font-size":w.value,fill:t.value.style.chart.layout.wheel.ticks.gradient.show?e.unref(i.shiftHue)(t.value.style.chart.layout.wheel.ticks.activeColor,s.value/100*(t.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity/100)):t.value.style.chart.layout.wheel.ticks.activeColor,"text-anchor":"middle","font-weight":t.value.style.chart.layout.percentage.bold?"bold":"normal",style:{"font-variant-numeric":"tabluar-nums"}},e.toDisplayString(e.unref(i.applyDataLabel)(t.value.style.chart.layout.percentage.formatter,e.unref(i.checkNaN)(s.value),e.unref(i.dataLabel)({v:e.unref(i.checkNaN)(s.value),s:"%",r:t.value.style.chart.layout.percentage.rounding}))),9,ve)):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"svg",{svg:o.value},void 0,!0)],14,re)):e.createCommentVNode("",!0),l.$slots.watermark?(e.openBlock(),e.createElementBlock("div",de,[e.renderSlot(l.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(I)||e.unref(z)})),void 0,!0)])):e.createCommentVNode("",!0),l.$slots.source?(e.openBlock(),e.createElementBlock("div",{key:6,ref_key:"source",ref:P,dir:"auto"},[e.renderSlot(l.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),m.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(Z.default,{key:7,config:{type:"wheel",style:{backgroundColor:t.value.style.chart.backgroundColor,wheel:{color:"#CCCCCC"}}}},null,8,["config"]))],44,ae))}},fe=oe._export_sfc(he,[["__scopeId","data-v-a0e08156"]]);exports.default=fe;