From df01e1d751980843506946a194fa9f67489182b1 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Fri, 20 Nov 2020 13:56:14 +0530
Subject: Implementing chart report initial structure

---
 modern/package.json                   |  1 +
 modern/src/App.js                     |  2 +
 modern/src/MainToolbar.js             |  2 +-
 modern/src/common/formatter.js        |  2 +-
 modern/src/reports/ChartReportPage.js | 74 +++++++++++++++++++++++++++++++++++
 modern/src/reports/ChartType.js       | 53 +++++++++++++++++++++++++
 6 files changed, 132 insertions(+), 2 deletions(-)
 create mode 100644 modern/src/reports/ChartReportPage.js
 create mode 100644 modern/src/reports/ChartType.js

diff --git a/modern/package.json b/modern/package.json
index e5438b53..2c30c9fd 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -20,6 +20,7 @@
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
+    "recharts": "^1.8.5",
     "redux": "^4.0.5",
     "typeface-roboto": "0.0.75",
     "wellknown": "^0.5.0"
diff --git a/modern/src/App.js b/modern/src/App.js
index 8a308c17..83fd9315 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -21,6 +21,7 @@ import { LinearProgress } from '@material-ui/core';
 import TripReportPage from './reports/TripReportPage';
 import StopReportPage from './reports/StopReportPage';
 import SummaryReportPage from './reports/SummaryReportPage';
+import ChartReportPage from './reports/ChartReportPage';
 
 const App = () => {
   const initialized = useSelector(state => !!state.session.server && !!state.session.user);
@@ -50,6 +51,7 @@ const App = () => {
               <Route exact path='/reports/trip' component={TripReportPage} />
               <Route exact path='/reports/stop' component={StopReportPage} />
               <Route exact path='/reports/summary' component={SummaryReportPage} />
+              <Route exact path='/reports/chart' component={ChartReportPage} />
             </Switch>
           )}
         </Route>
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 5b94b147..930e66a0 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -141,7 +141,7 @@ const MainToolbar = () => {
               </ListItemIcon>
               <ListItemText primary={t('reportSummary')} />
             </ListItem>
-            <ListItem button disabled>
+            <ListItem button onClick={() => history.push('/reports/chart')}>
               <ListItemIcon>
                 <TrendingUpIcon />
               </ListItemIcon>
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index e41e591e..8ef00400 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -9,7 +9,7 @@ export const formatPosition = (value, key) => {
     case 'fixTime':
     case 'deviceTime':
     case 'serverTime':
-      return moment(value).format('LLL');
+      return moment(value).format('YYYY-MM-DD HH:mm');
     case 'latitude':
     case 'longitude':
       return value.toFixed(5);
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
new file mode 100644
index 00000000..68989331
--- /dev/null
+++ b/modern/src/reports/ChartReportPage.js
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Card, CardHeader, CardContent } from '@material-ui/core';
+import { Box, Divider } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import ReportFilter from './ReportFilter';
+import ReportLayoutPage from './ReportLayoutPage';
+import ChartType from './ChartType';
+
+import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const useStyles = makeStyles((theme) => ({
+  formControl: {
+    minWidth: 160,
+  },
+}));
+
+const ReportFilterForm = ({ setItems }) => {
+
+  const handleSubmit = async (deviceId, from, to, mail, headers) => {
+    const query = new URLSearchParams({ deviceId, from, to, mail });
+    const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
+    if (response.ok) {
+      const contentType = response.headers.get('content-type');
+      if (contentType) {
+        if (contentType === 'application/json') {
+          setItems(await response.json());
+        } else {
+          window.location.assign(window.URL.createObjectURL(await response.blob()));
+        }
+      }
+    }
+  };
+
+  return <ReportFilter handleSubmit={handleSubmit} showOnly />;
+};
+
+const CustomizedAxisTick = ({ x, y, stroke, payload }) =>{
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{payload.value}</text>
+    </g>
+  );
+}
+
+const ChartReportPage = () => {
+
+  const [items, setItems] = useState([]);
+  const [type, setType] = useState('speed');
+
+  return (
+    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} >
+      <Card>
+        <CardHeader action={<ChartType type={type} setType={setType}/>} />
+        <Divider />
+        <CardContent>
+          <Box height={400} position="relative">
+            <ResponsiveContainer>
+              <LineChart data={items}>
+                <XAxis dataKey="fixTime" interval="preserveStartEnd" height={60} tick={<CustomizedAxisTick/>} />
+                <YAxis />
+                <CartesianGrid strokeDasharray="3 3" />
+                <Tooltip />
+                <Legend />
+                <Line type="monotone" dataKey={type} stroke="#8884d8" />
+              </LineChart>
+            </ResponsiveContainer>
+            </Box>
+        </CardContent>
+      </Card>
+    </ReportLayoutPage>
+  );
+}
+
+export default ChartReportPage;
diff --git a/modern/src/reports/ChartType.js b/modern/src/reports/ChartType.js
new file mode 100644
index 00000000..586ea88a
--- /dev/null
+++ b/modern/src/reports/ChartType.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import { FormControl, Select, MenuItem } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import t from '../common/localization';
+
+const useStyles = makeStyles((theme) => ({
+  formControl: {
+    minWidth: 160,
+  },
+}));
+
+const ChartType = ({ type, setType }) => {
+  const classes = useStyles();
+
+  return (
+    <FormControl className={classes.formControl}>
+      <Select value={type} onChange={e => setType(e.target.value)} >
+        <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+        <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+        <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+        <MenuItem value="index">{t('positionIndex')}</MenuItem>
+        <MenuItem value="hdop">{t('positionHdop')}</MenuItem>
+        <MenuItem value="vdop">{t('positionVdop')}</MenuItem>
+        <MenuItem value="pdop">{t('positionPdop')}</MenuItem>
+        <MenuItem value="sat">{t('positionSat')}</MenuItem>
+        <MenuItem value="satVisible">{t('positionSatVisible')}</MenuItem>
+        <MenuItem value="rssi">{t('positionRssi')}</MenuItem>
+        <MenuItem value="gps">{t('positionGps')}</MenuItem>
+        <MenuItem value="odometer">{t('positionOdometer')}</MenuItem>
+        <MenuItem value="serviceOdometer">{t('positionServiceOdometer')}</MenuItem>
+        <MenuItem value="tripOdometer">{t('positionTripOdometer')}</MenuItem>
+        <MenuItem value="hours">{t('positionHours')}</MenuItem>
+        <MenuItem value="steps">{t('positionSteps')}</MenuItem>
+        <MenuItem value="power">{t('positionPower')}</MenuItem>
+        <MenuItem value="battery">{t('positionBattery')}</MenuItem>
+        <MenuItem value="batteryLevel">{t('positionBatteryLevel')}</MenuItem>
+        <MenuItem value="fuel">{t('positionFuel')}</MenuItem>
+        <MenuItem value="fuelConsumption">{t('positionFuelConsumption')}</MenuItem>
+        <MenuItem value="distance">{t('positionDistance')}</MenuItem>
+        <MenuItem value="totalDistance">{t('deviceTotalDistance')}</MenuItem>
+        <MenuItem value="rpm">{t('positionRpm')}</MenuItem>
+        <MenuItem value="throttle">{t('positionThrottle')}</MenuItem>
+        <MenuItem value="armed">{t('positionArmed')}</MenuItem>
+        <MenuItem value="acceleration">{t('positionAcceleration')}</MenuItem>
+        <MenuItem value="deviceTemp">{t('positionDeviceTemp')}</MenuItem>
+        <MenuItem value="obdSpeed">{t('positionObdSpeed')}</MenuItem>
+        <MenuItem value="obdOdometer">{t('positionObdOdometer')}</MenuItem>
+      </Select>
+    </FormControl>
+  );
+}
+
+export default ChartType;
-- 
cgit v1.2.3


