vue-data-ui 3.6.0 → 3.7.0

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

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

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

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