Skip to content

Commit

Permalink
Merge pull request #1010 from hackforla/feat-integrate-dashboards
Browse files Browse the repository at this point in the history
Integrate Dash reports into the app
  • Loading branch information
adamkendis authored Mar 11, 2021
2 parents c938cf7 + 2bd4e6f commit c9bcfab
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 8 deletions.
8 changes: 3 additions & 5 deletions client/Routes.jsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import React from 'react';
import {
Switch,
Route,
Redirect,
} from 'react-router-dom';
import { Switch, Route, Redirect } from 'react-router-dom';
import Desktop from '@components/main/Desktop';
import Reports from '@components/main/Reports';

export default function Routes() {
return (
<Switch>
<Route path="/map" component={Desktop} />
<Route path="/reports" component={Reports} />
<Route path="/">
<Redirect to="map" />
</Route>
Expand Down
65 changes: 62 additions & 3 deletions client/components/Header.jsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
import React from 'react';
// import { NavLink } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import {
AppBar,
Button,
Toolbar,
Typography,
Menu,
MenuItem,
} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
MuiMenuItemButton: {
color: 'white',
},
appBar: {
height: theme.header.height,
backgroundColor: theme.palette.primary.main,
},
button: {
textTransform: 'none',
fontFamily: 'Roboto',
marginLeft: theme.spacing(2),
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
color: 'white',
textDecoration: 'none',
},
title: {
...theme.typography.h1,
Expand All @@ -30,14 +38,65 @@ const useStyles = makeStyles(theme => ({
// TODO: links/routing, mobile
const Header = () => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);

const handleClick = event => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

return (
<AppBar position="static" className={classes.appBar}>
<Toolbar>
<Typography variant="h1" className={classes.title}>
311DATA
</Typography>
<Button className={classes.button}>Explore 311 Data</Button>
<Button
id="report-anchor"
onClick={handleClick}
className={classes.button}
>
Reports
</Button>
<Menu
id="report-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
<Link to="/reports/dashboards/overview">
<MenuItem onClick={handleClose} button className={classes.button}>
Overview
</MenuItem>
</Link>
<Link to="/reports/dashboards/recent">
<MenuItem onClick={handleClose} button className={classes.button}>
Recent
</MenuItem>
</Link>
<Link to="/reports/dashboards/neighborhood">
<MenuItem onClick={handleClose} button className={classes.button}>
Neighborhood
</MenuItem>
</Link>
<Link to="/reports/dashboards/neighborhood_recent">
<MenuItem onClick={handleClose} button className={classes.button}>
Neighborhood Recent
</MenuItem>
</Link>
</Menu>
<Link to="/map">
<Button className={classes.button}>Explore 311 Data</Button>
</Link>
<Button className={classes.button}>About 311 Data</Button>
<Button className={classes.button}>Contact Us</Button>
<Button className={classes.button}>Help Center</Button>
Expand Down
66 changes: 66 additions & 0 deletions client/components/main/Reports.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from 'react';
import { useLocation } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import { Backdrop, CircularProgress } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
root: {
height: `calc(100vh - ${theme.header.height} - ${theme.footer.height})`,
width: '100vw',
backgroundColor: 'black',
},
backdrop: {
position: 'absolute',
top: theme.header.height,
bottom: theme.footer.height,
height: `calc(100vh - ${theme.header.height} - ${theme.footer.height})`,
},
}));

const Reports = () => {
const [isLoading, setIsLoading] = React.useState(true);
const classes = useStyles();

const url = process.env.REPORT_URL;
let reportPath = '/dashboards/overview';
const location = useLocation();
reportPath = location.pathname.slice(8);
const reportRef = React.useRef(reportPath);

/* eslint-disable consistent-return */
React.useEffect(() => {
if (reportPath !== reportRef.current) {
setIsLoading(true);
}

if (isLoading) {
const timer = setTimeout(() => setIsLoading(false), 2000);
return () => clearTimeout(timer);
}
reportRef.current = reportPath;
}, [reportPath, isLoading]);

return (
<div
className={classes.root}
>
<Backdrop
className={classes.backdrop}
style={{ zIndex: 100 }}
open={isLoading}
invisible={!isLoading}
>
<CircularProgress />
</Backdrop>
<iframe
title="reportFrame"
src={url + reportPath}
frameBorder="0"
allowFullScreen
style={{ width: '100%', height: '100%', minHeight: '55em' }}
/>
</div>
);
};

export default Reports;

0 comments on commit c9bcfab

Please sign in to comment.