bbgo_origin/frontend/components/TradingVolumePanel.js

73 lines
2.0 KiB
JavaScript
Raw Normal View History

2022-06-12 15:11:42 +00:00
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
2022-06-11 00:57:54 +00:00
import React from 'react';
import TradingVolumeBar from './TradingVolumeBar';
2022-06-12 15:19:39 +00:00
import { makeStyles } from '@mui/styles';
2022-06-12 15:11:42 +00:00
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
2021-01-28 10:51:35 +00:00
const useStyles = makeStyles((theme) => ({
2022-06-11 00:57:54 +00:00
tradingVolumeBarBox: {
height: 400,
},
paper: {
margin: theme.spacing(2),
padding: theme.spacing(2),
},
2021-01-28 10:51:35 +00:00
}));
export default function TradingVolumePanel() {
2022-06-11 00:57:54 +00:00
const [period, setPeriod] = React.useState('day');
const [segment, setSegment] = React.useState('exchange');
const classes = useStyles();
const handlePeriodChange = (event, newValue) => {
setPeriod(newValue);
};
2021-01-28 10:51:35 +00:00
2022-06-11 00:57:54 +00:00
const handleSegmentChange = (event, newValue) => {
setSegment(newValue);
};
2021-01-28 10:51:35 +00:00
2022-06-11 00:57:54 +00:00
return (
<Paper className={classes.paper}>
<Typography variant="h4" gutterBottom>
Trading Volume
</Typography>
2021-01-29 04:55:11 +00:00
2022-06-11 00:57:54 +00:00
<Grid container spacing={0}>
<Grid item xs={12} md={6}>
<Tabs
value={period}
onChange={handlePeriodChange}
indicatorColor="primary"
textColor="primary"
>
<Tab label="Day" value={'day'} />
<Tab label="Month" value={'month'} />
<Tab label="Year" value={'year'} />
</Tabs>
2021-01-28 10:51:35 +00:00
</Grid>
2022-06-11 00:57:54 +00:00
<Grid item xs={12} md={6}>
<Grid container justifyContent={'flex-end'}>
<Tabs
value={segment}
onChange={handleSegmentChange}
indicatorColor="primary"
textColor="primary"
>
<Tab label="By Exchange" value={'exchange'} />
<Tab label="By Symbol" value={'symbol'} />
</Tabs>
</Grid>
</Grid>
</Grid>
2021-01-28 10:51:35 +00:00
2022-06-11 00:57:54 +00:00
<Box className={classes.tradingVolumeBarBox}>
<TradingVolumeBar period={period} segment={segment} />
</Box>
</Paper>
);
2021-01-28 10:51:35 +00:00
}