Dashboard - Add text color settings (#6950)

* Dashboard - Add text color setting
This commit is contained in:
Alex
2024-04-17 15:01:54 -07:00
committed by GitHub
parent 37fd4692c1
commit 1412ed7f68
16 changed files with 398 additions and 209 deletions
@@ -231,7 +231,7 @@
$sql .= "FROM v_voicemail_messages WHERE domain_uuid = :domain_uuid ";
$parameters["domain_uuid"] = $_SESSION['domain_uuid'];
$result = $database->select($sql, $parameters, 'all');
if (is_array($result) && sizeof($result) != 0) {
foreach ($result as $row) {
$stats['domain']['messages']['total'] = $row['total'];
@@ -239,11 +239,11 @@
}
}
unset($sql, $result, $parameters);
$sql = "SELECT count(*) total, count(*) FILTER(WHERE message_status IS DISTINCT FROM 'saved') AS new ";
$sql .= "FROM v_voicemail_messages ";
$result = $database->select($sql, null, 'all');
if (is_array($result) && sizeof($result) != 0) {
foreach ($result as $row) {
$stats['system']['messages']['total'] = $row['total'];
@@ -315,31 +315,41 @@
],
borderColor: '<?php echo $_SESSION['dashboard']['system_counts_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['system_counts_chart_border_width']['text']; ?>',
cutout: chart_cutout
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $domain_total; ?>'
chart_number: {
text: '<?php echo $domain_total; ?>'
},
legend: {
display: true,
position: 'right',
reverse: true,
labels: {
usePointStyle: true,
pointStyle: 'rect'
pointStyle: 'rect',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
},
title: {
display: true,
text: '<?php echo $text['label-system_counts']; ?>'
text: '<?php echo $text['label-system_counts']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
}
},
plugins: [chart_counter],
plugins: [{
id: 'chart_number',
beforeDraw(chart, args, options){
const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
ctx.font = chart_text_size + 'px ' + chart_text_font;
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
ctx.fillText(options.text, width / 2, top + (height / 2));
ctx.save();
}
}]
}
);
</script>
@@ -47,7 +47,7 @@
//uptime
$result = shell_exec('uptime');
$load_average = sys_getloadavg();
}
//add half doughnut chart
@@ -57,15 +57,6 @@
</div>
<script>
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]; ?>';
} else if ('<?php echo $percent_cpu; ?>' <= 80) {
system_cpu_status_chart_background_color = '<?php echo $_SESSION['dashboard']['cpu_usage_chart_main_background_color'][1]; ?>';
} else if ('<?php echo $percent_cpu; ?>' > 80) {
system_cpu_status_chart_background_color = '<?php echo $_SESSION['dashboard']['cpu_usage_chart_main_background_color'][2]; ?>';
}
const system_cpu_status_chart = new Chart(
document.getElementById('system_cpu_status_chart').getContext('2d'),
{
@@ -74,37 +65,50 @@
datasets: [{
data: ['<?php echo $percent_cpu; ?>', 100 - '<?php echo $percent_cpu; ?>'],
backgroundColor: [
system_cpu_status_chart_background_color,
<?php
if ($percent_cpu <= 60) {
echo "'".$_SESSION['dashboard']['cpu_usage_chart_main_background_color'][0]."',\n";
} else if ($percent_cpu <= 80) {
echo "'".$_SESSION['dashboard']['cpu_usage_chart_main_background_color'][1]."',\n";
} else if ($percent_cpu > 80) {
echo "'".$_SESSION['dashboard']['cpu_usage_chart_main_background_color'][2]."',\n";
}
?>
'<?php echo $_SESSION['dashboard']['cpu_usage_chart_sub_background_color']['text']; ?>'
],
borderColor: '<?php echo $_SESSION['dashboard']['cpu_usage_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['cpu_usage_chart_border_width']['text']; ?>',
cutout: chart_cutout
borderWidth: '<?php echo $_SESSION['dashboard']['cpu_usage_chart_border_width']['text']; ?>'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: 270,
plugins: {
chart_counter_2: {
chart_text: '<?php echo $percent_cpu; ?>'
},
legend: {
display: false,
chart_number_2: {
text: '<?php echo $percent_cpu; ?>'
},
tooltip: {
yAlign: 'bottom',
displayColors: false,
},
title: {
display: true,
text: '<?php echo $text['label-cpu_usage']; ?>'
text: '<?php echo $text['label-cpu_usage']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
}
},
plugins: [chart_counter_2],
plugins: [{
id: 'chart_number_2',
beforeDraw(chart, args, options){
const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
ctx.font = (chart_text_size - 7) + 'px ' + chart_text_font;
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
ctx.fillText(options.text + '%', width / 2, top + (height / 2) + 35);
ctx.save();
}
}]
}
);
</script>
@@ -42,15 +42,6 @@
</div>
<script>
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]; ?>';
} else if ('<?php echo $percent_disk_usage; ?>' <= 90) {
system_status_chart_background_color = '<?php echo $_SESSION['dashboard']['disk_usage_chart_main_background_color'][1]; ?>';
} else if ('<?php echo $percent_disk_usage; ?>' > 90) {
system_status_chart_background_color = '<?php echo $_SESSION['dashboard']['disk_usage_chart_main_background_color'][2]; ?>';
}
const system_status_chart = new Chart(
document.getElementById('system_status_chart').getContext('2d'),
{
@@ -58,32 +49,47 @@
data: {
datasets: [{
data: ['<?php echo $percent_disk_usage; ?>', 100 - '<?php echo $percent_disk_usage; ?>'],
backgroundColor: [system_status_chart_background_color,
'<?php echo $_SESSION['dashboard']['disk_usage_chart_sub_background_color']['text']; ?>'],
backgroundColor: [
<?php
if ($percent_disk_usage <= 80) {
echo "'".$_SESSION['dashboard']['disk_usage_chart_main_background_color'][0]."',\n";
} else if ($percent_disk_usage <= 90) {
echo "'".$_SESSION['dashboard']['disk_usage_chart_main_background_color'][1]."',\n";
} else if ($percent_disk_usage > 90) {
echo "'".$_SESSION['dashboard']['disk_usage_chart_main_background_color'][2]."',\n";
}
?>
'<?php echo $_SESSION['dashboard']['disk_usage_chart_sub_background_color']['text']; ?>'
],
borderColor: '<?php echo $_SESSION['dashboard']['disk_usage_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['disk_usage_chart_border_width']['text']; ?>',
cutout: chart_cutout
borderWidth: '<?php echo $_SESSION['dashboard']['disk_usage_chart_border_width']['text']; ?>'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: 270,
plugins: {
chart_counter_2: {
chart_text: '<?php echo $percent_disk_usage; ?>'
},
legend: {
display: false
chart_number_2: {
text: '<?php echo $percent_disk_usage; ?>'
},
title: {
display: true,
text: '<?php echo $text['label-disk_usage']; ?>'
text: '<?php echo $text['label-disk_usage']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
}
},
plugins: [chart_counter_2],
plugins: [{
id: 'chart_number_2',
beforeDraw(chart, args, options){
const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
ctx.font = (chart_text_size - 7) + 'px ' + chart_text_font;
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
ctx.fillText(options.text + '%', width / 2, top + (height / 2) + 35);
ctx.save();
}
}]
}
);
</script>