x-next 1.7.0 → 1.8.0

package/dist/es/components/line-chart/LineChart.js

@@ -0,0 +1,532 @@
+import { defineComponent as Le, createVNode as v, mergeProps as Ce, Fragment as Te, ref as re, reactive as Ae, computed as i, watch as de, nextTick as Se } from "vue";
+import { getComponentPrefix as Ee, getClassNameMixin as Ne } from "../../_utils/config.js";
+import { useLocale as Ve } from "../../locale/index.js";
+import { isObject as Pe } from "../../_utils/is.js";
+import { useChartSize as ze } from "../../_hooks/use-chart-size.js";
+import { getSeriesColor as Fe } from "../_components/chart/colors.js";
+import { Spin as _e } from "../spin/index.js";
+import De from "../_components/chart/ChartAxis.js";
+import $e from "../_components/chart/ChartLegend.js";
+import Oe from "../_components/chart/ChartTooltip.js";
+import { lineChartProps as Re } from "./props.js";
+import { buildStackedLayers as We, buildLineChartSeries as ve } from "./helpers/layout.js";
+import { getDomain as He, estimateTextWidth as he, pickLabelIndices as Xe } from "../../_utils/chart/scale.js";
+import { getPadding as Ye } from "../../_utils/chart/padding.js";
+const Be = 4, me = 10, je = 60, ot = /* @__PURE__ */ Le({
+  name: Ee("LineChart"),
+  props: Re,
+  emits: {
+    /**
+     * @zh 点击数据点或绘图区时触发
+     * @en Emitted when a data point or the plot area is clicked
+     */
+    "line-click": (a) => !0,
+    /**
+     * @zh 图例切换后触发，参数为当前可见的系列下标
+     * @en Emitted after a legend toggle, with the visible series indexes
+     */
+    "legend-change": (a) => !0
+  },
+  slots: Object,
+  setup(a, {
+    emit: I,
+    slots: W
+  }) {
+    const {
+      t: w
+    } = Ve(), h = Ne("line-chart"), Q = re(null), H = re(null), F = re(null), Z = {
+      root: Q,
+      canvas: H,
+      tooltip: F
+    }, s = Ae({
+      activeIndex: null,
+      /** 键盘导航触发的激活态才做读屏播报，鼠标悬浮不播报 */
+      keyboardActive: !1,
+      hiddenIndexes: [],
+      tooltipWidth: 0
+    }), {
+      size: T
+    } = ze({
+      elementRef: H,
+      width: () => a.width,
+      height: () => a.height
+    }), y = i(() => {
+      var e;
+      return ((e = a.labels) == null ? void 0 : e.fontSize) ?? 12;
+    }), _ = i(() => {
+      var e;
+      return ((e = a.labels) == null ? void 0 : e.yVisible) !== !1;
+    }), X = i(() => {
+      var e;
+      return ((e = a.labels) == null ? void 0 : e.xVisible) !== !1;
+    }), p = i(() => {
+      var e;
+      return Math.max(2, Math.floor(((e = a.grid) == null ? void 0 : e.horizontalLinesNumber) ?? Be));
+    }), Y = i(() => {
+      var e;
+      return ((e = a.grid) == null ? void 0 : e.horizontalLines) !== !1;
+    }), x = i(() => a.series ?? []), B = i(() => (a.categories ?? []).map((e) => String(e))), k = i(() => x.value.length), b = i(() => k.value === 0 ? [] : Array.from({
+      length: k.value
+    }, (e, t) => t).filter((e) => !s.hiddenIndexes.includes(e))), c = i(() => {
+      const e = x.value.reduce((t, n) => Math.max(t, (n.data ?? []).length), 0);
+      return Math.max(B.value.length, e);
+    }), A = i(() => x.value.map((e) => {
+      const t = e.data ?? [];
+      return Array.from({
+        length: c.value
+      }, (n, l) => {
+        const r = t[l];
+        return Number.isFinite(r) ? r : null;
+      });
+    })), D = i(() => b.value.map((e) => A.value[e] ?? [])), S = i(() => a.stack ? We(D.value) : []), $ = i(() => {
+      if (!a.stack) return D.value;
+      const e = [];
+      return S.value.forEach((t) => {
+        e.push(t.base.map((n) => n)), e.push(t.top.map((n) => n));
+      }), e;
+    }), j = i(() => A.value.some((e) => e.some((t) => t !== null))), K = i(() => {
+      let e = 0, t = 0;
+      return $.value.forEach((n) => {
+        n.forEach((l) => {
+          l === null || !Number.isFinite(l) || (l < e && (e = l), l > t && (t = l));
+        });
+      }), {
+        min: e,
+        max: t
+      };
+    }), g = i(() => He(K.value.min, K.value.max, p.value, a.min, a.max)), M = i(() => a.valueFormatter), G = (e) => {
+      var t;
+      return (t = a.labels) != null && t.yFormatter ? a.labels.yFormatter(e) : M.value(e);
+    }, ee = i(() => {
+      var e;
+      return ((e = a.labels) == null ? void 0 : e.color) ?? "var(--x-chart-color-axis-text)";
+    }), L = (e) => {
+      var n;
+      const t = B.value[e] ?? String(e + 1);
+      return (n = a.labels) != null && n.xFormatter ? a.labels.xFormatter(t, e) : t;
+    }, te = i(() => {
+      if (!_.value) return 0;
+      const e = g.value.ticks, t = e.reduce((n, l) => Math.max(n, he(G(l), y.value)), 0);
+      return e.length ? Math.round(t) + 6 : 0;
+    }), ne = i(() => !X.value || c.value === 0 ? 0 : Math.ceil(8 + y.value * 1.15)), f = i(() => {
+      const e = Ye(a.padding), t = _.value ? Math.ceil(y.value * 0.7) : 0, n = e.left + te.value, l = Math.max(e.top, t), r = T.width - e.right, d = T.height - e.bottom - ne.value;
+      return {
+        left: n,
+        top: l,
+        right: r,
+        bottom: d,
+        width: Math.max(0, r - n),
+        height: Math.max(0, d - l)
+      };
+    }), U = (e) => {
+      const {
+        min: t,
+        max: n
+      } = g.value, l = n - t;
+      if (l <= 0) return f.value.bottom;
+      const r = (e - t) / l;
+      return f.value.bottom - Math.min(1, Math.max(0, r)) * f.value.height;
+    }, E = i(() => U(Math.max(0, g.value.min))), N = i(() => a.stack ? ve({
+      values: S.value.map((e) => e.top),
+      lower: S.value.map((e) => e.base),
+      plot: f.value,
+      domainMin: g.value.min,
+      domainMax: g.value.max,
+      smooth: a.smooth,
+      connectNulls: !1,
+      area: a.area,
+      baseline: E.value
+    }) : ve({
+      values: D.value,
+      plot: f.value,
+      domainMin: g.value.min,
+      domainMax: g.value.max,
+      smooth: a.smooth,
+      connectNulls: a.connectNulls,
+      area: a.area,
+      baseline: E.value
+    })), V = (e) => {
+      var t;
+      return ((t = x.value[e]) == null ? void 0 : t.color) ?? Fe(e);
+    }, le = i(() => {
+      if (c.value === 0) return [];
+      const e = f.value.width / c.value, t = Array.from({
+        length: c.value
+      }, (n, l) => he(L(l), y.value)).reduce((n, l) => Math.max(n, l), 0);
+      return Xe(c.value, e, t, y.value * 0.6);
+    }), ae = i(() => g.value.ticks.map((e) => ({
+      y: U(e),
+      label: G(e),
+      isBaseline: e === 0
+    }))), q = i(() => {
+      const e = c.value > 0 ? f.value.width / c.value : 0;
+      return Array.from({
+        length: c.value
+      }, (t, n) => f.value.left + e * (n + 0.5));
+    }), ie = i(() => le.value.map((e) => ({
+      x: q.value[e] ?? 0,
+      text: L(e)
+    }))), u = i(() => a.showPoints === !0 ? !0 : a.showPoints === !1 ? !1 : N.value.reduce((e, t) => e + t.points.length, 0) <= je), o = i(() => {
+      const e = s.activeIndex;
+      if (e === null || e < 0 || e >= c.value) return null;
+      const t = b.value.map((l) => {
+        var r, d, m;
+        return {
+          seriesIndex: l,
+          name: (r = x.value[l]) == null ? void 0 : r.name,
+          value: a.stack ? ((d = S.value[b.value.indexOf(l)]) == null ? void 0 : d.values[e]) ?? null : ((m = A.value[l]) == null ? void 0 : m[e]) ?? null,
+          color: V(l)
+        };
+      }).filter((l) => l.value !== null || b.value.length === 1), n = t.reduce((l, r) => l + (r.value ?? 0), 0);
+      return {
+        index: e,
+        label: L(e),
+        items: t,
+        total: n
+      };
+    }), P = i(() => {
+      const e = o.value;
+      return e ? {
+        ...e,
+        formatValue: M.value
+      } : null;
+    }), O = i(() => {
+      var e;
+      return (((e = o.value) == null ? void 0 : e.items) ?? []).map((t) => ({
+        key: t.seriesIndex,
+        name: t.name ?? se(t.seriesIndex),
+        value: t.value === null ? "-" : M.value(t.value),
+        color: t.color
+      }));
+    }), fe = i(() => {
+      const e = o.value;
+      return !e || e.items.length <= 1 || !e.items.some((n) => n.value !== null) ? null : {
+        label: w("chart.total"),
+        value: M.value(e.total)
+      };
+    }), xe = i(() => {
+      const e = o.value;
+      if (!e) return {};
+      const t = s.tooltipWidth / 2 || 0, n = q.value[e.index] ?? 0, l = t + 4, r = Math.max(l, T.width - t - 4), d = Math.min(Math.max(n, l), r);
+      let m = f.value.bottom;
+      N.value.forEach((J) => {
+        const R = J.points.find((z) => z.index === e.index);
+        R && R.y < m && (m = R.y);
+      });
+      const C = Math.max(me, m - me);
+      return {
+        left: `${d}px`,
+        top: `${C}px`
+      };
+    }), se = (e) => {
+      var t;
+      return ((t = x.value[e]) == null ? void 0 : t.name) ?? w("chart.seriesName", {
+        index: e + 1
+      });
+    }, ge = i(() => x.value.map((e, t) => ({
+      key: t,
+      name: se(t),
+      color: V(t),
+      hidden: s.hiddenIndexes.includes(t)
+    })));
+    de(() => [c.value, k.value], () => {
+      s.activeIndex !== null && s.activeIndex >= c.value && (s.activeIndex = null), s.hiddenIndexes = s.hiddenIndexes.filter((e) => e < k.value);
+    }), de(() => s.activeIndex, (e) => {
+      e !== null && Se(() => {
+        var n;
+        const t = ((n = F.value) == null ? void 0 : n.offsetWidth) ?? 0;
+        t !== s.tooltipWidth && (s.tooltipWidth = t);
+      });
+    });
+    const oe = (e) => {
+      const {
+        left: t,
+        width: n
+      } = f.value;
+      if (n <= 0 || e < t || e > t + n) return null;
+      const l = n / c.value;
+      return Math.min(c.value - 1, Math.max(0, Math.floor((e - t) / l)));
+    }, be = (e) => {
+      var J;
+      const t = e.currentTarget.getBoundingClientRect(), n = e.clientY - t.top, l = e.target, r = (J = l == null ? void 0 : l.closest) == null ? void 0 : J.call(l, "[data-line-point]");
+      if (r)
+        return {
+          seriesIndex: Number(r.getAttribute("data-line-series")),
+          value: Number(r.getAttribute("data-line-value"))
+        };
+      const d = oe(e.clientX - t.left);
+      if (d === null) return {
+        seriesIndex: null,
+        value: null
+      };
+      let m = null, C = Number.POSITIVE_INFINITY;
+      return N.value.forEach((R) => {
+        const z = R.points.find((ke) => ke.index === d);
+        if (!z) return;
+        const ce = Math.abs(z.y - n);
+        ce < C && (C = ce, m = {
+          seriesIndex: z.seriesIndex,
+          value: z.value
+        });
+      }), m ?? {
+        seriesIndex: null,
+        value: null
+      };
+    }, Ie = (e) => {
+      if (!a.tooltip || !j.value) return;
+      const t = e.currentTarget.getBoundingClientRect();
+      s.keyboardActive = !1, s.activeIndex = oe(e.clientX - t.left);
+    }, ue = () => {
+      s.activeIndex = null, s.keyboardActive = !1;
+    }, ye = (e) => {
+      const t = oe(e.clientX - e.currentTarget.getBoundingClientRect().left);
+      if (t === null) return;
+      const n = be(e), l = o.value, r = (l == null ? void 0 : l.index) === t ? l.items : b.value.map((d) => {
+        var m, C;
+        return {
+          seriesIndex: d,
+          name: (m = x.value[d]) == null ? void 0 : m.name,
+          value: ((C = A.value[d]) == null ? void 0 : C[t]) ?? null,
+          color: V(d)
+        };
+      });
+      I("line-click", {
+        index: t,
+        label: L(t),
+        items: r,
+        total: r.reduce((d, m) => d + (m.value ?? 0), 0),
+        seriesIndex: n.seriesIndex,
+        value: n.value
+      });
+    }, pe = (e) => {
+      if (!a.tooltip) return;
+      const t = c.value - 1;
+      if (t < 0) return;
+      let n = null;
+      if (e.key === "ArrowRight") n = Math.min(t, (s.activeIndex ?? -1) + 1);
+      else if (e.key === "ArrowLeft") n = Math.max(0, (s.activeIndex ?? t + 1) - 1);
+      else if (e.key === "Home") n = 0;
+      else if (e.key === "End") n = t;
+      else if (e.key === "Escape") {
+        ue();
+        return;
+      }
+      n !== null && (e.preventDefault(), s.keyboardActive = !0, s.activeIndex = n);
+    }, Me = (e) => {
+      const t = s.hiddenIndexes.includes(e) ? s.hiddenIndexes.filter((n) => n !== e) : [...s.hiddenIndexes, e];
+      s.hiddenIndexes = t, I("legend-change", Array.from({
+        length: k.value
+      }, (n, l) => l).filter((n) => !t.includes(n)));
+    }, we = i(() => {
+      const e = o.value;
+      if (!s.keyboardActive || !e) return "";
+      const t = e.items.map((n) => {
+        const l = n.name ?? se(n.seriesIndex), r = n.value === null ? w("common.noData") : M.value(n.value);
+        return `${l} ${r}`;
+      });
+      return `${e.label}：${t.join("，")}`;
+    });
+    return {
+      className: h,
+      state: s,
+      size: T,
+      refs: Z,
+      slots: W,
+      t: w,
+      fontSize: y,
+      labelColor: ee,
+      yVisible: _,
+      xVisible: X,
+      showHorizontalLines: Y,
+      seriesList: x,
+      visibleSeriesIndexes: b,
+      categoryCount: c,
+      hasData: j,
+      plot: f,
+      domain: g,
+      seriesPaths: N,
+      pointsAlwaysVisible: u,
+      axisTicks: ae,
+      axisXLabels: ie,
+      activeCategory: o,
+      tooltipSlotProps: P,
+      tooltipEntries: O,
+      tooltipTotal: fe,
+      tooltipStyle: xe,
+      legendItems: ge,
+      categoryLabel: L,
+      formatValue: M,
+      seriesColor: V,
+      liveText: we,
+      handleMouseMove: Ie,
+      handleClick: ye,
+      handleKeydown: pe,
+      clearActive: ue,
+      toggleSeries: Me,
+      setTooltipElement: (e) => {
+        F.value = e;
+      }
+    };
+  },
+  render() {
+    const {
+      className: a,
+      state: I,
+      size: W,
+      refs: w,
+      slots: h,
+      t: Q,
+      fontSize: H,
+      labelColor: F,
+      yVisible: Z,
+      xVisible: s,
+      showHorizontalLines: T,
+      seriesList: y,
+      visibleSeriesIndexes: _,
+      hasData: X,
+      plot: p,
+      seriesPaths: Y,
+      pointsAlwaysVisible: x,
+      axisTicks: B,
+      axisXLabels: k,
+      tooltipSlotProps: b,
+      tooltipEntries: c,
+      tooltipTotal: A,
+      tooltipStyle: D,
+      legendItems: S,
+      seriesColor: $,
+      liveText: j,
+      handleMouseMove: K,
+      handleClick: g,
+      handleKeydown: M,
+      clearActive: G,
+      toggleSeries: ee,
+      setTooltipElement: L,
+      categoryCount: te,
+      area: ne
+    } = this, f = typeof this.width == "number" ? `${this.width}px` : this.width, U = typeof this.height == "number" ? `${this.height}px` : this.height, E = W.width > 0 && W.height > 0 && p.width > 0, N = () => Y.map((u) => {
+      const o = $(u.seriesIndex), P = I.activeIndex !== null && u.points.some((O) => O.index === I.activeIndex);
+      return v("g", {
+        key: u.seriesIndex,
+        class: [a.element("series"), {
+          [a.is("active")]: P
+        }],
+        "data-line-series": u.seriesIndex
+      }, [ne && u.areaD && v("path", {
+        class: a.element("area"),
+        d: u.areaD,
+        fill: o,
+        "data-line-area": u.seriesIndex
+      }, null), v("path", {
+        class: a.element("line"),
+        d: u.d,
+        fill: "none",
+        stroke: o
+      }, null)]);
+    }), V = () => !E || x === !1 ? null : v("g", {
+      class: a.element("points")
+    }, [Y.flatMap((u) => u.points.map((o) => {
+      const P = I.activeIndex === o.index, O = h.point ? h.point({
+        seriesIndex: o.seriesIndex,
+        index: o.index,
+        value: o.value,
+        x: o.x,
+        y: o.y,
+        color: $(o.seriesIndex)
+      }) : v("circle", {
+        class: a.element("point-dot"),
+        cx: o.x,
+        cy: o.y,
+        r: P ? 4.5 : 3,
+        fill: $(o.seriesIndex)
+      }, null);
+      return v("g", {
+        key: `${o.seriesIndex}-${o.index}`,
+        class: [a.element("point"), {
+          [a.is("active")]: P
+        }],
+        "data-line-point": o.index,
+        "data-line-series": o.seriesIndex,
+        "data-line-value": o.value
+      }, [O]);
+    }))]), le = () => {
+      if (I.activeIndex === null || !E) return null;
+      const u = p.left + p.width / Math.max(1, te) * (I.activeIndex + 0.5);
+      return v("line", {
+        class: a.element("active-line"),
+        x1: u,
+        x2: u,
+        y1: p.top,
+        y2: p.bottom
+      }, null);
+    }, ae = () => !this.legend || y.length === 0 ? null : v($e, {
+      items: S,
+      onToggle: ee
+    }, h.legend ? {
+      default: () => {
+        var u;
+        return (u = h.legend) == null ? void 0 : u.call(h, {
+          series: y,
+          hiddenIndexes: I.hiddenIndexes
+        });
+      }
+    } : void 0), q = () => !this.tooltip || !b ? null : v(Oe, {
+      visible: !0,
+      title: b.label,
+      entries: c,
+      total: A,
+      position: D,
+      onElement: L
+    }, h.tooltip ? {
+      default: () => {
+        var u;
+        return (u = h.tooltip) == null ? void 0 : u.call(h, b);
+      }
+    } : void 0), ie = () => X && _.length > 0 ? null : v("div", {
+      class: "x-chart--empty"
+    }, [h.empty ? h.empty() : Q("common.noData")]);
+    return v("div", {
+      ref: w.root,
+      class: a.block
+    }, [v(_e, Ce(Pe(this.loading) ? this.loading : {
+      loading: this.loading
+    }, {
+      display: "block"
+    }), {
+      default: () => [v("div", {
+        ref: w.canvas,
+        class: a.element("canvas"),
+        role: this.ariaLabel ? "img" : void 0,
+        "aria-label": this.ariaLabel
+      }, [v("svg", {
+        class: a.element("svg"),
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+          width: f,
+          height: U
+        },
+        "aria-hidden": this.ariaLabel ? "true" : void 0,
+        tabindex: this.tooltip ? 0 : void 0,
+        onMousemove: K,
+        onMouseleave: G,
+        onClick: g,
+        onKeydown: M
+      }, [E && v(Te, null, [v(De, {
+        plot: p,
+        ticks: B,
+        xLabels: k,
+        fontSize: H,
+        color: F,
+        showX: s,
+        showY: Z,
+        showHorizontalLines: T
+      }, null), le(), N(), V()])]), q(), ie()])]
+    }), ae(), v("span", {
+      class: "x-chart--live",
+      "aria-live": "polite"
+    }, [j])]);
+  }
+});
+export {
+  ot as default
+};

