x-next 1.7.0 → 1.8.0

package/dist/es/_utils/chart/path.js

@@ -0,0 +1,69 @@
+const $ = (n) => Math.round(n * 100) / 100, i = (n, e, r, t, u) => {
+  if (r <= 0 || t <= 0) return "";
+  const o = Math.min(Math.max(u, 0), r / 2, t);
+  return o <= 0 ? `M${$(n)},${$(e)}h${$(r)}v${$(t)}h${$(-r)}Z` : [
+    `M${$(n)},${$(e + t)}`,
+    `L${$(n)},${$(e + o)}`,
+    `Q${$(n)},${$(e)} ${$(n + o)},${$(e)}`,
+    `L${$(n + r - o)},${$(e)}`,
+    `Q${$(n + r)},${$(e)} ${$(n + r)},${$(e + o)}`,
+    `L${$(n + r)},${$(e + t)}`,
+    "Z"
+  ].join("");
+}, x = (n, e = !1) => {
+  if (!n.length) return "";
+  if (n.length === 1)
+    return `M${$(n[0].x)},${$(n[0].y)}`;
+  if (!e)
+    return n.map((t, u) => `${u === 0 ? "M" : "L"}${$(t.x)},${$(t.y)}`).join("");
+  let r = `M${$(n[0].x)},${$(n[0].y)}`;
+  for (let t = 1; t < n.length; t += 1) {
+    const u = n[t - 1], o = n[t], c = (u.x + o.x) / 2;
+    r += `C${$(c)},${$(u.y)} ${$(c)},${$(o.y)} ${$(
+      o.x
+    )},${$(o.y)}`;
+  }
+  return r;
+}, A = (n, e, r = !1) => {
+  const t = x(n, r);
+  if (!t) return "";
+  const u = n[0], o = n[n.length - 1];
+  return `${t}L${$(o.x)},${$(e)}L${$(u.x)},${$(
+    e
+  )}Z`;
+}, a = (n, e, r, t) => {
+  const u = t * Math.PI / 180;
+  return { x: n + r * Math.cos(u), y: e + r * Math.sin(u) };
+}, L = (n) => {
+  const { cx: e, cy: r, startAngle: t } = n, u = Math.max(0, Math.min(n.innerRadius, n.outerRadius - 0.5)), o = Math.min(n.endAngle, t + 359.99), c = o - t;
+  if (c <= 0) return "";
+  const l = c > 180 ? 1 : 0, s = a(e, r, n.outerRadius, t), M = a(e, r, n.outerRadius, o);
+  if (u <= 0)
+    return [
+      `M${$(e)},${$(r)}`,
+      `L${$(s.x)},${$(s.y)}`,
+      `A${$(n.outerRadius)},${$(n.outerRadius)} 0 ${l} 1 ${$(
+        M.x
+      )},${$(M.y)}`,
+      "Z"
+    ].join("");
+  const d = a(e, r, u, o), f = a(e, r, u, t);
+  return [
+    `M${$(s.x)},${$(s.y)}`,
+    `A${$(n.outerRadius)},${$(n.outerRadius)} 0 ${l} 1 ${$(
+      M.x
+    )},${$(M.y)}`,
+    `L${$(d.x)},${$(d.y)}`,
+    `A${$(u)},${$(u)} 0 ${l} 0 ${$(f.x)},${$(
+      f.y
+    )}`,
+    "Z"
+  ].join("");
+};
+export {
+  L as describeArcSegment,
+  A as genAreaPath,
+  x as genLinePath,
+  a as polarPoint,
+  i as roundedTopRectPath
+};

package/dist/es/_utils/chart/scale.js

