Windy/traccar-web
1
0
Fork 0
mirror of https://github.com/traccar/traccar-web.git synced 2025-01-07 03:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update ChartReportPage.jsx

Browse Source 
Add pan and zoom, show dot only on mouse hover
This commit is contained in:
Adebiyi Adebayo 2024-12-25 23:37:29 +01:00 committed by GitHub
parent 582af9c53d
commit d7ca46fdc9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/reports/ChartReportPage.jsx
View File

@ -4,7 +4,7 @@ import {
FormControl, InputLabel, Select, MenuItem, useTheme,
} from '@mui/material';
import {
CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
Brush, ReferenceArea, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
} from 'recharts';
import ReportFilter from './components/ReportFilter';
import { formatTime } from '../common/util/formatter';
@ -20,6 +20,9 @@ import {
import useReportStyles from './common/useReportStyles';
const ChartReportPage = () => {
const [zoomDomain, setZoomDomain] = useState({ start: 'dataMin', end: 'dataMax' });
const handleBrushChange = (range) => { if (range) { setZoomDomain({ start: range.startIndex, end: range.endIndex }); }};
const classes = useReportStyles();
const theme = useTheme();
const t = useTranslation();
@ -161,7 +164,13 @@ const ChartReportPage = () => {
formatter={(value, key) => [value, positionAttributes[key]?.name || key]}
labelFormatter={(value) => formatTime(value, 'seconds')}
/>
<Line type="monotone" dataKey={type} stroke={theme.palette.primary.main} />
<Brush
dataKey={timeType}
height={30}
stroke={theme.palette.primary.main}
onChange={(range) => handleBrushChange(range)}
/>
<Line type="monotone" dataKey={type} stroke={theme.palette.primary.main} dot={false} activeDot={{ r: 6 }} />
</LineChart>
</ResponsiveContainer>
</div>