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

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

import { defineAsyncComponent as z, computed as C, useSlots as w, onMounted as k, watch as y, ref as $, createElementBlock as s, openBlock as i, normalizeStyle as u, normalizeClass as r, createElementVNode as b, renderSlot as n, createTextVNode as h, toDisplayString as F, createVNode as B, unref as v, Fragment as L } from "vue";
import { u as M } from "./useNestedProp-04aFeUYu.js";
import { u as E, k as I, i as O } from "./index-q-LPw2IT.js";
const R = {
  __name: "vue-ui-kpi",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Number,
      default: 0
    }
  },
  setup(o) {
    const N = z(() => import("./vue-ui-digits-BapPpCcj.js")), { vue_ui_kpi: D } = E(), l = o, e = C({
      get: () => c(),
      set: (a) => a
    }), S = w(), A = C(() => e.value.debug);
    k(() => {
      S["chart-background"] && A.value && console.warn("VueUiKpi does not support the #chart-background slot.");
    });
    function c() {
      return M({
        userConfig: l.config,
        defaultConfig: D
      });
    }
    y(() => l.config, (a) => {
      e.value = c(), d();
    }, { deep: !0 });
    const x = $((typeof l.dataset == "number", l.dataset)), t = $(e.value.useAnimation ? e.value.animationValueStart : x.value), m = (a) => {
      const f = e.value.animationFrames, g = Math.abs(a - t.value) / f;
      function p() {
        t.value < a ? t.value = Math.min(t.value + g, a) : t.value > a && (t.value = Math.max(t.value - g, a)), t.value !== a && requestAnimationFrame(p);
      }
      p();
    };
    k(() => {
      d();
    });
    function d() {
      e.value.useAnimation ? (t.value = e.value.animationValueStart, m(l.dataset)) : t.value = l.dataset;
    }
    return y(() => l.dataset, (a) => {
      e.value.useAnimation ? m(a) : t.value = a;
    }), (a, f) => (i(), s("div", {
      class: r(`vue-ui-kpi ${e.value.layoutClass}`),
      style: u(`background:${e.value.backgroundColor}; ${e.value.layoutCss}`)
    }, [
      b("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 }),
        h(" " + F(e.value.title), 1)
      ], 6),
      n(a.$slots, "comment-before", { comment: o.dataset }),
      b("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 ? (i(), s("div", {
          key: 0,
          style: u({ height: e.value.analogDigits.height + "px" })
        }, [
          B(v(N), {
            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)) : (i(), s(L, { key: 1 }, [
          h(F(v(I)(
            e.value.formatter,
            t.value,
            v(O)({
              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 {
  R as default
};