finshed net profit display

Calendar modal

app/CalendarPage.jsx

@@ -131,7 +131,7 @@ const CalendarPage = () => {
       <Container>
         <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} date={selectedMeetupDate} />
         <Grid container spacing={3}>
-          <Grid item xs={6}>
+          <Grid item md={6}>
             <Box sx={{display: "flex", justifyContent: "center"}}>
               <Typography variant="h3">Calendar</Typography>
             </Box>
@@ -150,10 +150,10 @@ const CalendarPage = () => {
               <Typography variant="body1">Looking to buy bitcoin? Sell bitcoin? Buy goods and services with bitcoin? Come and meet up with us! Lets change our world one transaction at a time. </Typography>
             </Box>
           </Grid>
-          <Grid item xs={6}>
+          <Grid item md={6}>
             <Box>
               <Typography variant="h4" marginTop={6} marginBottom={2}>Education</Typography>
-              <Typography variant="body1" marginBottom={2}>Curious? Skeptical? Can’t get enough? We have monthly meetups where we teach people what BTC is, why it matters, and how it works. Let us show you how BTW can help YOU!</Typography>
+              <Typography variant="body1" marginBottom={2}>Curious? Skeptical? Can’t get enough? We have monthly meetups where we teach people what BTC is, why it matters, and how it works. Let us show you how BTC can help YOU!</Typography>
             </Box>
             <Box>
             <Typography variant="h4" marginBottom={2}>Socialize</Typography>

app/GraphPage.jsx

@@ -1,9 +1,149 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from '@emotion/styled'
 import { Card, Grid, TextField, Typography, Box, Container } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers';
 import { LineChart, Line, XAxis, YAxis } from 'recharts';
+import { useState } from 'react';
+import dayjs from 'dayjs';
+import ProfitDisplay from '@components/ProfitDisplay';
 
+const bitcoinCSV = `Date,Price
+09/01/2023,26209.50
+08/01/2023,25937.30
+07/01/2023,29232.40
+06/01/2023,30472.90
+05/01/2023,27216.10
+04/01/2023,29252.10
+03/01/2023,28473.70
+02/01/2023,23130.50
+01/01/2023,23125.10
+12/01/2022,16537.40
+11/01/2022,17163.90
+10/01/2022,20496.30
+09/01/2022,19423.00
+08/01/2022,20043.90
+07/01/2022,23303.40
+06/01/2022,19926.60
+05/01/2022,31793.40
+04/01/2022,37650.00
+03/01/2022,45525.00
+02/01/2022,43188.20
+01/01/2022,38498.60
+12/01/2021,46219.50
+11/01/2021,56882.90
+10/01/2021,61309.60
+09/01/2021,43823.30
+08/01/2021,47130.40
+07/01/2021,41553.70
+06/01/2021,35026.90
+05/01/2021,37298.60
+04/01/2021,57720.30
+03/01/2021,58763.70
+02/01/2021,45164.00
+01/01/2021,33108.10
+12/01/2020,28949.40
+11/01/2020,19698.10
+10/01/2020,13797.30
+09/01/2020,10776.10
+08/01/2020,11644.20
+07/01/2020,11333.40
+06/01/2020,9135.40
+05/01/2020,9454.80
+04/01/2020,8629.00
+03/01/2020,6412.50
+02/01/2020,8543.70
+01/01/2020,9349.10
+12/01/2019,7196.40
+11/01/2019,7546.60
+10/01/2019,9152.60
+09/01/2019,8284.30
+08/01/2019,9594.40
+07/01/2019,10082.00
+06/01/2019,10818.60
+05/01/2019,8558.30
+04/01/2019,5320.80
+03/01/2019,4102.30
+02/01/2019,3816.60
+01/01/2019,3437.20
+12/01/2018,3709.40
+11/01/2018,4039.70
+10/01/2018,6365.90
+09/01/2018,6635.20
+08/01/2018,7033.80
+07/01/2018,7729.40
+06/01/2018,6398.90
+05/01/2018,7502.60
+04/01/2018,9245.10
+03/01/2018,6938.20
+02/01/2018,10333.90
+01/01/2018,10265.40
+12/01/2017,13850.40
+11/01/2017,9946.80
+10/01/2017,6451.20
+09/01/2017,4360.60
+08/01/2017,4735.10
+07/01/2017,2883.30
+06/01/2017,2480.60
+05/01/2017,2303.30
+04/01/2017,1351.90
+03/01/2017,1079.10
+02/01/2017,1189.30
+01/01/2017,965.5
+12/01/2016,963.4
+11/01/2016,742.5
+10/01/2016,698.7
+09/01/2016,608.1
+08/01/2016,573.9
+07/01/2016,621.9
+06/01/2016,670
+05/01/2016,528.9
+04/01/2016,448.5
+03/01/2016,415.7
+02/01/2016,436.2
+01/01/2016,369.8
+12/01/2015,430
+11/01/2015,378
+10/01/2015,311.2
+09/01/2015,235.9
+08/01/2015,229.5
+07/01/2015,283.7
+06/01/2015,264.1
+05/01/2015,229.8
+04/01/2015,235.8
+03/01/2015,244.1
+02/01/2015,254.1
+01/01/2015,218.5
+12/01/2014,318.2
+11/01/2014,374.9
+10/01/2014,337.9
+09/01/2014,388.2
+08/01/2014,481.8
+07/01/2014,589.5
+06/01/2014,635.1
+05/01/2014,627.9
+04/01/2014,445.6
+03/01/2014,444.7
+02/01/2014,573.9`
+
+const CSVtoJSON = (csv) => {
+  let lines = csv.split('\n');
+  let monthlyPrices = [];
+
+  for (let x = 1; x < lines.length; x++) {
+    let values = lines[x].split(",");
+    let dataPointObj = {date: values[0], price: Number(values[1])}
+    monthlyPrices.push(dataPointObj);
+  }
+  // console.log(JSON.stringify(monthlyPrices));
+  return monthlyPrices.reverse();
+}
+
+const selectPriceDates = (startDateStr, json) => {
+  let startDateObj = new Date(startDateStr);
+  let returnJson = json.filter(obj => new Date(obj.date) >= startDateObj);
+  // console.log(returnJson);
+  return returnJson;
+}
 
 const BTCWorkers = (
 <svg width="587" height="221" viewBox="0 0 587 221" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -49,9 +189,39 @@ const CustomDiv = styled.div`
     width: 100%
 `;
 
-const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, {name: 'Page B', uv: 300, pv: 2400, amt: 2400}, {name: 'Page C', uv: 300, pv: 2400, amt: 2400}];
+function formatDate(date) {
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // January is 0!
+  const year = date.getFullYear();
+
+  return month + '/' + day + '/' + year;
+}
+
+const calculateProfitPercent = (startDatePrice, endDatePrice) => {
+  const startPrice = startDatePrice.price;
+  const endPrice = endDatePrice.price;
+  console.log("start: " + startPrice);
+  console.log("end: " + endPrice);
+  return endPrice / startPrice;
+}
+
+const getProfit = (principle, percentChange) => {
+  if (principle === -1) {
+    return 0;
+  }
+  const profit = principle * percentChange;
+  console.log(profit);
+  return profit;
+}
 
 const GraphPage = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs("01/01/2014"));