From 34ec9a62ac0b65665f15f6e80729495e2558547f Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Tue, 24 Nov 2020 14:26:26 +0530
Subject: Refactoring and Improvements in chart report

---
 modern/src/common/chartTypes.js        |  7 +++
 modern/src/common/formatter.js         | 25 +++++++++-
 modern/src/reports/ChartReportPage.js  | 90 ++++++++++++++++++----------------
 modern/src/reports/ChartType.js        | 53 --------------------
 modern/src/reports/ReportLayoutPage.js |  4 +-
 5 files changed, 81 insertions(+), 98 deletions(-)
 create mode 100644 modern/src/common/chartTypes.js
 delete mode 100644 modern/src/reports/ChartType.js

diff --git a/modern/src/common/chartTypes.js b/modern/src/common/chartTypes.js
new file mode 100644
index 00000000..fa868a96
--- /dev/null
+++ b/modern/src/common/chartTypes.js
@@ -0,0 +1,7 @@
+import t from '../common/localization';
+
+export const chartTypes = [
+  { id: 'speed', name: t('positionSpeed') },
+  { id: 'accuracy', name: t('positionAccuracy') },
+  { id: 'altitude', name: t('positionAltitude') },
+];
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 8ef00400..b2f305a0 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -9,7 +9,7 @@ export const formatPosition = (value, key) => {
     case 'fixTime':
     case 'deviceTime':
     case 'serverTime':
-      return moment(value).format('YYYY-MM-DD HH:mm');
+      return moment(value).format('LLL');
     case 'latitude':
     case 'longitude':
       return value.toFixed(5);
@@ -80,3 +80,26 @@ export const formatVolume = (value, unit) => {
 export const formatHours = (value) => {
   return moment.duration(value).humanize();
 };
+
+const speedConverter = (value, unit) => {
+  switch (unit) {
+    case 'kmh':
+      return (value * 1.852).toFixed(2);
+    case 'mph':
+      return (value * 1.15078).toFixed(2);
+    case 'kn':
+    default:
+        return (value * 1).toFixed(2);
+  }
+};
+
+export const getConverter = (key) => {
+  switch (key) {
+    case 'speed':
+      return speedConverter;
+    default:
+      return function (value) {
+        return value;
+      }
+  }
+};
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 68989331..e37f7ca1 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,43 +1,53 @@
 import React, { useState } from 'react';
-import { Card, CardHeader, CardContent } from '@material-ui/core';
-import { Box, Divider } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Paper, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
-import ChartType from './ChartType';
+import t from '../common/localization';
+import { chartTypes } from '../common/chartTypes';
+import { useAttributePreference } from '../common/preferences';
+import { getConverter, formatDate } from '../common/formatter';
 
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    minWidth: 160,
-  },
-}));
+const ReportFilterForm = ({ setItems, setType }) => {
 
-const ReportFilterForm = ({ setItems }) => {
+  const speedUnit = useAttributePreference('speedUnit');
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({ deviceId, from, to, mail });
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
-      const contentType = response.headers.get('content-type');
-      if (contentType) {
-        if (contentType === 'application/json') {
-          setItems(await response.json());
-        } else {
-          window.location.assign(window.URL.createObjectURL(await response.blob()));
-        }
-      }
+      const data = await response.json();
+      let formattedData = data.map((obj)=>{
+        return Object.assign(obj, 
+                              {speed: getConverter('speed')(obj.speed, speedUnit)},
+                              {fixTime: formatDate(obj.fixTime)}
+                            );
+      })
+      setItems(formattedData);
     }
-  };
+  }
 
