Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/bump-patch-1760546047114.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': patch
---

Bump @rocket.chat/meteor version.
5 changes: 5 additions & 0 deletions .changeset/rare-schools-laugh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/meteor": patch
---

Fixes real-time monitoring displaying incorrect data
9 changes: 9 additions & 0 deletions apps/meteor/app/livechat/client/lib/chartHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -209,3 +209,12 @@ export const updateChart = async <TChartType extends chartjs.ChartType>(

chart.update();
};

export const resetChart = <TChartType extends chartjs.ChartType>(chart: chartjs.Chart<TChartType>): void => {
chart.data.labels = [];
chart.data.datasets.forEach((dataset) => {
dataset.data = [];
});

chart.update();
};
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';

import Chart from './Chart';
import { useChartContext } from './useChartContext';
import { useUpdateChartData } from './useUpdateChartData';
import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler';
import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
Expand Down Expand Up @@ -39,40 +40,41 @@ const AgentStatusChart = ({ departmentId, ...props }: AgentStatusChartsProps) =>
const { t } = useTranslation();

const canvas: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
const context: MutableRefObject<chartjs.Chart<'doughnut'> | undefined> = useRef();

const updateChartData = useUpdateChartData({
context,
canvas,
t,
init,
});

const getAgentStatus = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/agents-status');
const { isSuccess, data: { offline = 0, available = 0, away = 0, busy = 0 } = initialData } = useQuery({
queryKey: omnichannelQueryKeys.analytics.agentsStatus(departmentId),
queryFn: () => getAgentStatus({ departmentId }),
gcTime: 0,
});

useEffect(() => {
const initChart = async () => {
if (!canvas.current) {
return;
}
const context = useChartContext({
canvas,
init,
t,
});

context.current = await init(canvas.current, context.current, t);
};
initChart();
}, [t]);
const updateChartData = useUpdateChartData({
context,
canvas,
init,
t,
});

useEffect(() => {
if (!isSuccess) return;
if (!context) {
return;
}

if (!isSuccess) {
return;
}

updateChartData(t('Offline'), [offline]);
updateChartData(t('Available'), [available]);
updateChartData(t('Away'), [away]);
updateChartData(t('Busy'), [busy]);
}, [available, away, busy, offline, isSuccess, t, updateChartData]);
}, [context, available, away, busy, offline, isSuccess, t, updateChartData]);

return <Chart canvasRef={canvas} {...props} />;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
import Chart from './Chart';
import { getMomentChartLabelsAndData } from './getMomentChartLabelsAndData';
import { getMomentCurrentLabel } from './getMomentCurrentLabel';
import { useChartContext } from './useChartContext';
import { useUpdateChartData } from './useUpdateChartData';
import { drawLineChart } from '../../../../../app/livechat/client/lib/chartHandler';
import { secondsToHHMMSS } from '../../../../../lib/utils/secondsToHHMMSS';
Expand Down Expand Up @@ -48,19 +49,25 @@ const ChatDurationChart = ({ departmentId, dateRange, ...props }: ChatDurationCh
const { t } = useTranslation();

const canvas = useRef<HTMLCanvasElement | null>(null);
const context = useRef<chartjs.Chart<'line'>>();

const updateChartData = useUpdateChartData({
context,
canvas,
t,
init,
});

const getTimings = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/timings');
const { isSuccess, data } = useQuery({
queryKey: omnichannelQueryKeys.analytics.timings(departmentId, dateRange),
queryFn: () => getTimings({ departmentId, ...dateRange }),
gcTime: 0,
});

const context = useChartContext({
canvas,
init,
t,
});

const updateChartData = useUpdateChartData({
context,
canvas,
init,
t,
});

const {
Expand All @@ -73,22 +80,17 @@ const ChatDurationChart = ({ departmentId, dateRange, ...props }: ChatDurationCh
};

useEffect(() => {
const initChart = async () => {
if (!canvas.current) {
return;
}
if (!context) {
return;
}

context.current = await init(canvas.current, context.current, t);
};
initChart();
}, [t]);

useEffect(() => {
if (!isSuccess) return;
if (!isSuccess) {
return;
}

const label = getMomentCurrentLabel();
updateChartData(label, [avg, longest]);
}, [avg, longest, isSuccess, t, updateChartData]);
}, [context, avg, longest, isSuccess, t, updateChartData]);

return <Chart canvasRef={canvas} {...props} />;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';

