import React, { useState } from 'react'; import { Box, Paper } 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'; const ReportFilterForm = ({ setItems }) => { const speedUnit = useAttributePreference('speedUnit'); 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(); let formattedPositions = positions.map(position => { return { speed: Number(speedConverter(position.speed, speedUnit)), altitude: position.altitude, accuracy: position.accuracy, fixTime: formatDate(position.fixTime) } }); setItems(formattedPositions); } } return ( ) }; const CustomizedAxisTick = ({ x, y, payload }) =>{ const parts = payload.value.split(' '); return ( {parts[0]} {parts[1]} ); } const ChartReportPage = () => { const [items, setItems] = useState([]); const [type, setType] = useState('speed'); return ( } height={60} /> ); }; export default ChartReportPage;