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