Merge pull request #271 from 18alantom/minor-fixes-dashboard

fix(ui): center the donut chart text

src/pages/Dashboard/Cashflow.vue

@@ -13,7 +13,7 @@
             <span class="ml-2">{{ _('Outflow') }}</span>
           </div>
         </div>
-        <PeriodSelector :value="period" @change="value => (period = value)" />
+        <PeriodSelector :value="period" @change="(value) => (period = value)" />
       </div>
       <div class="chart-wrapper" ref="cashflow"></div>
     </template>
@@ -97,11 +97,11 @@ import { getDatesAndPeriodicity } from './getDatesAndPeriodicity';
 export default {
   name: 'Cashflow',
   components: {
-    PeriodSelector
+    PeriodSelector,
   },
   data: () => ({ period: 'This Year', hasData: false }),
   watch: {
-    period: 'render'
+    period: 'render',
   },
   activated() {
     this.render();
@@ -115,7 +115,7 @@ export default {
       let { data, periodList } = await new Cashflow().run({
         fromDate,
         toDate,
-        periodicity
+        periodicity,
       });
 
       let totalInflow = data.reduce((sum, d) => d.inflow + sum, 0);
@@ -134,33 +134,33 @@ export default {
         colors: ['#2490EF', '#B7BFC6'],
         axisOptions: {
           xAxisMode: 'tick',
-          shortenYAxisNumbers: true
+          shortenYAxisNumbers: true,
         },
         lineOptions: {
           regionFill: 1,
           hideDots: 1,
-          heatLine: 1
+          heatLine: 1,
         },
         tooltipOptions: {
-          formatTooltipY: value => frappe.format(value, 'Currency')
+          formatTooltipY: (value) => frappe.format(value, 'Currency'),
         },
         data: {
-          labels: periodList,
+          labels: periodList.map((p) => p.split(' ')[0]),
           datasets: [
             {
               name: 'Inflow',
               chartType: 'line',
-              values: data.map(period => period.inflow)
+              values: data.map((period) => period.inflow),
             },
             {
               name: 'Outflow',
               chartType: 'line',
-              values: data.map(period => period.outflow)
-            }
-          ]
-        }
+              values: data.map((period) => period.outflow),
+            },
+          ],
+        },
       });
-    }
-  }
+    },
+  },
 };
 </script>

src/pages/Dashboard/Dashboard.vue

@@ -12,7 +12,7 @@
       <div class="my-4 mt-0 border-t" />
       <UnpaidInvoices />
       <div class="my-4 border-t" />
-      <div class="flex mx-auto">
+      <div class="flex justify-between mx-auto">
         <div class="w-1/2 mx-4">
           <ProfitAndLoss />
         </div>

src/pages/Dashboard/Expenses.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="flex flex-col h-full">
     <SectionHeader>
-      <template slot="title">{{
-        _('Top Expenses')
-      }}</template>
+      <template slot="title">{{ _('Top Expenses') }}</template>
       <PeriodSelector
         slot="action"
         :value="period"
-        @change="value => (period = value)"
+        @change="(value) => (period = value)"
       />
     </SectionHeader>
     <div class="flex relative" v-show="hasData">
@@ -28,7 +26,7 @@
         <div class="chart-wrapper" ref="top-expenses"></div>
         <div
           class="absolute text-base text-center font-semibold"
-          style="right: 6rem; top: 32%;"
+          style="top: 4rem; left: 75%; transform: translateX(-50%)"
         >
           <div>
             {{ frappe.format(totalExpense, 'Currency') }}
@@ -59,17 +57,17 @@ export default {
   name: 'Expenses',
   components: {
     PeriodSelector,
-    SectionHeader
+    SectionHeader,
   },
   data: () => ({
     period: 'This Year',
-    expenses: [{ account: 'Test', total: 0 }]
+    expenses: [{ account: 'Test', total: 0 }],
   }),
   activated() {
     this.render();
   },
   watch: {
-    period: 'render'
+    period: 'render',
   },
   computed: {
     totalExpense() {
@@ -77,7 +75,7 @@ export default {
     },
     hasData() {
       return this.totalExpense > 0;
-    }
+    },
   },
   methods: {
     async render() {
@@ -88,7 +86,7 @@ export default {
         .where('rootType', 'Expense');
       let topExpenses = await frappe.db.knex
         .select({
-          total: frappe.db.knex.raw('sum(??) - sum(??)', ['debit', 'credit'])
+          total: frappe.db.knex.raw('sum(??) - sum(??)', ['debit', 'credit']),
         })
         .select('account')
         .from('AccountingLedgerEntry')
@@ -103,7 +101,7 @@ export default {
         { class: 'bg-gray-600', hex: theme.backgroundColor.gray['600'] },
         { class: 'bg-gray-400', hex: theme.backgroundColor.gray['400'] },
         { class: 'bg-gray-200', hex: theme.backgroundColor.gray['200'] },
-        { class: 'bg-gray-100', hex: theme.backgroundColor.gray['100'] }
+        { class: 'bg-gray-100', hex: theme.backgroundColor.gray['100'] },
       ];
       topExpenses = topExpenses.map((d, i) => {
         d.class = shades[i].class;
@@ -117,17 +115,23 @@ export default {
         type: 'donut',
         hoverRadio: 0.01,
         strokeWidth: 18,
-        colors: topExpenses.map(d => d.color),
+        colors: topExpenses.map((d) => d.color),
         data: {
-          labels: topExpenses.map(d => d.account),
+          labels: topExpenses.map((d) => d.account),
           datasets: [
             {
-              values: topExpenses.map(d => d.total)
-            }
-          ]
-        }
+              values: topExpenses.map((d) => d.total),
+            },
+          ],
+        },
       });
-    }
-  }
+    },
+  },
 };
 </script>
+
+<style>
+.donut-chart {
+  transform: translate(40px, 20px);
+}
+</style>

src/pages/Dashboard/UnpaidInvoices.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-between mx-auto">
     <div
-      class="w-5/12 mx-4 flex flex-col justify-between"
+      class="w-1/2 mx-4 flex flex-col justify-between"
       v-for="invoice in invoices"
       :key="invoice.title"
     >