mirror of
https://github.com/fusionpbx/fusionpbx.git
synced 2025-12-30 00:53:50 +00:00
Add new line chart for active calls (#7598)
* Row setting must be at least two
This commit is contained in:
frytimo
@@ -71,10 +71,18 @@ $row_style["1"] = "row_style1";
|
||||
//icon and count
|
||||
echo "<div class='hud_content' ".($widget_details_state == "disabled" ?: "onclick=\"$('#hud_active_calls_details').slideToggle('fast');\"").">\n";
|
||||
echo "<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/active_calls/active_calls.php'\">".escape($widget_label)."</a></span>\n";
|
||||
echo "<div style='position: relative; display: inline-block;'>\n";
|
||||
echo "<span class='hud_stat'><i class=\"fas ".$widget_icon." \"></i></span>\n";
|
||||
echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: ".(!empty($widget_number_background_color) ? $widget_number_background_color : '#03c04a')."; color: ".(!empty($widget_number_text_color) ? $widget_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
|
||||
echo "</div>\n";
|
||||
if ($widget_chart_type == 'line') {
|
||||
echo "<div class='hud_chart' style='width: 90%; height: 80%'>\n";
|
||||
echo "<canvas id='active_calls_chart'></canvas>\n";
|
||||
echo "<input type=hidden id='calls_active_count' name='calls_active_count' value='0'>\n";
|
||||
echo "</div>\n";
|
||||
}
|
||||
if ($widget_chart_type == 'icon') {
|
||||
echo "<span class='hud_stat'>\n";
|
||||
echo "<i class=\"fas " . $widget_icon . " \"></i>\n";
|
||||
echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: " . (!empty($widget_number_background_color) ? $widget_number_background_color : '#03c04a') . "; color: " . (!empty($widget_number_text_color) ? $widget_number_text_color : '#ffffff') . "; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
|
||||
echo "</span>\n";
|
||||
}
|
||||
echo "</div>\n";
|
||||
|
||||
//active call details
|
||||
@@ -100,19 +108,88 @@ $version = md5(file_get_contents($project_root . '/app/active_calls/resources/ja
|
||||
echo "<script src='/app/active_calls/resources/javascript/arrows.js?v=$version'></script>\n";
|
||||
|
||||
?>
|
||||
<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming"></script>
|
||||
<script>
|
||||
const timers = [];
|
||||
const callsMap = new Map();
|
||||
|
||||
var showAll = false;
|
||||
const websockets_domain_name = '<?= $_SESSION['domain_name'] ?>';
|
||||
const active_calls_widget_chart_type = '<?= $widget_chart_type ?>';
|
||||
|
||||
// push PHP values into JS
|
||||
const authToken = {
|
||||
name: "<?= $token['name'] ?>",
|
||||
hash: "<?= $token['hash'] ?>"
|
||||
};
|
||||
|
||||
if (active_calls_widget_chart_type === 'line') {
|
||||
const active_calls_count = document.getElementById('active_calls_chart').getContext('2d');
|
||||
window.active_calls_chart = new Chart(active_calls_count, {
|
||||
type: 'line',
|
||||
elements: { point: { radius: 0, hoverRadius: 6, hitRadius: 10 } },
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Active Calls',
|
||||
// borderColor: 'blue',
|
||||
// backgroundColor: rxColor + '33',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 0,
|
||||
spanGaps: true,
|
||||
data: []
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
// streaming usually looks best with animation off; tweak if you like a tiny slide
|
||||
animation: false,
|
||||
//parsing: {xAxisKey: 'x', yAxisKey: 'y'},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'realtime',
|
||||
realtime: {
|
||||
duration: 60000, // last 60s
|
||||
refresh: 1000, // redraw every 1s
|
||||
delay: 2000, // 2s render delay to handle late packets
|
||||
onRefresh: (chart) => {
|
||||
chart.data.datasets[0].data.push({ x: Date.now(), y: get_count() });
|
||||
}
|
||||
},
|
||||
grid: {drawOnChartArea: false},
|
||||
ticks: {display: false},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grace: '10%',
|
||||
ticks: {
|
||||
precision: 0, //whole numbers only
|
||||
callback: (v) => Number.isInteger(v) ? v : v.toFixed(0)
|
||||
},
|
||||
suggestedMax: 4 //becomes 5 because chart adds the 0 line as a y-axis value
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {display: false},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
mode: 'nearest',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (ctx) => {
|
||||
const y = ctx?.parsed?.y;
|
||||
return Number.isFinite(y) ? `count: ${y}` : '';
|
||||
}
|
||||
},
|
||||
filter: (ctx) => Number.isFinite(ctx.parsed?.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
<?php
|
||||
$user['extensions'] = [];
|
||||
// translate the current users assigned extensions
|
||||
@@ -442,18 +519,22 @@ echo '<td id="duration_${uuid}"></td>'.PHP_EOL;
|
||||
|
||||
function updateCount() {
|
||||
const calls_active_count = document.getElementById('calls_active_count');
|
||||
|
||||
let visibleCount = 0;
|
||||
callsMap.forEach((row) => {
|
||||
if (row.style.display !== 'none') {
|
||||
visibleCount++;
|
||||
}
|
||||
});
|
||||
if (!calls_active_count) {return;}
|
||||
|
||||
const totalCount = callsMap.size;
|
||||
calls_active_count.textContent = `${visibleCount}`;
|
||||
calls_active_count.textContent = get_count();
|
||||
}
|
||||
|
||||
function get_count() {
|
||||
let visibleCount = 0;
|
||||
callsMap.forEach((row) => {
|
||||
if (row.style.display !== 'none') {
|
||||
visibleCount++;
|
||||
}
|
||||
});
|
||||
return visibleCount;
|
||||
}
|
||||
|
||||
function start_duration_timer(uuid, start_time) {
|
||||
const td = document.getElementById(`duration_${uuid}`)
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ $array['dashboard_widgets'][$x]['widget_content'] = '';
|
||||
$array['dashboard_widgets'][$x]['widget_content_text_align'] = '';
|
||||
$array['dashboard_widgets'][$x]['widget_content_details'] = '';
|
||||
$array['dashboard_widgets'][$x]['widget_chart_type'] = 'icon';
|
||||
$array['dashboard_widgets'][$x]['widget_chart_type_options'] = ['icon'];
|
||||
$array['dashboard_widgets'][$x]['widget_chart_type_options'] = ['icon', 'line'];
|
||||
$array['dashboard_widgets'][$x]['widget_label_enabled'] = 'true';
|
||||
$array['dashboard_widgets'][$x]['widget_label_text_color'] = '#444444';
|
||||
$array['dashboard_widgets'][$x]['widget_label_text_color_hover'] = '';
|
||||
|
||||
Reference in New Issue
Block a user