import Chart from './Chart';
import { useChartContext } from './useChartContext';
import { useUpdateChartData } from './useUpdateChartData';
import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler';
import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
Expand Down Expand Up @@ -40,41 +41,43 @@ const ChatsChart = ({ departmentId, dateRange, ...props }: ChatsChartProps) => {
const { t } = useTranslation();

const canvas: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
const context: MutableRefObject<chartjs.Chart<'doughnut'> | undefined> = useRef();

const updateChartData = useUpdateChartData({
context,
canvas,
t,
init,
});

const getChats = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/chats');
const { isSuccess, data } = useQuery({
queryKey: omnichannelQueryKeys.analytics.chats(departmentId, dateRange),
queryFn: () => getChats({ departmentId, ...dateRange }),
gcTime: 0,
});

const context = useChartContext({
canvas,
init,
t,
});

const updateChartData = useUpdateChartData({
context,
canvas,
init,
t,
});

const { open, queued, closed, onhold } = data ?? initialData;

useEffect(() => {
const initChart = async () => {
if (!canvas.current) {
return;
}
context.current = await init(canvas.current, context.current, t);
};
initChart();
}, [t]);
if (!context) {
return;
}

useEffect(() => {
if (!isSuccess) return;
if (!isSuccess) {
return;
}

updateChartData(t('Open'), [open]);
updateChartData(t('Closed'), [closed]);
updateChartData(t('On_Hold_Chats'), [onhold]);
updateChartData(t('Queued'), [queued]);
}, [closed, open, queued, onhold, isSuccess, t, updateChartData]);
}, [context, closed, open, queued, onhold, isSuccess, t, updateChartData]);

return <Chart canvasRef={canvas} {...props} />;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import { useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';

import Chart from './Chart';
import { useChartContext } from './useChartContext';
import { useUpdateChartData } from './useUpdateChartData';
import { drawLineChart } from '../../../../../app/livechat/client/lib/chartHandler';
import { drawLineChart, resetChart } from '../../../../../app/livechat/client/lib/chartHandler';
import { omnichannelQueryKeys } from '../../../../lib/queryKeys';

const init = (canvas: HTMLCanvasElement, context: chartjs.Chart<'line'> | undefined, t: TFunction) =>
Expand All @@ -29,42 +30,41 @@ const ChatsPerAgentChart = ({ departmentId, dateRange, ...props }: ChatsPerAgent
const { t } = useTranslation();

const canvas = useRef<HTMLCanvasElement | null>(null);
const context = useRef<chartjs.Chart<'line'>>();

const updateChartData = useUpdateChartData({
context,
canvas,
t,
init,
});

const getChatsPerAgent = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/chats-per-agent');
const { isSuccess, data } = useQuery({
queryKey: omnichannelQueryKeys.analytics.chatsPerAgent(departmentId, dateRange),
queryFn: () => getChatsPerAgent({ departmentId, ...dateRange }),
select: ({ success: _, ...data }) => Object.entries(data),
gcTime: 0,
});

useEffect(() => {
const initChart = async () => {
if (!canvas.current) {
return;
}
context.current = await init(canvas.current, context.current, t);
};
initChart();
}, [t]);
const context = useChartContext({
canvas,
init,
t,
});

const updateChartData = useUpdateChartData({
context,
canvas,
init,
t,
});

useEffect(() => {
if (!isSuccess) return;
if (!context) return;

if (!isSuccess) {
return;
}

Object.entries(data).forEach(([name, value]) => {
if (name === 'success') {
return;
}
resetChart(context);

data.forEach(([name, value]) => {
updateChartData(name, [value.open, value.closed, value.onhold]);
});
}, [data, isSuccess, t, updateChartData]);
}, [context, data, isSuccess, t, updateChartData]);

return <Chart canvasRef={canvas} {...props} />;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import { useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';

import Chart from './Chart';
import { useChartContext } from './useChartContext';
import { useUpdateChartData } from './useUpdateChartData';
import { drawLineChart } from '../../../../../app/livechat/client/lib/chartHandler';
import { drawLineChart, resetChart } from '../../../../../app/livechat/client/lib/chartHandler';
import { omnichannelQueryKeys } from '../../../../lib/queryKeys';

const init = (canvas: HTMLCanvasElement, context: chartjs.Chart<'line'> | undefined, t: TFunction) =>
Expand All @@ -29,41 +30,43 @@ const ChatsPerDepartmentChart = ({ departmentId, dateRange, ...props }: ChatsPer
const { t } = useTranslation();

const canvas = useRef<HTMLCanvasElement | null>(null);
const context = useRef<chartjs.Chart<'line'>>();

const updateChartData = useUpdateChartData({
context,
canvas,
t,
init,
});

const getChatsPerDepartment = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/chats-per-department');
const { isSuccess, data } = useQuery({
queryKey: omnichannelQueryKeys.analytics.chatsPerDepartment(departmentId, dateRange),
queryFn: () => getChatsPerDepartment({ departmentId, ...dateRange }),
select: ({ success: _, ...data }) => Object.entries(data),
gcTime: 0,
});

useEffect(() => {
const initChart = async () => {
if (!canvas.current) {
return;
}
context.current = await init(canvas.current, context.current, t);
};
initChart();
}, [t]);
const context = useChartContext({
canvas,
init,
t,
});

const updateChartData = useUpdateChartData({
context,
canvas,
init,
t,
});

useEffect(() => {
if (!isSuccess) return;
Object.entries(data).forEach(([name, value]) => {
if (name === 'success') {
return;
}
if (!context) {
return;
}

if (!isSuccess) {
return;
}

resetChart(context);

data.forEach(([name, value]) => {
updateChartData(name, [value.open, value.closed]);
});
}, [data, isSuccess, t, updateChartData]);
}, [context, data, isSuccess, t, updateChartData]);

return <Chart canvasRef={canvas} {...props} />;
};
Expand Down
Loading
Loading