refactor: Realtime Monitoring/Chart component to TS

apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx

@@ -94,7 +94,7 @@ const InterchangeableChart = ({
 		});
 	}, [chartName, departmentId, draw, end, start, t, loadData]);
 
-	return <Chart ref={canvas} {...props} />;
+	return <Chart canvasRef={canvas} {...props} />;
 };
 
 export default InterchangeableChart;

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 <Chart ref={canvas} {...props} />;
+	return <Chart canvasRef={canvas} {...props} />;
 };
 
 export default AgentStatusChart;

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/Chart.tsx

@@ -0,0 +1,16 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { MutableRefObject } from 'react';
+import React from 'react';
+
+type ChartProps = { canvasRef: MutableRefObject<HTMLCanvasElement | null> };
+
+const style = {
+	minHeight: '250px',
+};
+const Chart = ({ canvasRef, ...props }: ChartProps) => (
+	<Box padding='x20' height='x300' {...props}>
+		<canvas ref={canvasRef} style={style}></canvas>
+	</Box>
+);
+
+export default Chart;

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.js

@@ -72,7 +72,7 @@ const ChatDurationChart = ({ params, reloadRef, ...props }) => {
 		}
 	}, [avg, longest, state, t, updateChartData]);
 
-	return <Chart ref={canvas} {...props} />;
+	return <Chart canvasRef={canvas} {...props} />;
 };
 
 export default ChatDurationChart;

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 <Chart ref={canvas} {...props} />;
+	return <Chart canvasRef={canvas} {...props} />;
 };
 
 export default ChatsChart;

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.js

@@ -56,7 +56,7 @@ const ChatsPerAgentChart = ({ params, reloadRef, ...props }) => {
 		}
 	}, [chartData, state, t, updateChartData]);
 
-	return <Chart ref={canvas} {...props} />;
+	return <Chart canvasRef={canvas} {...props} />;
 };
 
 export default ChatsPerAgentChart;

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.js

@@ -59,7 +59,7 @@ const ChatsPerDepartmentChart = ({ params, reloadRef, ...props }) => {
 		}
 	}, [chartData, state, t, updateChartData]);
 
-	return <Chart ref={canvas} {...props} />;
+	return <Chart canvasRef={canvas} {...props} />;
 };
 
 export default ChatsPerDepartmentChart;

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 <Chart ref={canvas} {...props} />;
+	return <Chart canvasRef={canvas} {...props} />;
 };
 
 export default ResponseTimesChart;