Dashboard - Add text color settings (#6950)

* Dashboard - Add text color setting
This commit is contained in:
Alex
2024-04-17 16:01:54 -06:00
committed by GitHub
parent 37fd4692c1
commit 1412ed7f68
16 changed files with 398 additions and 209 deletions
@@ -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>