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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 281 additions and 330 deletions

View File

@ -71,43 +71,37 @@
</div>
<script>
var domain_limits_chart_context = document.getElementById('domain_limits_chart').getContext('2d');
const domain_limits_chart_data = {
datasets: [{
data:['<?php echo $hud_stat; ?>', 0.00001],
borderColor: 'rgba(0,0,0,0)',
backgroundColor: ['#2a9df4', '#d4d4d4'],
cutout: chart_cutout
}]
};
const domain_limits_chart_config = {
type: 'doughnut',
data: domain_limits_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $hud_stat; ?>',
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-domain_limits']; ?>',
fontFamily: chart_text_font
}
}
},
plugins: [chart_counter],
};
const domain_limits_chart = new Chart(
domain_limits_chart_context,
domain_limits_chart_config
document.getElementById('domain_limits_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data:['<?php echo $hud_stat; ?>', 0.00001],
borderColor: 'rgba(0,0,0,0)',
backgroundColor: ['#2a9df4', '#d4d4d4'],
cutout: chart_cutout
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $hud_stat; ?>',
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-domain_limits']; ?>',
fontFamily: chart_text_font
}
}
},
plugins: [chart_counter],
}
);
</script>
<?php

View File

@ -80,48 +80,42 @@
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
<div style='width: 175px; height: 175px;'><canvas id='switch_status_chart'></canvas></div>
<canvas id='switch_status_chart' width='175px' height='175px'></canvas>
</div>
<script>
var switch_status_chart_context = document.getElementById('switch_status_chart').getContext('2d');
const switch_status_chart_data = {
datasets: [{
data: ['<?php echo $registrations; ?>', 0.00001],
backgroundColor: ['<?php echo $_SESSION['dashboard']['switch_status_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['switch_status_chart_sub_background_color']['text']; ?>'],
borderColor: '<?php echo $_SESSION['dashboard']['switch_status_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['switch_status_chart_border_width']['text']; ?>',
cutout: chart_cutout
}]
};
const switch_status_chart_config = {
type: 'doughnut',
data: switch_status_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $registrations; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-switch_status']; ?>'
}
}
},
plugins: [chart_counter],
};
const switch_status_chart = new Chart(
switch_status_chart_context,
switch_status_chart_config
document.getElementById('switch_status_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $registrations; ?>', 0.00001],
backgroundColor: ['<?php echo $_SESSION['dashboard']['switch_status_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['switch_status_chart_sub_background_color']['text']; ?>'],
borderColor: '<?php echo $_SESSION['dashboard']['switch_status_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['switch_status_chart_border_width']['text']; ?>',
cutout: chart_cutout
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $registrations; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-switch_status']; ?>'
}
}
},
plugins: [chart_counter],
}
);
</script>
<?php

View File

@ -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

View File

@ -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>

View File

@ -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

View File

@ -60,52 +60,45 @@
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
<div style='width: 175px; height: 175px;'><canvas id='new_messages_chart'></canvas></div>
<canvas id='new_messages_chart' width='175px' height='175px'></canvas>
</div>
<script>
var new_messages_chart_context = document.getElementById('new_messages_chart').getContext('2d');
const new_messages_chart_data = {
datasets: [{
data: ['<?php echo $messages['new']; ?>', 0.00001],
backgroundColor: [
'<?php echo $_SESSION['dashboard']['new_messages_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['new_messages_chart_sub_background_color']['text']; ?>'
],
borderColor: '<?php echo $_SESSION['dashboard']['new_messages_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['new_messages_chart_border_width']['text']; ?>',
cutout: chart_cutout
}]
};
const new_messages_chart_config = {
type: 'doughnut',
data: new_messages_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $messages['new']; ?>',
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-new_messages']; ?>',
fontFamily: chart_text_font
}
}
},
plugins: [chart_counter],
};
const new_messages_chart = new Chart(
new_messages_chart_context,
new_messages_chart_config
document.getElementById('new_messages_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $messages['new']; ?>', 0.00001],
backgroundColor: [
'<?php echo $_SESSION['dashboard']['new_messages_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['new_messages_chart_sub_background_color']['text']; ?>'
],
borderColor: '<?php echo $_SESSION['dashboard']['new_messages_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['new_messages_chart_border_width']['text']; ?>',
cutout: chart_cutout
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $messages['new']; ?>',
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-new_messages']; ?>',
fontFamily: chart_text_font
}
}
},
plugins: [chart_counter],
}
);
</script>
<?php

