refactor: Realtime Doughnout Charts to TS

apps/meteor/app/livechat/client/lib/chartHandler.ts

@@ -177,10 +177,9 @@ export const drawDoughnutChart = async (
 	chartContext: { destroy: () => void } | undefined,
 	dataLabels: string[],
 	dataPoints: number[],
-): Promise<ChartType<'doughnut', number[], string> | void> => {
+): Promise<ChartType> => {
 	if (!chart) {
-		console.error('No chart element');
-		return;
+		throw new Error('No chart element');
 	}
 	if (chartContext) {
 		chartContext.destroy();
@@ -200,7 +199,7 @@ export const drawDoughnutChart = async (
 			],
 		},
 		options: doughnutChartConfiguration(title),
-	});
+	}) as ChartType;
 };
 
 /**
@@ -209,12 +208,12 @@ export const drawDoughnutChart = async (
  * @param  {String} label [chart label]
  * @param  {Array(Double)} data  [updated data]
  */
-export const updateChart = async (c: ChartType, label: string, data: { [x: string]: number }): Promise<void> => {
+export const updateChart = async (c: ChartType, label: string, data: number[]): Promise<void> => {
 	const chart = await c;
 	if (chart.data?.labels?.indexOf(label) === -1) {
 		// insert data
 		chart.data.labels.push(label);
-		chart.data.datasets.forEach((dataset: { data: any[] }, idx: string | number) => {
+		chart.data.datasets.forEach((dataset: { data: any[] }, idx: number) => {
 			dataset.data.push(data[idx]);
 		});
 	} else {
@@ -224,7 +223,7 @@ export const updateChart = async (c: ChartType, label: string, data: { [x: strin
 			return;
 		}
 
-		chart.data.datasets.forEach((dataset: { data: { [x: string]: any } }, idx: string | number) => {
+		chart.data.datasets.forEach((dataset: { data: { [x: string]: any } }, idx: number) => {
 			dataset.data[index] = data[idx];
 		});
 	}

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.js → apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx

@@ -1,4 +1,8 @@
+import type { OperationParams } from '@rocket.chat/rest-typings';
+import type { TranslationContextValue, TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { Chart as ChartType } from 'chart.js';
+import type { MutableRefObject } from 'react';
 import React, { useRef, useEffect } from 'react';
 
 import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler';
@@ -16,20 +20,25 @@ const initialData = {
 	offline: 0,
 };
 
-const init = (canvas, context, t) =>
+const init = (canvas: HTMLCanvasElement, context: ChartType | undefined, t: TranslationContextValue['translate']): Promise<ChartType> =>
 	drawDoughnutChart(
 		canvas,
 		t('Agents'),
 		context,
-		labels.map((l) => t(l)),
+		labels.map((l) => t(l as TranslationKey)),
 		Object.values(initialData),
 	);
 
-const AgentStatusChart = ({ params, reloadRef, ...props }) => {
+type AgentStatusChartsProps = {
+	params: OperationParams<'GET', '/v1/livechat/analytics/dashboards/charts/agents-status'>;
+	reloadRef: MutableRefObject<{ [x: string]: () => void }>;
+};
+
+const AgentStatusChart = ({ params, reloadRef, ...props }: AgentStatusChartsProps) => {
 	const t = useTranslation();
 
-	const canvas = useRef();
-	const context = useRef();
+	const canvas: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
+	const context: MutableRefObject<ChartType | undefined> = useRef();
 
 	const updateChartData = useUpdateChartData({
 		context,
@@ -46,7 +55,9 @@ const AgentStatusChart = ({ params, reloadRef, ...props }) => {
 
 	useEffect(() => {
 		const initChart = async () => {
-			context.current = await init(canvas.current, context.current, t);
+			if (canvas?.current) {
+				context.current = await init(canvas.current, context.current, t);
+			}
 		};
 		initChart();
 	}, [t]);

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.js → apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx

@@ -1,4 +1,8 @@
+import type { OperationParams } from '@rocket.chat/rest-typings';
+import type { TranslationContextValue, TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { Chart as ChartType } from 'chart.js';
+import type { MutableRefObject } from 'react';
 import React, { useRef, useEffect } from 'react';
 
 import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler';
@@ -16,20 +20,25 @@ const initialData = {
 	closed: 0,
 };
 
-const init = (canvas, context, t) =>
+const init = (canvas: HTMLCanvasElement, context: ChartType | undefined, t: TranslationContextValue['translate']) =>
 	drawDoughnutChart(
 		canvas,
 		t('Chats'),
 		context,
-		labels.map((l) => t(l)),
+		labels.map((l) => t(l as TranslationKey)),
 		Object.values(initialData),
 	);
 
-const ChatsChart = ({ params, reloadRef, ...props }) => {
+type ChatsChartProps = {
+	params: OperationParams<'GET', '/v1/livechat/analytics/dashboards/charts/chats'>;
+	reloadRef: MutableRefObject<{ [x: string]: () => void }>;
+};
+
+const ChatsChart = ({ params, reloadRef, ...props }: ChatsChartProps) => {
 	const t = useTranslation();
 
-	const canvas = useRef();
-	const context = useRef();
+	const canvas: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
+	const context: MutableRefObject<ChartType | undefined> = useRef();
 
 	const updateChartData = useUpdateChartData({
 		context,
@@ -46,7 +55,9 @@ const ChatsChart = ({ params, reloadRef, ...props }) => {
 
 	useEffect(() => {
 		const initChart = async () => {
-			context.current = await init(canvas.current, context.current, t);
+			if (canvas?.current) {
+				context.current = await init(canvas.current, context.current, t);
+			}
 		};
 		initChart();
 	}, [t]);

apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts

@@ -1,19 +1,19 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import type { TranslationContextValue } from '@rocket.chat/ui-contexts';
 import { type Chart } from 'chart.js';
-import { type TFunction } from 'i18next';
-import { type RefObject } from 'react';
+import { type MutableRefObject } from 'react';
 
 import { updateChart } from '../../../../../app/livechat/client/lib/chartHandler';
 
 type UseUpdateChartDataOptions = {
-	context: RefObject<Chart | undefined>;
-	canvas: RefObject<HTMLCanvasElement | null>;
-	init: (canvas: HTMLCanvasElement, context: undefined, t: TFunction) => Promise<Chart>;
-	t: TFunction;
+	context: MutableRefObject<Chart | undefined>;
+	canvas: MutableRefObject<HTMLCanvasElement | null>;
+	init: (canvas: HTMLCanvasElement, context: undefined, t: TranslationContextValue['translate']) => Promise<Chart>;
+	t: TranslationContextValue['translate'];
 };
 
 export const useUpdateChartData = ({ context: contextRef, canvas: canvasRef, init, t }: UseUpdateChartDataOptions) =>
-	useMutableCallback(async (label: string, data: { [x: string]: number }) => {
+	useMutableCallback(async (label: string, data: number[]) => {
 		const canvas = canvasRef.current;
 
 		if (!canvas) {

packages/i18n/src/locales/en.i18n.json

@@ -989,6 +989,7 @@
   "Channels_list": "List of public channels",
   "Channel_what_is_this_channel_about": "What is this channel about?",
   "Chart": "Chart",
+  "Chats": "Chats",
   "Chat_button": "Chat button",
   "Chat_close": "Chat Close",
   "Chat_closed": "Chat closed",

packages/i18n/src/locales/pt-BR.i18n.json

@@ -833,6 +833,7 @@
   "Channels_list": "Lista de canais públicos",
   "Channel_what_is_this_channel_about": "Sobre o que é este canal?",
   "Chart": "Gráfico",
+  "Chats": "Conversas",
   "Chat_button": "Botão da conversa",
   "Chat_close": "Fechar conversa",
   "Chat_closed": "Conversa encerrada",