pxd 0.0.64 → 0.1.3

package/dist/components/active-graph/index.vue

@@ -1,287 +1,429 @@
 <script setup>
-import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { useDelayChange } from "../../composables/use-delay-change";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getAllDatesBetween } from "../../utils/date";
-import { getCssUnitValue } from "../../utils/format";
-import { getColorByThreshold } from "../../utils/get";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
+import { useDelayChange } from "../../composables/use-delay-change.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getAllDatesBetween } from "../../utils/date.js";
+import { scheduleByRaf } from "../../utils/event.js";
+import { getCssUnitValue } from "../../utils/format.js";
+import { isUndefined } from "../../utils/is.js";
 defineOptions({
-  name: "PActiveGraph",
-  inheritAttrs: false
+	name: "PActiveGraph",
+	inheritAttrs: false
 });
 const props = defineProps({
-  data: { type: Array, required: false, default: () => [] },
-  legend: { type: Boolean, required: false, default: true },
-  colors: { type: Object, required: false },
-  startDate: { type: [String, Date], required: false },
-  endDate: { type: [String, Date], required: false },
-  tooltip: { type: Boolean, required: false, default: true },
-  graphOnly: { type: Boolean, required: false },
-  transpose: { type: Boolean, required: false },
-  fieldNames: { type: Object, required: false },
-  itemRadius: { type: [String, Number], required: false },
-  defaultSelect: { type: String, required: false }
+	data: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	legend: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	colors: {
+		type: Object,
+		required: false
+	},
+	startDate: {
+		type: [String, Date],
+		required: false
+	},
+	endDate: {
+		type: [String, Date],
+		required: false
+	},
+	tooltip: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	graphOnly: {
+		type: Boolean,
+		required: false
+	},
+	transpose: {
+		type: Boolean,
+		required: false
+	},
+	fieldNames: {
+		type: Object,
+		required: false
+	},
+	itemRadius: {
+		type: [String, Number],
+		required: false
+	},
+	defaultSelect: {
+		type: String,
+		required: false
+	}
 });
-const emits = defineEmits(["select"]);
+const emits = defineEmits(["change"]);
 const configProvider = useConfigProvider();
 const CELL_GAP = 3;
 const CELL_SIZE = 12;
+const itemRadiusStyle = computed(() => {
+	return { "--active-graph-item-radius": getCssUnitValue(props.itemRadius) };
+});
 const selectedDate = shallowRef(props.defaultSelect);
 const getDefaultStartDate = () => {
-  const date = /* @__PURE__ */ new Date();
-  date.setFullYear(date.getFullYear() - 1);
-  while (date.getDay() !== 0) {
-    date.setDate(date.getDate() - 1);
-  }
-  return date;
+	const date = new Date();
+	date.setFullYear(date.getFullYear() - 1);
+	while (date.getDay() !== 0) {
+		date.setDate(date.getDate() - 1);
+	}
+	return date;
 };
 const getDefaultEndDate = () => {
-  return /* @__PURE__ */ new Date();
+	return new Date();
 };
+function isShallowEqualObject(a, b) {
+	const keys = Object.keys(a);
+	if (keys.length !== Object.keys(b).length) {
+		return false;
+	}
+	return keys.every((key) => a[key] === b[key]);
+}
+let colorsSource;
+let colorsCache;
 const computedColors = computed(() => {
-  if (props.colors) {
-    return props.colors;
-  }
-  return {
-    0: "",
-    5: "var(--color-green-300)",
-    10: "var(--color-green-500)",
-    15: "var(--color-green-700)",
-    20: "var(--color-green-900)"
-  };
+	if (props.colors) {
+		if (!isUndefined(colorsCache) && !isUndefined(colorsSource) && isShallowEqualObject(props.colors, colorsSource)) {
+			return colorsCache;
+		}
+		colorsSource = props.colors;
+		colorsCache = { ...props.colors };
+		return colorsCache;
+	}
+	colorsSource = undefined;
+	colorsCache = undefined;
+	return {
+		0: "",
+		5: "var(--color-green-300)",
+		10: "var(--color-green-500)",
+		15: "var(--color-green-700)",
+		20: "var(--color-green-900)"
+	};
 });
