Update chart.js v3 to v4 (#6529)

* Update chart.min.js

* Update missed_calls.php

* Update recent_calls.php

* Update system_counts.php

* Update system_cpu_status.php

* Update system_status.php

* Update domain_limits.php

* Update voicemails.php

app/domain_limits/resources/dashboard/domain_limits.php

@@ -71,20 +71,18 @@
 			</div>
 
 			<script>
-				var domain_limits_chart_context = document.getElementById('domain_limits_chart').getContext('2d');
-
-				const domain_limits_chart_data = {
+				const domain_limits_chart = new Chart(
+					document.getElementById('domain_limits_chart').getContext('2d'),
+					{
+						type: 'doughnut',
+						data: {
 							datasets: [{
 								data:['<?php echo $hud_stat; ?>', 0.00001],
 								borderColor: 'rgba(0,0,0,0)',
 								backgroundColor: ['#2a9df4', '#d4d4d4'],
 								cutout: chart_cutout
 							}]
-				};
-	
-				const domain_limits_chart_config = {
-					type: 'doughnut',
-					data: domain_limits_chart_data,
+						},
 						options: {
 							responsive: true,
 							maintainAspectRatio: false,
@@ -103,11 +101,7 @@
 							}
 						},
 						plugins: [chart_counter],
-				};
-	
-				const domain_limits_chart = new Chart(
-					domain_limits_chart_context,
-					domain_limits_chart_config
+					}
 				);
 			</script>
 			<?php

app/switch/resources/dashboard/switch_status.php

@@ -80,13 +80,15 @@
 //add doughnut chart
 	?>
 	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
-		<div style='width: 175px; height: 175px;'><canvas id='switch_status_chart'></canvas></div>
+		<canvas id='switch_status_chart' width='175px' height='175px'></canvas>
 	</div>
 
 	<script>
-		var switch_status_chart_context = document.getElementById('switch_status_chart').getContext('2d');
-
-		const switch_status_chart_data = {
+		const switch_status_chart = new Chart(
+			document.getElementById('switch_status_chart').getContext('2d'),
+			{
+				type: 'doughnut',
+				data: {
 					datasets: [{
 						data: ['<?php echo $registrations; ?>', 0.00001],
 						backgroundColor: ['<?php echo $_SESSION['dashboard']['switch_status_chart_main_background_color']['text']; ?>',
@@ -95,11 +97,7 @@
 						borderWidth: '<?php echo $_SESSION['dashboard']['switch_status_chart_border_width']['text']; ?>',
 						cutout: chart_cutout
 					}]
-		};
-
-		const switch_status_chart_config = {
-			type: 'doughnut',
-			data: switch_status_chart_data,
+				},
 				options: {
 					responsive: true,
 					maintainAspectRatio: false,
@@ -117,11 +115,7 @@
 					}
 				},
 				plugins: [chart_counter],
-		};
-
-		const switch_status_chart = new Chart(
-			switch_status_chart_context,
-			switch_status_chart_config
+			}
 		);
 	</script>
 	<?php

app/system/resources/dashboard/system_counts.php

@@ -290,9 +290,11 @@
 		</div>
 
 		<script>
-			var system_counts_chart_context = document.getElementById('system_counts_chart').getContext('2d');
-
-			const system_counts_chart_data = {
+			const system_counts_chart = new Chart(
+				document.getElementById('system_counts_chart').getContext('2d'),
+				{
+					type: 'doughnut',
+					data: {
 						labels: ['<?php echo $text['label-active']; ?>: <?php echo $domain_active; ?>', '<?php echo $text['label-inactive']; ?>: <?php echo $domain_inactive; ?>'],
 						datasets: [{
 							data: ['<?php echo $domain_active; ?>', '<?php echo $domain_inactive; ?>'],
@@ -304,11 +306,7 @@
 							borderWidth: '<?php echo $_SESSION['dashboard']['system_counts_chart_border_width']['text']; ?>',
 							cutout: chart_cutout
 						}]
-			};
-
-			const system_counts_chart_config = {
-				type: 'doughnut',
-				data: system_counts_chart_data,
+					},
 					options: {
 					responsive: true,
 						maintainAspectRatio: false,
@@ -331,11 +329,7 @@
 						}
 					},
 					plugins: [chart_counter],
-			};
-
-			const system_counts_chart = new Chart(
-				system_counts_chart_context,
-				system_counts_chart_config
+				}
 			);
 		</script>
 		<?php

app/system/resources/dashboard/system_cpu_status.php

@@ -57,12 +57,10 @@
 //add half doughnut chart
 	?>
 	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
-		<div style='width: 175px; height: 175px; margin: 0 auto;'><canvas id='system_cpu_status_chart'></canvas></div>
+		<div><canvas id='system_cpu_status_chart' width='175px' height='175px' ></canvas></div>
 	</div>
 
 	<script>
-		var system_cpu_status_chart_context = document.getElementById('system_cpu_status_chart').getContext('2d');
-
 		var system_cpu_status_chart_background_color;
 		if ('<?php echo $percent_cpu; ?>' <= 60) {
 			system_cpu_status_chart_background_color = '<?php echo $_SESSION['dashboard']['cpu_usage_chart_main_background_color'][0]; ?>';
@@ -72,7 +70,11 @@
 			system_cpu_status_chart_background_color = '<?php echo $_SESSION['dashboard']['cpu_usage_chart_main_background_color'][2]; ?>';
 		}
 
-		const system_cpu_status_chart_data = {
+		const system_cpu_status_chart = new Chart(
+			document.getElementById('system_cpu_status_chart').getContext('2d'),
+			{
+				type: 'doughnut',
+				data: {
 					datasets: [{
 						data: ['<?php echo $percent_cpu; ?>', 100 - '<?php echo $percent_cpu; ?>'],
 						backgroundColor: [
@@ -83,11 +85,7 @@
 						borderWidth: '<?php echo $_SESSION['dashboard']['cpu_usage_chart_border_width']['text']; ?>',
 						cutout: chart_cutout
 					}]
-		};
-
-		const system_cpu_status_chart_config = {
-			type: 'doughnut',
-			data: system_cpu_status_chart_data,
+				},
 				options: {
 					responsive: true,
 					maintainAspectRatio: false,
@@ -111,11 +109,7 @@
 					}
 				},
 				plugins: [chart_counter_2],
-		};
-
-		const system_cpu_status_chart = new Chart(
-			system_cpu_status_chart_context,
-			system_cpu_status_chart_config
+			}
 		);
 	</script>
 

app/system/resources/dashboard/system_status.php

@@ -42,12 +42,10 @@
 			//add half doughnut chart
 			?>
 			<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
-				<div style='width: 175px; height: 175px;'><canvas id='system_status_chart'></canvas></div>
+				<div><canvas id='system_status_chart' width='175px' height='175px'></canvas></div>
 			</div>
 
 			<script>
-				var system_status_chart_context = document.getElementById('system_status_chart').getContext('2d');
-
 				var system_status_chart_background_color;
 				if ('<?php echo $percent_disk_usage; ?>' <= 80) {
 					system_status_chart_background_color = '<?php echo $_SESSION['dashboard']['disk_usage_chart_main_background_color'][0]; ?>';
@@ -57,7 +55,11 @@
 					system_status_chart_background_color = '<?php echo $_SESSION['dashboard']['disk_usage_chart_main_background_color'][2]; ?>';
 				}
 
-				const system_status_chart_data = {
+				const system_status_chart = new Chart(
+					document.getElementById('system_status_chart').getContext('2d'),
+					{
+						type: 'doughnut',
+						data: {
 							datasets: [{
 								data: ['<?php echo $percent_disk_usage; ?>', 100 - '<?php echo $percent_disk_usage; ?>'],
 								backgroundColor: [system_status_chart_background_color,
@@ -66,11 +68,7 @@
 								borderWidth: '<?php echo $_SESSION['dashboard']['disk_usage_chart_border_width']['text']; ?>',
 								cutout: chart_cutout
 							}]
-				};
-
-				const system_status_chart_config = {
-					type: 'doughnut',
-					data: system_status_chart_data,
+						},
 						options: {
 							responsive: true,
 							maintainAspectRatio: false,
@@ -90,11 +88,7 @@
 							}
 						},
 						plugins: [chart_counter_2],
-				};
-
-				const system_status_chart = new Chart(
-					system_status_chart_context,
-					system_status_chart_config
+					}
 				);
 			</script>
 			<?php

app/voicemails/resources/dashboard/voicemails.php

@@ -60,14 +60,15 @@
 //add doughnut chart
 	?>
 	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
-		<div style='width: 175px; height: 175px;'><canvas id='new_messages_chart'></canvas></div>
+		<canvas id='new_messages_chart' width='175px' height='175px'></canvas>
 	</div>
 
-
 	<script>
-		var new_messages_chart_context = document.getElementById('new_messages_chart').getContext('2d');
-
-		const new_messages_chart_data = {
+		const new_messages_chart = new Chart(
+			document.getElementById('new_messages_chart').getContext('2d'),
+			{
+				type: 'doughnut',
+				data: {
 					datasets: [{
 						data: ['<?php echo $messages['new']; ?>', 0.00001],
 						backgroundColor: [
@@ -78,11 +79,7 @@
 						borderWidth: '<?php echo $_SESSION['dashboard']['new_messages_chart_border_width']['text']; ?>',
 						cutout: chart_cutout
 					}]
-		};
- 
-		const new_messages_chart_config = {
-			type: 'doughnut',
-			data: new_messages_chart_data,
+				},
 				options: {
 					responsive: true,
 					maintainAspectRatio: false,
@@ -101,11 +98,7 @@
 					}
 				},
 				plugins: [chart_counter],
-		};
-
-		const new_messages_chart = new Chart(
-			new_messages_chart_context,
-			new_messages_chart_config
+			}
 		);
 	</script>
 	<?php

app/xml_cdr/resources/dashboard/missed_calls.php

@@ -83,13 +83,15 @@
 //add doughnut chart
 	?>
 	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
-		<div style='width: 175px; height: 175px;'><canvas id='missed_calls_chart'></canvas></div>
+		<canvas id='missed_calls_chart' width='175px' height='175px'></canvas>
 	</div>
 
 	<script>
-		var missed_calls_chart_context = document.getElementById('missed_calls_chart').getContext('2d');
-
-		const missed_calls_chart_data = {
+		const missed_calls_chart = new Chart(
+			document.getElementById('missed_calls_chart').getContext('2d'),
+			{
+				type: 'doughnut',
+				data: {
 					datasets: [{
 						data: ['<?php echo $num_rows; ?>', 0.00001],
 						backgroundColor: [
@@ -100,11 +102,7 @@
 						borderWidth: '<?php echo $_SESSION['dashboard']['missed_calls_chart_border_Width']['text']; ?>',
 						cutout: chart_cutout
 					}]
-		};
-
-		const missed_calls_chart_config = {
-			type: 'doughnut',
-			data: missed_calls_chart_data,
+				},
 				options: {
 					responsive: true,
 					maintainAspectRatio: false,
@@ -122,11 +120,7 @@
 					}
 				},
 				plugins: [chart_counter],
-		};
-
-		const missed_calls_chart = new Chart(
-			missed_calls_chart_context,
-			missed_calls_chart_config
+			}
 		);
 	</script>
 	<?php

app/xml_cdr/resources/dashboard/recent_calls.php

@@ -85,13 +85,15 @@
 //add doughnut chart
 	?>
 	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
-		<div style='width: 175px; height: 175px;'><canvas id='recent_calls_chart'></canvas></div>
+		<canvas id='recent_calls_chart' width='175px' height='175px'></canvas>
 	</div>
 
 	<script>
-		var recent_calls_chart_context = document.getElementById('recent_calls_chart').getContext('2d');
-
-		const recent_calls_chart_data = {
+		const recent_calls_chart = new Chart(
+			document.getElementById('recent_calls_chart').getContext('2d'),
+			{
+				type: 'doughnut',
+				data: {
 					datasets: [{
 						data: ['<?php echo $num_rows; ?>', 0.00001],
 						backgroundColor: ['<?php echo $_SESSION['dashboard']['recent_calls_chart_main_background_color']['text']; ?>',
@@ -100,11 +102,7 @@
 						borderWidth: '<?php echo $_SESSION['dashboard']['recent_calls_chart_border_width']['text']; ?>',
 						cutout: chart_cutout
 					}]
-		};
-
-		const recent_calls_chart_config = {
-			type: 'doughnut',
-			data: recent_calls_chart_data,
+				},
 				options: {
 					responsive: true,
 					maintainAspectRatio: false,
@@ -122,11 +120,7 @@
 					}
 				},
 				plugins: [chart_counter],
-		};
-
-		const recent_calls_chart = new Chart(
-			recent_calls_chart_context,
-			recent_calls_chart_config
+			}
 		);
 	</script>
 	<?php