Update chart.js v3 to v4 (#6529)

* Update chart.min.js

* Update missed_calls.php

* Update recent_calls.php

* Update system_counts.php

* Update system_cpu_status.php

* Update system_status.php

* Update domain_limits.php

* Update voicemails.php
This commit is contained in:
Alex
2023-01-06 13:18:53 -07:00
committed by GitHub
parent 310d4d00e7
commit 37ab508d1b
9 changed files with 281 additions and 330 deletions
@@ -290,52 +290,46 @@
</div>
<script>
var system_counts_chart_context = document.getElementById('system_counts_chart').getContext('2d');
const system_counts_chart_data = {
labels: ['<?php echo $text['label-active']; ?>: <?php echo $domain_active; ?>', '<?php echo $text['label-inactive']; ?>: <?php echo $domain_inactive; ?>'],
datasets: [{
data: ['<?php echo $domain_active; ?>', '<?php echo $domain_inactive; ?>'],
backgroundColor: [
'<?php echo $_SESSION['dashboard']['system_counts_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['system_counts_chart_sub_background_color']['text']; ?>'
],
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
}]
};
const system_counts_chart_config = {
type: 'doughnut',
data: system_counts_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $domain_total; ?>'
},
legend: {
position: 'right',
reverse: true,
labels: {
usePointStyle: true,
pointStyle: 'rect'
}
},
title: {
display: true,
text: '<?php echo $text['label-system_counts']; ?>'
}
}
},
plugins: [chart_counter],
};
const system_counts_chart = new Chart(
system_counts_chart_context,
system_counts_chart_config
document.getElementById('system_counts_chart').getContext('2d'),
{
type: 'doughnut',
data: {
labels: ['<?php echo $text['label-active']; ?>: <?php echo $domain_active; ?>', '<?php echo $text['label-inactive']; ?>: <?php echo $domain_inactive; ?>'],
datasets: [{
data: ['<?php echo $domain_active; ?>', '<?php echo $domain_inactive; ?>'],
backgroundColor: [
'<?php echo $_SESSION['dashboard']['system_counts_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['system_counts_chart_sub_background_color']['text']; ?>'
],
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; ?>'
},
legend: {
position: 'right',
reverse: true,
labels: {
usePointStyle: true,
pointStyle: 'rect'
}
},
title: {
display: true,
text: '<?php echo $text['label-system_counts']; ?>'
}
}
},
plugins: [chart_counter],
}
);
</script>
<?php
@@ -57,12 +57,10 @@
//add half doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
<div style='width: 175px; height: 175px; margin: 0 auto;'><canvas id='system_cpu_status_chart'></canvas></div>
<div><canvas id='system_cpu_status_chart' width='175px' height='175px' ></canvas></div>
</div>
<script>
var system_cpu_status_chart_context = document.getElementById('system_cpu_status_chart').getContext('2d');
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]; ?>';
@@ -72,50 +70,46 @@
system_cpu_status_chart_background_color = '<?php echo $_SESSION['dashboard']['cpu_usage_chart_main_background_color'][2]; ?>';
}
const system_cpu_status_chart_data = {
datasets: [{
data: ['<?php echo $percent_cpu; ?>', 100 - '<?php echo $percent_cpu; ?>'],
backgroundColor: [
system_cpu_status_chart_background_color,
'<?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
}]
};
const system_cpu_status_chart_config = {
type: 'doughnut',
data: system_cpu_status_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: 270,
plugins: {
chart_counter_2: {
chart_text: '<?php echo $percent_cpu; ?>'
},
legend: {
display: false,
},
tooltip: {
yAlign: 'bottom',
displayColors: false,
},
title: {
display: true,
text: '<?php echo $text['label-cpu_usage']; ?>'
}
}
},
plugins: [chart_counter_2],
};
const system_cpu_status_chart = new Chart(
system_cpu_status_chart_context,
system_cpu_status_chart_config
document.getElementById('system_cpu_status_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $percent_cpu; ?>', 100 - '<?php echo $percent_cpu; ?>'],
backgroundColor: [
system_cpu_status_chart_background_color,
'<?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
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: 270,
plugins: {
chart_counter_2: {
chart_text: '<?php echo $percent_cpu; ?>'
},
legend: {
display: false,
},
tooltip: {
yAlign: 'bottom',
displayColors: false,
},
title: {
display: true,
text: '<?php echo $text['label-cpu_usage']; ?>'
}
}
},
plugins: [chart_counter_2],
}
);
</script>
@@ -42,12 +42,10 @@
//add half doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
<div style='width: 175px; height: 175px;'><canvas id='system_status_chart'></canvas></div>
<div><canvas id='system_status_chart' width='175px' height='175px'></canvas></div>
</div>
<script>
var system_status_chart_context = document.getElementById('system_status_chart').getContext('2d');
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]; ?>';
@@ -57,44 +55,40 @@
system_status_chart_background_color = '<?php echo $_SESSION['dashboard']['disk_usage_chart_main_background_color'][2]; ?>';
}
const system_status_chart_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']; ?>'],
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
}]
};
const system_status_chart_config = {
type: 'doughnut',
data: system_status_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: 270,
plugins: {
chart_counter_2: {
chart_text: '<?php echo $percent_disk_usage; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-disk_usage']; ?>'
}
}
},
plugins: [chart_counter_2],
};
const system_status_chart = new Chart(
system_status_chart_context,
system_status_chart_config
document.getElementById('system_status_chart').getContext('2d'),
{
type: 'doughnut',
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']; ?>'],
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
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: 270,
plugins: {
chart_counter_2: {
chart_text: '<?php echo $percent_disk_usage; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-disk_usage']; ?>'
}
}
},
plugins: [chart_counter_2],
}
);
</script>
<?php