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:
parent
310d4d00e7
commit
37ab508d1b
|
|
@ -71,43 +71,37 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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(
|
const domain_limits_chart = new Chart(
|
||||||
domain_limits_chart_context,
|
document.getElementById('domain_limits_chart').getContext('2d'),
|
||||||
domain_limits_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
|
|
@ -80,48 +80,42 @@
|
||||||
//add doughnut chart
|
//add doughnut chart
|
||||||
?>
|
?>
|
||||||
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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(
|
const switch_status_chart = new Chart(
|
||||||
switch_status_chart_context,
|
document.getElementById('switch_status_chart').getContext('2d'),
|
||||||
switch_status_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
|
|
@ -290,52 +290,46 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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(
|
const system_counts_chart = new Chart(
|
||||||
system_counts_chart_context,
|
document.getElementById('system_counts_chart').getContext('2d'),
|
||||||
system_counts_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
|
|
@ -57,12 +57,10 @@
|
||||||
//add half doughnut chart
|
//add half doughnut chart
|
||||||
?>
|
?>
|
||||||
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var system_cpu_status_chart_context = document.getElementById('system_cpu_status_chart').getContext('2d');
|
|
||||||
|
|
||||||
var system_cpu_status_chart_background_color;
|
var system_cpu_status_chart_background_color;
|
||||||
if ('<?php echo $percent_cpu; ?>' <= 60) {
|
if ('<?php echo $percent_cpu; ?>' <= 60) {
|
||||||
system_cpu_status_chart_background_color = '<?php echo $_SESSION['dashboard']['cpu_usage_chart_main_background_color'][0]; ?>';
|
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]; ?>';
|
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(
|
const system_cpu_status_chart = new Chart(
|
||||||
system_cpu_status_chart_context,
|
document.getElementById('system_cpu_status_chart').getContext('2d'),
|
||||||
system_cpu_status_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -42,12 +42,10 @@
|
||||||
//add half doughnut chart
|
//add half doughnut chart
|
||||||
?>
|
?>
|
||||||
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var system_status_chart_context = document.getElementById('system_status_chart').getContext('2d');
|
|
||||||
|
|
||||||
var system_status_chart_background_color;
|
var system_status_chart_background_color;
|
||||||
if ('<?php echo $percent_disk_usage; ?>' <= 80) {
|
if ('<?php echo $percent_disk_usage; ?>' <= 80) {
|
||||||
system_status_chart_background_color = '<?php echo $_SESSION['dashboard']['disk_usage_chart_main_background_color'][0]; ?>';
|
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]; ?>';
|
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(
|
const system_status_chart = new Chart(
|
||||||
system_status_chart_context,
|
document.getElementById('system_status_chart').getContext('2d'),
|
||||||
system_status_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
|
|
@ -60,52 +60,45 @@
|
||||||
//add doughnut chart
|
//add doughnut chart
|
||||||
?>
|
?>
|
||||||
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<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(
|
const new_messages_chart = new Chart(
|
||||||
new_messages_chart_context,
|
document.getElementById('new_messages_chart').getContext('2d'),
|
||||||
new_messages_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
|
|
@ -83,50 +83,44 @@
|
||||||
//add doughnut chart
|
//add doughnut chart
|
||||||
?>
|
?>
|
||||||
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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(
|
const missed_calls_chart = new Chart(
|
||||||
missed_calls_chart_context,
|
document.getElementById('missed_calls_chart').getContext('2d'),
|
||||||
missed_calls_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
|
|
@ -85,48 +85,42 @@
|
||||||
//add doughnut chart
|
//add doughnut chart
|
||||||
?>
|
?>
|
||||||
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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(
|
const recent_calls_chart = new Chart(
|
||||||
recent_calls_chart_context,
|
document.getElementById('recent_calls_chart').getContext('2d'),
|
||||||
recent_calls_chart_config
|
{
|
||||||
|
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>
|
</script>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue