[F] Play Activity maybe missing last several days of current month

AquaNet/src/libs/ui.ts

@@ -15,8 +15,8 @@ import moment from 'moment/moment'
 import CalHeatmap from 'cal-heatmap'
 // @ts-expect-error Cal-heatmap does not have proper types
 import CalTooltip from 'cal-heatmap/plugins/Tooltip'
-import { AQUA_HOST, DEFAULT_PFP } from "./config";
+import { AQUA_HOST, DEFAULT_PFP } from "./config"
-import type { AquaNetUser } from "./generalTypes";
+import type { AquaNetUser } from "./generalTypes"
 
 export function title(t: string) {
   document.title = `AquaNet - ${t}`
@@ -35,8 +35,55 @@ export function registerChart() {
   )
 }
 
+const dayTemplate = (DateHelper) => {
+  const ROWS_COUNT = 7
+  const ALLOWED_DOMAIN_TYPE = ['month']
+
+  return {
+    name: 'ghDayFix',
+    allowedDomainType: ALLOWED_DOMAIN_TYPE,
+    rowsCount: () => ROWS_COUNT,
+    columnsCount: (ts) => {
+      let count = DateHelper.getWeeksCountInMonth(ts)
+      const endOfMonth = moment().endOf('month').toDate()
+      const clampEnd = DateHelper.getFirstWeekOfMonth(endOfMonth).toDate()
+
+      if(moment(ts).isSame(new Date(), 'month') && endOfMonth > clampEnd) {
+        count++
+      }
+      return count
+    },
+    mapping: (startTimestamp, endTimestamp) => {
+      const clampStart = DateHelper.getFirstWeekOfMonth(startTimestamp)
+      let clampEnd = DateHelper.getFirstWeekOfMonth(endTimestamp)
+
+      if(moment(startTimestamp).isSame(new Date(), 'month')){
+        clampEnd = DateHelper.date().add(1, 'day')
+      }
+
+      let x = -1
+      const pivotDay = clampStart.weekday()
+
+      return DateHelper.intervals('day', clampStart, clampEnd).map((ts) => {
+        const weekday = DateHelper.date(ts).weekday()
+        if (weekday === pivotDay) {
+          x += 1
+        }
+
+        return {
+          t: ts,
+          x,
+          y: weekday,
+        }
+      })
+    },
+    extractUnit: (ts) => DateHelper.date(ts).startOf('day').valueOf(),
+  }
+}
+
 export function renderCal(el: HTMLElement, d: { date: any, value: any }[]): Promise<any> {
   const cal = new CalHeatmap()
+  cal.addTemplates(dayTemplate)
   return cal.paint({
     itemSelector: el,
     domain: {
@@ -44,7 +91,7 @@ export function renderCal(el: HTMLElement, d: { date: any, value: any }[]): Prom
       label: { text: 'MMM', textAlign: 'start', position: 'top' },
     },
     subDomain: {
-      type: 'ghDay',
+      type: 'ghDayFix',
       radius: 2, width: 11, height: 11, gutter: 4
     },
     range: 12,
@@ -95,7 +142,7 @@ export const CHARTJS_OPT: ChartOptions<'line'> = {
       intersect: false,
       callbacks: {
         title: (tooltipItems) => {
-          const date = tooltipItems[0].parsed.x;
+          const date = tooltipItems[0].parsed.x
           const diff = now.diff(date, 'days')
           return diff ? `${diff} days ago` : 'Today'
         }
@@ -130,16 +177,16 @@ export function tooltip(element: HTMLElement, params: { text: string, dom: HTMLE
     : params.outerHTML
 
   function updatePosition(event: MouseEvent) {
-    div.style.top = `${event.pageY + 10}px`;
+    div.style.top = `${event.pageY + 10}px`
-    div.style.left = `${event.pageX - div.clientWidth / 2 + 5}px`;
+    div.style.left = `${event.pageX - div.clientWidth / 2 + 5}px`
   }
 
   function mouseOver(event: MouseEvent) {
     if (isFocus) return
-    div.innerHTML = p;
+    div.innerHTML = p
     div.style.display = ''
-    updatePosition(event);
+    updatePosition(event)
-    isFocus = true;
+    isFocus = true
   }
 
   function mouseLeave() {
@@ -147,15 +194,15 @@ export function tooltip(element: HTMLElement, params: { text: string, dom: HTMLE
     div.style.display = 'none'
   }
 
-  element.addEventListener('mouseover', mouseOver);
+  element.addEventListener('mouseover', mouseOver)
-  element.addEventListener('mouseleave', mouseLeave);
+  element.addEventListener('mouseleave', mouseLeave)
-  element.addEventListener('mousemove', updatePosition);
+  element.addEventListener('mousemove', updatePosition)
 
   return {
     destroy() {
-      element.removeEventListener('mouseover', mouseOver);
+      element.removeEventListener('mouseover', mouseOver)
-      element.removeEventListener('mouseleave', mouseLeave);
+      element.removeEventListener('mouseleave', mouseLeave)
-      element.removeEventListener('mousemove', updatePosition);
+      element.removeEventListener('mousemove', updatePosition)
     }
   }
 }