@@ -0,0 +1,77 @@
+const h = (t) => Number(t.toPrecision(12)), g = (t) => Number(t.toFixed(4)), f = (t) => Math.max(2, Math.floor(t)), p = (t) => {
+  if (!Number.isFinite(t) || t <= 0) return 0;
+  const e = 10 ** Math.floor(Math.log10(t)), i = t / e;
+  return e * (i <= 1 ? 1 : i <= 2 ? 2 : i <= 5 ? 5 : 10);
+}, x = (t, e = 4) => {
+  if (!Number.isFinite(t) || t <= 0)
+    return { max: 0, ticks: [0] };
+  const i = f(e) - 1, s = p(t / i), r = h(Math.ceil(t / s) * s), n = Math.round(r / s);
+  return {
+    max: r,
+    ticks: Array.from({ length: n + 1 }, (o, c) => h(s * c))
+  };
+}, M = (t, e = 4, i) => {
+  const s = f(e);
+  if (Number.isFinite(i) && i > 0) {
+    const r = i, n = s - 1;
+    return {
+      max: r,
+      ticks: Array.from(
+        { length: n + 1 },
+        (o, c) => g(r / n * c)
+      )
+    };
+  }
+  return x(t, s);
+}, d = (t, e, i = 4) => {
+  const s = Number.isFinite(t) ? t : 0, r = Number.isFinite(e) ? e : 0, n = Math.min(0, s), o = Math.max(0, r);
+  if (n === 0 && o === 0)
+    return { min: 0, max: 0, ticks: [0] };
+  const c = f(i) - 1, u = p((o - n) / c), l = h(Math.floor(n / u) * u), m = h(Math.ceil(o / u) * u), a = Math.round((m - l) / u);
+  return {
+    min: l,
+    max: m,
+    ticks: Array.from({ length: a + 1 }, (N, b) => h(l + u * b))
+  };
+}, A = (t, e, i = 4, s, r) => {
+  const n = f(i), o = Number.isFinite(s), c = Number.isFinite(r);
+  if (!o && !c)
+    return d(t, e, n);
+  const u = Math.min(0, Number.isFinite(t) ? t : 0), l = Math.max(0, Number.isFinite(e) ? e : 0);
+  let m = o ? s : u, a = c ? r : l;
+  m > a && ([m, a] = [a, m]);
+  const N = n - 1;
+  return {
+    min: m,
+    max: a,
+    ticks: Array.from(
+      { length: N + 1 },
+      (b, F) => g(m + (a - m) / N * F)
+    )
+  };
+}, k = (t) => {
+  if (!Number.isFinite(t)) return "";
+  const e = Number(Number(t.toPrecision(12)).toFixed(4)), [i, s] = String(Math.abs(e)).split("."), r = i.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return `${e < 0 ? "-" : ""}${r}${s ? `.${s}` : ""}`;
+}, y = (t, e) => {
+  let i = 0;
+  for (const s of t)
+    i += s.charCodeAt(0) > 255 ? 1 : 0.6;
+  return i * e;
+}, S = (t, e, i, s = 8) => {
+  if (t <= 0) return [];
+  const r = Math.max(1, Math.ceil((i + s) / Math.max(e, 1))), n = [];
+  for (let c = 0; c < t; c += r)
+    n.push(c);
+  const o = t - 1;
+  return n[n.length - 1] !== o && (n.length > 1 && o - n[n.length - 1] < r * 0.6 && n.pop(), n.push(o)), n;
+};
+export {
+  k as defaultValueFormatter,
+  y as estimateTextWidth,
+  A as getDomain,
+  d as getNiceDomain,
+  x as getNiceScale,
+  M as getScale,
+  S as pickLabelIndices
+};

package/dist/es/components/_components/chart/ChartAxis.js

@@ -0,0 +1,79 @@
+import { defineComponent as s, createVNode as a } from "vue";
+import { getClassNameMixin as i } from "../../../_utils/config.js";
+const y = 6, x = 8, c = /* @__PURE__ */ s({
+  name: "ChartAxis",
+  props: {
+    plot: {
+      type: Object,
+      required: !0
+    },
+    ticks: {
+      type: Array,
+      default: () => []
+    },
+    xLabels: {
+      type: Array,
+      default: () => []
+    },
+    fontSize: {
+      type: Number,
+      default: 12
+    },
+    color: {
+      type: String,
+      default: "var(--x-chart-color-axis-text)"
+    },
+    showX: {
+      type: Boolean,
+      default: !0
+    },
+    showY: {
+      type: Boolean,
+      default: !0
+    },
+    showHorizontalLines: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e) {
+    const l = i("chart"), o = () => ({
+      fontSize: `${e.fontSize}px`,
+      fill: e.color
+    });
+    return () => a("g", null, [e.showHorizontalLines && a("g", {
+      class: l.element("grid")
+    }, [e.ticks.map((t, n) => a("line", {
+      key: n,
+      class: [l.element("grid-line"), {
+        [l.is("baseline")]: t.isBaseline
+      }],
+      x1: e.plot.left,
+      x2: e.plot.left + e.plot.width,
+      y1: t.y,
+      y2: t.y
+    }, null))]), e.showY && a("g", {
+      class: l.element("y-labels")
+    }, [e.ticks.map((t, n) => a("text", {
+      key: n,
+      class: l.element("axis-label"),
+      x: e.plot.left - y,
+      y: t.y,
+      "text-anchor": "end",
+      "dominant-baseline": "middle",
+      style: o()
+    }, [t.label]))]), e.showX && a("g", {
+      class: l.element("x-labels")
+    }, [e.xLabels.map((t, n) => a("text", {
+      key: n,
+      class: l.element("axis-label"),
+      x: t.x,
+      y: e.plot.bottom + x + e.fontSize * 0.9,
+      "text-anchor": "middle",
+      style: o()
+    }, [t.text]))])]);
+  }
+});
+export {
+  c as default
+};

