From b77e2468d9978579b0c7d1763e1bdd27fe40375f Mon Sep 17 00:00:00 2001
From: AlexC <40072887+alexdcrane@users.noreply.github.com>
Date: Tue, 9 Nov 2021 22:27:06 -0700
Subject: [PATCH] Add chart to cdr missed calls (#6110)

---
 .../resources/dashboard/missed_calls.php      | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/app/xml_cdr/resources/dashboard/missed_calls.php b/app/xml_cdr/resources/dashboard/missed_calls.php
index 5f9b429635..533d880d01 100644
--- a/app/xml_cdr/resources/dashboard/missed_calls.php
+++ b/app/xml_cdr/resources/dashboard/missed_calls.php
@@ -73,10 +73,51 @@
 		$row_style["0"] = "row_style0";
 		$row_style["1"] = "row_style1";
 
-		echo "<span class='hud_title' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?call_result=missed'\">".$text['label-missed_calls']."</span>";
+		echo "
+			<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom:10px;'>
+				<div style='width: 175px; height: 175px;'><canvas id='missed_calls_chart'></canvas></div>
+			</div>
 
-		echo "<span class='hud_stat' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\">".$num_rows."</span>";
-		echo "<span class='hud_stat_title' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\">".$text['label-last_24_hours']."</span>\n";
+			<script>
+				var missed_calls_bgc = ['#FF595a', '#d4d4d4'];
+
+				const missed_calls_data = {
+					datasets: [{
+						data:[".$num_rows.", 0.00001],
+						borderColor: 'rgba(0,0,0,0)',
+						backgroundColor: [missed_calls_bgc[0], missed_calls_bgc[1]],
+						cutout: chart_cutout
+					}]
+				};
+
+				const missed_calls_config = {
+					type: 'doughnut',
+					data: missed_calls_data,
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						plugins: {
+							chart_counter: {
+								chart_text: ".$num_rows."
+							},
+							legend: {
+								display: false
+							},
+							title: {
+								display: true,
+								text: '".$text['label-missed_calls']."'
+							}
+						}
+					},
+					plugins: [chart_counter],
+				};
+
+				const missed_calls_chart = new Chart(
+					document.getElementById('missed_calls_chart'),
+					missed_calls_config
+				);
+			</script>
+		";
 
 		echo "<div class='hud_details hud_box' id='hud_missed_calls_details'>";
 		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";