Resolved some comments on the reports

3 files changed, 25 insertions, 33 deletions

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index c75c9b7..0a5c8e1 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 af54e10..b785e06 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 23ac6d7..ed7fe54 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>