dbxe/fusionpbx
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dashboard - Add chart type setting (#6951)

Browse Source 
* Dashboard - Add chart type setting
This commit is contained in:
Alex
2024-04-18 16:57:45 -06:00
committed by GitHub
parent 07ff90f97c
commit 808e2cbe66
16 changed files with 765 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/call_forward/resources/dashboard/call_forward.php
+90 -87
View File
@@ -102,96 +102,99 @@
//begin widget
echo "<div class='hud_box'>\n";
//doughnut chart
echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_call_forward_details').slideToggle('fast');\">\n";
echo " <div style='width: 275px; height: 175px;'><canvas id='call_forward_chart'></canvas></div>\n";
echo "</div>\n";
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_call_forward_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['header-call_forward']."</span>\n";
echo "<script>\n";
echo " const call_forward_chart = new Chart(\n";
echo " document.getElementById('call_forward_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
if (permission_exists('do_not_disturb')) {
echo " '".$text['label-dnd'].": ".$stats['dnd']."',\n";
//doughnut chart
if ($dashboard_chart_type == "doughnut") {
echo "<div style='width: 275px; height: 143px;'><canvas id='call_forward_chart'></canvas></div>\n";
echo "<script>\n";
echo " const call_forward_chart = new Chart(\n";
echo " document.getElementById('call_forward_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
if (permission_exists('do_not_disturb')) {
echo " '".$text['label-dnd'].": ".$stats['dnd']."',\n";
}
if (permission_exists('follow_me')) {
echo " '".$text['label-follow_me'].": ".$stats['follow_me']."',\n";
}
if (permission_exists('call_forward')) {
echo " '".$text['label-call_forward'].": ".$stats['call_forward']."',\n";
}
echo " '".$text['label-active'].": ".$stats['active']."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
if (permission_exists('do_not_disturb')) {
echo " '".$stats['dnd']."',\n";
}
if (permission_exists('follow_me')) {
echo " '".$stats['follow_me']."',\n";
}
if (permission_exists('call_forward')) {
echo " '".$stats['call_forward']."',\n";
}
echo " '".$stats['active']."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
if (permission_exists('do_not_disturb')) {
echo " '".$_SESSION['dashboard']['call_forward_chart_color_do_not_disturb']['text']."',\n";
}
if (permission_exists('follow_me')) {
echo " '".$_SESSION['dashboard']['call_forward_chart_color_follow_me']['text']."',\n";
}
if (permission_exists('call_forward')) {
echo " '".$_SESSION['dashboard']['call_forward_chart_color_call_forward']['text']."',\n";
}
echo " '".$_SESSION['dashboard']['call_forward_chart_color_active']['text']."',\n";
echo " '".$_SESSION['dashboard']['call_forward_chart_color_active']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['call_forward_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['call_forward_chart_border_width']['text']."',\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$stats['call_forward']."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: true,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
}
if (permission_exists('follow_me')) {
echo " '".$text['label-follow_me'].": ".$stats['follow_me']."',\n";
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$stats['call_forward']."</span>";
}
if (permission_exists('call_forward')) {
echo " '".$text['label-call_forward'].": ".$stats['call_forward']."',\n";
}
echo " '".$text['label-active'].": ".$stats['active']."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
if (permission_exists('do_not_disturb')) {
echo " '".$stats['dnd']."',\n";
}
if (permission_exists('follow_me')) {
echo " '".$stats['follow_me']."',\n";
}
if (permission_exists('call_forward')) {
echo " '".$stats['call_forward']."',\n";
}
echo " '".$stats['active']."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
if (permission_exists('do_not_disturb')) {
echo " '".$_SESSION['dashboard']['call_forward_chart_color_do_not_disturb']['text']."',\n";
}
if (permission_exists('follow_me')) {
echo " '".$_SESSION['dashboard']['call_forward_chart_color_follow_me']['text']."',\n";
}
if (permission_exists('call_forward')) {
echo " '".$_SESSION['dashboard']['call_forward_chart_color_call_forward']['text']."',\n";
}
echo " '".$_SESSION['dashboard']['call_forward_chart_color_active']['text']."',\n";
echo " '".$_SESSION['dashboard']['call_forward_chart_color_active']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['call_forward_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['call_forward_chart_border_width']['text']."',\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$stats['call_forward']."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: true,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " },\n";
echo " title: {\n";
echo " text: '".$text['header-call_forward']."',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
echo " </div>\n";
//details
echo "<div class='hud_details hud_box' id='hud_call_forward_details'>";
app/domain_limits/resources/dashboard/domain_limits.php
+66 -63
View File
@@ -110,70 +110,73 @@
$hud_stat_title = $text['label-destinations'];
}
//doughnut chart
echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\">\n";
echo " <div style='width: 275px; height: 175px;'><canvas id='domain_limits_chart'></canvas></div>\n";
echo "</div>\n";
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['label-domain_limits']."</span>\n";
echo "<script>\n";
echo " const domain_limits_chart = new Chart(\n";
echo " document.getElementById('domain_limits_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
echo " '".$hud_stat_title.": ".$hud_stat_used."',\n";
echo " '".$text['label-remaining'].": ".$hud_stat_remaining."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
echo " '".$hud_stat_used."',\n";
echo " '".$hud_stat_remaining."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
echo " '".$_SESSION['dashboard']['domain_limits_chart_color_used']['text']."',\n";
echo " '".$_SESSION['dashboard']['domain_limits_chart_color_remaining']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['domain_limits_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['domain_limits_chart_border_width']['text']."',\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$hud_stat_used."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: false,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect'\n";
echo " }\n";
echo " },\n";
echo " title: {\n";
echo " text: '".$text['label-domain_limits']."',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
//doughnut chart
if ($dashboard_chart_type == "doughnut") {
echo "<div style='width: 275px; height: 143px;'><canvas id='domain_limits_chart'></canvas></div>\n";
echo "<script>\n";
echo " const domain_limits_chart = new Chart(\n";
echo " document.getElementById('domain_limits_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
echo " '".$hud_stat_title.": ".$hud_stat_used."',\n";
echo " '".$text['label-remaining'].": ".$hud_stat_remaining."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
echo " '".$hud_stat_used."',\n";
echo " '".$hud_stat_remaining."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
echo " '".$_SESSION['dashboard']['domain_limits_chart_color_used']['text']."',\n";
echo " '".$_SESSION['dashboard']['domain_limits_chart_color_remaining']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['domain_limits_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['domain_limits_chart_border_width']['text']."',\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$hud_stat_used."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: false,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect'\n";
echo " }\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$hud_stat_used."</span>";
}
echo " </div>\n";
//details
echo "<div class='hud_details hud_box' id='hud_domain_limits_details'>";
app/extensions/resources/dashboard/caller_id.php
+67 -64
View File
@@ -173,71 +173,74 @@
//caller id
echo "<div class='hud_box'>\n";
//doughnut chart
echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_caller_id_details').slideToggle('fast');\">\n";
echo " <div style='width: 275px; height: 175px;'><canvas id='caller_id_chart'></canvas></div>\n";
echo "</div>\n";
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_caller_id_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['label-caller_id_number']."</span>\n";
echo "<script>\n";
echo " const caller_id_chart = new Chart(\n";
echo " document.getElementById('caller_id_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
echo " '".$text['label-defined'].": ".$stats['defined']."',\n";
echo " '".$text['label-undefined'].": ".$stats['undefined']."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
echo " '".$stats['defined']."',\n";
echo " '".$stats['undefined']."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
echo " '".$_SESSION['dashboard']['caller_id_chart_color_defined']['text']."',\n";
echo " '".$_SESSION['dashboard']['caller_id_chart_color_undefined']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['caller_id_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['caller_id_chart_border_width']['text']."'\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$stats['undefined']."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: true,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " },\n";
echo " title: {\n";
echo " text: '".$text['label-caller_id_number']."',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
//doughnut chart
if ($dashboard_chart_type == "doughnut") {
echo "<div style='width: 275px; height: 143px;'><canvas id='caller_id_chart'></canvas></div>\n";
echo "<script>\n";
echo " const caller_id_chart = new Chart(\n";
echo " document.getElementById('caller_id_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
echo " '".$text['label-defined'].": ".$stats['defined']."',\n";
echo " '".$text['label-undefined'].": ".$stats['undefined']."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
echo " '".$stats['defined']."',\n";
echo " '".$stats['undefined']."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
echo " '".$_SESSION['dashboard']['caller_id_chart_color_defined']['text']."',\n";
echo " '".$_SESSION['dashboard']['caller_id_chart_color_undefined']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['caller_id_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['caller_id_chart_border_width']['text']."'\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$stats['undefined']."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: true,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$stats['undefined']."</span>";
}
echo " </div>\n";
//details
echo "<form id='form_list_caller_id' method='post' action='".PROJECT_PATH."/app/extensions/resources/dashboard/caller_id.php'>\n";
app/ring_groups/resources/dashboard/ring_group_forward.php
+72 -64
View File
@@ -152,72 +152,80 @@
//ring group forward
echo "<div class='hud_box'>\n";
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['header-ring-group-forward']."</span>\n";
//doughnut chart
echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\">\n";
echo " <div style='width: 275px; height: 175px;'><canvas id='ring_group_forward_chart'></canvas></div>\n";
echo "</div>\n";
echo "<script>\n";
echo " const ring_group_forward_chart = new Chart(\n";
echo " document.getElementById('ring_group_forward_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
echo " '".$text['label-active'].": ".$stats['active']."',\n";
echo " '".$text['label-forwarding'].": ".$stats['forwarding']."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
echo " '".$stats['active']."',\n";
echo " '".$stats['forwarding']."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
echo " '".$_SESSION['dashboard']['ring_group_forward_chart_color_active']['text']."',\n";
echo " '".$_SESSION['dashboard']['ring_group_forward_chart_color_forwarding']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['ring_group_forward_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['ring_group_forward_chart_border_width']['text']."',\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$stats['forwarding']."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: true,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " },\n";
echo " title: {\n";
echo " text: '".$text['header-ring-group-forward']."',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
if ($dashboard_chart_type == "doughnut") {
echo " <div style='width: 275px; height: 143px;'><canvas id='ring_group_forward_chart'></canvas></div>\n";
echo "<script>\n";
echo " const ring_group_forward_chart = new Chart(\n";
echo " document.getElementById('ring_group_forward_chart').getContext('2d'),\n";
echo " {\n";
echo " type: 'doughnut',\n";
echo " data: {\n";
echo " labels: [\n";
echo " '".$text['label-active'].": ".$stats['active']."',\n";
echo " '".$text['label-forwarding'].": ".$stats['forwarding']."',\n";
echo " ],\n";
echo " datasets: [{\n";
echo " data: [\n";
echo " '".$stats['active']."',\n";
echo " '".$stats['forwarding']."',\n";
echo " 0.00001,\n";
echo " ],\n";
echo " backgroundColor: [\n";
echo " '".$_SESSION['dashboard']['ring_group_forward_chart_color_active']['text']."',\n";
echo " '".$_SESSION['dashboard']['ring_group_forward_chart_color_forwarding']['text']."',\n";
echo " ],\n";
echo " borderColor: '".$_SESSION['dashboard']['ring_group_forward_chart_border_color']['text']."',\n";
echo " borderWidth: '".$_SESSION['dashboard']['ring_group_forward_chart_border_width']['text']."',\n";
echo " }]\n";
echo " },\n";
echo " options: {\n";
echo " plugins: {\n";
echo " chart_number: {\n";
echo " text: '".$stats['forwarding']."'\n";
echo " },\n";
echo " legend: {\n";
echo " display: true,\n";
echo " position: 'right',\n";
echo " reverse: true,\n";
echo " labels: {\n";
echo " usePointStyle: true,\n";
echo " pointStyle: 'rect',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " },\n";
echo " title: {\n";
echo " text: '".$text['header-ring-group-forward']."',\n";
echo " color: '".$dashboard_heading_text_color."'\n";
echo " }\n";
echo " }\n";
echo " },\n";
echo " plugins: [{\n";
echo " id: 'chart_number',\n";
echo " beforeDraw(chart, args, options){\n";
echo " const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
echo " ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
echo " ctx.textBaseline = 'middle';\n";
echo " ctx.textAlign = 'center';\n";
echo " ctx.fillStyle = '".$dashboard_number_text_color."';\n";
echo " ctx.fillText(options.text, width / 2, top + (height / 2));\n";
echo " ctx.save();\n";
echo " }\n";
echo " }]\n";
echo " }\n";
echo " );\n";
echo "</script>\n";
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$stats['forwarding']."</span>";
}
echo " </div>\n";
//details
if (permission_exists('ring_group_forward')) {
app/switch/resources/dashboard/switch_status.php
+48 -45
View File
@@ -76,53 +76,56 @@
$registrations = $registration->count();
}
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick="$('#hud_switch_status_details').slideToggle('fast');">
<canvas id='switch_status_chart' width='175px' height='175px'></canvas>
</div>
echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_switch_status_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['label-switch_status']."</span>\n";
<script>
const switch_status_chart = new Chart(
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']; ?>'
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $registrations; ?>'
},
title: {
text: '<?php echo $text['label-switch_status']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
if ($dashboard_chart_type == "doughnut") {
//add doughnut chart
?>
<div style='height: 143px;'><canvas id='switch_status_chart'></canvas></div>
<script>
const switch_status_chart = new Chart(
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']; ?>'
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $registrations; ?>'
}
}
}
},
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>
<?php
},
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>
<?php
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$registrations."</span>";
}
echo " </div>\n";
//show the content
echo "<div class='hud_details hud_box' id='hud_switch_status_details'>";
app/system/resources/dashboard/system_counts.php
+61 -57
View File
@@ -294,66 +294,70 @@
echo "<div class='hud_box'>\n";
if ($show_stat) {
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick="$('#hud_system_counts_details').slideToggle('fast');">
<div style='width: 250px; height: 175px;'><canvas id='system_counts_chart'></canvas></div>
</div>
<script>
const system_counts_chart = new Chart(
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']; ?>',
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $domain_total; ?>'
},
legend: {
display: true,
position: 'right',
reverse: true,
labels: {
usePointStyle: true,
pointStyle: 'rect',
color: '<?php echo $dashboard_heading_text_color; ?>'
echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-system_counts']."</span>\n";
if ($dashboard_chart_type == "doughnut") {
//add doughnut chart
?>
<div style='height: 143px;'><canvas id='system_counts_chart'></canvas></div>
<script>
const system_counts_chart = new Chart(
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']; ?>',
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $domain_total; ?>'
},
legend: {
display: true,
position: 'right',
reverse: true,
labels: {
usePointStyle: true,
pointStyle: 'rect',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
}
},
title: {
text: '<?php echo $text['label-system_counts']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
}
},
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>
<?php
},
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>
<?php
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$domain_total."</span>";
}
echo " </div>\n";
}
echo "<div class='hud_details hud_box' id='hud_system_counts_details'>";
app/system/resources/dashboard/system_cpu_status.php
+62 -60
View File
@@ -51,69 +51,71 @@
}
//add half doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick="$('#hud_system_cpu_status_details').slideToggle('fast');">
<div><canvas id='system_cpu_status_chart' width='175px' height='175px' ></canvas></div>
</div>
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-cpu_usage']."</span>\n";
<script>
const system_cpu_status_chart = new Chart(
document.getElementById('system_cpu_status_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $percent_cpu; ?>', 100 - '<?php echo $percent_cpu; ?>'],
backgroundColor: [
<?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";
if ($dashboard_chart_type == "doughnut") {
?>
<div style='width: 175px; height: 143px;'><canvas id='system_cpu_status_chart'></canvas></div>
<script>
const system_cpu_status_chart = new Chart(
document.getElementById('system_cpu_status_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $percent_cpu; ?>', 100 - '<?php echo $percent_cpu; ?>'],
backgroundColor: [
<?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']; ?>'
}]
},
options: {
circumference: 180,
rotation: 270,
plugins: {
chart_number_2: {
text: '<?php echo round($percent_cpu); ?>'
},
tooltip: {
yAlign: 'bottom',
displayColors: false,
}
?>
'<?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']; ?>'
}]
},
options: {
circumference: 180,
rotation: 270,
plugins: {
chart_number_2: {
text: '<?php echo $percent_cpu; ?>'
},
tooltip: {
yAlign: 'bottom',
displayColors: false,
},
title: {
text: '<?php echo $text['label-cpu_usage']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
}
},
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>
<?php
},
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>
<?php
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".round($percent_cpu)."%</span>";
}
echo " </div>\n";
//show the content
echo "<div class='hud_details hud_box' id='hud_system_cpu_status_details'>";
app/system/resources/dashboard/system_status.php
+60 -56
View File
@@ -35,65 +35,69 @@
}
if (!empty($percent_disk_usage)) {
//add half doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick="$('#hud_system_status_details').slideToggle('fast');">
<div><canvas id='system_status_chart' width='175px' height='175px'></canvas></div>
</div>
<script>
const system_status_chart = new Chart(
document.getElementById('system_status_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $percent_disk_usage; ?>', 100 - '<?php echo $percent_disk_usage; ?>'],
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";
//add half doughnut chart
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_system_status_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-disk_usage']."</span>\n";
if ($dashboard_chart_type == "doughnut") {
?>
<div style='width: 175px; height: 143px;'><canvas id='system_status_chart'></canvas></div>
<script>
const system_status_chart = new Chart(
document.getElementById('system_status_chart').getContext('2d'),
{
type: 'doughnut',
data: {
datasets: [{
data: ['<?php echo $percent_disk_usage; ?>', 100 - '<?php echo $percent_disk_usage; ?>'],
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']; ?>'
}]
},
options: {
circumference: 180,
rotation: 270,
plugins: {
chart_number_2: {
text: '<?php echo round($percent_disk_usage); ?>'
}
?>
'<?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']; ?>'
}]
},
options: {
circumference: 180,
rotation: 270,
plugins: {
chart_number_2: {
text: '<?php echo $percent_disk_usage; ?>'
},
title: {
text: '<?php echo $text['label-disk_usage']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
}
}
},
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>
<?php
},
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>
<?php
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".round($percent_disk_usage)."%</span>";
}
echo " </div>\n";
}
}
app/xml_cdr/resources/dashboard/missed_calls.php
+50 -47
View File
@@ -90,55 +90,58 @@
//missed calls
echo "<div class='hud_box'>\n";
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick="$('#hud_missed_calls_details').slideToggle('fast');">
<canvas id='missed_calls_chart' width='175px' height='175px'></canvas>
</div>
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?call_result=missed'\">".$text['label-missed_calls']."</span>";
<script>
const missed_calls_chart = new Chart(
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']; ?>',
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $num_rows; ?>'
},
title: {
text: '<?php echo $text['label-missed_calls']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
if ($dashboard_chart_type == "doughnut") {
//add doughnut chart
?>
<div style='height: 143px;'><canvas id='missed_calls_chart'></canvas></div>
<script>
const missed_calls_chart = new Chart(
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']; ?>',
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $num_rows; ?>'
}
}
}
},
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>
<?php
},
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>
<?php
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\">".$num_rows."</span>";
}
echo " </div>\n";
echo "<div class='hud_details hud_box' id='hud_missed_calls_details'>";
echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
app/xml_cdr/resources/dashboard/recent_calls.php
+49 -47
View File
@@ -86,55 +86,57 @@
//recent calls
echo "<div class='hud_box'>\n";
//add doughnut chart
?>
<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick="$('#hud_recent_calls_details').slideToggle('fast');">
<canvas id='recent_calls_chart' width='175px' height='175px'></canvas>
</div>
echo " <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\">\n";
echo " <span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php';\">".$text['label-recent_calls']."</span>\n";
<script>
const recent_calls_chart = new Chart(
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']['recent_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']; ?>'
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $num_rows; ?>'
},
title: {
text: '<?php echo $text['label-recent_calls']; ?>',
color: '<?php echo $dashboard_heading_text_color; ?>'
if ($dashboard_chart_type == "doughnut") {
//add doughnut chart
?>
<div style='height: 143px;'><canvas id='recent_calls_chart'></canvas></div>
<script>
const recent_calls_chart = new Chart(
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']['recent_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']; ?>'
}]
},
options: {
plugins: {
chart_number: {
text: '<?php echo $num_rows; ?>'
}
}
}
},
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>
<?php
},
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>
<?php
}
if ($dashboard_chart_type == "none") {
echo " <span class='hud_stat' style='color: ".$dashboard_number_text_color.";' onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\">".$num_rows."</span>";
}
echo " </div>\n";
echo "<div class='hud_details hud_box' id='hud_recent_calls_details'>";
echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";