Merge remote-tracking branch 'origin/master' into resource-overview
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Overview from "./overview/overview";
|
||||
import SelectResource from './selectResource'
|
||||
import {
|
||||
Route,
|
||||
} from "react-router-dom";
|
||||
@@ -20,7 +19,7 @@ export default function Content() {
|
||||
return (
|
||||
|
||||
<div className={classes.root}>
|
||||
<Route exact path="/" component={SelectResource} />
|
||||
<Route path="/overview" component={Overview} />
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
210
frontend/src/components/navigation.js
Normal file
210
frontend/src/components/navigation.js
Normal file
@@ -0,0 +1,210 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { makeStyles, useTheme, fade } from '@material-ui/core/styles';
|
||||
import Drawer from '@material-ui/core/Drawer';
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import List from '@material-ui/core/List';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
|
||||
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import Footer from "./footer";
|
||||
import Content from "./content"
|
||||
import Link1 from '@material-ui/core/Link';
|
||||
import { Link } from "react-router-dom";
|
||||
import SearchIcon from '@material-ui/icons/Search';
|
||||
import InputBase from '@material-ui/core/InputBase';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
appBar: {
|
||||
transition: theme.transitions.create(['margin', 'width'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
},
|
||||
appBarShift: {
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
marginLeft: drawerWidth,
|
||||
transition: theme.transitions.create(['margin', 'width'], {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
menuButton: {
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
hide: {
|
||||
display: 'none',
|
||||
},
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
},
|
||||
drawerPaper: {
|
||||
width: drawerWidth,
|
||||
},
|
||||
drawerHeader: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
padding: 0,
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
marginLeft: -drawerWidth,
|
||||
},
|
||||
contentShift: {
|
||||
transition: theme.transitions.create('margin', {
|
||||
easing: theme.transitions.easing.easeOut,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
marginLeft: 0,
|
||||
},
|
||||
search: {
|
||||
position: 'relative',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: fade(theme.palette.common.white, 0.15),
|
||||
'&:hover': {
|
||||
backgroundColor: fade(theme.palette.common.white, 0.25),
|
||||
},
|
||||
marginLeft: 0,
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
marginLeft: theme.spacing(1),
|
||||
width: 'auto',
|
||||
},
|
||||
},
|
||||
searchIcon: {
|
||||
padding: theme.spacing(0, 2),
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
inputRoot: {
|
||||
color: 'inherit',
|
||||
},
|
||||
inputInput: {
|
||||
padding: theme.spacing(1, 1, 1, 0),
|
||||
// vertical padding + font size from searchIcon
|
||||
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
|
||||
transition: theme.transitions.create('width'),
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: '12ch',
|
||||
'&:focus': {
|
||||
width: '20ch',
|
||||
},
|
||||
},
|
||||
},
|
||||
grow: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Navigation() {
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
function ListItemLink(props) {
|
||||
return <ListItem button component={Link1} {...props} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<CssBaseline />
|
||||
<AppBar
|
||||
position="fixed"
|
||||
className={clsx(classes.appBar, {
|
||||
[classes.appBarShift]: open,
|
||||
})}
|
||||
>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={handleDrawerOpen}
|
||||
edge="start"
|
||||
className={clsx(classes.menuButton, open && classes.hide)}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Link1 href="/" className="logo">Sim Companies Dashboard</Link1>
|
||||
<div className={classes.grow} />
|
||||
<div className={classes.search}>
|
||||
<div className={classes.searchIcon}>
|
||||
<SearchIcon />
|
||||
</div>
|
||||
<InputBase
|
||||
placeholder="Search…"
|
||||
classes={{
|
||||
root: classes.inputRoot,
|
||||
input: classes.inputInput,
|
||||
}}
|
||||
inputProps={{ 'aria-label': 'search' }}
|
||||
/>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer
|
||||
className={classes.drawer}
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={open}
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
>
|
||||
<div className={classes.drawerHeader}>
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<List>
|
||||
{['Overview'].map((text, index) => (
|
||||
<ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
|
||||
<ListItemText primary={text} />
|
||||
</ListItemLink>
|
||||
))}
|
||||
</List>
|
||||
</Drawer>
|
||||
<main className={clsx(classes.content, {
|
||||
[classes.contentShift]: open,
|
||||
})}>
|
||||
<div className={classes.drawerHeader} />
|
||||
<Content></Content>
|
||||
<Footer></Footer>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,7 +9,7 @@ const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Content() {
|
||||
export default function Overview() {
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
|
||||
41
frontend/src/components/resourcechart/resourcechart.js
Normal file
41
frontend/src/components/resourcechart/resourcechart.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
|
||||
} from 'recharts';
|
||||
|
||||
export default function (day, kind) {
|
||||
|
||||
const [data, setData] = React.useState(null);
|
||||
|
||||
const loadData = async () => {
|
||||
let nextData = await fetch(`/API/day?date=${day}&kind=${kind}`);
|
||||
nextData = await nextData.json();
|
||||
for (let i = 0; i < nextData.length; i++) {
|
||||
nextData[i]["time"] = new Date(nextData[i]["time"]);
|
||||
nextData[i]["time"] = nextData[i]["time"].toLocaleTimeString();
|
||||
}
|
||||
setData(nextData)
|
||||
}
|
||||
|
||||
if (data === null) {
|
||||
loadData();
|
||||
}
|
||||
|
||||
return (
|
||||
<LineChart
|
||||
width={900}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5, right: 30, left: 20, bottom: 5,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="time" interval="2" />
|
||||
<YAxis domain={['datamin', 'datamax']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="price" stroke="#8884d8" dot={false} />
|
||||
</LineChart>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user