diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 2 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 2 | ||||
| -rw-r--r-- | modern/src/reports/ChartReportPage.js | 74 | ||||
| -rw-r--r-- | modern/src/reports/ChartType.js | 53 |
6 files changed, 132 insertions, 2 deletions
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; |