fix: support empty values in AllTime overview

fix all-time chart if income is below expenses
simonwep · Apr 22, 2024 · a3cb646 · a3cb646
1 parent 7dcca7a
commit a3cb646
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 28 deletions.
diff --git a/src/app/pages/dashboard/all-time/AllTime.vue b/src/app/pages/dashboard/all-time/AllTime.vue
@@ -48,41 +48,48 @@ const cards = computed((): Card[] => {
   const lastYear = state.years.at(-2);
   const currentYear = state.years.at(-1);
 
-  if (!lastYear || !currentYear) {
-    return [];
-  }
-
-  const lastYearIncome = sum(totals(lastYear.income));
-  const lastYearExpenses = sum(totals(lastYear.expenses));
-  const currentYearIncome = sum(totals(currentYear.income));
-  const currentYearExpenses = sum(totals(currentYear.expenses));
+  const lastYearIncome = lastYear?.income ? sum(totals(lastYear.income)) : 0;
+  const lastYearExpenses = lastYear?.expenses ? sum(totals(lastYear.expenses)) : 0;
+  const currentYearIncome = currentYear?.income ? sum(totals(currentYear.income)) : 0;
+  const currentYearExpenses = currentYear?.expenses ? sum(totals(currentYear.expenses)) : 0;
   const allTimeIncome = sum(totals(state.years.flatMap((v) => v.income)));
   const allTimeExpenses = sum(totals(state.years.flatMap((v) => v.expenses)));
 
   return [
     {
       title: t('page.dashboard.yoyIncomeGrowth'),
-      text: percent.format((currentYearIncome - lastYearIncome) / lastYearIncome),
-      icon: currentYearIncome > lastYearIncome ? RiArrowUpDoubleLine : RiArrowDownDoubleLine,
+      text: lastYearIncome ? percent.format((currentYearIncome - lastYearIncome) / lastYearIncome) : '—',
+      icon: lastYearIncome
+        ? currentYearIncome > lastYearIncome
+          ? RiArrowUpDoubleLine
+          : RiArrowDownDoubleLine
+        : undefined,
       iconClass: currentYearIncome > lastYearIncome ? styles.iconSuccess : styles.iconDanger
     },
     {
       title: t('page.dashboard.yoyExpenseGrowth'),
-      text: percent.format((lastYearExpenses - currentYearExpenses) / currentYearExpenses),
-      icon: lastYearExpenses > currentYearExpenses ? RiArrowUpDoubleLine : RiArrowDownDoubleLine,
+      text: currentYearExpenses ? percent.format((lastYearExpenses - currentYearExpenses) / currentYearExpenses) : '—',
+      icon: currentYearExpenses
+        ? lastYearExpenses > currentYearExpenses
+          ? RiArrowUpDoubleLine
+          : RiArrowDownDoubleLine
+        : undefined,
       iconClass: lastYearExpenses > currentYearExpenses ? styles.iconDanger : styles.iconSuccess
     },
     {
       title: t('page.dashboard.allTimeIncome'),
-      value: allTimeIncome
+      value: allTimeIncome,
+      text: allTimeIncome ? undefined : '—'
     },
     {
       title: t('page.dashboard.allTimeExpenses'),
-      value: allTimeExpenses
+      value: allTimeExpenses,
+      text: allTimeExpenses ? undefined : '—'
     },
     {
       title: t('page.dashboard.allTimeSavings'),
-      value: allTimeIncome - allTimeExpenses
+      value: allTimeIncome - allTimeExpenses,
+      text: allTimeIncome && allTimeExpenses ? undefined : '—'
     }
   ];
 });

diff --git a/src/app/pages/dashboard/all-time/AllTimeChart.vue b/src/app/pages/dashboard/all-time/AllTimeChart.vue
@@ -29,17 +29,17 @@ const data = computed((): StackedLineChartConfig => {
       return `${year}-${month.toString().padStart(2, '0')}`;
     }),
     series: [
-      {
-        name: t('page.dashboard.expenses'),
-        trendName: t('page.dashboard.expensesTrend'),
-        data: state.years.flatMap((v) => totals(v.expenses)),
-        color: 'var(--c-danger-light-dimmed)'
-      },
       {
         name: t('page.dashboard.income'),
         trendName: t('page.dashboard.incomeTrend'),
         data: state.years.flatMap((v) => totals(v.income)),
         color: 'var(--c-success-light-dimmed)'
+      },
+      {
+        name: t('page.dashboard.expenses'),
+        trendName: t('page.dashboard.expensesTrend'),
+        data: state.years.flatMap((v) => totals(v.expenses)),
+        color: 'var(--c-danger-light-dimmed)'
       }
     ]
   };

diff --git a/src/app/pages/dashboard/all-time/stacked-line-chart/StackedLineChart.vue b/src/app/pages/dashboard/all-time/stacked-line-chart/StackedLineChart.vue
@@ -93,17 +93,13 @@ const options = computed(
       },
       splitLine: { lineStyle: { color: 'var(--chart-line-color)' } }
     },
-    series: props.data.series.flatMap((s, seriesIndex, series) => {
+    series: props.data.series.flatMap((s) => {
       const areaGraph: EChartsOption['series'] = {
         name: s.name,
         type: 'line',
-        data: s.data.map(
-          (d, index) =>
-            d - (seriesIndex ? series.slice(0, seriesIndex).reduce((acc, curr) => acc + curr.data[index], 0) : 0)
-        ),
+        data: s.data,
         color: s.color,
         silent: true,
-        stack: 'Total',
         areaStyle: {
           color: s.color,
           opacity: 0.15

diff --git a/src/app/pages/navigation/tools/delete-year/DeleteYearButton.vue b/src/app/pages/navigation/tools/delete-year/DeleteYearButton.vue
@@ -17,7 +17,7 @@ const { state, shiftYears } = useDataStore();
 const { t } = useI18n();
 
 const deleteCurrentYear = () => {
-  if (window.confirm(t('navigation.tools.deleteYear.confirm'))) {
+  if (window.confirm(t('navigation.tools.deleteYear.confirm', { year: state.activeYear }))) {
     shiftYears();
   }
 };