franpcode/Crypto-Prices
1
0
Fork 0
mirror of https://github.com/FranP-code/Crypto-Prices.git synced 2025-10-12 23:53:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Line points switch done

Browse Source
This commit is contained in:
Francisco Pessano
2022-02-03 20:29:37 -03:00
parent 72e3a0608f
commit 32fc8ba64a
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.jsx
View File

@@ -20,9 +20,6 @@ function App() {
background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%, rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% ); background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%, rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );
` `
const setLoadingURL = () => {}
const loadingURL = () => {}
return ( return (
<GlobalStyles> <GlobalStyles>

23
src/components/Crypto/Crypto.jsx
View File

@@ -5,7 +5,7 @@ import {useParams} from 'react-router-dom'
import { Chart as ChartJS } from 'chart.js/auto' import { Chart as ChartJS } from 'chart.js/auto'
import { Chart, Line } from 'react-chartjs-2' //WTF https://stackoverflow.com/questions/67727603/error-category-is-not-a-registered-scale import { Chart, Line } from 'react-chartjs-2' //WTF https://stackoverflow.com/questions/67727603/error-category-is-not-a-registered-scale
import { Grid, Button, capitalize } from '@mui/material'; import { Grid, Button, capitalize, Switch, FormControlLabel } from '@mui/material';
import styled from 'styled-components'; import styled from 'styled-components';
import CryptoPricesModule from './CryptoPricesModule'; import CryptoPricesModule from './CryptoPricesModule';
import CryptoButtonModule from './CryptoButtonModule'; import CryptoButtonModule from './CryptoButtonModule';
@@ -113,6 +113,8 @@ const Crypto = () => {
const [lineDatesInterval, setLineDatesInterval] = useState('week') const [lineDatesInterval, setLineDatesInterval] = useState('week')
const [linePoints, setLinePoints] = useState(true)
const getCryptoData = async () => { const getCryptoData = async () => {
try { try {
@@ -290,7 +292,8 @@ const Crypto = () => {
datasets: [ datasets: [
{ {
data: cryptoPrices[lineDatesInterval], data: cryptoPrices[lineDatesInterval],
borderColor: "#fff" borderColor: "#fff",
pointRadius: (linePoints ? 4 : 0),
} }
] ]
}} }}
@@ -333,7 +336,7 @@ const Crypto = () => {
className='line' className='line'
/> />
<Box <Box
sx={{display: 'flex', justifyContent: "space-around", padding: {md: "1.5vh 13vw", xs: "1vh 13vw 5vh 13vw"}}} sx={{display: 'flex', justifyContent: "space-around", padding: {md: "1.5vh 4vw", xs: "1vh 13vw 5vh 13vw"}}}
> >
{ {
[ [
@@ -352,6 +355,20 @@ const Crypto = () => {
/> />
)) ))
} }
<FormControlLabel
control={
<Switch
checked={linePoints}
defaultChecked={true}
onChange={() => {
setLinePoints(!linePoints)}}
color="secondary"
/>
}
label="Line Points"
sx={{color: "#fff"}}
/>
</Box> </Box>
</Grid> </Grid>
</CryptoStyles> </CryptoStyles>