package/dist/es/components/line-chart/helpers/layout.js

@@ -0,0 +1,80 @@
+const t = (f) => Math.round(f * 100) / 100, I = (f) => {
+  const { values: h, lower: r, plot: s, domainMin: x, domainMax: p, smooth: L, connectNulls: M, area: l, baseline: i } = f, d = h.reduce((e, c) => Math.max(e, c.length), 0), X = d > 0 ? s.width / d : 0, w = p - x, k = (e) => s.left + X * (e + 0.5), S = (e) => {
+    if (w <= 0) return s.bottom;
+    const c = (e - x) / w;
+    return s.bottom - Math.min(1, Math.max(0, c)) * s.height;
+  }, j = (e) => {
+    if (!e.length) return "";
+    if (e.length === 1) return `M${t(e[0].x)},${t(e[0].y)}`;
+    if (!L)
+      return e.map((a, $) => `${$ === 0 ? "M" : "L"}${t(a.x)},${t(a.y)}`).join("");
+    let c = `M${t(e[0].x)},${t(e[0].y)}`;
+    for (let a = 1; a < e.length; a += 1) {
+      const $ = e[a - 1], o = e[a], g = ($.x + o.x) / 2;
+      c += `C${t(g)},${t($.y)} ${t(g)},${t(o.y)} ${t(
+        o.x
+      )},${t(o.y)}`;
+    }
+    return c;
+  }, C = [];
+  for (let e = 0; e < h.length; e += 1) {
+    const c = h[e] ?? [], a = (r == null ? void 0 : r[e]) ?? [], $ = [], o = [], g = [];
+    let y = [], v = [];
+    const N = () => {
+      y.length && (o.push(y), g.push(v)), y = [], v = [];
+    };
+    for (let n = 0; n < c.length; n += 1) {
+      const u = c[n];
+      if (u == null || !Number.isFinite(u)) {
+        M || N();
+        continue;
+      }
+      M && y.length === 0 && o.length && (y = o.pop(), v = g.pop());
+      const m = k(n);
+      if ($.push({ index: n, seriesIndex: e, value: u, x: t(m), y: t(S(u)) }), y.push({ x: m, y: S(u) }), r !== void 0) {
+        const b = a[n];
+        v.push({
+          x: m,
+          y: S(Number.isFinite(b) ? b : 0)
+        });
+      }
+    }
+    N();
+    const z = o.map((n) => j(n)).filter(Boolean).join("");
+    let F = "";
+    l && o.length && (F = o.map((n, u) => {
+      if (!n.length) return "";
+      const m = j(n), b = n[n.length - 1], Z = n[0];
+      if (r !== void 0) {
+        const A = [...g[u] ?? []].reverse().map((B) => `L${t(B.x)},${t(B.y)}`).join("");
+        return A ? `${m}${A}Z` : `${m}L${t(b.x)},${t(
+          i
+        )}L${t(Z.x)},${t(i)}Z`;
+      }
+      return `${m}L${t(b.x)},${t(i)}L${t(Z.x)},${t(
+        i
+      )}Z`;
+    }).filter(Boolean).join("")), C.push({ seriesIndex: e, d: z, areaD: F, points: $ });
+  }
+  return C;
+}, P = (f) => {
+  const h = f.reduce((s, x) => Math.max(s, x.length), 0), r = new Array(h).fill(0);
+  return f.map((s, x) => {
+    const p = Array.from({ length: h }, (l, i) => {
+      const d = s[i];
+      return Number.isFinite(d) && d > 0 ? d : 0;
+    }), L = p.map((l, i) => r[i] + l), M = {
+      seriesIndex: x,
+      values: p,
+      base: [...r],
+      top: [...L]
+    };
+    for (let l = 0; l < h; l += 1)
+      r[l] = L[l];
+    return M;
+  });
+};
+export {
+  I as buildLineChartSeries,
+  P as buildStackedLayers
+};

package/dist/es/components/line-chart/index.js

@@ -0,0 +1,8 @@
+import t from "./LineChart.js";
+import { generateComponent as e } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as o } from "../../_utils/config.js";
+const i = e(o("LineChart"), t);
+export {
+  i as LineChart,
+  i as default
+};