vlite3 1.1.9 → 1.1.10

package/components/Chart/BarChart.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as ne, ref as X, computed as h, onMounted as ue, watch as se, onUnmounted as re, openBlock as o, createElementBlock as n, Fragment as d, renderList as v, createElementVNode as M, normalizeStyle as F, createTextVNode as ie, toDisplayString as k, createCommentVNode as f, unref as w, createBlock as ce, Teleport as de } from "vue";
-import { CHART_COLORS as ve, formatNumber as Y, getColor as j, niceYTicks as fe, animateProgress as he } from "./utils.js";
-const ye = {
+import { defineComponent as se, ref as G, computed as f, onMounted as ie, watch as ce, onUnmounted as ve, openBlock as n, createElementBlock as u, Fragment as d, renderList as h, createElementVNode as w, normalizeStyle as _, createTextVNode as de, toDisplayString as p, createCommentVNode as m, unref as k, withDirectives as he, vShow as fe, createBlock as me, Teleport as ye } from "vue";
+import { CHART_COLORS as xe, getColor as J, formatNumber as R, niceYTicks as ge, animateProgress as $e } from "./utils.js";
+const be = {
   key: 0,
   class: "flex flex-wrap gap-x-4 gap-y-1 mb-3 pl-14"
-}, me = ["width", "height"], xe = ["id"], $e = ["stop-color"], ge = ["stop-color"], be = ["id"], pe = ["stop-color"], ke = ["stop-color"], we = ["transform"], Le = ["y1", "x2", "y2", "stroke-opacity"], Me = ["y"], Ve = ["d", "fill", "opacity"], Ce = ["x", "y"], Be = ["x", "y"], Ye = ["y1", "x2", "y2", "stroke-opacity"], Re = ["y2", "stroke-opacity"], Oe = ["transform"], ze = ["x1", "x2", "y2", "stroke-opacity"], Xe = ["x"], Ae = ["y"], Ge = ["d", "fill", "opacity"], Te = ["x", "y"], Se = ["y2", "stroke-opacity"], We = ["y1", "x2", "y2", "stroke-opacity"], Pe = { class: "font-medium text-xs mb-1.5" }, He = {
+}, pe = ["width", "height"], ke = ["id"], we = ["stop-color"], Le = ["stop-color"], Me = ["id"], Ve = ["stop-color"], Ce = ["stop-color"], Be = ["transform"], Ye = ["y1", "x2", "y2", "stroke-opacity"], Re = ["y"], Xe = ["d", "fill", "opacity"], Oe = ["x", "y"], ze = ["x", "y", "text-anchor", "transform"], Se = ["y1", "x2", "y2", "stroke-opacity"], Ae = ["y2", "stroke-opacity"], Ge = ["transform"], Te = ["x1", "x2", "y2", "stroke-opacity"], We = ["x"], Pe = ["y"], He = ["d", "fill", "opacity"], Ne = ["x", "y"], Qe = ["y2", "stroke-opacity"], Ze = ["y1", "x2", "y2", "stroke-opacity"], De = { class: "font-medium text-xs mb-1.5" }, Ee = {
   key: 0,
   class: "text-muted-foreground"
-}, Ne = { class: "font-semibold" }, Ee = /* @__PURE__ */ ne({
+}, Fe = { class: "font-semibold" }, _e = /* @__PURE__ */ se({
   __name: "BarChart",
   props: {
     data: {},
@@ -19,7 +19,7 @@ const ye = {
     showLegend: { type: Boolean, default: !0 },
     showTooltip: { type: Boolean, default: !0 },
     showValues: { type: Boolean, default: !1 },
-    colors: { default: () => ve },
+    colors: { default: () => xe },
     animate: { type: Boolean, default: !0 },
     formatValue: {},
     showXAxis: { type: Boolean, default: !0 },
@@ -30,240 +30,255 @@ const ye = {
     axisOpacity: { default: 0.1 }
   },
   setup(i) {
-    const r = i, A = X(), G = X(600), g = h(() => {
-      const t = (a) => String(a).length;
-      if (r.orientation === "horizontal") {
-        const a = r.showYLabels ? Math.max(2, ...x.value.map((L) => t(L))) * 6.5 : 0, s = r.showYLabels ? Math.max(24, a + 12) : 8;
-        let u = 16;
-        if (r.showValues) {
-          const L = m.value.flatMap(($) => $.values), y = Math.max(2, ...L.map(($) => t(r.formatValue ? r.formatValue($) : Y($)))) * 6.5;
-          u = Math.max(16, y + 8);
+    const s = i, T = G(), z = G(600), g = f(() => s.datasets?.length ? s.datasets.map((l, e) => ({
+      label: l.label,
+      color: l.color ?? J(s.colors, e),
+      values: l.data
+    })) : [
+      {
+        label: "",
+        color: "",
+        // will use per-bar color from data
+        values: (s.data ?? []).map((l) => l.value)
+      }
+    ]), $ = f(() => g.value.length > 1 || !!s.datasets?.length), v = f(() => s.labels?.length ? s.labels : s.datasets?.length ? g.value[0]?.values.map((t, l) => String(l + 1)) ?? [] : (s.data ?? []).map((t) => t.label)), S = f(() => {
+      if (s.orientation !== "vertical" || !s.showXLabels || v.value.length === 0) return !1;
+      const t = Math.max(2, Math.floor(z.value / 65));
+      return v.value.length > t;
+    }), b = f(() => {
+      const t = (o) => String(o).length;
+      if (s.orientation === "horizontal") {
+        const o = s.showYLabels ? Math.max(2, ...v.value.map((y) => t(y))) * 6.5 : 0, r = s.showYLabels ? Math.max(24, o + 12) : 8;
+        let M = 16;
+        if (s.showValues) {
+          const y = g.value.flatMap((C) => C.values), V = Math.max(2, ...y.map((C) => t(s.formatValue ? s.formatValue(C) : R(C)))) * 6.5;
+          M = Math.max(16, V + 8);
         }
         return {
           // top holds the value-tick labels that float above; collapse when hidden
-          top: r.showXLabels ? 16 : 4,
-          right: u,
+          top: s.showXLabels ? 16 : 4,
+          right: M,
           bottom: 0,
-          left: s
+          left: r
         };
       }
-      const l = r.showYLabels ? Math.max(2, ...C.value.map((a) => t(r.formatValue ? r.formatValue(a) : Y(a)))) * 6.5 : 0, e = r.showYLabels ? Math.max(24, l + 12) : 8;
-      return {
+      const l = s.showYLabels ? Math.max(2, ...B.value.map((o) => t(s.formatValue ? s.formatValue(o) : R(o)))) * 6.5 : 0, e = s.showYLabels ? Math.max(24, l + 12) : 8;
+      let a = s.showXLabels ? 24 : 6;
+      return s.showXLabels && S.value && (a = Math.max(2, ...v.value.map((r) => String(r).length)) * 6.5 * 0.7 + 16), {
         top: 24,
         right: 0,
-        // Collapse bottom padding when X labels are hidden
-        bottom: r.showXLabels ? 24 : 6,
+        bottom: a,
         left: e
       };
-    }), b = h(() => Math.max(0, G.value - g.value.left - g.value.right)), c = h(() => Math.max(0, r.height - g.value.top - g.value.bottom)), m = h(() => r.datasets?.length ? r.datasets.map((l, e) => ({
-      label: l.label,
-      color: l.color ?? j(r.colors, e),
-      values: l.data
-    })) : [
-      {
-        label: "",
-        color: "",
-        // will use per-bar color from data
-        values: (r.data ?? []).map((l) => l.value)
-      }
-    ]), p = h(() => m.value.length > 1 || !!r.datasets?.length), x = h(() => r.labels?.length ? r.labels : r.datasets?.length ? m.value[0]?.values.map((t, l) => String(l + 1)) ?? [] : (r.data ?? []).map((t) => t.label)), T = h(
-      () => (r.data ?? []).map((t, l) => t.color ?? j(r.colors, l))
-    ), q = h(() => m.value.flatMap((t) => t.values)), U = h(() => Math.max(...q.value) || 1), C = h(() => fe(0, U.value, 5)), V = h(() => C.value[C.value.length - 1] || U.value), S = X(r.animate ? 0 : 1);
-    let N = null;
-    function _() {
-      N?.(), S.value = 0, N = he(800, (t) => S.value = t);
+    }), x = f(() => Math.max(0, z.value - b.value.left - b.value.right)), c = f(() => Math.max(0, s.height - b.value.top - b.value.bottom)), Z = f(() => {
+      if (s.orientation !== "vertical") return 1;
+      const t = S.value ? 25 : 65, l = Math.max(2, Math.floor(x.value / t));
+      return Math.ceil(v.value.length / l);
+    }), K = (t) => {
+      if (s.orientation !== "vertical") return !0;
+      const l = v.value.length;
+      return Z.value <= 1 || t === 0 || t === l - 1 ? !0 : l - 1 - t < Z.value * 0.7 ? !1 : t % Z.value === 0;
+    }, W = f(
+      () => (s.data ?? []).map((t, l) => t.color ?? J(s.colors, l))
+    ), ee = f(() => g.value.flatMap((t) => t.values)), j = f(() => Math.max(...ee.value) || 1), B = f(() => ge(0, j.value, 5)), L = f(() => B.value[B.value.length - 1] || j.value), P = G(s.animate ? 0 : 1);
+    let D = null;
+    function q() {
+      D?.(), P.value = 0, D = $e(800, (t) => P.value = t);
     }
-    ue(() => {
-      J(), r.animate && _();
-    }), se(() => [r.data, r.datasets], () => {
-      r.animate && _();
-    }, { deep: !0 }), re(() => {
-      N?.(), Q?.disconnect();
+    ie(() => {
+      te(), s.animate && q();
+    }), ce(() => [s.data, s.datasets], () => {
+      s.animate && q();
+    }, { deep: !0 }), ve(() => {
+      D?.(), E?.disconnect();
     });
-    let Q = null;
-    function J() {
-      A.value && (Q = new ResizeObserver((t) => {
-        G.value = t[0].contentRect.width || 600;
-      }), Q.observe(A.value), G.value = A.value.clientWidth || 600);
+    let E = null;
+    function te() {
+      T.value && (E = new ResizeObserver((t) => {
+        z.value = t[0].contentRect.width || 600;
+      }), E.observe(T.value), z.value = T.value.clientWidth || 600);
     }
-    const K = h(() => {
-      const t = x.value.length;
+    const le = f(() => {
+      const t = v.value.length;
       if (t === 0) return [];
-      const l = b.value / t, e = m.value.length, a = l * 0.2, s = l - a * 2, u = p.value ? s / e : s;
-      return x.value.map((L, y) => {
-        const $ = y * l + a, Z = m.value.map((W, P) => {
-          const H = W.values[y] ?? 0, z = H / V.value * c.value * S.value, E = $ + P * u, I = c.value - z, D = p.value ? W.color : T.value[y];
-          return { val: H, bh: z, x: E, y: I, w: u - (p.value ? 2 : 0), color: D };
+      const l = x.value / t, e = g.value.length, a = l * 0.2, o = l - a * 2, r = $.value ? o / e : o;
+      return v.value.map((M, y) => {
+        const V = y * l + a, C = g.value.map((H, N) => {
+          const Q = H.values[y] ?? 0, A = Q / L.value * c.value * P.value, F = V + N * r, I = c.value - A, U = $.value ? H.color : W.value[y];
+          return { val: Q, bh: A, x: F, y: I, w: r - ($.value ? 2 : 0), color: U };
         });
-        return { label: L, bars: Z };
+        return { label: M, bars: C };
       });
-    }), ee = h(() => {
-      const t = x.value.length;
+    }), ae = f(() => {
+      const t = v.value.length;
       if (t === 0) return [];
-      const l = c.value / t, e = m.value.length, a = l * 0.2, s = l - a * 2, u = p.value ? s / e : s, L = V.value;
-      return x.value.map((y, $) => {
-        const Z = $ * l + a, W = m.value.map((P, H) => {
-          const z = P.values[$] ?? 0, E = z / L * b.value * S.value, I = Z + H * u, D = p.value ? P.color : T.value[$];
-          return { val: z, bw: E, x: 0, y: I, h: u - (p.value ? 2 : 0), color: D };
+      const l = c.value / t, e = g.value.length, a = l * 0.2, o = l - a * 2, r = $.value ? o / e : o, M = L.value;
+      return v.value.map((y, V) => {
+        const C = V * l + a, H = g.value.map((N, Q) => {
+          const A = N.values[V] ?? 0, F = A / M * x.value * P.value, I = C + Q * r, U = $.value ? N.color : W.value[V];
+          return { val: A, bw: F, x: 0, y: I, h: r - ($.value ? 2 : 0), color: U };
         });
-        return { label: y, bars: W };
+        return { label: y, bars: H };
       });
-    }), B = X(null), R = X(null);
-    function te(t) {
-      if (!r.showTooltip) return;
-      const l = t.currentTarget.getBoundingClientRect(), e = t.clientX - l.left - g.value.left, a = t.clientY - l.top - g.value.top, s = x.value.length;
-      if (s === 0) return;
-      let u;
-      r.orientation === "vertical" ? u = Math.floor(e / b.value * s) : u = Math.floor(a / c.value * s), u = Math.max(0, Math.min(s - 1, u)), R.value = u;
-      const L = m.value.map((y, $) => ({
-        color: p.value ? y.color : T.value[u],
+    }), Y = G(null), X = G(null);
+    function oe(t) {
+      if (!s.showTooltip) return;
+      const l = t.currentTarget.getBoundingClientRect(), e = t.clientX - l.left - b.value.left, a = t.clientY - l.top - b.value.top, o = v.value.length;
+      if (o === 0) return;
+      let r;
+      s.orientation === "vertical" ? r = Math.floor(e / x.value * o) : r = Math.floor(a / c.value * o), r = Math.max(0, Math.min(o - 1, r)), X.value = r;
+      const M = g.value.map((y, V) => ({
+        color: $.value ? y.color : W.value[r],
         label: y.label,
-        value: r.formatValue ? r.formatValue(y.values[u]) : Y(y.values[u])
+        value: s.formatValue ? s.formatValue(y.values[r]) : R(y.values[r])
       }));
-      B.value = {
+      Y.value = {
         x: t.clientX,
         y: t.clientY,
-        label: x.value[u],
-        items: L
+        label: v.value[r],
+        items: M
       };
     }
-    function le() {
-      B.value = null, R.value = null;
+    function ne() {
+      Y.value = null, X.value = null;
     }
-    function ae(t, l, e, a, s) {
-      const u = Math.min(s, e / 2, a / 2);
-      return u <= 0 || a <= 0 ? `M${t},${l + a} L${t},${l} L${t + e},${l} L${t + e},${l + a} Z` : `M${t},${l + a} L${t},${l + u} Q${t},${l} ${t + u},${l} L${t + e - u},${l} Q${t + e},${l} ${t + e},${l + u} L${t + e},${l + a} Z`;
+    function ue(t, l, e, a, o) {
+      const r = Math.min(o, e / 2, a / 2);
+      return r <= 0 || a <= 0 ? `M${t},${l + a} L${t},${l} L${t + e},${l} L${t + e},${l + a} Z` : `M${t},${l + a} L${t},${l + r} Q${t},${l} ${t + r},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + a} Z`;
     }
-    function oe(t, l, e, a, s) {
-      const u = Math.min(s, e / 2, a / 2);
-      return u <= 0 || e <= 0 ? `M${t},${l} L${t + e},${l} L${t + e},${l + a} L${t},${l + a} Z` : `M${t},${l} L${t + e - u},${l} Q${t + e},${l} ${t + e},${l + u} L${t + e},${l + a - u} Q${t + e},${l + a} ${t + e - u},${l + a} L${t},${l + a} Z`;
+    function re(t, l, e, a, o) {
+      const r = Math.min(o, e / 2, a / 2);
+      return r <= 0 || e <= 0 ? `M${t},${l} L${t + e},${l} L${t + e},${l + a} L${t},${l + a} Z` : `M${t},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + a - r} Q${t + e},${l + a} ${t + e - r},${l + a} L${t},${l + a} Z`;
     }
     const O = Math.random().toString(36).slice(2, 7);
-    return (t, l) => (o(), n("div", {
+    return (t, l) => (n(), u("div", {
       ref_key: "containerRef",
-      ref: A,
+      ref: T,
       class: "vlite-bar-chart w-full select-none"
     }, [
-      i.showLegend && p.value ? (o(), n("div", ye, [
-        (o(!0), n(d, null, v(m.value, (e) => (o(), n("div", {
+      i.showLegend && $.value ? (n(), u("div", be, [
+        (n(!0), u(d, null, h(g.value, (e) => (n(), u("div", {
           key: e.label,
           class: "flex items-center gap-1.5 text-xs text-muted-foreground"
         }, [
-          M("span", {
+          w("span", {
             class: "w-2.5 h-2.5 rounded-sm inline-block",
-            style: F({ backgroundColor: e.color })
+            style: _({ backgroundColor: e.color })
           }, null, 4),
-          ie(" " + k(e.label), 1)
+          de(" " + p(e.label), 1)
         ]))), 128))
-      ])) : f("", !0),
-      (o(), n("svg", {
-        width: G.value,
+      ])) : m("", !0),
+      (n(), u("svg", {
+        width: z.value,
         height: i.height,
         role: "img",
         "aria-label": "Bar chart",
         class: "overflow-visible",
-        onMousemove: te,
-        onMouseleave: le
+        onMousemove: oe,
+        onMouseleave: ne
       }, [
-        M("defs", null, [
-          (o(!0), n(d, null, v(m.value, (e, a) => (o(), n("linearGradient", {
+        w("defs", null, [
+          (n(!0), u(d, null, h(g.value, (e, a) => (n(), u("linearGradient", {
             key: a,
-            id: `bgrad-${w(O)}-${a}`,
+            id: `bgrad-${k(O)}-${a}`,
             x1: "0",
             y1: "0",
             x2: "0",
             y2: "1"
           }, [
-            M("stop", {
+            w("stop", {
               offset: "0%",
               "stop-color": e.color,
               "stop-opacity": "1"
-            }, null, 8, $e),
-            M("stop", {
+            }, null, 8, we),
+            w("stop", {
               offset: "100%",
               "stop-color": e.color,
               "stop-opacity": "0.7"
-            }, null, 8, ge)
-          ], 8, xe))), 128)),
-          (o(!0), n(d, null, v(T.value, (e, a) => (o(), n("linearGradient", {
+            }, null, 8, Le)
+          ], 8, ke))), 128)),
+          (n(!0), u(d, null, h(W.value, (e, a) => (n(), u("linearGradient", {
             key: `sc-${a}`,
-            id: `bgrad-single-${w(O)}-${a}`,
+            id: `bgrad-single-${k(O)}-${a}`,
             x1: "0",
             y1: "0",
             x2: "0",
             y2: "1"
           }, [
-            M("stop", {
+            w("stop", {
               offset: "0%",
               "stop-color": e,
               "stop-opacity": "1"
-            }, null, 8, pe),
-            M("stop", {
+            }, null, 8, Ve),
+            w("stop", {
               offset: "100%",
               "stop-color": e,
               "stop-opacity": "0.7"
-            }, null, 8, ke)
-          ], 8, be))), 128))
+            }, null, 8, Ce)
+          ], 8, Me))), 128))
         ]),
-        i.orientation === "vertical" ? (o(), n("g", {
+        i.orientation === "vertical" ? (n(), u("g", {
           key: 0,
-          transform: `translate(${g.value.left},${g.value.top})`
+          transform: `translate(${b.value.left},${b.value.top})`
         }, [
-          i.showGrid ? (o(!0), n(d, { key: 0 }, v(C.value, (e) => (o(), n("line", {
+          i.showGrid ? (n(!0), u(d, { key: 0 }, h(B.value, (e) => (n(), u("line", {
             key: e,
             x1: 0,
-            y1: c.value - e / V.value * c.value,
-            x2: b.value,
-            y2: c.value - e / V.value * c.value,
+            y1: c.value - e / L.value * c.value,
+            x2: x.value,
+            y2: c.value - e / L.value * c.value,
             stroke: "currentColor",
             "stroke-opacity": i.gridOpacity,
             "stroke-width": "1"
-          }, null, 8, Le))), 128)) : f("", !0),
-          i.showYLabels ? (o(!0), n(d, { key: 1 }, v(C.value, (e) => (o(), n("text", {
+          }, null, 8, Ye))), 128)) : m("", !0),
+          i.showYLabels ? (n(!0), u(d, { key: 1 }, h(B.value, (e) => (n(), u("text", {
             key: `yt-${e}`,
             x: -10,
-            y: c.value - e / V.value * c.value,
+            y: c.value - e / L.value * c.value,
             "text-anchor": "end",
             "dominant-baseline": "middle",
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, k(i.formatValue ? i.formatValue(e) : w(Y)(e)), 9, Me))), 128)) : f("", !0),
-          (o(!0), n(d, null, v(K.value, (e, a) => (o(), n("g", { key: a }, [
-            (o(!0), n(d, null, v(e.bars, (s, u) => (o(), n("path", {
-              key: u,
-              d: ae(s.x, s.y, s.w, s.bh, i.barRadius),
-              fill: p.value ? `url(#bgrad-${w(O)}-${u})` : `url(#bgrad-single-${w(O)}-${a})`,
-              opacity: R.value !== null && R.value !== a ? 0.5 : 1,
+          }, p(i.formatValue ? i.formatValue(e) : k(R)(e)), 9, Re))), 128)) : m("", !0),
+          (n(!0), u(d, null, h(le.value, (e, a) => (n(), u("g", { key: a }, [
+            (n(!0), u(d, null, h(e.bars, (o, r) => (n(), u("path", {
+              key: r,
+              d: ue(o.x, o.y, o.w, o.bh, i.barRadius),
+              fill: $.value ? `url(#bgrad-${k(O)}-${r})` : `url(#bgrad-single-${k(O)}-${a})`,
+              opacity: X.value !== null && X.value !== a ? 0.5 : 1,
               class: "transition-opacity duration-150"
-            }, null, 8, Ve))), 128)),
-            i.showValues ? (o(!0), n(d, { key: 0 }, v(e.bars, (s, u) => (o(), n("text", {
-              key: `vl-${u}`,
-              x: s.x + s.w / 2,
-              y: s.y - 6,
+            }, null, 8, Xe))), 128)),
+            i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (o, r) => (n(), u("text", {
+              key: `vl-${r}`,
+              x: o.x + o.w / 2,
+              y: o.y - 6,
               "text-anchor": "middle",
               "font-size": "10",
               "font-weight": "600",
               class: "fill-foreground"
-            }, k(i.formatValue ? i.formatValue(s.val) : w(Y)(s.val)), 9, Ce))), 128)) : f("", !0)
+            }, p(i.formatValue ? i.formatValue(o.val) : k(R)(o.val)), 9, Oe))), 128)) : m("", !0)
           ]))), 128)),
-          i.showXLabels ? (o(!0), n(d, { key: 2 }, v(x.value, (e, a) => (o(), n("text", {
+          i.showXLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, a) => he((n(), u("text", {
             key: `xl-${a}`,
-            x: (a + 0.5) * (b.value / x.value.length),
-            y: c.value + 16,
-            "text-anchor": "middle",
+            x: (a + 0.5) * (x.value / v.value.length),
+            y: c.value + (S.value ? 12 : 16),
+            "text-anchor": S.value ? "end" : "middle",
+            transform: S.value ? `rotate(-45, ${(a + 0.5) * (x.value / v.value.length)}, ${c.value + 12})` : void 0,
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, k(e), 9, Be))), 128)) : f("", !0),
-          i.showXAxis ? (o(), n("line", {
+          }, p(e), 9, ze)), [
+            [fe, K(a)]
+          ])), 128)) : m("", !0),
+          i.showXAxis ? (n(), u("line", {
             key: 3,
             x1: 0,
             y1: c.value,
-            x2: b.value,
+            x2: x.value,
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, Ye)) : f("", !0),
-          i.showYAxis ? (o(), n("line", {
+          }, null, 8, Se)) : m("", !0),
+          i.showYAxis ? (n(), u("line", {
             key: 4,
             x1: 0,
             y1: 0,
@@ -271,57 +286,57 @@ const ye = {
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, Re)) : f("", !0)
-        ], 8, we)) : (o(), n("g", {
+          }, null, 8, Ae)) : m("", !0)
+        ], 8, Be)) : (n(), u("g", {
           key: 1,
-          transform: `translate(${g.value.left},${g.value.top})`
+          transform: `translate(${b.value.left},${b.value.top})`
         }, [
-          i.showGrid ? (o(!0), n(d, { key: 0 }, v(C.value, (e) => (o(), n("line", {
+          i.showGrid ? (n(!0), u(d, { key: 0 }, h(B.value, (e) => (n(), u("line", {
             key: e,
-            x1: e / V.value * b.value,
+            x1: e / L.value * x.value,
             y1: 0,
-            x2: e / V.value * b.value,
+            x2: e / L.value * x.value,
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.gridOpacity,
             "stroke-width": "1"
-          }, null, 8, ze))), 128)) : f("", !0),
-          i.showXLabels ? (o(!0), n(d, { key: 1 }, v(C.value, (e) => (o(), n("text", {
+          }, null, 8, Te))), 128)) : m("", !0),
+          i.showXLabels ? (n(!0), u(d, { key: 1 }, h(B.value, (e) => (n(), u("text", {
             key: `xt-${e}`,
-            x: e / V.value * b.value,
+            x: e / L.value * x.value,
             y: -8,
             "text-anchor": "middle",
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, k(i.formatValue ? i.formatValue(e) : w(Y)(e)), 9, Xe))), 128)) : f("", !0),
-          i.showYLabels ? (o(!0), n(d, { key: 2 }, v(x.value, (e, a) => (o(), n("text", {
+          }, p(i.formatValue ? i.formatValue(e) : k(R)(e)), 9, We))), 128)) : m("", !0),
+          i.showYLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, a) => (n(), u("text", {
             key: `yl-${a}`,
             x: -12,
-            y: (a + 0.5) * (c.value / x.value.length),
+            y: (a + 0.5) * (c.value / v.value.length),
             "text-anchor": "end",
             "dominant-baseline": "middle",
             "font-size": "11",
             class: "fill-muted-foreground"
-          }, k(e), 9, Ae))), 128)) : f("", !0),
-          (o(!0), n(d, null, v(ee.value, (e, a) => (o(), n("g", { key: a }, [
-            (o(!0), n(d, null, v(e.bars, (s, u) => (o(), n("path", {
-              key: u,
-              d: oe(s.x, s.y, s.bw, s.h, i.barRadius),
-              fill: p.value ? `url(#bgrad-${w(O)}-${u})` : `url(#bgrad-single-${w(O)}-${a})`,
-              opacity: R.value !== null && R.value !== a ? 0.5 : 1,
+          }, p(e), 9, Pe))), 128)) : m("", !0),
+          (n(!0), u(d, null, h(ae.value, (e, a) => (n(), u("g", { key: a }, [
+            (n(!0), u(d, null, h(e.bars, (o, r) => (n(), u("path", {
+              key: r,
+              d: re(o.x, o.y, o.bw, o.h, i.barRadius),
+              fill: $.value ? `url(#bgrad-${k(O)}-${r})` : `url(#bgrad-single-${k(O)}-${a})`,
+              opacity: X.value !== null && X.value !== a ? 0.5 : 1,
               class: "transition-opacity duration-150"
-            }, null, 8, Ge))), 128)),
-            i.showValues ? (o(!0), n(d, { key: 0 }, v(e.bars, (s, u) => (o(), n("text", {
-              key: `hvl-${u}`,
-              x: s.bw + 6,
-              y: s.y + s.h / 2,
+            }, null, 8, He))), 128)),
+            i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (o, r) => (n(), u("text", {
+              key: `hvl-${r}`,
+              x: o.bw + 6,
+              y: o.y + o.h / 2,
               "dominant-baseline": "middle",
               "font-size": "10",
               "font-weight": "600",
               class: "fill-foreground"
-            }, k(i.formatValue ? i.formatValue(s.val) : w(Y)(s.val)), 9, Te))), 128)) : f("", !0)
+            }, p(i.formatValue ? i.formatValue(o.val) : k(R)(o.val)), 9, Ne))), 128)) : m("", !0)
           ]))), 128)),
-          i.showYAxis ? (o(), n("line", {
+          i.showYAxis ? (n(), u("line", {
             key: 3,
             x1: 0,
             y1: 0,
@@ -329,41 +344,41 @@ const ye = {
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, Se)) : f("", !0),
-          i.showXAxis ? (o(), n("line", {
+          }, null, 8, Qe)) : m("", !0),
+          i.showXAxis ? (n(), u("line", {
             key: 4,
             x1: 0,
             y1: c.value,
-            x2: b.value,
+            x2: x.value,
             y2: c.value,
             stroke: "currentColor",
             "stroke-opacity": i.axisOpacity
-          }, null, 8, We)) : f("", !0)
-        ], 8, Oe))
-      ], 40, me)),
-      (o(), ce(de, { to: "body" }, [
-        B.value ? (o(), n("div", {
+          }, null, 8, Ze)) : m("", !0)
+        ], 8, Ge))
+      ], 40, pe)),
+      (n(), me(ye, { to: "body" }, [
+        Y.value ? (n(), u("div", {
           key: 0,
           class: "vlite-chart-tooltip",
-          style: F({ left: `${B.value.x + 12}px`, top: `${B.value.y - 10}px` })
+          style: _({ left: `${Y.value.x + 12}px`, top: `${Y.value.y - 10}px` })
         }, [
-          M("div", Pe, k(B.value.label), 1),
-          (o(!0), n(d, null, v(B.value.items, (e) => (o(), n("div", {
+          w("div", De, p(Y.value.label), 1),
+          (n(!0), u(d, null, h(Y.value.items, (e) => (n(), u("div", {
             key: e.label,
             class: "flex items-center gap-1.5 text-xs"
           }, [
-            M("span", {
+            w("span", {
               class: "w-2 h-2 rounded-sm shrink-0",
-              style: F({ backgroundColor: e.color })
+              style: _({ backgroundColor: e.color })
             }, null, 4),
-            e.label ? (o(), n("span", He, k(e.label) + ":", 1)) : f("", !0),
-            M("span", Ne, k(e.value), 1)
+            e.label ? (n(), u("span", Ee, p(e.label) + ":", 1)) : m("", !0),
+            w("span", Fe, p(e.value), 1)
           ]))), 128))
-        ], 4)) : f("", !0)
+        ], 4)) : m("", !0)
       ]))
     ], 512));
   }
 });
 export {
-  Ee as default
+  _e as default
 };

package/components/Chart/LineChart.vue.js

@@ -1,7 +1,7 @@
 import o from "./LineChart.vue2.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-69f3c8c9"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-07c9fb47"]]);
 export {
-  f as default
+  m as default
 };