Fixed #737 - ssort categories alphabetically in bar charts

deadlocker8 · Mar 5, 2023 · 8cb13d8 · 8cb13d8
1 parent 3b1367b
commit 8cb13d8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java b/BudgetMasterServer/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
@@ -40,7 +40,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, 25, ChartDisplayType.BAR, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthByCategories.png");
+			ChartType.DEFAULT, 27, ChartDisplayType.BAR, ChartGroupType.MONTH, "incomesAndExpendituresPerMonthByCategories.png");
 
 	private static final Chart CHART_REST_PER_MONTH = new Chart("charts.default.restPerMonth",
 			getChartFromFile("charts/RestPerMonth.js"),
@@ -52,7 +52,7 @@ public class DefaultCharts
 
 	private static final Chart CHART_INCOMES_AND_EXPENDITURES_PER_YEAR_BY_CATEGORIES = new Chart("charts.default.incomesAndExpendituresPerYearByCategories",
 			getChartFromFile("charts/IncomesAndExpendituresPerYearByCategories.js"),
-			ChartType.DEFAULT, 5, ChartDisplayType.BAR, ChartGroupType.YEAR, "incomesAndExpendituresPerYearByCategories.png");
+			ChartType.DEFAULT, 7, ChartDisplayType.BAR, ChartGroupType.YEAR, "incomesAndExpendituresPerYearByCategories.png");
 
 	private static final Chart CHART_AVERAGE_TRANSACTION_AMOUNT_PER_CATEGORY = new Chart("charts.default.averageTransactionAmountPerCategory",
 			getChartFromFile("charts/AverageTransactionAmountPerCategoryBar.js"),

diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerMonthByCategories.js
@@ -17,19 +17,20 @@ const COLOR = 1;
 const INCOME = 2;
 const EXPENDITURE = 3;
 
-var categoryNames = [];
-var categoryColors = [];
+
+var categories = new Map();
 
 for(var i = 0; i < transactionData.length; i++)
 {
     var currentTransaction = transactionData[i];
-    if(!categoryNames.includes(currentTransaction.category.name))
+    if(!categories.has(currentTransaction.category.name))
     {
-        categoryNames.push(currentTransaction.category.name);
-        categoryColors.push(currentTransaction.category.color);
+        categories.set(currentTransaction.category.name, currentTransaction.category.color);
     }
 }
 
+var sortedCategories = new Map([...categories.entries()].sort());
+
 var dates = [];
 var values = [];
 
@@ -42,10 +43,10 @@ for(var i = 0; i < transactionData.length; i++)
     {
         dates.push(date);
         values.push([
-            categoryNames, // NAME
-            categoryColors, // COLOR
-            new Array(categoryNames.length).fill(0), // INCOME
-            new Array(categoryNames.length).fill(0)  // EXPENDITURE
+            Array.from(sortedCategories.keys()), // NAME
+            Array.from(sortedCategories.values()), // COLOR
+            new Array(sortedCategories.size).fill(0), // INCOME
+            new Array(sortedCategories.size).fill(0)  // EXPENDITURE
         ]);
     }
 
@@ -201,7 +202,8 @@ Plotly.newPlot("containerID", plotlyData, plotlyLayout, plotlyConfig);
 REGEX_CATGEORY_NAME = new RegExp("(.*)\\s\\d+.\\d%");
 
 var plotContainer = document.getElementById('containerID');
-plotContainer.on('plotly_click', function(data){
+plotContainer.on('plotly_click', function(data)
+{
     if(data.event.shiftKey !== true)
     {
         return;

diff --git a/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearByCategories.js b/BudgetMasterServer/src/main/resources/charts/IncomesAndExpendituresPerYearByCategories.js
@@ -17,19 +17,19 @@ const COLOR = 1;
 const INCOME = 2;
 const EXPENDITURE = 3;
 
-var categoryNames = [];
-var categoryColors = [];
+var categories = new Map();
 
 for(var i = 0; i < transactionData.length; i++)
 {
     var currentTransaction = transactionData[i];
-    if(!categoryNames.includes(currentTransaction.category.name))
+    if(!categories.has(currentTransaction.category.name))
     {
-        categoryNames.push(currentTransaction.category.name);
-        categoryColors.push(currentTransaction.category.color);
+        categories.set(currentTransaction.category.name, currentTransaction.category.color);
     }
 }
 
+var sortedCategories = new Map([...categories.entries()].sort());
+
 var dates = [];
 var values = [];
 
@@ -42,10 +42,10 @@ for(var i = 0; i < transactionData.length; i++)
     {
         dates.push(date);
         values.push([
-            categoryNames, // NAME
-            categoryColors, // COLOR
-            new Array(categoryNames.length).fill(0), // INCOME
-            new Array(categoryNames.length).fill(0)  // EXPENDITURE
+            Array.from(sortedCategories.keys()), // NAME
+            Array.from(sortedCategories.values()), // COLOR
+            new Array(sortedCategories.size).fill(0), // INCOME
+            new Array(sortedCategories.size).fill(0)  // EXPENDITURE
         ]);
     }