From a708a14881373210e3d18c681d0ad3763d81c6d3 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 18 Jan 2022 12:33:00 +0530
Subject: [PATCH] fix: period selection error, sync issue, no transaction
 message

---
 src/components/Charts/DonutChart.vue | 10 ++++++++--
 src/pages/Dashboard/Expenses.vue     | 12 +++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Charts/DonutChart.vue b/src/components/Charts/DonutChart.vue
index 76a570df..9220492d 100644
--- a/src/components/Charts/DonutChart.vue
+++ b/src/components/Charts/DonutChart.vue
@@ -57,12 +57,18 @@
     <div class="relative" style="top: -50%">
       <div class="text-base text-center font-semibold grid justify-center">
         <p class="text-xs text-gray-600 w-32">
-          {{ active !== null ? sectors[active].label : totalLabel }}
+          {{
+            active !== null && sectors.length !== 0
+              ? sectors[active].label
+              : totalLabel
+          }}
         </p>
         <p class="w-32">
           {{
             valueFormatter(
-              active !== null ? sectors[active].value : totalValue,
+              active !== null && sectors.length !== 0
+                ? sectors[active].value
+                : totalValue,
               'Currency'
             )
           }}
diff --git a/src/pages/Dashboard/Expenses.vue b/src/pages/Dashboard/Expenses.vue
index 49ba8495..159e1634 100644
--- a/src/pages/Dashboard/Expenses.vue
+++ b/src/pages/Dashboard/Expenses.vue
@@ -37,7 +37,7 @@
     </div>
     <div v-if="expenses.length === 0" class="flex-1 w-full h-full flex-center">
       <span class="text-base text-gray-600">
-        {{ _('No transactions yet') }}
+        {{ _('No expenses in this period') }}
       </span>
     </div>
   </div>
@@ -63,11 +63,13 @@ export default {
     active: null,
     expenses: [],
   }),
-  mounted() {
-    this.setData();
-  },
   watch: {
-    period: 'render',
+    period(new_, old) {
+      this.setData();
+    },
+  },
+  activated() {
+    this.setData();
   },
   computed: {
     totalExpense() {