+  const [investmentAmount, setInvestmentAmount] = useState(0);
+
+  const json = CSVtoJSON(bitcoinCSV);
+  const data = selectPriceDates(selectedDate, json);
+  const profitPercent = calculateProfitPercent(data[0], data[data.length - 1]);
+
   return (
     <CustomDiv>
       <Container>
@@ -59,32 +229,37 @@ const GraphPage = () => {
           <Typography marginTop={10} variant='h3'>How Much Would You Have Made?</Typography>
         </Box>
         <Grid container spacing={10}>
-          <Grid item xs={6}>
+          <Grid item md={6}>
             <Typography align="center" variant='h6' marginY={3}>Pick a past date and an amount invested to see how much you could have made! Pick a past date and an amount invested to see how much you could have made!</Typography>
             <Box sx={{display: "flex", justifyContent: "center"}} marginBottom={5}>
               <Box marginRight={5}>
                 <Typography align="center" variant="body1">investment date</Typography>
-                <DatePicker />
+                <DatePicker value={selectedDate} onChange={(date) => {setSelectedDate(date)}}/>
               </Box>
               <Box>
                 <Typography align="center" variant="body1">amount</Typography>
-                <TextField />
+                <TextField value={investmentAmount} onChange={(event) => {setInvestmentAmount(event.target.value)}} />
               </Box>
             </Box>
             <Box sx={{display: "flex", justifyContent: "center"}}>
               {BTCWorkers}
             </Box>
           </Grid>
-          <Grid item xs={6}>
+          <Grid item md={6}>
             <Box marginTop={4}>
               <Card>
-                <Box sx={{display: 'flex', justifyContent: 'center', borderColor: 'black', borderStyle: 'solid'}}>
-                  <LineChart margin={{top: 25, right: 50, bottom: 20, left: 0}} width={500} height={400} data={data}>
-                    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
-                    <XAxis dataKey="name" />
-                    <YAxis />
-                  </LineChart>
-                </Box>
+                <Grid container direction="column" alignItems="center" style={{dborderColor: 'black', borderStyle: 'solid'}}>
+                  <Grid item>
+                    <ProfitDisplay profit={getProfit(investmentAmount, profitPercent)} />
+                  </Grid>
+                  <Grid item>
+                    <LineChart margin={{top: 25, right: 50, bottom: 20, left: 0}} width={500} height={400} data={data}>
+                      <Line type="monotone" dataKey="price" stroke="#8884d8" />
+                      <XAxis dataKey="date" />
+                      <YAxis />
+                    </LineChart>
+                  </Grid>
+                </Grid>
               </Card>
             </Box>
           </Grid>

app/MainPage.jsx

@@ -36,7 +36,7 @@ function MainPage() {
     <CustomDiv>
         <Container>
             <Grid container marginTop={20} justifyContent='center' spacing={2}>
-                <Grid item sm={4} xs={12}>
+                <Grid item xs={12} md={4}>
                     <Grid container direction="column">
                         <Grid item>
                             <Typography align='center' variant='h2'>Empowerment for those who need it most</Typography>
@@ -49,7 +49,7 @@ function MainPage() {
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item sm={4} xs={12}>
+                <Grid item xs={12} md={4}>
                     <CircleContainer>
                         <svg xmlns="http://www.w3.org/2000/svg" width="96" height="147" viewBox="0 0 192 295" fill="none">
                             <path d="M15.25 59.25H132.917C144.619 59.25 155.843 63.8989 164.118 72.1739C172.393 80.449 177.042 91.6723 177.042 103.375C177.042 115.078 172.393 126.301 164.118 134.576C155.843 142.851 144.619 147.5 132.917 147.5M132.917 147.5C144.619 147.5 155.843 152.149 164.118 160.424C172.393 168.699 177.042 179.922 177.042 191.625C177.042 203.328 172.393 214.551 164.118 222.826C155.843 231.101 144.619 235.75 132.917 235.75H15.25M132.917 147.5H44.6667M44.6667 59.25V235.75M59.375 15.125V59.25M118.208 15.125V59.25M59.375 235.75V279.875M118.208 235.75V279.875" stroke="#FAE84E" stroke-width="29.4167" stroke-linecap="round" stroke-linejoin="round"/>

app/PerksPage.jsx

@@ -41,13 +41,13 @@ sx<defs>
   return (
     <CustomDiv>
       <Grid container spacing={3} justifyContent="space-evenly">
-        <Grid item xs={3}>
+        <Grid item md={3}>
           <InfoCard title={"Wealth"} picture={wealthCardPicture} text={"Bitcoin encourages saving and wealth building long-term. Bitcoin always has large increases in value in any 5-year period."} />
         </Grid>
-        <Grid item xs={3}>
+        <Grid item md={3}>
           <InfoCard title={"Independence"} picture={independenceCardPicture} text={"Bitcoin allows those who have been historically discriminated against to control their own money- taking power back from banks."} />
         </Grid>
-        <Grid item xs={3}>
+        <Grid item md={3}>
           <InfoCard title={"Security"} picture={securityCardPicture} text={"When communities build savings in safe assets that appreciate they become secure. They are no longer targets for monetary discrimination."} />
         </Grid>
       </Grid>

app/WheelSpinPage.jsx

@@ -79,12 +79,13 @@ const WheelSpinPage = () => {
     }
   }, []);
 
+  
   return (
     <CustomDiv>
       <Container>
         <WinningDialog open={openSpinResult} close={setOpenSpinResult} prizeAmount={wheelItems.items[winningIndex].label} />
         <Grid container justifyContent="center" alignItems="center" spacing={3}>
-          <Grid item xs={6}>
+          <Grid item md={6}>
             <Grid container direction="column">
               <Grid item>
                 <h1>Join our mailing list to spin the wheel for a chance to win BTC!</h1>
@@ -101,7 +102,7 @@ const WheelSpinPage = () => {
               </Grid>
             </Grid>
           </Grid>
-          <Grid item xs={6}>
+          <Grid item md={6}>
             <Grid container justifyContent="center">
               <div className='wheel-container' style={{height: 500, width: 500}} ref={containerRef}></div>
             </Grid>

app/page.jsx

@@ -42,7 +42,7 @@ const Home = () => {
           <PerksPage />
           <WheelSpinPage />
           <CalendarPage />
-          {/* <GraphPage /> */}
+          <GraphPage />
           <BottomBar />
         </div>
       </LocalizationProvider>