vue-data-ui 2.2.89 → 2.2.91

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

@@ -0,0 +1,245 @@
+import { computed as u, ref as p, onMounted as W, openBlock as n, createElementBlock as i, normalizeStyle as j, createBlock as w, unref as c, createElementVNode as g, createCommentVNode as v, toDisplayString as A } from "vue";
+import { _ as X, e as Z, i as Q, j as R, Q as H, X as J, o as z, N as B, B as N, n as I } from "./data-table-d-VcuH-r.js";
+import { t as K } from "./themes-lgjsYHsH.js";
+import { u as E } from "./title-BF-9Qcni.js";
+import { u as Y, S as ee } from "./vue-ui-3d-bar-DW7kGJSz.js";
+const te = ["id"], le = ["xmlns", "viewBox"], ae = ["id"], ne = ["stop-color"], oe = ["stop-color"], se = { key: 0 }, ue = ["d", "fill"], re = ["d", "fill"], ie = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], de = ["d", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"], ve = ["height", "width", "x"], ce = { style: { width: "100%" } }, he = ["x", "y", "fill", "font-size", "font-weight"], ye = ["stroke", "cx", "cy", "fill"], fe = ["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(V) {
+    const s = V, { vue_ui_spark_trend: D } = Y(), G = u(() => !!s.dataset && s.dataset.length), m = p(Z()), e = u(() => {
+      const t = E({
+        userConfig: s.config,
+        defaultConfig: D
+      });
+      return t.theme ? {
+        ...E({
+          userConfig: K.vue_ui_spark_trend[t.theme] || s.config,
+          defaultConfig: t
+        })
+      } : t;
+    });
+    function C(t) {
+      return t.map((o) => [void 0].includes(o) ? null : o);
+    }
+    const k = p(s.dataset.map((t) => e.value.style.animation.show || [void 0].includes(t) ? null : t)), f = p(!1), L = p(null);
+    W(() => {
+      Q(s.dataset) && R({
+        componentName: "VueUiTrendPill",
+        type: "dataset"
+      });
+      let o = 1e3 / e.value.style.animation.animationFrames, d = performance.now();
+      if (e.value.style.animation.show && e.value.style.animation.animationFrames && s.dataset.length > 1) {
+        let T = function() {
+          f.value = !0;
+          let S = performance.now(), F = S - d;
+          F > o ? (d = S - F % o, y < s.dataset.length ? (k.value.push(s.dataset[y]), y += 1, L.value = requestAnimationFrame(T)) : (cancelAnimationFrame(L.value), k.value = C(s.dataset), f.value = !1)) : L.value = requestAnimationFrame(T);
+        };
+        k.value = [];
+        let y = 0;
+        T();
+      }
+    });
+    const a = p({
+      height: 80,
+      width: 300
+    }), h = u(() => ({
+      top: e.value.style.padding.top,
+      left: e.value.style.padding.left,
+      right: a.value.width - e.value.style.padding.right,
+      bottom: a.value.height - e.value.style.padding.bottom,
+      height: a.value.height - (e.value.style.padding.top + e.value.style.padding.bottom) - (e.value.style.dataLabel.show ? e.value.style.dataLabel.fontSize : 0),
+      width: a.value.width - (e.value.style.padding.left + e.value.style.padding.right)
+    })), $ = u(() => {
+      const t = C(s.dataset);
+      return {
+        max: Math.max(...t),
+        min: Math.min(...t)
+      };
+    }), _ = u(() => {
+      const t = $.value.min >= 0 ? 0 : $.value.min;
+      return Math.abs(t);
+    }), O = u(() => $.value.max + _.value);
+    function M(t) {
+      return t / O.value;
+    }
+    const U = u(() => s.dataset.length), l = u(() => k.value.map((t, o) => {
+      const d = isNaN(t) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(t) ? 0 : t || 0;
+      return {
+        value: t,
+        absoluteValue: d,
+        plotValue: d + _.value,
+        toMax: M(d + _.value),
+        x: h.value.left + o * (h.value.width / (U.value - 1)) - e.value.style.padding.right,
+        y: h.value.bottom - h.value.height * M(d + _.value)
+      };
+    })), b = u(() => {
+      const t = C(s.dataset);
+      return e.value.style.trendLabel.trendType === "global" ? H(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;
+    }), x = u(() => f.value || b.value === 0 ? "neutral" : b.value > 0 ? "positive" : "negative"), r = u(() => e.value.style.arrow.colors[x.value]), P = u(() => {
+      const t = { x: l.value[0].x, y: a.value.height - 6 }, o = { x: l.value[l.value.length - 1].x, y: a.value.height - 6 }, d = [];
+      return l.value.forEach((y) => {
+        d.push(`${y.x},${y.y} `);
+      }), [t.x, t.y, ...d, o.x, o.y].toString();
+    }), q = u(() => {
+      let t = [];
+      return l.value.forEach((o) => {
+        t.push(`${o.x},${o.y} `);
+      }), `M ${t.toString()}`;
+    });
+    return (t, o) => (n(), i("div", {
+      class: "vue-ui-spark-trend",
+      id: m.value,
+      style: j(`width:100%;font-family:${e.value.style.fontFamily};backgroundColor:${e.value.style.backgroundColor}`)
+    }, [
+      G.value ? (n(), i("svg", {
+        key: 1,
+        xmlns: c(J),
+        viewBox: `0 0 ${a.value.width} ${a.value.height}`,
+        style: j(`width:100%;background:${e.value.style.backgroundColor};overflow:visible`)
+      }, [
+        g("defs", null, [
+          g("linearGradient", {
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%",
+            id: `pill_gradient_${m.value}`
+          }, [
+            g("stop", {
+              offset: "0%",
+              "stop-color": (e.value.style.line.useColorTrend ? r.value : e.value.style.line.stroke) + c(z)[e.value.style.area.opacity]
+            }, null, 8, ne),
+            g("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.backgroundColor
+            }, null, 8, oe)
+          ], 8, ae)
+        ]),
+        e.value.style.area.show && l.value[0] ? (n(), i("g", se, [
+          e.value.style.line.smooth ? (n(), i("path", {
+            key: 0,
+            d: `M ${l.value[0].x},${h.value.bottom} ${c(B)(l.value)} L ${l.value.at(-1).x},${h.value.bottom} Z`,
+            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${m.value})` : `${e.value.style.line.useColorTrend ? r.value : e.value.style.line.stroke}${c(z)[e.value.style.area.opacity]}`,
+            stroke: "none"
+          }, null, 8, ue)) : (n(), i("path", {
+            key: 1,
+            d: `M${P.value}Z`,
+            fill: e.value.style.area.useGradient ? `url(#pill_gradient_${m.value})` : `${e.value.style.line.useColorTrend ? r.value : e.value.style.line.stroke}${c(z)[e.value.style.area.opacity]}`,
+            stroke: "none"
+          }, null, 8, re))
+        ])) : v("", !0),
+        e.value.style.line.smooth && l.value.length ? (n(), i("path", {
+          key: 1,
+          d: `M ${c(B)(l.value)}`,
+          stroke: e.value.style.line.useColorTrend ? r.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, ie)) : v("", !0),
+        !e.value.style.line.smooth && l.value.length ? (n(), i("path", {
+          key: 2,
+          d: q.value,
+          stroke: e.value.style.line.useColorTrend ? r.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, de)) : v("", !0),
+        f.value ? v("", !0) : (n(), i("foreignObject", {
+          key: 3,
+          height: a.value.height / 2,
+          width: a.value.height / 2,
+          x: a.value.height / 5,
+          y: 8
+        }, [
+          g("div", ce, [
+            x.value === "positive" ? (n(), w(N, {
+              key: 0,
+              stroke: r.value,
+              name: "arrowTop",
+              size: a.value.height / 2
+            }, null, 8, ["stroke", "size"])) : v("", !0),
+            x.value === "negative" ? (n(), w(N, {
+              key: 1,
+              stroke: r.value,
+              name: "arrowBottom",
+              size: a.value.height / 2
+            }, null, 8, ["stroke", "size"])) : v("", !0),
+            x.value === "neutral" ? (n(), w(N, {
+              key: 2,
+              stroke: r.value,
+              name: "arrowRight",
+              size: a.value.height / 2
+            }, null, 8, ["stroke", "size"])) : v("", !0)
+          ])
+        ], 8, ve)),
+        f.value ? v("", !0) : (n(), i("text", {
+          key: 4,
+          x: a.value.height / 2 - a.value.height / 20,
+          y: h.value.bottom,
+          "text-anchor": "middle",
+          fill: e.value.style.trendLabel.useColorTrend ? r.value : e.value.style.trendLabel.color,
+          "font-size": e.value.style.trendLabel.fontSize,
+          "font-weight": e.value.style.trendLabel.bold ? "bold" : "normal"
+        }, A(c(I)({
+          p: b.value > 0 ? "+" : "",
+          v: b.value,
+          s: "%",
+          r: e.value.style.trendLabel.rounding
+        })), 9, he)),
+        l.value.length && l.value.at(-1).x !== void 0 ? (n(), i("circle", {
+          key: 5,
+          stroke: e.value.style.backgroundColor,
+          "stroke-width": 2,
+          cx: l.value.at(-1).x,
+          cy: l.value.at(-1).y,
+          r: 4,
+          fill: r.value
+        }, null, 8, ye)) : v("", !0),
+        l.value.length && l.value.at(-1).x !== void 0 && e.value.style.dataLabel.show ? (n(), i("text", {
+          key: 6,
+          "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 ? r.value : e.value.style.dataLabel.color,
+          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
+        }, A(c(I)({
+          p: e.value.style.dataLabel.prefix,
+          v: l.value.at(-1).value,
+          s: e.value.style.dataLabel.suffix,
+          r: e.value.style.dataLabel.rounding
+        })), 9, fe)) : v("", !0)
+      ], 12, le)) : (n(), w(ee, {
+        key: 0,
+        config: {
+          type: "sparkline",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            sparkline: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"]))
+    ], 12, te));
+  }
+}, xe = /* @__PURE__ */ X(pe, [["__scopeId", "data-v-456001fa"]]);
+export {
+  xe as default
+};

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

@@ -0,0 +1,158 @@
+import { computed as s, onMounted as _, ref as m, watch as j, openBlock as n, createElementBlock as r, normalizeStyle as v, toDisplayString as y, createCommentVNode as c, unref as $, createElementVNode as i, normalizeClass as F, createBlock as O } from "vue";
+import { t as B } from "./themes-lgjsYHsH.js";
+import { u as w } from "./title-BF-9Qcni.js";
+import { i as E, j as C, k as D, e as G, K as I, X as U, n as V } from "./data-table-d-VcuH-r.js";
+import { u as q, S as P } from "./vue-ui-3d-bar-DW7kGJSz.js";
+const T = ["xmlns", "viewBox"], X = ["id"], H = ["stop-color"], K = ["stop-color"], R = ["d", "stroke", "stroke-linecap"], Y = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], J = ["x", "y", "font-size", "fill", "font-weight"], ae = {
+  __name: "vue-ui-sparkgauge",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(L) {
+    const t = L, { vue_ui_sparkgauge: S } = q(), g = s(() => !!t.dataset && Object.keys(t.dataset).length);
+    _(() => {
+      E(t.dataset) ? C({
+        componentName: "VueUiSparkgauge",
+        type: "dataset"
+      }) : D({
+        datasetObject: t.dataset,
+        requiredAttributes: ["value", "min", "max"]
+      }).forEach((l) => {
+        C({
+          componentName: "VueUiSparkgauge",
+          type: "datasetAttribute",
+          property: l
+        });
+      });
+    });
+    const p = m(G()), e = s(() => {
+      const l = w({
+        userConfig: t.config,
+        defaultConfig: S
+      });
+      return l.theme ? {
+        ...w({
+          userConfig: B.vue_ui_sparkgauge[l.theme] || t.config,
+          defaultConfig: l
+        })
+      } : l;
+    }), u = s(() => ({
+      height: e.value.style.height,
+      width: 128,
+      base: e.value.style.basePosition
+    })), a = s(() => {
+      const l = t.dataset.min ?? 0, f = t.dataset.max ?? 0, N = f - l;
+      return {
+        min: l,
+        max: f,
+        diff: N
+      };
+    }), o = m(e.value.style.animation.show ? a.value.min : t.dataset.value);
+    j(() => t.dataset.value, () => {
+      o.value = m(e.value.style.animation.show ? a.value.min : t.dataset.value), b();
+    });
+    const h = s(() => o.value > a.value.max ? a.value.max : o.value < a.value.min ? a.value.min : o.value), A = s(() => a.value.diff / e.value.style.animation.speedMs);
+    _(() => {
+      b();
+    });
+    function b() {
+      function l() {
+        o.value += A.value, o.value < t.dataset.value ? requestAnimationFrame(l) : o.value = t.dataset.value;
+      }
+      e.value.style.animation.show && (o.value = a.value.min, l());
+    }
+    const d = s(() => t.dataset.title ?? ""), k = s(() => o.value >= 0 ? (h.value - a.value.min) / a.value.diff : (Math.abs(a.value.min) - Math.abs(h.value)) / a.value.diff), x = s(() => I(e.value.style.colors.min, e.value.style.colors.max, a.value.min, a.value.max, o.value)), z = s(() => e.value.style.dataLabel.autoColor ? x.value : e.value.style.dataLabel.color), M = s(() => e.value.style.track.autoColor ? x.value : e.value.style.track.color);
+    return (l, f) => (n(), r("div", {
+      style: v(`font-family:${e.value.style.fontFamily};width: 100%; background:${e.value.style.background}`)
+    }, [
+      e.value.style.title.show && d.value && e.value.style.title.position === "top" ? (n(), r("div", {
+        key: 0,
+        class: "vue-data-ui-sparkgauge-label",
+        style: v(`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}`)
+      }, y(d.value), 5)) : c("", !0),
+      g.value ? (n(), r("svg", {
+        key: 1,
+        xmlns: $(U),
+        viewBox: `0 0 ${u.value.width} ${u.value.height}`,
+        style: v(`overflow: visible; background:${e.value.style.background}; width:100%;`)
+      }, [
+        i("defs", null, [
+          i("linearGradient", {
+            id: `gradient_${p.value}`,
+            x1: "-10%",
+            y1: "100%",
+            x2: "110%",
+            y2: "100%"
+          }, [
+            i("stop", {
+              offset: "0%",
+              "stop-color": e.value.style.colors.min
+            }, null, 8, H),
+            i("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.colors.max
+            }, null, 8, K)
+          ], 8, X)
+        ]),
+        i("path", {
+          d: `M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,
+          stroke: e.value.style.gutter.color,
+          "stroke-width": 8,
+          "stroke-linecap": e.value.style.gutter.strokeLinecap,
+          fill: "none"
+        }, null, 8, R),
+        k.value !== 0 ? (n(), r("path", {
+          key: 0,
+          d: `M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,
+          stroke: e.value.style.colors.showGradient ? `url(#gradient_${p.value})` : M.value,
+          "stroke-width": 8,
+          "stroke-linecap": e.value.style.track.strokeLinecap,
+          fill: "none",
+          "stroke-dasharray": 169.5,
+          "stroke-dashoffset": 169.5 - 169.5 * k.value,
+          class: F({ "vue-ui-sparkgauge-track": e.value.style.animation.show }),
+          style: v(e.value.style.animation.show ? `animation: vue-ui-sparkgauge-animation ${e.value.style.animation.speedMs}ms ease-in;` : "")
+        }, null, 14, Y)) : c("", !0),
+        i("text", {
+          "text-anchor": "middle",
+          x: u.value.width / 2,
+          y: u.value.base + 6 + e.value.style.dataLabel.offsetY,
+          "font-size": e.value.style.dataLabel.fontSize,
+          fill: z.value,
+          "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
+        }, y($(V)({ p: e.value.style.dataLabel.prefix, v: o.value, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.rounding })), 9, J)
+      ], 12, T)) : c("", !0),
+      g.value ? c("", !0) : (n(), O(P, {
+        key: 2,
+        config: {
+          type: "gauge",
+          style: {
+            backgroundColor: e.value.style.background,
+            gauge: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      e.value.style.title.show && d.value && e.value.style.title.position === "bottom" ? (n(), r("div", {
+        key: 3,
+        class: "vue-data-ui-sparkgauge-label",
+        style: v(`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}`)
+      }, y(d.value), 5)) : c("", !0)
+    ], 4));
+  }
+};
+export {
+  ae as default
+};

package/dist/vue-ui-sparkhistogram-DWpOXqHm.js

@@ -0,0 +1,243 @@
+import { useCssVars as R, computed as b, onMounted as T, ref as z, openBlock as a, createElementBlock as s, normalizeStyle as w, createElementVNode as f, createTextVNode as N, toDisplayString as r, createCommentVNode as c, unref as p, Fragment as h, renderList as g, normalizeClass as M, createBlock as A } from "vue";
+import { _ as P, i as J, j as D, k as K, e as Q, o as m, X as Z, x as F, a as ee } from "./data-table-d-VcuH-r.js";
+import { t as te } from "./themes-lgjsYHsH.js";
+import { u as H } from "./title-BF-9Qcni.js";
+import { u as le, S as ae } from "./vue-ui-3d-bar-DW7kGJSz.js";
+const se = { key: 0 }, oe = { key: 1 }, ue = ["xmlns", "viewBox"], ie = ["id"], ne = ["stop-color"], re = ["stop-color"], ve = ["id"], de = ["stop-color"], ye = ["stop-color"], ce = { key: 0 }, he = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx"], ge = { key: 1 }, fe = ["x", "y", "font-size", "font-weight", "fill"], pe = ["x", "y", "font-size", "fill"], be = ["x", "y", "font-size", "fill"], me = ["height", "width", "x", "onMouseover", "stroke", "stroke-width", "rx", "stroke-dasharray", "onClick"], xe = {
+  __name: "vue-ui-sparkhistogram",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(V, { emit: E }) {
+    const v = V;
+    R((l) => ({
+      "34a5ebe4": j.value
+    }));
+    const { vue_ui_sparkhistogram: I } = le(), S = b(() => !!v.dataset && v.dataset.length);
+    T(() => {
+      J(v.dataset) ? D({
+        componentName: "VueUiSparkHistogram",
+        type: "dataset"
+      }) : v.dataset.forEach((l, u) => {
+        K({
+          datasetObject: l,
+          requiredAttributes: ["value"]
+        }).forEach((t) => {
+          D({
+            componentName: "VueUiSparkHistogram",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: u
+          });
+        });
+      });
+    });
+    const x = z(Q()), e = b(() => {
+      const l = H({
+        userConfig: v.config,
+        defaultConfig: I
+      });
+      return l.theme ? {
+        ...H({
+          userConfig: te.vue_ui_sparkhistogram[l.theme] || v.config,
+          defaultConfig: l
+        })
+      } : l;
+    }), d = b(() => {
+      const l = e.value.style.layout.height, u = e.value.style.layout.width, t = e.value.style.layout.padding.top, o = l - e.value.style.layout.padding.bottom, y = e.value.style.layout.padding.left, _ = u - e.value.style.layout.padding.right, k = t + (l - t - e.value.style.layout.padding.bottom) / 2, C = l - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom, $ = u - e.value.style.layout.padding.left - e.value.style.layout.padding.right;
+      return {
+        bottom: o,
+        centerY: k,
+        drawingHeight: C,
+        drawingWidth: $,
+        height: l,
+        left: y,
+        right: _,
+        top: t,
+        width: u
+      };
+    }), W = b(() => Math.max(...v.dataset.map((l) => Math.abs(l.value || 0))));
+    function B(l) {
+      return Math.abs(l) / W.value;
+    }
+    const n = b(() => v.dataset.map((l, u) => {
+      const t = B(l.value || 0), o = d.value.drawingHeight * t, y = d.value.drawingWidth / v.dataset.length, _ = y * (e.value.style.bars.gap / 100), k = y - _, C = d.value.centerY - o / 2, $ = d.value.left + (_ / 2 + u * y), O = d.value.left + u * y, L = typeof l.intensity > "u" ? 100 : Math.round(l.intensity * 100), X = l.value >= 0 ? `${e.value.style.bars.colors.positive}${m[L]}` : `${e.value.style.bars.colors.negative}${m[L]}`, Y = l.value >= 0 ? e.value.style.bars.colors.positive : e.value.style.bars.colors.negative, q = l.value >= 0 ? `url(#gradient_positive_${u}_${x.value})` : `url(#gradient_negative_${u}_${x.value})`, G = $ + k / 2;
+      return {
+        ...l,
+        color: X,
+        gradient: q,
+        height: o,
+        intensity: L,
+        proportion: t,
+        stroke: Y,
+        textAnchor: G,
+        trapX: O,
+        unitWidth: y,
+        width: k,
+        x: $,
+        y: C
+      };
+    })), i = z(null);
+    function U(l, u) {
+      E("selectDatapoint", { datapoint: l, index: u });
+    }
+    const j = b(() => `${e.value.style.animation.speedMs}ms`);
+    return (l, u) => (a(), s("div", {
+      style: w(`width:100%;background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily}`),
+      onMouseleave: u[1] || (u[1] = (t) => i.value = null)
+    }, [
+      e.value.style.title.text ? (a(), s("div", {
+        key: 0,
+        style: w(`width:calc(100% - 12px);background:${e.value.style.backgroundColor};margin:0 auto;margin:${e.value.style.title.margin};padding: 0 6px;text-align:${e.value.style.title.textAlign}`)
+      }, [
+        f("div", {
+          style: w(`font-size:${e.value.style.title.fontSize}px;color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"}`)
+        }, [
+          N(r(e.value.style.title.text) + " ", 1),
+          i.value !== null ? (a(), s("span", se, "- " + r(n.value[i.value].timeLabel || "") + " " + r(e.value.style.labels.value.prefix) + r(isNaN(n.value[i.value].value) ? "" : ": " + Number(n.value[i.value].value.toFixed(e.value.style.labels.value.rounding)).toLocaleString()) + r(e.value.style.labels.value.suffix), 1)) : c("", !0),
+          N(),
+          ![void 0, null].includes(i.value) && ![null, void 0].includes(n.value[i.value].valueLabel) ? (a(), s("span", oe, "(" + r(n.value[i.value].valueLabel || 0) + ")", 1)) : c("", !0)
+        ], 4),
+        e.value.style.title.subtitle.text ? (a(), s("div", {
+          key: 0,
+          style: w(`font-size:${e.value.style.title.subtitle.fontSize}px;color:${e.value.style.title.subtitle.color};font-weight:${e.value.style.title.subtitle.bold ? "bold" : "normal"}`)
+        }, r(e.value.style.title.subtitle.text), 5)) : c("", !0)
+      ], 4)) : c("", !0),
+      S.value ? (a(), s("svg", {
+        key: 1,
+        xmlns: p(Z),
+        viewBox: `0 0 ${d.value.width} ${d.value.height}`,
+        style: { overflow: "visible" }
+      }, [
+        f("defs", null, [
+          (a(!0), s(h, null, g(n.value, (t, o) => (a(), s("radialGradient", {
+            id: `gradient_positive_${o}_${x.value}`,
+            cy: "50%",
+            cx: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            f("stop", {
+              offset: "0%",
+              "stop-color": `${p(F)(e.value.style.bars.colors.positive, 0.05)}${p(m)[t.intensity]}`
+            }, null, 8, ne),
+            f("stop", {
+              offset: "100%",
+              "stop-color": `${e.value.style.bars.colors.positive}${p(m)[t.intensity]}`
+            }, null, 8, re)
+          ], 8, ie))), 256)),
+          (a(!0), s(h, null, g(n.value, (t, o) => (a(), s("radialGradient", {
+            id: `gradient_negative_${o}_${x.value}`,
+            cy: "50%",
+            cx: "50%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            f("stop", {
+              offset: "0%",
+              "stop-color": `${p(F)(e.value.style.bars.colors.negative, 0.05)}${p(m)[t.intensity]}`
+            }, null, 8, de),
+            f("stop", {
+              offset: "100%",
+              "stop-color": `${e.value.style.bars.colors.negative}${p(m)[t.intensity]}`
+            }, null, 8, ye)
+          ], 8, ve))), 256))
+        ]),
+        !e.value.style.bars.shape || e.value.style.bars.shape === "square" ? (a(), s("g", ce, [
+          (a(!0), s(h, null, g(n.value, (t, o) => (a(), s("rect", {
+            x: t.x,
+            y: t.y,
+            height: t.height,
+            width: t.width,
+            fill: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
+            stroke: t.stroke,
+            "stroke-width": e.value.style.bars.strokeWidth,
+            rx: `${e.value.style.bars.borderRadius * t.proportion / 12}%`,
+            class: M({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
+          }, null, 10, he))), 256))
+        ])) : (a(), s("g", ge, [
+          (a(!0), s(h, null, g(n.value, (t, o) => (a(), A(ee, {
+            plot: { x: t.x + t.width / 2, y: t.y + t.height / 2 },
+            color: e.value.style.bars.colors.gradient.show ? t.gradient : t.color,
+            shape: e.value.style.bars.shape,
+            radius: t.height * 0.4,
+            class: M({ "vue-ui-sparkhistogram-shape": e.value.style.animation.show })
+          }, null, 8, ["plot", "color", "shape", "radius", "class"]))), 256))
+        ])),
+        (a(!0), s(h, null, g(n.value, (t, o) => (a(), s("text", {
+          "text-anchor": "middle",
+          x: t.textAnchor,
+          y: t.y - e.value.style.labels.value.fontSize / 3 + e.value.style.labels.value.offsetY,
+          "font-size": e.value.style.labels.value.fontSize,
+          "font-weight": e.value.style.labels.value.bold ? "bold" : "normal",
+          fill: e.value.style.labels.value.color
+        }, r(e.value.style.labels.value.prefix) + r(isNaN(t.value) ? "" : Number(t.value.toFixed(e.value.style.labels.value.rounding)).toLocaleString()) + r(e.value.style.labels.value.suffix), 9, fe))), 256)),
+        (a(!0), s(h, null, g(n.value, (t, o) => (a(), s("g", null, [
+          t.valueLabel ? (a(), s("text", {
+            key: 0,
+            x: t.textAnchor,
+            y: t.y + t.height + e.value.style.labels.valueLabel.fontSize,
+            "font-size": e.value.style.labels.valueLabel.fontSize,
+            "text-anchor": "middle",
+            fill: e.value.style.labels.valueLabel.color
+          }, r(t.valueLabel), 9, pe)) : c("", !0)
+        ]))), 256)),
+        (a(!0), s(h, null, g(n.value, (t, o) => (a(), s("g", null, [
+          t.timeLabel ? (a(), s("text", {
+            key: 0,
+            x: t.textAnchor,
+            y: d.value.height - e.value.style.labels.timeLabel.fontSize / 2,
+            "font-size": e.value.style.labels.timeLabel.fontSize,
+            fill: e.value.style.labels.timeLabel.color,
+            "text-anchor": "middle"
+          }, r(t.timeLabel), 9, be)) : c("", !0)
+        ]))), 256)),
+        (a(!0), s(h, null, g(n.value, (t, o) => (a(), s("g", null, [
+          f("rect", {
+            height: d.value.height,
+            width: t.unitWidth,
+            fill: "transparent",
+            x: t.trapX,
+            y: 0,
+            onMouseover: (y) => i.value = o,
+            onMouseleave: u[0] || (u[0] = (y) => i.value = null),
+            stroke: i.value !== null && i.value === o ? e.value.style.selector.stroke : "",
+            "stroke-width": i.value !== null && i.value === o ? e.value.style.selector.strokeWidth : 0,
+            rx: e.value.style.selector.borderRadius,
+            "stroke-dasharray": e.value.style.selector.strokeDasharray,
+            onClick: () => U(t, o)
+          }, null, 40, me)
+        ]))), 256))
+      ], 8, ue)) : c("", !0),
+      S.value ? c("", !0) : (a(), A(ae, {
+        key: 2,
+        config: {
+          type: "sparkHistogram",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            sparkHistogram: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"]))
+    ], 36));
+  }
+}, Le = /* @__PURE__ */ P(xe, [["__scopeId", "data-v-7aed7086"]]);
+export {
+  Le as default
+};