x-next 1.7.0 → 1.8.0

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

@@ -0,0 +1,178 @@
+import { definePropType as t } from "../../_utils/vue-eco.js";
+import { defaultValueFormatter as a } from "../../_utils/chart/scale.js";
+import { validatePadding as l } from "../../_utils/chart/padding.js";
+const d = {
+  /**
+   * @zh 类目轴标签，与每个系列 data 的下标一一对应；缺省时按 1、2、3… 显示
+   * @en Category axis labels, aligned by index with each series data
+   */
+  categories: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @zh 数据系列；单系列为普通折线，多系列可叠放或堆叠
+   * @en Data series; a single series renders a plain line, multiple series can
+   * overlap or stack
+   */
+  series: {
+    required: !0,
+    type: t(Array),
+    default: () => []
+  },
+  /**
+   * @zh 堆叠多系列；折线按值累加，面积按下界与上界填充（堆叠面积）
+   * @en Stack multiple series; lines accumulate and areas fill between the
+   * lower and upper bounds
+   * @defaultValue false
+   */
+  stack: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 是否绘制面积填充
+   * @en Whether to fill the area under the line
+   * @defaultValue false
+   */
+  area: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 平滑曲线
+   * @en Smooth curve
+   * @defaultValue true
+   */
+  smooth: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 缺测点（null）是否跨过连接；默认断开，避免「没有数据」被画成跌到 0
+   * @en Whether null points are connected; by default the line breaks so that
+   * missing data is not drawn as a drop to zero
+   * @defaultValue false
+   */
+  connectNulls: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 数据点显示策略：true 常显、false 不显示、auto 时点数少时常显
+   * @en Data point strategy: true always, false never, auto shows points when
+   * there are few of them
+   * @defaultValue 'auto'
+   */
+  showPoints: {
+    type: [Boolean, String],
+    default: "auto",
+    validator: (e) => typeof e == "boolean" || e === "auto"
+  },
+  /**
+   * @zh 图表高度，数字按 px 处理
+   * @en Chart height; numbers are treated as px
+   * @defaultValue 280
+   */
+  height: {
+    type: [Number, String],
+    default: 280
+  },
+  /**
+   * @zh 图表宽度，数字按 px 处理，默认撑满父容器
+   * @en Chart width; numbers are treated as px, defaults to filling the parent
+   * @defaultValue '100%'
+   */
+  width: {
+    type: [Number, String],
+    default: "100%"
+  },
+  /**
+   * @zh 数值轴上界；传入后不再自动计算「好看」的刻度
+   * @en Upper bound of the value axis; disables nice-tick calculation
+   */
+  max: {
+    type: Number
+  },
+  /**
+   * @zh 数值轴下界；数据含负值时自动扩展，也可手动锁定
+   * @en Lower bound of the value axis; expands automatically for negative data
+   */
+  min: {
+    type: Number
+  },
+  /**
+   * @zh 绘制边距，支持 1-4 个非负数字字符串或单个非负数字
+   * @en Plot padding; supports a single non-negative number or CSS-like 1-4 values
+   * @defaultValue '8'
+   */
+  padding: {
+    default: "8",
+    type: [String, Number],
+    validator(e) {
+      return l(e);
+    }
+  },
+  /**
+   * @zh 横向网格线配置
+   * @en Horizontal grid line options
+   */
+  grid: {
+    default: null,
+    type: t(Object)
+  },
+  /**
+   * @zh 坐标轴标签配置
+   * @en Axis label options
+   */
+  labels: {
+    default: null,
+    type: t(Object)
+  },
+  /**
+   * @zh 悬浮提示
+   * @en Hover tooltip
+   * @defaultValue true
+   */
+  tooltip: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 图例；多系列时建议开启，点击图例项可临时隐藏/显示对应系列
+   * @en Legend; recommended for multiple series, clicking an item toggles the
+   * series visibility
+   * @defaultValue false
+   */
+  legend: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 数值格式化函数，用于提示、图例与数值轴
+   * @en Value formatter used by tooltip, legend and the value axis
+   */
+  valueFormatter: {
+    type: Function,
+    default: a
+  },
+  /**
+   * @zh 加载中
+   * @en Loading state
+   * @defaultValue false
+   */
+  loading: {
+    type: [Boolean, Object],
+    default: !1
+  },
+  /**
+   * @zh 无障碍名称；设置后画布带 role="img"
+   * @en Accessible name; adds role="img" to the canvas when set
+   */
+  ariaLabel: {
+    type: String
+  }
+};
+export {
+  d as lineChartProps
+};

