From d7ca46fdc93ccb0b79e51fe9123f96738301626e Mon Sep 17 00:00:00 2001
From: Adebiyi Adebayo <neutronite@gmail.com>
Date: Wed, 25 Dec 2024 23:37:29 +0100
Subject: [PATCH] Update ChartReportPage.jsx

Add pan and zoom, show dot only on mouse hover
---
 src/reports/ChartReportPage.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/reports/ChartReportPage.jsx b/src/reports/ChartReportPage.jsx
index 3ce5dca21c..5891acd902 100644
--- a/src/reports/ChartReportPage.jsx
+++ b/src/reports/ChartReportPage.jsx
@@ -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>