vue-data-ui 3.0.0-next.9 → 3.0.0

package/dist/vue-ui-spark-trend-D9iNCf4o.js

@@ -0,0 +1,315 @@
+import { defineAsyncComponent as de, ref as f, toRefs as fe, computed as u, watch as X, onMounted as ce, createElementBlock as o, openBlock as s, normalizeStyle as he, createCommentVNode as c, createBlock as ye, unref as r, createVNode as pe, createElementVNode as S, renderSlot as J, toDisplayString as K } from "vue";
+import { u as ge, c as me, t as ke, b as be, a4 as D, o as Q, f as _e, h as y, a5 as we, X as $e, s as O, V as Y, i as ee, k as xe } from "./index-BtNwOUja.js";
+import { t as Le, u as Ce } from "./useResponsive-DfdjqQps.js";
+import { u as Ae, B as Te } from "./useLoading-D7YHNtLX.js";
+import { u as Se } from "./useFitSvgText-2crs6Fv5.js";
+import { u as te } from "./useNestedProp-f2H3m6Yj.js";
+import { _ as Ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ze = ["id"], Me = ["xmlns", "viewBox"], Fe = ["width", "height"], Ie = ["id"], Ee = ["stop-color"], Ve = ["stop-color"], je = { key: 1 }, Be = ["d", "fill"], De = ["d", "fill"], Oe = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], Ge = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], Re = ["d"], Ze = ["fill", "d"], We = ["x", "y", "width", "height"], He = ["x", "y", "fill", "font-size", "font-weight"], Ue = ["stroke", "cx", "cy", "fill"], qe = ["x", "y", "font-size", "fill", "font-weight"], Pe = {
+  __name: "vue-ui-spark-trend",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(le) {
+    const ae = de(() => import("./PackageVersion-CJ6Vd7V5.js")), { vue_ui_spark_trend: ne } = ge(), p = le, N = f(null), G = f(null), R = f(null), _ = f(null), x = f(null), L = f(me()), e = f(z()), { loading: g, FINAL_DATASET: w, manualLoading: Z } = Ae({
+      ...fe(p),
+      FINAL_CONFIG: e,
+      prepareConfig: z,
+      skeletonDataset: [1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233],
+      skeletonConfig: ke({
+        defaultConfig: e.value,
+        userConfig: {
+          style: {
+            animation: { show: !1 },
+            backgroundColor: "#99999930",
+            line: {
+              stroke: "#6A6A6A",
+              useColorTrend: !1
+            },
+            dataLabel: { show: !1, useColorTrend: !1, color: "#6A6A6A" }
+          }
+        }
+      })
+    });
+    function z() {
+      const t = te({
+        userConfig: p.config,
+        defaultConfig: ne
+      });
+      return t.theme ? {
+        ...te({
+          userConfig: be.vue_ui_spark_trend[t.theme] || p.config,
+          defaultConfig: t
+        })
+      } : t;
+    }
+    const m = u(() => D({
+      data: w.value,
+      threshold: e.value.downsample.threshold
+    }));
+    X(() => p.config, (t) => {
+      e.value = z(), I.value = e.value.style.width, k.value = e.value.style.height, H();
+    }, { deep: !0 }), X(() => w.value, (t) => {
+      $.value = D({
+        data: w.value,
+        threshold: e.value.downsample.threshold
+      }).map((a) => [void 0, 1 / 0, -1 / 0, null, NaN].includes(a) ? null : a), W(), j(".vue-ui-sparktrend-progress-label", 6);
+    }, { deep: !0 });
+    function M(t) {
+      return t.map((a) => y(a));
+    }
+    const $ = f(D({
+      data: w.value,
+      threshold: e.value.downsample.threshold
+    }).map((t) => e.value.style.animation.show || [void 0, 1 / 0, -1 / 0, null, NaN].includes(t) ? null : t)), C = f(!1), F = f(null);
+    function W() {
+      let a = 1e3 / e.value.style.animation.animationFrames, d = performance.now();
+      if (!g.value && e.value.style.animation.show && e.value.style.animation.animationFrames && w.value.length > 1) {
+        let B = function() {
+          C.value = !0;
+          let q = performance.now(), P = q - d;
+          P > a ? (d = q - P % a, b < m.value.length ? ($.value.push(m.value[b]), b += 1, F.value = requestAnimationFrame(B)) : (cancelAnimationFrame(F.value), $.value = M(m.value), C.value = !1, j(".vue-ui-sparktrend-progress-label", 6))) : F.value = requestAnimationFrame(B);
+        };
+        $.value = [];
+        let b = 0;
+        B();
+      }
+    }
+    ce(() => {
+      H();
+    });
+    const ue = u(() => e.value.debug);
+    function H() {
+      if (Q(p.dataset) && (_e({
+        componentName: "VueUiSparkTrend",
+        type: "dataset",
+        debug: ue.value
+      }), Z.value = !0), Q(p.dataset) || (Z.value = !1), e.value.responsive) {
+        const t = Le(() => {
+          const { width: a, height: d } = Ce({
+            chart: N.value,
+            source: R.value
+          });
+          requestAnimationFrame(() => {
+            I.value = a, k.value = d;
+          });
+        });
+        _.value && (x.value && _.value.unobserve(x.value), _.value.disconnect()), _.value = new ResizeObserver(t), x.value = N.value.parentNode, _.value.observe(x.value);
+      }
+      W(), j(".vue-ui-sparktrend-progress-label", 6);
+    }
+    const I = f(e.value.style.width), k = f(e.value.style.height), i = u(() => ({
+      height: k.value,
+      width: I.value
+    })), n = u(() => ({
+      top: e.value.style.padding.top,
+      left: e.value.style.padding.left,
+      right: i.value.width - e.value.style.padding.right,
+      bottom: i.value.height - e.value.style.padding.bottom,
+      height: i.value.height - (e.value.style.padding.top + e.value.style.padding.bottom) - (e.value.style.dataLabel.show ? e.value.style.dataLabel.fontSize : 0),
+      width: i.value.width - (e.value.style.padding.left + e.value.style.padding.right)
+    })), E = u(() => {
+      const t = M(m.value);
+      return {
+        max: Math.max(...t.map((a) => y(a))),
+        min: Math.min(...t.map((a) => y(a)))
+      };
+    }), A = u(() => {
+      const t = E.value.min >= 0 ? 0 : E.value.min;
+      return Math.abs(t);
+    }), se = u(() => E.value.max + A.value);
+    function U(t) {
+      return t / se.value;
+    }
+    const oe = u(() => m.value.length), l = u(() => $.value.map((t, a) => {
+      const d = isNaN(t) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t) ? 0 : t || 0;
+      return {
+        value: y(t),
+        absoluteValue: y(d),
+        plotValue: y(d + A.value),
+        toMax: U(d + A.value),
+        x: n.value.left + y(a * (n.value.width / (oe.value - 1))) - e.value.style.padding.right,
+        y: n.value.bottom - y(n.value.height * U(d + A.value))
+      };
+    })), T = u(() => {
+      const t = M(m.value);
+      return e.value.style.trendLabel.trendType === "global" ? we(t) : e.value.style.trendLabel.trendType === "n-1" && t.length > 1 ? (t.at(-1) / t.at(-2) - 1) * 100 : e.value.style.trendLabel.trendType === "lastToFirst" ? (t.at(-1) / t[0] - 1) * 100 : 0;
+    }), V = u(() => C.value || T.value === 0 ? "neutral" : T.value > 0 ? "positive" : "negative"), h = u(() => e.value.style.arrow.colors[V.value]), re = u(() => {
+      const t = { x: l.value[0].x, y: i.value.height - 6 }, a = { x: l.value[l.value.length - 1].x, y: i.value.height - 6 }, d = [];
+      return l.value.forEach((b) => {
+        d.push(`${b.x},${b.y} `);
+      }), [t.x, t.y, ...d, a.x, a.y].toString();
+    }), ie = u(() => {
+      let t = [];
+      return l.value.forEach((a) => {
+        t.push(`${a.x},${a.y} `);
+      }), `M ${t.toString()}`;
+    }), v = u(() => k.value / 2 - e.value.style.trendLabel.fontSize), ve = u(() => n.value.left * 0.8), { fitText: j } = Se({
+      svgRef: G,
+      unitWidth: ve,
+      fontSize: e.value.style.trendLabel.fontSize
+    });
+    return (t, a) => (s(), o("div", {
+      ref_key: "sparkTrendChart",
+      ref: N,
+      class: "vue-ui-spark-trend",
+      id: L.value,
+      style: he(`width:100%;font-family:${e.value.style.fontFamily};background:${e.value.style.backgroundColor}`)
+    }, [
+      (s(), o("svg", {
+        ref_key: "svgRef",
+        ref: G,
+        xmlns: r($e),
+        viewBox: `0 0 ${i.value.width} ${i.value.height}`,
+        style: "width:100%;background:transparent;overflow:visible"
+      }, [
+        pe(r(ae)),
+        t.$slots["chart-background"] ? (s(), o("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: i.value.width <= 0 ? 10 : i.value.width,
+          height: i.value.height <= 0 ? 10 : i.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          J(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Fe)) : c("", !0),
+        S("defs", null, [
+          S("linearGradient", {
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%",
+            id: `pill_gradient_${L.value}`
+          }, [
+            S("stop", {
+              offset: "0%",
+              "stop-color": r(O)(e.value.style.line.useColorTrend ? h.value : e.value.style.line.stroke, e.value.style.area.opacity)
+            }, null, 8, Ee),
+            S("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.backgroundColor
+            }, null, 8, Ve)
+          ], 8, Ie)
+        ]),
+        e.value.style.area.show && l.value[0] ? (s(), o("g", je, [
+          e.value.style.line.smooth ? (s(), o("path", {
+            key: 0,
+            d: `M ${l.value[0].x},${n.value.bottom} ${r(Y)(l.value)} L ${l.value.at(-1).x},${n.value.bottom} Z`,
+            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${L.value})` : r(O)(e.value.style.line.useColorTrend ? h.value : e.value.style.line.stroke, e.value.style.area.opacity),
+            stroke: "none"
+          }, null, 8, Be)) : (s(), o("path", {
+            key: 1,
+            d: `M${re.value}Z`,
+            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${L.value})` : r(O)(e.value.style.line.useColorTrend ? h.value : e.value.style.line.stroke, e.value.style.area.opacity),
+            stroke: "none"
+          }, null, 8, De))
+        ])) : c("", !0),
+        e.value.style.line.smooth && l.value.length ? (s(), o("path", {
+          key: 2,
+          d: `M ${r(Y)(l.value)}`,
+          stroke: e.value.style.line.useColorTrend ? h.value : e.value.style.line.stroke,
+          fill: "none",
+          "stroke-width": e.value.style.line.strokeWidth,
+          "stroke-linecap": e.value.style.line.strokeLinecap,
+          "stroke-linejoin": e.value.style.line.strokeLinejoin
+        }, null, 8, Oe)) : c("", !0),
+        !e.value.style.line.smooth && l.value.length ? (s(), o("path", {
+          key: 3,
+          d: ie.value,
+          stroke: e.value.style.line.useColorTrend ? h.value : e.value.style.line.stroke,
+          fill: "none",
+          "stroke-width": e.value.style.line.strokeWidth,
+          "stroke-linecap": e.value.style.line.strokeLinecap,
+          "stroke-linejoin": e.value.style.line.strokeLinejoin
+        }, null, 8, Ge)) : c("", !0),
+        r(g) ? (s(), o("path", {
+          key: 4,
+          fill: "#6A6A6A",
+          d: `M ${n.value.left / 2 + 6}, ${v.value + 7} ${n.value.left / 2 - 7}, ${v.value} ${n.value.left / 2 - 7}, ${v.value + 14} Z`
+        }, null, 8, Re)) : (s(), o("path", {
+          key: 5,
+          fill: h.value,
+          d: V.value === "positive" ? `M ${n.value.left / 2}, ${v.value} ${n.value.left / 2 - 7}, ${v.value + 12} ${n.value.left / 2 + 7}, ${v.value + 12} Z` : V.value === "negative" ? `M ${n.value.left / 2}, ${v.value + 12} ${n.value.left / 2 - 7}, ${v.value} ${n.value.left / 2 + 7}, ${v.value} Z` : `M ${n.value.left / 2 + 6}, ${v.value + 7} ${n.value.left / 2 - 7}, ${v.value} ${n.value.left / 2 - 7}, ${v.value + 14} Z`
+        }, null, 8, Ze)),
+        r(g) ? (s(), o("rect", {
+          key: 6,
+          x: n.value.left / 2 - e.value.style.trendLabel.fontSize - 2,
+          y: k.value / 2 + e.value.style.trendLabel.fontSize - 2,
+          width: e.value.style.trendLabel.fontSize * 2,
+          height: e.value.style.trendLabel.fontSize,
+          fill: "#6A6A6A80",
+          rx: "3"
+        }, null, 8, We)) : c("", !0),
+        !C.value && !r(g) ? (s(), o("text", {
+          key: 7,
+          class: "vue-ui-sparktrend-progress-label",
+          x: n.value.left / 2,
+          y: k.value / 2 + e.value.style.trendLabel.fontSize * 2,
+          "text-anchor": "middle",
+          fill: e.value.style.trendLabel.useColorTrend ? h.value : e.value.style.trendLabel.color,
+          "font-size": e.value.style.trendLabel.fontSize,
+          "font-weight": e.value.style.trendLabel.bold ? "bold" : "normal"
+        }, K(r(ee)({
+          p: T.value > 0 ? "+" : "",
+          v: T.value,
+          s: "%",
+          r: e.value.style.trendLabel.rounding
+        })), 9, He)) : c("", !0),
+        l.value.length && l.value.at(-1).x !== void 0 ? (s(), o("circle", {
+          key: 8,
+          stroke: e.value.style.backgroundColor,
+          "stroke-width": 2,
+          cx: l.value.at(-1).x,
+          cy: l.value.at(-1).y,
+          r: 4,
+          fill: r(g) ? "#6A6A6A" : h.value
+        }, null, 8, Ue)) : c("", !0),
+        l.value.length && l.value.at(-1).x !== void 0 && e.value.style.dataLabel.show ? (s(), o("text", {
+          key: 9,
+          "text-anchor": "middle",
+          x: l.value.at(-1).x,
+          y: l.value.at(-1).y - e.value.style.dataLabel.fontSize / 1.5,
+          "font-size": e.value.style.dataLabel.fontSize,
+          fill: e.value.style.dataLabel.useColorTrend ? h.value : e.value.style.dataLabel.color,
+          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
+        }, K(r(xe)(
+          e.value.style.dataLabel.formatter,
+          l.value.at(-1).value,
+          r(ee)({
+            p: e.value.style.dataLabel.prefix,
+            v: l.value.at(-1).value,
+            s: e.value.style.dataLabel.suffix,
+            r: e.value.style.dataLabel.rounding
+          }),
+          { datapoint: l.value.at(-1) }
+        )), 9, qe)) : c("", !0)
+      ], 8, Me)),
+      t.$slots.source ? (s(), o("div", {
+        key: 0,
+        ref_key: "source",
+        ref: R,
+        dir: "auto"
+      }, [
+        J(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : c("", !0),
+      r(g) ? (s(), ye(Te, { key: 1 })) : c("", !0)
+    ], 12, ze));
+  }
+}, lt = /* @__PURE__ */ Ne(Pe, [["__scopeId", "data-v-7034e800"]]);
+export {
+  lt as default
+};

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

@@ -0,0 +1,351 @@
+import { defineAsyncComponent as Z, useSlots as ee, onMounted as B, ref as x, toRefs as te, computed as w, watch as E, nextTick as le, createElementBlock as i, openBlock as n, normalizeStyle as d, unref as o, renderSlot as D, createCommentVNode as c, createBlock as ae, normalizeProps as oe, mergeProps as M, createElementVNode as v, toDisplayString as y, Fragment as P, renderList as se, createVNode as ne } from "vue";
+import { u as ue, c as ie, t as re, a as ve, p as C, b as de, d as ce, o as pe, f as V, g as fe, e as ye, s as I, k as _, i as A, X as ge, x as me } from "./index-BtNwOUja.js";
+import { u as O } from "./useNestedProp-f2H3m6Yj.js";
+import { u as he, B as xe } from "./useLoading-D7YHNtLX.js";
+const ke = ["onClick", "onMouseenter", "onMouseleave"], be = { key: 1 }, we = ["xmlns", "viewBox"], Ce = ["id"], _e = ["stop-color"], Ae = ["stop-color"], Se = ["height", "width", "fill", "rx"], $e = ["height", "width", "fill", "rx"], De = ["height", "width", "fill", "rx"], Ie = {
+  key: 2,
+  ref: "source",
+  dir: "auto"
+}, Fe = {
+  __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(S, { emit: j }) {
+    const U = Z(() => import("./PackageVersion-CJ6Vd7V5.js")), { vue_ui_sparkbar: R } = ue(), f = S, W = ee();
+    B(() => {
+      W["chart-background"] && console.warn("VueUiSparkbar does not support the #chart-background slot.");
+    });
+    const L = x(ie()), e = x($()), { loading: k, FINAL_DATASET: p } = he({
+      ...te(f),
+      FINAL_CONFIG: e,
+      prepareConfig: $,
+      skeletonDataset: [
+        { name: "_", value: 21, target: 25, color: "#808080" },
+        { name: "_", value: 13, target: 25, color: "#ADADAD" },
+        { name: "_", value: 8, target: 25, color: "#DBDBDB" }
+      ],
+      skeletonConfig: re({
+        defaultConfig: e.value,
+        userConfig: {
+          style: {
+            backgroundColor: "#99999930",
+            animation: { show: !1 },
+            layout: { independant: !0 },
+            gutter: {
+              backgroundColor: "#6A6A6A",
+              opacity: 50
+            },
+            bar: {
+              gradient: {
+                underlayerColor: "#6A6A6A"
+              }
+            }
+          }
+        }
+      })
+    }), T = w(() => !!e.value.debug);
+    function $() {
+      const t = O({
+        userConfig: f.config,
+        defaultConfig: R
+      });
+      return t.theme ? {
+        ...O({
+          userConfig: de.vue_ui_sparkbar[t.theme] || f.config,
+          defaultConfig: t
+        }),
+        customPalette: ve[t.theme] || C
+      } : t;
+    }
+    E(() => f.config, (t) => {
+      e.value = $();
+    }, { deep: !0 });
+    const G = w(() => ce(e.value.customPalette)), g = x(p.value.map((t) => ({
+      ...t,
+      value: e.value.style.animation.show ? 0 : t.value || 0,
+      formatter: t.formatter || null
+    }))), z = x(null);
+    B(async () => {
+      pe(f.dataset) && V({
+        componentName: "VueUiSparkbar",
+        type: "dataset",
+        debug: T.value
+      }), N();
+    });
+    function N() {
+      if (e.value.style.animation.show) {
+        let h = function() {
+          s += l / t, s < l ? (g.value = g.value.map((u, b) => ({
+            ...u,
+            value: u.value += a[b]
+          })), z.value = requestAnimationFrame(h)) : g.value = p.value.map((u) => ({
+            ...u,
+            value: u.value || 0,
+            formatter: u.formatter || null
+          }));
+        };
+        const t = e.value.style.animation.animationFrames, a = p.value.map((u, b) => u.value / t), l = p.value.map((u) => u.value || 0).reduce((u, b) => u + b, 0);
+        let s = 0;
+        h();
+      }
+    }
+    E(() => p.value, async (t) => {
+      cancelAnimationFrame(z.value), g.value = p.value.map((a) => ({
+        ...a,
+        value: e.value.style.animation.show ? 0 : a.value || 0,
+        formatter: a.formatter || null
+      })), le(N);
+    }, { deep: !0 });
+    const r = x({
+      width: 500,
+      height: 16
+    }), q = w(() => Math.max(...p.value.map((t) => t.value))), H = w(() => (p.value.forEach((t, a) => {
+      fe({
+        datasetObject: t,
+        requiredAttributes: ["name", "value"]
+      }).forEach((l) => {
+        V({
+          componentName: "VueUiSparkbar",
+          type: "datasetSerieAttribute",
+          property: l,
+          index: a,
+          debug: T.value
+        });
+      });
+    }), g.value.map((t, a) => ({
+      ...t,
+      value: t.value || 0,
+      color: ye(t.color) || G.value[a] || C[a] || C[a % C.length]
+    }))));
+    function X(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 : X(t.value);
+    }
+    function m(t) {
+      return e.value.style.layout.independant && t.target || e.value.style.layout.target;
+    }
+    const J = j;
+    function K(t, a) {
+      J("selectDatapoint", { datapoint: t, index: a }), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    }
+    function Q(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a });
+    }
+    function Y(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }
+    return (t, a) => (n(), i("div", {
+      class: "vue-ui-sparkbar",
+      style: d({
+        width: "100%",
+        position: "relative",
+        fontFamily: e.value.style.fontFamily,
+        background: f.backgroundOpacity !== null ? o(I)(e.value.style.backgroundColor, f.backgroundOpacity) : e.value.style.backgroundColor
+      })
+    }, [
+      t.$slots.title ? D(t.$slots, "title", oe(M({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : c("", !0),
+      !t.$slots.title && e.value.style.title.text ? (n(), i("div", {
+        key: 1,
+        class: "vue-ui-sparkbar-title-container",
+        style: d({
+          background: e.value.style.title.backgroundColor,
+          margin: e.value.style.title.margin,
+          textAlign: e.value.style.title.textAlign
+        })
+      }, [
+        v("div", {
+          class: "vue-ui-sparkbar-title",
+          style: d({
+            fontSize: e.value.style.title.fontSize + "px",
+            color: e.value.style.title.color,
+            fontWeight: e.value.style.title.bold ? "bold" : "normal"
+          })
+        }, y(e.value.style.title.text), 5),
+        e.value.style.title.subtitle.text ? (n(), i("div", {
+          key: 0,
+          class: "vue-ui-sparkbar-subtitle",
+          style: d({
+            fontSize: e.value.style.title.subtitle.fontSize + "px",
+            color: e.value.style.title.subtitle.color,
+            fontWeight: e.value.style.title.subtitle.bold ? "bold" : "normal"
+          })
+        }, y(e.value.style.title.subtitle.text), 5)) : c("", !0)
+      ], 4)) : c("", !0),
+      (n(!0), i(P, null, se(H.value, (l, s) => (n(), 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;${S.dataset.length > 0 && s !== S.dataset.length - 1 ? "margin-bottom:6px" : ""}`),
+        onClick: (h) => K(l, s),
+        onMouseenter: (h) => Q(l, s),
+        onMouseleave: (h) => Y(l, s)
+      }, [
+        o(k) ? c("", !0) : D(t.$slots, "data-label", M({
+          key: 0,
+          ref_for: !0
+        }, { bar: {
+          ...l,
+          target: m(l),
+          valueLabel: o(_)(
+            l.formatter,
+            l.value,
+            o(A)({
+              p: l.prefix || "",
+              v: l.value,
+              s: l.suffix || "",
+              r: l.rounding || 0
+            }),
+            { datapoint: l, seriesIndex: s }
+          ),
+          targetLabel: o(_)(
+            l.formatter,
+            m(l),
+            o(A)({
+              p: l.prefix || "",
+              v: m(l),
+              s: l.suffix || "",
+              r: l.rounding || 0
+            }),
+            { datapoint: l, seriesIndex: s }
+          )
+        } })),
+        !t.$slots["data-label"] || o(k) ? (n(), i("div", {
+          key: 1,
+          style: d({
+            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(k) ? (n(), i("div", {
+            key: 0,
+            class: "vue-ui-sparkbar-skeleton-name",
+            style: d({
+              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"
+            })
+          }, [
+            v("div", {
+              style: d({ height: "100%", width: "40px", borderRadius: e.value.style.labels.fontSize / 4 + "px", backgroundColor: "#6A6A6A80" })
+            }, null, 4),
+            v("div", {
+              style: d({ height: "100%", width: "15px", borderRadius: e.value.style.labels.fontSize / 4 + "px", backgroundColor: "#6A6A6A80" })
+            }, null, 4)
+          ], 4)) : (n(), i(P, { key: 1 }, [
+            v("span", null, y(l.name), 1),
+            e.value.style.labels.value.show ? (n(), i("span", {
+              key: 0,
+              style: d(`font-weight:${e.value.style.labels.value.bold ? "bold" : "normal"}`)
+            }, ": " + y(o(_)(
+              l.formatter,
+              l.value,
+              o(A)({
+                p: l.prefix || "",
+                v: l.value,
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: s }
+            )), 5)) : c("", !0),
+            e.value.style.layout.showTargetValue ? (n(), i("span", be, y(" " + e.value.style.layout.targetValueText) + " " + y(o(_)(
+              l.formatter,
+              m(l),
+              o(A)({
+                p: l.prefix || "",
+                v: m(l),
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: s }
+            )), 1)) : c("", !0)
+          ], 64))
+        ], 4)) : c("", !0),
+        (n(), i("svg", {
+          xmlns: o(ge),
+          viewBox: `0 0 ${r.value.width} ${r.value.height}`,
+          width: "100%"
+        }, [
+          ne(o(U)),
+          v("defs", null, [
+            v("linearGradient", {
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%",
+              id: `sparkbar_gradient_${s}_${L.value}`
+            }, [
+              v("stop", {
+                offset: "0%",
+                "stop-color": o(I)(o(me)(l.color, 0.03), 100 - e.value.style.bar.gradient.intensity)
+              }, null, 8, _e),
+              v("stop", {
+                offset: "100%",
+                "stop-color": l.color
+              }, null, 8, Ae)
+            ], 8, Ce)
+          ]),
+          v("rect", {
+            height: r.value.height,
+            width: r.value.width,
+            x: 0,
+            y: 0,
+            fill: o(I)(e.value.style.gutter.backgroundColor, e.value.style.gutter.opacity),
+            rx: r.value.height / 2
+          }, null, 8, Se),
+          v("rect", {
+            height: r.value.height,
+            width: r.value.width * F(l),
+            x: 0,
+            y: 0,
+            fill: e.value.style.bar.gradient.underlayerColor,
+            rx: r.value.height / 2
+          }, null, 8, $e),
+          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_${s}_${L.value})` : l.color,
+            rx: r.value.height / 2
+          }, null, 8, De)
+        ], 8, we))
+      ], 44, ke))), 256)),
+      t.$slots.source ? (n(), i("div", Ie, [
+        D(t.$slots, "source")
+      ], 512)) : c("", !0),
+      o(k) ? (n(), ae(xe, { key: 3 })) : c("", !0)
+    ], 4));
+  }
+};
+export {
+  Fe as default
+};