-const rangedDates = computed(
-  () => getAllDatesBetween(
-    props.startDate || getDefaultStartDate(),
-    props.endDate || getDefaultEndDate()
-  )
-);
+const colorThresholds = computed(() => Object.keys(computedColors.value).map(Number).sort((a, b) => a - b));
+function getColor(count) {
+	const colors = computedColors.value;
+	const thresholds = colorThresholds.value;
+	const length = thresholds.length;
+	if (length === 0) {
+		return "";
+	}
+	for (let i = 0; i < length; i++) {
+		if (count < thresholds[i]) {
+			return colors[thresholds[i - 1]];
+		}
+	}
+	return colors[thresholds[length - 1]];
+}
+const rangedDates = computed(() => getAllDatesBetween(props.startDate || getDefaultStartDate(), props.endDate || getDefaultEndDate()));
+const dateInfoList = computed(() => rangedDates.value.dates.map((dateStr) => {
+	// a bare 'YYYY-MM-DD' string is parsed as UTC by `new Date()`, so the local
+	// getters below would return the previous day in negative-offset timezones
+	const date = new Date(`${dateStr}T00:00:00`);
+	return {
+		year: date.getFullYear(),
+		month: date.getMonth(),
+		day: date.getDate(),
+		weekday: date.getDay()
+	};
+}));
+let dateCountData;
+let dateCountNames;
+let dateCountMapCache;
 const dateCountMap = computed(() => {
-  const { date, count } = props.fieldNames || { date: "date", count: "count" };
-  return props.data.reduce(
-    (acc, cur) => {
-      acc[cur[date]] = (acc[cur[date]] || 0) + cur[count];
-      return acc;
-    },
-    {}
-  );
+	const fieldNames = props.fieldNames || {
+		date: "date",
+		count: "count"
+	};
+	const namesUnchanged = fieldNames === dateCountNames || !isUndefined(dateCountNames) && isShallowEqualObject(fieldNames, dateCountNames);
+	if (isUndefined(dateCountMapCache) || props.data !== dateCountData || !namesUnchanged) {
+		dateCountData = props.data;
+		dateCountNames = fieldNames;
+		dateCountMapCache = props.data.reduce((acc, cur) => {
+			acc[cur[fieldNames.date]] = (acc[cur[fieldNames.date]] || 0) + cur[fieldNames.count];
+			return acc;
+		}, {});
+	}
+	return dateCountMapCache;
 });
+// get localized day of week
 function getLocalizedDay(dayIndex) {
-  return configProvider.locale.date.day[dayIndex];
+	return configProvider.locale.date.day[dayIndex];
 }
 const tableHeadList = computed(() => {
-  if (props.transpose) {
-    return Array.from({ length: 7 }, (_, i) => {
-      return [1, 3, 5].includes(i) ? getLocalizedDay(i) : "";
-    });
-  }
-  return createMonthHeaders();
+	// transpose mode: table head is day of week
+	if (props.transpose) {
+		return Array.from({ length: 7 }, (_, i) => {
+			return [
+				1,
+				3,
+				5
+			].includes(i) ? getLocalizedDay(i) : "";
+		});
+	}
+	// non-transpose mode: table head is month
+	return createMonthHeaders();
 });