package/dist/es/components/pie-chart/PieChart.js

@@ -0,0 +1,397 @@
+import { defineComponent as se, createVNode as o, mergeProps as ce, Fragment as le, ref as U, reactive as de, computed as r, watch as ae } from "vue";
+import { getComponentPrefix as ue, getClassNameMixin as he } from "../../_utils/config.js";
+import { useLocale as me } from "../../locale/index.js";
+import { isObject as fe } from "../../_utils/is.js";
+import { useChartSize as ve } from "../../_hooks/use-chart-size.js";
+import { getSeriesColor as ie } from "../_components/chart/colors.js";
+import { Spin as xe } from "../spin/index.js";
+import pe from "../_components/chart/ChartLegend.js";
+import { pieChartProps as ge } from "./props.js";
+import { describeArcSegment as be } from "../../_utils/chart/path.js";
+const ye = 0.6, Ie = 160, oe = 10, we = 0.04, re = (l) => `${Math.round(l * 1e3) / 10}%`, $e = /* @__PURE__ */ se({
+  name: ue("PieChart"),
+  props: ge,
+  emits: {
+    /**
+     * @zh 点击分片时触发
+     * @en Emitted when a slice is clicked
+     */
+    "item-click": (l) => !0,
+    /**
+     * @zh 图例切换后触发，参数为当前可见的分片下标
+     * @en Emitted after a legend toggle, with the visible item indexes
+     */
+    "legend-change": (l) => !0
+  },
+  slots: Object,
+  setup(l, {
+    emit: g,
+    slots: L
+  }) {
+    const {
+      t: F
+    } = me(), s = he("pie-chart"), P = U(null), I = U(null), w = U(null), M = {
+      root: P,
+      canvas: I,
+      tooltip: w
+    }, i = de({
+      activeIndex: null,
+      hiddenIndexes: [],
+      keyboardActive: !1,
+      /** 悬浮提示的锚点（相对画布），由分片中心推算 */
+      pointer: {
+        x: 0,
+        y: 0
+      },
+      tooltipWidth: 0
+    }), {
+      size: h
+    } = ve({
+      elementRef: I,
+      width: () => l.width,
+      height: () => l.height
+    }), c = r(() => (l.data ?? []).map((e, t) => ({
+      name: e.name ?? String(t + 1),
+      value: Number.isFinite(e.value) && e.value > 0 ? e.value : 0
+    }))), u = r(() => c.value.length === 0 ? [] : c.value.map((e, t) => t).filter((e) => !i.hiddenIndexes.includes(e))), m = r(() => u.value.reduce((e, t) => {
+      var n;
+      return e + (((n = c.value[t]) == null ? void 0 : n.value) ?? 0);
+    }, 0)), R = r(() => m.value > 0), v = r(() => l.valueFormatter), S = r(() => typeof l.labels == "object" && l.labels ? l.labels : {}), $ = r(() => S.value.fontSize ?? 12), A = r(() => S.value.color ?? "var(--x-chart-color-axis-text)"), D = r(() => (typeof l.center == "object" && l.center ? l.center : {}).fontSize ?? 18), z = r(() => {
+      const e = l.innerRadius;
+      if (typeof e == "string" && e.endsWith("%")) {
+        const n = Number.parseFloat(e) / 100;
+        return Number.isFinite(n) ? Math.min(0.9, Math.max(0, n)) : 0;
+      }
+      const t = Number(e);
+      return Number.isFinite(t) && t > 0 ? t : 0;
+    }), b = r(() => {
+      const e = l.labels === !1 ? 0 : oe + 20, t = Math.min(h.width, h.height) - e * 2, n = Math.max(0, Math.min(Ie, t / 2)), a = z.value, d = typeof l.innerRadius == "string" && l.innerRadius.endsWith("%") ? n * a : Math.min(n * 0.9, a);
+      return {
+        cx: h.width / 2,
+        cy: h.height / 2,
+        radius: n,
+        inner: d
+      };
+    }), x = r(() => {
+      const e = m.value;
+      if (e <= 0) return [];
+      const n = u.value.filter((E) => {
+        var f;
+        return (((f = c.value[E]) == null ? void 0 : f.value) ?? 0) > 0;
+      }).length > 1 ? ye : 0, {
+        cx: a,
+        cy: d,
+        radius: p,
+        inner: T
+      } = b.value, J = [];
+      let H = -90;
+      return u.value.forEach((E) => {
+        const f = c.value[E];
+        if (!f || f.value <= 0) return;
+        const Y = f.value / e, Q = Y * 360, Z = H + n / 2, ee = H + Q - n / 2, te = (Z + ee) / 2, q = te * Math.PI / 180, ne = p + oe;
+        J.push({
+          index: E,
+          name: f.name,
+          value: f.value,
+          percent: Y,
+          color: ie(E),
+          d: be({
+            cx: a,
+            cy: d,
+            outerRadius: p,
+            innerRadius: T,
+            startAngle: Z,
+            endAngle: ee
+          }),
+          labelX: a + ne * Math.cos(q),
+          labelY: d + ne * Math.sin(q),
+          labelAnchor: Math.cos(q) >= 0 ? "start" : "end",
+          showLabel: Y >= we && l.labels !== !1,
+          midAngle: te
+        }), H += Q;
+      }), J;
+    }), k = (e) => ({
+      index: e.index,
+      name: e.name,
+      value: e.value,
+      percent: e.percent,
+      color: e.color,
+      total: m.value,
+      formatValue: v.value,
+      formatPercent: re
+    }), C = r(() => {
+      const e = i.activeIndex;
+      if (e === null) return null;
+      const t = x.value.find((n) => n.index === e);
+      return t ? k(t) : null;
+    }), _ = r(() => c.value.map((e, t) => ({
+      key: t,
+      name: e.name,
+      color: ie(t),
+      hidden: i.hiddenIndexes.includes(t),
+      value: `${v.value(e.value)}·${m.value > 0 ? re(e.value / m.value) : "0%"}`
+    }))), V = r(() => {
+      if (!C.value) return {};
+      const t = i.tooltipWidth / 2 || 0, n = t + 4, a = Math.max(n, h.width - t - 4), d = Math.min(Math.max(i.pointer.x, n), a), p = Math.max(8, i.pointer.y - 8);
+      return {
+        left: `${d}px`,
+        top: `${p}px`
+      };
+    }), W = (e) => {
+      const {
+        cx: t,
+        cy: n,
+        radius: a,
+        inner: d
+      } = b.value, p = e.midAngle * Math.PI / 180, T = d > 0 ? (a + d) / 2 : a * 0.62;
+      return {
+        x: t + T * Math.cos(p),
+        y: n + T * Math.sin(p)
+      };
+    };
+    ae(() => c.value.length, (e) => {
+      i.activeIndex !== null && i.activeIndex >= e && (i.activeIndex = null), i.hiddenIndexes = i.hiddenIndexes.filter((t) => t < e);
+    }), ae(() => i.activeIndex, (e) => {
+      var n;
+      if (e === null) return;
+      const t = x.value.find((a) => a.index === e);
+      if (t) {
+        const a = W(t);
+        i.pointer = a;
+      }
+      (n = window.requestAnimationFrame) == null || n.call(window, () => {
+        var d;
+        const a = ((d = w.value) == null ? void 0 : d.offsetWidth) ?? 0;
+        a !== i.tooltipWidth && (i.tooltipWidth = a);
+      });
+    });
+    const N = (e, t = !1) => {
+      i.keyboardActive = t, i.activeIndex = e;
+    }, y = () => {
+      i.activeIndex = null, i.keyboardActive = !1;
+    }, j = (e) => {
+      l.tooltip && N(e);
+    }, O = (e, t) => {
+      const n = x.value.find((a) => a.index === e);
+      n && g("item-click", {
+        ...k(n)
+      });
+    }, B = (e) => {
+      if (!l.tooltip) return;
+      const t = x.value;
+      if (!t.length) return;
+      const n = t.findIndex((d) => d.index === i.activeIndex);
+      let a = null;
+      if (e.key === "ArrowRight") a = (n + 1 + t.length) % t.length;
+      else if (e.key === "ArrowLeft") a = (n - 1 + t.length) % t.length;
+      else if (e.key === "Home") a = 0;
+      else if (e.key === "End") a = t.length - 1;
+      else if (e.key === "Escape") {
+        y();
+        return;
+      }
+      a !== null && (e.preventDefault(), N(t[a].index, !0));
+    }, G = (e) => {
+      const t = i.hiddenIndexes.includes(e) ? i.hiddenIndexes.filter((n) => n !== e) : [...i.hiddenIndexes, e];
+      i.hiddenIndexes = t, g("legend-change", c.value.map((n, a) => a).filter((n) => !t.includes(n)));
+    }, K = r(() => {
+      const e = C.value;
+      return !i.keyboardActive || !e ? "" : `${e.name}：${e.formatValue(e.value)}，${e.formatPercent(e.percent)}`;
+    }), X = r(() => l.center !== !1 && b.value.inner > 0 && R.value);
+    return {
+      className: s,
+      state: i,
+      size: h,
+      refs: M,
+      slots: L,
+      t: F,
+      items: c,
+      visibleIndexes: u,
+      total: m,
+      hasData: R,
+      geometry: b,
+      segments: x,
+      activeData: C,
+      legendItems: _,
+      centerVisible: X,
+      labelFontSize: $,
+      labelColor: A,
+      centerFontSize: D,
+      formatValue: v,
+      tooltipStyle: V,
+      handleSegmentEnter: j,
+      handleClick: O,
+      handleKeydown: B,
+      clearActive: y,
+      toggleItem: G,
+      liveText: K,
+      setTooltipElement: (e) => {
+        w.value = e;
+      }
+    };
+  },
+  render() {
+    const {
+      className: l,
+      state: g,
+      size: L,
+      refs: F,
+      slots: s,
+      t: P,
+      items: I,
+      visibleIndexes: w,
+      total: M,
+      hasData: i,
+      geometry: h,
+      segments: c,
+      activeData: u,
+      legendItems: m,
+      centerVisible: R,
+      labelFontSize: v,
+      labelColor: S,
+      centerFontSize: $,
+      formatValue: A,
+      tooltipStyle: D,
+      handleSegmentEnter: z,
+      handleClick: b,
+      handleKeydown: x,
+      clearActive: k,
+      toggleItem: C,
+      liveText: _,
+      setTooltipElement: V
+    } = this, W = typeof this.width == "number" ? `${this.width}px` : this.width, N = typeof this.height == "number" ? `${this.height}px` : this.height, y = L.width > 0 && L.height > 0 && h.radius > 0, j = () => c.map((e) => {
+      const t = g.activeIndex === e.index, n = g.activeIndex !== null && !t;
+      return o("path", {
+        key: e.index,
+        class: [l.element("segment"), {
+          [l.is("active")]: t,
+          [l.is("dimmed")]: n
+        }],
+        d: e.d,
+        fill: e.color,
+        "data-pie-index": e.index,
+        onMouseenter: () => z(e.index),
+        onClick: (a) => b(e.index, a)
+      }, null);
+    }), O = () => this.labels === !1 || !y ? null : o("g", {
+      class: l.element("labels")
+    }, [c.filter((e) => e.showLabel).map((e) => {
+      const t = {
+        index: e.index,
+        name: e.name,
+        value: e.value,
+        percent: e.percent,
+        color: e.color,
+        total: M,
+        formatValue: A,
+        formatPercent: (n) => `${Math.round(n * 1e3) / 10}%`
+      };
+      return o("text", {
+        key: e.index,
+        class: l.element("label"),
+        x: e.labelX,
+        y: e.labelY,
+        "text-anchor": e.labelAnchor,
+        "dominant-baseline": "middle",
+        style: {
+          fontSize: `${v}px`,
+          fill: S
+        }
+      }, [s.label ? s.label(t) : e.name]);
+    })]), B = () => !R || !y ? null : s.center ? o("g", {
+      class: l.element("center")
+    }, [s.center({
+      total: M,
+      formatValue: A
+    })]) : o("g", {
+      class: l.element("center")
+    }, [o("text", {
+      class: l.element("center-label"),
+      x: h.cx,
+      y: h.cy - v * 0.7,
+      "text-anchor": "middle",
+      style: {
+        fontSize: `${v}px`,
+        fill: S
+      }
+    }, [P("chart.pieTotal")]), o("text", {
+      class: l.element("center-value"),
+      x: h.cx,
+      y: h.cy + $ * 0.7,
+      "text-anchor": "middle",
+      style: {
+        fontSize: `${$}px`,
+        fill: "var(--x-color-text-1)"
+      }
+    }, [A(M)])]), G = () => !this.legend || I.length === 0 ? null : o(pe, {
+      items: m,
+      onToggle: C
+    }, s.legend ? {
+      default: () => {
+        var e;
+        return (e = s.legend) == null ? void 0 : e.call(s, {
+          items: I,
+          hiddenIndexes: g.hiddenIndexes
+        });
+      }
+    } : void 0), K = () => !this.tooltip || !u ? null : o("div", {
+      ref: V,
+      class: ["x-chart--tooltip", l.is("visible")],
+      style: D,
+      role: "tooltip"
+    }, [s.tooltip ? s.tooltip(u) : o(le, null, [o("div", {
+      class: "x-chart--tooltip-title"
+    }, [u.name]), o("div", {
+      class: "x-chart--tooltip-list"
+    }, [o("div", {
+      class: "x-chart--tooltip-item"
+    }, [o("span", {
+      class: "x-chart--tooltip-swatch",
+      style: {
+        backgroundColor: u.color
+      }
+    }, null), o("span", {
+      class: "x-chart--tooltip-name"
+    }, [u.formatValue(u.value)]), o("span", {
+      class: "x-chart--tooltip-value"
+    }, [u.formatPercent(u.percent)])])])])]), X = () => i && w.length > 0 ? null : o("div", {
+      class: "x-chart--empty"
+    }, [s.empty ? s.empty() : P("common.noData")]);
+    return o("div", {
+      ref: F.root,
+      class: l.block
+    }, [o(xe, ce(fe(this.loading) ? this.loading : {
+      loading: this.loading
+    }, {
+      display: "block"
+    }), {
+      default: () => [o("div", {
+        ref: F.canvas,
+        class: l.element("canvas"),
+        role: this.ariaLabel ? "img" : void 0,
+        "aria-label": this.ariaLabel
+      }, [o("svg", {
+        class: l.element("svg"),
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+          width: W,
+          height: N
+        },
+        "aria-hidden": this.ariaLabel ? "true" : void 0,
+        tabindex: this.tooltip ? 0 : void 0,
+        onMouseleave: k,
+        onBlur: k,
+        onFocus: () => {
+          c.length && z(c[0].index);
+        },
+        onKeydown: x
+      }, [y && o(le, null, [j(), O(), B()])]), K(), X()])]
+    }), G(), o("span", {
+      class: "x-chart--live",
+      "aria-live": "polite"
+    }, [_])]);
+  }
+});
+export {
+  $e as default
+};

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

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

