diff options
| -rw-r--r-- | modern/src/reports/ChartReportPage.js | 19 | ||||
| -rw-r--r-- | 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} |