From d7ca46fdc93ccb0b79e51fe9123f96738301626e Mon Sep 17 00:00:00 2001 From: Adebiyi Adebayo Date: Wed, 25 Dec 2024 23:37:29 +0100 Subject: [PATCH 1/5] 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 3ce5dca2..5891acd9 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')} /> - + handleBrushChange(range)} + /> + From 45cb54eddd06774415e9a07dc6cd37c3633fbb62 Mon Sep 17 00:00:00 2001 From: Adebiyi Adebayo Date: Thu, 26 Dec 2024 17:33:46 +0100 Subject: [PATCH 2/5] Update ChartReportPage.jsx fix error in build fail --- src/reports/ChartReportPage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/reports/ChartReportPage.jsx b/src/reports/ChartReportPage.jsx index 5891acd9..1eb266bf 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 { - Brush, ReferenceArea, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, + Brush, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts'; import ReportFilter from './components/ReportFilter'; import { formatTime } from '../common/util/formatter'; @@ -21,7 +21,7 @@ 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 handleBrushChange = (range) => { if (range) { setZoomDomain({ start: range.startIndex, end: range.endIndex }); } }; const classes = useReportStyles(); const theme = useTheme(); From 9ca2153c0f602339f6445daef6279d1cb24d37ae Mon Sep 17 00:00:00 2001 From: Adebiyi Adebayo Date: Thu, 26 Dec 2024 19:36:57 +0100 Subject: [PATCH 3/5] Update ChartReportPage.jsx Hide time value in brush --- src/reports/ChartReportPage.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/reports/ChartReportPage.jsx b/src/reports/ChartReportPage.jsx index 1eb266bf..b31abaf5 100644 --- a/src/reports/ChartReportPage.jsx +++ b/src/reports/ChartReportPage.jsx @@ -20,7 +20,7 @@ import { import useReportStyles from './common/useReportStyles'; const ChartReportPage = () => { - const [zoomDomain, setZoomDomain] = useState({ start: 'dataMin', end: 'dataMax' }); + const [, setZoomDomain] = useState({ start: 'dataMin', end: 'dataMax' }); const handleBrushChange = (range) => { if (range) { setZoomDomain({ start: range.startIndex, end: range.endIndex }); } }; const classes = useReportStyles(); @@ -168,6 +168,7 @@ const ChartReportPage = () => { dataKey={timeType} height={30} stroke={theme.palette.primary.main} + tickFormatter={() => ''} onChange={(range) => handleBrushChange(range)} /> From 1aecb1796cdd97fde3844934d85b200aaa60765c Mon Sep 17 00:00:00 2001 From: Adebiyi Adebayo Date: Fri, 27 Dec 2024 22:16:44 +0100 Subject: [PATCH 4/5] Update ChartReportPage.jsx move tag attributes to different lines --- src/reports/ChartReportPage.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/reports/ChartReportPage.jsx b/src/reports/ChartReportPage.jsx index b31abaf5..0c37f4e1 100644 --- a/src/reports/ChartReportPage.jsx +++ b/src/reports/ChartReportPage.jsx @@ -171,7 +171,13 @@ const ChartReportPage = () => { tickFormatter={() => ''} onChange={(range) => handleBrushChange(range)} /> - + From dbf8397ed7f40ee81b2c7048a2449f96ed5bd4b1 Mon Sep 17 00:00:00 2001 From: Adebiyi Adebayo Date: Sat, 28 Dec 2024 03:30:14 +0100 Subject: [PATCH 5/5] Update ChartReportPage.jsx removed unnecessary constants --- src/reports/ChartReportPage.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/reports/ChartReportPage.jsx b/src/reports/ChartReportPage.jsx index 0c37f4e1..04791e7a 100644 --- a/src/reports/ChartReportPage.jsx +++ b/src/reports/ChartReportPage.jsx @@ -20,9 +20,6 @@ import { import useReportStyles from './common/useReportStyles'; const ChartReportPage = () => { - const [, 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(); @@ -169,9 +166,8 @@ const ChartReportPage = () => { height={30} stroke={theme.palette.primary.main} tickFormatter={() => ''} - onChange={(range) => handleBrushChange(range)} /> -