From a3cb6469edfb85bfc6ec05a29c98d2f125fc9b36 Mon Sep 17 00:00:00 2001 From: Simon Reinisch Date: Mon, 22 Apr 2024 17:01:56 +0200 Subject: [PATCH] fix: support empty values in AllTime overview fix all-time chart if income is below expenses --- src/app/pages/dashboard/all-time/AllTime.vue | 37 +++++++++++-------- .../pages/dashboard/all-time/AllTimeChart.vue | 12 +++--- .../stacked-line-chart/StackedLineChart.vue | 8 +--- .../tools/delete-year/DeleteYearButton.vue | 2 +- 4 files changed, 31 insertions(+), 28 deletions(-) diff --git a/src/app/pages/dashboard/all-time/AllTime.vue b/src/app/pages/dashboard/all-time/AllTime.vue index f5cdb9e..825c38b 100644 --- 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 index 72db499..76c1143 100644 --- 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 index 528fcb5..6ea952d 100644 --- 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 index 2244016..2971472 100644 --- 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(); } };