x-next 1.6.0 → 1.8.0

package/dist/es/components/trend-chart/components/TrendChart.js

@@ -1,250 +1,210 @@
-import { defineComponent as Z, useId as p, reactive as ee, computed as u, ref as j, onMounted as te, nextTick as f, onUnmounted as le, watch as N, createVNode as m, mergeProps as S, h as ae, Fragment as ne } from "vue";
-import ie from "../helpers/getPadding.js";
-import ue from "../helpers/genPoints.js";
-import { useLocale as oe } from "../../../locale/index.js";
-import F from "./trend-chart-grid.js";
-import E from "./trend-chart-labels.js";
-import $ from "./trend-chart-curve.js";
-import { getComponentPrefix as re } from "../../../_utils/config.js";
-import { trendChartProps as me } from "../props.js";
-import { TrendChartTheme as x } from "../themes.js";
-const we = /* @__PURE__ */ Z({
-  name: re("TrendChart"),
+import { defineComponent as B, useId as U, reactive as _, computed as l, ref as j, onMounted as H, onUnmounted as q, watch as N, nextTick as J, createVNode as m, h as K, Fragment as Q, mergeProps as Z } from "vue";
+import p from "../helpers/genPoints.js";
+import { useLocale as ee } from "../../../locale/index.js";
+import R from "./trend-chart-curve.js";
+import { getComponentPrefix as te } from "../../../_utils/config.js";
+import { trendChartProps as ne } from "../props.js";
+import { TrendChartTheme as d } from "../themes.js";
+import { getPadding as ae } from "../../../_utils/chart/padding.js";
+const ce = /* @__PURE__ */ B({
+  name: te("TrendChart"),
   components: {
-    TrendChartGrid: F,
-    TrendChartLabels: E,
-    TrendChartCurve: $
+    TrendChartCurve: R
   },
-  props: me,
+  props: ne,
   emits: {
     "mouse-move": (t) => !0
   },
   setup(t, {
-    emit: w
+    emit: y
   }) {
     const {
-      t: B
-    } = oe(), A = `x-trend-chart-clip-${p()}`, a = ee({
+      t: T
+    } = ee(), C = `x-trend-chart-clip-${U()}`, i = _({
       width: null,
       height: null,
-      labelsOverflowObject: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-      },
       activeIndex: null
-    }), D = (e, l = {}) => ({
+    }), k = (e, n = {}) => ({
       ...e,
-      ...l,
+      ...n,
       stroke: {
         ...e.stroke,
-        ...l.color ? {
-          color: l.color
+        ...n.color ? {
+          color: n.color
         } : {},
-        ...l.stroke
+        ...n.stroke
       },
       fill: {
         ...e.fill,
-        ...l.color ? {
-          color: l.color
+        ...n.color ? {
+          color: n.color
         } : {},
-        ...l.fill
+        ...n.fill
       },
       point: {
         ...e.point,
-        ...l.color ? {
-          color: l.color
+        ...n.color ? {
+          color: n.color
         } : {},
-        ...l.point
+        ...n.point
       },
       axisLine: {
         ...e.axisLine,
-        ...l.color ? {
-          color: l.color
+        ...n.color ? {
+          color: n.color
         } : {},
-        ...l.axisLine
+        ...n.axisLine
       }
-    }), g = u(() => {
-      let e = x.PRIMARY;
-      return t.status === "success" ? e = x.SUCCESS : t.status === "danger" ? e = x.DANGER : t.status === "warning" ? e = x.WARNING : t.status === "strong" ? e = x.STRONG : t.status === "info" && (e = x.INFO), D(e, t.theme);
-    }), h = u(() => t.dataset.filter((e) => Number.isFinite(e))), G = u(() => h.value.length > 0), c = u(() => ie(t.padding)), n = u(() => {
-      const e = Number(c.value.left) + Number(a.labelsOverflowObject.left), l = Number(c.value.top) + Number(a.labelsOverflowObject.top), i = Math.max(e, (a.width ?? 0) - Number(c.value.right) - Number(a.labelsOverflowObject.right)), o = Math.max(l, (a.height ?? 0) - Number(c.value.bottom) - Number(a.labelsOverflowObject.bottom));
+    }), x = l(() => {
+      let e = d.PRIMARY;
+      return t.status === "success" ? e = d.SUCCESS : t.status === "danger" ? e = d.DANGER : t.status === "warning" ? e = d.WARNING : t.status === "strong" ? e = d.STRONG : t.status === "info" && (e = d.INFO), k(e, t.theme);
+    }), c = l(() => t.dataset.filter((e) => Number.isFinite(e))), V = l(() => c.value.length > 0), g = l(() => ae(t.padding)), a = l(() => {
+      const e = Number(g.value.left), n = Number(g.value.top), u = Math.max(e, (i.width ?? 0) - Number(g.value.right)), o = Math.max(n, (i.height ?? 0) - Number(g.value.bottom));
       return {
         minX: e,
-        minY: l,
-        maxX: i,
+        minY: n,
+        maxX: u,
         maxY: o
       };
-    }), r = u(() => {
-      const e = h.value, l = e.length ? Math.max(...e) : 0, i = e.length ? Math.min(...e) : 0;
-      let o = Number.isFinite(t.max) ? t.max : l, s = Number.isFinite(t.min) ? t.min : i;
-      return s > o && ([s, o] = [o, s]), {
+    }), r = l(() => {
+      const e = c.value, n = e.length ? Math.max(...e) : 0, u = e.length ? Math.min(...e) : 0;
+      let o = Number.isFinite(t.max) ? t.max : n, v = Number.isFinite(t.min) ? t.min : u;
+      return v > o && ([v, o] = [o, v]), {
         maxValue: o,
-        minValue: s,
+        minValue: v,
         maxAmount: e.length
       };
-    }), W = u(() => ({
+    }), F = l(() => ({
       width: typeof t.width == "number" ? `${t.width}px` : t.width,
       height: typeof t.height == "number" ? `${t.height}px` : t.height
-    })), b = u(() => n.value.maxX - n.value.minX), L = u(() => n.value.maxY - n.value.minY), U = u(() => ({
-      x: n.value.minX,
-      y: n.value.minY,
-      width: b.value,
-      height: L.value,
+    })), f = l(() => a.value.maxX - a.value.minX), b = l(() => a.value.maxY - a.value.minY), S = l(() => {
+      var n, u;
+      if (t.showPoints === !1) return 0;
+      const e = Number(((u = (n = x.value) == null ? void 0 : n.point) == null ? void 0 : u.width) ?? 3);
+      return Number.isFinite(e) && e > 0 ? e + 1 : 0;
+    }), w = l(() => {
+      const e = S.value;
+      return {
+        x: a.value.minX - e,
+        y: a.value.minY - e,
+        width: f.value + e * 2,
+        height: b.value + e * 2
+      };
+    }), z = l(() => ({
+      x: a.value.minX,
+      y: a.value.minY,
+      width: f.value,
+      height: b.value,
       opacity: 0
-    })), R = u(() => ({
-      x: n.value.minX + b.value / 2,
-      y: n.value.minY + L.value / 2
-    })), X = u(() => {
+    })), L = l(() => ({
+      x: a.value.minX + f.value / 2,
+      y: a.value.minY + b.value / 2
+    })), P = l(() => {
       if (r.value.maxAmount <= 0)
         return [];
       if (r.value.maxAmount === 1)
-        return [Math.round(n.value.minX + b.value / 2)];
-      const e = b.value / (r.value.maxAmount - 1);
+        return [Math.round(a.value.minX + f.value / 2)];
+      const e = f.value / (r.value.maxAmount - 1);
       return Array.from({
         length: r.value.maxAmount
-      }, (l, i) => Math.round(n.value.minX + e * i));
-    }), y = u(() => a.activeIndex === null ? null : X.value[a.activeIndex] ?? null), _ = u(() => ue(h.value, n.value, r.value.maxValue, r.value.minValue, r.value.maxAmount)), H = u(() => {
-      const e = a.activeIndex === null ? null : _.value[a.activeIndex];
-      return e ? Math.min(Math.max(e.y, n.value.minY), n.value.maxY) : n.value.minY;
-    }), v = j(null), M = j(null), O = () => {
-      if (v.value) {
-        const e = v.value.getBoundingClientRect();
-        a.width = e.width, a.height = e.height;
+      }, (n, u) => Math.round(a.value.minX + e * u));
+    }), I = l(() => i.activeIndex === null ? null : P.value[i.activeIndex] ?? null), O = l(() => p(c.value, a.value, r.value.maxValue, r.value.minValue, r.value.maxAmount)), E = l(() => {
+      const e = i.activeIndex === null ? null : O.value[i.activeIndex];
+      return e ? Math.min(Math.max(e.y, a.value.minY), a.value.maxY) : a.value.minY;
+    }), s = j(null), M = () => {
+      if (s.value) {
+        const e = s.value.getBoundingClientRect();
+        i.width = e.width, i.height = e.height;
       }
-    }, C = () => {
-      a.labelsOverflowObject = {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-      };
-    }, I = () => {
-      if (v.value && M.value) {
-        const e = v.value.getBoundingClientRect(), l = M.value.$el.getBoundingClientRect();
-        a.labelsOverflowObject = {
-          top: Math.max(0, Number(e.top) - Number(l.top) + Number(c.value.top)),
-          right: Math.max(0, Number(l.right) - Number(e.right) + Number(c.value.right)),
-          bottom: Math.max(0, Number(l.bottom) - Number(e.bottom) + Number(c.value.bottom)),
-          left: Math.max(0, Number(c.value.left) - Number(l.left) + Number(e.left))
-        };
-      } else
-        C();
-    }, P = () => {
-      O(), f(() => {
-        C(), f(I);
-      });
-    }, q = (e) => {
-      const l = X.value;
-      if (!l.length)
+    }, X = () => {
+      M();
+    }, D = (e) => {
+      const n = P.value;
+      if (!n.length)
         return null;
-      let i = 0;
-      return l.forEach((o, s) => {
-        Math.abs(o - e) < Math.abs(l[i] - e) && (i = s);
-      }), i;
-    }, J = (e) => {
-      if (v.value) {
-        const l = v.value.getBoundingClientRect();
-        a.activeIndex = q(e.clientX - l.left);
+      let u = 0;
+      return n.forEach((o, v) => {
+        Math.abs(o - e) < Math.abs(n[u] - e) && (u = v);
+      }), u;
+    }, G = (e) => {
+      if (s.value) {
+        const n = s.value.getBoundingClientRect();
+        i.activeIndex = D(e.clientX - n.left);
       }
-    }, K = () => {
-      a.activeIndex = null;
+    }, W = () => {
+      i.activeIndex = null;
     };
-    let d = null;
-    const Q = () => {
-      typeof ResizeObserver > "u" || !v.value || (d = new ResizeObserver(() => {
-        P();
-      }), d.observe(v.value));
-    }, V = () => {
-      P();
+    let h = null;
+    const $ = () => {
+      typeof ResizeObserver > "u" || !s.value || (h = new ResizeObserver(() => {
+        X();
+      }), h.observe(s.value));
+    }, A = () => {
+      X();
     };
-    return te(() => {
-      O(), f(I), Q(), window.addEventListener("resize", V);
-    }), le(() => {
-      d == null || d.disconnect(), d = null, window.removeEventListener("resize", V);
-    }), N(() => a.activeIndex, (e) => {
+    return H(() => {
+      M(), $(), window.addEventListener("resize", A);
+    }), q(() => {
+      h == null || h.disconnect(), h = null, window.removeEventListener("resize", A);
+    }), N(() => i.activeIndex, (e) => {
       if (e !== null) {
-        const l = h.value[e];
-        if (l === void 0) {
-          w("mouse-move", null);
+        const n = c.value[e];
+        if (n === void 0) {
+          y("mouse-move", null);
           return;
         }
-        w("mouse-move", {
+        y("mouse-move", {
           index: e,
-          data: l
+          data: n
         });
       } else
-        w("mouse-move", null);
-    }), N(h, (e) => {
-      a.activeIndex !== null && a.activeIndex >= e.length && (a.activeIndex = null);
-    }), N(() => [t.labels, t.dataset, t.min, t.max, t.padding], () => {
-      C(), f(() => {
-        O(), f(I);
-      });
-    }, {
-      deep: !0
-    }), N(() => {
-      var e, l, i, o;
-      return [(e = t.grid) == null ? void 0 : e.verticalLines, (l = t.grid) == null ? void 0 : l.verticalLinesNumber, (o = (i = t.labels) == null ? void 0 : i.xLabels) == null ? void 0 : o.length, h.value.length];
-    }, () => {
+        y("mouse-move", null);
+    }), N(c, (e) => {
+      i.activeIndex !== null && i.activeIndex >= e.length && (i.activeIndex = null);
+    }), N(() => [t.dataset, t.min, t.max, t.padding, t.height], () => {
+      J(M);
     }, {
-      immediate: !0,
       deep: !0
     }), () => {
-      var e, l, i, o, s, Y, T, z, k;
+      var e, n, u, o, v, Y;
       return m("svg", {
         class: "x-trend-chart",
-        ref: v,
+        ref: s,
         xmlns: "http://www.w3.org/2000/svg",
         width: "100%",
         height: "100%",
-        style: W.value,
+        style: F.value,
         role: t.ariaLabel ? "img" : void 0,
         "aria-label": t.ariaLabel
       }, [m("defs", null, [m("clipPath", {
-        id: A
+        id: C
       }, [m("rect", {
-        x: n.value.minX,
-        y: n.value.minY,
-        width: Math.max(0, b.value),
-        height: Math.max(0, L.value)
-      }, null)])]), t.grid && m(F, {
-        class: "grid",
-        verticalLines: t.grid.verticalLines,
-        verticalLinesNumber: t.grid.verticalLinesNumber || ((l = (e = t.labels) == null ? void 0 : e.xLabels) == null ? void 0 : l.length) || r.value.maxAmount,
-        horizontalLines: t.grid.horizontalLines,
-        horizontalLinesNumber: t.grid.horizontalLinesNumber || ((i = t.labels) == null ? void 0 : i.yLabels) || 4,
-        boundary: n.value
-      }, null), t.labels && m(E, S({
-        ref: M,
-        class: "labels"
-      }, t.labels, {
-        boundary: n.value,
-        minValue: r.value.minValue,
-        maxValue: r.value.maxValue
-      }), null), m($, {
+        x: w.value.x,
+        y: w.value.y,
+        width: Math.max(0, w.value.width),
+        height: Math.max(0, w.value.height)
+      }, null)])]), m(R, {
         class: "curve",
-        data: h.value,
-        boundary: n.value,
+        data: c.value,
+        boundary: a.value,
         minValue: r.value.minValue,
         maxValue: r.value.maxValue,
         maxAmount: r.value.maxAmount,
-        activeLineParams: a.activeIndex === null ? null : {
-          index: a.activeIndex
+        activeLineParams: i.activeIndex === null ? null : {
+          index: i.activeIndex
         },
-        clipPath: `url(#${A})`,
+        clipPath: `url(#${C})`,
         smooth: t.smooth,
         stroke: t.stroke,
         fill: t.fill,
         showPoints: t.showPoints,
         tooltip: t.tooltip,
         tooltipFormatter: t.tooltipFormatter,
-        theme: g.value
-      }, null), !G.value && ae("text", {
+        theme: x.value
+      }, null), !V.value && K("text", {
         class: "x-trend-chart-empty",
-        x: R.value.x,
-        y: R.value.y,
+        x: L.value.x,
+        y: L.value.y,
         "text-anchor": "middle",
         "dominant-baseline": "middle",
         style: {
@@ -252,27 +212,27 @@ const we = /* @__PURE__ */ Z({
           fontSize: "12px",
           pointerEvents: "none"
         }
-      }, B("common.noData")), t.interactive && m(ne, null, [m("line", {
+      }, T("common.noData")), t.interactive && m(Q, null, [m("line", {
         class: "x-trend-chart-active-line",
-        x1: y.value ?? n.value.minX,
-        x2: y.value ?? n.value.minX,
-        y1: H.value,
-        y2: n.value.maxY,
-        visibility: y.value !== null ? "visible" : "hidden",
+        x1: I.value ?? a.value.minX,
+        x2: I.value ?? a.value.minX,
+        y1: E.value,
+        y2: a.value.maxY,
+        visibility: I.value !== null ? "visible" : "hidden",
         style: {
-          stroke: (s = (o = g.value) == null ? void 0 : o.axisLine) == null ? void 0 : s.color,
-          strokeWidth: (T = (Y = g.value) == null ? void 0 : Y.axisLine) == null ? void 0 : T.width,
-          strokeOpacity: (k = (z = g.value) == null ? void 0 : z.axisLine) == null ? void 0 : k.opacity
+          stroke: (n = (e = x.value) == null ? void 0 : e.axisLine) == null ? void 0 : n.color,
+          strokeWidth: (o = (u = x.value) == null ? void 0 : u.axisLine) == null ? void 0 : o.width,
+          strokeOpacity: (Y = (v = x.value) == null ? void 0 : v.axisLine) == null ? void 0 : Y.opacity
         }
-      }, null), m("rect", S({
+      }, null), m("rect", Z({
         class: "x-trend-chart-overlay"
-      }, U.value, {
-        onMousemove: J,
-        onMouseout: K
+      }, z.value, {
+        onMousemove: G,
+        onMouseout: W
       }), null)])]);
     };
   }
 });
 export {
-  we as default
+  ce as default
 };

package/dist/es/components/trend-chart/components/trend-chart-curve.js

@@ -1,106 +1,110 @@
-import { defineComponent as T, useId as W, computed as i, createVNode as o } from "vue";
-import G from "../helpers/genPoints.js";
-import H from "../helpers/genPath.js";
-import { getComponentPrefix as O } from "../../../_utils/config.js";
-import { trendChartCurveProps as S } from "../props.js";
-const _ = /* @__PURE__ */ T({
-  name: O("TrendChartCurve"),
-  props: S,
-  setup(e) {
-    const x = `x-trend-chart-fill-${W()}`, h = i(() => G(e.data, e.boundary, e.maxValue, e.minValue, e.maxAmount)), v = i(() => H([...h.value], e.smooth, e.boundary)), k = i(() => {
-      var t;
-      return e.fill && ((t = v.value) == null ? void 0 : t.fillPath) && h.value.length > 1 && e.maxValue !== e.minValue;
-    }), y = i(() => {
-      var t, l;
-      return ((l = (t = e.theme) == null ? void 0 : t.fill) == null ? void 0 : l.color) || "var(--x-color-text-secondary)";
-    }), b = i(() => {
-      var t, l;
-      return ((l = (t = e.theme) == null ? void 0 : t.fill) == null ? void 0 : l.opacity) ?? 0.1;
+import { defineComponent as I, useId as M, computed as i, createVNode as o } from "vue";
+import N from "../helpers/genPoints.js";
+import { getComponentPrefix as R } from "../../../_utils/config.js";
+import { trendChartCurveProps as A } from "../props.js";
+import { genAreaPath as G, genLinePath as H } from "../../../_utils/chart/path.js";
+import { estimateTextWidth as L } from "../../../_utils/chart/scale.js";
+const j = /* @__PURE__ */ I({
+  name: R("TrendChartCurve"),
+  props: A,
+  setup(t) {
+    const b = `x-trend-chart-fill-${M()}`, h = i(() => N(t.data, t.boundary, t.maxValue, t.minValue, t.maxAmount)), y = i(() => ({
+      linePath: H(h.value, t.smooth),
+      fillPath: G(h.value, t.boundary.maxY, t.smooth)
+    })), k = i(() => {
+      var e;
+      return t.fill && ((e = y.value) == null ? void 0 : e.fillPath) && h.value.length > 1 && t.maxValue !== t.minValue;
+    }), x = i(() => {
+      var e, l;
+      return ((l = (e = t.theme) == null ? void 0 : e.fill) == null ? void 0 : l.color) || "var(--x-color-text-secondary)";
+    }), P = i(() => {
+      var e, l;
+      return ((l = (e = t.theme) == null ? void 0 : e.fill) == null ? void 0 : l.opacity) ?? 0.1;
     }), g = i(() => {
-      var t, l;
-      return (((l = (t = e.theme) == null ? void 0 : t.fill) == null ? void 0 : l.type) ?? "gradient") === "gradient";
-    }), u = i(() => {
-      var t;
-      return ((t = e.activeLineParams) == null ? void 0 : t.index) ?? -1;
-    }), C = 18, w = i(() => {
-      if (e.showPoints === !1) return !1;
-      if (e.showPoints === !0) return !0;
-      const t = h.value.length;
-      return t <= 2 ? !0 : (e.boundary.maxX - e.boundary.minX) / (t - 1) >= C;
-    }), V = (t) => {
-      var a, n;
-      const l = ((n = (a = e.theme) == null ? void 0 : a.point) == null ? void 0 : n.width) ?? 3;
-      return t ? l + 1 : l;
-    }, I = (t) => {
-      var a, n, c, r, m, f;
-      const l = ((n = (a = e.theme) == null ? void 0 : a.point) == null ? void 0 : n.color) ?? ((r = (c = e.theme) == null ? void 0 : c.stroke) == null ? void 0 : r.color);
-      return t ? {
+      var e, l;
+      return (((l = (e = t.theme) == null ? void 0 : e.fill) == null ? void 0 : l.type) ?? "gradient") === "gradient";
+    }), s = i(() => {
+      var e;
+      return ((e = t.activeLineParams) == null ? void 0 : e.index) ?? -1;
+    }), C = 18, X = i(() => {
+      if (t.showPoints === !1) return !1;
+      if (t.showPoints === !0) return !0;
+      const e = h.value.length;
+      return e <= 2 ? !0 : (t.boundary.maxX - t.boundary.minX) / (e - 1) >= C;
+    }), w = (e) => {
+      var n, a;
+      const l = ((a = (n = t.theme) == null ? void 0 : n.point) == null ? void 0 : a.width) ?? 3;
+      return e ? l + 1 : l;
+    }, T = (e) => {
+      var n, a, d, r, u, c;
+      const l = ((a = (n = t.theme) == null ? void 0 : n.point) == null ? void 0 : a.color) ?? ((r = (d = t.theme) == null ? void 0 : d.stroke) == null ? void 0 : r.color);
+      return e ? {
         fill: l,
         stroke: l,
         strokeWidth: 1
       } : {
         fill: l,
-        opacity: (f = (m = e.theme) == null ? void 0 : m.point) == null ? void 0 : f.opacity
+        opacity: (c = (u = t.theme) == null ? void 0 : u.point) == null ? void 0 : c.opacity
       };
-    }, N = i(() => {
-      var a, n, c, r, m, f, P;
-      const t = [];
-      k.value && t.push(o("path", {
+    }, V = i(() => {
+      var n, a, d, r, u, c, v;
+      const e = [];
+      k.value && e.push(o("path", {
         class: "x-trend-chart-fill",
-        d: v.value.fillPath,
+        d: y.value.fillPath,
         fill: "none",
         style: {
-          fill: g.value ? `url(#${x})` : y.value,
-          opacity: g.value ? 1 : b.value
+          fill: g.value ? `url(#${b})` : x.value,
+          opacity: g.value ? 1 : P.value
         }
-      }, null)), e.stroke && ((a = v.value) != null && a.linePath) && t.push(o("path", {
+      }, null)), t.stroke && ((n = y.value) != null && n.linePath) && e.push(o("path", {
         class: "x-trend-chart-stroke",
-        d: v.value.linePath,
+        d: y.value.linePath,
         fill: "none",
         stroke: "none",
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         style: {
-          stroke: (c = (n = e.theme) == null ? void 0 : n.stroke) == null ? void 0 : c.color,
-          strokeWidth: (m = (r = e.theme) == null ? void 0 : r.stroke) == null ? void 0 : m.width,
-          opacity: (P = (f = e.theme) == null ? void 0 : f.stroke) == null ? void 0 : P.opacity
+          stroke: (d = (a = t.theme) == null ? void 0 : a.stroke) == null ? void 0 : d.color,
+          strokeWidth: (u = (r = t.theme) == null ? void 0 : r.stroke) == null ? void 0 : u.width,
+          opacity: (v = (c = t.theme) == null ? void 0 : c.stroke) == null ? void 0 : v.opacity
         }
       }, null));
-      const l = h.value.map((s, d) => ({
-        point: s,
-        index: d
+      const l = h.value.map((m, f) => ({
+        point: m,
+        index: f
       })).filter(({
-        index: s
-      }) => w.value || s === u.value);
-      return l.length && t.push(o("g", {
+        index: m
+      }) => X.value || m === s.value);
+      return l.length && e.push(o("g", {
         class: "x-trend-chart-points"
       }, [l.map(({
-        point: s,
-        index: d
+        point: m,
+        index: f
       }) => o("circle", {
-        key: d,
+        key: f,
         class: {
           point: !0,
-          "x-trend-chart-point-active": u.value === d
+          "x-trend-chart-point-active": s.value === f
         },
-        cx: s.x,
-        cy: s.y,
-        r: V(u.value === d),
-        style: I(u.value === d)
-      }, null))])), t;
-    }), R = i(() => {
-      const t = h.value[u.value];
-      if (!e.tooltip || u.value < 0 || !t)
+        cx: m.x,
+        cy: m.y,
+        r: w(s.value === f),
+        style: T(s.value === f)
+      }, null))])), e;
+    }), W = i(() => {
+      const e = h.value[s.value];
+      if (!t.tooltip || s.value < 0 || !e)
         return null;
-      const l = e.tooltipFormatter(e.data[u.value]), a = Math.max(24, l.length * 7 + 12), n = 18, r = t.y - n - 6 >= e.boundary.minY ? t.y - n - 6 : t.y + 6;
+      const l = t.tooltipFormatter(t.data[s.value]), n = Math.max(24, Math.round(L(l, 12)) + 12), a = 18, r = e.y - a - 6 >= t.boundary.minY ? e.y - a - 6 : e.y + 6, u = t.boundary.minX + n / 2, c = t.boundary.maxX - n / 2, v = c >= u ? Math.min(Math.max(e.x, u), c) : (t.boundary.minX + t.boundary.maxX) / 2;
       return o("g", {
         class: "x-trend-chart-tooltip",
         "pointer-events": "none"
       }, [o("rect", {
-        x: t.x - a / 2,
+        x: v - n / 2,
         y: r,
-        width: a,
-        height: n,
+        width: n,
+        height: a,
         rx: 4,
         style: {
           fill: "var(--x-color-bg-popup)",
@@ -108,8 +112,8 @@ const _ = /* @__PURE__ */ T({
           strokeWidth: 1
         }
       }, null), o("text", {
-        x: t.x,
-        y: r + n / 2,
+        x: v,
+        y: r + a / 2,
         "text-anchor": "middle",
         "dominant-baseline": "middle",
         style: {
@@ -119,26 +123,26 @@ const _ = /* @__PURE__ */ T({
       }, [l])]);
     });
     return () => o("g", {
-      class: e.className
+      class: t.className
     }, [o("defs", null, [o("linearGradient", {
-      id: x,
+      id: b,
       x1: "0",
       y1: "0",
       x2: "0",
       y2: "1"
     }, [o("stop", {
       offset: "0%",
-      "stop-color": y.value,
-      "stop-opacity": b.value
+      "stop-color": x.value,
+      "stop-opacity": P.value
     }, null), o("stop", {
       offset: "100%",
-      "stop-color": y.value,
+      "stop-color": x.value,
       "stop-opacity": "0"
     }, null)])]), o("g", {
-      "clip-path": e.clipPath
-    }, [N.value]), R.value]);
+      "clip-path": t.clipPath
+    }, [V.value]), W.value]);
   }
 });
 export {
-  _ as default
+  j as default
 };