Merge pull request #37 from JJtan2002/main

Merge main into watchlist
JJtan2002 · Jul 15, 2024 · 53fbe4e · 53fbe4e
2 parents 3a9745d + deb58a5
commit 53fbe4e
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 31 deletions.
diff --git a/frontend/src/components/dashboard/BarChart.js b/frontend/src/components/dashboard/BarChart.js
@@ -1,21 +1,37 @@
-import React from "react";
-import { useDash } from "../../contexts/DashBoardContext";
-import { Bar } from "react-chartjs-2";
+import React, { useContext } from 'react';
+import { Bar } from 'react-chartjs-2';
+import { useDash } from '../../contexts/DashBoardContext';
+import { DashboardContextProvider } from '../../contexts/DashBoardContext';
 
 const BarChart = () => {
-    const { barData } = useDash();
+    const { barData, barDays, setBarDays } = useDash(DashboardContextProvider);
+
+    const handleDaysChange = (event) => {
+        setBarDays(parseInt(event.target.value, 10));
+    };
 
     return (
         <div className="w-full max-w-4xl mt-6">
             <div className="w-full p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-                <h2 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">Daily Expenses</h2>
+                <div className="flex justify-between items-center mb-4">
+                    <h2 className="text-xl font-medium text-gray-900 dark:text-white">Daily Expenses</h2>
+                    <select
+                        value={barDays}
+                        onChange={handleDaysChange}
+                        className="p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:text-white"
+                    >
+                        <option value={5}>Last 5 days</option>
+                        <option value={10}>Last 10 days</option>
+                        <option value={15}>Last 15 days</option>
+                        <option value={30}>Last 30 days</option>
+                    </select>
+                </div>
                 <div className="h-80"> {/* Adjust the height of the container */}
                     <Bar data={barData} height={300} /> {/* Adjust the height of the chart */}
                 </div>
             </div>
         </div>
     );
-
 };
 
 export default BarChart;
diff --git a/frontend/src/components/dashboard/PieChart.js b/frontend/src/components/dashboard/PieChart.js
@@ -1,21 +1,37 @@
 import React from "react";
-import { useDash } from "../../contexts/DashBoardContext";
 import { Pie } from "react-chartjs-2";
+import { useDash } from '../../contexts/DashBoardContext';
+import { DashboardContextProvider } from '../../contexts/DashBoardContext';
 
 const PieChart = () => {
-    const { pieData } = useDash();
+    const { pieData, pieDays, setPieDays } = useDash(DashboardContextProvider);
+
+    const handleDaysChange = (event) => {
+        setPieDays(parseInt(event.target.value, 10));
+    };
 
     return (
         <div className="w-full max-w-4xl mt-6">
             <div className="w-full p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-                <h2 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">Expense Distribution</h2>
+                <div className="flex justify-between items-center mb-4">
+                    <h2 className="text-xl font-medium text-gray-900 dark:text-white">Expense Distribution</h2>
+                    <select
+                        value={pieDays}
+                        onChange={handleDaysChange}
+                        className="p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:text-white"
+                    >
+                        <option value={5}>Last 5 days</option>
+                        <option value={10}>Last 10 days</option>
+                        <option value={15}>Last 15 days</option>
+                        <option value={30}>Last 30 days</option>
+                    </select>
+                </div>
                 <div className="h-80"> {/* Adjust the height of the container */}
                     <Pie data={pieData} height={300} /> {/* Adjust the height of the chart */}
                 </div>
             </div>
         </div>
     );
-
 };
 
 export default PieChart;
