incr: update dashboard

- change aspect ratio to 3:2

main.ts

@@ -26,7 +26,7 @@ export class Main {
   mainWindow: BrowserWindow | null = null;
 
   WIDTH = 1200;
-  HEIGHT = process.platform === 'win32' ? 926 : 900;
+  HEIGHT = process.platform === 'win32' ? 826 : 800;
 
   constructor() {
     this.icon = this.isDevelopment

src/components/Charts/DonutChart.vue

@@ -53,16 +53,12 @@
           @mouseover="$emit('change', i)"
         />
       </template>
-    </svg>
-    <div
-      class="text-center w-28 relative"
-      :style="{
-        top: `calc(-50% + ${textOffsetY}px)`,
-        left: `calc(50% + ${textOffsetX}px)`,
-        transform: 'translateX(-50%)',
-      }"
-    >
-      <p class="text-base font-bold whitespace-nowrap">
+      <text
+        :x="cx"
+        :y="cy"
+        text-anchor="middle"
+        style="font-size: 6px; font-weight: bold; fill: #415668"
+      >
         {{
           valueFormatter(
             active !== null && sectors.length !== 0
@@ -71,23 +67,20 @@
             'Currency'
           )
         }}
-      </p>
-      <p
-        class="
-          text-xs text-gray-600
-          font-semibold
-          whitespace-nowrap
-          overflow-x-auto
-          no-scrollbar
-        "
+      </text>
+      <text
+        :x="cx"
+        :y="cy + 8"
+        text-anchor="middle"
+        style="font-size: 5px; fill: #a1abb4"
       >
         {{
           active !== null && sectors.length !== 0
             ? sectors[active].label
             : totalLabel
         }}
-      </p>
-    </div>
+      </text>
+    </svg>
   </div>
 </template>
 

src/components/Paginator.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="grid grid-cols-3 text-gray-800 text-sm select-none items-center"
-    style="height: 52px"
+    style="height: 50px"
   >
     <!-- Length Display -->
     <div class="justify-self-start">

src/pages/Dashboard/Cashflow.vue

@@ -2,17 +2,17 @@
   <div>
     <!-- Title and Period Selector -->
     <div class="flex items-center justify-between">
-      <div class="font-medium">{{ t`Cashflow` }}</div>
+      <div class="font-medium text-base">{{ t`Cashflow` }}</div>
 
       <!-- Chart Legend -->
-      <div class="flex text-base" v-if="hasData">
-        <div class="flex items-center">
-          <span class="w-3 h-3 rounded-sm inline-block bg-blue-500"></span>
-          <span class="ml-2 text-gray-900">{{ t`Inflow` }}</span>
+      <div class="flex text-base gap-8" v-if="hasData">
+        <div class="flex items-center gap-2">
+          <span class="w-3 h-3 rounded-sm inline-block bg-blue-500" />
+          <span class="text-gray-900">{{ t`Inflow` }}</span>
         </div>
-        <div class="flex items-center ml-6">
-          <span class="w-3 h-3 rounded-sm inline-block bg-gray-500"></span>
-          <span class="ml-2 text-gray-900">{{ t`Outflow` }}</span>
+        <div class="flex items-center gap-2">
+          <span class="w-3 h-3 rounded-sm inline-block bg-gray-500" />
+          <span class="text-gray-900">{{ t`Outflow` }}</span>
         </div>
       </div>
       <div v-else class="w-16 h-5 bg-gray-200 rounded" />
@@ -28,7 +28,9 @@
 
     <!-- Line Chart -->
     <LineChart
+    class="mt-4"
       v-if="chartData.points.length"
+      :aspect-ratio="4.15"
       :colors="chartData.colors"
       :points="chartData.points"
       :x-labels="chartData.xLabels"

src/pages/Dashboard/Dashboard.vue

@@ -2,15 +2,16 @@
   <div class="flex flex-col">
     <PageHeader :title="t`Dashboard`" />
 
-    <div class="mx-4 overflow-y-auto no-scrollbar flex flex-col gap-8">
-      <Cashflow class="" />
+    <div class="overflow-y-hidden no-scrollbar flex flex-col">
+      <Cashflow class="p-4" />
       <hr />
       <UnpaidInvoices />
       <hr />
-      <div class="flex gap-8">
-        <ProfitAndLoss class="w-full" />
-        <Expenses class="w-full" />
+      <div class="flex">
+        <ProfitAndLoss class="w-full p-4 border-r" />
+        <Expenses class="w-full p-4" />
       </div>
+      <hr />
     </div>
   </div>
 </template>

src/pages/Dashboard/Expenses.vue

@@ -6,9 +6,10 @@
         <PeriodSelector :value="period" @change="(value) => (period = value)" />
       </template>
     </SectionHeader>
+
     <div class="flex relative" v-show="hasData">
       <!-- Chart Legend -->
-      <div class="w-1/2 flex flex-col gap-5 mt-8">
+      <div class="w-1/2 flex flex-col gap-4 justify-center">
         <!-- Ledgend Item -->
         <div
           class="flex items-center text-sm"
@@ -19,7 +20,7 @@
         >
           <div class="w-3 h-3 rounded-sm flex-shrink-0" :class="d.class" />
           <p class="ml-2 overflow-x-auto whitespace-nowrap no-scrollbar w-28">
-            {{ d.account }} 
+            {{ d.account }}
           </p>
           <p class="whitespace-nowrap flex-shrink-0 ml-auto">
             {{ fyo.format(d?.total ?? 0, 'Currency') }}
@@ -27,7 +28,7 @@
         </div>
       </div>
       <DonutChart
-        class="w-1/2"
+        class="w-1/2 my-auto"
         :active="active"
         :sectors="sectors"
         :offset-x="3"
@@ -52,6 +53,7 @@
 </template>
 
 <script>
+import { truncate } from 'lodash';
 import { fyo } from 'src/initFyo';
 import theme from 'src/theme';
 import { getDatesAndPeriodList } from 'src/utils/misc';
@@ -72,7 +74,7 @@ export default {
     expenses: [],
   }),
   watch: {
-    period(new_, old) {
+    period() {
       this.setData();
     },
   },
@@ -89,7 +91,7 @@ export default {
     sectors() {
       return this.expenses.map(({ account, color, total }) => ({
         color,
-        label: account,
+        label: truncate(account, { length: 21 }),
         value: total,
       }));
     },

src/pages/Dashboard/ProfitAndLoss.vue

@@ -11,7 +11,9 @@
       </template>
     </SectionHeader>
     <BarChart
+      class="mt-4"
       v-if="hasData"
+      :aspect-ratio="2.05"
       :colors="chartData.colors"
       :points="chartData.points"
       :x-labels="chartData.xLabels"

src/pages/Dashboard/SectionHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-baseline justify-between">
-    <span class="font-medium"><slot name="title"></slot></span>
+    <span class="font-medium text-base"><slot name="title"></slot></span>
     <slot name="action"></slot>
   </div>
 </template>

src/pages/Dashboard/UnpaidInvoices.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="flex justify-between gap-8">
+  <div class="flex">
     <div
-      class="flex-col justify-between flex-1"
       v-for="(invoice, i) in invoices"
+      class="flex-col justify-between w-full p-4"
+      :class="i === 0 ? 'border-r' : ''"
       :key="invoice.title"
     >
       <!-- Title and Period Selector -->
@@ -26,9 +27,9 @@
       </SectionHeader>
 
       <!-- Widget Body -->
-      <div>
+      <div class="mt-4">
         <!-- Paid & Unpaid Amounts -->
-        <div class="mt-6 flex justify-between">
+        <div class="flex justify-between">
           <!-- Paid -->
           <div
             class="text-sm bold"

src/pages/PrintView/PrintView.vue

@@ -16,15 +16,14 @@
       <!-- Printview Preview -->
       <div
         v-if="doc && printSettings"
-        class="flex justify-center flex-1 -mt-36 overflow-auto relative"
+        class="flex justify-center flex-1 overflow-auto relative"
       >
         <div
-          class="h-full shadow-lg mb-12 absolute"
+          class="h-full shadow my-4 absolute"
           style="
             width: 21cm;
-            min-height: 29.7cm;
-            height: max-content;
-            transform: scale(0.7);
+            height: 29.7cm;
+            transform: scale(0.7) translateY(-240px);
           "
           ref="printContainer"
         >
@@ -39,13 +38,19 @@
 
     <!-- Printview Customizer -->
     <div class="border-l w-80" v-if="showCustomiser">
-      <div class="px-4 flex items-center justify-between h-row-largest border-b">
+      <div
+        class="px-4 flex items-center justify-between h-row-largest border-b"
+      >
         <h2 class="font-semibold">{{ t`Customise` }}</h2>
         <Button :icon="true" @click="showCustomiser = false">
           <feather-icon name="x" class="w-4 h-4" />
         </Button>
       </div>
-      <TwoColumnForm :doc="printSettings" :autosave="true" class="border-none"/>
+      <TwoColumnForm
+        :doc="printSettings"
+        :autosave="true"
+        class="border-none"
+      />
     </div>
   </div>
 </template>