From b235c914bd8939290bb1ffbca8d9a5bbeed92e79 Mon Sep 17 00:00:00 2001
From: frytimo <tim@fusionpbx.com>
Date: Mon, 27 Oct 2025 18:38:50 -0300
Subject: [PATCH] Add new line chart for active calls (#7598)

* Row setting must be at least two
---
 .../resources/dashboard/active_calls.php      | 107 +++++++++++++++---
 .../resources/dashboard/config.php            |   2 +-
 2 files changed, 95 insertions(+), 14 deletions(-)

diff --git a/app/active_calls/resources/dashboard/active_calls.php b/app/active_calls/resources/dashboard/active_calls.php
index 374cffa2e5..5701888800 100644
--- a/app/active_calls/resources/dashboard/active_calls.php
+++ b/app/active_calls/resources/dashboard/active_calls.php
@@ -71,10 +71,18 @@ $row_style["1"] = "row_style1";
 //icon and count
 echo "<div class='hud_content' ".($widget_details_state == "disabled" ?: "onclick=\"$('#hud_active_calls_details').slideToggle('fast');\"").">\n";
 	echo "<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/active_calls/active_calls.php'\">".escape($widget_label)."</a></span>\n";
-	echo "<div style='position: relative; display: inline-block;'>\n";
-		echo "<span class='hud_stat'><i class=\"fas ".$widget_icon." \"></i></span>\n";
-		echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: ".(!empty($widget_number_background_color) ? $widget_number_background_color : '#03c04a')."; color: ".(!empty($widget_number_text_color) ? $widget_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
-	echo "</div>\n";
+	if ($widget_chart_type == 'line') {
+		echo "<div class='hud_chart' style='width: 90%; height: 80%'>\n";
+			echo "<canvas id='active_calls_chart'></canvas>\n";
+			echo "<input type=hidden id='calls_active_count' name='calls_active_count' value='0'>\n";
+		echo "</div>\n";
+	}
+	if ($widget_chart_type == 'icon') {
+		echo "<span class='hud_stat'>\n";
+			echo "<i class=\"fas " . $widget_icon . " \"></i>\n";
+			echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: " . (!empty($widget_number_background_color) ? $widget_number_background_color : '#03c04a') . "; color: " . (!empty($widget_number_text_color) ? $widget_number_text_color : '#ffffff') . "; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
+		echo "</span>\n";
+	}
 echo "</div>\n";
 
 //active call details
@@ -100,19 +108,88 @@ $version = md5(file_get_contents($project_root . '/app/active_calls/resources/ja
 echo "<script src='/app/active_calls/resources/javascript/arrows.js?v=$version'></script>\n";
 
 ?>
+<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming"></script>
 <script>
 	const timers = [];
 	const callsMap = new Map();
 
 	var showAll = false;
 	const websockets_domain_name = '<?= $_SESSION['domain_name'] ?>';
+    const active_calls_widget_chart_type = '<?= $widget_chart_type ?>';
 
 	// push PHP values into JS
 	const authToken = {
 		name: "<?= $token['name'] ?>",
 		hash: "<?= $token['hash'] ?>"
 	};
-
+    if (active_calls_widget_chart_type === 'line') {
+        const active_calls_count = document.getElementById('active_calls_chart').getContext('2d');
+        window.active_calls_chart = new Chart(active_calls_count, {
+            type: 'line',
+            elements: { point: { radius: 0, hoverRadius: 6, hitRadius: 10 } },
+            data: {
+                datasets: [
+                    {
+                        label: 'Active Calls',
+                        // borderColor: 'blue',
+                        // backgroundColor: rxColor + '33',
+                        fill: true,
+                        tension: 0.3,
+                        pointRadius: 0,
+                        spanGaps: true,
+                        data: []
+                    }
+                ]
+            },
+            options: {
+                // streaming usually looks best with animation off; tweak if you like a tiny slide
+                animation: false,
+                //parsing: {xAxisKey: 'x', yAxisKey: 'y'},
+                maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        type: 'realtime',
+                        realtime: {
+                            duration: 60000,   // last 60s
+                            refresh: 1000,     // redraw every 1s
+                            delay: 2000,       // 2s render delay to handle late packets
+                            onRefresh: (chart) => {
+                                chart.data.datasets[0].data.push({ x: Date.now(), y: get_count() });
+                            }
+                        },
+                        grid: {drawOnChartArea: false},
+                        ticks: {display: false},
+                    },
+                    y: {
+                        beginAtZero: true,
+                        grace: '10%',
+                        ticks: {
+                            precision: 0,  //whole numbers only
+                            callback: (v) => Number.isInteger(v) ? v : v.toFixed(0)
+                        },
+                        suggestedMax: 4  //becomes 5 because chart adds the 0 line as a y-axis value
+                    }
+                },
+                plugins: {
+                    legend: {display: false},
+                    tooltip: {
+                        enabled: true,
+                        mode: 'nearest',
+                        intersect: false,
+                        callbacks: {
+                            label: (ctx) => {
+                                const y = ctx?.parsed?.y;
+                                return Number.isFinite(y) ? `count: ${y}` : '';
+                            }
+                        },
+                        filter: (ctx) => Number.isFinite(ctx.parsed?.y)
+                    }
+                }
+            }
+        });
+    }
 <?php
 $user['extensions'] = [];
 // translate the current users assigned extensions
@@ -442,18 +519,22 @@ echo '<td id="duration_${uuid}"></td>'.PHP_EOL;
 
 	function updateCount() {
 		const calls_active_count = document.getElementById('calls_active_count');
-
-		let visibleCount = 0;
-		callsMap.forEach((row) => {
-			if (row.style.display !== 'none') {
-				visibleCount++;
-			}
-		});
+        if (!calls_active_count) {return;}
 
 		const totalCount = callsMap.size;
-		calls_active_count.textContent = `${visibleCount}`;
+		calls_active_count.textContent = get_count();
 	}
 
+    function get_count() {
+        let visibleCount = 0;
+        callsMap.forEach((row) => {
+            if (row.style.display !== 'none') {
+                visibleCount++;
+            }
+        });
+        return visibleCount;
+    }
+
 	function start_duration_timer(uuid, start_time) {
 		const td = document.getElementById(`duration_${uuid}`)
 
diff --git a/app/active_calls/resources/dashboard/config.php b/app/active_calls/resources/dashboard/config.php
index 8fe0044deb..298c5fc776 100644
--- a/app/active_calls/resources/dashboard/config.php
+++ b/app/active_calls/resources/dashboard/config.php
@@ -15,7 +15,7 @@ $array['dashboard_widgets'][$x]['widget_content'] = '';
 $array['dashboard_widgets'][$x]['widget_content_text_align'] = '';
 $array['dashboard_widgets'][$x]['widget_content_details'] = '';
 $array['dashboard_widgets'][$x]['widget_chart_type'] = 'icon';
-$array['dashboard_widgets'][$x]['widget_chart_type_options'] = ['icon'];
+$array['dashboard_widgets'][$x]['widget_chart_type_options'] = ['icon', 'line'];
 $array['dashboard_widgets'][$x]['widget_label_enabled'] = 'true';
 $array['dashboard_widgets'][$x]['widget_label_text_color'] = '#444444';
 $array['dashboard_widgets'][$x]['widget_label_text_color_hover'] = '';