vue-data-ui-hq/dist/vue-ui-sparkbar-COCIDiNC.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"),b=require("./useNestedProp-C14rfl0j.cjs"),$=require("./vue-ui-skeleton-Bvmpr51u.cjs"),z=require("./PackageVersion-D3dK8oA3.cjs"),L=["onClick"],P={key:1},A=["xmlns","viewBox"],F=["id"],O=["stop-color"],I=["stop-color"],T=["height","width","fill","rx"],q=["height","width","fill","rx"],M=["height","width","fill","rx"],U={key:2,ref:"source",dir:"auto"},j={__name:"vue-ui-sparkbar",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}},backgroundOpacity:{type:Number,default:null}},emits:["selectDatapoint"],setup(m,{emit:C}){const{vue_ui_sparkbar:S}=r.useConfig(),o=m,w=e.useSlots();e.onMounted(()=>{w["chart-background"]&&console.warn("VueUiSparkbar does not support the #chart-background slot.")});const p=e.computed(()=>!!o.dataset&&o.dataset.length),y=e.ref(r.createUid()),t=e.computed({get:()=>g(),set:l=>l});function g(){const l=b.useNestedProp({userConfig:o.config,defaultConfig:S});return l.theme?{...b.useNestedProp({userConfig:r.themes.vue_ui_sparkbar[l.theme]||o.config,defaultConfig:l}),customPalette:r.themePalettes[l.theme]||r.palette}:l}e.watch(()=>o.config,l=>{t.value=g()},{deep:!0});const _=e.computed(()=>r.convertCustomPalette(t.value.customPalette)),c=e.ref(o.dataset.map(l=>({...l,value:t.value.style.animation.show?0:l.value||0,formatter:l.formatter||null}))),h=e.ref(null);e.onMounted(async()=>{r.objectIsEmpty(o.dataset)&&r.error({componentName:"VueUiSparkbar",type:"dataset"}),v()});function v(){if(t.value.style.animation.show){let x=function(){i+=n/l,i<n?(c.value=c.value.map((u,d)=>({...u,value:u.value+=a[d]})),h.value=requestAnimationFrame(x)):c.value=o.dataset.map(u=>({...u,value:u.value||0,formatter:u.formatter||null}))};const l=t.value.style.animation.animationFrames,a=o.dataset.map((u,d)=>u.value/l),n=o.dataset.map(u=>u.value||0).reduce((u,d)=>u+d,0);let i=0;x()}}e.watch(()=>o.dataset,async l=>{cancelAnimationFrame(h.value),c.value=o.dataset.map(a=>({...a,value:t.value.style.animation.show?0:a.value||0,formatter:a.formatter||null})),e.nextTick(v)},{deep:!0});const s=e.ref({width:500,height:16}),N=e.computed(()=>Math.max(...o.dataset.map(l=>l.value))),B=e.computed(()=>(o.dataset.forEach((l,a)=>{r.getMissingDatasetAttributes({datasetObject:l,requiredAttributes:["name","value"]}).forEach(n=>{r.error({componentName:"VueUiSparkbar",type:"datasetSerieAttribute",property:n,index:a})})}),c.value.map((l,a)=>({...l,value:l.value||0,color:r.convertColorToHex(l.color)||_.value[a]||r.palette[a]||r.palette[a%r.palette.length]}))));function V(l){return l/N.value}function k(l){return t.value.style.layout.independant?l.target?l.value/l.target:t.value.style.layout.percentage?l.value>100?1:l.value/100:t.value.style.layout.target===0?1:l.value/t.value.style.layout.target:V(l.value)}function f(l){return t.value.style.layout.independant&&l.target||t.value.style.layout.target}const E=C;function D(l,a){E("selectDatapoint",{datapoint:l,index:a})}return(l,a)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({width:"100%",fontFamily:e.unref(t).style.fontFamily,background:o.backgroundOpacity!==null?e.unref(r.setOpacity)(e.unref(t).style.backgroundColor,o.backgroundOpacity):e.unref(t).style.backgroundColor})},[l.$slots.title?e.renderSlot(l.$slots,"title",e.normalizeProps(e.mergeProps({key:0},{title:{...l.title,title:e.unref(t).style.title.text,subtitle:e.unref(t).style.title.subtitle.text}}))):e.createCommentVNode("",!0),!l.$slots.title&&e.unref(t).style.title.text?(e.openBlock(),e.createElementBlock("div",{key:1,class:"vue-ui-sparkbar-title-container",style:e.normalizeStyle({background:e.unref(t).style.title.backgroundColor,margin:e.unref(t).style.title.margin,textAlign:e.unref(t).style.title.textAlign})},[e.createElementVNode("div",{class:"vue-ui-sparkbar-title",style:e.normalizeStyle({fontSize:e.unref(t).style.title.fontSize+"px",color:e.unref(t).style.title.color,fontWeight: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,class:"vue-ui-sparkbar-subtitle",style:e.normalizeStyle({fontSize:e.unref(t).style.title.subtitle.fontSize+"px",color:e.unref(t).style.title.subtitle.color,fontWeight: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.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(B),(n,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(p)?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`display:flex !important;${["left","right"].includes(e.unref(t).style.labels.name.position)?`flex-direction: ${e.unref(t).style.labels.name.position==="right"?"row-reverse":"row"} !important`:"flex-direction:column !important"};gap:${e.unref(t).style.gap}px !important;align-items:center;${m.dataset.length>0&&i!==m.dataset.length-1?"margin-bottom:6px":""}`),onClick:()=>D(n,i)},[e.renderSlot(l.$slots,"data-label",e.mergeProps({ref_for:!0},{bar:{...n,target:f(n),valueLabel:e.unref(r.applyDataLabel)(n.formatter,n.value,e.unref(r.dataLabel)({p:n.prefix||"",v:n.value,s:n.suffix||"",r:n.rounding||0}),{datapoint:n,seriesIndex:i}),targetLabel:e.unref(r.applyDataLabel)(n.formatter,f(n),e.unref(r.dataLabel)({p:n.prefix||"",v:f(n),s:n.suffix||"",r:n.rounding||0}),{datapoint:n,seriesIndex:i})}})),l.$slots["data-label"]?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({width:e.unref(t).style.labels.name.width,color:e.unref(t).style.labels.name.color,fontSize:e.unref(t).style.labels.fontSize+"px",fontWeight:e.unref(t).style.labels.name.bold?"bold":"normal",textAlign:["left","right"].includes(e.unref(t).style.labels.name.position)||["top","top-left"].includes(e.unref(t).style.labels.name.position)?"left":e.unref(t).style.labels.name.position==="top-center"?"center":"right"})},[e.createElementVNode("span",null,e.toDisplayString(n.name),1),e.unref(t).style.labels.value.show?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle(`font-weight:${e.unref(t).style.labels.value.bold?"bold":"normal"}`)},": "+e.toDisplayString(e.unref(r.applyDataLabel)(n.formatter,n.value,e.unref(r.dataLabel)({p:n.prefix||"",v:n.value,s:n.suffix||"",r:n.rounding||0}),{datapoint:n,seriesIndex:i})),5)):e.createCommentVNode("",!0),e.unref(t).style.layout.showTargetValue?(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(" "+e.unref(t).style.layout.targetValueText)+" "+e.toDisplayString(e.unref(r.applyDataLabel)(n.formatter,f(n),e.unref(r.dataLabel)({p:n.prefix||"",v:f(n),s:n.suffix||"",r:n.rounding||0}),{datapoint:n,seriesIndex:i})),1)):e.createCommentVNode("",!0)],4)),(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(r.XMLNS),viewBox:`0 0 ${e.unref(s).width} ${e.unref(s).height}`,width:"100%"},[e.createVNode(z._sfc_main),e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{x1:"0%",y1:"0%",x2:"100%",y2:"0%",id:`sparkbar_gradient_${i}_${e.unref(y)}`},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(r.setOpacity)(e.unref(r.shiftHue)(n.color,.03),100-e.unref(t).style.bar.gradient.intensity)},null,8,O),e.createElementVNode("stop",{offset:"100%","stop-color":n.color},null,8,I)],8,F)]),e.createElementVNode("rect",{height:e.unref(s).height,width:e.unref(s).width,x:0,y:0,fill:e.unref(r.setOpacity)(e.unref(t).style.gutter.backgroundColor,e.unref(t).style.gutter.opacity),rx:e.unref(s).height/2},null,8,T),e.createElementVNode("rect",{height:e.unref(s).height,width:e.unref(s).width*k(n),x:0,y:0,fill:e.unref(t).style.bar.gradient.underlayerColor,rx:e.unref(s).height/2},null,8,q),e.createElementVNode("rect",{height:e.unref(s).height,width:e.unref(s).width*k(n),x:0,y:0,fill:e.unref(t).style.bar.gradient.show?`url(#sparkbar_gradient_${i}_${e.unref(y)})`:n.color,rx:e.unref(s).height/2},null,8,M)],8,A))],12,L)):e.createCommentVNode("",!0)],64))),256)),l.$slots.source?(e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(l.$slots,"source")],512)):e.createCommentVNode("",!0),e.unref(p)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock($.default,{key:3,config:{type:"sparkbar",style:{backgroundColor:e.unref(t).style.backgroundColor,sparkbar:{color:"#CCCCCC"}}}},null,8,["config"]))],4))}};exports.default=j;