From 6e798f739f038093f37514276ec005f38466749b Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 1 Aug 2023 22:15:15 +0800
Subject: [PATCH] support click in trend chart in overview page

---
 src/views/desktop/HomePage.vue                | 16 ++++++++--
 .../overview/MonthlyIncomeAndExpenseCard.vue  | 29 +++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 581d092d..e2628fc8 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -174,7 +174,8 @@
 
         <v-col cols="12" md="6">
             <monthly-income-and-expense-card :data="monthlyIncomeAndExpenseData" :is-dark-mode="isDarkMode"
-                                             :loading="loadingOverview" :disabled="loadingOverview" />
+                                             :loading="loadingOverview" :disabled="loadingOverview"
+                                             :enable-click-item="true" @click="clickMonthlyIncomeOrExpense" />
         </v-col>
     </v-row>
 
@@ -194,7 +195,11 @@ import { useAccountsStore } from '@/stores/account.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
 import datetimeConstants from '@/consts/datetime.js';
-import { formatUnixTime } from '@/lib/datetime.js';
+import {
+    formatUnixTime,
+    getUnixTimeBeforeUnixTime,
+    getUnixTimeAfterUnixTime
+} from '@/lib/datetime.js';
 
 import {
     mdiRefresh,
@@ -376,6 +381,13 @@ export default {
                 }
             });
         },
+        clickMonthlyIncomeOrExpense(e) {
+            const minTime = e.monthStartTime;
+            const maxTime = getUnixTimeBeforeUnixTime(getUnixTimeAfterUnixTime(minTime, 1, 'months'), 1, 'seconds');
+            const type = e.transactionType;
+            
+            this.$router.push(`/transactions?type=${type}&dateType=${datetimeConstants.allDateRanges.Custom.type}&maxTime=${maxTime}&minTime=${minTime}`);
+        },
         getDisplayCurrency(value, currencyCode) {
             return this.$locale.getDisplayCurrency(value, currencyCode, {
                 currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
diff --git a/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue b/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
index 1464bc03..883c99de 100644
--- a/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
+++ b/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
@@ -19,7 +19,8 @@
             </div>
         </v-card-text>
 
-        <v-chart autoresize class="overview-monthly-chart-container" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/>
+        <v-chart autoresize class="overview-monthly-chart-container"
+                 :class="{ 'readonly': !hasAnyData }" :option="chartOptions" @click="clickItem"/>
     </v-card>
 </template>
 
@@ -28,6 +29,7 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
+import transactionConstants from '@/consts/transaction.js';
 import {
     parseDateFromUnixTime,
     getMonthName
@@ -38,7 +40,11 @@ export default {
         'loading',
         'data',
         'disabled',
-        'isDarkMode'
+        'isDarkMode',
+        'enableClickItem'
+    ],
+    emits: [
+        'click'
     ],
     computed: {
         ...mapStores(useSettingsStore, useUserStore),
@@ -251,6 +257,25 @@ export default {
         }
     },
     methods: {
+        clickItem: function (e) {
+            if (!this.enableClickItem  || !this.data || e.componentType !== 'series') {
+                return;
+            }
+
+            const clickData = this.data[e.dataIndex];
+
+            if (clickData && e.seriesId === 'seriesIncome') {
+                this.$emit('click', {
+                    transactionType: transactionConstants.allTransactionTypes.Income,
+                    monthStartTime: clickData.monthStartTime
+                });
+            } else if (clickData && e.seriesId === 'seriesExpense') {
+                this.$emit('click', {
+                    transactionType: transactionConstants.allTransactionTypes.Expense,
+                    monthStartTime: clickData.monthStartTime
+                });
+            }
+        },
         getDisplayCurrency(value, currencyCode) {
             return this.$locale.getDisplayCurrency(value, currencyCode, {
                 currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,