vue-data-ui 3.15.12 → 3.16.1

package/dist/{vue-ui-sparkbar-DUDWvTo-.js → vue-ui-sparkbar-BbYj56c3.js}

@@ -1,18 +1,19 @@
-import { defineAsyncComponent as ae, useSlots as oe, onMounted as P, ref as k, computed as x, toRefs as ne, watch as B, nextTick as se, openBlock as s, createElementBlock as i, normalizeStyle as d, unref as o, renderSlot as $, normalizeProps as ue, mergeProps as E, createCommentVNode as f, createElementVNode as v, toDisplayString as g, Fragment as V, renderList as ie, createVNode as re, createBlock as ve } from "vue";
-import { j as ce, t as M, m as de, p as w, n as pe, o as fe, q as O, r as ge, s as me, u as D, k as _, l as A, X as ye, v as he } from "./lib-GwPnJSrY.js";
-import { u as ke } from "./useConfig-CIgyKZ6R.js";
-import { u as xe, B as be } from "./BaseScanner-BhhkKVoj.js";
-import { u as I } from "./useNestedProp-BBT0mbHh.js";
-import { u as Ce } from "./useThemeCheck-D1ZYXUwG.js";
-import we from "./vue_ui_sparkbar-BsMzz5Um.js";
-const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
+import { defineAsyncComponent as oe, useSlots as ne, onMounted as M, ref as k, computed as x, toRefs as se, watch as B, nextTick as ue, openBlock as s, createElementBlock as i, normalizeStyle as d, unref as o, renderSlot as $, normalizeProps as ie, mergeProps as E, createCommentVNode as p, createElementVNode as v, toDisplayString as g, Fragment as V, renderList as re, createVNode as ve, createBlock as ce } from "vue";
+import { j as de, t as O, m as fe, p as w, n as pe, o as ge, q as j, r as me, s as ye, u as D, k as _, l as A, X as he, v as ke } from "./lib-DBptbyyI.js";
+import { u as xe } from "./useConfig-DO94Aj5s.js";
+import { u as be, B as Ce } from "./BaseScanner-BhhkKVoj.js";
+import { u as I } from "./useNestedProp-Bf5XFbs8.js";
+import { u as we } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as _e } from "./usePrefersMotion-CUKm8_t8.js";
+import Ae from "./vue_ui_sparkbar-BsMzz5Um.js";
+const Se = ["onClick", "onMouseenter", "onMouseleave"], $e = {
   key: 1,
   class: "vue-ui-sparkbar-datapoint-value"
-}, Se = ["xmlns", "viewBox"], $e = ["id"], De = ["stop-color"], Ie = ["stop-color"], Te = ["height", "width", "fill", "rx"], Le = ["height", "width", "fill", "rx"], ze = ["height", "width", "fill", "rx"], Ne = {
+}, De = ["xmlns", "viewBox"], Ie = ["id"], Te = ["stop-color"], Le = ["stop-color"], ze = ["height", "width", "fill", "rx"], Ne = ["height", "width", "fill", "rx"], Pe = ["height", "width", "fill", "rx"], Fe = {
   key: 2,
   ref: "source",
   dir: "auto"
-}, je = {
+}, We = {
   __name: "vue-ui-sparkbar",
   props: {
     config: {
@@ -36,12 +37,12 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
     }
   },
   emits: ["selectDatapoint"],
-  setup(j, { emit: U }) {
-    const R = ae(() => import("./PackageVersion-DN9d0ME5.js")), { vue_ui_sparkbar: W } = ke(), { isThemeValid: q, warnInvalidTheme: G } = Ce(), p = j, H = oe();
-    P(() => {
-      H["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
+  setup(R, { emit: U }) {
+    const W = oe(() => import("./PackageVersion-DPO-OOVI.js")), { vue_ui_sparkbar: q } = xe(), { isThemeValid: G, warnInvalidTheme: H } = we(), T = _e(), f = R, X = ne();
+    M(() => {
+      X["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
     });
-    const T = k(ce()), e = k(S()), X = x(() => M({
+    const L = k(de()), e = k(S()), J = x(() => O({
       defaultConfig: {
         style: {
           backgroundColor: "#99999930",
@@ -59,62 +60,62 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
         }
       },
       userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: b, FINAL_DATASET: c } = xe({
-      ...ne(p),
+    })), { loading: b, FINAL_DATASET: c } = be({
+      ...se(f),
       FINAL_CONFIG: e,
       prepareConfig: S,
-      skeletonDataset: p.config?.skeletonDataset ?? [
+      skeletonDataset: f.config?.skeletonDataset ?? [
         { name: "_", value: 21, target: 25, color: "#808080" },
         { name: "_", value: 13, target: 25, color: "#ADADAD" },
         { name: "_", value: 8, target: 25, color: "#DBDBDB" }
       ],
-      skeletonConfig: M({
+      skeletonConfig: O({
         defaultConfig: e.value,
-        userConfig: X.value
+        userConfig: J.value
       })
-    }), L = x(() => !!e.value.debug);
+    }), z = x(() => !!e.value.debug);
     function S() {
       const t = I({
-        userConfig: p.config,
-        defaultConfig: W
+        userConfig: f.config,
+        defaultConfig: q
       }), a = t.theme;
       if (!a) return t;
-      if (!q.value(t))
-        return G(t), t;
+      if (!G.value(t))
+        return H(t), t;
       const l = I({
-        userConfig: we[a] || p.config,
+        userConfig: Ae[a] || f.config,
         defaultConfig: t
       }), n = I({
-        userConfig: p.config,
+        userConfig: f.config,
         defaultConfig: l
       });
       return {
         ...n,
-        customPalette: n.customPalette.length ? n.customPalette : de[a] || w
+        customPalette: n.customPalette.length ? n.customPalette : fe[a] || w
       };
     }
-    B(() => p.config, (t) => {
+    B(() => f.config, (t) => {
       e.value = S();
     }, { deep: !0 });
-    const J = x(() => pe(e.value.customPalette)), m = k(c.value.map((t) => ({
+    const K = x(() => pe(e.value.customPalette)), m = k(c.value.map((t) => ({
       ...t,
       value: e.value.style.animation.show ? 0 : t.value || 0,
       formatter: t.formatter || null
-    }))), z = k(null);
-    P(async () => {
-      fe(p.dataset) && O({
+    }))), N = k(null);
+    M(async () => {
+      ge(f.dataset) && j({
         componentName: "VueUiSparkbar",
         type: "dataset",
-        debug: L.value
-      }), N();
+        debug: z.value
+      }), P();
     });
-    function N() {
-      if (e.value.style.animation.show) {
+    function P() {
+      if (e.value.style.animation.show && !T.value) {
         let h = function() {
           n += l / t, n < l ? (m.value = m.value.map((u, C) => ({
             ...u,
             value: u.value += a[C]
-          })), z.value = requestAnimationFrame(h)) : m.value = c.value.map((u) => ({
+          })), N.value = requestAnimationFrame(h)) : m.value = c.value.map((u) => ({
             ...u,
             value: u.value || 0,
             formatter: u.formatter || null
@@ -126,50 +127,50 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
       }
     }
     B(() => c.value, async (t) => {
-      cancelAnimationFrame(z.value), m.value = c.value.map((a) => ({
+      cancelAnimationFrame(N.value), m.value = c.value.map((a) => ({
         ...a,
-        value: e.value.style.animation.show ? 0 : a.value || 0,
+        value: e.value.style.animation.show && !T.value ? 0 : a.value || 0,
         formatter: a.formatter || null
-      })), se(N);
+      })), ue(P);
     }, { deep: !0 });
     const r = k({
       width: 500,
       height: 16
-    }), K = x(() => Math.max(...c.value.map((t) => t.value))), Q = x(() => (c.value.forEach((t, a) => {
-      ge({
+    }), Q = x(() => Math.max(...c.value.map((t) => t.value))), Y = x(() => (c.value.forEach((t, a) => {
+      me({
         datasetObject: t,
         requiredAttributes: ["name", "value"]
       }).forEach((l) => {
-        O({
+        j({
           componentName: "VueUiSparkbar",
           type: "datasetSerieAttribute",
           property: l,
           index: a,
-          debug: L.value
+          debug: z.value
         });
       });
     }), m.value.map((t, a) => ({
       ...t,
       value: t.value || 0,
-      color: me(t.color) || J.value[a] || w[a] || w[a % w.length]
+      color: ye(t.color) || K.value[a] || w[a] || w[a % w.length]
     }))));
-    function Y(t) {
-      return t / K.value;
+    function Z(t) {
+      return t / Q.value;
     }
     function F(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 : Y(t.value);
+      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 : Z(t.value);
     }
     function y(t) {
       return e.value.style.layout.independant && t.target || e.value.style.layout.target;
     }
-    const Z = U;
-    function ee(t, a) {
-      Z("selectDatapoint", { datapoint: t, index: a }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
-    }
+    const ee = U;
     function te(t, a) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
+      ee("selectDatapoint", { datapoint: t, index: a }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
     }
     function le(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
+    }
+    function ae(t, a) {
       e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
     }
     return (t, a) => (s(), i("div", {
@@ -178,10 +179,10 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
         width: "100%",
         position: "relative",
         fontFamily: e.value.style.fontFamily,
-        background: p.backgroundOpacity !== null ? o(D)(e.value.style.backgroundColor, p.backgroundOpacity) : e.value.style.backgroundColor
+        background: f.backgroundOpacity !== null ? o(D)(e.value.style.backgroundColor, f.backgroundOpacity) : e.value.style.backgroundColor
       })
     }, [
-      t.$slots.title ? $(t.$slots, "title", ue(E({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : f("", !0),
+      t.$slots.title ? $(t.$slots, "title", ie(E({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : p("", !0),
       !t.$slots.title && e.value.style.title.text ? (s(), i("div", {
         key: 1,
         class: "vue-ui-sparkbar-title-container",
@@ -207,15 +208,15 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
             color: e.value.style.title.subtitle.color,
             fontWeight: e.value.style.title.subtitle.bold ? "bold" : "normal"
           })
-        }, g(e.value.style.title.subtitle.text), 5)) : f("", !0)
-      ], 4)) : f("", !0),
-      (s(!0), i(V, null, ie(Q.value, (l, n) => (s(), i("div", {
+        }, g(e.value.style.title.subtitle.text), 5)) : p("", !0)
+      ], 4)) : p("", !0),
+      (s(!0), i(V, null, re(Y.value, (l, n) => (s(), i("div", {
         style: d(`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(c).length > 0 && n !== o(c).length - 1 ? "margin-bottom:6px" : ""}`),
-        onClick: (h) => ee(l, n),
-        onMouseenter: (h) => te(l, n),
-        onMouseleave: (h) => le(l, n)
+        onClick: (h) => te(l, n),
+        onMouseenter: (h) => le(l, n),
+        onMouseleave: (h) => ae(l, n)
       }, [
-        o(b) ? f("", !0) : $(t.$slots, "data-label", E({
+        o(b) ? p("", !0) : $(t.$slots, "data-label", E({
           key: 0,
           ref_for: !0
         }, { bar: {
@@ -292,8 +293,8 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
                 r: l.rounding || 0
               }),
               { datapoint: l, seriesIndex: n }
-            )), 5)) : f("", !0),
-            e.value.style.layout.showTargetValue ? (s(), i("span", Ae, g(" " + e.value.style.layout.targetValueText) + " " + g(o(_)(
+            )), 5)) : p("", !0),
+            e.value.style.layout.showTargetValue ? (s(), i("span", $e, g(" " + e.value.style.layout.targetValueText) + " " + g(o(_)(
               l.formatter,
               y(l),
               o(A)({
@@ -303,32 +304,33 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
                 r: l.rounding || 0
               }),
               { datapoint: l, seriesIndex: n }
-            )), 1)) : f("", !0)
+            )), 1)) : p("", !0)
           ], 64))
-        ], 4)) : f("", !0),
+        ], 4)) : p("", !0),
         (s(), i("svg", {
-          xmlns: o(ye),
+          role: "img",
+          xmlns: o(he),
           viewBox: `0 0 ${r.value.width} ${r.value.height}`,
           width: "100%"
         }, [
-          re(o(R)),
+          ve(o(W)),
           v("defs", null, [
             v("linearGradient", {
               x1: "0%",
               y1: "0%",
               x2: "100%",
               y2: "0%",
-              id: `sparkbar_gradient_${n}_${T.value}`
+              id: `sparkbar_gradient_${n}_${L.value}`
             }, [
               v("stop", {
                 offset: "0%",
-                "stop-color": o(D)(o(he)(l.color, 0.03), 100 - e.value.style.bar.gradient.intensity)
-              }, null, 8, De),
+                "stop-color": o(D)(o(ke)(l.color, 0.03), 100 - e.value.style.bar.gradient.intensity)
+              }, null, 8, Te),
               v("stop", {
                 offset: "100%",
                 "stop-color": l.color
-              }, null, 8, Ie)
-            ], 8, $e)
+              }, null, 8, Le)
+            ], 8, Ie)
           ]),
           v("rect", {
             height: r.value.height,
@@ -337,7 +339,7 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
             y: 0,
             fill: o(D)(e.value.style.gutter.backgroundColor, e.value.style.gutter.opacity),
             rx: r.value.height / 2
-          }, null, 8, Te),
+          }, null, 8, ze),
           v("rect", {
             height: r.value.height,
             width: r.value.width * F(l),
@@ -345,24 +347,24 @@ const _e = ["onClick", "onMouseenter", "onMouseleave"], Ae = {
             y: 0,
             fill: e.value.style.bar.gradient.underlayerColor,
             rx: r.value.height / 2
-          }, null, 8, Le),
+          }, null, 8, Ne),
           v("rect", {
             height: r.value.height,
             width: r.value.width * F(l),
             x: 0,
             y: 0,
-            fill: e.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${n}_${T.value})` : l.color,
+            fill: e.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${n}_${L.value})` : l.color,
             rx: r.value.height / 2
-          }, null, 8, ze)
-        ], 8, Se))
-      ], 44, _e))), 256)),
-      t.$slots.source ? (s(), i("div", Ne, [
+          }, null, 8, Pe)
+        ], 8, De))
+      ], 44, Se))), 256)),
+      t.$slots.source ? (s(), i("div", Fe, [
         $(t.$slots, "source")
-      ], 512)) : f("", !0),
-      o(b) ? (s(), ve(be, { key: 3 })) : f("", !0)
+      ], 512)) : p("", !0),
+      o(b) ? (s(), ce(Ce, { key: 3 })) : p("", !0)
     ], 4));
   }
 };
 export {
-  je as default
+  We as default
 };

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

