Fixed 437 - chart template: incomes/expenditures by categories

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()

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

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