+// check if should mark as month header
 function shouldMarkAsMonthHeader(currentMonth, newMonth, dayOfMonth) {
-  return currentMonth !== newMonth && dayOfMonth === 1;
+	return currentMonth !== newMonth && dayOfMonth === 1;
 }
 function createMonthHeaders() {
-  const dates = rangedDates.value.dates;
-  const columnsCount = Math.ceil(dates.length / 7);
-  const monthHeaders = Array.from({ length: columnsCount }, () => "");
-  const firstDate = new Date(dates[0]);
-  let trackedMonth = firstDate.getMonth();
-  for (let col = 0; col < columnsCount; col++) {
-    for (let dayInWeek = 0; dayInWeek < 7; dayInWeek++) {
-      const dateIndex = col * 7 + dayInWeek;
-      if (dateIndex < dates.length) {
-        const currentDate = new Date(dates[dateIndex]);
-        const currentMonth = currentDate.getMonth();
-        const dayOfMonth = currentDate.getDate();
-        if (shouldMarkAsMonthHeader(trackedMonth, currentMonth, dayOfMonth)) {
-          trackedMonth = currentMonth;
-          monthHeaders[col] = configProvider.locale.date.month[currentMonth];
-        }
-      }
-    }
-  }
-  const isFirstTwoColumnsEmpty = monthHeaders[0] === "" && monthHeaders[1] === "";
-  if (isFirstTwoColumnsEmpty) {
-    monthHeaders[0] = configProvider.locale.date.month[firstDate.getMonth()];
-  }
-  return monthHeaders;
+	const dates = rangedDates.value.dates;
+	const columnsCount = Math.ceil(dates.length / 7);
+	const monthHeaders = Array.from({ length: columnsCount }, () => "");
+	const firstInfo = dateInfoList.value[0];
+	let trackedMonth = firstInfo.month;
+	for (let col = 0; col < columnsCount; col++) {
+		for (let dayInWeek = 0; dayInWeek < 7; dayInWeek++) {
+			const dateIndex = col * 7 + dayInWeek;
+			if (dateIndex < dates.length) {
+				const currentInfo = dateInfoList.value[dateIndex];
+				// check if is the first day of the new month
+				if (shouldMarkAsMonthHeader(trackedMonth, currentInfo.month, currentInfo.day)) {
+					trackedMonth = currentInfo.month;
+					monthHeaders[col] = configProvider.locale.date.month[currentInfo.month];
+				}
+			}
+		}
+	}
+	// handle edge case: ensure the first month is correctly displayed and does not overlap with other months
+	const isFirstTwoColumnsEmpty = monthHeaders[0] === "" && monthHeaders[1] === "";
+	if (isFirstTwoColumnsEmpty) {
+		monthHeaders[0] = configProvider.locale.date.month[firstInfo.month];
+	}
+	return monthHeaders;
 }
-const tableBodyList = computed(() => {
-  return props.transpose ? createTransposedTableData() : createStandardTableData();
-});
+const tableBodyList = shallowRef([]);
+function refreshTableBodyList() {
+	tableBodyList.value = props.transpose ? createTransposedTableData() : createStandardTableData();
+}
+// create transposed table data (rows are dates, columns are days of week)
 function createTransposedTableData() {
-  const dataMap = dateCountMap.value;
-  const dateList = rangedDates.value.dates;
-  const dateListLength = dateList.length;
-  const monthRows = [];
-  let currentMonth = -1;
-  let currentYear = -1;
-  let currentRow = null;
-  for (let i = 0; i < dateListLength; i++) {
-    const dateStr = dateList[i];
-    const date = new Date(dateStr);
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    const dayOfWeek = date.getDay();
-    const count = dataMap[dateStr] || 0;
-    if (currentRow === null) {
-      currentRow = [];
-      if (i === 0) {
-        for (let j = 0; j < dayOfWeek; j++) {
-          currentRow.push({
-            hidden: true,
-            date: void 0,
-            count: 0,
-            color: void 0
-          });
-        }
-      }
-    }
-    currentRow.push({
-      hidden: false,
-      date: dateStr,
-      count,
-      color: getColorByThreshold(count, computedColors.value)
-    });
-    if (month !== currentMonth || year !== currentYear) {
-      currentMonth = month;
-      currentYear = year;
-    }
-    const isLastItem = i === dateListLength - 1;
-    const isRowFull = currentRow.length >= 7;
-    if (isRowFull || isLastItem) {
-      if (currentRow.length < 7 && isLastItem) {
-        while (currentRow.length < 7) {
-          currentRow.push({
-            hidden: true,
-            date: void 0,
-            count: 0,
-            color: void 0
-          });
-        }
-      }
-      monthRows.push([...currentRow]);
-      currentRow = null;
-    }
-  }
-  return markMonthRows(monthRows);
+	const dataMap = dateCountMap.value;
+	const dateList = rangedDates.value.dates;
+	const dateListLength = dateList.length;
+	const monthRows = [];
+	let currentRow = null;
+	for (let i = 0; i < dateListLength; i++) {
+		const dateStr = dateList[i];
+		const dateInfo = dateInfoList.value[i];
+		const count = dataMap[dateStr] || 0;
+		// create new row
+		if (currentRow === null) {
+			currentRow = [];
+			// only the first row needs to fill empty cells
+			if (i === 0) {
+				for (let j = 0; j < dateInfo.weekday; j++) {
+					currentRow.push({
+						hidden: true,
+						date: undefined,
+						count: 0,
+						color: undefined
+					});
+				}
+			}
+		}
+		// add current date cell
+		currentRow.push({
+			hidden: false,
+			date: dateStr,
+			count,
+			color: getColor(count)
+		});
+		const isLastItem = i === dateListLength - 1;
+		const isRowFull = currentRow.length >= 7;
+		// row is full or last item, add to result
+		if (isRowFull || isLastItem) {
+			// fill the last row
+			if (currentRow.length < 7 && isLastItem) {
+				while (currentRow.length < 7) {
+					currentRow.push({
+						hidden: true,
+						date: undefined,
+						count: 0,
+						color: undefined
+					});
+				}
+			}
+			const row = [...currentRow];
+			row.rowKey = currentRow.find((cell) => cell.date)?.date;
+			monthRows.push(row);
+			currentRow = null;
+		}
+	}
+	return markMonthRows(monthRows);
 }
