vue-data-ui-hq/dist/vue-ui-kpi-CAJFMGX_.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"),p=require("./useNestedProp-C14rfl0j.cjs"),u=require("./index-ZfICPrrM.cjs"),y=require("./vue-ui-digits-D2Viqv4I.cjs"),C={__name:"vue-ui-kpi",props:{config:{type:Object,default(){return{}}},dataset:{type:Number,default:0}},setup(l){const{vue_ui_kpi:m}=u.useConfig(),o=l,t=e.computed({get:()=>r(),set:n=>n}),v=e.useSlots();e.onMounted(()=>{v["chart-background"]&&console.warn("VueUiKpi does not support the #chart-background slot.")});function r(){return p.useNestedProp({userConfig:o.config,defaultConfig:m})}e.watch(()=>o.config,n=>{t.value=r(),s()},{deep:!0});const g=e.ref((typeof o.dataset=="number",o.dataset)),a=e.ref(t.value.useAnimation?t.value.animationValueStart:g.value),i=n=>{const f=t.value.animationFrames,c=Math.abs(n-a.value)/f;function d(){a.value<n?a.value=Math.min(a.value+c,n):a.value>n&&(a.value=Math.max(a.value-c,n)),a.value!==n&&requestAnimationFrame(d)}d()};e.onMounted(()=>{s()});function s(){t.value.useAnimation?(a.value=t.value.animationValueStart,i(o.dataset)):a.value=o.dataset}return e.watch(()=>o.dataset,n=>{t.value.useAnimation?i(n):a.value=n}),(n,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`vue-ui-kpi ${e.unref(t).layoutClass}`),style:e.normalizeStyle(`background:${e.unref(t).backgroundColor}; ${e.unref(t).layoutCss}`)},[e.createElementVNode("div",{class:e.normalizeClass(`vue-ui-kpi-title ${e.unref(t).titleClass}`),style:e.normalizeStyle(`font-family: ${e.unref(t).fontFamily}; font-size:${e.unref(t).titleFontSize}px; color:${e.unref(t).titleColor}; font-weight:${e.unref(t).titleBold?"bold":"normal"}; ${e.unref(t).titleCss}`)},[e.renderSlot(n.$slots,"title",{comment:l.dataset}),e.createTextVNode(" "+e.toDisplayString(e.unref(t).title),1)],6),e.renderSlot(n.$slots,"comment-before",{comment:l.dataset}),e.createElementVNode("div",{class:e.normalizeClass(`vue-ui-kpi-value ${e.unref(t).valueClass}`),style:e.normalizeStyle(`font-family: ${e.unref(t).fontFamily}; font-size:${e.unref(t).valueFontSize}px; color:${e.unref(t).valueColor}; font-weight:${e.unref(t).valueBold?"bold":"normal"}; ${e.unref(t).valueCss}`)},[e.renderSlot(n.$slots,"value",{comment:l.dataset}),e.unref(t).analogDigits.show?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({height:e.unref(t).analogDigits.height+"px"})},[e.createVNode(y.default,{dataset:Number(e.unref(a).toFixed(e.unref(t).valueRounding)),config:{backgroundColor:e.unref(t).backgroundColor,digits:{color:e.unref(t).analogDigits.color,skeletonColor:e.unref(t).analogDigits.skeletonColor}}},null,8,["dataset","config"])],4)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(e.unref(u.applyDataLabel)(e.unref(t).formatter,e.unref(a),e.unref(u.dataLabel)({p:e.unref(t).prefix,v:e.unref(a),s:e.unref(t).suffix,r:e.unref(t).valueRounding}))),1)],64))],6),e.renderSlot(n.$slots,"comment-after",{comment:l.dataset})],6))}};exports.default=C;