x-next 1.5.0 → 1.6.0

package/dist/es/components/heatmap/Heatmap.js

@@ -0,0 +1,334 @@
+import { defineComponent as W, createVNode as l, toRefs as $, computed as n, ref as q, Fragment as j } from "vue";
+import { getClassNameMixin as P } from "../../_utils/config.js";
+import { useSize as T } from "../../_hooks/use-size.js";
+import { useLocale as V } from "../../locale/index.js";
+import { isObject as _ } from "../../_utils/is.js";
+import { throttleByRaf as F } from "../../_utils/throttle-by-raf.js";
+import { Spin as H } from "../spin/index.js";
+import { getWeekdayLabels as G } from "../date-picker/utils.js";
+import { CELL_SIZE as A, resolveRange as U, indexDataByDay as Z, getValueExtent as J, buildMatrix as K, DEFAULT_COLOR_LEVELS as Q, getMonthLabels as X, isCellInRequestedRange as ee } from "./helpers/matrix.js";
+const ue = /* @__PURE__ */ W({
+  name: "Heatmap",
+  props: {
+    /**
+     * @zh 热力图数据
+     * @en Heatmap data
+     */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @zh 要渲染的自然年；设置后优先于 startDate / endDate
+     * @en Year to render; takes priority over startDate / endDate
+     */
+    year: {
+      type: Number
+    },
+    /**
+     * @zh 自定义范围起始（时间戳或日期字符串）
+     * @en Custom range start (timestamp or date string)
+     */
+    startDate: {
+      type: [Number, String]
+    },
+    /**
+     * @zh 自定义范围结束（时间戳或日期字符串）
+     * @en Custom range end (timestamp or date string)
+     */
+    endDate: {
+      type: [Number, String]
+    },
+    /**
+     * @zh 由浅到深的色阶；不传使用内置主色阶
+     * @en Colors from light to dark; built-in primary ramp when omitted
+     */
+    activeColors: {
+      type: Array
+    },
+    /**
+     * @zh 最小值（含无数据格）的颜色
+     * @en Color for the minimum value and cells without data
+     */
+    minimumColor: {
+      type: String
+    },
+    /**
+     * @zh 格子尺寸
+     * @en Cell size
+     * @values 'small', 'medium', 'large'
+     * @defaultValue 'medium'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 一周的起始日（0 为周日）
+     * @en First day of the week (0 is Sunday)
+     * @defaultValue 0
+     */
+    firstDayOfWeek: {
+      type: Number,
+      default: 0,
+      validator: (e) => e >= 0 && e <= 6
+    },
+    /**
+     * @zh 是否展示星期标签
+     * @en Whether to show weekday labels
+     * @defaultValue true
+     */
+    showWeekLabels: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否展示月份标签
+     * @en Whether to show month labels
+     * @defaultValue true
+     */
+    showMonthLabels: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否展示颜色图例
+     * @en Whether to show the color indicator
+     * @defaultValue true
+     */
+    showColorIndicator: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 鼠标悬浮提示；传对象时透传给内部浮层
+     * @en Hover tooltip; pass an object to configure the inner popup
+     * @defaultValue true
+     */
+    tooltip: {
+      type: [Boolean, Object],
+      default: !0
+    },
+    /**
+     * @zh 加载中
+     * @en Loading state
+     * @defaultValue false
+     */
+    loading: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    /**
+     * @zh 无障碍名称；设置后根节点带 role="img"
+     * @en Accessible name; adds role="img" to the root when set
+     */
+    ariaLabel: {
+      type: String
+    }
+  },
+  emits: {
+    /**
+     * @zh 点击某个日期格时触发
+     * @en Emitted when a day cell is clicked
+     * @param {HeatmapCell} cell
+     * @param {MouseEvent} ev
+     */
+    cellClick: (e, b) => !0
+  },
+  slots: Object,
+  setup(e, {
+    emit: b,
+    slots: I
+  }) {
+    const {
+      t: v,
+      locale: O
+    } = V(), h = P("heatmap"), {
+      mergedSize: x
+    } = T($(e).size, {
+      defaultValue: "medium"
+    }), c = n(() => A[x.value] ?? A.medium), d = n(() => {
+      var t;
+      return (t = e.activeColors) != null && t.length ? e.activeColors : ["var(--x-heatmap-color-level-1)", "var(--x-heatmap-color-level-2)", "var(--x-heatmap-color-level-3)", "var(--x-heatmap-color-level-4)", "var(--x-heatmap-color-level-5)"];
+    }), C = n(() => e.minimumColor ?? "var(--x-heatmap-color-empty)"), k = n(() => [C.value, ...d.value]), i = n(() => U({
+      year: e.year,
+      startDate: e.startDate,
+      endDate: e.endDate,
+      data: e.data
+    }, e.firstDayOfWeek)), y = n(() => Z(e.data)), E = n(() => J(e.data)), p = n(() => i.value ? K(i.value, y.value, E.value, d.value.length || Q) : []), R = n(() => {
+      const t = Array.from({
+        length: 7
+      }, () => []);
+      return p.value.forEach((a) => {
+        t[a.rowIndex].push(a);
+      }), t;
+    }), N = n(() => G(e.firstDayOfWeek, O.value.datePicker)), L = n(() => {
+      if (!i.value) return [];
+      const t = i.value.requestedStart.year() !== i.value.requestedEnd.year();
+      return X(i.value, p.value, (a) => t ? a.format("YYYY-MM") : v("heatmap.month", {
+        month: a.month() + 1
+      }));
+    }), r = (t) => k.value[t.level] ?? C.value, w = (t) => {
+      const a = t.date.format("YYYY-MM-DD"), m = t.value;
+      return m === null ? v("heatmap.noData", {
+        date: a
+      }) : v("heatmap.value", {
+        date: a,
+        value: m
+      });
+    }, f = q(null), g = n(() => e.tooltip !== !1), S = n(() => f.value === null ? null : p.value[f.value] ?? null), Y = n(() => {
+      const t = S.value;
+      if (!t) return {};
+      const a = 2, m = t.colIndex * (c.value + a) + c.value / 2, D = t.rowIndex * (c.value + a) + c.value;
+      return {
+        left: `${m}px`,
+        top: `${D + 6}px`
+      };
+    }), z = (t) => {
+      var D;
+      if (!g.value) return;
+      const a = t.target, m = (D = a == null ? void 0 : a.dataset) == null ? void 0 : D.index;
+      f.value = m === void 0 ? null : Number(m);
+    }, B = () => {
+      f.value = null;
+    }, o = (t, a) => {
+      b("cellClick", t, a);
+    }, u = F(z), s = n(() => ({
+      "--x-heatmap-cell-size": `${c.value}px`,
+      gridTemplateRows: `repeat(7, ${c.value}px)`
+    }));
+    return {
+      t: v,
+      className: h,
+      mergedSize: x,
+      cells: p,
+      rows: R,
+      range: i,
+      gridStyle: s,
+      weekdayLabels: N,
+      monthLabels: L,
+      activeCell: S,
+      tooltipEnabled: g,
+      tooltipStyle: Y,
+      cellColor: r,
+      cellLabel: w,
+      handleCellClick: o,
+      throttledMove: u,
+      clearActive: B,
+      isInRange: (t) => i.value ? ee(t, i.value.requestedStart, i.value.requestedEnd) : !0,
+      colorPalette: k,
+      slots: I
+    };
+  },
+  render() {
+    const {
+      className: e,
+      mergedSize: b,
+      cells: I,
+      rows: v,
+      range: O,
+      gridStyle: h,
+      weekdayLabels: x,
+      monthLabels: c,
+      activeCell: d,
+      tooltipEnabled: C,
+      tooltipStyle: k,
+      cellColor: i,
+      cellLabel: y,
+      handleCellClick: E,
+      throttledMove: p,
+      clearActive: R,
+      isInRange: N,
+      colorPalette: L,
+      slots: r,
+      t: w
+    } = this;
+    if (!O) return null;
+    const f = _(this.loading) ? this.loading : {
+      loading: this.loading,
+      dot: "color"
+    }, g = C && d !== null, S = () => l("div", {
+      class: e.element("grid"),
+      style: {
+        ...h,
+        "--x-heatmap-cell-gap": "var(--x-spacing-1)"
+      },
+      onMousemove: p,
+      onMouseleave: R
+    }, [v.map((o, u) => o.map((s) => l("div", {
+      key: s.timestamp,
+      class: [e.element("cell"), e.modifier(`level-${s.level}`), {
+        [e.is("out-of-range")]: !N(s)
+      }],
+      style: {
+        backgroundColor: i(s)
+      },
+      "data-index": I.indexOf(s),
+      title: g ? void 0 : y(s),
+      onClick: (M) => E(s, M),
+      role: "gridcell",
+      "aria-label": y(s)
+    }, [])))]), Y = () => {
+      if (!g || !d) return null;
+      const o = {
+        ...d,
+        label: y(d)
+      };
+      return l("div", {
+        class: [e.element("tooltip"), e.is("visible")],
+        style: k,
+        role: "tooltip"
+      }, [r.tooltip ? r.tooltip(o) : o.label]);
+    }, z = () => {
+      var o, u;
+      return this.showColorIndicator ? l("div", {
+        class: e.element("indicator")
+      }, [r.indicator ? r.indicator({
+        colors: L
+      }) : l(j, null, [l("span", {
+        class: e.element("indicator-leading")
+      }, [((o = r["indicator-leading-text"]) == null ? void 0 : o.call(r)) ?? w("heatmap.less")]), L.map((s, M) => l("span", {
+        key: M,
+        class: e.element("indicator-swatch"),
+        style: {
+          backgroundColor: s
+        }
+      }, null)), l("span", {
+        class: e.element("indicator-trailing")
+      }, [((u = r["indicator-trailing-text"]) == null ? void 0 : u.call(r)) ?? w("heatmap.more")])])]) : null;
+    }, B = () => l("div", {
+      class: e.element("body")
+    }, [this.showWeekLabels && l("div", {
+      class: e.element("week-labels"),
+      style: h
+    }, [x.map((o, u) => l("span", {
+      key: u,
+      class: e.element("week-label"),
+      style: {
+        visibility: u % 2 === 1 ? "visible" : "hidden"
+      }
+    }, [o]))]), l("div", {
+      class: e.element("grid-wrapper")
+    }, [this.showMonthLabels && l("div", {
+      class: e.element("month-labels"),
+      style: h
+    }, [c.map((o) => l("span", {
+      key: o.text,
+      class: e.element("month-label"),
+      style: {
+        gridColumn: o.colIndex + 1
+      }
+    }, [o.text]))]), S()]), Y()]);
+    return l("div", {
+      class: [e.block, e.modifier(`size-${b}`)],
+      role: this.ariaLabel ? "img" : void 0,
+      "aria-label": this.ariaLabel
+    }, [l(H, f, {
+      default: () => [B(), z(), r.footer && l("div", {
+        class: e.element("footer")
+      }, [r.footer()])]
+    })]);
+  }
+});
+export {
+  ue as default
+};

