nsinnovations/fusionpbx
2
0
Fork 0
mirror of https://github.com/fusionpbx/fusionpbx.git synced 2025-12-30 00:53:50 +00:00
Code Issues 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 15:57:45 -07: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

129
app/domain_limits/resources/dashboard/domain_limits.php
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'>";