-  return <ReportFilter handleSubmit={handleSubmit} showOnly />;
+  return (
+    <ReportFilter handleSubmit={handleSubmit} showOnly >
+      <FormControl variant="filled" margin="normal" fullWidth>
+      <InputLabel>{t('reportChartType')}</InputLabel>
+      <Select defaultValue="speed" onChange={e => setType(e.target.value)}>
+      {chartTypes.map(item => (
+            <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
+          ))}
+      </Select>
+      </FormControl>
+    </ReportFilter>
+  )
 };
 
-const CustomizedAxisTick = ({ x, y, stroke, payload }) =>{
+const CustomizedAxisTick = ({ x, y, payload }) =>{
+  const parts = payload.value.split(' ');
   return (
     <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{payload.value}</text>
+      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[0]}</text>
+      <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
     </g>
   );
 }
@@ -48,27 +58,23 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} >
-      <Card>
-        <CardHeader action={<ChartType type={type} setType={setType}/>} />
-        <Divider />
-        <CardContent>
-          <Box height={400} position="relative">
-            <ResponsiveContainer>
-              <LineChart data={items}>
-                <XAxis dataKey="fixTime" interval="preserveStartEnd" height={60} tick={<CustomizedAxisTick/>} />
-                <YAxis />
-                <CartesianGrid strokeDasharray="3 3" />
-                <Tooltip />
-                <Legend />
-                <Line type="monotone" dataKey={type} stroke="#8884d8" />
-              </LineChart>
-            </ResponsiveContainer>
-            </Box>
-        </CardContent>
-      </Card>
+    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} setType={setType}>
+      <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>
     </ReportLayoutPage>
   );
-}
+};
 
 export default ChartReportPage;