package/dist/es/components/heatmap/helpers/matrix.js

@@ -0,0 +1,106 @@
+import { dayjs as l } from "../../../_utils/date.js";
+const E = {
+  small: 10,
+  medium: 12,
+  large: 16
+}, v = 5, h = (e, a) => {
+  const t = (e.day() - a + 7) % 7;
+  return e.subtract(t, "day");
+}, b = (e) => typeof e == "number" ? l(e) : l(e), I = (e, a) => {
+  const { year: t, startDate: s, endDate: n, data: f } = e;
+  let o = null, r = null;
+  if (typeof t == "number" && Number.isFinite(t)) {
+    const i = l(`${t}-01-01`);
+    i.isValid() && (o = i, r = i.endOf("year").startOf("day"));
+  }
+  if (!o && (s !== void 0 || n !== void 0)) {
+    if (s !== void 0) {
+      const i = b(s);
+      i.isValid() && (o = i);
+    }
+    if (n !== void 0) {
+      const i = b(n);
+      i.isValid() && (r = i);
+    }
+  }
+  if (!o || !r) {
+    const i = (f ?? []).filter(
+      (m) => m && Number.isFinite(m.timestamp)
+    );
+    if (i.length) {
+      const m = i.map((g) => l(g.timestamp).startOf("day").valueOf());
+      o || (o = l(Math.min(...m))), r || (r = l(Math.max(...m)));
+    }
+  }
+  if (!o || !r) return null;
+  if (o.isAfter(r)) {
+    const i = o;
+    o = r, r = i;
+  }
+  const u = o.startOf("day"), c = r.startOf("day"), y = h(u, a), d = h(c, a).add(6, "day"), p = d.diff(y, "day") + 1;
+  return {
+    start: y,
+    end: d,
+    days: p,
+    weeks: Math.ceil(p / 7),
+    /* 用户请求的原始范围（未按周对齐），用于区分补齐格 */
+    requestedStart: u,
+    requestedEnd: c
+  };
+}, L = (e) => {
+  const a = /* @__PURE__ */ new Map();
+  return (e ?? []).forEach((t) => {
+    if (!t || !Number.isFinite(t.timestamp)) return;
+    const s = l(t.timestamp).startOf("day").valueOf(), n = t.value;
+    a.set(s, typeof n == "number" && Number.isFinite(n) ? n : null);
+  }), a;
+}, M = (e, a, t, s) => {
+  if (typeof e != "number" || !Number.isFinite(e) || s <= 0) return 0;
+  if (t <= a) return s;
+  const n = (e - a) / (t - a), f = Math.ceil(n * s);
+  return Math.min(s, Math.max(1, f));
+}, F = (e) => {
+  let a = 1 / 0, t = -1 / 0;
+  return (e ?? []).forEach((s) => {
+    const n = s == null ? void 0 : s.value;
+    typeof n != "number" || !Number.isFinite(n) || (n < a && (a = n), n > t && (t = n));
+  }), a === 1 / 0 ? null : { min: a, max: t };
+}, V = (e, a, t, s) => {
+  const n = (t == null ? void 0 : t.min) ?? 0, f = (t == null ? void 0 : t.max) ?? 0;
+  return Array.from({ length: e.days }, (o, r) => {
+    const u = e.start.add(r, "day"), c = u.valueOf(), d = a.has(c) ? a.get(c) ?? null : null;
+    return {
+      timestamp: c,
+      date: u,
+      value: d,
+      level: M(d, n, f, s),
+      rowIndex: r % 7,
+      colIndex: Math.floor(r / 7)
+    };
+  });
+}, D = (e, a, t) => {
+  const s = [];
+  for (let n = 0; n < e.weeks; n += 1) {
+    const f = a[n * 7];
+    if (!f) continue;
+    const o = f.date.format("YYYY-MM"), r = s[s.length - 1];
+    if (r && r.monthKey === o) {
+      r.span += 1;
+      continue;
+    }
+    s.push({ monthKey: o, text: t(f.date), colIndex: n, span: 1 });
+  }
+  return s.filter((n) => n.span >= 3 || s.length <= 2).map(({ text: n, colIndex: f }) => ({ text: n, colIndex: f }));
+}, N = (e, a, t) => !e.date.isBefore(a, "day") && !e.date.isAfter(t, "day");
+export {
+  E as CELL_SIZE,
+  v as DEFAULT_COLOR_LEVELS,
+  V as buildMatrix,
+  M as getColorLevel,
+  D as getMonthLabels,
+  F as getValueExtent,
+  L as indexDataByDay,
+  N as isCellInRequestedRange,
+  I as resolveRange,
+  h as startOfWeekByDay
+};

package/dist/es/components/heatmap/index.js

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