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