diff --git a/modern/src/reports/ChartType.js b/modern/src/reports/ChartType.js
deleted file mode 100644
index 586ea88a..00000000
--- a/modern/src/reports/ChartType.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { FormControl, Select, MenuItem } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import t from '../common/localization';
-
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    minWidth: 160,
-  },
-}));
-
-const ChartType = ({ type, setType }) => {
-  const classes = useStyles();
-
-  return (
-    <FormControl className={classes.formControl}>
-      <Select value={type} onChange={e => setType(e.target.value)} >
-        <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-        <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-        <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
-        <MenuItem value="index">{t('positionIndex')}</MenuItem>
-        <MenuItem value="hdop">{t('positionHdop')}</MenuItem>
-        <MenuItem value="vdop">{t('positionVdop')}</MenuItem>
-        <MenuItem value="pdop">{t('positionPdop')}</MenuItem>
-        <MenuItem value="sat">{t('positionSat')}</MenuItem>
-        <MenuItem value="satVisible">{t('positionSatVisible')}</MenuItem>
-        <MenuItem value="rssi">{t('positionRssi')}</MenuItem>
-        <MenuItem value="gps">{t('positionGps')}</MenuItem>
-        <MenuItem value="odometer">{t('positionOdometer')}</MenuItem>
-        <MenuItem value="serviceOdometer">{t('positionServiceOdometer')}</MenuItem>
-        <MenuItem value="tripOdometer">{t('positionTripOdometer')}</MenuItem>
-        <MenuItem value="hours">{t('positionHours')}</MenuItem>
-        <MenuItem value="steps">{t('positionSteps')}</MenuItem>
-        <MenuItem value="power">{t('positionPower')}</MenuItem>
-        <MenuItem value="battery">{t('positionBattery')}</MenuItem>
-        <MenuItem value="batteryLevel">{t('positionBatteryLevel')}</MenuItem>
-        <MenuItem value="fuel">{t('positionFuel')}</MenuItem>
-        <MenuItem value="fuelConsumption">{t('positionFuelConsumption')}</MenuItem>
-        <MenuItem value="distance">{t('positionDistance')}</MenuItem>
-        <MenuItem value="totalDistance">{t('deviceTotalDistance')}</MenuItem>
-        <MenuItem value="rpm">{t('positionRpm')}</MenuItem>
-        <MenuItem value="throttle">{t('positionThrottle')}</MenuItem>
-        <MenuItem value="armed">{t('positionArmed')}</MenuItem>
-        <MenuItem value="acceleration">{t('positionAcceleration')}</MenuItem>
-        <MenuItem value="deviceTemp">{t('positionDeviceTemp')}</MenuItem>
-        <MenuItem value="obdSpeed">{t('positionObdSpeed')}</MenuItem>
-        <MenuItem value="obdOdometer">{t('positionObdOdometer')}</MenuItem>
-      </Select>
-    </FormControl>
-  );
-}
-
-export default ChartType;
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index ddc7325b..e4219bfd 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, children }) => {
+const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, setType, children }) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
@@ -27,7 +27,7 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, childre
         <Grid container spacing={2}>
           <Grid item xs={12} md={3} lg={2}>
             <Paper className={classes.form}>
-              <ReportFilterForm setItems={ setItems } />
+              <ReportFilterForm setItems={ setItems } setType={ setType }/>
             </Paper>
           </Grid>
           <Grid item xs={12} md={9} lg={10}>
-- 
cgit v1.2.3


From 032d1a787384430a5bd93a3caf7e92bb0a5fa8aa Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Wed, 25 Nov 2020 14:07:59 +0530
Subject: Improvements and minor refactoring in chart report

---
 modern/src/reports/ChartReportPage.js  | 22 +++++-----------------
 modern/src/reports/ReportLayoutPage.js | 24 +++++++++++++++++++++---
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index e37f7ca1..5aefca15 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,15 +1,12 @@
 import React, { useState } from 'react';
-import { Box, Paper, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Box, Paper } from '@material-ui/core';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
-import t from '../common/localization';
-import { chartTypes } from '../common/chartTypes';
 import { useAttributePreference } from '../common/preferences';
 import { getConverter, formatDate } from '../common/formatter';
-
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
-const ReportFilterForm = ({ setItems, setType }) => {
+const ReportFilterForm = ({ setItems }) => {
 
   const speedUnit = useAttributePreference('speedUnit');
 
@@ -20,7 +17,7 @@ const ReportFilterForm = ({ setItems, setType }) => {
       const data = await response.json();
       let formattedData = data.map((obj)=>{
         return Object.assign(obj, 
-                              {speed: getConverter('speed')(obj.speed, speedUnit)},
+                              {speed: Number(getConverter('speed')(obj.speed, speedUnit))},
                               {fixTime: formatDate(obj.fixTime)}
                             );
       })
@@ -29,16 +26,7 @@ const ReportFilterForm = ({ setItems, setType }) => {
   }
 
   return (
-    <ReportFilter handleSubmit={handleSubmit} showOnly >
-      <FormControl variant="filled" margin="normal" fullWidth>
-      <InputLabel>{t('reportChartType')}</InputLabel>
-      <Select defaultValue="speed" onChange={e => setType(e.target.value)}>
-      {chartTypes.map(item => (
-            <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
-          ))}
-      </Select>
-      </FormControl>
-    </ReportFilter>
+    <ReportFilter handleSubmit={handleSubmit} showOnly />
   )
 };
 
@@ -58,7 +46,7 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} setType={setType}>
+    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} setType={setType} showChartType>
       <Paper>
         <Box height={400}>
           <ResponsiveContainer>
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index e4219bfd..53b7039a 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,6 +1,8 @@
 import React from 'react';
-import { Grid, Paper, makeStyles } from '@material-ui/core';
+import { Grid, Paper, makeStyles, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import MainToolbar from '../MainToolbar';
+import { chartTypes } from '../common/chartTypes';
+import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -16,9 +18,13 @@ const useStyles = makeStyles(theme => ({
   form: {
     padding: theme.spacing(1, 2, 2),
   },
+  chart: {
+    padding: theme.spacing(1, 2, 2),
+    marginTop: theme.spacing(1),
+  },
 }));
 
-const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, setType, children }) => {
+const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, setType, showChartType, children }) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
@@ -27,8 +33,20 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, setType
         <Grid container spacing={2}>
           <Grid item xs={12} md={3} lg={2}>
             <Paper className={classes.form}>
