Optimie time unit of habit

Author: sheepzh

src/app/components/habit/component/chart/wrapper.ts

@@ -66,24 +66,38 @@ function formatXAxis(ts: number) {
 
 function formatTimeOfEchart(params: any, averageByDate: boolean): string {
     const format = params instanceof Array ? params[0] : params
-    const { value } = format
+    const { value, data } = format
+    const milliseconds = data?.[4] || 0
     // If average, don't show the date
     const start = formatTime(value[2], averageByDate ? '{h}:{i}' : '{m}-{d} {h}:{i}')
     const end = formatTime(value[3], '{h}:{i}')
-    return `${formatPeriodCommon(value[1] * 1000)}<br/>${start}-${end}`
+    return `${formatPeriodCommon(Math.floor(milliseconds))}<br/>${start}-${end}`
 }
 
 const TITLE = t(msg => msg.habit.chart.title)
-const Y_AXIAS_NAME = t(msg => msg.habit.chart.yAxisName)
+const Y_AXIAS_MIN = t(msg => msg.habit.chart.yAxisMin)
+const Y_AXIAS_HOUR = t(msg => msg.habit.chart.yAxisHour)
+
+function getYAxiasName(periodSize: number) {
+    return periodSize === 8 ? Y_AXIAS_HOUR : Y_AXIAS_MIN
+}
+
+function getYAxiasValue(milliseconds: number, periodSize: number) {
+    const seconds = Math.floor(milliseconds / 1000)
+    const minutes = Number.parseFloat((seconds / 60).toFixed(1))
+    const hours = Number.parseFloat((minutes / 60).toFixed(1))
+    return periodSize === 8 ? hours : minutes
+}
+
 function generateOptions(data: timer.period.Row[], averageByDate: boolean, periodSize: number): EcOption {
     const periodData: timer.period.Row[] = averageByDate ? averageByDay(data, periodSize) : data
     const valueData: any[] = []
     periodData.forEach((item) => {
         const startTime = item.startTime.getTime()
         const endTime = item.endTime.getTime()
-        const seconds = Math.floor(item.milliseconds / 1000)
         const x = (startTime + endTime) / 2
-        valueData.push([x, seconds, startTime, endTime])
+        const milliseconds = item.milliseconds
+        valueData.push([x, getYAxiasValue(milliseconds, periodSize), startTime, endTime, milliseconds])
     })
 
     const xAxisMin = periodData[0].startTime.getTime()
@@ -123,7 +137,7 @@ function generateOptions(data: timer.period.Row[], averageByDate: boolean, perio
             max: xAxisMax
         },
         yAxis: {
-            name: Y_AXIAS_NAME,
+            name: getYAxiasName(periodSize),
             nameTextStyle: { color: textColor },
             type: 'value',
             axisLabel: { color: textColor },

src/app/locale/components/habit.ts

@@ -28,7 +28,8 @@ export type HabitMessage = {
     chart: {
         title: string
         saveAsImageTitle: string
-        yAxisName: string
+        yAxisMin: string
+        yAxisHour: string
     }
 }
 
@@ -54,7 +55,8 @@ const _default: Messages<HabitMessage> = {
         chart: {
             title: '上网习惯统计',
             saveAsImageTitle: '保存',
-            yAxisName: '浏览时长 / 秒'
+            yAxisMin: '浏览时长 / 分钟',
+            yAxisHour: '浏览时长 / 小时'
         }
     },
     zh_TW: {
@@ -78,7 +80,8 @@ const _default: Messages<HabitMessage> = {
         chart: {
             title: '上網習慣統計',
             saveAsImageTitle: '保存',
-            yAxisName: '瀏覽時長 / 秒'
+            yAxisMin: '瀏覽時長 / 分鐘',
+            yAxisHour: '瀏覽時長 / 小時'
         }
     },
     en: {
@@ -102,7 +105,8 @@ const _default: Messages<HabitMessage> = {
         chart: {
             title: 'Time-phased Statistics of Browsing Time',
             saveAsImageTitle: 'Snapshot',
-            yAxisName: 'Browsing Time / second'
+            yAxisMin: 'Browsing Time / minute',
+            yAxisHour: 'Browsing Time / hour'
         }
     },
     ja: {
@@ -126,7 +130,8 @@ const _default: Messages<HabitMessage> = {
         chart: {
             title: '時系列の統計を閲覧する',
             saveAsImageTitle: 'ダウンロード',
-            yAxisName: '閲覧時間/秒'
+            yAxisMin: '閲覧時間/分',
+            yAxisHour: '閲覧時間/時間'
         }
     }
 }