@@ -0,0 +1,256 @@
+import { defineAsyncComponent as H, ref as p, computed as s, toRefs as K, onMounted as D, watch as E, onBeforeUnmount as J, openBlock as i, createElementBlock as c, normalizeStyle as b, toDisplayString as x, createCommentVNode as m, unref as r, createVNode as Q, renderSlot as A, createElementVNode as g, normalizeClass as W, createBlock as Z } from "vue";
+import { u as w } from "./useNestedProp-Bf5XFbs8.js";
+import { j as ee, t as I, o as te, q as R, r as ae, ao as le, X as oe, k as se, K as _, l as ne } from "./lib-DBptbyyI.js";
+import { u as ue } from "./useConfig-DO94Aj5s.js";
+import { u as ie, B as re } from "./BaseScanner-BhhkKVoj.js";
+import { u as ve } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as ce } from "./useChartAccessibility-9icAAmYg.js";
+import { u as fe } from "./usePrefersMotion-CUKm8_t8.js";
+import de from "./vue_ui_sparkgauge-KnjASOZs.js";
+const me = ["xmlns", "viewBox"], ge = ["width", "height"], ye = ["id"], he = ["stop-color"], pe = ["stop-color"], be = ["d", "stroke", "stroke-linecap"], ke = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], Ce = ["x", "y", "width", "height"], xe = ["x", "y", "font-size", "fill", "font-weight"], Ae = {
+  key: 2,
+  ref: "source",
+  dir: "auto"
+}, De = {
+  __name: "vue-ui-sparkgauge",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(T) {
+    const j = H(() => import("./PackageVersion-DPO-OOVI.js")), { vue_ui_sparkgauge: O } = ue(), { isThemeValid: U, warnInvalidTheme: G } = ve(), P = fe(), f = p(null), v = T, $ = p(ee()), e = p(C()), y = s(() => e.value.style.animation.show && !P.value), q = s(() => I({
+      defaultConfig: {
+        style: {
+          animation: { show: !1 },
+          background: "#99999930",
+          colors: {
+            min: "#CACACA",
+            max: "#6A6A6A"
+          },
+          track: {
+            autoColor: !0
+          },
+          gutter: {
+            color: "#6A6A6A80"
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: k, FINAL_DATASET: d } = ie({
+      ...K(v),
+      FINAL_CONFIG: e,
+      prepareConfig: C,
+      skeletonDataset: v.config?.skeletonDataset ?? {
+        value: 0,
+        min: -1,
+        max: 1,
+        title: ""
+      },
+      skeletonConfig: I({
+        defaultConfig: e.value,
+        userConfig: q.value
+      })
+    }), n = s(() => {
+      const t = d.value.min ?? 0, l = d.value.max ?? 0, u = l - t;
+      return {
+        min: t,
+        max: l,
+        diff: u
+      };
+    }), L = s(() => n.value.diff / e.value.style.animation.speedMs), { svgRef: V } = ce({ config: { text: v.dataset?.title || "" } });
+    function C() {
+      const t = w({
+        userConfig: v.config,
+        defaultConfig: O
+      }), l = t.theme;
+      if (!l) return t;
+      if (!U.value(t))
+        return G(t), t;
+      const u = w({
+        userConfig: de[l] || v.config,
+        defaultConfig: t
+      });
+      return w({
+        userConfig: v.config,
+        defaultConfig: u
+      });
+    }
+    D(() => {
+      z();
+    });
+    const S = s(() => e.value.debug);
+    function z() {
+      te(v.dataset) ? R({
+        componentName: "VueUiSparkgauge",
+        type: "dataset",
+        debug: S.value
+      }) : ae({
+        datasetObject: v.dataset,
+        requiredAttributes: ["value", "min", "max"]
+      }).forEach((t) => {
+        R({
+          componentName: "VueUiSparkgauge",
+          type: "datasetAttribute",
+          property: t,
+          debug: S.value
+        });
+      });
+    }
+    E(() => v.config, () => {
+      e.value = C(), a.value = y.value ? n.value.min : d.value.value, z();
+    }, { deep: !0 });
+    const o = s(() => ({
+      height: e.value.style.height,
+      width: 128,
+      base: e.value.style.basePosition
+    })), a = p(y.value ? n.value.min : d.value.value);
+    E(
+      [() => d.value.value, y],
+      ([t, l]) => {
+        M(t || 0, l);
+      },
+      { immediate: !0 }
+    );
+    const X = s(() => a.value > n.value.max ? n.value.max : a.value < n.value.min ? n.value.min : a.value);
+    D(() => {
+      M(d.value.value || 0);
+    });
+    function M(t, l = y.value) {
+      if (f.value && (cancelAnimationFrame(f.value), f.value = null), !l) {
+        a.value = t;
+        return;
+      }
+      function u() {
+        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 ? f.value = requestAnimationFrame(u) : f.value = null;
+      }
+      u();
+    }
+    const h = s(() => d.value.title ?? ""), N = s(() => {
+      const t = n.value.diff;
+      if (!isFinite(t) || t === 0) return 0;
+      const l = n.value.min, u = X.value;
+      return u >= 0 ? (u - l) / t : (Math.abs(l) - Math.abs(u)) / t;
+    }), F = s(() => le(e.value.style.colors.min, e.value.style.colors.max, n.value.min, n.value.max, a.value)), B = s(() => e.value.style.dataLabel.autoColor ? F.value : e.value.style.dataLabel.color), Y = s(() => e.value.style.track.autoColor ? F.value : e.value.style.track.color);
+    return J(() => {
+      f.value && cancelAnimationFrame(f.value);
+    }), (t, l) => (i(), c("div", {
+      class: "vue-data-ui-component vue-ui-sparkgauge",
+      style: b(`font-family:${e.value.style.fontFamily};width: 100%; background:${e.value.style.background}`)
+    }, [
+      e.value.style.title.show && h.value && e.value.style.title.position === "top" ? (i(), c("div", {
+        key: 0,
+        class: "vue-data-ui-sparkgauge-label",
+        style: b(`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}`)
+      }, x(h.value), 5)) : m("", !0),
+      (i(), c("svg", {
+        ref_key: "svgRef",
+        ref: V,
+        xmlns: r(oe),
+        viewBox: `0 0 ${o.value.width} ${o.value.height}`,
+        style: "overflow: visible; background:transparent; width:100%;"
+      }, [
+        Q(r(j)),
+        t.$slots["chart-background"] && !r(k) ? (i(), c("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: o.value.width,
+          height: o.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          A(t.$slots, "chart-background")
+        ], 8, ge)) : m("", !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, he),
+            g("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.colors.max
+            }, null, 8, pe)
+          ], 8, ye)
+        ]),
+        g("path", {
+          d: `M10 ${o.value.base} A 1 1 0 1 1 118 ${o.value.base}`,
+          stroke: e.value.style.gutter.color,
+          "stroke-width": 8,
+          "stroke-linecap": e.value.style.gutter.strokeLinecap,
+          fill: "none"
+        }, null, 8, be),
+        N.value !== 0 ? (i(), c("path", {
+          key: 1,
+          d: `M10 ${o.value.base} A 1 1 0 1 1 118 ${o.value.base}`,
+          stroke: e.value.style.colors.showGradient ? `url(#gradient_${$.value})` : Y.value,
+          "stroke-width": 8,
+          "stroke-linecap": e.value.style.track.strokeLinecap,
+          fill: "none",
+          "stroke-dasharray": 169.5,
+          "stroke-dashoffset": 169.5 - 169.5 * N.value,
+          class: W({ "vue-ui-sparkgauge-track": e.value.style.animation.show }),
+          style: b(e.value.style.animation.show ? `animation: vue-ui-sparkgauge-animation ${e.value.style.animation.speedMs}ms ease-in;` : "")
+        }, null, 14, ke)) : m("", !0),
+        r(k) ? (i(), c("rect", {
+          key: 2,
+          x: o.value.width / 2 - e.value.style.dataLabel.fontSize / 2,
+          y: o.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)) : (i(), c("text", {
+          key: 3,
+          "text-anchor": "middle",
+          x: o.value.width / 2,
+          y: o.value.base + 6 + e.value.style.dataLabel.offsetY,
+          "font-size": e.value.style.dataLabel.fontSize,
+          fill: B.value,
+          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
+        }, x(r(se)(
+          e.value.style.dataLabel.formatter,
+          r(_)(a.value),
+          r(ne)({
+            p: e.value.style.dataLabel.prefix,
+            v: r(_)(a.value),
+            s: e.value.style.dataLabel.suffix,
+            r: e.value.style.dataLabel.rounding
+          }),
+          { datapoint: r(_)(a.value), color: B.value }
+        )), 9, xe))
+      ], 8, me)),
+      e.value.style.title.show && h.value && e.value.style.title.position === "bottom" ? (i(), c("div", {
+        key: 1,
+        class: "vue-data-ui-sparkgauge-label",
+        style: b(`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}`)
+      }, x(h.value), 5)) : m("", !0),
+      t.$slots.source ? (i(), c("div", Ae, [
+        A(t.$slots, "source")
+      ], 512)) : m("", !0),
+      A(t.$slots, "skeleton", {}, () => [
+        r(k) ? (i(), Z(re, { key: 0 })) : m("", !0)
+      ])
+    ], 4));
+  }
+};
+export {
+  De as default
+};