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