+// create standard table data (rows are days of week, columns are dates)
 function createStandardTableData() {
-  const dataMap = dateCountMap.value;
-  const dateList = rangedDates.value.dates;
-  const dateListLength = dateList.length;
-  const firstDayOfWeek = rangedDates.value.weeks[0];
-  const result = Array.from({ length: 7 }, (_, i) => {
-    const row = [];
-    if (i < firstDayOfWeek) {
-      row.push({
-        hidden: true,
-        date: void 0,
-        count: 0,
-        color: void 0
-      });
-    }
-    const rowWithHeader = row;
-    rowWithHeader.headerText = [1, 3, 5].includes(i) ? getLocalizedDay(i) : " ";
-    return rowWithHeader;
-  });
-  for (let i = 0; i < dateListLength; i++) {
-    const dateStr = dateList[i];
-    const count = dataMap[dateStr] || 0;
-    const dayOfWeek = new Date(dateStr).getDay();
-    result[dayOfWeek].push({
-      hidden: false,
-      date: dateStr,
-      count,
-      color: getColorByThreshold(count, computedColors.value)
-    });
-  }
-  return result;
+	const dataMap = dateCountMap.value;
+	const dateList = rangedDates.value.dates;
+	const dateListLength = dateList.length;
+	const firstDayOfWeek = rangedDates.value.weeks[0];
+	// initialize 7 rows (represents days of week)
+	const result = Array.from({ length: 7 }, (_, i) => {
+		const row = [];
+		// fill empty cells if the first week is not complete
+		if (i < firstDayOfWeek) {
+			row.push({
+				hidden: true,
+				date: undefined,
+				count: 0,
+				color: undefined
+			});
+		}
+		// add headerText attribute
+		const rowWithHeader = row;
+		rowWithHeader.headerText = [
+			1,
+			3,
+			5
+		].includes(i) ? getLocalizedDay(i) : " ";
+		return rowWithHeader;
+	});
+	// fill all date data
+	for (let i = 0; i < dateListLength; i++) {
+		const dateStr = dateList[i];
+		const count = dataMap[dateStr] || 0;
+		const dayOfWeek = dateInfoList.value[i].weekday;
+		result[dayOfWeek].push({
+			hidden: false,
+			date: dateStr,
+			count,
+			color: getColor(count)
+		});
+	}
+	return result;
 }
