Fixes graphs and adds mouse selection

main
Yasen Pramatarov 2024-10-10 11:31:05 +03:00
parent 4b1ab93474
commit c04fcb7d42
5 changed files with 220 additions and 50 deletions

View File

@ -1,39 +1,38 @@
<div style="position: relative; width: 800px; height: 400px;"> <div style="position: relative; width: 800px; height: 400px;">
<div id="current-period" style="text-align: center; position: absolute; top: 0; left: 0; right: 0; z-index: 10; font-size: 14px; background-color: rgba(255, 255, 255, 0.7);"></div> <div id="current-period-<?= $data['graph_name'] ?>" style="text-align: center; position: absolute; top: 0; left: 0; right: 0; z-index: 10; font-size: 14px; background-color: rgba(255, 255, 255, 0.7);"></div>
<canvas id="graph_<?= $graph_name ?>" style="margin-top: 20px;"></canvas> <canvas id="graph_<?= $data['graph_name'] ?>" style="margin-top: 20px; margin-bottom: 50px;"></canvas>
</div> </div>
<script> <script>
var ctx = document.getElementById('graph_<?= $graph_name ?>').getContext('2d'); var ctx = document.getElementById('graph_<?= $data['graph_name'] ?>').getContext('2d');
var chartData0 = <?php echo json_encode($data0); ?>; var chartData0 = <?php echo json_encode($data['data0']); ?>;
var chartData1 = <?php echo json_encode($data1); ?>; var chartData1 = <?php echo json_encode($data['data1']); ?>;
var timeRangeName = '';
var labels = chartData0.map(function(item) { var labels = chartData0.map(function(item) {
return item.date; return item.date;
}); });
var values0 = chartData0.map(function(item) { var values0 = chartData0.map(function(item) {
return item.value; return item.value;
}); });
var values1 = chartData1.map(function(item) { var values1 = chartData1.map(function(item) {
return item.value; return item.value;
}); });
var graph_<?= $graph_name ?> = new Chart(ctx, { var graph_<?= $data['graph_name'] ?> = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: labels, labels: labels,
datasets: [ datasets: [
{ {
label: '<?= $graph_data0_label ?? '' ?>', label: '<?= $data['graph_data0_label'] ?? '' ?>',
data: values0, data: values0,
borderColor: 'rgba(75, 192, 192, 1)', borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1, borderWidth: 1,
fill: false fill: false
}, },
{ {
label: '<?= $graph_data1_label ?? '' ?>', label: '<?= $data['graph_data1_label'] ?? '' ?>',
data: values1, data: values1,
borderColor: 'rgba(255, 99, 132, 1)', borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1, borderWidth: 1,
@ -65,36 +64,63 @@ var graph_<?= $graph_name ?> = new Chart(ctx, {
mode: 'x' mode: 'x'
}, },
zoom: { zoom: {
enabled: true, // enabled: true,
mode: 'x' mode: 'x',
drag: {
enabled: true, // Enable drag to select range
borderColor: 'rgba(255, 99, 132, 0.3)',
borderWidth: 1
},
onZoom: function({ chart }) {
propagateZoom(chart); // Propagate the zoom to all graphs
}
} }
}, },
legend: { legend: {
position: 'bottom', position: 'bottom',
labels: { labels: {
boxWidth: 20, boxWidth: 20,
padding: 30 padding: 10
}
},
title: {
display: true,
text: '<?= $data['graph_title'] ?>',
font: {
size: 16,
weight: 'bold'
},
padding: {
bottom: 10
} }
} }
} }
} }
}); });
// Add dynamic label to show the currently displayed time period // Store the graphs in an array
var currentPeriodLabel = document.getElementById('current-period'); graphs.push({
graph: graph_<?= $data['graph_name'] ?>,
label: document.getElementById('current-period-<?= $data['graph_name'] ?>')
});
function updatePeriodLabel(chart) { // Update the time range label
function updatePeriodLabel(chart, labelElement) {
var startDate = chart.scales.x.min; var startDate = chart.scales.x.min;
var endDate = chart.scales.x.max; var endDate = chart.scales.x.max;
currentPeriodLabel.innerHTML = 'Currently displaying: ' + new Date(startDate).toLocaleDateString() + ' - ' + new Date(endDate).toLocaleDateString(); if (timeRangeName == 'today') {
labelElement.innerHTML = 'Currently displaying: ' + timeRangeName + ' (' + new Date(startDate).toLocaleDateString() + ')';
} else {
labelElement.innerHTML = 'Currently displaying: ' + timeRangeName + ' (' + new Date(startDate).toLocaleDateString() + ' - ' + new Date(endDate).toLocaleDateString() + ')';
}
} }
// Attach the update function to the 'zoom' event (to be used with the time period links) // Attach the update function to the 'zoom' event
graph_<?= $graph_name ?>.options.plugins.zoom.onZoom = function({ chart }) { graph_<?= $data['graph_name'] ?>.options.plugins.zoom.onZoom = function({ chart }) {
updatePeriodLabel(chart); updatePeriodLabel(chart, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
}; };
// Update the label initially when the chart is rendered // Update the label initially when the chart is rendered
updatePeriodLabel(graph_<?= $graph_name ?>); updatePeriodLabel(graph_<?= $data['graph_name'] ?>, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
</script> </script>

View File

@ -1,43 +1,44 @@
<?php <?php
// FIXME example data // FIXME example data
$data0 = [ $graph[0]['data0'] = [
['date' => '2023-01-01', 'value' => 10], ['date' => '2024-10-06', 'value' => 10],
['date' => '2023-01-02', 'value' => 20], ['date' => '2024-10-07', 'value' => 20],
['date' => '2023-01-03', 'value' => 15], ['date' => '2024-10-08', 'value' => 15],
['date' => '2023-01-04', 'value' => 25], ['date' => '2024-10-09', 'value' => 25],
]; ];
$data1 = [ $graph[0]['data1'] = [
['date' => '2023-01-01', 'value' => 12], ['date' => '2024-10-06', 'value' => 12],
['date' => '2023-01-02', 'value' => 23], ['date' => '2024-10-07', 'value' => 23],
['date' => '2023-01-03', 'value' => 11], ['date' => '2024-10-08', 'value' => 11],
['date' => '2023-01-04', 'value' => 27], ['date' => '2024-10-09', 'value' => 27],
]; ];
$graph_name = 'conferences'; $graph[0]['graph_name'] = 'conferences';
$graph_data0_label = 'Conferences from Jitsi logs (Jilo)'; $graph[0]['graph_title'] = 'Conferences in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time';
$graph_data1_label = 'Conferences from Jitsi API (Jilo Agents)'; $graph[0]['graph_data0_label'] = 'Conferences from Jitsi logs (Jilo)';
include '../app/helpers/graph.php'; $graph[0]['graph_data1_label'] = 'Conferences from Jitsi API (Jilo Agents)';
// FIXME example data $graph[1]['data0'] = [
$data0 = [ ['date' => '2024-10-06', 'value' => 20],
['date' => '2023-01-01', 'value' => 20], ['date' => '2024-10-07', 'value' => 30],
['date' => '2023-01-02', 'value' => 30], ['date' => '2024-10-08', 'value' => 15],
['date' => '2023-01-03', 'value' => 15], ['date' => '2024-10-09', 'value' => 55],
['date' => '2023-01-04', 'value' => 55],
]; ];
$data1 = [ $graph[1]['data1'] = [
['date' => '2023-01-01', 'value' => 22], ['date' => '2024-10-06', 'value' => 22],
['date' => '2023-01-02', 'value' => 33], ['date' => '2024-10-07', 'value' => 33],
['date' => '2023-01-03', 'value' => 11], ['date' => '2024-10-08', 'value' => 11],
['date' => '2023-01-04', 'value' => 57], ['date' => '2024-10-09', 'value' => 57],
]; ];
$graph_name = 'participants'; $graph[1]['graph_name'] = 'participants';
$graph_data0_label = 'Participants from Jitsi logs (Jilo)'; $graph[1]['graph_title'] = 'Participants in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time';
$graph_data1_label = 'Participants from Jitsi API (Jilo Agents)'; $graph[1]['graph_data0_label'] = 'Participants from Jitsi logs (Jilo)';
include '../app/helpers/graph.php'; $graph[1]['graph_data1_label'] = 'Participants from Jitsi API (Jilo Agents)';
include '../app/templates/graphs-combined.php';
?> ?>

View File

@ -0,0 +1,122 @@
<div>
<button onclick="setTimeRange('today')">today</button>
<button onclick="setTimeRange('last2days')">last 2 days</button>
<button onclick="setTimeRange('last7days')">last 7 days</button>
<button onclick="setTimeRange('thisMonth')">month</button>
<button onclick="setTimeRange('thisYear')">year</button>
<input type="date" id="start-date">
<input type="date" id="end-date">
<button onclick="setCustomTimeRange()">custom range</button>
</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
});
}
// Call setTimeRange('last7days') on page load to pre-load last 7 days by default
window.onload = function() {
setTimeRange('last7days');
};
</script>

View File

@ -30,6 +30,7 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
<?php } ?> <?php } ?>
<title>Jilo Web</title> <title>Jilo Web</title>
<link rel="icon" type="image/x-icon" href="<?= htmlspecialchars($app_root) ?>static/favicon.ico"> <link rel="icon" type="image/x-icon" href="<?= htmlspecialchars($app_root) ?>static/favicon.ico">

File diff suppressed because one or more lines are too long