Add chart to system counts (#6109)

app/system/resources/dashboard/system_counts.php

@@ -46,11 +46,58 @@
 			$show_stat = false;
 		}
 
-		echo "<span class='hud_title' ".$onclick.">".$text['label-system_counts']."</span>";
-
 		if ($show_stat) {
-			echo "<span class='hud_stat' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\">".$hud_stat."</span>";
-			echo "<span class='hud_stat_title' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\">".$hud_stat_title."</span>\n";
+			echo "
+				<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom:10px;'>
+					<div style='width: 250px; height: 175px;'><canvas id='system_count_chart'></canvas></div>
+				</div>
+
+				<script>
+					var system_count_bgc = ['#d4d4d4', '#2a9df4'];
+
+					const system_count_data = {
+						labels: ['InActive: ".$domain_inactive."', 'Active: ".$domain_active."'],
+						datasets: [{
+							data:[".$domain_inactive.", ".$domain_active."],
+							borderColor: 'rgba(0,0,0,0)',
+							backgroundColor: ['#d4d4d4', '#2a9df4'],
+							cutout: chart_cutout
+						}]
+					};
+
+					const system_count_config = {
+						type: 'doughnut',
+						data: system_count_data,
+						options: {
+						responsive: true,
+							maintainAspectRatio: false,
+							plugins: {
+								chart_counter: {
+									chart_text: ".$domain_total."
+								},
+								legend: {
+								position: 'right',
+									reverse: true,
+									labels: {
+										usePointStyle: true,
+										pointStyle: 'rect'
+									}
+								},
+								title: {
+									display: true,
+									text: '".$text['label-system_counts']."'
+								}
+							}
+						},
+						plugins: [chart_counter],
+					};
+
+					const system_count_chart = new Chart(
+						document.getElementById('system_count_chart'),
+						system_count_config
+					);
+				</script>
+			";
 		}
 
 		echo "<div class='hud_details hud_box' id='hud_system_counts_details'>";
@@ -194,4 +241,4 @@
 	//}
 	echo "			<span class='hud_expander' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 
-?>
+?>