vue-data-ui-hq/dist/vue-ui-kpi-OogOt-5l.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { computed as D, useSlots as x, onMounted as C, watch as $, ref as k, openBlock as u, createElementBlock as r, normalizeClass as m, unref as t, normalizeStyle as i, createElementVNode as y, renderSlot as s, createTextVNode as h, toDisplayString as b, createVNode as z, Fragment as A } from "vue";
import { u as w } from "./useNestedProp-Cj0kHD7k.js";
import { u as B, i as L, f as M } from "./index-WrV3SAID.js";
import E from "./vue-ui-digits-BsNESTvv.js";
const G = {
  __name: "vue-ui-kpi",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Number,
      default: 0
    }
  },
  setup(n) {
    const { vue_ui_kpi: F } = B(), l = n, e = D({
      get: () => c(),
      set: (a) => a
    }), N = x();
    C(() => {
      N["chart-background"] && console.warn("VueUiKpi does not support the #chart-background slot.");
    });
    function c() {
      return w({
        userConfig: l.config,
        defaultConfig: F
      });
    }
    $(() => l.config, (a) => {
      e.value = c(), d();
    }, { deep: !0 });
    const S = k((typeof l.dataset == "number", l.dataset)), o = k(e.value.useAnimation ? e.value.animationValueStart : S.value), f = (a) => {
      const v = e.value.animationFrames, p = Math.abs(a - o.value) / v;
      function g() {
        o.value < a ? o.value = Math.min(o.value + p, a) : o.value > a && (o.value = Math.max(o.value - p, a)), o.value !== a && requestAnimationFrame(g);
      }
      g();
    };
    C(() => {
      d();
    });
    function d() {
      e.value.useAnimation ? (o.value = e.value.animationValueStart, f(l.dataset)) : o.value = l.dataset;
    }
    return $(() => l.dataset, (a) => {
      e.value.useAnimation ? f(a) : o.value = a;
    }), (a, v) => (u(), r("div", {
      class: m(`vue-ui-kpi ${t(e).layoutClass}`),
      style: i(`background:${t(e).backgroundColor}; ${t(e).layoutCss}`)
    }, [
      y("div", {
        class: m(`vue-ui-kpi-title ${t(e).titleClass}`),
        style: i(`font-family: ${t(e).fontFamily}; font-size:${t(e).titleFontSize}px; color:${t(e).titleColor}; font-weight:${t(e).titleBold ? "bold" : "normal"}; ${t(e).titleCss}`)
      }, [
        s(a.$slots, "title", { comment: n.dataset }),
        h(" " + b(t(e).title), 1)
      ], 6),
      s(a.$slots, "comment-before", { comment: n.dataset }),
      y("div", {
        class: m(`vue-ui-kpi-value ${t(e).valueClass}`),
        style: i(`font-family: ${t(e).fontFamily}; font-size:${t(e).valueFontSize}px; color:${t(e).valueColor}; font-weight:${t(e).valueBold ? "bold" : "normal"}; ${t(e).valueCss}`)
      }, [
        s(a.$slots, "value", { comment: n.dataset }),
        t(e).analogDigits.show ? (u(), r("div", {
          key: 0,
          style: i({ height: t(e).analogDigits.height + "px" })
        }, [
          z(E, {
            dataset: Number(t(o).toFixed(t(e).valueRounding)),
            config: {
              backgroundColor: t(e).backgroundColor,
              digits: {
                color: t(e).analogDigits.color,
                skeletonColor: t(e).analogDigits.skeletonColor
              }
            }
          }, null, 8, ["dataset", "config"])
        ], 4)) : (u(), r(A, { key: 1 }, [
          h(b(t(L)(
            t(e).formatter,
            t(o),
            t(M)({
              p: t(e).prefix,
              v: t(o),
              s: t(e).suffix,
              r: t(e).valueRounding
            })
          )), 1)
        ], 64))
      ], 6),
      s(a.$slots, "comment-after", { comment: n.dataset })
    ], 6));
  }
};
export {
  G as default
};