vue-data-ui 3.6.0 → 3.7.0

package/dist/vue-ui-sparkbar-DVk1JiPL.js

@@ -0,0 +1,381 @@
+import { defineAsyncComponent as ue, useSlots as ie, onMounted as L, ref as b, toRefs as ce, computed as x, watch as N, nextTick as de, createElementBlock as u, openBlock as r, normalizeStyle as v, unref as o, renderSlot as D, createCommentVNode as f, createBlock as ve, normalizeProps as fe, mergeProps as P, createElementVNode as c, toDisplayString as p, Fragment as O, renderList as ge, createVNode as pe } from "vue";
+import { c as ye, t as me, i as he, p as A, j as be, o as Ce, g as M, k as ke, l as xe, s as $, a as _, d as w, X as Ae, h as _e } from "./lib-C5BH09_g.js";
+import { u as we, a as F } from "./useNestedProp-CWo6bftQ.js";
+import { u as Se, B as De } from "./BaseScanner-BgWxam9d.js";
+import { u as $e } from "./useThemeCheck-DGJ31Vi5.js";
+const j = { style: { backgroundColor: "#1A1A1A", gutter: { backgroundColor: "#3A3A3A" }, bar: { gradient: { underlayerColor: "#1A1A1A" } }, labels: { name: { color: "#CCCCCC" } }, title: { color: "#CCCCCC" } } }, V = { style: { backgroundColor: "#FFF8E1", gutter: { backgroundColor: "#ded6ca" }, bar: { gradient: { underlayerColor: "#FFF8E1" } }, labels: { name: { color: "#424242" } }, title: { color: "#424242" } } }, U = { style: { backgroundColor: "#1E1E1E", gutter: { backgroundColor: "#2E2E2E" }, bar: { gradient: { underlayerColor: "#FFF8E1" } }, labels: { name: { color: "#BDBDBD" } }, title: { color: "#BDBDBD" } } }, R = { style: { backgroundColor: "#1A1A1A", gutter: { backgroundColor: "#333333" }, bar: { gradient: { underlayerColor: "#1A1A1A" } }, labels: { name: { color: "#99CC99" } }, title: { color: "#66CC66" } } }, W = { style: { backgroundColor: "#fbfafa", gutter: { backgroundColor: "#f5f0eb" }, bar: { gradient: { underlayerColor: "#fbfafa" } }, labels: { name: { color: "#8A9892" } } } }, G = { style: { backgroundColor: "#f6f6fb", bar: { gradient: { underlayerColor: "#f6f6fb" } }, labels: { name: { color: "#50606C" } } } }, q = {
+  default: {},
+  dark: j,
+  celebration: V,
+  celebrationNight: U,
+  hack: R,
+  zen: W,
+  concrete: G
+}, Ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: V,
+  celebrationNight: U,
+  concrete: G,
+  dark: j,
+  default: q,
+  hack: R,
+  zen: W
+}, Symbol.toStringTag, { value: "Module" })), Fe = ["onClick", "onMouseenter", "onMouseleave"], Ee = { key: 1 }, Te = ["xmlns", "viewBox"], Be = ["id"], Ie = ["stop-color"], ze = ["stop-color"], Le = ["height", "width", "fill", "rx"], Ne = ["height", "width", "fill", "rx"], Pe = ["height", "width", "fill", "rx"], Oe = {
+  key: 2,
+  ref: "source",
+  dir: "auto"
+}, Me = {
+  __name: "vue-ui-sparkbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * Used in VueUiRadar's tooltip exclusively
+     */
+    backgroundOpacity: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(H, { emit: X }) {
+    const J = ue(() => import("./PackageVersion-Bq_mtsqr.js")), { vue_ui_sparkbar: K } = we(), { isThemeValid: Q, warnInvalidTheme: Y } = $e(), g = H, Z = ie();
+    L(() => {
+      Z["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
+    });
+    const E = b(ye()), e = b(S()), { loading: C, FINAL_DATASET: d } = Se({
+      ...ce(g),
+      FINAL_CONFIG: e,
+      prepareConfig: S,
+      skeletonDataset: [
+        { name: "_", value: 21, target: 25, color: "#808080" },
+        { name: "_", value: 13, target: 25, color: "#ADADAD" },
+        { name: "_", value: 8, target: 25, color: "#DBDBDB" }
+      ],
+      skeletonConfig: me({
+        defaultConfig: e.value,
+        userConfig: {
+          style: {
+            backgroundColor: "#99999930",
+            animation: { show: !1 },
+            layout: { independant: !0 },
+            gutter: {
+              backgroundColor: "#6A6A6A",
+              opacity: 50
+            },
+            bar: {
+              gradient: {
+                underlayerColor: "#6A6A6A"
+              }
+            }
+          }
+        }
+      })
+    }), T = x(() => !!e.value.debug);
+    function S() {
+      const t = F({
+        userConfig: g.config,
+        defaultConfig: K
+      }), a = t.theme;
+      if (!a) return t;
+      if (!Q.value(t))
+        return Y(t), t;
+      const l = F({
+        userConfig: q[a] || g.config,
+        defaultConfig: t
+      }), n = F({
+        userConfig: g.config,
+        defaultConfig: l
+      });
+      return {
+        ...n,
+        customPalette: n.customPalette.length ? n.customPalette : he[a] || A
+      };
+    }
+    N(() => g.config, (t) => {
+      e.value = S();
+    }, { deep: !0 });
+    const ee = x(() => be(e.value.customPalette)), y = b(d.value.map((t) => ({
+      ...t,
+      value: e.value.style.animation.show ? 0 : t.value || 0,
+      formatter: t.formatter || null
+    }))), B = b(null);
+    L(async () => {
+      Ce(g.dataset) && M({
+        componentName: "VueUiSparkbar",
+        type: "dataset",
+        debug: T.value
+      }), I();
+    });
+    function I() {
+      if (e.value.style.animation.show) {
+        let h = function() {
+          n += l / t, n < l ? (y.value = y.value.map((s, k) => ({
+            ...s,
+            value: s.value += a[k]
+          })), B.value = requestAnimationFrame(h)) : y.value = d.value.map((s) => ({
+            ...s,
+            value: s.value || 0,
+            formatter: s.formatter || null
+          }));
+        };
+        const t = e.value.style.animation.animationFrames, a = d.value.map((s, k) => s.value / t), l = d.value.map((s) => s.value || 0).reduce((s, k) => s + k, 0);
+        let n = 0;
+        h();
+      }
+    }
+    N(() => d.value, async (t) => {
+      cancelAnimationFrame(B.value), y.value = d.value.map((a) => ({
+        ...a,
+        value: e.value.style.animation.show ? 0 : a.value || 0,
+        formatter: a.formatter || null
+      })), de(I);
+    }, { deep: !0 });
+    const i = b({
+      width: 500,
+      height: 16
+    }), te = x(() => Math.max(...d.value.map((t) => t.value))), le = x(() => (d.value.forEach((t, a) => {
+      ke({
+        datasetObject: t,
+        requiredAttributes: ["name", "value"]
+      }).forEach((l) => {
+        M({
+          componentName: "VueUiSparkbar",
+          type: "datasetSerieAttribute",
+          property: l,
+          index: a,
+          debug: T.value
+        });
+      });
+    }), y.value.map((t, a) => ({
+      ...t,
+      value: t.value || 0,
+      color: xe(t.color) || ee.value[a] || A[a] || A[a % A.length]
+    }))));
+    function ae(t) {
+      return t / te.value;
+    }
+    function z(t) {
+      return e.value.style.layout.independant ? t.target ? t.value / t.target : e.value.style.layout.percentage ? t.value > 100 ? 1 : t.value / 100 : e.value.style.layout.target === 0 ? 1 : t.value / e.value.style.layout.target : ae(t.value);
+    }
+    function m(t) {
+      return e.value.style.layout.independant && t.target || e.value.style.layout.target;
+    }
+    const oe = X;
+    function ne(t, a) {
+      oe("selectDatapoint", { datapoint: t, index: a }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    }
+    function re(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
+    }
+    function se(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }
+    return (t, a) => (r(), u("div", {
+      class: "vue-data-ui-component vue-ui-sparkbar",
+      style: v({
+        width: "100%",
+        position: "relative",
+        fontFamily: e.value.style.fontFamily,
+        background: g.backgroundOpacity !== null ? o($)(e.value.style.backgroundColor, g.backgroundOpacity) : e.value.style.backgroundColor
+      })
+    }, [
+      t.$slots.title ? D(t.$slots, "title", fe(P({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : f("", !0),
+      !t.$slots.title && e.value.style.title.text ? (r(), u("div", {
+        key: 1,
+        class: "vue-ui-sparkbar-title-container",
+        style: v({
+          background: e.value.style.title.backgroundColor,
+          margin: e.value.style.title.margin,
+          textAlign: e.value.style.title.textAlign
+        })
+      }, [
+        c("div", {
+          class: "vue-ui-sparkbar-title",
+          style: v({
+            fontSize: e.value.style.title.fontSize + "px",
+            color: e.value.style.title.color,
+            fontWeight: e.value.style.title.bold ? "bold" : "normal"
+          })
+        }, p(e.value.style.title.text), 5),
+        e.value.style.title.subtitle.text ? (r(), u("div", {
+          key: 0,
+          class: "vue-ui-sparkbar-subtitle",
+          style: v({
+            fontSize: e.value.style.title.subtitle.fontSize + "px",
+            color: e.value.style.title.subtitle.color,
+            fontWeight: e.value.style.title.subtitle.bold ? "bold" : "normal"
+          })
+        }, p(e.value.style.title.subtitle.text), 5)) : f("", !0)
+      ], 4)) : f("", !0),
+      (r(!0), u(O, null, ge(le.value, (l, n) => (r(), u("div", {
+        style: v(`display:flex !important;${["left", "right"].includes(e.value.style.labels.name.position) ? `flex-direction: ${e.value.style.labels.name.position === "right" ? "row-reverse" : "row"} !important` : "flex-direction:column !important"};gap:${e.value.style.gap}px !important;align-items:center;${o(d).length > 0 && n !== o(d).length - 1 ? "margin-bottom:6px" : ""}`),
+        onClick: (h) => ne(l, n),
+        onMouseenter: (h) => re(l, n),
+        onMouseleave: (h) => se(l, n)
+      }, [
+        o(C) ? f("", !0) : D(t.$slots, "data-label", P({
+          key: 0,
+          ref_for: !0
+        }, { bar: {
+          ...l,
+          target: m(l),
+          valueLabel: o(_)(
+            l.formatter,
+            l.value,
+            o(w)({
+              p: l.prefix || "",
+              v: l.value,
+              s: l.suffix || "",
+              r: l.rounding || 0
+            }),
+            { datapoint: l, seriesIndex: n }
+          ),
+          targetLabel: o(_)(
+            l.formatter,
+            m(l),
+            o(w)({
+              p: l.prefix || "",
+              v: m(l),
+              s: l.suffix || "",
+              r: l.rounding || 0
+            }),
+            { datapoint: l, seriesIndex: n }
+          )
+        } })),
+        !t.$slots["data-label"] || o(C) ? (r(), u("div", {
+          key: 1,
+          style: v({
+            display: "flex",
+            justifyContent: ["right", "top-right"].includes(e.value.style.labels.name.position) ? "flex-end" : ["top-center"].includes(e.value.style.labels.name.position) ? "center" : "flex-start",
+            alignItems: "center",
+            width: e.value.style.labels.name.width,
+            color: e.value.style.labels.name.color,
+            fontSize: e.value.style.labels.fontSize + "px",
+            fontWeight: e.value.style.labels.name.bold ? "bold" : "normal",
+            flexWrap: "wrap"
+          })
+        }, [
+          o(C) ? (r(), u("div", {
+            key: 0,
+            class: "vue-ui-sparkbar-skeleton-name",
+            style: v({
+              width: "60px",
+              height: e.value.style.labels.fontSize + "px",
+              borderRadius: e.value.style.labels.fontSize / 4 + "px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginTop: "5px"
+            })
+          }, [
+            c("div", {
+              style: v({ height: "100%", width: "40px", borderRadius: e.value.style.labels.fontSize / 4 + "px", backgroundColor: "#6A6A6A80" })
+            }, null, 4),
+            c("div", {
+              style: v({ height: "100%", width: "15px", borderRadius: e.value.style.labels.fontSize / 4 + "px", backgroundColor: "#6A6A6A80" })
+            }, null, 4)
+          ], 4)) : (r(), u(O, { key: 1 }, [
+            c("span", null, p(l.name), 1),
+            e.value.style.labels.value.show ? (r(), u("span", {
+              key: 0,
+              style: v(`font-weight:${e.value.style.labels.value.bold ? "bold" : "normal"}`)
+            }, ": " + p(o(_)(
+              l.formatter,
+              l.value,
+              o(w)({
+                p: l.prefix || "",
+                v: l.value,
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: n }
+            )), 5)) : f("", !0),
+            e.value.style.layout.showTargetValue ? (r(), u("span", Ee, p(" " + e.value.style.layout.targetValueText) + " " + p(o(_)(
+              l.formatter,
+              m(l),
+              o(w)({
+                p: l.prefix || "",
+                v: m(l),
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: n }
+            )), 1)) : f("", !0)
+          ], 64))
+        ], 4)) : f("", !0),
+        (r(), u("svg", {
+          xmlns: o(Ae),
+          viewBox: `0 0 ${i.value.width} ${i.value.height}`,
+          width: "100%"
+        }, [
+          pe(o(J)),
+          c("defs", null, [
+            c("linearGradient", {
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%",
+              id: `sparkbar_gradient_${n}_${E.value}`
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": o($)(o(_e)(l.color, 0.03), 100 - e.value.style.bar.gradient.intensity)
+              }, null, 8, Ie),
+              c("stop", {
+                offset: "100%",
+                "stop-color": l.color
+              }, null, 8, ze)
+            ], 8, Be)
+          ]),
+          c("rect", {
+            height: i.value.height,
+            width: i.value.width,
+            x: 0,
+            y: 0,
+            fill: o($)(e.value.style.gutter.backgroundColor, e.value.style.gutter.opacity),
+            rx: i.value.height / 2
+          }, null, 8, Le),
+          c("rect", {
+            height: i.value.height,
+            width: i.value.width * z(l),
+            x: 0,
+            y: 0,
+            fill: e.value.style.bar.gradient.underlayerColor,
+            rx: i.value.height / 2
+          }, null, 8, Ne),
+          c("rect", {
+            height: i.value.height,
+            width: i.value.width * z(l),
+            x: 0,
+            y: 0,
+            fill: e.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${n}_${E.value})` : l.color,
+            rx: i.value.height / 2
+          }, null, 8, Pe)
+        ], 8, Te))
+      ], 44, Fe))), 256)),
+      t.$slots.source ? (r(), u("div", Oe, [
+        D(t.$slots, "source")
+      ], 512)) : f("", !0),
+      o(C) ? (r(), ve(De, { key: 3 })) : f("", !0)
+    ], 4));
+  }
+}, qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Me
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Me as _,
+  qe as a,
+  Ge as v
+};

package/dist/vue-ui-sparkgauge-Cq9Nw_xu.js

@@ -0,0 +1,260 @@
+import { defineAsyncComponent as K, ref as p, toRefs as Q, onMounted as F, computed as n, watch as z, createElementBlock as i, openBlock as r, normalizeStyle as y, createCommentVNode as f, createBlock as W, toDisplayString as k, unref as u, createVNode as Z, createElementVNode as g, renderSlot as M, normalizeClass as ee } from "vue";
+import { u as te, a as C } from "./useNestedProp-CWo6bftQ.js";
+import { c as ae, t as le, o as oe, g as N, k as se, ai as ne, X as re, a as ue, M as A, d as ie } from "./lib-C5BH09_g.js";
+import { u as ce, B as ve } from "./BaseScanner-BgWxam9d.js";
+import { u as de } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as fe } from "./useChartAccessibility-9icAAmYg.js";
+const E = { style: { background: "#1A1A1A", title: { color: "#CCCCCC" }, dataLabel: { color: "#CCCCCC" }, gutter: { color: "#3A3A3A" } } }, O = { style: { background: "#FFF8E1", title: { color: "#424242" }, dataLabel: { color: "#424242" }, colors: { min: "#F57C00", max: "#D32F2F" }, gutter: { color: "#5D403740" } } }, j = { style: { background: "#1E1E1E", title: { color: "#BDBDBD" }, dataLabel: { color: "#BDBDBD" }, colors: { min: "#F57C00", max: "#D32F2F" }, gutter: { color: "#5D403740" } } }, T = { style: { background: "#1A1A1A", title: { color: "#66CC66" }, dataLabel: { color: "#AACCAA" }, colors: { min: "#334C33", max: "#33CC33" }, track: { color: "#33CC33" }, gutter: { color: "#333333" } } }, I = { style: { background: "#fbfafa", title: { color: "#8A9892" }, dataLabel: { color: "#A0AC94" }, colors: { min: "#C09E85", max: "#B9B99D" }, track: { color: "#B9B99D" }, gutter: { color: "#f5f0eb" } } }, P = { style: { background: "#f6f6fb", title: { color: "#50606C" }, dataLabel: { color: "#61747E" }, colors: { min: "#92B0AB", max: "#4A6A75" }, track: { color: "#4A6A75" }, gutter: { color: "#e1e5e8" } } }, R = {
+  default: {},
+  dark: E,
+  celebration: O,
+  celebrationNight: j,
+  hack: T,
+  zen: I,
+  concrete: P
+}, ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: O,
+  celebrationNight: j,
+  concrete: P,
+  dark: E,
+  default: R,
+  hack: T,
+  zen: I
+}, Symbol.toStringTag, { value: "Module" })), ge = ["xmlns", "viewBox"], me = ["width", "height"], ye = ["id"], be = ["stop-color"], he = ["stop-color"], pe = ["d", "stroke", "stroke-linecap"], ke = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], Ce = ["x", "y", "width", "height"], Ae = ["x", "y", "font-size", "fill", "font-weight"], _e = {
+  key: 2,
+  ref: "source",
+  dir: "auto"
+}, xe = {
+  __name: "vue-ui-sparkgauge",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(U) {
+    const G = K(() => import("./PackageVersion-Bq_mtsqr.js")), { vue_ui_sparkgauge: V } = te(), { isThemeValid: q, warnInvalidTheme: X } = de(), c = U, _ = p(ae()), e = p(h()), { loading: b, FINAL_DATASET: v } = ce({
+      ...Q(c),
+      FINAL_CONFIG: e,
+      prepareConfig: h,
+      skeletonDataset: {
+        value: 0,
+        min: -1,
+        max: 1,
+        title: ""
+      },
+      skeletonConfig: le({
+        defaultConfig: e.value,
+        userConfig: {
+          style: {
+            animation: { show: !1 },
+            background: "#99999930",
+            colors: {
+              min: "#CACACA",
+              max: "#6A6A6A"
+            },
+            track: {
+              autoColor: !0
+            },
+            gutter: {
+              color: "#6A6A6A80"
+            }
+          }
+        }
+      })
+    }), { svgRef: Y } = fe({ config: { text: c.dataset?.title || "" } });
+    function h() {
+      const t = C({
+        userConfig: c.config,
+        defaultConfig: V
+      }), o = t.theme;
+      if (!o) return t;
+      if (!q.value(t))
+        return X(t), t;
+      const d = C({
+        userConfig: R[o] || c.config,
+        defaultConfig: t
+      });
+      return C({
+        userConfig: c.config,
+        defaultConfig: d
+      });
+    }
+    F(() => {
+      w();
+    });
+    const x = n(() => e.value.debug);
+    function w() {
+      oe(c.dataset) ? N({
+        componentName: "VueUiSparkgauge",
+        type: "dataset",
+        debug: x.value
+      }) : se({
+        datasetObject: c.dataset,
+        requiredAttributes: ["value", "min", "max"]
+      }).forEach((t) => {
+        N({
+          componentName: "VueUiSparkgauge",
+          type: "datasetAttribute",
+          property: t,
+          debug: x.value
+        });
+      });
+    }
+    z(() => c.config, (t) => {
+      e.value = h(), a.value = e.value.style.animation.show ? s.value.min : v.value.value, w();
+    }, { deep: !0 });
+    const l = n(() => ({
+      height: e.value.style.height,
+      width: 128,
+      base: e.value.style.basePosition
+    })), s = n(() => {
+      const t = v.value.min ?? 0, o = v.value.max ?? 0, d = o - t;
+      return {
+        min: t,
+        max: o,
+        diff: d
+      };
+    }), a = p(e.value.style.animation.show ? s.value.min : v.value.value);
+    z(() => v.value.value, () => {
+      $(v.value.value || 0);
+    });
+    const H = n(() => a.value > s.value.max ? s.value.max : a.value < s.value.min ? s.value.min : a.value), L = n(() => s.value.diff / e.value.style.animation.speedMs);
+    F(() => {
+      $(v.value.value || 0);
+    });
+    function $(t) {
+      function o() {
+        a.value < t ? a.value = Math.min(a.value + L.value, t) : a.value > t && (a.value = Math.max(a.value - L.value, t)), a.value !== t && requestAnimationFrame(o);
+      }
+      o();
+    }
+    const m = n(() => v.value.title ?? ""), S = n(() => {
+      const t = s.value.diff;
+      if (!isFinite(t) || t === 0) return 0;
+      const o = s.value.min, d = H.value;
+      return d >= 0 ? (d - o) / t : (Math.abs(o) - Math.abs(d)) / t;
+    }), B = n(() => ne(e.value.style.colors.min, e.value.style.colors.max, s.value.min, s.value.max, a.value)), D = n(() => e.value.style.dataLabel.autoColor ? B.value : e.value.style.dataLabel.color), J = n(() => e.value.style.track.autoColor ? B.value : e.value.style.track.color);
+    return (t, o) => (r(), i("div", {
+      class: "vue-data-ui-component vue-ui-sparkgauge",
+      style: y(`font-family:${e.value.style.fontFamily};width: 100%; background:${e.value.style.background}`)
+    }, [
+      e.value.style.title.show && m.value && e.value.style.title.position === "top" ? (r(), i("div", {
+        key: 0,
+        class: "vue-data-ui-sparkgauge-label",
+        style: y(`font-size:${e.value.style.title.fontSize}px;text-align:${e.value.style.title.textAlign};font-weight:${e.value.style.title.bold ? "bold" : "normal"};color:${e.value.style.title.color}`)
+      }, k(m.value), 5)) : f("", !0),
+      (r(), i("svg", {
+        ref_key: "svgRef",
+        ref: Y,
+        xmlns: u(re),
+        viewBox: `0 0 ${l.value.width} ${l.value.height}`,
+        style: "overflow: visible; background:transparent; width:100%;"
+      }, [
+        Z(u(G)),
+        t.$slots["chart-background"] && !u(b) ? (r(), i("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: l.value.width,
+          height: l.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          M(t.$slots, "chart-background")
+        ], 8, me)) : f("", !0),
+        g("defs", null, [
+          g("linearGradient", {
+            id: `gradient_${_.value}`,
+            x1: "-10%",
+            y1: "100%",
+            x2: "110%",
+            y2: "100%"
+          }, [
+            g("stop", {
+              offset: "0%",
+              "stop-color": e.value.style.colors.min
+            }, null, 8, be),
+            g("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.colors.max
+            }, null, 8, he)
+          ], 8, ye)
+        ]),
+        g("path", {
+          d: `M10 ${l.value.base} A 1 1 0 1 1 118 ${l.value.base}`,
+          stroke: e.value.style.gutter.color,
+          "stroke-width": 8,
+          "stroke-linecap": e.value.style.gutter.strokeLinecap,
+          fill: "none"
+        }, null, 8, pe),
+        S.value !== 0 ? (r(), i("path", {
+          key: 1,
+          d: `M10 ${l.value.base} A 1 1 0 1 1 118 ${l.value.base}`,
+          stroke: e.value.style.colors.showGradient ? `url(#gradient_${_.value})` : J.value,
+          "stroke-width": 8,
+          "stroke-linecap": e.value.style.track.strokeLinecap,
+          fill: "none",
+          "stroke-dasharray": 169.5,
+          "stroke-dashoffset": 169.5 - 169.5 * S.value,
+          class: ee({ "vue-ui-sparkgauge-track": e.value.style.animation.show }),
+          style: y(e.value.style.animation.show ? `animation: vue-ui-sparkgauge-animation ${e.value.style.animation.speedMs}ms ease-in;` : "")
+        }, null, 14, ke)) : f("", !0),
+        u(b) ? (r(), i("rect", {
+          key: 2,
+          x: l.value.width / 2 - e.value.style.dataLabel.fontSize / 2,
+          y: l.value.base + 6 + e.value.style.dataLabel.offsetY - e.value.style.dataLabel.fontSize,
+          width: e.value.style.dataLabel.fontSize,
+          height: e.value.style.dataLabel.fontSize,
+          fill: "#6A6A6A50",
+          rx: 3
+        }, null, 8, Ce)) : (r(), i("text", {
+          key: 3,
+          "text-anchor": "middle",
+          x: l.value.width / 2,
+          y: l.value.base + 6 + e.value.style.dataLabel.offsetY,
+          "font-size": e.value.style.dataLabel.fontSize,
+          fill: D.value,
+          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
+        }, k(u(ue)(
+          e.value.style.dataLabel.formatter,
+          u(A)(a.value),
+          u(ie)({
+            p: e.value.style.dataLabel.prefix,
+            v: u(A)(a.value),
+            s: e.value.style.dataLabel.suffix,
+            r: e.value.style.dataLabel.rounding
+          }),
+          { datapoint: u(A)(a.value), color: D.value }
+        )), 9, Ae))
+      ], 8, ge)),
+      e.value.style.title.show && m.value && e.value.style.title.position === "bottom" ? (r(), i("div", {
+        key: 1,
+        class: "vue-data-ui-sparkgauge-label",
+        style: y(`font-size:${e.value.style.title.fontSize}px;text-align:${e.value.style.title.textAlign};font-weight:${e.value.style.title.bold ? "bold" : "normal"};font-weight:${e.value.style.title.bold ? "bold" : "normal"};color:${e.value.style.title.color}`)
+      }, k(m.value), 5)) : f("", !0),
+      t.$slots.source ? (r(), i("div", _e, [
+        M(t.$slots, "source")
+      ], 512)) : f("", !0),
+      u(b) ? (r(), W(ve, { key: 3 })) : f("", !0)
+    ], 4));
+  }
+}, Me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: xe
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  xe as _,
+  Me as a,
+  ze as v
+};