-              <ReportFilterForm setItems={ setItems } setType={ setType }/>
+              <ReportFilterForm setItems={ setItems } />
             </Paper>
+            {showChartType && (
+              <Paper className={classes.chart}>
+                <FormControl variant="filled" margin="normal" fullWidth>
+                <InputLabel>{t('reportChartType')}</InputLabel>
+                <Select defaultValue="speed" onChange={e => setType(e.target.value)}>
+                {chartTypes.map(item => (
+                  <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
+                ))}
+                </Select>
+                </FormControl>
+              </Paper>
+            )}
           </Grid>
           <Grid item xs={12} md={9} lg={10}>
             {children}
-- 
cgit v1.2.3


From 9c2dbcf00b944cca546875af4f0bcab695119a40 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Fri, 27 Nov 2020 16:31:49 +0530
Subject: Chart report code improvements and refactoring

---
 modern/src/common/chartTypes.js        |  7 -------
 modern/src/common/converter.js         | 24 ++++++++++++++++++++++++
 modern/src/common/formatter.js         | 23 -----------------------
 modern/src/reports/ChartReportPage.js  | 21 +++++++++++++--------
 modern/src/reports/ReportLayoutPage.js | 11 +++++------
 5 files changed, 42 insertions(+), 44 deletions(-)
 delete mode 100644 modern/src/common/chartTypes.js
 create mode 100644 modern/src/common/converter.js

diff --git a/modern/src/common/chartTypes.js b/modern/src/common/chartTypes.js
deleted file mode 100644
index fa868a96..00000000
--- a/modern/src/common/chartTypes.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import t from '../common/localization';
-
-export const chartTypes = [
-  { id: 'speed', name: t('positionSpeed') },
-  { id: 'accuracy', name: t('positionAccuracy') },
-  { id: 'altitude', name: t('positionAltitude') },
-];
diff --git a/modern/src/common/converter.js b/modern/src/common/converter.js
new file mode 100644
index 00000000..8fdb4b86
--- /dev/null
+++ b/modern/src/common/converter.js
@@ -0,0 +1,24 @@
+const speedConverter = (value, unit) => {
+  let factor;
+  switch (unit) {
+    case 'kmh':
+      factor = 1.852;
+    case 'mph':
+      factor = 1.15078;
+    case 'kn':
+    default:
+      factor = 1;
+  }
+  return (value * factor).toFixed(2);
+};
+
+export const getConverter = (key) => {
+  switch (key) {
+    case 'speed':
+      return speedConverter;
+    default:
+      return function (value) {
+        return value;
+      }
+  }
+};
\ No newline at end of file
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index b2f305a0..e41e591e 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -80,26 +80,3 @@ export const formatVolume = (value, unit) => {
 export const formatHours = (value) => {
   return moment.duration(value).humanize();
 };
-
-const speedConverter = (value, unit) => {
-  switch (unit) {
-    case 'kmh':
-      return (value * 1.852).toFixed(2);
-    case 'mph':
-      return (value * 1.15078).toFixed(2);
-    case 'kn':
-    default:
-        return (value * 1).toFixed(2);
-  }
-};
-
-export const getConverter = (key) => {
-  switch (key) {
-    case 'speed':
-      return speedConverter;
-    default:
-      return function (value) {
-        return value;
-      }
-  }
-};
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 5aefca15..19ec9c12 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -3,7 +3,8 @@ import { Box, Paper } from '@material-ui/core';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
-import { getConverter, formatDate } from '../common/formatter';
+import { formatDate } from '../common/formatter';
+import { getConverter } from '../common/converter';
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const ReportFilterForm = ({ setItems }) => {
@@ -14,13 +15,17 @@ const ReportFilterForm = ({ setItems }) => {
     const query = new URLSearchParams({ deviceId, from, to, mail });
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
+
       const data = await response.json();
-      let formattedData = data.map((obj)=>{
-        return Object.assign(obj, 
-                              {speed: Number(getConverter('speed')(obj.speed, speedUnit))},
-                              {fixTime: formatDate(obj.fixTime)}
-                            );
-      })
+
+      let formattedData = data.map(obj => {
+        return Object.assign(
+          obj, 
+          {speed: Number(getConverter('speed')(obj.speed, speedUnit))},
+          {fixTime: formatDate(obj.fixTime)}
+        );
+      });
+      
       setItems(formattedData);
     }
   }
@@ -46,7 +51,7 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} setType={setType} showChartType>
+    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} type={type} setType={setType} showChartType>
       <Paper>
         <Box height={400}>
           <ResponsiveContainer>
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 53b7039a..51e41010 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Grid, Paper, makeStyles, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import MainToolbar from '../MainToolbar';
-import { chartTypes } from '../common/chartTypes';
 import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
