vue-data-ui-hq/dist/vue-ui-gizmo-Dt_WO6Ng.js

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

import { ref as b, useSlots as z, onMounted as p, computed as u, watch as G, openBlock as r, createElementBlock as a, unref as t, normalizeStyle as L, createVNode as N, createElementVNode as o, createCommentVNode as n, Fragment as y, toDisplayString as k } from "vue";
import { u as $, c as F, e as B, i as m, f as w } from "./index-WrV3SAID.js";
import { u as V } from "./useNestedProp-Cj0kHD7k.js";
import { _ as P } from "./PackageVersion-1NslmM8M.js";
const U = ["viewBox", "width"], D = { key: 0 }, I = ["id"], M = ["stop-color"], S = ["stop-color"], E = ["stroke"], O = ["stroke"], A = ["width", "fill"], j = ["fill"], T = { key: 0 }, q = ["id"], H = ["stroke"], J = ["stroke", "stroke-dasharray", "stroke-dashoffset"], K = ["filter"], Q = ["stroke", "stroke-dasharray", "stroke-dashoffset"], R = ["fill"], tt = {
  __name: "vue-ui-gizmo",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Number,
      default: 0
    }
  },
  setup(f) {
    const { vue_ui_gizmo: x } = $(), s = f, l = b(F()), C = z();
    p(() => {
      h();
    }), p(() => {
      C["chart-background"] && console.warn("VueUiGizmo does not support the #chart-background slot.");
    });
    function h() {
      !s.dataset && s.dataset !== 0 && B({
        componentName: "VueUiGizmo",
        type: "dataset"
      }), s.dataset < 0 && console.warn("VueUiGizmo: dataset cannot be negative.");
    }
    const e = u({
      get: () => _(),
      set: (d) => d
    });
    function _() {
      return V({
        userConfig: s.config,
        defaultConfig: x
      });
    }
    G(() => s.config, (d) => {
      e.value = _(), h();
    }, { deep: !0 });
    const g = u(() => ({
      battery: { width: e.value.showPercentage ? 140 : 80, height: 50 },
      gauge: { width: 80, height: 80 }
    })[e.value.type]), c = u(() => {
      const i = 2 * Math.PI * 35, v = i - s.dataset / 100 * i;
      return {
        dasharray: `${i} ${i}`,
        dashoffset: v
      };
    });
    return (d, i) => (r(), a("svg", {
      class: "vue-ui-gizmo",
      viewBox: `0 0 ${t(g).width} ${t(g).height}`,
      width: t(e).size,
      style: L({
        background: "transparent",
        fontFamily: t(e).fontFamily
      })
    }, [
      N(P),
      t(e).useGradient ? (r(), a("defs", D, [
        o("linearGradient", {
          id: `gizmo_gradient_${t(l)}`,
          x1: "0%",
          x2: "100%",
          y1: "0%",
          y2: "0%"
        }, [
          o("stop", {
            offset: "0%",
            "stop-color": t(e).gradientColor
          }, null, 8, M),
          o("stop", {
            offset: "100%",
            "stop-color": t(e).color
          }, null, 8, S)
        ], 8, I)
      ])) : n("", !0),
      t(e).type === "battery" ? (r(), a(y, { key: 1 }, [
        o("path", {
          d: "M 5 10 L 5 40 C 5 43 7 45 9 45 L 65 45 C 68 45 70 43 70 40 L 70 38 C 73 38 75 38 75 33 L 75 17 C 75 12 73 12 70 12 L 70 10 C 70 7 68 5 65 5 L 10 5 C 7 5 5 7 5 10",
          stroke: t(e).stroke,
          "stroke-width": 2,
          fill: "none"
        }, null, 8, E),
        o("path", {
          d: "M 70 16 L 70 34",
          stroke: t(e).stroke,
          "stroke-width": 2,
          fill: "none",
          style: { opacity: "0.5" }
        }, null, 8, O),
        o("rect", {
          x: 10,
          y: 10,
          height: 30,
          width: 55 * (f.dataset / 100),
          fill: t(e).useGradient ? `url(#gizmo_gradient_${t(l)})` : t(e).color,
          rx: 2
        }, null, 8, A),
        t(e).showPercentage ? (r(), a("text", {
          key: 0,
          x: 85,
          y: 32,
          "text-anchor": "start",
          "font-size": "20",
          fill: t(e).textColor
        }, k(t(m)(
          t(e).formatter,
          s.dataset,
          t(w)({
            v: s.dataset,
            s: "%"
          })
        )), 9, j)) : n("", !0)
      ], 64)) : n("", !0),
      t(e).type === "gauge" ? (r(), a(y, { key: 2 }, [
        t(e).useGradient ? (r(), a("defs", T, [
          o("filter", {
            id: `blur_${t(l)}`,
            x: "-50%",
            y: "-50%",
            width: "200%",
            height: "200%"
          }, i[0] || (i[0] = [
            o("feGaussianBlur", {
              in: "SourceGraphic",
              stdDeviation: 1
            }, null, -1)
          ]), 8, q)
        ])) : n("", !0),
        o("circle", {
          cx: 40,
          cy: 40,
          r: 35,
          stroke: t(e).stroke,
          "stroke-width": 2 * 4,
          fill: "none"
        }, null, 8, H),
        o("circle", {
          cx: 40,
          cy: 40,
          r: 35,
          stroke: t(e).color,
          "stroke-width": 2 * 4,
          "stroke-dasharray": t(c).dasharray,
          "stroke-dashoffset": t(c).dashoffset,
          "stroke-linecap": "round",
          fill: "none",
          style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
        }, null, 8, J),
        t(e).useGradient ? (r(), a("g", {
          key: 1,
          filter: `url(#blur_${t(l)})`
        }, [
          o("circle", {
            cx: 40,
            cy: 40,
            r: 35,
            stroke: t(e).gradientColor,
            "stroke-width": 1,
            fill: "none",
            "stroke-dasharray": t(c).dasharray,
            "stroke-dashoffset": t(c).dashoffset,
            style: { transform: "rotate(-90deg)", "transform-origin": "50% 50%" }
          }, null, 8, Q)
        ], 8, K)) : n("", !0),
        t(e).showPercentage ? (r(), a("text", {
          key: 2,
          x: 40,
          y: 47,
          "text-anchor": "middle",
          "font-size": "20",
          fill: t(e).textColor
        }, k(t(m)(
          t(e).formatter,
          s.dataset,
          t(w)({
            v: s.dataset,
            s: "%"
          })
        )), 9, R)) : n("", !0)
      ], 64)) : n("", !0)
    ], 12, U));
  }
};
export {
  tt as default
};