diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js
index 5b4d837d211cd..b6e29530b5e72 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js
@@ -18,11 +18,19 @@ import ChatsOverview from './overviews/ChatsOverview';
import ConversationOverview from './overviews/ConversationOverview';
import ProductivityOverview from './overviews/ProductivityOverview';
+const randomizeKeys = (keys) => {
+ keys.current = keys.current.map((_key, i) => {
+ return `${i}_${new Date().getTime()}`;
+ });
+};
+
const dateRange = getDateRange();
const RealTimeMonitoringPage = () => {
const t = useTranslation();
+ const keys = useRef([...Array(10).keys()]);
+
const [reloadFrequency, setReloadFrequency] = useState(5);
const [departmentId, setDepartment] = useState('');
@@ -43,6 +51,10 @@ const RealTimeMonitoringPage = () => {
[departmentParams],
);
+ useEffect(() => {
+ randomizeKeys(keys);
+ }, [allParams]);
+
const reloadCharts = useMutableCallback(() => {
Object.values(reloadRef.current).forEach((reload) => {
reload();
@@ -53,6 +65,7 @@ const RealTimeMonitoringPage = () => {
const interval = setInterval(reloadCharts, reloadFrequency * 1000);
return () => {
clearInterval(interval);
+ randomizeKeys(keys);
};
}, [reloadCharts, reloadFrequency]);
@@ -90,30 +103,54 @@ const RealTimeMonitoringPage = () => {
-
+
-
-
+
+
-
+
-
-
+
+
-
+
-
+
-
+
-
+