vue-data-ui/dist/vue-ui-sparkgauge-CEOGh__Q.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"),s=require("./index-_gyicZFE.cjs"),b=require("./useNestedProp-BJQoarHp.cjs"),w=require("./vue-ui-skeleton-KlT3Rmkn.cjs"),S=require("./PackageVersion-DHtx9fnE.cjs"),B=require("./useChartAccessibility-Cm7nkzTG.cjs"),E=["xmlns","viewBox"],L=["width","height"],A=["id"],M=["stop-color"],V=["stop-color"],z=["d","stroke","stroke-linecap"],q=["d","stroke","stroke-linecap","stroke-dashoffset"],O=["x","y","font-size","fill","font-weight"],j={key:4,ref:"source",dir:"auto"},D={__name:"vue-ui-sparkgauge",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(C){const{vue_ui_sparkgauge:_}=s.useConfig(),l=C,c=e.computed(()=>!!l.dataset&&Object.keys(l.dataset).length);e.onMounted(()=>{d()});function d(){s.objectIsEmpty(l.dataset)?s.error({componentName:"VueUiSparkgauge",type:"dataset"}):s.getMissingDatasetAttributes({datasetObject:l.dataset,requiredAttributes:["value","min","max"]}).forEach(a=>{s.error({componentName:"VueUiSparkgauge",type:"datasetAttribute",property:a})})}const v=e.ref(s.createUid()),t=e.computed({get:()=>m(),set:a=>a}),{svgRef:N}=B.useChartAccessibility({config:{text:l.dataset.title}});function m(){const a=b.useNestedProp({userConfig:l.config,defaultConfig:_});return a.theme?{...b.useNestedProp({userConfig:s.themes.vue_ui_sparkgauge[a.theme]||l.config,defaultConfig:a})}:a}e.watch(()=>l.config,a=>{t.value=m(),d()},{deep:!0});const u=e.computed(()=>({height:t.value.style.height,width:128,base:t.value.style.basePosition})),n=e.computed(()=>{const a=l.dataset.min??0,r=l.dataset.max??0,$=r-a;return{min:a,max:r,diff:$}}),o=e.ref(t.value.style.animation.show?n.value.min:l.dataset.value);e.watch(()=>l.dataset.value,()=>{y(l.dataset.value||0)});const f=e.computed(()=>o.value>n.value.max?n.value.max:o.value<n.value.min?n.value.min:o.value),p=e.computed(()=>n.value.diff/t.value.style.animation.speedMs);e.onMounted(()=>{y(l.dataset.value||0)});function y(a){function r(){o.value<a?o.value=Math.min(o.value+p.value,a):o.value>a&&(o.value=Math.max(o.value-p.value,a)),o.value!==a&&requestAnimationFrame(r)}r()}const i=e.computed(()=>l.dataset.title??""),g=e.computed(()=>o.value>=0?(f.value-n.value.min)/n.value.diff:(Math.abs(n.value.min)-Math.abs(f.value))/n.value.diff),h=e.computed(()=>s.interpolateColorHex(t.value.style.colors.min,t.value.style.colors.max,n.value.min,n.value.max,o.value)),k=e.computed(()=>t.value.style.dataLabel.autoColor?h.value:t.value.style.dataLabel.color),x=e.computed(()=>t.value.style.track.autoColor?h.value:t.value.style.track.color);return(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:"vue-ui-sparkgauge",style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width: 100%; background:${t.value.style.background}`)},[t.value.style.title.show&&i.value&&t.value.style.title.position==="top"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(i.value),5)):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("svg",{key:1,ref_key:"svgRef",ref:N,xmlns:e.unref(s.XMLNS),viewBox:`0 0 ${u.value.width} ${u.value.height}`,style:"overflow: visible; background:transparent; width:100%;"},[e.createVNode(S._sfc_main),a.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:u.value.width,height:u.value.height,style:{pointerEvents:"none"}},[e.renderSlot(a.$slots,"chart-background")],8,L)):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:`gradient_${v.value}`,x1:"-10%",y1:"100%",x2:"110%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":t.value.style.colors.min},null,8,M),e.createElementVNode("stop",{offset:"100%","stop-color":t.value.style.colors.max},null,8,V)],8,A)]),e.createElementVNode("path",{d:`M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,stroke:t.value.style.gutter.color,"stroke-width":8,"stroke-linecap":t.value.style.gutter.strokeLinecap,fill:"none"},null,8,z),g.value!==0?(e.openBlock(),e.createElementBlock("path",{key:1,d:`M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,stroke:t.value.style.colors.showGradient?`url(#gradient_${v.value})`:x.value,"stroke-width":8,"stroke-linecap":t.value.style.track.strokeLinecap,fill:"none","stroke-dasharray":169.5,"stroke-dashoffset":169.5-169.5*g.value,class:e.normalizeClass({"vue-ui-sparkgauge-track":t.value.style.animation.show}),style:e.normalizeStyle(t.value.style.animation.show?`animation: vue-ui-sparkgauge-animation ${t.value.style.animation.speedMs}ms ease-in;`:"")},null,14,q)):e.createCommentVNode("",!0),e.createElementVNode("text",{"text-anchor":"middle",x:u.value.width/2,y:u.value.base+6+t.value.style.dataLabel.offsetY,"font-size":t.value.style.dataLabel.fontSize,fill:k.value,"font-weight":t.value.style.dataLabel.bold?"bold":"normal"},e.toDisplayString(e.unref(s.applyDataLabel)(t.value.style.dataLabel.formatter,e.unref(s.checkNaN)(o.value),e.unref(s.dataLabel)({p:t.value.style.dataLabel.prefix,v:e.unref(s.checkNaN)(o.value),s:t.value.style.dataLabel.suffix,r:t.value.style.dataLabel.rounding}),{datapoint:e.unref(s.checkNaN)(o.value),color:k.value})),9,O)],8,E)):e.createCommentVNode("",!0),c.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(w.default,{key:2,config:{type:"gauge",style:{backgroundColor:t.value.style.background,gauge:{color:"#CCCCCC"}}}},null,8,["config"])),t.value.style.title.show&&i.value&&t.value.style.title.position==="bottom"?(e.openBlock(),e.createElementBlock("div",{key:3,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(i.value),5)):e.createCommentVNode("",!0),a.$slots.source?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(a.$slots,"source")],512)):e.createCommentVNode("",!0)],4))}};exports.default=D;