fix: 每日活跃图表垂直时时间排列 (#39)

shion-app · Jul 6, 2024 · e76862e · e76862e
1 parent d2fbc00
commit e76862e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/components/widget/DailyActivity.vue b/src/components/widget/DailyActivity.vue
@@ -18,11 +18,12 @@ const labelList = ref<Array<SelectLabel>>([])
 const activityList = ref<Array<SelectActivity>>([])
 const programList = ref<Array<SelectProgram>>([])
 
-const x = new Array(24).fill(0).map((_, i) => i)
-
 const vertical = computed(() => props.data.fields?.vertical || false)
 
 const option = computed(() => {
+  const x = new Array(24).fill(0).map((_, i) => i)
+  const xAxisData = vertical.value ? x.reverse() : x
+
   const transformNoteList = splitByHour(noteList.value).filter(i => isSameDay(selectedDateVModel.value, i.start))
   const transformactivityList = splitByHour(activityList.value).filter(i => isSameDay(selectedDateVModel.value, i.start))
 
@@ -31,7 +32,7 @@ const option = computed(() => {
       name,
       type: 'bar',
       stack: 'label',
-      data: x.map(time => calcTotalTime(transformNoteList.filter(i => i.label.id == id && (isSameHour(new Date(selectedDateVModel.value).setHours(time), i.start))))),
+      data: xAxisData.map(time => calcTotalTime(transformNoteList.filter(i => i.label.id == id && (isSameHour(new Date(selectedDateVModel.value).setHours(time), i.start))))),
       itemStyle: {
         color: transformNoteList.find(i => i.label.id == id)?.label.color,
       },
@@ -46,7 +47,7 @@ const option = computed(() => {
       name,
       type: 'bar',
       stack: 'label',
-      data: x.map(time => calcTotalTime(transformactivityList.filter(i => i.program.id == id && (isSameHour(new Date(selectedDateVModel.value).setHours(time), i.start))))),
+      data: xAxisData.map(time => calcTotalTime(transformactivityList.filter(i => i.program.id == id && (isSameHour(new Date(selectedDateVModel.value).setHours(time), i.start))))),
       itemStyle: {
         color: transformactivityList.find(i => i.program.id == id)?.program.color,
       },
@@ -56,12 +57,13 @@ const option = computed(() => {
     }
   })
 
-  const xAxisData = x.map(complement)
-
   const xAxis = [
     {
       type: 'category',
-      data: vertical.value ? xAxisData.reverse() : xAxisData,
+      data: xAxisData,
+      axisLabel: {
+        formatter: complement,
+      },
     },
   ]
 

diff --git a/src/components/widget/SingleCategoryBar.vue b/src/components/widget/SingleCategoryBar.vue
@@ -60,9 +60,11 @@ async function init() {
 
 const option = computed<EChartsOption>(() => {
   const x = new Array(day).fill(0).map((_, i) => subDays(new Date(), i).getTime())
+  const xAxisData = vertical.value ? x : x.reverse()
+
   const xAxis = {
     type: 'category',
-    data: vertical.value ? x : x.reverse(),
+    data: xAxisData,
     axisLabel: {
       formatter: time => format(new Date(Number(time)), 'MM-dd'),
     },
@@ -107,7 +109,7 @@ const option = computed<EChartsOption>(() => {
     },
     series: {
       type: 'bar',
-      data: x.map(date => calcTotalTime(list.value.filter(({ start }) => isSameDay(date, start)))),
+      data: xAxisData.map(date => calcTotalTime(list.value.filter(({ start }) => isSameDay(date, start)))),
       itemStyle: {
         color: color.value,
       },