[IMPROVE] Lazyload Chart.js (#15764)

app/livechat/client/lib/chartHandler.js

@@ -1,4 +1,3 @@
-import Chart from 'chart.js';
 import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
 
 const lineChartConfiguration = ({ legends = false, anim = false, smallTicks = false }) => {
@@ -126,7 +125,7 @@ const doughnutChartConfiguration = (title) => ({
  * @param {Array(String)} dataLabels
  * @param {Array(Array(Double))} dataPoints
  */
-export const drawLineChart = (chart, chartContext, chartLabels, dataLabels, dataSets, options = {}) => {
+export const drawLineChart = async (chart, chartContext, chartLabels, dataLabels, dataSets, options = {}) => {
 	if (!chart) {
 		console.log('No chart element');
 		return;
@@ -157,7 +156,8 @@ export const drawLineChart = (chart, chartContext, chartLabels, dataLabels, data
 			fill: false,
 		});
 	});
-
+	const chartImport = await import('chart.js');
+	const Chart = chartImport.default;
 	return new Chart(chart, {
 		type: 'line',
 		data: {
@@ -175,14 +175,15 @@ export const drawLineChart = (chart, chartContext, chartLabels, dataLabels, data
  * @param {Array(String)} dataLabels
  * @param {Array(Double)} dataPoints
  */
-export const drawDoughnutChart = (chart, title, chartContext, dataLabels, dataPoints) => {
+export const drawDoughnutChart = async (chart, title, chartContext, dataLabels, dataPoints) => {
 	if (!chart) {
 		return;
 	}
 	if (chartContext) {
 		chartContext.destroy();
 	}
-
+	const chartImport = await import('chart.js');
+	const Chart = chartImport.default;
 	return new Chart(chart, {
 		type: 'doughnut',
 		data: {
@@ -208,7 +209,8 @@ export const drawDoughnutChart = (chart, title, chartContext, dataLabels, dataPo
  * @param  {String} label [chart label]
  * @param  {Array(Double)} data  [updated data]
  */
-export const updateChart = (chart, label, data) => {
+export const updateChart = async (c, label, data) => {
+	const chart = await c;
 	if (chart.data.labels.indexOf(label) === -1) {
 		// insert data
 		chart.data.labels.push(label);

app/livechat/client/views/app/analytics/livechatAnalytics.js

@@ -71,7 +71,7 @@ const updateAnalyticsChart = () => {
 		chartOptions: templateInstance.chartOptions.get(),
 	};
 
-	Meteor.call('livechat:getAnalyticsChartData', options, function(error, result) {
+	Meteor.call('livechat:getAnalyticsChartData', options, async function(error, result) {
 		if (error) {
 			return handleError(error);
 		}
@@ -80,7 +80,7 @@ const updateAnalyticsChart = () => {
 			console.log('livechat:getAnalyticsChartData => Missing Data');
 		}
 
-		chartContext = drawLineChart(document.getElementById('lc-analytics-chart'), chartContext, [result.chartLabel], result.dataLabels, [result.dataPoints]);
+		chartContext = await drawLineChart(document.getElementById('lc-analytics-chart'), chartContext, [result.chartLabel], result.dataLabels, [result.dataPoints]);
 	});
 
 	Meteor.call('livechat:getAgentOverviewData', options, function(error, result) {