Moves graphs to separate page
parent
e50ac96b50
commit
26c7660bfa
|
|
@ -0,0 +1,96 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$action = $_REQUEST['action'] ?? '';
|
||||||
|
$agent = $_REQUEST['agent'] ?? '';
|
||||||
|
|
||||||
|
require '../app/classes/settings.php';
|
||||||
|
require '../app/classes/agent.php';
|
||||||
|
require '../app/classes/conference.php';
|
||||||
|
require '../app/classes/host.php';
|
||||||
|
|
||||||
|
$settingsObject = new Settings();
|
||||||
|
$agentObject = new Agent($dbWeb);
|
||||||
|
$hostObject = new Host($dbWeb);
|
||||||
|
|
||||||
|
// Connect to Jilo database for log data
|
||||||
|
$response = connectDB($config, 'jilo', $platformDetails[0]['jilo_database'], $platform_id);
|
||||||
|
if ($response['db'] === null) {
|
||||||
|
Messages::flash('ERROR', 'DEFAULT', $response['error']);
|
||||||
|
} else {
|
||||||
|
$db = $response['db'];
|
||||||
|
}
|
||||||
|
$conferenceObject = new Conference($db);
|
||||||
|
|
||||||
|
// Get date range for the last 7 days
|
||||||
|
$from_time = date('Y-m-d', strtotime('-7 days'));
|
||||||
|
$until_time = date('Y-m-d');
|
||||||
|
|
||||||
|
// Define graphs to show
|
||||||
|
$graphs = [
|
||||||
|
[
|
||||||
|
'graph_name' => 'conferences',
|
||||||
|
'graph_title' => 'Conferences in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time',
|
||||||
|
'datasets' => []
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'graph_name' => 'participants',
|
||||||
|
'graph_title' => 'Participants in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time',
|
||||||
|
'datasets' => []
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
// Get Jitsi API data
|
||||||
|
$conferences_api = $agentObject->getHistoricalData(
|
||||||
|
$platform_id,
|
||||||
|
'jicofo',
|
||||||
|
'conferences',
|
||||||
|
$from_time,
|
||||||
|
$until_time
|
||||||
|
);
|
||||||
|
$graphs[0]['datasets'][] = [
|
||||||
|
'data' => $conferences_api,
|
||||||
|
'label' => 'Conferences from Jitsi API',
|
||||||
|
'color' => 'rgba(75, 192, 192, 1)'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Get conference data from logs
|
||||||
|
$conferences_logs = $conferenceObject->conferenceNumber(
|
||||||
|
$from_time,
|
||||||
|
$until_time
|
||||||
|
);
|
||||||
|
$graphs[0]['datasets'][] = [
|
||||||
|
'data' => $conferences_logs,
|
||||||
|
'label' => 'Conferences from Logs',
|
||||||
|
'color' => 'rgba(255, 99, 132, 1)'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Get participants data
|
||||||
|
$participants_api = $agentObject->getHistoricalData(
|
||||||
|
$platform_id,
|
||||||
|
'jicofo',
|
||||||
|
'participants',
|
||||||
|
$from_time,
|
||||||
|
$until_time
|
||||||
|
);
|
||||||
|
$graphs[1]['datasets'][] = [
|
||||||
|
'data' => $participants_api,
|
||||||
|
'label' => 'Participants from Jitsi API',
|
||||||
|
'color' => 'rgba(75, 192, 192, 1)'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Prepare data for template
|
||||||
|
$graph = $graphs;
|
||||||
|
|
||||||
|
// prepare the widget
|
||||||
|
$widget['full'] = false;
|
||||||
|
$widget['name'] = 'Graphs';
|
||||||
|
$widget['title'] = 'Jitsi graphs';
|
||||||
|
|
||||||
|
// Get any new messages
|
||||||
|
include '../app/includes/messages.php';
|
||||||
|
include '../app/includes/messages-show.php';
|
||||||
|
|
||||||
|
// Load the template
|
||||||
|
include '../app/templates/graphs.php';
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
|
||||||
|
<!-- jitsi graphs -->
|
||||||
|
<div class="container-fluid mt-2">
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="col-12 mb-4">
|
||||||
|
<h2 class="mb-0">Jitsi graphs</h2>
|
||||||
|
<small>usage graphs for platform <?= htmlspecialchars($platform_id) ?> (<?= htmlspecialchars($platformDetails[0]['name']) ?>)</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="card w-auto bg-light border-light card-body filter-results">
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<input type="button" class="button" style="margin-right: 3px;" onclick="setTimeRange('today'); setActive(this)" value="today" />
|
||||||
|
<input type="button" class="button" style="margin-right: 3px;" onclick="setTimeRange('last2days'); setActive(this)" value="last 2 days" />
|
||||||
|
<input type="button" class="button active" style="margin-right: 3px;" onclick="setTimeRange('last7days'); setActive(this)" value="last 7 days" />
|
||||||
|
<input type="button" class="button" style="margin-right: 3px;" onclick="setTimeRange('thisMonth'); setActive(this)" value="month" />
|
||||||
|
<input type="button" class="button" style="margin-right: 18px;" onclick="setTimeRange('thisYear'); setActive(this)" value="year" />
|
||||||
|
<input type="date" style="margin-right: 3px;" id="start-date">
|
||||||
|
<input type="date" style="margin-right: 3px;" id="end-date">
|
||||||
|
<input type="button" id="custom_range" class="button" onclick="setCustomTimeRange(); setActive(this)" value="custom range" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Define an array to store all graph instances
|
||||||
|
var graphs = [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<?php foreach ($graph as $data) {
|
||||||
|
include '../app/helpers/graph.php';
|
||||||
|
} ?>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Function to update the label and propagate zoom across charts
|
||||||
|
function propagateZoom(chart) {
|
||||||
|
var startDate = chart.scales.x.min;
|
||||||
|
var endDate = chart.scales.x.max;
|
||||||
|
|
||||||
|
// Update the datetime input fields
|
||||||
|
document.getElementById('start-date').value = new Date(startDate).toISOString().slice(0, 10);
|
||||||
|
document.getElementById('end-date').value = new Date(endDate).toISOString().slice(0, 10);
|
||||||
|
|
||||||
|
// Update all charts with the new date range
|
||||||
|
graphs.forEach(function(graphObj) {
|
||||||
|
if (graphObj.graph !== chart) {
|
||||||
|
graphObj.graph.options.scales.x.min = startDate;
|
||||||
|
graphObj.graph.options.scales.x.max = endDate;
|
||||||
|
graphObj.graph.update(); // Redraw chart with new range
|
||||||
|
}
|
||||||
|
updatePeriodLabel(graphObj.graph, graphObj.label); // Update period label
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Predefined time range buttons
|
||||||
|
function setTimeRange(range) {
|
||||||
|
var startDate, endDate;
|
||||||
|
var now = new Date();
|
||||||
|
|
||||||
|
switch (range) {
|
||||||
|
case 'today':
|
||||||
|
startDate = new Date(now.setHours(0, 0, 0, 0));
|
||||||
|
endDate = new Date(now.setHours(23, 59, 59, 999));
|
||||||
|
timeRangeName = 'today';
|
||||||
|
break;
|
||||||
|
case 'last2days':
|
||||||
|
startDate = new Date(now.setDate(now.getDate() - 2));
|
||||||
|
endDate = new Date();
|
||||||
|
timeRangeName = 'last 2 days';
|
||||||
|
break;
|
||||||
|
case 'last7days':
|
||||||
|
startDate = new Date(now.setDate(now.getDate() - 7));
|
||||||
|
endDate = new Date();
|
||||||
|
timeRangeName = 'last 7 days';
|
||||||
|
break;
|
||||||
|
case 'thisMonth':
|
||||||
|
startDate = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||||
|
endDate = new Date();
|
||||||
|
timeRangeName = 'this month so far';
|
||||||
|
break;
|
||||||
|
case 'thisYear':
|
||||||
|
startDate = new Date(now.getFullYear(), 0, 1);
|
||||||
|
endDate = new Date();
|
||||||
|
timeRangeName = 'this year so far';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// We set the date input fields to match the selected period
|
||||||
|
document.getElementById('start-date').value = startDate.toISOString().slice(0, 10);
|
||||||
|
document.getElementById('end-date').value = endDate.toISOString().slice(0, 10);
|
||||||
|
|
||||||
|
// Loop through all graphs and update their time range and label
|
||||||
|
graphs.forEach(function(graphObj) {
|
||||||
|
graphObj.graph.options.scales.x.min = startDate;
|
||||||
|
graphObj.graph.options.scales.x.max = endDate;
|
||||||
|
graphObj.graph.update();
|
||||||
|
updatePeriodLabel(graphObj.graph, graphObj.label); // Update the period label
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom date range
|
||||||
|
function setCustomTimeRange() {
|
||||||
|
var startDate = document.getElementById('start-date').value;
|
||||||
|
var endDate = document.getElementById('end-date').value;
|
||||||
|
|
||||||
|
if (!startDate || !endDate) return;
|
||||||
|
|
||||||
|
// Convert the input dates to JavaScript Date objects
|
||||||
|
startDate = new Date(startDate);
|
||||||
|
endDate = new Date(endDate);
|
||||||
|
timeRangeName = 'custom range';
|
||||||
|
|
||||||
|
// Loop through all graphs and update the custom time range
|
||||||
|
graphs.forEach(function(graphObj) {
|
||||||
|
graphObj.graph.options.scales.x.min = startDate;
|
||||||
|
graphObj.graph.options.scales.x.max = endDate;
|
||||||
|
graphObj.graph.update();
|
||||||
|
updatePeriodLabel(graphObj.graph, graphObj.label); // Update the period label
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the clicked button state to active
|
||||||
|
function setActive(element) {
|
||||||
|
// Remove 'active' class from all buttons
|
||||||
|
var buttons = document.querySelectorAll('.button');
|
||||||
|
buttons.forEach(function(btn) {
|
||||||
|
btn.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add 'active' class only to the clicked button
|
||||||
|
element.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call setTimeRange('last7days') on page load to pre-load last 7 days by default
|
||||||
|
window.onload = function() {
|
||||||
|
setTimeRange('last7days');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- /jitsi graphs -->
|
||||||
Loading…
Reference in New Issue