import React, { useState } from 'react'; import { FormControl, InputLabel, Select, MenuItem, makeStyles, } from '@material-ui/core'; import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts'; import ReportFilter, { useFilterStyles } from './components/ReportFilter'; import { formatDate } from '../common/util/formatter'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import usePositionProperties from '../common/attributes/usePositionProperties'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; const useStyles = makeStyles(() => ({ chart: { flexGrow: 1, overflow: 'hidden', }, })); const ChartReportPage = () => { const classes = useStyles(); const filterClasses = useFilterStyles(); const t = useTranslation(); const positionProperties = usePositionProperties(t); const positionAttributes = usePositionAttributes(t); const typesObject = { ...positionProperties, ...positionAttributes }; const [items, setItems] = useState([]); const [type, setType] = useState('speed'); const dataRange = (() => { const values = items.map((it) => it[type]); const result = Math.max(...values) - Math.min(...values); return result; })(); 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 positions = await response.json(); const formattedPositions = positions.map((position) => ({ ...position, ...position.attributes, fixTime: formatDate(position.fixTime, 'HH:mm:ss'), })); setItems(formattedPositions); } }; return ( } breadcrumbs={['reportTitle', 'reportChart']}>
{t('reportChartType')}
{items.length > 0 && (
[value, typesObject[name].name]} />
)}
); }; export default ChartReportPage;