diff --git a/typescript/frontend/src/components/modal-views/generated-sql-modal.tsx b/typescript/frontend/src/components/modal-views/generated-sql-modal.tsx new file mode 100644 index 00000000..efc27b28 --- /dev/null +++ b/typescript/frontend/src/components/modal-views/generated-sql-modal.tsx @@ -0,0 +1,61 @@ +import React from "react"; + +interface ModalProps { + isOpen: boolean; + closeModal: () => void; +} + +export default function SqlModal({ isOpen, closeModal }: ModalProps) { + if (!isOpen) { + return null; + } + + return ( +
+
+ + +
+
+ {/* TODO: Fetch generated SQL */} +
+ +
+

+ "What is the most expensive purchase made by the user in the last year?" +

+
+ +

+ SELECT + u.user_id, + u.first_name, + u.last_name, + MAX(t.transaction_amount) AS most_expensive_purchase + FROM + users u + JOIN + transactions t ON u.user_id = t.user_id + WHERE + t.transaction_date {'>'}= DATE_TRUNC('year', CURRENT_DATE - INTERVAL '1 year') + GROUP BY + u.user_id, u.first_name, u.last_name; +

+
+
+
+ +
+
+
+
+ ); +} diff --git a/typescript/frontend/src/components/transaction/custom-axis.tsx b/typescript/frontend/src/components/transaction/custom-axis.tsx new file mode 100644 index 00000000..a6f828d3 --- /dev/null +++ b/typescript/frontend/src/components/transaction/custom-axis.tsx @@ -0,0 +1,15 @@ +import {format} from "date-fns"; + +export default function CustomAxis({ x, y, payload }: any) { + const date = format(new Date(payload.value * 1000), 'MMM'); + return ( + + + {date} + + + ); +} diff --git a/typescript/frontend/src/components/ui/chats/spending-chart.tsx b/typescript/frontend/src/components/ui/chats/spending-chart.tsx index 32765216..59fdcf3d 100644 --- a/typescript/frontend/src/components/ui/chats/spending-chart.tsx +++ b/typescript/frontend/src/components/ui/chats/spending-chart.tsx @@ -1,91 +1,112 @@ -import {useState} from 'react'; -import {format} from 'date-fns'; -import {Area, AreaChart, ResponsiveContainer, Tooltip, XAxis} from 'recharts'; -import {SpendingData} from '@/data/static/spending'; - -function CustomAxis({ x, y, payload }: any) { - const date = format(new Date(payload.value * 1000), 'MMM'); - return ( - - - {date} - - - ); -} - +import {useState} from "react"; +import {format} from "date-fns"; +import SqlModal from "@/components/modal-views/generated-sql-modal"; +import {Area, AreaChart, ResponsiveContainer, Tooltip, XAxis} from "recharts"; +import {SpendingData} from "@/data/static/spending"; +import Button from "@/components/ui/button"; +import CustomAxis from "@/components/transaction/custom-axis"; export default function SpendingChart() { - let [date, setDate] = useState(Date.now()); - let [spending, setSpending] = useState('34,500'); + let [date, setDate] = useState(Date.now()); + let [spending, setSpending] = useState('34,500'); + let [isModalOpen, setIsModalOpen] = useState(false); // state variable for modal open status const formattedDate = format(new Date(date * 1000), 'MMMM d, yyyy'); - return ( -
-

- Spending -

-
- ${spending} / YTD -
-
- {formattedDate} -
-
- - { - if (data.isTooltipActive) { - setDate( - data.activePayload && data.activePayload[0].payload.date - ); - setSpending( - data.activePayload && - data.activePayload[0].payload.monthlyExpense - ); - } - }} - > - - - - - - - } - interval={0} - tickMargin={5} - /> - } cursor={{ stroke: '#7645D9' }} /> - - - -
-
- ); + + const closeModal = () => { // function to close the modal + setIsModalOpen(false); + }; + + const openModal = () => { // function to open the modal + setIsModalOpen(true); + }; + + return ( +
+
+

+ Spending +

+
+ ${spending} / YTD +
+
+ {formattedDate} +
+
+ + { + if (data.isTooltipActive) { + setDate( + data.activePayload && data.activePayload[0].payload.date + ); + setSpending( + data.activePayload && + data.activePayload[0].payload.monthlyExpense + ); + } + }} + > + + + + + + + } + interval={0} + tickMargin={5} + /> + } cursor={{stroke: '#7645D9'}}/> + + + + +
+

+ Most expensive month +

+

+ June 2023 (SQL generated by GPT) +

+ +
+ + {/* Render the SqlModal */} + +
+
+
+ ); }