vue-data-ui-hq/dist/vue-ui-sparkstackbar-Dj0KwiD_.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"),r=require("./index-ZfICPrrM.cjs"),V=require("./useNestedProp-C14rfl0j.cjs"),O=require("./vue-ui-skeleton-Bvmpr51u.cjs"),U=require("./PackageVersion-D3dK8oA3.cjs"),M=require("./Tooltip-C7TJODUx.cjs"),j=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),H=["xmlns","viewBox"],I=["id"],R=["stop-color"],W=["stop-color"],Y=["stop-color"],G={id:"stackPill",clipPathUnits:"objectBoundingBox"},X=["fill"],J={key:0,"clip-path":"url(#stackPill)"},K=["x","width","height","fill"],Q=["x","width","height","fill","stroke"],Z=["onClick","x","width","height","onMouseenter"],ee=["width","height","rx"],te=["onClick"],oe={style:{display:"flex","flex-direction":"row","align-items":"center",gap:"4px","justify-content":"center"}},le=["height","width"],re=["fill"],ne={key:4,ref:"source",dir:"auto"},ae={__name:"vue-ui-sparkstackbar",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},emits:["selectDatapoint"],setup(P,{emit:D}){const{vue_ui_sparkstackbar:L}=r.useConfig(),u=P,F=e.useSlots();e.onMounted(()=>{F["chart-background"]&&console.warn("VueUiSparkStackbar does not support the #chart-background slot.")});const x=e.computed(()=>!!u.dataset&&u.dataset.length),B=e.ref(null),S=e.ref(r.createUid()),b=e.ref(!1),_=e.ref(""),t=e.computed({get:()=>$(),set:o=>o});function $(){const o=V.useNestedProp({userConfig:u.config,defaultConfig:L});return o.theme?{...V.useNestedProp({userConfig:r.themes.vue_ui_sparkstackbar[o.theme]||u.config,defaultConfig:o}),customPalette:r.themePalettes[o.theme]||r.palette}:o}e.watch(()=>u.config,o=>{t.value=$(),E()},{deep:!0}),e.watch(()=>u.dataset,o=>{p.value=u.dataset.map((a,l)=>({...a,color:a.color?r.convertColorToHex(a.color):y.value[l]||r.palette[l]||r.palette[l%r.palette.length]}))},{deep:!0});const y=e.computed(()=>r.convertCustomPalette(t.value.customPalette)),p=e.ref(u.dataset.map((o,a)=>({...o,value:t.value.style.animation.show?0:o.value||0,color:o.color?r.convertColorToHex(o.color):y.value[a]||r.palette[a]||r.palette[a%r.palette.length]}))),g=e.ref(!0);e.onMounted(()=>{if(E(),t.value.style.animation.show){let f=function(){n+=l/o,n<l?(p.value=p.value.map((s,i)=>({...s,value:s.value+=a[i],color:s.color?r.convertColorToHex(s.color):y.value[i]||r.palette[i]||r.palette[i%r.palette.length]})),requestAnimationFrame(f)):(g.value=!1,p.value=u.dataset.map((s,i)=>({...s,value:s.value||0,color:s.color?r.convertColorToHex(s.color):y.value[i]||r.palette[i]||r.palette[i%r.palette.length],id:r.createUid()})))};const o=t.value.style.animation.animationFrames,a=u.dataset.map((s,i)=>s.value/o),l=u.dataset.map(s=>s.value||0).reduce((s,i)=>s+i,0);let n=0;g.value=!0,f()}});function E(){r.objectIsEmpty(u.dataset)?r.error({componentName:"VueUiSparkStackbar",type:"dataset"}):u.dataset.forEach((o,a)=>{r.getMissingDatasetAttributes({datasetObject:o,requiredAttributes:["name","value"]}).forEach(l=>{r.error({componentName:"VueUiSparkStackbar",type:"datasetSerieAttribute",property:l,index:a})})})}const c=e.ref({width:500,height:16}),d=e.ref([]),N=e.computed(()=>u.dataset.map(o=>o.value||0).filter((o,a)=>!d.value.includes(a)).reduce((o,a)=>o+a,0)),h=e.computed(()=>p.value.map((o,a)=>{const l=o.value||0,n=l/N.value,f=isNaN(n)?0:n,s=f*c.value.width;return{...o,value:l,proportion:f,width:s,proportionLabel:r.dataLabel({v:f*100,s:"%",r:t.value.style.legend.percentage.rounding})}})),C=e.computed(()=>h.value.filter((o,a)=>!d.value.includes(a)));function T(o){d.value.includes(o)?d.value=d.value.filter(a=>a!==o):d.value.length<p.value.length-1&&d.value.push(o)}const k=e.computed(()=>{let o=0;const a=[];for(let l=0;l<C.value.length;l+=1)a.push({...C.value[l],start:o}),o+=C.value[l].width;return a}),A=D;function z(o,a){A("selectDatapoint",{datapoint:o,index:a})}const w=e.ref(null),v=e.ref(!1),m=e.ref(null);function q({datapoint:o,seriesIndex:a}){if(!t.value.style.tooltip.show)return;w.value={datapoint:o,seriesIndex:a,config:t.value,series:h.value},b.value=!0,m.value=a;const l=t.value.style.tooltip.customFormat;if(r.isFunction(l))try{const n=l({seriesIndex:a,datapoint:o,series:h.value,config:t.value});typeof n=="string"&&(_.value=n,v.value=!0)}catch{console.warn("Custom format cannot be applied."),v.value=!1}if(!v.value){let n="";n+=`<div style="width:100%;text-align:center;border-bottom:1px solid ${t.value.style.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${o.name}</div>`,n+=`<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${o.color}"/></svg>`,n+=`<b>${o.proportionLabel}</b>`,n+=`<span>(${r.applyDataLabel(t.value.style.legend.value.formatter,o.value,r.dataLabel({p:t.value.style.legend.value.prefix,v:o.value,s:t.value.style.legend.value.suffix,r:t.value.style.legend.value.rounding}),{datapoint:o,seriesIndex:a})})</span>`,_.value=`<div>${n}</div>`}}return(o,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"sparkstackbarChart",ref:B,style:e.normalizeStyle(`width:100%; background:${e.unref(t).style.backgroundColor}`)},[e.unref(t).style.title.text?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`width:calc(100% - 12px);background:transparent;margin:0 auto;margin:${e.unref(t).style.title.margin};padding: 0 6px;text-align:${e.unref(t).style.title.textAlign}`)},[e.createElementVNode("div",{style:e.normalizeStyle(`font-size:${e.unref(t).style.title.fontSize}px;color:${e.unref(t).style.title.color};font-weight:${e.unref(t).style.title.bold?"bold":"normal"}`)},e.toDisplayString(e.unref(t).style.title.text),5),e.unref(t).style.title.subtitle.text?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`font-size:${e.unref(t).style.title.subtitle.fontSize}px;color:${e.unref(t).style.title.subtitle.color};font-weight:${e.unref(t).style.title.subtitle.bold?"bold":"normal"}`)},e.toDisplayString(e.unref(t).style.title.subtitle.text),5)):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0),e.unref(x)?(e.openBlock(),e.createElementBlock("svg",{key:1,xmlns:e.unref(r.XMLNS),width:"100%",viewBox:`0 0 ${e.unref(c).width} ${e.unref(c).height}`},[e.createVNode(U._sfc_main),e.createElementVNode("defs",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(k),(l,n)=>(e.openBlock(),e.createElementBlock("linearGradient",{key:`stack_gradient_${n}`,gradientTransform:"rotate(90)",id:`stack_gradient_${n}_${e.unref(S)}`},[e.createElementVNode("stop",{offset:"0%","stop-color":l.color},null,8,R),e.createElementVNode("stop",{offset:"50%","stop-color":e.unref(r.setOpacity)(e.unref(r.shiftHue)(l.color,.05),100-e.unref(t).style.bar.gradient.intensity)},null,8,W),e.createElementVNode("stop",{offset:"100%","stop-color":l.color},null,8,Y)],8,I))),128)),e.createElementVNode("clipPath",G,[e.createElementVNode("rect",{x:"0.005",y:"-2",width:"0.99",height:"5",rx:"3",ry:"3",fill:e.unref(t).style.backgroundColor},null,8,X)])]),e.unref(N)>0?(e.openBlock(),e.createElementBlock("g",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(k),(l,n)=>(e.openBlock(),e.createElementBlock("rect",{key:`stack_underlayer_${n}`,x:l.start,y:0,width:l.width,height:e.unref(c).height,fill:e.unref(t).style.bar.gradient.underlayerColor,class:e.normalizeClass({animated:!e.unref(g)}),style:e.normalizeStyle({opacity:e.unref(m)!==null&&e.unref(t).style.tooltip.show?e.unref(m)===n?1:.5:1})},null,14,K))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(k),(l,n)=>(e.openBlock(),e.createElementBlock("rect",{key:`stack_${n}`,x:l.start,y:0,width:l.width,height:e.unref(c).height,fill:e.unref(t).style.bar.gradient.show?`url(#stack_gradient_${n}_${e.unref(S)})`:l.color,stroke:e.unref(t).style.backgroundColor,"stroke-linecap":"round",class:e.normalizeClass({animated:!e.unref(g)}),style:e.normalizeStyle({opacity:e.unref(m)!==null&&e.unref(t).style.tooltip.show?e.unref(m)===n?1:.5:1})},null,14,Q))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(k),(l,n)=>(e.openBlock(),e.createElementBlock("rect",{key:`stack_trap_${n}`,onClick:()=>z(l,n),x:l.start,y:0,width:l.width,height:e.unref(c).height,fill:"transparent",stroke:"none",class:e.normalizeClass({animated:!e.unref(g)}),onMouseenter:()=>q({datapoint:l,seriesIndex:n}),onMouseleave:a[0]||(a[0]=f=>{b.value=!1,m.value=null})},null,42,Z))),128))])):(e.openBlock(),e.createElementBlock("rect",{key:1,x:2,y:1,width:e.unref(c).width-4,height:e.unref(c).height-2,stroke:"#CCCCCC","stroke-width":"2",fill:"transparent",rx:(e.unref(c).height-4)/2},null,8,ee))],8,H)):e.createCommentVNode("",!0),e.unref(x)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(O.default,{key:2,config:{type:"sparkStackbar",style:{backgroundColor:e.unref(t).style.backgroundColor,sparkStackbar:{color:"#CCCCCC"}}}},null,8,["config"])),e.unref(t).style.legend.show?(e.openBlock(),e.createElementBlock("div",{key:3,style:e.normalizeStyle(`background:transparent;margin:0 auto;margin:${e.unref(t).style.legend.margin};justify-content:${e.unref(t).style.legend.textAlign==="left"?"flex-start":e.unref(t).style.legend.textAlign==="right"?"flex-end":"center"}`),class:"vue-ui-sparkstackbar-legend"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(h),(l,n)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(`font-size:${e.unref(t).style.legend.fontSize}px;`),class:e.normalizeClass({"vue-ui-sparkstackbar-legend-item":!0,"vue-ui-sparkstackbar-legend-item-unselected":e.unref(d).includes(n)}),onClick:f=>{T(n),z(l,n)}},[e.createElementVNode("div",oe,[(e.openBlock(),e.createElementBlock("svg",{height:`${e.unref(t).style.legend.fontSize}px`,width:`${e.unref(t).style.legend.fontSize}px`,viewBox:"0 0 10 10"},[e.createElementVNode("circle",{cx:5,cy:5,r:5,fill:l.color},null,8,re)],8,le)),e.createElementVNode("span",{style:e.normalizeStyle(`color:${e.unref(t).style.legend.name.color}; font-weight:${e.unref(t).style.legend.name.bold?"bold":"normal"}`)},e.toDisplayString(l.name),5),e.unref(t).style.legend.percentage.show?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle(`font-weight:${e.unref(t).style.legend.percentage.bold?"bold":"normal"};color:${e.unref(t).style.legend.percentage.color}`)},e.toDisplayString(e.unref(d).includes(n)?" - ":l.proportionLabel),5)):e.createCommentVNode("",!0),e.unref(t).style.legend.value.show?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle(`font-weight:${e.unref(t).style.legend.value.bold?"bold":"normal"};color:${e.unref(t).style.legend.value.color}`)}," ("+e.toDisplayString(e.unref(r.applyDataLabel)(e.unref(t).style.legend.value.formatter,l.value,e.unref(r.dataLabel)({p:e.unref(t).style.legend.value.prefix,v:l.value,s:e.unref(t).style.legend.value.suffix,r:e.unref(t).style.legend.value.rounding}),{datapoint:l,seriesIndex:n}))+") ",5)):e.createCommentVNode("",!0)])],14,te))),256))],4)):e.createCommentVNode("",!0),e.createVNode(M._sfc_main,{show:e.unref(b)&&e.unref(t).style.tooltip.show,parent:e.unref(B),backgroundColor:e.unref(t).style.tooltip.backgroundColor,color:e.unref(t).style.tooltip.color,fontSize:e.unref(t).style.tooltip.fontSize,borderRadius:e.unref(t).style.tooltip.borderRadius,borderColor:e.unref(t).style.tooltip.borderColor,borderWidth:e.unref(t).style.tooltip.borderWidth,backgroundOpacity:e.unref(t).style.tooltip.backgroundOpacity,position:e.unref(t).style.tooltip.position,content:e.unref(_),isCustom:e.unref(v),offsetY:-124+e.unref(t).style.tooltip.offsetY,blockShiftY:!0},{"tooltip-before":e.withCtx(()=>[e.renderSlot(o.$slots,"tooltip-before",e.normalizeProps(e.guardReactiveProps({...e.unref(w)})),void 0,!0)]),"tooltip-after":e.withCtx(()=>[e.renderSlot(o.$slots,"tooltip-after",e.normalizeProps(e.guardReactiveProps({...e.unref(w)})),void 0,!0)]),_:3},8,["show","parent","backgroundColor","color","fontSize","borderRadius","borderColor","borderWidth","backgroundOpacity","position","content","isCustom","offsetY"]),o.$slots.source?(e.openBlock(),e.createElementBlock("div",ne,[e.renderSlot(o.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0)],4))}},se=j._export_sfc(ae,[["__scopeId","data-v-faee2e79"]]);exports.default=se;