From 4cbf956b910bb2a3983848f19cb3f87c6d40f777 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 31 Jan 2021 21:53:29 +0800
Subject: [PATCH] modify pie chart text when no data

---
 src/locales/en.js                           |  1 +
 src/locales/zh_Hans.js                      |  1 +
 src/views/mobile/statistics/Transaction.vue | 27 +++++++++++++++------
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/locales/en.js b/src/locales/en.js
index 89d8787f..5a6db655 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -514,6 +514,7 @@ export default {
     'Settings': 'Settings',
     'Back': 'Back',
     'Load More': 'Load More',
+    'No data': 'No data',
     'Change Language': 'Change Language',
     'Date is too early': 'Date is too early',
     'Unlock': 'Unlock',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index aaa2ae07..1f4cf781 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -514,6 +514,7 @@ export default {
     'Settings': '设置',
     'Back': '返回',
     'Load More': '加载更多',
+    'No data': '没有数据',
     'Change Language': '修改语言',
     'Date is too early': '日期过早',
     'Unlock': '解锁',
diff --git a/src/views/mobile/statistics/Transaction.vue b/src/views/mobile/statistics/Transaction.vue
index 20e1ce4f..6c63f80a 100644
--- a/src/views/mobile/statistics/Transaction.vue
+++ b/src/views/mobile/statistics/Transaction.vue
@@ -26,6 +26,7 @@
                 <pie-chart
                     :items="[{value: 60, color: '7c7c7f'}, {value: 20, color: 'a5a5aa'}, {value: 20, color: 'c5c5c9'}]"
                     :show-center-text="true"
+                    class="statistics-pie-chart"
                     value-field="value"
                     color-field="color"
                     center-text-background="#cccccc"
@@ -35,16 +36,20 @@
                     :items="statisticsData.items"
                     :min-valid-percent="0.0001"
                     :show-center-text="true"
+                    class="statistics-pie-chart"
                     name-field="name"
                     value-field="totalAmount"
                     color-field="color"
                     v-else-if="!loading"
                 >
-                    <text class="statistics-pie-chart-total-amount-title" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory">{{ $t('Total Expense') }}</text>
-                    <text class="statistics-pie-chart-total-amount-title" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory">{{ $t('Total Income') }}</text>
-                    <text class="statistics-pie-chart-total-amount-value">
+                    <text class="statistics-pie-chart-total-amount-title" v-if="statisticsData.items && statisticsData.items.length && (query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory)">{{ $t('Total Expense') }}</text>
+                    <text class="statistics-pie-chart-total-amount-title" v-if="statisticsData.items && statisticsData.items.length && (query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory)">{{ $t('Total Income') }}</text>
+                    <text class="statistics-pie-chart-total-amount-value" v-if="statisticsData.items && statisticsData.items.length">
                         {{ statisticsData.totalAmount | currency(defaultCurrency) }}
                     </text>
+                    <text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!statisticsData.items || !statisticsData.items.length">
+                        {{ $t('No data') }}
+                    </text>
                 </pie-chart>
             </f7-card-content>
         </f7-card>
@@ -609,9 +614,12 @@ export default {
 </script>
 
 <style>
-.statistics-pie-chart-total-amount-title {
-    fill: #f8f8f8;
+.statistics-pie-chart .pie-chart-text-group {
+    fill: #fff;
     text-anchor: middle;
+}
+
+.statistics-pie-chart-total-amount-title {
     -moz-transform: translateY(0.35em);
     -ms-transform: translateY(0.35em);
     -webkit-transform: translateY(0.35em);
@@ -619,14 +627,19 @@ export default {
 }
 
 .statistics-pie-chart-total-amount-value {
-    fill: #fff;
-    text-anchor: middle;
     -moz-transform: translateY(2em);
     -ms-transform: translateY(2em);
     -webkit-transform: translateY(2em);
     transform: translateY(2em);
 }
 
+.statistics-pie-chart-total-no-data {
+    -moz-transform: translateY(1em);
+    -ms-transform: translateY(1em);
+    -webkit-transform: translateY(1em);
+    transform: translateY(1em);
+}
+
 .statistics-list-item-overview {
     padding-top: 12px;
     margin-bottom: 6px;