diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java index 684c1862f6ee5924d9141178cd8b61dccdd410ff..3ea353f74db7076421e9a98afb6e33dbbcc9dbfd 100644 --- a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java +++ b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java @@ -35,7 +35,7 @@ public class DefaultCharts private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_BY_CATEGORIES = new Chart("charts.default.incomesAndExpendituresPerMonthByCategories", getChartFromFile("charts/IncomesAndExpendituresPerMonthByCategories.js"), - ChartType.DEFAULT, 3); + ChartType.DEFAULT, 4); public static List<Chart> getDefaultCharts() diff --git a/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js b/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js index 0e0066378aa42e70616303f264518ea1223de74c..e83cd04528953554c38ad052cf559a803796c1c8 100644 --- a/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js +++ b/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js @@ -12,12 +12,14 @@ transactionData = transactionData.reverse(); moment.locale('de'); - const NAME = 0; const COLOR = 1; const INCOME = 2; const EXPENDITURE = 3; +var categoryNames = Array.from(new Set(transactionData.map(t => t.category.name))); +var categoryColors = Array.from(new Set(transactionData.map(t => t.category.color))); + var dates = []; var values = []; @@ -25,12 +27,16 @@ for(var i = 0; i < transactionData.length; i++) { var transaction = transactionData[i]; + var date = moment(transaction.date).startOf('month').format('MMM YY'); var date = moment(transaction.date).startOf('month').format('MMM YY'); if(!dates.includes(date)) { dates.push(date); values.push([ - [], [], [], [] // NAME, COLOR, INCOME, EXPENDITURE + categoryNames, // NAME + categoryColors, // COLOR + new Array(categoryNames.length).fill(0), // INCOME + new Array(categoryNames.length).fill(0) // EXPENDITURE ]); } @@ -122,6 +128,8 @@ for(var i = 0; i < dates.length; i++) name: currentValues[NAME][j], xaxis: 'x' + (i + 1), // for grouping incomes and expenditure bar by month barmode: 'stack', + showlegend: i === 0, + legendgroup: currentValues[NAME][j], marker: { color: currentValues[COLOR][j] // use the category's color }