@@ -24,7 +23,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, setType, showChartType, children }) => {
+const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, type, setType, showChartType, children }) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
@@ -39,10 +38,10 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, setType
               <Paper className={classes.chart}>
                 <FormControl variant="filled" margin="normal" fullWidth>
                 <InputLabel>{t('reportChartType')}</InputLabel>
-                <Select defaultValue="speed" onChange={e => setType(e.target.value)}>
-                {chartTypes.map(item => (
-                  <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
-                ))}
+                <Select value={type} onChange={e => setType(e.target.value)}>
+                  <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+                  <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+                  <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
                 </Select>
                 </FormControl>
               </Paper>
-- 
cgit v1.2.3


From 7a431062aa79ac9c9524638e60cb4b06323ea697 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 28 Nov 2020 13:23:13 +0530
Subject: Chart report code improvements and refactoring

---
 modern/src/common/converter.js        | 13 +------------
 modern/src/reports/ChartReportPage.js | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/modern/src/common/converter.js b/modern/src/common/converter.js
index 8fdb4b86..e48b0760 100644
--- a/modern/src/common/converter.js
+++ b/modern/src/common/converter.js
@@ -1,4 +1,4 @@
-const speedConverter = (value, unit) => {
+export const speedConverter = (value, unit) => {
   let factor;
   switch (unit) {
     case 'kmh':
@@ -11,14 +11,3 @@ const speedConverter = (value, unit) => {
   }
   return (value * factor).toFixed(2);
 };
-
-export const getConverter = (key) => {
-  switch (key) {
-    case 'speed':
-      return speedConverter;
-    default:
-      return function (value) {
-        return value;
-      }
-  }
-};
\ No newline at end of file
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 19ec9c12..21c069ca 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -4,7 +4,7 @@ import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
 import { formatDate } from '../common/formatter';
-import { getConverter } from '../common/converter';
+import { speedConverter } from '../common/converter';
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const ReportFilterForm = ({ setItems }) => {
@@ -16,17 +16,18 @@ const ReportFilterForm = ({ setItems }) => {
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
 
-      const data = await response.json();
+      const positions = await response.json();
 
-      let formattedData = data.map(obj => {
-        return Object.assign(
-          obj, 
-          {speed: Number(getConverter('speed')(obj.speed, speedUnit))},
-          {fixTime: formatDate(obj.fixTime)}
-        );
+      let formattedPositions = positions.map(position => {
+        return {
+          speed:Number(speedConverter(position.speed, speedUnit)),
+          altitude:position.altitude,
+          accuracy:position.accuracy,
+          fixTime:formatDate(position.fixTime)
+        }
       });
       
-      setItems(formattedData);
+      setItems(formattedPositions);
     }
   }
 
-- 
cgit v1.2.3


From 3b066354210c22fff82f40ce3d30521d55d81533 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sun, 29 Nov 2020 19:08:26 +0530
Subject: More code formatting in chart reports

---
 modern/src/reports/ChartReportPage.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 21c069ca..10626273 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -20,10 +20,10 @@ const ReportFilterForm = ({ setItems }) => {
 
       let formattedPositions = positions.map(position => {
         return {
-          speed:Number(speedConverter(position.speed, speedUnit)),
-          altitude:position.altitude,
-          accuracy:position.accuracy,
-          fixTime:formatDate(position.fixTime)
+          speed: Number(speedConverter(position.speed, speedUnit)),
+          altitude: position.altitude,
+          accuracy: position.accuracy,
+          fixTime: formatDate(position.fixTime)
         }
       });
       
-- 
cgit v1.2.3


From b497c4fbf7caabd38b902d225ae0229b33323309 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Wed, 2 Dec 2020 11:09:08 +0530
Subject: Chart report layout refactoring

---
 modern/src/reports/ChartReportPage.js  | 19 +++++++++++++++----
 modern/src/reports/ReportLayoutPage.js | 23 +++--------------------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 10626273..841f1e73 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-import { Box, Paper } from '@material-ui/core';
+import { Box, Paper, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
 import { formatDate } from '../common/formatter';
 import { speedConverter } from '../common/converter';
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import t from '../common/localization';
 
-const ReportFilterForm = ({ setItems }) => {
+const ReportFilterForm = ({ setItems, type, setType }) => {
 
   const speedUnit = useAttributePreference('speedUnit');
 
@@ -32,7 +33,17 @@ const ReportFilterForm = ({ setItems }) => {
   }
 
   return (
-    <ReportFilter handleSubmit={handleSubmit} showOnly />
+    <React.Fragment>
+      <ReportFilter handleSubmit={handleSubmit} showOnly />
+      <FormControl variant="filled" margin="normal" fullWidth>
+      <InputLabel>{t('reportChartType')}</InputLabel>
+      <Select value={type} onChange={e => setType(e.target.value)}>
+        <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+        <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+        <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+      </Select>
+      </FormControl>
+    </React.Fragment>
   )
 };
 
@@ -52,7 +63,7 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} type={type} setType={setType} showChartType>
+    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} type={type} setType={setType}>
       <Paper>
         <Box height={400}>
           <ResponsiveContainer>
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 51e41010..67dff5a4 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Grid, Paper, makeStyles, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Grid, Paper, makeStyles } from '@material-ui/core';
 import MainToolbar from '../MainToolbar';
-import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -17,13 +16,9 @@ const useStyles = makeStyles(theme => ({
   form: {
     padding: theme.spacing(1, 2, 2),
   },
-  chart: {
-    padding: theme.spacing(1, 2, 2),
-    marginTop: theme.spacing(1),
-  },
 }));
 
-const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, type, setType, showChartType, children }) => {
+const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, type, setType, children }) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
@@ -32,20 +27,8 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, type, s
         <Grid container spacing={2}>
           <Grid item xs={12} md={3} lg={2}>
             <Paper className={classes.form}>
-              <ReportFilterForm setItems={ setItems } />
+              <ReportFilterForm setItems={ setItems } type={ type } setType={ setType }/>
             </Paper>
-            {showChartType && (
-              <Paper className={classes.chart}>
-                <FormControl variant="filled" margin="normal" fullWidth>
-                <InputLabel>{t('reportChartType')}</InputLabel>
-                <Select value={type} onChange={e => setType(e.target.value)}>
-                  <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-                  <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-                  <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
-                </Select>
-                </FormControl>
-              </Paper>
-            )}
           </Grid>
           <Grid item xs={12} md={9} lg={10}>
             {children}
-- 
cgit v1.2.3


From 63cd33bd73ff5cdd6a619e271281f846d66f8a0a Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 5 Dec 2020 18:55:04 +0530
Subject: Chart type report code formatting

---
 modern/src/reports/ChartReportPage.js  | 16 ++++++++--------
 modern/src/reports/ReportLayoutPage.js |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 841f1e73..6177341b 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -33,17 +33,17 @@ const ReportFilterForm = ({ setItems, type, setType }) => {
   }
 
   return (
-    <React.Fragment>
+    <>
       <ReportFilter handleSubmit={handleSubmit} showOnly />
       <FormControl variant="filled" margin="normal" fullWidth>
-      <InputLabel>{t('reportChartType')}</InputLabel>
-      <Select value={type} onChange={e => setType(e.target.value)}>
-        <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-        <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-        <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
-      </Select>
+        <InputLabel>{t('reportChartType')}</InputLabel>
+        <Select value={type} onChange={e => setType(e.target.value)}>
+          <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+          <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+          <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+        </Select>
       </FormControl>
-    </React.Fragment>
+    </>
   )
 };
 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 67dff5a4..93cf6dab 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -27,7 +27,7 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, type, s
         <Grid container spacing={2}>
           <Grid item xs={12} md={3} lg={2}>
             <Paper className={classes.form}>
