From 9fb714118dd5b7a04f8cfa64354714ff40a59a52 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 2 Feb 2022 16:47:02 +0530
Subject: [PATCH] fix(ux): donut chart hover behaviour

---
 src/components/Charts/DonutChart.vue | 41 ++++++++++++++--------------
 src/pages/Dashboard/Expenses.vue     |  2 +-
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/Charts/DonutChart.vue b/src/components/Charts/DonutChart.vue
index 0b9be6af..6ffdeb2f 100644
--- a/src/components/Charts/DonutChart.vue
+++ b/src/components/Charts/DonutChart.vue
@@ -55,31 +55,30 @@
       </template>
     </svg>
     <div
-      class="absolute"
+      class="text-center w-32 relative"
       :style="{
-        top: `50%`,
-        transform: `translate(calc(50% - ${textOffsetX}px), calc(${textOffsetY}px - 50%))`,
+        top: `calc(-50% + ${textOffsetY}px)`,
+        left: `calc(50% + ${textOffsetX}px)`,
+        transform: 'translateX(-50%)',
       }"
     >
-      <div class="text-center font-semibold grid justify-center">
-        <p class="w-32 text-xl font-bold">
-          {{
-            valueFormatter(
-              active !== null && sectors.length !== 0
-                ? sectors[active].value
-                : totalValue,
-              'Currency'
-            )
-          }}
-        </p>
-        <p class="text-xs text-gray-600 w-32">
-          {{
+      <p class="text-xl font-bold">
+        {{
+          valueFormatter(
             active !== null && sectors.length !== 0
-              ? sectors[active].label
-              : totalLabel
-          }}
-        </p>
-      </div>
+              ? sectors[active].value
+              : totalValue,
+            'Currency'
+          )
+        }}
+      </p>
+      <p class="text-xs text-gray-600 font-semibold">
+        {{
+          active !== null && sectors.length !== 0
+            ? sectors[active].label
+            : totalLabel
+        }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/src/pages/Dashboard/Expenses.vue b/src/pages/Dashboard/Expenses.vue
index 1a8e2b46..09c44b38 100644
--- a/src/pages/Dashboard/Expenses.vue
+++ b/src/pages/Dashboard/Expenses.vue
@@ -32,7 +32,7 @@
         :sectors="sectors"
         :offset-x="3"
         :thickness="11.5"
-        :text-offset-x="14"
+        :text-offset-x="6.5"
         :value-formatter="(value) => frappe.format(value, 'Currency')"
         :total-label="t('Total Spending')"
         @change="(value) => (active = value)"