feat:增加健康模块睡眠时间监控

src/components/Health/HealthChart.vue

@@ -9,6 +9,13 @@
       <div class="chart" ref="weightDailyChartRef"/>
     </div>
 
+    <div class="chart-container card-item">
+      <div class="content">
+        <span class="title">📊睡眠时长统计图</span>
+      </div>
+      <div class="chart" ref="sleepDailyChartRef"/>
+    </div>
+
     <div class="chart-container card-item">
       <div class="content">
         <span class="title">📊运动时长统计</span>
@@ -31,15 +38,18 @@ import * as echarts from 'echarts'
 import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
 import { useHealthStore } from '@/store/health'
 import { useAppStore } from '@/store/app.ts'
+import { formatDate } from 'vue3-common/utils/dateUtil'
 
 const healthStore = useHealthStore()
 const appStore = useAppStore()
 
 const weightDailyChartRef = ref<HTMLElement>()
+const sleepDailyChartRef = ref<HTMLElement>()
 const healthDurationChartRef = ref<HTMLElement>()
 const healthCategoryChartRef = ref<HTMLElement>()
 
 let weightDailyChart: echarts.ECharts
+let sleepDailyChart: echarts.ECharts
 let healthDurationChart: echarts.ECharts
 let healthCategoryChart: echarts.ECharts
 
@@ -49,6 +59,7 @@ watch(() => healthStore.isRefresh, () => {
 
 onMounted(() => {
   weightDailyChart = echarts.init(weightDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
+  sleepDailyChart = echarts.init(sleepDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   healthDurationChart = echarts.init(healthDurationChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   healthCategoryChart = echarts.init(healthCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
 })
@@ -57,9 +68,15 @@ const updateChart = () => {
   const MAX_CATEGORY_COUNT = 5
 
   // 体重趋势统计图
-  const weightXAxis = healthStore.healthRecordList.map((item) => item.date).reverse()
-  const weightYAxis = healthStore.healthRecordList.map((item) => item.weight).reverse()
-  const sortedRecordList = healthStore.healthRecordList.sort((a, b) => a.weight - b.weight)
+  const weightRecordList = healthStore.healthRecordList
+    .filter((item) => item.weight !== 0)
+
+  const weightXAxis = weightRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
+  const weightYAxis = weightRecordList.map((item) => item.weight).reverse()
+  const sortedRecordList = weightRecordList.sort((a, b) => a.weight - b.weight)
+
   weightDailyChart.setOption(lineChartOptions('日期', weightXAxis, '体重（千克）', weightYAxis))
   weightDailyChart.setOption({
     yAxis: {
@@ -68,10 +85,28 @@ const updateChart = () => {
     }
   })
 
+  // 睡眠时长统计图
+  const sleepRecordList = healthStore.healthRecordList
+    .filter((item) => item.sleepDuration !== null)
+    .sort((a, b) => (a.date > b.date ? -1 : 1))
+
+  const sleepXAxis = sleepRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
+  const sleepYAxis = sleepRecordList.map((item) => item.sleepDuration).reverse() as number[]
+
+  sleepDailyChart.setOption(barChartOptions('日期', sleepXAxis, '时间（小时）', sleepYAxis))
+
   // 运动量统计图
-  const sportRecordList = healthStore.healthRecordList.filter((item) => item.sportProject !== '')
-  const durationXAxis = sportRecordList.map((item) => item.date).reverse()
+  const sportRecordList = healthStore.healthRecordList
+    .filter((item) => item.sportProject !== '')
+    .sort((a, b) => (a.date > b.date ? -1 : 1))
+
+  const durationXAxis = sportRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
   const durationYAxis = sportRecordList.map((item) => item.sportDuration).reverse()
+
   healthDurationChart.setOption(barChartOptions('日期', durationXAxis, '时间（分钟）', durationYAxis))
 
   // 类别统计图