aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--modern/src/components/reports/ReportSidebar.js2
-rw-r--r--modern/src/reports/EventReportPage.js14
-rw-r--r--modern/src/reports/Graph.js7
-rw-r--r--modern/src/reports/ReportFilter.js15
-rw-r--r--modern/src/reports/RouteReportPage.js20
-rw-r--r--modern/src/reports/StopReportPage.js19
-rw-r--r--modern/src/reports/SummaryReportPage.js21
-rw-r--r--modern/src/reports/TripReportPage.js29
-rw-r--r--modern/src/theme/dimensions.js4
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
};
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-24 13:17:44 +0000