+// mark month rows
 function markMonthRows(rows) {
-  const monthMap = {};
-  for (let i = 0; i < rows.length; i++) {
-    const row = rows[i];
-    const firstValidCell = row.find((cell) => !cell.hidden && cell.date);
-    if (firstValidCell) {
-      const date = new Date(firstValidCell.date);
-      const month = date.getMonth();
-      const year = date.getFullYear();
-      const day = date.getDate();
-      const key = `${year}-${month}`;
-      if (!monthMap[key] || day === 1) {
-        monthMap[key] = true;
-        row.isMonthFirstRow = true;
-        row.monthName = configProvider.locale.date.month[month];
-        row.headerText = row.monthName;
-      }
-    }
-  }
-  return rows;
+	const monthMap = {};
+	for (let i = 0; i < rows.length; i++) {
+		const row = rows[i];
+		const firstValidCell = row.find((cell) => !cell.hidden && cell.date);
+		if (firstValidCell) {
+			const date = new Date(`${firstValidCell.date}T00:00:00`);
+			const month = date.getMonth();
+			const year = date.getFullYear();
+			const day = date.getDate();
+			const key = `${year}-${month}`;
+			// mark month first row
+			if (!monthMap[key] || day === 1) {
+				monthMap[key] = true;
+				row.isMonthFirstRow = true;
+				row.monthName = configProvider.locale.date.month[month];
+				row.headerText = row.monthName;
+			}
+		}
+	}
+	return rows;
 }
+const scheduleRefreshTableBodyList = scheduleByRaf(refreshTableBodyList);
+refreshTableBodyList();
+watch(() => [
+	dateCountMap.value,
+	rangedDates.value,
+	props.transpose,
+	computedColors.value,
+	configProvider.locale.date.day,
+	configProvider.locale.date.month
+], scheduleRefreshTableBodyList, { flush: "post" });
 function onCellClick(event) {
-  const target = event.target;
-  const date = target.dataset.date;
-  if (!date) {
-    return;
-  }
-  selectedDate.value = selectedDate.value === date ? "" : date;
-  emits("select", date, event);
+	const target = event.target;
+	const date = target.dataset.date;
+	if (!date) {
+		return;
+	}
+	selectedDate.value = selectedDate.value === date ? "" : date;
+	emits("change", date, event);
 }
 let tbodyRect;
 const tbodyRef = shallowRef();
 const tooltipInfo = shallowRef({});
 const { value: showTooltip, setValue: setShowTooltip } = useDelayChange(false, { delay: 500 });
+const pendingTooltip = {
+	target: null,
+	date: ""
+};
+const scheduleTooltipUpdate = scheduleByRaf(() => {
+	const { target, date } = pendingTooltip;
+	if (!target || !date) {
+		return;
+	}
+	// on mobile, the pointerover event is triggered before the pointerenter event,
+	// and the position information may change after scrolling
+	// so getting it before using it can ensure the correct position information
+	if (!tbodyRect) {
+		tbodyRect = tbodyRef.value.getBoundingClientRect();
+	}
+	setShowTooltip(true, true);
+	const rect = target.getBoundingClientRect();
+	let top = rect.top - tbodyRect.top - CELL_SIZE;
+	// if only the graph is displayed, the tooltip position needs to be reduced by one cell height, because the title is hidden and the position will be above
+	if (props.graphOnly) {
+		top -= CELL_SIZE;
+	}
+	tooltipInfo.value = {
+		date,
+		count: dateCountMap.value[date] || 0,
+		left: rect.left - tbodyRect.left + CELL_GAP,
+		top
+	};
+});
+// when pointer leaves the table area, hide the tooltip
 function onPointerLeave() {
-  setShowTooltip(false, true);
-  tooltipInfo.value = {};
-  tbodyRect = null;
+	pendingTooltip.target = null;
+	pendingTooltip.date = "";
+	scheduleTooltipUpdate.cancel();
+	setShowTooltip(false, true);
+	tooltipInfo.value = {};
+	tbodyRect = null;
 }