diff --git a/frontend/src/contexts/DashBoardContext.js b/frontend/src/contexts/DashBoardContext.js
@@ -20,7 +20,7 @@ const DashboardContextProvider = ({ children }) => {
     const handleDateChange = (event) => {
         setDateValue(event.target.value);
     };
-    const [dateForDisplay, setDates] = useState({ today: '', fiveDaysAgo: '' });
+    const [dateForDisplay, setDates] = useState({ today: '', fiveDaysAgo: '', tenDaysAgo: '' });
 
 
     // hooks
@@ -30,17 +30,20 @@ const DashboardContextProvider = ({ children }) => {
     const { getLabels } = useLabels();
     const [expenseCategories, setExpenseCategories] = useState([]);
     const [incomeCategories, setIncomeCategories] = useState([]);
-
+    const [pieDays, setPieDays] = useState(5);
+    const [barDays, setBarDays] = useState(5);
 
     useEffect(() => {
         // Get today's date
         const today = new Date();
         // Get the date 5 days ago
         const fiveDaysAgo = new Date(today);
+        const tenDaysAgo = new Date(today);
         fiveDaysAgo.setDate(today.getDate() - 5);
+        tenDaysAgo.setDate(today.getDate() - 10);
 
         // Update state with formatted dates
-        setDates({ today: today, fiveDaysAgo: fiveDaysAgo });
+        setDates({ today: today, fiveDaysAgo: fiveDaysAgo, tenDaysAgo: tenDaysAgo });
     }, []);
 
     const {
@@ -73,36 +76,61 @@ const DashboardContextProvider = ({ children }) => {
         queryFn: () => getLabels(),
     });
 
+    //    const {
+    //        refetch: refetchBardata,
+    //        data: bardata,
+    //        isPendingBardata,
+    //        isErrorBardata,
+    //    } = useQuery({
+    //        queryKey: ["api/bardata"],
+    //        queryFn: () => getTransactions(
+    //            /*limit:*/ 0,
+    //            /*charType:*/ 1,
+    //            /*startDate:*/ dateForDisplay.fiveDaysAgo,
+    //            /*endDate:*/ dateForDisplay.today,
+    //        ),
+    //        enabled: !!dateForDisplay.fiveDaysAgo && !!dateForDisplay.today,
+    //    })
+
     const {
         refetch: refetchBardata,
         data: bardata,
         isPendingBardata,
         isErrorBardata,
     } = useQuery({
-        queryKey: ["api/bardata"],
-        queryFn: () => getTransactions(
+        queryKey: ["api/bardata", barDays],
+        queryFn: () => {
+            const endDate = new Date();
+            const startDate = new Date();
+            startDate.setDate(endDate.getDate() - barDays);
+            return getTransactions(
             /*limit:*/ 0,
             /*charType:*/ 1,
-            /*startDate:*/ dateForDisplay.fiveDaysAgo,
-            /*endDate:*/ dateForDisplay.today,
-        ),
-        enabled: !!dateForDisplay.fiveDaysAgo && !!dateForDisplay.today,
-    })
-
+                startDate,
+                endDate,
+            );
+        },
+        enabled: !!barDays,
+    });
     const {
         refetch: refetchPiedata,
         data: piedata,
         isPendingPiedata,
         isErrorPiedata,
     } = useQuery({
-        queryKey: ["api/piedata"],
-        queryFn: () => getTransactions(
-            0,
-            2,
-            dateForDisplay.fiveDaysAgo,
-            dateForDisplay.today,
-        ),
-        enabled: !!dateForDisplay.fiveDaysAgo && !!dateForDisplay.today,
+        queryKey: ["api/piedata", pieDays],
+        queryFn: () => {
+            const endDate = new Date();
+            const startDate = new Date();
+            startDate.setDate(endDate.getDate() - pieDays);
+            return getTransactions(
+            /*limit:*/ 0,
+            /*charType:*/ 2,
+                startDate,
+                endDate,
+            );
+        },
+        enabled: !!pieDays,
     })
 
 
@@ -221,8 +249,8 @@ const DashboardContextProvider = ({ children }) => {
 
     return (
         <DashboardContext.Provider value={{
-            transactionType, expenseCategories, incomeCategories, dateValue, 
-            barData, pieData,
+            transactionType, expenseCategories, incomeCategories, dateValue,
+            barData, pieData, pieDays, setPieDays, barDays, setBarDays,
             loading, expenses, wallet, isPending,
             setTransactionType,
             handleTransaction, handleDeleteTransaction, handleDateChange,