Resolved some comments on the reports

6 files changed, 37 insertions, 97 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 702a7e50..63d8efec 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -22,12 +22,7 @@ import PeopleIcon from '@material-ui/icons/People';
 import StorageIcon from '@material-ui/icons/Storage';
 import PersonIcon from '@material-ui/icons/Person';
 import NotificationsIcon from '@material-ui/icons/Notifications';
-import TimelineIcon from '@material-ui/icons/Timeline';
-import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
-import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
-import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import DescriptionIcon from '@material-ui/icons/Description';
 import FolderIcon from '@material-ui/icons/Folder';
 import ReplayIcon from '@material-ui/icons/Replay';
 import BuildIcon from '@material-ui/icons/Build';
@@ -104,50 +99,12 @@ const MainToolbar = () => {
               </ListItemIcon>
               <ListItemText primary={t('reportReplay')} />
             </ListItem>
-          </List>
-          <Divider />
-          <List
-            subheader={
-              <ListSubheader>
-                {t('reportTitle')}
-              </ListSubheader>
-            }>
             <ListItem button onClick={() => history.push('/reports/route')}>
               <ListItemIcon>
-                <TimelineIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportRoute')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/event')}>
-              <ListItemIcon>
-                <NotificationsActiveIcon />
+                <DescriptionIcon />
               </ListItemIcon>
-              <ListItemText primary={t('reportEvents')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/trip')}>
-              <ListItemIcon>
-                <PlayCircleFilledIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportTrips')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/stop')}>
-              <ListItemIcon>
-                <PauseCircleFilledIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportStops')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/summary')}>
-              <ListItemIcon>
-                <FormatListBulletedIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportSummary')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/chart')}>
-              <ListItemIcon>
-                <TrendingUpIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportChart')} />
-            </ListItem>
+              <ListItemText primary={t('reportTitle')} />
+            </ListItem>            
           </List>
           <Divider />
           <List
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
index 93c01a06..674db3a4 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -1,16 +1,9 @@
 import React from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
-
+import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import t from '../../common/localization';
 
-const useStyles = makeStyles(theme => ({
-  menuButton: {
-  }
-}));
-const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => {
-  
-  const classes = useStyles();
+const ReportNavbar = ({ openDrawer, setOpenDrawer }) => {
 
   return (
     <AppBar position="fixed" color="inherit">
@@ -19,12 +12,11 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => {
           color="inherit"
           aria-label="open drawer"
           edge="start"
-          onClick={() => setOpenDrawer(!openDrawer)}
-          className={classes.menuButton}>
+          onClick={() => setOpenDrawer(!openDrawer)}>
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          {t('reportTitle')} / {reportName}
+          {t('reportTitle')}
         </Typography>        
       </Toolbar>
     </AppBar> 
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
index e42c36ee..a71ac4b1 100644
--- a/modern/src/components/reports/ReportSidebar.js
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core';
+import { Link, useLocation } from 'react-router-dom';
 
-const ReportNavbar = ({ routes, setReportName }) => {
+const ReportNavbar = ({ routes }) => {
 
   const location = useLocation();
 
@@ -15,8 +15,7 @@ const ReportNavbar = ({ routes, setReportName }) => {
           key={`${route}${index}`}
           button
           to={route.href}
-          selected={route.href === location.pathname}
-          onClick={() =>  setReportName(route.name)}>
+          selected={route.href === location.pathname}>
           <ListItemIcon>
             {route.icon}
           </ListItemIcon>
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index c75c9b71..0a5c8e18 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -61,15 +61,13 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <>
-      <ReportLayoutPage filter={ 
-        <Filter setItems={setItems}>
-          <ChartType type={type} setType={setType} />
-        </Filter>
-      }>
-        <Graph items={items} type={type} />
-      </ReportLayoutPage>
-    </>
+    <ReportLayoutPage filter={ 
+      <Filter setItems={setItems}>
+        <ChartType type={type} setType={setType} />
+      </Filter>
+    }>
+      <Graph items={items} type={type} />
+    </ReportLayoutPage>
   )
 }
 
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js
index af54e10e..b785e06f 100644
--- a/modern/src/reports/Graph.js
+++ b/modern/src/reports/Graph.js
@@ -3,6 +3,10 @@ import { Box, Paper } from '@material-ui/core';
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const CustomizedAxisTick = ({ x, y, payload }) =>{
+  console.log('inside customized tick ', payload.value)
+  if(!payload.value) {
+    return payload.value;
+  }
   const parts = payload.value.split(' ');
   return (
     <g transform={`translate(${x},${y})`}>
@@ -15,20 +19,16 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{
 const Graph = ({ type, items }) => {
 
   return (
-    <Paper>
-      <Box height={400}>
-        <ResponsiveContainer>
-          <LineChart data={items}>
-            <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
-            <YAxis />
-            <CartesianGrid strokeDasharray="3 3" />
-            <Tooltip />
-            <Legend />
-            <Line type="natural" dataKey={type} />
-          </LineChart>
-        </ResponsiveContainer>
-      </Box>
-    </Paper>
+    <ResponsiveContainer height={400} width={500}>
+      <LineChart data={items}>
+        <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
+        <YAxis />
+        <CartesianGrid strokeDasharray="3 3" />
+        <Tooltip />
+        <Legend />
+        <Line type="natural" dataKey={type} />
+      </LineChart>
+    </ResponsiveContainer>
   );
 }
 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 23ac6d71..ed7fe544 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Grid, Box, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
 import TimelineIcon from '@material-ui/icons/Timeline';
 import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
@@ -10,9 +11,6 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 import ReportSidebar from '../components/reports/ReportSidebar'
 import ReportNavbar from '../components/reports/ReportNavbar'
-
-import { Link, useHistory, useLocation } from 'react-router-dom';
-
 import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
@@ -60,7 +58,7 @@ const routes = [
   { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
 ];
 
-const ReportLayoutPage = ({ children, filter }) => {
+const ReportLayoutPage = ({ children, filter, }) => {
   const classes = useStyles();
   const history = useHistory();
   const [openDrawer, setOpenDrawer] = useState(false);
@@ -102,11 +100,7 @@ const ReportLayoutPage = ({ children, filter }) => {
         <div className={classes.toolbar} />
         <Grid container direction="column" spacing={2}>
           <Grid item>{filter}</Grid>
-          <Grid item>
-              <Box sx={{ minWidth: 1050 }}>
-                {children}
-              </Box>
-          </Grid>
+          <Grid item>{children}</Grid>
         </Grid>
       </div>      
     </div>