Fixed bug in charts related to transactions order

frontend/src/components/BalanceTimeSeries.jsx

@@ -32,7 +32,7 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, o
     showgrid: true,
     zeroline: true,
     gridcolor: "#474747",
-    zerolinecolor: "#ffffff",
+    zerolinecolor: "rgba(255, 255, 255, 0.6)",
     linecolor: "#ffffff",
     color: "#ffffff",
     type: "date",
@@ -138,7 +138,7 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard, o
             gridcolor: "#474747",
             showline: true,
             zeroline: true,
-            zerolinecolor: "#ffffff",
+            zerolinecolor: "rgba(255, 255, 255, 0.6)",
             hoverformat: ".2f",
             linecolor: "#ffffff",
             type: "linear",

frontend/src/components/MonthHistogram.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, Suspense, lazy } from "react";
 const Plot = lazy(() => import("react-plotly.js"));
 import CircularProgress from "@mui/material/CircularProgress";
 
+// transactionsList needs to ordered by date in ascending order
 function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
   const [years, setYears] = useState([]);
   const [histogramData, setHistogramData] = useState(() => getHistData([]));
@@ -58,19 +59,19 @@ function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
     // if it isn't the first academic year, is firstYear/firstYear+1
     // (we only return the first year of the academic year). The same check is done for lastYear.
     const firstYear =
-      typeOfYear === "civic"
-        ? parseInt(transactions[transactions.length - 1].date.substring(0, 4))
-        : parseInt(transactions[transactions.length - 1].date.substring(5, 7)) < 9
-          ? parseInt(transactions[transactions.length - 1].date.substring(0, 4)) - 1
-          : parseInt(transactions[transactions.length - 1].date.substring(0, 4));
-
-    const lastYear =
       typeOfYear === "civic"
         ? parseInt(transactions[0].date.substring(0, 4))
         : parseInt(transactions[0].date.substring(5, 7)) < 9
           ? parseInt(transactions[0].date.substring(0, 4)) - 1
           : parseInt(transactions[0].date.substring(0, 4));
 
+    const lastYear =
+      typeOfYear === "civic"
+        ? parseInt(transactions[transactions.length - 1].date.substring(0, 4))
+        : parseInt(transactions[transactions.length - 1].date.substring(5, 7)) < 9
+          ? parseInt(transactions[transactions.length - 1].date.substring(0, 4)) - 1
+          : parseInt(transactions[transactions.length - 1].date.substring(0, 4));
+
     const yearsList = Array.from(
       { length: lastYear - firstYear + 1 },
       (_, index) => firstYear + index
@@ -92,11 +93,9 @@ function MonthHistogram({ title, typeOfYear, transactionsList, loading }) {
       const month_idx = months.indexOf(parseInt(transaction.date.substring(5, 7)));
 
       if (transaction.value >= 0) {
-        transaction_y[year_idx][0][month_idx] =
-          transaction_y[year_idx][0][month_idx] + transaction.value;
+        transaction_y[year_idx][0][month_idx] += transaction.value;
       } else {
-        transaction_y[year_idx][1][month_idx] =
-          transaction_y[year_idx][1][month_idx] + Math.abs(transaction.value);
+        transaction_y[year_idx][1][month_idx] += Math.abs(transaction.value);
       }
     });
 

frontend/src/components/StackedBarChart.jsx

@@ -13,6 +13,7 @@ const transactionTypeOptions = [
 const bars_color = ["#FF787C", "#7FA8FD", "#6BBA75", "#FFDC82", "#e377c2", "#c7825b"];
 const bar_lines_color = ["#9F5C5C", "#4274C4", "#0E9553", "#CEA54E", "#9c4f84", "#875940"];
 
+// transactionsList needs to ordered by date in ascending order
 function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loading }) {
   const [years, setYears] = useState([]);
   const [earningBool, setEarningBool] = useState(transactionTypeOptions[0].bool);
@@ -60,19 +61,19 @@ function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loa
     }
 
     const firstYear =
-      typeOfYear === "civic"
-        ? parseInt(transactions[transactions.length - 1].date.substring(0, 4))
-        : parseInt(transactions[transactions.length - 1].date.substring(5, 7)) < 9
-          ? parseInt(transactions[transactions.length - 1].date.substring(0, 4)) - 1
-          : parseInt(transactions[transactions.length - 1].date.substring(0, 4));
-
-    const lastYear =
       typeOfYear === "civic"
         ? parseInt(transactions[0].date.substring(0, 4))
         : parseInt(transactions[0].date.substring(5, 7)) < 9
           ? parseInt(transactions[0].date.substring(0, 4)) - 1
           : parseInt(transactions[0].date.substring(0, 4));
 
+    const lastYear =
+      typeOfYear === "civic"
+        ? parseInt(transactions[transactions.length - 1].date.substring(0, 4))
+        : parseInt(transactions[transactions.length - 1].date.substring(5, 7)) < 9
+          ? parseInt(transactions[transactions.length - 1].date.substring(0, 4)) - 1
+          : parseInt(transactions[transactions.length - 1].date.substring(0, 4));
+
     const yearsList = Array.from(
       { length: lastYear - firstYear + 1 },
       (_, index) => firstYear + index
@@ -105,11 +106,9 @@ function StackedBarChart({ title, typeOfYear, projectList, transactionsList, loa
       // If project_idx === -1 (project is not symbolic) then the value is
       // assigned to the last position of the transactions array
       if (project_idx === -1) {
-        transaction_y[year_idx][projects.length][month_idx] =
-          transaction_y[year_idx][projects.length][month_idx] + Math.abs(transaction.value);
+        transaction_y[year_idx][projects.length][month_idx] += Math.abs(transaction.value);
       } else {
-        transaction_y[year_idx][project_idx][month_idx] =
-          transaction_y[year_idx][project_idx][month_idx] + Math.abs(transaction.value);
+        transaction_y[year_idx][project_idx][month_idx] += Math.abs(transaction.value);
       }
     });