vue-data-ui-hq/dist/vue-ui-relation-circle-yxXXagnY.cjs

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("./index-ZfICPrrM.cjs"),Z=require("./useResponsive-BJ7DTGpm.cjs"),Ce=require("./Title-FbHK83tB.cjs"),ee=require("./usePrinter-B-gh2f22.cjs"),Be=require("./vue-ui-skeleton-Bvmpr51u.cjs"),te=require("./useNestedProp-C14rfl0j.cjs"),$e=require("./PackageVersion-D3dK8oA3.cjs"),_e=require("./PenAndPaper-PL3bp4ud.cjs"),Pe=require("./useUserOptionState-BgepsfED.cjs"),Le=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),ze=["id"],Oe=["xmlns","viewBox"],Se=["width","height"],Ee=["cx","cy","r","stroke","stroke-width"],Ae={key:1},Ne=["stroke","d","stroke-width"],Ie={style:{"pointer-events":"none"}},Ve=["cx","cy","fill","r","stroke"],Me=["x","y","fill","font-size"],Fe={key:2},Te=["stroke","stroke-width","x1","x2","y1","y2"],Re={style:{"pointer-events":"none"}},je=["cx","cy","fill","r","stroke"],qe=["x","y","fill","font-size"],De=["text-anchor","transform","x","y","onClick","font-weight","font-size","fill"],Ue=["cx","cy","fill","stroke","onClick","r"],Ge={key:5,class:"vue-data-ui-watermark"},We={__name:"vue-ui-relation-circle",props:{dataset:{type:Array,default(){return[]}},config:{type:Object,default(){return{}}}},setup(re,{expose:ne}){e.useCssVars(t=>({"53ece6fb":e.unref(ae),"2901835a":e.unref(ue),"1f5525bc":e.unref(ce)}));const{vue_ui_relation_circle:oe}=l.useConfig(),g=re,$=e.computed(()=>!!g.dataset&&Object.keys(g.dataset).length),w=e.ref(l.createUid()),E=e.ref(0),x=e.ref(null),A=e.ref(null),N=e.ref(null),I=e.ref(null),V=e.ref(0),n=e.computed({get:()=>T(),set:t=>t}),{userOptionsVisible:_,setUserOptionsVisibility:M,keepUserOptionState:F}=Pe.useUserOptionState({config:n.value});function T(){const t=te.useNestedProp({userConfig:g.config,defaultConfig:oe});return t.theme?{...te.useNestedProp({userConfig:l.themes.vue_ui_relation_circle[t.theme]||g.config,defaultConfig:t}),customPalette:l.themePalettes[t.theme]||l.palette}:t}e.watch(()=>g.config,t=>{n.value=T(),_.value=!n.value.showOnChartHover,Y(),V.value+=1},{deep:!0});const{isPrinting:R,isImaging:j,generatePdf:q,generateImage:D}=ee.usePrinter({elementId:`relation_circle_${w.value}`,fileName:n.value.style.title.text||"vue-ui-relation-circle"}),le=e.computed(()=>n.value.userOptions.show&&!n.value.style.title.text),U=e.computed(()=>l.convertCustomPalette(n.value.customPalette)),m=e.ref([]),d=e.ref([]),u=e.ref({}),f=e.ref([]),se=e.ref(0),P=e.computed(()=>g.dataset.slice(0,n.value.style.limit)),k=e.ref(n.value.style.size),y=e.ref(n.value.style.weightLabels.size),G=e.ref(n.value.style.plot.radius),W=e.ref(n.value.style.labels.fontSize),i=e.ref({height:n.value.style.size,width:n.value.style.size}),v=e.computed({get(){return k.value*n.value.style.circle.radiusProportion},set(t){return t}}),ie=e.computed(()=>n.value.style.links.curved),ue=e.computed(()=>`${n.value.style.animation.speedMs}ms`),ae=e.computed(()=>v.value*2),ce=e.computed(()=>v.value*4),b=e.ref(null);e.onMounted(()=>{Y(),document.getElementById(`relation_circle_${w.value}`).addEventListener("click",X)});function Y(){if(l.objectIsEmpty(g.dataset)?l.error({componentName:"VueUiRelationCircle",type:"dataset"}):g.dataset.forEach((t,o)=>{l.getMissingDatasetAttributes({datasetObject:t,requiredAttributes:["id","label","relations","weights"]}).forEach(r=>{l.error({componentName:"VueUiRelationCircle",type:"datasetSerieAttribute",property:r,index:o})})}),n.value.responsive){const t=Z.throttle(()=>{const{width:o,height:r}=Z.useResponsive({chart:x.value,title:n.value.style.title.text?A.value:null,source:N.value,noTitle:I.value});k.value=Math.min(o,r),i.value.width=o,i.value.height=r,v.value=k.value*n.value.style.circle.radiusProportion,m.value=[],d.value=[],H(),J(),y.value=l.translateSize({relator:k.value,adjuster:n.value.style.size,source:n.value.style.weightLabels.size,threshold:6,fallback:6}),G.value=l.translateSize({relator:k.value,adjuster:n.value.style.size,source:n.value.style.plot.radius,threshold:1,fallback:1}),W.value=l.translateSize({relator:k.value,adjuster:n.value.style.size,source:n.value.style.labels.fontSize,threshold:6,fallback:6})});b.value=new ResizeObserver(t),b.value.observe(x.value.parentNode)}else m.value=[],d.value=[],H(),J()}e.onBeforeUnmount(()=>{document.getElementById(`relation_circle_${w.value}`).removeEventListener("click",X),b.value&&b.value.disconnect()});function X(t){const o=t.target;o&&Array.from(o.classList).includes("vue-ui-user-options")||o&&Array.from(o.classList).includes("vue-ui-user-options-summary")||o&&Array.from(o.classList).includes("vue-data-ui-button")||o&&Array.from(o.classList).includes("vue-ui-relation-circle-legend")||(u.value={},f.value=[])}function H(){const t=6.28319/P.value.length,o=360/P.value.length;let r=0,s=0;P.value.forEach((c,a)=>{const O=c.weights.reduce((xe,be)=>xe+be,0),S=v.value*Math.cos(r)+i.value.width/2,we=v.value*Math.sin(r)+i.value.height/2+n.value.style.circle.offsetY;m.value.push({x:S,y:we,...c,color:c.color?c.color:U.value[a]?U.value[a]:l.palette[a],regAngle:s,totalWeight:O}),r+=t,s+=o})}function de(t,o){const r=(t.x+o.x)/2,s=(t.y+o.y)/2;return{x:r,y:s}}function J(){d.value=[],m.value.forEach(t=>{m.value.filter(r=>r.relations.includes(t.id)).forEach((r,s)=>{const c=r.relations.indexOf(t.id);d.value.push({weight:r.weights[c]?r.weights[c]:0,relationId:`${t.id}_${r.id}`,x1:t.x,y1:t.y,x2:r.x,y2:r.y,colorSource:t.color,colorTarget:r.color,midPointLine:de({x:t.x,y:t.y},{x:r.x,y:r.y}),midPointBezier:fe({x1:t.x,x2:r.x,y1:t.y,y2:r.y}),...t})})})}function fe(t){const o={x:t.x1,y:t.y1},r={x:t.x2,y:t.y2},s={x:t.x1,y:t.y1},c={x:i.value.width/2,y:i.value.height/2+n.value.style.circle.offsetY},a=.5,O=Math.pow(1-a,3)*o.x+3*Math.pow(1-a,2)*a*s.x+3*(1-a)*Math.pow(a,2)*c.x+Math.pow(a,3)*r.x,S=Math.pow(1-a,3)*o.y+3*Math.pow(1-a,2)*a*s.y+3*(1-a)*Math.pow(a,2)*c.y+Math.pow(a,3)*r.y;return{x:O,y:S}}const ye=e.computed(()=>Math.max(...d.value.map(t=>t.weight)));function ge(t){return Object.hasOwn(u.value,"x")?f.value.includes(t.id)?"opacity:1":"opacity:0.1":"opacity:1"}function h(t){return t.colorSource}function K(t){return Object.hasOwn(u.value,"x")?f.value.includes(t.id)&&t.relationId===`${t.id}_${u.value.id}`||t.relationId===`${u.value.id}_${t.id}`?`opacity:1;stroke-width:${L(t)}`:"opacity: 0":"opacity: 1"}function p(t){return Object.hasOwn(u.value,"x")?!!(f.value.includes(t.id)&&t.relationId===`${t.id}_${u.value.id}`||t.relationId===`${u.value.id}_${t.id}`):!1}function he(t){return t.regAngle>90&&t.regAngle<270?"end":"start"}function me(t){return t.regAngle>90&&t.regAngle<270?t.x-5:t.x+5}function ve(t){return Object.hasOwn(u.value,"x")?u.value.id===t.id||f.value.includes(t.id)?"opacity:1":"opacity:0.2":"opacity:1"}function ke(t){return t.regAngle>90&&t.regAngle<270?`rotate(${t.regAngle+180},${t.x},${t.y})`:`rotate(${t.regAngle},${t.x},${t.y})`}function Q(t){se.value=360-t.regAngle,u.value.id&&t.id===u.value.id?(u.value={},f.value=[]):(u.value=t,f.value=[...t.relations])}function L(t){const o=t.weight/ye.value*n.value.style.links.maxWidth;return Math.max(.3,o)}const C=e.ref(!1);function pe(t){C.value=t,E.value+=1}const B=e.ref(!1);function z(){B.value=!B.value}return ne({generatePdf:q,generateImage:D,toggleAnnotator:z}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"relationCircleChart",ref:x,class:"vue-ui-relation-circle",style:e.normalizeStyle(`width:100%;background:${e.unref(n).style.backgroundColor};text-align:center;${e.unref(n).responsive?"height: 100%":""}`),id:`relation_circle_${e.unref(w)}`,onMouseenter:o[0]||(o[0]=()=>e.unref(M)(!0)),onMouseleave:o[1]||(o[1]=()=>e.unref(M)(!1))},[e.unref(n).userOptions.buttons.annotator?(e.openBlock(),e.createBlock(_e.PenAndPaper,{key:0,parent:e.unref(x),backgroundColor:e.unref(n).style.backgroundColor,color:e.unref(n).style.color,active:e.unref(B),onClose:z},null,8,["parent","backgroundColor","color","active"])):e.createCommentVNode("",!0),e.unref(le)?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"noTitle",ref:I,class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},null,512)):e.createCommentVNode("",!0),e.unref(n).style.title.text?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"chartTitle",ref:A,style:"width:100%;background:transparent"},[(e.openBlock(),e.createBlock(Ce._sfc_main,{key:`title_${e.unref(V)}`,config:{title:{cy:"relation-div-title",...e.unref(n).style.title},subtitle:{cy:"relation-div-subtitle",...e.unref(n).style.title.subtitle}}},null,8,["config"]))],512)):e.createCommentVNode("",!0),e.unref(n).userOptions.show&&e.unref($)&&(e.unref(F)||e.unref(_))?(e.openBlock(),e.createBlock(ee.UserOptions,{ref:"details",key:`user_options_${e.unref(E)}`,backgroundColor:e.unref(n).style.backgroundColor,color:e.unref(n).style.color,isPrinting:e.unref(R),isImaging:e.unref(j),uid:e.unref(w),hasPdf:e.unref(n).userOptions.buttons.pdf,hasImg:e.unref(n).userOptions.buttons.img,hasFullscreen:e.unref(n).userOptions.buttons.img,hasXls:!1,isFullscreen:e.unref(C),titles:{...e.unref(n).userOptions.buttonTitles},chartElement:e.unref(x),position:e.unref(n).userOptions.position,hasAnnotator:e.unref(n).userOptions.buttons.annotator,isAnnotation:e.unref(B),onToggleFullscreen:pe,onGeneratePdf:e.unref(q),onGenerateImage:e.unref(D),onToggleAnnotator:z,style:e.normalizeStyle({visibility:e.unref(F)?e.unref(_)?"visible":"hidden":"visible"})},e.createSlots({_:2},[t.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,t.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"optionImg",{},void 0,!0)]),key:"1"}:void 0,t.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:r,isFullscreen:s})=>[e.renderSlot(t.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:r,isFullscreen:s})),void 0,!0)]),key:"2"}:void 0,t.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:r,isAnnotator:s})=>[e.renderSlot(t.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:r,isAnnotator:s})),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(l.XMLNS),class:e.normalizeClass([{"vue-data-ui-fullscreen--on":e.unref(C),"vue-data-ui-fulscreen--off":!e.unref(C)},"relation-circle"]),viewBox:`0 0 ${e.unref(i).width<=0?10:e.unref(i).width} ${e.unref(i).height<=0?10:e.unref(i).height}`,width:"100%",style:"user-select:none; background:transparent"},[e.createVNode($e._sfc_main),t.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(i).width<=0?10:e.unref(i).width,height:e.unref(i).height<=0?10:e.unref(i).height,style:{pointerEvents:"none"}},[e.renderSlot(t.$slots,"chart-background",{},void 0,!0)],8,Se)):e.createCommentVNode("",!0),e.createElementVNode("circle",{cx:(e.unref(i).width<=0?1e-4:e.unref(i).width)/2,cy:(e.unref(i).height<=0?1e-4:e.unref(i).height)/2+e.unref(n).style.circle.offsetY,r:e.unref(v)<=0?1e-4:e.unref(v),stroke:e.unref(n).style.circle.stroke,"stroke-width":e.unref(n).style.circle.strokeWidth,fill:"transparent",class:"main-circle"},null,8,Ee),e.unref(ie)?(e.openBlock(),e.createElementBlock("g",Ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(r,s)=>(e.openBlock(),e.createElementBlock("path",{key:`relation_${s}`,style:e.normalizeStyle(K(r)),stroke:h(r),class:e.normalizeClass(["relation",{"vue-ui-relation-circle-selected":e.unref(u).hasOwnProperty("id")&&e.unref(f).includes(r.id)}]),d:`M${r.x1},${r.y1} C${r.x1},${r.y1} ${e.unref(i).width/2},${e.unref(i).height/2+e.unref(n).style.circle.offsetY} ${r.x2},${r.y2}`,fill:"none","stroke-width":L(r),"stroke-linecap":"round"},null,14,Ne))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(r,s)=>(e.openBlock(),e.createElementBlock("g",Ie,[p(r)?e.renderSlot(t.$slots,"dataLabel",e.mergeProps({key:0,ref_for:!0},{x:r.midPointBezier.x,y:r.midPointBezier.y,color:h(r),weight:r.weight,fontSize:e.unref(y)}),void 0,!0):e.createCommentVNode("",!0),p(r)&&!t.$slots.dataLabel?(e.openBlock(),e.createElementBlock("circle",{key:1,cx:r.midPointBezier.x,cy:r.midPointBezier.y,fill:h(r),r:e.unref(y),stroke:e.unref(n).style.backgroundColor,"stroke-width":"1"},null,8,Ve)):e.createCommentVNode("",!0),p(r)&&!t.$slots.dataLabel?(e.openBlock(),e.createElementBlock("text",{key:2,x:r.midPointBezier.x,y:r.midPointBezier.y+e.unref(y)/3,fill:e.unref(l.adaptColorToBackground)(h(r)),"text-anchor":"middle","font-size":e.unref(y)},e.toDisplayString(e.unref(l.applyDataLabel)(e.unref(n).style.weightLabels.formatter,r.weight,e.unref(l.dataLabel)({p:e.unref(n).style.weightLabels.prefix,v:r.weight,s:e.unref(n).style.weightLabels.suffix,r:e.unref(n).style.weightLabels.rounding}),{...r})),9,Me)):e.createCommentVNode("",!0)]))),256))])):(e.openBlock(),e.createElementBlock("g",Fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(r,s)=>(e.openBlock(),e.createElementBlock("line",{key:`relation_${s}`,stroke:h(r),"stroke-width":L(r),style:e.normalizeStyle(K(r)),x1:r.x1,x2:r.x2,y1:r.y1,y2:r.y2,class:e.normalizeClass({"vue-ui-relation-circle-selected":e.unref(u).hasOwnProperty("id")&&e.unref(f).includes(r.id)}),"stroke-linecap":"round"},null,14,Te))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(r,s)=>(e.openBlock(),e.createElementBlock("g",Re,[p(r)?e.renderSlot(t.$slots,"dataLabel",e.mergeProps({key:0,ref_for:!0},{x:r.midPointLine.x,y:r.midPointLine.y,color:h(r),weight:r.weight,fontSize:e.unref(y)}),void 0,!0):e.createCommentVNode("",!0),p(r)&&!t.$slots.dataLabel&&e.unref(n).style.weightLabels.show?(e.openBlock(),e.createElementBlock("circle",{key:1,cx:r.midPointLine.x,cy:r.midPointLine.y,fill:h(r),r:e.unref(y),stroke:e.unref(n).style.backgroundColor,"stroke-width":"1"},null,8,je)):e.createCommentVNode("",!0),p(r)&&!t.$slots.dataLabel&&e.unref(n).style.weightLabels.show?(e.openBlock(),e.createElementBlock("text",{key:2,x:r.midPointLine.x,y:r.midPointLine.y+e.unref(y)/3,fill:e.unref(l.adaptColorToBackground)(h(r)),"text-anchor":"middle","font-size":e.unref(y)},e.toDisplayString(e.unref(l.applyDataLabel)(e.unref(n).style.weightLabels.formatter,r.weight,e.unref(l.dataLabel)({p:e.unref(n).style.weightLabels.prefix,v:r.weight,s:e.unref(n).style.weightLabels.suffix,r:e.unref(n).style.weightLabels.rounding}),{...r})),9,qe)):e.createCommentVNode("",!0)]))),256))])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m),(r,s)=>(e.openBlock(),e.createElementBlock("text",{key:`plot_text_${s}`,"text-anchor":he(r),transform:ke(r),x:me(r),y:r.y+5,onClick:c=>Q(r),class:"vue-ui-relation-circle-legend","transform-origin":"start","font-weight":e.unref(u).id===r.id?"900":"400",style:e.normalizeStyle(`font-family:${e.unref(n).style.fontFamily};${ve(r)}`),"font-size":e.unref(W),fill:e.unref(n).style.labels.color},e.toDisplayString(r.label)+" ("+e.toDisplayString(e.unref(l.applyDataLabel)(e.unref(n).style.weightLabels.formatter,r.totalWeight,e.unref(l.dataLabel)({p:e.unref(n).style.weightLabels.prefix,v:r.totalWeight,s:e.unref(n).style.weightLabels.suffix,r:e.unref(n).style.weightLabels.rounding}),{...r}))+") ",13,De))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m),(r,s)=>(e.openBlock(),e.createElementBlock("circle",{cx:r.x,cy:r.y,key:`plot_${s}`,style:e.normalizeStyle(ge(r)),class:"vue-ui-relation-circle-plot",fill:e.unref(n).style.plot.useSerieColor?r.color:e.unref(n).style.plot.color,stroke:e.unref(n).style.backgroundColor,"stroke-width":"1",onClick:c=>Q(r),r:e.unref(G)},null,12,Ue))),128)),e.renderSlot(t.$slots,"svg",{svg:e.unref(i)},void 0,!0)],10,Oe)):e.createCommentVNode("",!0),t.$slots.watermark?(e.openBlock(),e.createElementBlock("div",Ge,[e.renderSlot(t.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(R)||e.unref(j)})),void 0,!0)])):e.createCommentVNode("",!0),t.$slots.source?(e.openBlock(),e.createElementBlock("div",{key:6,ref_key:"source",ref:N,dir:"auto"},[e.renderSlot(t.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),e.unref($)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(Be.default,{key:7,config:{type:"relationCircle",style:{backgroundColor:e.unref(n).style.backgroundColor,relationCircle:{color:"#CCCCCC"}}}},null,8,["config"]))],44,ze))}},Ye=Le._export_sfc(We,[["__scopeId","data-v-c22c6dc6"]]);exports.default=Ye;