fix(ui): donut chart alignment and size

src/components/Charts/DonutChart.vue

@@ -54,7 +54,13 @@
         />
       </template>
     </svg>
-    <div class="relative" style="top: -50%">
+    <div
+      class="relative"
+      :style="{
+        top: `-50%`,
+        transform: `translate(${textOffsetX}px, ${textOffsetY}px)`,
+      }"
+    >
       <div class="text-base text-center font-semibold grid justify-center">
         <p class="text-xs text-gray-600 w-32">
           {{
@@ -91,14 +97,18 @@ export default {
     thickness: { default: 10, type: Number },
     active: { default: null, type: Number },
     valueFormatter: { default: (v) => v.toString(), Function },
-  },
+    offsetX: { default: 0, type: Number },
-  data() {
+    offsetY: { default: 0, type: Number },
-    return {
+    textOffsetX: { default: 0, type: Number },
-      cx: 50,
+    textOffsetY: { default: 0, type: Number },
-      cy: 50,
-    };
   },
   computed: {
+    cx() {
+      return 50 + this.offsetX;
+    },
+    cy() {
+      return 50 + this.offsetY;
+    },
     totalValue() {
       return this.sectors.map(({ value }) => value).reduce((a, b) => a + b, 0);
     },

src/pages/Dashboard/Expenses.vue

@@ -30,6 +30,9 @@
         class="w-1/2"
         :active="active"
         :sectors="sectors"
+        :offset-x="3"
+        :thickness="11.5"
+        :text-offset-x="6.5"
         :value-formatter="(value) => frappe.format(value, 'Currency')"
         :total-label="t('Total Spending')"
         @change="(value) => (active = value)"