package/dist/es/components/_components/chart/ChartLegend.js

@@ -0,0 +1,53 @@
+import { defineComponent as o, createVNode as l } from "vue";
+import { getClassNameMixin as m } from "../../../_utils/config.js";
+import { useLocale as u } from "../../../locale/index.js";
+const f = /* @__PURE__ */ o({
+  name: "ChartLegend",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: {
+    toggle: (a) => !0
+  },
+  setup(a, {
+    emit: s,
+    slots: t
+  }) {
+    const n = m("chart"), {
+      t: d
+    } = u();
+    return () => a.items.length ? t.default ? l("div", {
+      class: n.element("legend")
+    }, [t.default({
+      items: a.items
+    })]) : l("div", {
+      class: n.element("legend")
+    }, [a.items.map((e, r) => l("button", {
+      key: e.key,
+      type: "button",
+      class: [n.element("legend-item"), {
+        [n.is("hidden")]: e.hidden
+      }],
+      "aria-pressed": !e.hidden,
+      "aria-label": d("chart.legendToggle", {
+        name: e.name
+      }),
+      onClick: () => s("toggle", r)
+    }, [l("span", {
+      class: n.element("legend-swatch"),
+      style: {
+        backgroundColor: e.color
+      }
+    }, null), l("span", {
+      class: n.element("legend-name")
+    }, [e.name]), e.value !== void 0 && l("span", {
+      class: n.element("legend-value")
+    }, [e.value])]))]) : null;
+  }
+});
+export {
+  f as default
+};

package/dist/es/components/_components/chart/ChartTooltip.js

@@ -0,0 +1,64 @@
+import { defineComponent as i, createVNode as e, Fragment as n } from "vue";
+import { getClassNameMixin as s } from "../../../_utils/config.js";
+const c = /* @__PURE__ */ i({
+  name: "ChartTooltip",
+  props: {
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String
+    },
+    entries: {
+      type: Array,
+      default: () => []
+    },
+    /** 合计行；entries 只有一个时可传 null 隐藏 */
+    total: {
+      type: Object,
+      default: null
+    },
+    /** 位置样式，由各图换算（锚点或指针坐标） */
+    position: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 需要测量提示宽度做贴边收敛时，通过该回调取到 DOM 节点 */
+    onElement: {
+      type: Function
+    }
+  },
+  setup(t, {
+    slots: o
+  }) {
+    const l = s("chart");
+    return () => t.visible ? e("div", {
+      ref: t.onElement,
+      class: [l.element("tooltip"), l.is("visible")],
+      style: t.position,
+      role: "tooltip"
+    }, [o.default ? o.default() : e(n, null, [t.title !== void 0 && e("div", {
+      class: l.element("tooltip-title")
+    }, [t.title]), e("div", {
+      class: l.element("tooltip-list")
+    }, [t.entries.map((a) => e("div", {
+      key: a.key,
+      class: l.element("tooltip-item")
+    }, [a.color !== void 0 && e("span", {
+      class: l.element("tooltip-swatch"),
+      style: {
+        backgroundColor: a.color
+      }
+    }, null), e("span", {
+      class: l.element("tooltip-name")
+    }, [a.name]), e("span", {
+      class: l.element("tooltip-value")
+    }, [a.value])]))]), t.total && e("div", {
+      class: l.element("tooltip-total")
+    }, [e("span", null, [t.total.label]), e("span", null, [t.total.value])])])]) : null;
+  }
+});
+export {
+  c as default
+};

package/dist/es/components/_components/chart/colors.js

@@ -0,0 +1,12 @@
+const r = [
+  "var(--x-chart-color-series-1)",
+  "var(--x-chart-color-series-2)",
+  "var(--x-chart-color-series-3)",
+  "var(--x-chart-color-series-4)",
+  "var(--x-chart-color-series-5)",
+  "var(--x-chart-color-series-6)"
+], o = (e) => r[(e % r.length + r.length) % r.length];
+export {
+  r as ChartSeriesColors,
+  o as getSeriesColor
+};