-              <ReportFilterForm setItems={ setItems } type={ type } setType={ setType }/>
+              <ReportFilterForm setItems={ setItems } type={ type } setType={ setType } />
             </Paper>
           </Grid>
           <Grid item xs={12} md={9} lg={10}>
-- 
cgit v1.2.3


From f8bb2fb5dfd801b7c49a3a3b66042e94dc7640dc Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sun, 13 Dec 2020 19:31:39 +0530
Subject: Refactored all the reports components to make them more generic

---
 modern/src/reports/ChartReportPage.js   | 73 ++++++++++++++-------------------
 modern/src/reports/EventReportPage.js   |  4 +-
 modern/src/reports/Graph.js             | 35 ++++++++++++++++
 modern/src/reports/ReportLayoutPage.js  |  4 +-
 modern/src/reports/RouteReportPage.js   |  4 +-
 modern/src/reports/StopReportPage.js    |  4 +-
 modern/src/reports/SummaryReportPage.js |  4 +-
 modern/src/reports/TripReportPage.js    |  4 +-
 8 files changed, 77 insertions(+), 55 deletions(-)
 create mode 100644 modern/src/reports/Graph.js

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 6177341b..543c8a9e 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { Box, Paper, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import ReportFilter from './ReportFilter';
+import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import ReportLayoutPage from './ReportLayoutPage';
+import ReportFilter from './ReportFilter';
+import Graph from './Graph';
 import { useAttributePreference } from '../common/preferences';
 import { formatDate } from '../common/formatter';
 import { speedConverter } from '../common/converter';
-import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import t from '../common/localization';
 
-const ReportFilterForm = ({ setItems, type, setType }) => {
+const Filter = ({ children, setItems }) => {
 
   const speedUnit = useAttributePreference('speedUnit');
 
@@ -16,9 +16,7 @@ const ReportFilterForm = ({ setItems, type, setType }) => {
     const query = new URLSearchParams({ deviceId, from, to, mail });
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
-
       const positions = await response.json();
-
       let formattedPositions = positions.map(position => {
         return {
           speed: Number(speedConverter(position.speed, speedUnit)),
@@ -27,59 +25,48 @@ const ReportFilterForm = ({ setItems, type, setType }) => {
           fixTime: formatDate(position.fixTime)
         }
       });
-      
       setItems(formattedPositions);
     }
   }
-
   return (
     <>
       <ReportFilter handleSubmit={handleSubmit} showOnly />
-      <FormControl variant="filled" margin="normal" fullWidth>
-        <InputLabel>{t('reportChartType')}</InputLabel>
-        <Select value={type} onChange={e => setType(e.target.value)}>
-          <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-          <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-          <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
-        </Select>
-      </FormControl>
+      {children}
     </>
   )
-};
+}
+
+const ChartType = ({ type, setType }) => {
 
-const CustomizedAxisTick = ({ x, y, payload }) =>{
-  const parts = payload.value.split(' ');
   return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[0]}</text>
-      <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
-    </g>
-  );
+    <FormControl variant="filled" margin="normal" fullWidth>
+      <InputLabel>{t('reportChartType')}</InputLabel>
+      <Select value={type} onChange={e => setType(e.target.value)}>
+        <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+        <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+        <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+      </Select>
+    </FormControl>
+  )
 }
 
