import React, { useState } from 'react'; import { FormControl, InputLabel, Select, MenuItem, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; 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 usePositionAttributes from '../common/attributes/usePositionAttributes'; import { useCatch } from '../reactHelper'; import { useAttributePreference } from '../common/util/preferences'; import { distanceFromMeters, speedFromKnots, volumeFromLiters } from '../common/util/converter'; const useStyles = makeStyles(() => ({ chart: { flexGrow: 1, overflow: 'hidden', }, })); const ChartReportPage = () => { const classes = useStyles(); const filterClasses = useFilterStyles(); const t = useTranslation(); const positionAttributes = usePositionAttributes(t); const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const volumeUnit = useAttributePreference('volumeUnit'); const [items, setItems] = useState([]); const [type, setType] = useState('speed'); const values = items.map((it) => it[type]); const minValue = Math.min(...values); const maxValue = Math.max(...values); const valueRange = maxValue - minValue; const handleSubmit = useCatch(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) => { const data = { ...position, ...position.attributes }; const formatted = {}; formatted.fixTime = formatDate(position.fixTime, 'HH:mm:ss'); Object.keys(data).forEach((key) => { const value = data[key]; if (typeof value === 'number') { const definition = positionAttributes[key] || {}; switch (definition.dataType) { case 'speed': formatted[key] = speedFromKnots(value, speedUnit).toFixed(2); break; case 'distance': formatted[key] = distanceFromMeters(value, distanceUnit).toFixed(2); break; case 'volume': formatted[key] = volumeFromLiters(value, volumeUnit).toFixed(2); break; default: formatted[key] = value; break; } } }); return formatted; }); setItems(formattedPositions); } else { throw Error(await response.text()); } }); return ( } breadcrumbs={['reportTitle', 'reportChart']}>
{t('reportChartType')}
{items.length > 0 && (
value.toFixed(2)} domain={[minValue - valueRange / 5, maxValue + valueRange / 5]} /> [value, positionAttributes[key].name]} />
)}
); }; export default ChartReportPage;