From a603c7c5f395788e746e3c4907dc73cd54becb56 Mon Sep 17 00:00:00 2001 From: Robert Goldmann <deadlocker@gmx.de> Date: Sat, 27 Jul 2019 15:03:02 +0200 Subject: [PATCH] Fixed 437 - chart template: incomes/expenditures by categories --- .../budgetmaster/charts/DefaultCharts.java | 4 +-- .../IncomesAndExpendituresByCategoryBar.js | 30 +++++++++++++++---- ...omesAndExpendituresPerMonthByCategories.js | 26 +++++++++++----- 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java index 3ea353f74..5dc6a32f6 100644 --- a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java +++ b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java @@ -31,11 +31,11 @@ public class DefaultCharts private static final Chart CHART_INCOMES_AND_EXPENDITURES_BY_CATEGORY_BAR = new Chart("charts.default.incomesAndExpendituresByCategoryBar", getChartFromFile("charts/IncomesAndExpendituresByCategoryBar.js"), - ChartType.DEFAULT, 12); + ChartType.DEFAULT, 21); private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_MONTH_BY_CATEGORIES = new Chart("charts.default.incomesAndExpendituresPerMonthByCategories", getChartFromFile("charts/IncomesAndExpendituresPerMonthByCategories.js"), - ChartType.DEFAULT, 4); + ChartType.DEFAULT, 8); public static List<Chart> getDefaultCharts() diff --git a/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js b/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js index f1965d1a6..6d7887968 100644 --- a/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js +++ b/src/main/resources/charts/IncomesAndExpendituresByCategoryBar.js @@ -9,6 +9,7 @@ var transactionData = []; // Note: All variables starting with "localized" are only available inside default charts. var categoryNames = []; +var colors = []; var incomes = []; var expenditures = []; @@ -21,6 +22,7 @@ for(var i = 0; i < transactionData.length; i++) if(!categoryNames.includes(categoryName)) { categoryNames.push(categoryName); + colors.push(transaction.category.color); incomes.push(0); expenditures.push(0); } @@ -61,11 +63,20 @@ var plotlyData = []; for(var j = 0; j < categoryNames.length; j++) { + var currentName = categoryNames[j]; + var percentageIncome = (100 / totalIncomes) * incomes[j]; var percentageExpenditure = (100 / totalExpenditures) * expenditures[j]; - var textIncome = prepareHoverText(percentageIncome, incomes[j]); - var textExpenditure = prepareHoverText(percentageExpenditure, expenditures[j]); + var textIncome = prepareHoverText(currentName, percentageIncome, incomes[j]); + var textExpenditure = prepareHoverText(currentName, percentageExpenditure, expenditures[j]); + + // add border if category color is white + var borderWidth = 0; + if(colors[j] === '#FFFFFF') + { + borderWidth = 1; + } plotlyData.push({ x: [percentageExpenditure, percentageIncome], @@ -74,7 +85,14 @@ for(var j = 0; j < categoryNames.length; j++) type: 'bar', hoverinfo: 'text', text: [textExpenditure, textIncome], - name: categoryNames[j] + name: currentName, + marker: { + color: colors[j], // use the category's color + line: { + color: '#212121', + width: borderWidth + } + } }); } @@ -94,7 +112,7 @@ var plotlyLayout = { family: 'sans-serif', size: 14, color: 'black' - } + }, }, barmode: 'stack', hovermode: 'closest' // show hover popup only for hovered item @@ -112,8 +130,8 @@ var plotlyConfig = { Plotly.newPlot('chart-canvas', plotlyData, plotlyLayout, plotlyConfig); -function prepareHoverText(percentage, value) +function prepareHoverText(categoryName, percentage, value) { value = value / 100; - return percentage.toFixed(1) + '% (' + value.toFixed(1) + ' ' + localizedCurrency + ')'; + return categoryName + ' ' + percentage.toFixed(1) + '% (' + value.toFixed(1) + ' ' + localizedCurrency + ')'; } \ No newline at end of file diff --git a/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js b/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js index e83cd0452..060f855ac 100644 --- a/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js +++ b/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js @@ -112,12 +112,20 @@ for(var i = 0; i < dates.length; i++) for(var j = 0; j < values[i][NAME].length; j++) { var currentValues = values[i]; + var currentName = currentValues[NAME][j]; var percentageIncome = (100 / totalIncomeSums[i]) * currentValues[INCOME][j]; - var textIncome = prepareHoverText(percentageIncome, currentValues[INCOME][j]); + var textIncome = prepareHoverText(currentName, percentageIncome, currentValues[INCOME][j]); var percentageExpenditure = (100 / totalExpenditureSums[i]) * currentValues[EXPENDITURE][j]; - var textExpenditure = prepareHoverText(percentageExpenditure, currentValues[EXPENDITURE][j]); + var textExpenditure = prepareHoverText(currentName, percentageExpenditure, currentValues[EXPENDITURE][j]); + + // add border if category color is white + var borderWidth = 0; + if(currentValues[COLOR][j] === '#FFFFFF') + { + borderWidth = 1; + } plotlyData.push({ x: [localizedData['label2'], localizedData['label1']], @@ -125,13 +133,17 @@ for(var i = 0; i < dates.length; i++) type: 'bar', hoverinfo: 'text', text: [textIncome, textExpenditure], - name: currentValues[NAME][j], + name: currentName, xaxis: 'x' + (i + 1), // for grouping incomes and expenditure bar by month barmode: 'stack', showlegend: i === 0, - legendgroup: currentValues[NAME][j], + legendgroup: currentName, marker: { - color: currentValues[COLOR][j] // use the category's color + color: currentValues[COLOR][j], // use the category's color + line: { + color: '#212121', + width: borderWidth + } } }); } @@ -167,8 +179,8 @@ var plotlyConfig = { Plotly.newPlot('chart-canvas', plotlyData, plotlyLayout, plotlyConfig); -function prepareHoverText(percentage, value) +function prepareHoverText(categoryName, percentage, value) { value = value / 100; - return percentage.toFixed(1) + '% (' + value.toFixed(1) + ' ' + localizedCurrency + ')'; + return categoryName + ' ' + percentage.toFixed(1) + '% (' + value.toFixed(1) + ' ' + localizedCurrency + ')'; } \ No newline at end of file -- GitLab