-async function onPointerOver(ev) {
-  if (!props.tooltip) {
-    return;
-  }
-  const targetEl = ev.target;
-  if (targetEl.tagName !== "TD") {
-    setShowTooltip(false);
-    return;
-  }
-  const date = targetEl.dataset.date;
-  if (!date) {
-    setShowTooltip(false, true);
-    return;
-  }
-  if (!tbodyRect) {
-    tbodyRect = tbodyRef.value.getBoundingClientRect();
-  }
-  setShowTooltip(true, true);
-  const rect = targetEl.getBoundingClientRect();
-  let top = rect.top - tbodyRect.top - CELL_SIZE;
-  if (props.graphOnly) {
-    top -= CELL_SIZE;
-  }
-  tooltipInfo.value = {
-    date,
-    count: dateCountMap.value[date] || 0,
-    left: rect.left - tbodyRect.left + CELL_GAP,
-    top
-  };
+// when pointer hovers over a cell, show the tooltip
+function onPointerOver(ev) {
+	if (!props.tooltip) {
+		return;
+	}
+	const targetEl = ev.target;
+	if (targetEl.tagName !== "TD") {
+		if (showTooltip.value) {
+			setShowTooltip(false);
+		}
+		return;
+	}
+	const date = targetEl.dataset.date;
+	// if there is no date data, hide the tooltip
+	if (!date) {
+		setShowTooltip(false, true);
+		return;
+	}
+	pendingTooltip.target = targetEl;
+	pendingTooltip.date = date;
+	scheduleTooltipUpdate();
 }
 onBeforeUnmount(() => {
-  onPointerLeave();
+	scheduleRefreshTableBodyList.cancel();
+	onPointerLeave();
 });
 </script>
 
 <template>
   <div
+    data-active-graph
     class="pxd-active-graph relative"
-    :class="[graphOnly ? 'py-0.75 pr-0.75' : 'pr-5']"
+    :class="[graphOnly ? 'py-0.75 pe-0.75' : 'pe-5']"
     v-bind="$attrs"
   >
     <table
       role="grid"
       aria-readonly="true"
-      class="table-auto border-separate"
+      class="table-fixed border-separate"
       style="border-spacing: 3px"
       @pointerleave="onPointerLeave"
     >
@@ -302,11 +444,11 @@ onBeforeUnmount(() => {
       <tbody
         ref="tbodyRef"
         class="text-xs"
-        :style="{ '--active-graph-item-radius': getCssUnitValue(itemRadius) }"
+        :style="itemRadiusStyle"
         @click="onCellClick"
         @pointerover.capture="onPointerOver"
       >
-        <tr v-for="(row, i) of tableBodyList" :key="i" class="h-3">
+        <tr v-for="(row, i) of tableBodyList" :key="row.rowKey || i" class="h-3">
           <td
             class="pxd-active-graph--label relative overflow-hidden leading-none text-foreground-secondary"
           >
@@ -318,14 +460,14 @@ onBeforeUnmount(() => {
           <td
             v-for="col of row"
             :key="col.date"
-            class="pxd-active-graph--item w-3 min-w-3 rounded-(--active-graph-item-radius) border border-transparent bg-gray-alpha-100 hover:border-primary motion-safe:transition-appearance"
+            class="pxd-active-graph--item max-w-3 min-w-3 rounded-(--active-graph-item-radius) border border-transparent bg-gray-alpha-100 hover:border-primary motion-safe:transition-colors"
             :data-date="col.date"
             :class="{
   'pointer-events-none invisible': col.hidden,
   'opacity-30': selectedDate && col.date !== selectedDate,
   'border-primary!': selectedDate && col.date === selectedDate
 }"
-            :style="`background: ${col.color}`"
+            :style="{ background: col.color }"
           />
         </tr>
 
@@ -339,8 +481,8 @@ onBeforeUnmount(() => {
             </td>
 
             <td
-              v-for="color in computedColors"
-              :key="color"
+              v-for="(color, colorIndex) in computedColors"
+              :key="colorIndex"
               class="w-3 h-3 rounded-(--active-graph-item-radius) bg-gray-alpha-100 motion-safe:transition-colors"
               :style="`background-color: ${color}`"
             />
@@ -358,7 +500,7 @@ onBeforeUnmount(() => {
     <Transition v-if="tooltip" name="pxd-transition--fade" mode="out-in" appear>
       <div
         v-if="showTooltip"
-        class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-13 text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
+        class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 shadow-lg pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-13 text-gray-100"
         :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
       >
         <slot name="tooltip" :data="tooltipInfo"