Finalizing reports implemetations

9 files changed, 79 insertions, 52 deletions

diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
index a71ac4b1..2d4c47c1 100644
--- a/modern/src/components/reports/ReportSidebar.js
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -7,7 +7,7 @@ const ReportNavbar = ({ routes }) => {
   const location = useLocation();
 
   return (
-    <List disablePadding>
+    <List disablePadding style={{paddingTop: '16px'}}>
       {routes.map((route, index) => (
         <ListItem
           disableRipple
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index b20984f8..8b217694 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
+import { useSelector } from 'react-redux';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { prefixString } from '../common/stringUtils';
-import { useSelector } from 'react-redux';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -61,6 +62,7 @@ const Filter = ({ setItems }) => {
 
 const EventReportPage = () => {
 
+  const theme = useTheme();
   const geofences = useSelector(state => state.geofences.items);
   const [items, setItems] = useState([]);
 
@@ -76,24 +78,24 @@ const EventReportPage = () => {
     headerName: t('positionFixTime'),
     field: 'serverTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('sharedType'),
     field: 'type',
     type: 'string',
-    flex:1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => t(prefixString('event', value)),
   }, {
     headerName: t('sharedGeofence'),
     field: 'geofenceId',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatGeofence(value),
   }, {
     headerName: t('sharedMaintenance'),
     field: 'maintenanceId',
     type: 'number',
-    flex: 1
+    width: theme.dimensions.stringColumnWidth,
   }];
 
   return (
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js
index b785e06f..990eb5d5 100644
--- a/modern/src/reports/Graph.js
+++ b/modern/src/reports/Graph.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import { Box, Paper } from '@material-ui/core';
+import { withWidth } 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;
   }
@@ -19,7 +18,7 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{
 const Graph = ({ type, items }) => {
 
   return (
-    <ResponsiveContainer height={400} width={500}>
+    <ResponsiveContainer height={400} width="100%" debounce={1}>
       <LineChart data={items}>
         <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
         <YAxis />
@@ -32,4 +31,4 @@ const Graph = ({ type, items }) => {
   );
 }
 
-export default Graph;
+export default withWidth()(Graph);
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 0e5ab695..c7835e7f 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,11 +1,22 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 import t from '../common/localization';
 
+const useStyles = makeStyles(theme => ({
+  gridContainer: {
+    margin: theme.spacing(0, -1),
+    '& > .MuiGrid-item': {
+      padding: theme.spacing(1.5, 1)
+    }
+  } 
+}));
+
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
 
+  const classes = useStyles();
+
   const devices = useSelector(state => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
@@ -57,7 +68,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   }
 
   return (
-    <Grid container spacing={3}>
+    <Grid container spacing={2} className={classes.gridContainer}>
       <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
         <FormControl variant="filled" fullWidth>
           <InputLabel>{t('reportDevice')}</InputLabel>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 02d41a2e..6befa479 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
+import { Paper } from '@material-ui/core';
 import { DataGrid } from '@material-ui/data-grid';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference, usePreference } from '../common/preferences';
-import { Paper } from '@material-ui/core';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -31,41 +32,42 @@ const RouteReportPage = () => {
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const coordinateFormat = usePreference('coordinateFormat');
+  const theme = useTheme();
 
   const columns = [{
     headerName: t('positionFixTime'),
     field: 'fixTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('positionLatitude'),
     field: 'latitude',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat),
   }, {
     headerName: t('positionLongitude'),
     field: 'longitude',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat),
   }, {
     headerName: t('positionSpeed'),
     field: 'speed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
   }, {
     headerName: t('positionIgnition'),
     field: 'ignition',
     type: 'boolean',
-    flex: 1,
+    width: theme.dimensions.booleanColumnWidth,
     valueGetter: ({ row }) => row.attributes.ignition,
     valueFormatter: ({ value }) => formatBoolean(value),
   }, {
@@ -73,7 +75,7 @@ const RouteReportPage = () => {
     field: 'totalDistance',
     type: 'number',
     hide: true,
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueGetter: ({ row }) => row.attributes.totalDistance,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }]
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 78731510..d572742f 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -28,6 +29,8 @@ const Filter = ({ setItems }) => {
 
 const StopReportPage = () => {
 
+  const theme = useTheme();
+
   const distanceUnit = useAttributePreference('distanceUnit');
   const volumeUnit = useAttributePreference('volumeUnit');
 
@@ -37,43 +40,43 @@ const StopReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value), 
   }, {
     headerName: t('positionOdometer'),
     field: 'startOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
     hide: true,
-    flex: 1,    
+    width: theme.dimensions.stringColumnWidth,    
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),    
   }]
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index f63f50b5..a2392f2f 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -39,6 +40,8 @@ const Filter = ({ setItems }) => {
 
 const SummaryReportPage = () => {
 
+  const theme = useTheme();
+
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const volumeUnit = useAttributePreference('volumeUnit');
@@ -49,49 +52,49 @@ const SummaryReportPage = () => {
     headerName: t('reportStartDate'),
     field: 'startTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'),
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),                
   }]
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 45a7786c..ab5f449f 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -27,6 +28,8 @@ const Filter = ({ setItems }) => {
 }
 
 const TripReportPage = () => {
+
+  const theme = useTheme();
   
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
@@ -38,74 +41,74 @@ const TripReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartAddress'),
     field: 'startAddress',
     type: 'string',
     hide: true,
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndAddress'),
     field: 'endAddress',
     type: 'string',
     hide: true,
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
   }, {
     headerName: t('sharedDriver'),
     field: 'driverName',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     hide: true                                        
   }]
 
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index 16e6aad7..ebb393b0 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -5,4 +5,8 @@ export default {
   tabletSidebarWidth: '52px',
   desktopDrawerWidth: '360px',
   tabletDrawerWidth: '320px',
+  dateColumnWidth: 160,
+  numberColumnWidth: 130,
+  stringColumnWidth: 160,
+  booleanColumnWidth: 130
 };