package/dist/es/components/pie-chart/props.js

@@ -0,0 +1,104 @@
+import { definePropType as e } from "../../_utils/vue-eco.js";
+import { defaultValueFormatter as t } from "../../_utils/chart/scale.js";
+const l = {
+  /**
+   * @zh 分片数据；值为负或非有限数按 0 处理并跳过
+   * @en Slice data; negative or non-finite values are treated as 0 and skipped
+   */
+  data: {
+    required: !0,
+    type: e(Array),
+    default: () => []
+  },
+  /**
+   * @zh 内半径：0 为实心饼图，数字按 px，'60%' 按外半径比例；大于 0 时渲染为环形图
+   * @en Inner radius: 0 renders a pie, numbers are px, '60%' is relative to the
+   * outer radius; values above 0 render a donut
+   * @defaultValue 0
+   */
+  innerRadius: {
+    type: [Number, String],
+    default: 0
+  },
+  /**
+   * @zh 图表高度，数字按 px 处理
+   * @en Chart height; numbers are treated as px
+   * @defaultValue 280
+   */
+  height: {
+    type: [Number, String],
+    default: 280
+  },
+  /**
+   * @zh 图表宽度，数字按 px 处理，默认撑满父容器
+   * @en Chart width; numbers are treated as px, defaults to filling the parent
+   * @defaultValue '100%'
+   */
+  width: {
+    type: [Number, String],
+    default: "100%"
+  },
+  /**
+   * @zh 外围标签：false 不显示，也可传字号与颜色
+   * @en Outer labels: false hides them; an object configures font size and color
+   * @defaultValue true
+   */
+  labels: {
+    type: [Boolean, Object],
+    default: !0
+  },
+  /**
+   * @zh 环形中心内容；不传时在环形模式下展示合计，传 false 隐藏
+   * @en Donut center content; defaults to the total for donuts, false hides it
+   * @defaultValue true
+   */
+  center: {
+    type: [Boolean, Object],
+    default: !0
+  },
+  /**
+   * @zh 悬浮提示
+   * @en Hover tooltip
+   * @defaultValue true
+   */
+  tooltip: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 图例；点击图例项可临时隐藏/显示对应分片，数据在点击分片上触发
+   * @en Legend; clicking an item toggles the slice visibility
+   * @defaultValue false
+   */
+  legend: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 数值格式化函数，用于提示、图例与中心内容
+   * @en Value formatter used by tooltip, legend and the center content
+   */
+  valueFormatter: {
+    type: Function,
+    default: t
+  },
+  /**
+   * @zh 加载中
+   * @en Loading state
+   * @defaultValue false
+   */
+  loading: {
+    type: [Boolean, Object],
+    default: !1
+  },
+  /**
+   * @zh 无障碍名称；设置后画布带 role="img"
+   * @en Accessible name; adds role="img" to the canvas when set
+   */
+  ariaLabel: {
+    type: String
+  }
+};
+export {
+  l as pieChartProps
+};