From 37943912177b0d3277de3d2415c0df256f4762d6 Mon Sep 17 00:00:00 2001
From: Alex <40072887+alexdcrane@users.noreply.github.com>
Date: Tue, 19 Aug 2025 15:18:28 -0700
Subject: [PATCH] Dashboard Edit - Replace chart type dropdown with icon
 buttons (#7462)

* Dashboard Edit - Replace chart type dropdown with buttons with icons

* Update css.php

* Update template.php
---
 core/dashboard/dashboard_edit.php | 37 ++++++++++++++++++++++---------
 themes/default/css.php            | 24 ++++++++++++++++++++
 themes/default/template.php       |  2 +-
 3 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/core/dashboard/dashboard_edit.php b/core/dashboard/dashboard_edit.php
index 69c59fa0c6..cd371954fd 100644
--- a/core/dashboard/dashboard_edit.php
+++ b/core/dashboard/dashboard_edit.php
@@ -826,20 +826,37 @@
 		echo $text['label-dashboard_chart_type']."\n";
 		echo "</td>\n";
 		echo "<td class='vtable' style='position: relative;' align='left'>\n";
-		echo "	<select name='dashboard_chart_type' class='formfld'>\n";
-		echo "		<option value='doughnut'>".$text['label-doughnut']."</option>\n";
-		if ($dashboard_chart_type == 'line' || $dashboard_path == 'system/system_cpu_status') {
-			echo "		<option value='line' ".($dashboard_chart_type == "line" ? "selected='selected'" : null).">".$text['label-line']."</option>\n";
-		}
+		echo "	<div style='display: flex; gap: 8px;'>\n";
+		echo "		<label class='chart_type_button' title='".$text['label-number']."'>\n";
+		echo "			<input type='radio' style='display: none;' name='dashboard_chart_type' value='number' ".($dashboard_chart_type == 'number' ? 'checked' : '').">\n";
+		echo "			<i class='fas fa-hashtag'></i>\n";
+		echo "		</label>\n";
+		echo "		<label class='chart_type_button' title='".$text['label-doughnut']."'>\n";
+		echo "			<input type='radio' style='display: none;' name='dashboard_chart_type' value='doughnut' ".($dashboard_chart_type == 'doughnut' ? 'checked' : '').">\n";
+		echo "			<i class='fas fa-chart-pie'></i>\n";
+		echo "		</label>\n";
 		if ($dashboard_chart_type == "icon" || in_array($dashboard_path, ['active_calls/active_calls', 'domains/domains', 'xml_cdr/missed_calls', 'voicemails/voicemails', 'xml_cdr/recent_calls', 'registrations/registrations'])) {
-			echo "		<option value='icon' ".($dashboard_chart_type == "icon" ? "selected='selected'" : null).">".$text['label-icon']."</option>\n";
+			echo "		<label class='chart_type_button' title='".$text['label-icon']."'>\n";
+			echo "			<input type='radio' style='display: none;' name='dashboard_chart_type' value='icon' ".($dashboard_chart_type == 'icon' ? 'checked' : '').">\n";
+			echo "			<div style='position: relative; display: inline-block;'>\n";
+			echo "				<i class='fas fa-envelope'></i>\n";
+			echo "				<span style=\"background: #4099FF; color: #ffffff; font-size: 9px; font-weight: bold; text-align: center; position: absolute; top: 11px; left: 14px; padding: 0px 4px; border-radius: 10px; white-space: nowrap;\">1</span>\n";
+			echo "			</div>\n";
+			echo "		</label>\n";
+		}
+		if ($dashboard_chart_type == 'line' || $dashboard_path == 'system/system_cpu_status') {
+			echo "		<label class='chart_type_button' title='".$text['label-line']."'>\n";
+			echo "			<input type='radio' style='display: none;' name='dashboard_chart_type' value='line' ".($dashboard_chart_type == 'line' ? 'checked' : '').">\n";
+			echo "			<i class='fas fa-chart-line'></i>\n";
+			echo "		</label>\n";
 		}
-		echo "		<option value='number' ".($dashboard_chart_type == "number" ? "selected='selected'" : null).">".$text['label-number']."</option>\n";
 		if ($dashboard_chart_type == "progress_bar" || $dashboard_path == "system/system_status") {
-			echo "		<option value='progress_bar' ".($dashboard_chart_type == "progress_bar" ? "selected='selected'" : null).">".$text['label-progress_bar']."</option>\n";
+			echo "		<label class='chart_type_button' title='".$text['label-progress_bar']."'>\n";
+			echo "			<input type='radio' style='display: none;' name='dashboard_chart_type' value='progress_bar' ".($dashboard_chart_type == 'progress_bar' ? 'checked' : '').">\n";
+			echo "			<i class='fas fa-bars-progress'></i>\n";
+			echo "		</label>\n";
 		}
-		echo "	</select>\n";
-		echo "<br />\n";
+		echo "	</div>\n";
 		echo $text['description-dashboard_chart_type']."\n";
 		echo "</td>\n";
 		echo "</tr>\n";
diff --git a/themes/default/css.php b/themes/default/css.php
index 15ddbdc50a..d5335f5caf 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -3206,6 +3206,30 @@ else { //default: white
 		cursor: pointer;
 		}
 
+/* DASHBOARD EDIT **********************************************************************/
+
+	.chart_type_button {
+		padding: 8px 16px;
+		border: 1px solid rgba(0,0,0,0.1);
+		border-radius: 5px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		}
+
+	.chart_type_button:has(input:checked) {
+		background-color: #F0F4FE;
+		border-color: #8EACF9;
+		}
+
+	.chart_type_button:hover {
+		background-color: rgba(0,0,0,0.03);
+		}
+
+	.chart_type_button i {
+		font-size: 15pt;
+		}
+
 /* PLUGINS ********************************************************************/
 
 	/* bootstrap colorpicker  */
diff --git a/themes/default/template.php b/themes/default/template.php
index d962b13bb5..a5c582c4cc 100644
--- a/themes/default/template.php
+++ b/themes/default/template.php
@@ -20,7 +20,7 @@
 	<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-tempusdominus.min.css.php'>
 	<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-colorpicker.min.css.php'>
 	<link rel='stylesheet' type='text/css' href='{$project_path}/resources/fontawesome/css/all.min.css.php'>
-	<link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php?updated=202508060330'>
+	<link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php?updated=202508190400'>
 {*//link to custom css file *}
 	{if !empty($settings.theme.custom_css)}
 		<link rel='stylesheet' type='text/css' href='{$settings.theme.custom_css}'>