From beb6aa8f563a9ba3334c33178095616104487bc8 Mon Sep 17 00:00:00 2001 From: MartinSchoeler Date: Fri, 16 Aug 2024 16:12:21 -0300 Subject: [PATCH 1/2] refactor: `Realtime Monitoring/Chart` component to TS --- .../analytics/InterchangeableChart.tsx | 2 +- .../realTimeMonitoring/charts/AgentStatusChart.js | 2 +- .../realTimeMonitoring/charts/Chart.js | 15 --------------- .../realTimeMonitoring/charts/Chart.tsx | 14 ++++++++++++++ .../charts/ChatDurationChart.js | 2 +- .../realTimeMonitoring/charts/ChatsChart.js | 2 +- .../charts/ChatsPerAgentChart.js | 2 +- .../charts/ChatsPerDepartmentChart.js | 2 +- .../charts/ResponseTimesChart.js | 2 +- 9 files changed, 21 insertions(+), 22 deletions(-) delete mode 100644 apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.js create mode 100644 apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx diff --git a/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx b/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx index 872bb4f05b0d..e51cacf76c83 100644 --- a/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx @@ -94,7 +94,7 @@ const InterchangeableChart = ({ }); }, [chartName, departmentId, draw, end, start, t, loadData]); - return ; + return ; }; export default InterchangeableChart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.js index 4564a859ccf5..4724bea74350 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.js +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.js @@ -60,7 +60,7 @@ const AgentStatusChart = ({ params, reloadRef, ...props }) => { } }, [available, away, busy, offline, state, t, updateChartData]); - return ; + return ; }; export default AgentStatusChart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.js deleted file mode 100644 index 8ba5066c1706..000000000000 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.js +++ /dev/null @@ -1,15 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import React, { forwardRef } from 'react'; - -const style = { - minHeight: '250px', -}; -const Chart = forwardRef(function Chart(props, ref) { - return ( - - - - ); -}); - -export default Chart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx new file mode 100644 index 000000000000..84036fd44147 --- /dev/null +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx @@ -0,0 +1,14 @@ +import { Box } from '@rocket.chat/fuselage'; +import type { MutableRefObject } from 'react'; +import React from 'react'; + +const style = { + minHeight: '250px', +}; +const Chart = ({ canvasRef, ...props }: { canvasRef: MutableRefObject }) => ( + + + +); + +export default Chart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.js index d85fe1d3799d..b4e155394f68 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.js +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.js @@ -72,7 +72,7 @@ const ChatDurationChart = ({ params, reloadRef, ...props }) => { } }, [avg, longest, state, t, updateChartData]); - return ; + return ; }; export default ChatDurationChart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.js index cbe1285931d7..5a540dcd2dbd 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.js +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.js @@ -60,7 +60,7 @@ const ChatsChart = ({ params, reloadRef, ...props }) => { } }, [closed, open, queued, onhold, state, t, updateChartData]); - return ; + return ; }; export default ChatsChart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.js index 6c7741781e1b..48b0bdbf655e 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.js +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.js @@ -56,7 +56,7 @@ const ChatsPerAgentChart = ({ params, reloadRef, ...props }) => { } }, [chartData, state, t, updateChartData]); - return ; + return ; }; export default ChatsPerAgentChart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.js index 030fcedc0576..fbfe91695626 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.js +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.js @@ -59,7 +59,7 @@ const ChatsPerDepartmentChart = ({ params, reloadRef, ...props }) => { } }, [chartData, state, t, updateChartData]); - return ; + return ; }; export default ChatsPerDepartmentChart; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.js index ac0500ebf4da..cfc33687c8fc 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.js +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.js @@ -78,7 +78,7 @@ const ResponseTimesChart = ({ params, reloadRef, ...props }) => { } }, [reactionAvg, reactionLongest, responseAvg, responseLongest, state, t, updateChartData]); - return ; + return ; }; export default ResponseTimesChart; From da33ffe2151a231d44d68d6e803d253e188be906 Mon Sep 17 00:00:00 2001 From: MartinSchoeler Date: Mon, 19 Aug 2024 14:30:32 -0300 Subject: [PATCH 2/2] fix review --- .../views/omnichannel/realTimeMonitoring/charts/Chart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx index 84036fd44147..5a47906ce92d 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx @@ -2,10 +2,12 @@ import { Box } from '@rocket.chat/fuselage'; import type { MutableRefObject } from 'react'; import React from 'react'; +type ChartProps = { canvasRef: MutableRefObject }; + const style = { minHeight: '250px', }; -const Chart = ({ canvasRef, ...props }: { canvasRef: MutableRefObject }) => ( +const Chart = ({ canvasRef, ...props }: ChartProps) => (