Added date filtering to chart

zefhub · Jul 8, 2022 · 5ed86be · 5ed86be · vercel · Jul 8, 2022
1 parent 843c7aa
commit 5ed86be
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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">