fix: refactor donutchart

- factor in edge cases
- z-index on dropdown

src/components/Charts/DonutChart.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <svg version="1.1" viewBox="0 0 100 100" @mouseleave="active = null">
+    <svg
+      version="1.1"
+      viewBox="0 0 100 100"
+      @mouseleave="$emit('change', null)"
+    >
       <defs>
         <clipPath id="donut-hole">
           <circle
@@ -13,52 +17,52 @@
         </clipPath>
       </defs>
       <circle
-        v-if="sectors.length === 1 || sectors.length === 0"
+        v-if="thetasAndStarts.length === 1 || thetasAndStarts.length === 0"
         clip-path="url(#donut-hole)"
         :cx="cx"
         :cy="cy"
         :r="radius"
-        @mouseover="active = sectors.length === 1 ? 0 : null"
-        :stroke-width="
-          thickness + (active === 0 || externalActive === 0 ? 4 : 0)
+        @mouseover="
+          $emit(
+            'change',
+            thetasAndStarts.length === 1 ? thetasAndStarts[0][0] : null
+          )
         "
-        :stroke="(sectors[0] && sectors[0].color) || '#f4f4f6'"
-        :class="sectors.length >= 1 ? 'sector' : ''"
+        :stroke-width="
+          thickness +
+          (hasNonZeroValues && active === thetasAndStarts[0][0] ? 4 : 0)
+        "
+        :stroke="
+          hasNonZeroValues ? sectors[thetasAndStarts[0][0]].color : '#f4f4f6'
+        "
+        :class="hasNonZeroValues ? 'sector' : ''"
         :style="{ transformOrigin: `${cx}px ${cy}px` }"
         fill="transparent"
       />
-      <template v-if="sectors.length > 1">
+      <template v-if="thetasAndStarts.length > 1">
         <path
           clip-path="url(#donut-hole)"
-          v-for="([theta, start_], i) in sectorsToStarts()"
+          v-for="[i, theta, start_] in thetasAndStarts"
           :key="i"
           :d="getArcPath(cx, cy, radius, start_, theta)"
           :stroke="sectors[i].color"
-          :stroke-width="
-            thickness + (active === i || externalActive === i ? 4 : 0)
-          "
+          :stroke-width="thickness + (active === i ? 4 : 0)"
           :style="{ transformOrigin: `${cx}px ${cy}px` }"
           class="sector"
           fill="transparent"
-          @mouseover="active = i"
+          @mouseover="$emit('change', i)"
         />
       </template>
     </svg>
     <div class="relative" style="top: -50%">
       <div class="text-base text-center font-semibold grid justify-center">
         <p class="text-xs text-gray-600 w-32">
-          {{
-            active !== null || externalActive !== null
-              ? sectors[active !== null ? active : externalActive].label
-              : totalLabel
-          }}
+          {{ active !== null ? sectors[active].label : totalLabel }}
         </p>
         <p class="w-32">
           {{
             valueFormatter(
-              active !== null || externalActive !== null
-                ? sectors[active !== null ? active : externalActive].value
-                : getTotalValue(),
+              active !== null ? sectors[active].value : totalValue,
               'Currency'
             )
           }}
@@ -77,45 +81,52 @@ export default {
     },
     totalLabel: { default: 'Total', type: String },
     radius: { default: 36, type: Number },
+    startAngle: { default: Math.PI, type: Number },
     thickness: { default: 10, type: Number },
-    externalActive: { default: null, type: Number },
+    active: { default: null, type: Number },
     valueFormatter: { default: (v) => v.toString(), Function },
   },
   data() {
     return {
       cx: 50,
       cy: 50,
-      width: 8,
-      active: null,
-      start: Math.PI,
     };
   },
-  methods: {
-    getTotalValue() {
+  computed: {
+    totalValue() {
       return this.sectors.map(({ value }) => value).reduce((a, b) => a + b, 0);
     },
-    sectorsToRadians() {
-      const totalValue = this.getTotalValue();
-      return this.sectors.map(
-        ({ value }) => (2 * Math.PI * value) / totalValue
-      );
-    },
-    sectorsToStarts() {
-      const theta = this.sectorsToRadians();
-      const starts = [...theta];
+    thetasAndStarts() {
+      const thetas = this.sectors
+        .map(({ value }, i) => ({
+          value: (2 * Math.PI * value) / this.totalValue,
+          filterOut: value !== 0,
+          i,
+        }))
+        .filter(({ filterOut }) => filterOut);
 
-      starts.forEach((e, i) => {
+      const starts = [...thetas.map(({ value }) => value)];
+      starts.forEach(({ value }, i) => {
         starts[i] += starts[i - 1] ?? 0;
       });
 
       starts.unshift(0);
       starts.pop();
 
-      return theta.map((t, i) => [t, starts[i]]);
+      return thetas.map((t, i) => [t.i, t.value, starts[i]]);
     },
+    hasNonZeroValues() {
+      return (
+        this.thetasAndStarts.length > 0 &&
+        this.thetasAndStarts.some((t) => this.sectors[t[0]].value !== 0)
+      );
+    },
+  },
+  methods: {
     getArcPath(...args) {
       let [cx, cy, r, start, theta] = args.map(parseFloat);
-      start += parseFloat(this.start);
+
+      start += parseFloat(this.startAngle);
       const startX = cx + r * Math.cos(start);
       const startY = cy + r * Math.sin(start);
       const endX = cx + r * Math.cos(start + theta);

src/pages/Dashboard/Expenses.vue

@@ -28,10 +28,11 @@
       </div>
       <DonutChart
         class="w-1/2"
-        :external-active="active"
+        :active="active"
         :sectors="sectors"
         :value-formatter="(value) => frappe.format(value, 'Currency')"
         :total-label="_('Total Spending')"
+        @change="(value) => (active = value)"
       />
     </div>
     <div v-if="expenses.length === 0" class="flex-1 w-full h-full flex-center">
@@ -60,13 +61,6 @@ export default {
   data: () => ({
     period: 'This Year',
     active: null,
-    sectors: [
-      {
-        value: 1,
-        label: frappe._('No Entries'),
-        color: theme.backgroundColor.gray['100'],
-      },
-    ],
     expenses: [],
   }),
   mounted() {
@@ -80,7 +74,14 @@ export default {
       return this.expenses.reduce((sum, expense) => sum + expense.total, 0);
     },
     hasData() {
-      return this.totalExpense > 0;
+      return this.expenses.length > 0;
+    },
+    sectors() {
+      return this.expenses.map(({ account, color, total }) => ({
+        color,
+        label: account,
+        value: total,
+      }));
     },
   },
   methods: {
@@ -121,11 +122,6 @@ export default {
       });
 
       this.expenses = topExpenses;
-      this.sectors = topExpenses.map(({ account, color, total }) => ({
-        color,
-        label: account,
-        value: total,
-      }));
     },
   },
 };

src/pages/Dashboard/PeriodSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dropdown ref="dropdown" class="text-sm" :items="periodOptions" right>
+  <Dropdown ref="dropdown" class="text-sm z-10" :items="periodOptions" right>
     <template
       v-slot="{
         toggleDropdown,