Fix the title of calendar heatmap on the dashboard (sheepzh#323)

Author: sheepzh

src/app/components/Analysis/components/Summary/Calendar/Wrapper.ts

@@ -7,10 +7,10 @@
 import { t } from "@app/locale"
 import { periodFormatter } from "@app/util/time"
 import { EchartsWrapper } from "@hooks/useEcharts"
-import { locale } from "@i18n"
+import weekHelper from "@service/components/week-helper"
 import { groupBy, rotate } from "@util/array"
 import { getRegularTextColor, getSecondaryTextColor } from "@util/style"
-import { formatTime, getAllDatesBetween, getWeeksAgo, parseTime } from "@util/time"
+import { formatTime, getAllDatesBetween, MILL_PER_WEEK, parseTime } from "@util/time"
 import {
     ComposeOption,
     EffectScatterSeriesOption,
@@ -148,11 +148,11 @@ export type BizOption = {
 class Wrapper extends EchartsWrapper<BizOption, EcOption> {
     isSizeSensitize = true
 
-    protected generateOption({ rows = [], timeFormat }: BizOption): EcOption | Promise<EcOption> {
+    protected async generateOption({ rows = [], timeFormat }: BizOption): Promise<EcOption> {
         const width = this.getDomWidth()
-        const weekNum = getWeekNum(width)
+        const colNum = getWeekNum(width)
         const endTime = new Date()
-        const startTime = getWeeksAgo(endTime, locale === "zh_CN", weekNum)
+        const [startTime,] = await weekHelper.getWeekDate(endTime.getTime() - MILL_PER_WEEK * (colNum - 1))
         const allDates = getAllDatesBetween(startTime, endTime)
         const value = groupBy(rows, r => r.date, l => l?.[0]?.focus)
         const data: _Value[] = []
@@ -163,12 +163,9 @@ class Wrapper extends EchartsWrapper<BizOption, EcOption> {
             const x = colIndex, y = 7 - (1 + weekDay)
             data.push([x, y, dailyMills, date])
         })
+        const weekStart = await weekHelper.getRealWeekStart()
         const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
-        if (locale !== "zh_CN") {
-            // Let Sunday last
-            // Saturday to Sunday
-            rotate(weekDays, 1)
-        }
+        rotate(weekDays, weekStart, true)
         return optionOf(data, weekDays, timeFormat, width)
     }
 }

src/app/components/Dashboard/components/Calendar/Wrapper.ts

@@ -6,21 +6,24 @@
  */
 import type {
     ComposeOption,
-    TooltipComponentOption, GridComponentOption, VisualMapComponentOption,
-    ScatterSeriesOption, HeatmapSeriesOption,
+    GridComponentOption,
+    HeatmapSeriesOption,
+    ScatterSeriesOption,
+    TooltipComponentOption,
+    VisualMapComponentOption,
 } from "echarts"
 
-import { EchartsWrapper } from "@hooks/useEcharts"
-import { formatPeriodCommon, getAllDatesBetween, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time"
-import { groupBy, rotate } from "@util/array"
+import { createTabAfterCurrent } from "@api/chrome/tab"
 import { t } from "@app/locale"
-import { getPrimaryTextColor } from "@util/style"
-import { getAppPageUrl } from "@util/constant/url"
 import { REPORT_ROUTE } from "@app/router/constants"
-import { createTabAfterCurrent } from "@api/chrome/tab"
 import { getStepColors } from "@app/util/echarts"
-import { locale } from "@i18n"
 import { cvt2LocaleTime } from "@app/util/time"
+import { EchartsWrapper } from "@hooks/useEcharts"
+import weekHelper from "@service/components/week-helper"
+import { groupBy, rotate } from "@util/array"
+import { getAppPageUrl } from "@util/constant/url"
+import { getPrimaryTextColor } from "@util/style"
+import { formatPeriodCommon, getAllDatesBetween, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time"
 
 type _Value = [
     x: number,
@@ -197,7 +200,7 @@ function handleClick(value: _Value): void {
 class Wrapper extends EchartsWrapper<BizOption, EcOption> {
     protected isSizeSensitize: boolean = true
 
-    protected generateOption(option: BizOption): EcOption | Promise<EcOption> {
+    protected async generateOption(option: BizOption): Promise<EcOption> {
         if (!option) return {}
 
         const { startTime, endTime, value } = option
@@ -211,11 +214,8 @@ class Wrapper extends EchartsWrapper<BizOption, EcOption> {
             data.push([x, y, dailyMills, date])
         })
         const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse()
-        if (locale !== "zh_CN") {
-            // Let Sunday last
-            // Saturday to Sunday
-            rotate(weekDays, 1)
-        }
+        const weekStart = await weekHelper.getRealWeekStart()
+        weekStart && rotate(weekDays, weekStart, true)
         return optionOf(data, weekDays, this.getDom())
     }
 

src/app/components/Dashboard/components/Calendar/index.tsx

@@ -5,22 +5,22 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { t } from "@app/locale"
 import { useRequest } from "@hooks"
 import { useEcharts } from "@hooks/useEcharts"
-import { locale } from "@i18n"
+import weekHelper from "@service/components/week-helper"
 import statService from "@service/stat-service"
-import { getWeeksAgo, MILL_PER_HOUR } from "@util/time"
-import { defineComponent } from "vue"
-import Wrapper, { BizOption } from "./Wrapper"
 import { groupBy, sum } from "@util/array"
-import { t } from "@app/locale"
+import { formatTimeYMD, MILL_PER_DAY, MILL_PER_HOUR } from "@util/time"
+import { computed, defineComponent } from "vue"
 import ChartTitle from "../../ChartTitle"
+import Wrapper, { BizOption } from "./Wrapper"
 
-const WEEK_NUM = 53
-
-const titleText = (option: BizOption) => {
-    const { value } = option || {}
-    const totalMills = sum(Object.values(value || {}))
+const titleText = (option: Result) => {
+    const { value, yearAgo } = option || {}
+    const start = formatTimeYMD(yearAgo)
+    const statValues = Object.entries(value || {}).filter(([date]) => date.localeCompare(start) >= 0).map(([, v]) => v)
+    const totalMills = sum(statValues)
     const totalHours = Math.floor(totalMills / MILL_PER_HOUR)
     return t(msg => totalHours
         ? msg.dashboard.heatMap.title0
@@ -29,21 +29,25 @@ const titleText = (option: BizOption) => {
     )
 }
 
-const fetchData = async (): Promise<BizOption> => {
+type Result = BizOption & { yearAgo: Date }
+
+const fetchData = async (): Promise<Result> => {
     const endTime = new Date()
-    const startTime: Date = getWeeksAgo(endTime, locale === "zh_CN", WEEK_NUM)
+    const yearAgo = new Date(endTime.getTime() - MILL_PER_DAY * 365)
+    const [startTime] = await weekHelper.getWeekDate(yearAgo)
     const items = await statService.select({ date: [startTime, endTime], sort: "date" })
     const value = groupBy(
         items,
         i => i.date,
         list => sum(list?.map(i => i.focus ?? 0))
     )
-    return { value, startTime, endTime }
+    return { value, startTime, endTime, yearAgo }
 }
 
 const _default = defineComponent(() => {
     const { data } = useRequest(fetchData)
-    const { elRef } = useEcharts(Wrapper, data)
+    const biz = computed(() => (data.value as BizOption))
+    const { elRef } = useEcharts(Wrapper, biz)
 
     return () => (
         <div class="calendar-container">

src/popup/components/footer/index.ts

@@ -8,11 +8,11 @@
 import type { PopupQueryResult, PopupRow } from "@popup/common"
 import type { StatQueryParam } from "@service/stat-service"
 
-import { locale } from "@i18n"
 import { t } from "@popup/locale"
+import weekHelper from "@service/components/week-helper"
 import optionService from "@service/option-service"
 import statService from "@service/stat-service"
-import { getDayLength, getMonthTime, getWeekTime, MILL_PER_DAY } from "@util/time"
+import { getDayLength, getMonthTime, MILL_PER_DAY } from "@util/time"
 import initAllFunction from './all-function'
 import MergeHostWrapper from "./merge-host"
 import TimeSelectWrapper from "./select/time-select"
@@ -26,11 +26,15 @@ type FooterParam = StatQueryParam & {
 
 type QueryResultHandler = (result: PopupQueryResult) => void
 
-type DateRangeCalculator = (now: Date, weekStart: timer.option.WeekStartOption) => Date | [Date, Date]
+type DateRangeCalculator = (now: Date) => Promise<Date | [Date, Date]> | Date | [Date, Date]
 
 const dateRangeCalculators: { [duration in timer.option.PopupDuration]: DateRangeCalculator } = {
     today: now => now,
-    thisWeek: (now, weekStart) => getWeekTime(now, weekStart, locale),
+    thisWeek: async now => {
+        const [start] = await weekHelper.getWeekDate(now)
+        console.log(start)
+        return [start, now]
+    },
     thisMonth: now => [getMonthTime(now)[0], now],
     last30Days: now => [new Date(now.getTime() - MILL_PER_DAY * 29), now],
     allTime: () => null,
@@ -79,7 +83,7 @@ class FooterWrapper {
     async query() {
         const option = await optionService.getAllOption()
         const itemCount = option.popupMax
-        const queryParam = this.getQueryParam(option.weekStart)
+        const queryParam = await this.getQueryParam()
         const rows = await statService.select(queryParam, true)
         const popupRows: PopupRow[] = []
         const other = otherPopupRow()
@@ -117,10 +121,10 @@ class FooterWrapper {
         this.afterQuery?.(queryResult)
     }
 
-    getQueryParam(weekStart: timer.option.WeekStartOption): FooterParam {
+    async getQueryParam(): Promise<FooterParam> {
         const duration = this.timeSelectWrapper.getSelectedTime()
         const param: FooterParam = {
-            date: dateRangeCalculators[duration]?.(new Date(), weekStart),
+            date: await dateRangeCalculators[duration]?.(new Date()),
             mergeHost: this.mergeHostWrapper.mergedHost(),
             sort: this.typeSelectWrapper.getSelectedType(),
             sortOrder: 'DESC',

src/service/components/week-helper.ts

@@ -1,6 +1,39 @@
 import OptionDatabase from "@db/option-database"
 import { locale } from "@i18n"
-import { formatTimeYMD, getRealWeekStart, getWeekTime } from "@util/time"
+import { formatTimeYMD, getWeekDay, MILL_PER_DAY } from "@util/time"
+
+function getRealWeekStart(weekStart: timer.option.WeekStartOption, locale: timer.Locale): number {
+    weekStart = weekStart ?? 'default'
+    if (weekStart === 'default') {
+        return locale === 'zh_CN' ? 0 : 6
+    } else {
+        return weekStart - 1
+    }
+}
+
+/**
+ * Get the start time and end time of this week
+ * @param now the specific time
+ * @param weekStart 0-6
+ * @returns [startTime, endTime]
+ *
+ * @since 0.6.0
+ */
+function getWeekTime(now: Date, weekStart: number): [Date, Date] {
+    // Returns 0 - 6 means Monday to Sunday
+    const weekDayNow = getWeekDay(now)
+    let start: Date = undefined
+    if (weekDayNow === weekStart) {
+        start = now
+    } else if (weekDayNow < weekStart) {
+        const millDelta = (weekDayNow + 7 - weekStart) * MILL_PER_DAY
+        start = new Date(now.getTime() - millDelta)
+    } else {
+        const millDelta = (weekDayNow - weekStart) * MILL_PER_DAY
+        start = new Date(now.getTime() - millDelta)
+    }
+    return [start, now]
+}
 
 class WeekHelper {
     private optionDb = new OptionDatabase(chrome.storage.local)
@@ -15,12 +48,16 @@ class WeekHelper {
     }
 
     async getWeekDateRange(now: Date): Promise<[startDate: string, endDateOrToday: string]> {
-        const weekStart = await this.getWeekStart()
-        const [start, end] = getWeekTime(now, weekStart, locale)
+        const [start, end] = await this.getWeekDate(now)
         return [formatTimeYMD(start), formatTimeYMD(end)]
     }
 
-    private async getWeekStart(): Promise<timer.option.WeekStartOption> {
+    async getWeekDate(now: Date | number): Promise<[start: Date, end: Date]> {
+        const weekStart = await this.getRealWeekStart()
+        return getWeekTime(typeof now === 'number' ? new Date(now) : now, weekStart)
+    }
+
+    private async getWeekStartOpt(): Promise<timer.option.WeekStartOption> {
         if (!this.initialized) {
             await this.init()
         }
@@ -33,8 +70,8 @@ class WeekHelper {
      * @returns 0-6
      */
     async getRealWeekStart(): Promise<number> {
-        const weekStart = await this.getWeekStart()
-        return getRealWeekStart(weekStart, locale) - 1
+        const weekStart = await this.getWeekStartOpt()
+        return getRealWeekStart(weekStart, locale)
     }
 }
 

src/util/limit.ts

@@ -28,7 +28,7 @@ export function skipToday(item: timer.limit.Item): boolean {
     const weekdays = item?.weekdays
     const weekdayLen = weekdays?.length
     if (weekdayLen && weekdayLen !== 7) {
-        const weekday = getWeekDay(new Date(), true)
+        const weekday = getWeekDay(new Date())
         if (!weekdays.includes(weekday)) return true
     }
     return false

src/util/time.ts

@@ -118,6 +118,8 @@ export const MILL_PER_HOUR = MILL_PER_MINUTE * 60
  */
 export const MILL_PER_DAY = MILL_PER_HOUR * 24
 
+export const MILL_PER_WEEK = MILL_PER_DAY * 7
+
 /**
  * Date range between {start} days ago and {end} days ago
  */
@@ -133,64 +135,10 @@ export function isSameDay(a: Date, b: Date): boolean {
 }
 
 /**
- * Get the start time and end time of this week
- * @param now the specific time
- * @returns [startTime, endTime]
- *
- * @since 0.6.0
- */
-export function getWeekTime(now: Date, weekStart: timer.option.WeekStartOption, locale: timer.Locale): [Date, Date] {
-    weekStart = getRealWeekStart(weekStart, locale)
-    // Returns 0 - 6 means Monday to Sunday
-    const weekDayNow = getWeekDay(now, true)
-    const optionWeekDay = weekDayNow + 1
-    let start: Date = undefined
-    if (optionWeekDay === weekStart) {
-        start = now
-    } else if (optionWeekDay < weekStart) {
-        const millDelta = (optionWeekDay + 7 - weekStart) * MILL_PER_DAY
-        start = new Date(now.getTime() - millDelta)
-    } else {
-        const millDelta = (optionWeekDay - weekStart) * MILL_PER_DAY
-        start = new Date(now.getTime() - millDelta)
-    }
-    return [start, now]
-}
-
-/**
- * return 1-7
- */
-export function getRealWeekStart(weekStart: timer.option.WeekStartOption, locale: timer.Locale): number {
-    weekStart = weekStart ?? 'default'
-    if (weekStart === 'default') {
-        return locale === 'zh_CN' ? 1 : 7
-    } else {
-        return weekStart
-    }
-}
-
-/**
- * Get the start time {@param weekCount} weeks ago
- *
- * @param now the specific time
- * @param weekCount weekCount
- * @since 1.0.0
- */
-export function getWeeksAgo(now: Date, isChinese: boolean, weekCount: number): Date {
-    const date = new Date(now)
-    const nowWeekday = getWeekDay(date, isChinese)
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate() - nowWeekday - weekCount * 7)
-}
-
-/**
- * @returns 0 to 6, means Monday to Sunday if Chinese, or Sunday to Saturday
+ * @returns 0 to 6, means Monday to Sunday
  */
-export function getWeekDay(now: Date, isChinese: boolean): number {
-    const date = new Date(now)
-    return isChinese
-        // Trans 2 chinese weekday
-        ? (date.getDay() + 6) % 7
-        : date.getDay()
+export function getWeekDay(date: Date): number {
+    return (date.getDay() + 6) % 7
 }
 
 /**