249 lines
14 KiB
JavaScript
249 lines
14 KiB
JavaScript
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';
|
|
|
|
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">
|
|
<g clip-path="url(#clip0_5_117)">
|
|
<path d="M159.189 52.9659L182.067 43.3376L191.88 63.4542L167.838 73.2671L159.189 52.9659Z" fill="#FFB6B6"/>
|
|
<path opacity="0.1" d="M159.189 52.9659L182.067 43.3376L191.88 63.4542L167.838 73.2671L159.189 52.9659Z" fill="black"/>
|
|
<path d="M162.441 45.3002L185.011 71.3045C185.011 71.3045 169.31 120.86 153.61 125.276C137.909 129.691 108.961 151.28 108.961 151.28L72.6529 127.729L90.3162 101.725C90.3162 101.725 133.002 43.3376 144.287 43.3376C155.572 43.3376 162.441 45.3002 162.441 45.3002Z" fill="#FAE84E"/>
|
|
<path d="M131.948 214.819H79.4091L76.0874 210.378L62.5259 192.249L59.4054 188.079C59.4054 188.079 47.6299 166.49 50.0831 146.864C52.5364 127.238 78.05 122.823 78.05 122.823H79.1L110.335 150.269L108.47 175.812L118.362 192.249L131.948 214.819Z" fill="#2F2E41"/>
|
|
<path d="M90.169 214.819H76.0874V193.966L90.169 214.819Z" fill="#2F2E41"/>
|
|
<path d="M477.253 68.9658L482.505 101.726L449.322 102.154V73.6718L477.253 68.9658Z" fill="#A0616A"/>
|
|
<path d="M556.293 183.162L554.542 192.249L550.195 214.819H462.864C463.546 209.76 464.479 202.479 465.474 194.619C465.573 193.834 465.676 193.044 465.774 192.249C468.271 172.491 471.004 150.132 471.004 150.132L482.485 151.525L504.761 154.224L513.837 155.323L538.144 158.272C550.263 159.739 558.599 171.171 556.293 183.162Z" fill="#F2F2F2"/>
|
|
<path d="M517.478 214.819H470.111C470.832 213.97 471.24 213.479 471.24 213.479L485.439 211.134L514.696 206.306C514.696 206.306 516.031 209.755 517.478 214.819Z" fill="#2F2E41"/>
|
|
<path d="M452.315 214.819H380.784C381.495 213.405 382.231 211.988 382.987 210.574C383.998 208.685 385.077 207.003 386.22 205.506C386.981 204.51 387.766 203.597 388.575 202.763C390.955 200.315 393.546 198.534 396.274 197.312C406.013 192.931 417.489 195.615 427.263 199.981C430.933 201.62 434.363 203.494 437.37 205.32C442.669 208.538 446.668 211.61 448.371 212.974C448.959 213.44 449.273 213.71 449.273 213.71L452.315 214.819Z" fill="#2F2E41"/>
|
|
<path d="M395.567 214.819H385.421L388.095 211.713L389.606 209.957L390.253 210.482L395.567 214.819Z" fill="#FFB6B6"/>
|
|
<path d="M520.942 214.819H433.568L437.37 205.32L442.596 192.249L445.221 185.684L443.052 176.455C443.052 176.455 441.982 175.7 440.353 174.34C434.549 169.532 421.63 157.148 424.599 144.431C427.974 129.957 432.214 101.749 433.111 95.6701C433.224 94.9096 433.283 94.4975 433.283 94.4975L445.893 91.4064L446.31 91.3034L447.664 90.9697H481.44L506.282 107.794L506.277 107.971L504.761 154.224L504.113 174.012C504.113 174.012 503.333 176.867 503.519 181.303C503.642 184.345 504.216 188.128 505.806 192.249C507.489 196.63 510.32 201.39 514.966 206.036C518.474 209.544 520.177 212.498 520.942 214.819Z" fill="#FAE84E"/>
|
|
<path d="M513.838 155.323C513.008 162.123 512.214 166.956 512.214 166.956L503.519 181.303L496.886 192.249L485.439 211.134L483.761 213.906L482.564 214.819H446.653L448.371 212.974L465.474 194.619L467.687 192.249L471.274 188.397L482.485 151.525L495.698 108.069C495.698 108.069 501.051 106.204 506.277 107.971C509.024 108.898 511.742 110.831 513.612 114.58C517.189 121.733 515.447 142.193 513.838 155.323Z" fill="#FAE84E"/>
|
|
<path d="M450.667 154.136L440.353 174.34L431.213 192.249L427.263 199.982L425.708 203.033L412.377 214.819H382.192L387.167 208.637L389.017 206.331L396.274 197.313L400.346 192.249L411.4 178.501L414.349 115.886C414.838 105.5 422.751 97.1049 433.049 95.6805C433.071 95.6774 433.092 95.674 433.111 95.6701C436.458 94.998 441.776 94.8017 445.893 98.7809C446.035 98.9133 446.173 99.0557 446.31 99.2028C447.002 99.9339 447.654 100.793 448.253 101.798C448.312 101.896 448.371 102 448.425 102.103C448.596 102.417 448.763 102.76 448.915 103.128C454.17 115.365 450.667 154.136 450.667 154.136Z" fill="#FAE84E"/>
|
|
<path d="M459.667 83.5468C472.842 83.5468 483.522 72.8663 483.522 59.6913C483.522 46.5162 472.842 35.8357 459.667 35.8357C446.492 35.8357 435.811 46.5162 435.811 59.6913C435.811 72.8663 446.492 83.5468 459.667 83.5468Z" fill="#A0616A"/>
|
|
<path d="M469.559 69.07C469.559 69.07 467.086 62.2566 465.683 58.7211C464.281 55.1856 465.196 50.5976 465.196 50.5976C465.196 50.5976 446.482 46.467 439.154 50.5611C431.826 54.6551 431.333 34.0628 438.771 28.4583C438.771 28.4583 440.763 31.9198 439.99 32.915L439.217 33.9101C439.217 33.9101 444.845 22.0075 454.349 21.4116C454.349 21.4116 458.853 25.0059 457.156 26.1923C455.458 27.3787 469.672 19.4856 472.145 26.299C472.145 26.299 481.208 27.9137 479.442 31.0093L479.591 33.1458C479.591 33.1458 487.805 32.293 487.22 38.1138C487.22 38.1138 484.457 37.5631 482.689 38.7431C480.922 39.9232 486.893 45.5185 486.893 45.5185C486.893 45.5185 490.483 68.8347 478.036 75.5478C478.036 75.5478 480.055 64.937 475.304 66.6716C470.553 68.4062 469.559 69.07 469.559 69.07Z" fill="#2F2E41"/>
|
|
<path d="M572.668 220.575H14.3323C6.42943 220.575 0 214.145 0 206.242C0 198.34 6.42943 191.91 14.3323 191.91H572.668C580.571 191.91 587 198.34 587 206.242C587 214.145 580.571 220.575 572.668 220.575Z" fill="#E6E6E6"/>
|
|
<path d="M553.626 148.224L552.54 198.88C552.435 203.784 548.43 207.704 543.525 207.704H450.341C445.552 207.704 441.598 203.961 441.337 199.179L438.567 148.523C438.285 143.358 442.398 139.014 447.571 139.014H544.61C549.666 139.014 553.734 143.17 553.626 148.224Z" fill="#3F3D56"/>
|
|
<path d="M200.712 65.1938C213.025 65.1938 223.006 55.2121 223.006 42.8991C223.006 30.5861 213.025 20.6045 200.712 20.6045C188.399 20.6045 178.417 30.5861 178.417 42.8991C178.417 55.2121 188.399 65.1938 200.712 65.1938Z" fill="#FFB6B6"/>
|
|
<path d="M163.423 101.234L165.876 127.729L182.558 194.948L168.146 199.999L143.797 126.748L140.434 97.3088L163.423 101.234Z" fill="#FFB6B6"/>
|
|
<path d="M156.787 148.224L155.701 198.88C155.596 203.784 151.591 207.704 146.686 207.704H53.5017C48.7128 207.704 44.7593 203.961 44.4979 199.179L41.7286 148.523C41.4462 143.358 45.5589 139.014 50.7324 139.014H147.772C152.827 139.014 156.895 143.17 156.787 148.224Z" fill="#3F3D56"/>
|
|
<path d="M185.214 208.047C194.938 208.047 202.821 204.56 202.821 200.259C202.821 195.958 194.938 192.471 185.214 192.471C175.49 192.471 167.607 195.958 167.607 200.259C167.607 204.56 175.49 208.047 185.214 208.047Z" fill="#FFB6B6"/>
|
|
<path d="M128.832 105.285L138.89 51.6787C138.89 51.6787 166.857 47.7535 167.838 57.0758C168.82 66.3981 167.137 111.957 167.137 111.957L128.832 105.285Z" fill="#FAE84E"/>
|
|
<path d="M191.712 46.4047C191.712 46.4047 205.503 41.4826 211.321 38.8342C217.138 36.1859 228.696 54.6579 228.953 44.9022C229.21 35.1465 225.216 31.0554 225.216 31.0554C225.216 31.0554 224.219 9.71341 202.718 12.3817C202.718 12.3817 207.447 1.70402 191.923 0.0529241C176.398 -1.59818 152.246 35.891 154.409 41.4935C156.572 47.0961 159.165 51.7279 153.028 57.7183C146.891 63.7087 135.4 97.5168 144.143 106.614C152.886 115.712 153.46 119.66 147.47 125.319C141.479 130.979 127.32 143.286 142.63 145.422C157.939 147.559 141.229 145.963 152.642 135.924C164.056 125.884 180.711 126.294 174.492 110.187C168.273 94.0795 179.077 70.9978 177.725 67.4962C176.374 63.9946 180.754 41.7593 180.754 41.7593C180.754 41.7593 190.95 40.2614 191.712 46.4047Z" fill="#2F2E41"/>
|
|
<path d="M375.102 150.326C364.093 189.926 319.371 214.027 275.21 204.151C231.068 194.278 204.195 154.167 215.209 114.569C226.212 74.9644 270.935 50.8618 315.082 60.7348C359.241 70.6077 386.111 110.723 375.102 150.326Z" fill="#F7931A"/>
|
|
<path d="M331.495 121.913C333.136 112.077 324.785 106.789 313.367 103.262L317.071 89.9377L308.028 87.9165L304.422 100.889C302.044 100.358 299.602 99.8569 297.176 99.3602L300.808 86.3018L291.77 84.2805L288.063 97.6C286.095 97.198 284.164 96.8007 282.288 96.3826L282.299 96.341L269.827 93.5482L267.421 102.211C267.421 102.211 274.131 103.59 273.989 103.675C277.652 104.495 278.314 106.669 278.203 108.392L273.984 123.571C274.237 123.629 274.564 123.712 274.924 123.842C274.623 123.775 274.301 123.701 273.969 123.629L268.055 144.893C267.607 145.891 266.471 147.387 263.911 146.819C264.001 146.937 257.337 145.348 257.337 145.348L252.848 154.632L264.616 157.263C266.806 157.755 268.951 158.27 271.063 158.755L267.321 172.232L276.354 174.253L280.06 160.92C282.528 161.52 284.923 162.075 287.267 162.597L283.574 175.868L292.617 177.889L296.359 164.438C311.78 167.055 323.376 165.999 328.257 153.491C332.19 143.419 328.061 137.609 319.948 133.821C325.857 132.599 330.308 129.113 331.495 121.913ZM310.832 147.898C308.038 157.97 289.129 152.525 282.999 151.16L287.965 133.306C294.095 134.678 313.753 137.394 310.832 147.898ZM313.63 121.767C311.08 130.929 295.342 126.274 290.237 125.133L294.739 108.94C299.844 110.081 316.285 112.211 313.63 121.767Z" fill="white"/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_5_117">
|
|
<rect width="587" height="220.575" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
);
|
|
|
|
const CustomDiv = styled.div`
|
|
background-color: ${(props) => props.theme.palette.primary.light};
|
|
height: 140vh;
|
|
width: 100%
|
|
`;
|
|
|
|
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 GraphPage = () => {
|
|
const [selectedDate, setSelectedDate] = useState(dayjs("01/01/2014"));
|
|
|
|
const json = CSVtoJSON(bitcoinCSV);
|
|
const data = selectPriceDates(selectedDate, json);
|
|
|
|
|
|
return (
|
|
<CustomDiv>
|
|
<Container>
|
|
<Box sx={{display: "flex", justifyContent: "center"}}>
|
|
<Typography marginTop={10} variant='h3'>How Much Would You Have Made?</Typography>
|
|
</Box>
|
|
<Grid container spacing={10}>
|
|
<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 value={selectedDate} onChange={(date) => {setSelectedDate(date)}}/>
|
|
</Box>
|
|
<Box>
|
|
<Typography align="center" variant="body1">amount</Typography>
|
|
<TextField />
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{display: "flex", justifyContent: "center"}}>
|
|
{BTCWorkers}
|
|
</Box>
|
|
</Grid>
|
|
<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="price" stroke="#8884d8" />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
</LineChart>
|
|
</Box>
|
|
</Card>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</CustomDiv>
|
|
)
|
|
}
|
|
|
|
export default GraphPage
|