-const ChartReportPage = () => {
 
+const ChartReportPage = () => {
+  
   const [items, setItems] = useState([]);
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} type={type} setType={setType}>
-      <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>
-    </ReportLayoutPage>
-  );
-};
+    <>
+      <ReportLayoutPage filter={ 
+        <Filter setItems={setItems}>
+          <ChartType type={type} setType={setType} />
+        </Filter>
+      }>
+        <Graph items={items} type={type} />
+      </ReportLayoutPage>
+    </>
+  )
+}
 
 export default ChartReportPage;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 13e081e2..054181d0 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -6,7 +6,7 @@ import { formatPosition } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 
-const ReportFilterForm = ({ setItems }) => {
+const Filter = ({ setItems }) => {
 
   const [eventTypes, setEventTypes] = useState(['allEvents']);
 
@@ -60,7 +60,7 @@ const EventReportPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
+    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js
new file mode 100644
index 00000000..af54e10e
--- /dev/null
+++ b/modern/src/reports/Graph.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Paper } from '@material-ui/core';
+import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const CustomizedAxisTick = ({ x, y, payload }) =>{
+  const parts = payload.value.split(' ');
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[0]}</text>
+      <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
+    </g>
+  );
+}
+
+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>
+  );
+}
+
+export default Graph;
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 93cf6dab..d6fac051 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, type, setType, children }) => {
+const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
@@ -27,7 +27,7 @@ const ReportLayoutPage = ({ reportFilterForm:ReportFilterForm, setItems, type, s
         <Grid container spacing={2}>
           <Grid item xs={12} md={3} lg={2}>
             <Paper className={classes.form}>
-              <ReportFilterForm setItems={ setItems } type={ type } setType={ setType } />
+              {filter}
             </Paper>
           </Grid>
           <Grid item xs={12} md={9} lg={10}>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 43d310be..f2b03616 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -5,7 +5,7 @@ import { formatPosition } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 
-const ReportFilterForm = ({ setItems }) => {
+const Filter = ({ setItems }) => {
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({ deviceId, from, to, mail });
@@ -30,7 +30,7 @@ const RouteReportPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
+    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 77d3dfa7..d06997e2 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -6,7 +6,7 @@ import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
 
-const ReportFilterForm = ({ setItems }) => {
+const Filter = ({ setItems }) => {
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({ deviceId, from, to, mail });
@@ -32,7 +32,7 @@ const StopReportPage = () => {
   const [items, setItems] = useState([]);
   
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
+    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index dcd3323c..5cfd857d 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -6,7 +6,7 @@ import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
 
-const ReportFilterForm = ({ setItems }) => {
+const Filter = ({ setItems }) => {
 
   const [daily, setDaily] = useState(false);
 
@@ -41,7 +41,7 @@ const SummaryReportPage = () => {
   const [items, setItems] = useState([]);
   
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
+    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 10f1c464..c1ba6646 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -6,7 +6,7 @@ import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
 
-const ReportFilterForm = ({ setItems }) => {
+const Filter = ({ setItems }) => {
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({ deviceId, from, to, mail });
@@ -33,7 +33,7 @@ const TripReportPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems}>
+    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
-- 
cgit v1.2.3