add filter to outflowovertime component (#3149)

src/extension/features/toolkit-reports/pages/outflow-over-time/OutflowOverTime.jsx

@@ -7,28 +7,39 @@ import {
   filterTransactions,
   groupTransactions,
   toHighchartsSeries,
+  filterTransactionsByDate,
 } from './utils';
 import { OutflowGraph } from './OutflowGraph';
 import { useLocalStorage } from 'toolkit/extension/hooks/useLocalStorage';
 import { LabeledCheckbox } from 'toolkit/extension/features/toolkit-reports/common/components/labeled-checkbox';
 
 export const OutflowOverTimeComponent = ({ allReportableTransactions, filters }) => {
   const [outflowSeries, setOutflowSeries] = useState([]);
+
+  // Using CumulativeSum will show a growing trendline over the dates.
   const [cumulativeSum, setCumulativeSum] = useLocalStorage(
     'outflow-over-time-useCumulativeSum',
     true
   );
 
   useEffect(() => {
     const filterOutAccounts = filters.accountFilterIds;
+
+    // These dates are used to appropriately filter based on the report context.
+    const { fromDate, toDate } = filters.dateFilter;
     const calculateOutflow = cumulativeSum
       ? calculateCumulativeOutflowPerDate
       : calculateOutflowPerDate;
 
     setOutflowSeries(
       toHighchartsSeries(
         calculateOutflow(
-          groupTransactions(filterTransactions(allReportableTransactions, filterOutAccounts))
+          groupTransactions(
+            filterTransactions(
+              filterTransactionsByDate(allReportableTransactions, fromDate, toDate),
+              filterOutAccounts
+            )
+          )
         )
       )
     );

src/extension/features/toolkit-reports/pages/outflow-over-time/utils.js

@@ -14,6 +14,19 @@ export const filterTransactions = (transactions, filterOutAccounts) => {
     });
 };
 
+/**
+ * Filter the passed transactions to only include those within the specified date range.
+ * @param {Array} transactions - The array of transactions to be filtered.
+ * @param {Date} startDate - The start date of the desired date range.
+ * @param {Date} endDate - The end date of the desired date range.
+ * @returns {Array} - A new array containing only the transactions that fall within the specified date range.
+ */
+export const filterTransactionsByDate = (transactions, startDate, endDate) => {
+  return transactions.filter((transaction) => {
+    return transaction.date >= startDate && transaction.date <= endDate;
+  });
+};
+
 export const groupTransactions = (transactions) => {
   const groupedByMonth = lodash.groupBy(transactions, 'month');
   const groupedByMonthAndDate = {};