From 5ed86be164af5d9bd686a1b056f5d1de99a67ff7 Mon Sep 17 00:00:00 2001
From: Daniel Dyrnes <thedanielforum@gmail.com>
Date: Fri, 8 Jul 2022 15:00:42 +0900
Subject: [PATCH] Added date filtering to chart

---
 components/CategoryChart.tsx | 20 ++++++++++++++++----
 pages/dashboard.tsx          |  5 ++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/CategoryChart.tsx b/components/CategoryChart.tsx
index d2d37e8..f5086af 100644
--- a/components/CategoryChart.tsx
+++ b/components/CategoryChart.tsx
@@ -6,8 +6,8 @@ import Dinero from "dinero.js";
 import Loading from "components/Loading";
 
 const GET_CATEGORY_CHART_DATA = gql`
-  query categoryChartData {
-    queryTransaction {
+  query categoryChartData($filter: TransactionFilter) {
+    queryTransaction(filter: $filter) {
       id
       amount
       category {
@@ -19,13 +19,25 @@ const GET_CATEGORY_CHART_DATA = gql`
   }
 `;
 
-const CategoryChart: React.FC = () => {
+export interface CategoryChartProps {
+  dateStart?: Date;
+  dateEnd?: Date;
+}
+
+const CategoryChart: React.FC<CategoryChartProps> = (props) => {
   const intl = useIntl();
   const {
     data: pieChartData,
     loading,
     error,
-  } = useQuery(GET_CATEGORY_CHART_DATA, {});
+  } = useQuery(GET_CATEGORY_CHART_DATA, {
+    variables: {
+      filter:
+        props.dateStart && props.dateEnd
+          ? { date: { between: { min: props.dateStart, max: props.dateEnd } } }
+          : {},
+    },
+  });
   if (error) {
     console.error(error);
   }
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index b801310..714e063 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -84,7 +84,10 @@ const Dashboard: NextPage = () => {
               </div>
             </div>
             <div className="flex flex-row justify-start">
-              <CategoryChart />
+              <CategoryChart
+                dateStart={dateStart.toJSDate()}
+                dateEnd={dateEnd.toJSDate()}
+              />
             </div>
           </div>
           <div className="w-1/2 ml-2 pt-2">