Fixes graphs and adds mouse selection
parent
4b1ab93474
commit
c04fcb7d42
|
|
@ -1,39 +1,38 @@
|
|||
<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>
|
||||
<canvas id="graph_<?= $graph_name ?>" style="margin-top: 20px;"></canvas>
|
||||
<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_<?= $data['graph_name'] ?>" style="margin-top: 20px; margin-bottom: 50px;"></canvas>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var ctx = document.getElementById('graph_<?= $graph_name ?>').getContext('2d');
|
||||
var chartData0 = <?php echo json_encode($data0); ?>;
|
||||
var chartData1 = <?php echo json_encode($data1); ?>;
|
||||
var ctx = document.getElementById('graph_<?= $data['graph_name'] ?>').getContext('2d');
|
||||
var chartData0 = <?php echo json_encode($data['data0']); ?>;
|
||||
var chartData1 = <?php echo json_encode($data['data1']); ?>;
|
||||
var timeRangeName = '';
|
||||
|
||||
var labels = chartData0.map(function(item) {
|
||||
return item.date;
|
||||
});
|
||||
|
||||
var values0 = chartData0.map(function(item) {
|
||||
return item.value;
|
||||
});
|
||||
|
||||
var values1 = chartData1.map(function(item) {
|
||||
return item.value;
|
||||
});
|
||||
|
||||
var graph_<?= $graph_name ?> = new Chart(ctx, {
|
||||
var graph_<?= $data['graph_name'] ?> = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: '<?= $graph_data0_label ?? '' ?>',
|
||||
label: '<?= $data['graph_data0_label'] ?? '' ?>',
|
||||
data: values0,
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
borderWidth: 1,
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: '<?= $graph_data1_label ?? '' ?>',
|
||||
label: '<?= $data['graph_data1_label'] ?? '' ?>',
|
||||
data: values1,
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
borderWidth: 1,
|
||||
|
|
@ -65,36 +64,63 @@ var graph_<?= $graph_name ?> = new Chart(ctx, {
|
|||
mode: 'x'
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
mode: 'x'
|
||||
// enabled: true,
|
||||
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: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
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
|
||||
var currentPeriodLabel = document.getElementById('current-period');
|
||||
// Store the graphs in an array
|
||||
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 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)
|
||||
graph_<?= $graph_name ?>.options.plugins.zoom.onZoom = function({ chart }) {
|
||||
updatePeriodLabel(chart);
|
||||
// Attach the update function to the 'zoom' event
|
||||
graph_<?= $data['graph_name'] ?>.options.plugins.zoom.onZoom = function({ chart }) {
|
||||
updatePeriodLabel(chart, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
|
||||
};
|
||||
|
||||
// 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>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
<?php
|
||||
|
||||
// FIXME example data
|
||||
$data0 = [
|
||||
['date' => '2023-01-01', 'value' => 10],
|
||||
['date' => '2023-01-02', 'value' => 20],
|
||||
['date' => '2023-01-03', 'value' => 15],
|
||||
['date' => '2023-01-04', 'value' => 25],
|
||||
$graph[0]['data0'] = [
|
||||
['date' => '2024-10-06', 'value' => 10],
|
||||
['date' => '2024-10-07', 'value' => 20],
|
||||
['date' => '2024-10-08', 'value' => 15],
|
||||
['date' => '2024-10-09', 'value' => 25],
|
||||
];
|
||||
|
||||
$data1 = [
|
||||
['date' => '2023-01-01', 'value' => 12],
|
||||
['date' => '2023-01-02', 'value' => 23],
|
||||
['date' => '2023-01-03', 'value' => 11],
|
||||
['date' => '2023-01-04', 'value' => 27],
|
||||
$graph[0]['data1'] = [
|
||||
['date' => '2024-10-06', 'value' => 12],
|
||||
['date' => '2024-10-07', 'value' => 23],
|
||||
['date' => '2024-10-08', 'value' => 11],
|
||||
['date' => '2024-10-09', 'value' => 27],
|
||||
];
|
||||
|
||||
$graph_name = 'conferences';
|
||||
$graph_data0_label = 'Conferences from Jitsi logs (Jilo)';
|
||||
$graph_data1_label = 'Conferences from Jitsi API (Jilo Agents)';
|
||||
include '../app/helpers/graph.php';
|
||||
$graph[0]['graph_name'] = 'conferences';
|
||||
$graph[0]['graph_title'] = 'Conferences in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time';
|
||||
$graph[0]['graph_data0_label'] = 'Conferences from Jitsi logs (Jilo)';
|
||||
$graph[0]['graph_data1_label'] = 'Conferences from Jitsi API (Jilo Agents)';
|
||||
|
||||
// FIXME example data
|
||||
$data0 = [
|
||||
['date' => '2023-01-01', 'value' => 20],
|
||||
['date' => '2023-01-02', 'value' => 30],
|
||||
['date' => '2023-01-03', 'value' => 15],
|
||||
['date' => '2023-01-04', 'value' => 55],
|
||||
$graph[1]['data0'] = [
|
||||
['date' => '2024-10-06', 'value' => 20],
|
||||
['date' => '2024-10-07', 'value' => 30],
|
||||
['date' => '2024-10-08', 'value' => 15],
|
||||
['date' => '2024-10-09', 'value' => 55],
|
||||
];
|
||||
|
||||
$data1 = [
|
||||
['date' => '2023-01-01', 'value' => 22],
|
||||
['date' => '2023-01-02', 'value' => 33],
|
||||
['date' => '2023-01-03', 'value' => 11],
|
||||
['date' => '2023-01-04', 'value' => 57],
|
||||
$graph[1]['data1'] = [
|
||||
['date' => '2024-10-06', 'value' => 22],
|
||||
['date' => '2024-10-07', 'value' => 33],
|
||||
['date' => '2024-10-08', 'value' => 11],
|
||||
['date' => '2024-10-09', 'value' => 57],
|
||||
];
|
||||
|
||||
$graph_name = 'participants';
|
||||
$graph_data0_label = 'Participants from Jitsi logs (Jilo)';
|
||||
$graph_data1_label = 'Participants from Jitsi API (Jilo Agents)';
|
||||
include '../app/helpers/graph.php';
|
||||
$graph[1]['graph_name'] = 'participants';
|
||||
$graph[1]['graph_title'] = 'Participants in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time';
|
||||
$graph[1]['graph_data0_label'] = 'Participants from Jitsi logs (Jilo)';
|
||||
$graph[1]['graph_data1_label'] = 'Participants from Jitsi API (Jilo Agents)';
|
||||
|
||||
include '../app/templates/graphs-combined.php';
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
<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/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 } ?>
|
||||
<title>Jilo Web</title>
|
||||
<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
Loading…
Reference in New Issue