vue-data-ui/dist/vue-ui-kpi-BfCuGNby.js

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

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