x-next 1.3.1 → 1.4.0

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

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

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

@@ -1,79 +1,144 @@
-import { defineComponent as T, computed as s, createVNode as c } from "vue";
-import W from "../helpers/genPoints.js";
-import E from "../helpers/genPath.js";
-import { getComponentPrefix as F } from "../../../_utils/config.js";
+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 G = /* @__PURE__ */ T({
-  name: F("TrendChartCurve"),
+const _ = /* @__PURE__ */ T({
+  name: O("TrendChartCurve"),
   props: S,
   setup(e) {
-    const u = s(() => W(e.data, e.boundary, e.maxValue, e.minValue, e.maxAmount)), m = s(() => E([...u.value], e.smooth, e.boundary)), b = s(() => {
-      var a;
-      return e.fill && ((a = m.value) == null ? void 0 : a.fillPath) && u.value.length > 1 && e.maxValue !== e.minValue;
-    }), A = s(() => {
-      var h, d, f, v, x, y, P, k, C, g, V;
-      const a = [];
-      b.value && a.push(c("path", {
+    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;
+    }), 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 ? {
+        fill: l,
+        stroke: l,
+        strokeWidth: 1
+      } : {
+        fill: l,
+        opacity: (f = (m = e.theme) == null ? void 0 : m.point) == null ? void 0 : f.opacity
+      };
+    }, N = i(() => {
+      var a, n, c, r, m, f, P;
+      const t = [];
+      k.value && t.push(o("path", {
         class: "x-trend-chart-fill",
-        d: m.value.fillPath,
+        d: v.value.fillPath,
         fill: "none",
         style: {
-          fill: ((d = (h = e.theme) == null ? void 0 : h.fill) == null ? void 0 : d.color) || "var(--x-color-text-secondary)",
-          opacity: ((v = (f = e.theme) == null ? void 0 : f.fill) == null ? void 0 : v.opacity) ?? 0.1
+          fill: g.value ? `url(#${x})` : y.value,
+          opacity: g.value ? 1 : b.value
         }
-      }, null)), e.stroke && ((x = m.value) != null && x.linePath) && a.push(c("path", {
+      }, null)), e.stroke && ((a = v.value) != null && a.linePath) && t.push(o("path", {
         class: "x-trend-chart-stroke",
-        d: m.value.linePath,
+        d: v.value.linePath,
         fill: "none",
         stroke: "none",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
         style: {
-          stroke: (P = (y = e.theme) == null ? void 0 : y.stroke) == null ? void 0 : P.color,
-          strokeWidth: (C = (k = e.theme) == null ? void 0 : k.stroke) == null ? void 0 : C.width,
-          opacity: (V = (g = e.theme) == null ? void 0 : g.stroke) == null ? void 0 : V.opacity
+          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
         }
       }, null));
-      const N = (i) => {
-        var t, l;
-        const n = ((l = (t = e.theme) == null ? void 0 : t.point) == null ? void 0 : l.width) ?? 3;
-        return i ? n + 1 : n;
-      }, R = (i) => {
-        var t, l, o, r, w, L;
-        const n = ((l = (t = e.theme) == null ? void 0 : t.point) == null ? void 0 : l.color) ?? ((r = (o = e.theme) == null ? void 0 : o.stroke) == null ? void 0 : r.color);
-        return i ? {
-          fill: n,
-          stroke: n,
+      const l = h.value.map((s, d) => ({
+        point: s,
+        index: d
+      })).filter(({
+        index: s
+      }) => w.value || s === u.value);
+      return l.length && t.push(o("g", {
+        class: "x-trend-chart-points"
+      }, [l.map(({
+        point: s,
+        index: d
+      }) => o("circle", {
+        key: d,
+        class: {
+          point: !0,
+          "x-trend-chart-point-active": u.value === d
+        },
+        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)
+        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;
+      return o("g", {
+        class: "x-trend-chart-tooltip",
+        "pointer-events": "none"
+      }, [o("rect", {
+        x: t.x - a / 2,
+        y: r,
+        width: a,
+        height: n,
+        rx: 4,
+        style: {
+          fill: "var(--x-color-bg-popup)",
+          stroke: "var(--x-color-border-subtle)",
           strokeWidth: 1
-        } : {
-          fill: n,
-          opacity: (L = (w = e.theme) == null ? void 0 : w.point) == null ? void 0 : L.opacity
-        };
-      };
-      if (e.showPoints && u.value) {
-        const i = u.value.map((n, t) => {
-          var l, o, r;
-          return c("circle", {
-            key: t,
-            class: {
-              point: !0,
-              "x-trend-chart-point-active": ((l = e.activeLineParams) == null ? void 0 : l.index) === t
-            },
-            cx: n.x,
-            cy: n.y,
-            r: N(((o = e.activeLineParams) == null ? void 0 : o.index) === t),
-            style: R(((r = e.activeLineParams) == null ? void 0 : r.index) === t)
-          }, null);
-        });
-        a.push(c("g", {
-          class: "x-trend-chart-points"
-        }, [i]));
-      }
-      return a;
+        }
+      }, null), o("text", {
+        x: t.x,
+        y: r + n / 2,
+        "text-anchor": "middle",
+        "dominant-baseline": "middle",
+        style: {
+          fill: "var(--x-color-text-primary)",
+          fontSize: "12px"
+        }
+      }, [l])]);
     });
-    return () => c("g", {
+    return () => o("g", {
       class: e.className
-    }, [A.value]);
+    }, [o("defs", null, [o("linearGradient", {
+      id: x,
+      x1: "0",
+      y1: "0",
+      x2: "0",
+      y2: "1"
+    }, [o("stop", {
+      offset: "0%",
+      "stop-color": y.value,
+      "stop-opacity": b.value
+    }, null), o("stop", {
+      offset: "100%",
+      "stop-color": y.value,
+      "stop-opacity": "0"
+    }, null)])]), o("g", {
+      "clip-path": e.clipPath
+    }, [N.value]), R.value]);
   }
 });
 export {
-  G as default
+  _ as default
 };