aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-11-20 13:56:14 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2020-11-20 13:56:14 +0530
commitdf01e1d751980843506946a194fa9f67489182b1 (patch)
tree12eff84de0878b72418e0c0991ede3663da37dfb
parent604eabcd97c6e7ddb42316a5a1fb0abc24e8dc7f (diff)
downloadetbsa-traccar-web-df01e1d751980843506946a194fa9f67489182b1.tar.gz
etbsa-traccar-web-df01e1d751980843506946a194fa9f67489182b1.tar.bz2
etbsa-traccar-web-df01e1d751980843506946a194fa9f67489182b1.zip
Implementing chart report initial structure
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/App.js2
-rw-r--r--modern/src/MainToolbar.js2
-rw-r--r--modern/src/common/formatter.js2
-rw-r--r--modern/src/reports/ChartReportPage.js74
-rw-r--r--modern/src/reports/ChartType.js53
6 files changed, 132 insertions, 2 deletions
diff --git a/modern/package.json b/modern/package.json
index e5438b5..2c30c9f 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 8a308c1..83fd931 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 5b94b14..930e66a 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 e41e591..8ef0040 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 0000000..6898933
--- /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 0000000..586ea88
--- /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;