View File

@ -83,50 +83,44 @@
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
<div style='width: 175px; height: 175px;'><canvas id='missed_calls_chart'></canvas></div>
<canvas id='missed_calls_chart' width='175px' height='175px'></canvas>
</div>
<script>
var missed_calls_chart_context = document.getElementById('missed_calls_chart').getContext('2d');
const missed_calls_chart_data = {
datasets: [{
data: ['<?php echo $num_rows; ?>', 0.00001],
backgroundColor: [
'<?php echo $_SESSION['dashboard']['missed_calls_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['missed_calls_chart_sub_background_color']['text']; ?>'
],
borderColor: '<?php echo $_SESSION['dashboard']['missed_calls_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['missed_calls_chart_border_Width']['text']; ?>',
cutout: chart_cutout
}]
};
const missed_calls_chart_config = {
type: 'doughnut',
data: missed_calls_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $num_rows; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-missed_calls']; ?>'
}
}
},
plugins: [chart_counter],
};
const missed_calls_chart = new Chart(
missed_calls_chart_context,
missed_calls_chart_config
document.getElementById('missed_calls_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $num_rows; ?>', 0.00001],
backgroundColor: [
'<?php echo $_SESSION['dashboard']['missed_calls_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['missed_calls_chart_sub_background_color']['text']; ?>'
],
borderColor: '<?php echo $_SESSION['dashboard']['missed_calls_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['missed_calls_chart_border_Width']['text']; ?>',
cutout: chart_cutout
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $num_rows; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-missed_calls']; ?>'
}
}
},
plugins: [chart_counter],
}
);
</script>
<?php

View File

@ -85,48 +85,42 @@
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
<div style='width: 175px; height: 175px;'><canvas id='recent_calls_chart'></canvas></div>
<canvas id='recent_calls_chart' width='175px' height='175px'></canvas>
</div>
<script>
var recent_calls_chart_context = document.getElementById('recent_calls_chart').getContext('2d');
const recent_calls_chart_data = {
datasets: [{
data: ['<?php echo $num_rows; ?>', 0.00001],
backgroundColor: ['<?php echo $_SESSION['dashboard']['recent_calls_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['missed_calls_chart_sub_background_color']['text']; ?>'],
borderColor: '<?php echo $_SESSION['dashboard']['recent_calls_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['recent_calls_chart_border_width']['text']; ?>',
cutout: chart_cutout
}]
};
const recent_calls_chart_config = {
type: 'doughnut',
data: recent_calls_chart_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $num_rows; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-recent_calls']; ?>'
}
}
},
plugins: [chart_counter],
};
const recent_calls_chart = new Chart(
recent_calls_chart_context,
recent_calls_chart_config
document.getElementById('recent_calls_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $num_rows; ?>', 0.00001],
backgroundColor: ['<?php echo $_SESSION['dashboard']['recent_calls_chart_main_background_color']['text']; ?>',
'<?php echo $_SESSION['dashboard']['missed_calls_chart_sub_background_color']['text']; ?>'],
borderColor: '<?php echo $_SESSION['dashboard']['recent_calls_chart_border_color']['text']; ?>',
borderWidth: '<?php echo $_SESSION['dashboard']['recent_calls_chart_border_width']['text']; ?>',
cutout: chart_cutout
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
chart_counter: {
chart_text: '<?php echo $num_rows; ?>'
},
legend: {
display: false
},
title: {
display: true,
text: '<?php echo $text['label-recent_calls']; ?>'
}
}
},
plugins: [chart_counter],
}
);
</script>
<?php

File diff suppressed because one or more lines are too long