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