Adds graphs page with some temporary example data

main
Yasen Pramatarov 2024-10-09 14:53:57 +03:00
parent 1756ee71cd
commit b81be03c4f
4 changed files with 226 additions and 2 deletions

View File

@ -1,5 +1,20 @@
<?php
include '../app/templates/graphs.php';
// FIXME example data
$data = [
['date' => '2023-01-01', 'value' => 10],
['date' => '2023-01-02', 'value' => 20],
['date' => '2023-01-03', 'value' => 15],
['date' => '2023-01-04', 'value' => 25],
];
$data2 = [
['date' => '2023-01-01', 'value' => 12],
['date' => '2023-01-02', 'value' => 23],
['date' => '2023-01-03', 'value' => 11],
['date' => '2023-01-04', 'value' => 27],
];
include '../app/templates/graphs-conferences.php';
?>

View File

@ -0,0 +1,204 @@
<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="graphsConferences" style="margin-top: 20px;"></canvas>
</div>
<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="graphsParticipants" style="margin-top: 20px;"></canvas>
</div>
<script>
//CONFERENCES
var ctx = document.getElementById('graphsConferences').getContext('2d');
var chartData = <?php echo json_encode($data); ?>;
var chartData2 = <?php echo json_encode($data2); ?>;
var labels = chartData.map(function(item) {
return item.date;
});
var values = chartData.map(function(item) {
return item.value;
});
var values2 = chartData2.map(function(item) {
return item.value;
});
var graphsConferences = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Conferences from Jitsi logs (Jilo)',
data: values,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
},
{
label: 'Conferences from Jitsi API (Jilo Agents)',
data: values2,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false
}
]
},
options: {
layout: {
padding: {
top: 30
}
},
scales: {
x: {
type: 'time',
time: {
unit: 'day'
}
},
y: {
beginAtZero: true
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x'
}
},
legend: {
position: 'bottom',
labels: {
boxWidth: 20,
padding: 30
}
}
}
}
});
// Add dynamic label to show the currently displayed time period
var currentPeriodLabel = document.getElementById('current-period');
function updatePeriodLabel(chart) {
var startDate = chart.scales.x.min;
var endDate = chart.scales.x.max;
currentPeriodLabel.innerHTML = 'Currently displaying: ' + new Date(startDate).toLocaleDateString() + ' - ' + new Date(endDate).toLocaleDateString();
}
// Attach the update function to the 'zoom' event (to be used with the time period links)
graphsConferences.options.plugins.zoom.onZoom = function({ chart }) {
updatePeriodLabel(chart);
};
// Update the label initially when the chart is rendered
updatePeriodLabel(graphsConferences);
// PARTICIPANTS
var ctx = document.getElementById('graphsParticipants').getContext('2d');
var chartData = <?php echo json_encode($data); ?>;
var chartData2 = <?php echo json_encode($data2); ?>;
var labels = chartData.map(function(item) {
return item.date;
});
var values = chartData.map(function(item) {
return item.value;
});
var values2 = chartData2.map(function(item) {
return item.value;
});
var graphsParticipants = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Conferences from Jitsi logs (Jilo)',
data: values,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
},
{
label: 'Conferences from Jitsi API (Jilo Agents)',
data: values2,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false
}
]
},
options: {
layout: {
padding: {
top: 30
}
},
scales: {
x: {
type: 'time',
time: {
unit: 'day'
}
},
y: {
beginAtZero: true
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x'
}
},
legend: {
position: 'bottom',
labels: {
boxWidth: 20,
padding: 30
}
}
}
}
});
// Add dynamic label to show the currently displayed time period
var currentPeriodLabel = document.getElementById('current-period');
function updatePeriodLabel(chart) {
var startDate = chart.scales.x.min;
var endDate = chart.scales.x.max;
currentPeriodLabel.innerHTML = 'Currently displaying: ' + new Date(startDate).toLocaleDateString() + ' - ' + new Date(endDate).toLocaleDateString();
}
// Attach the update function to the 'zoom' event (for using with the time period links)
graphsParticipants.options.plugins.zoom.onZoom = function({ chart }) {
updatePeriodLabel(chart);
};
// Update the label initially when the chart is rendered
updatePeriodLabel(graphsParticipants);
</script>

View File

@ -25,6 +25,11 @@
</script>
<?php if ($page === 'agents') { ?>
<script src="<?= htmlspecialchars($app_root) ?>static/agents.js"></script>
<?php } ?>
<?php if ($page === 'graphs') { ?>
<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>
<?php } ?>
<title>Jilo Web</title>
<link rel="icon" type="image/x-icon" href="<?= htmlspecialchars($app_root) ?>static/favicon.ico">

View File

@ -42,7 +42,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
<a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=graphs">
<li class="list-group-item<?php if ($page === 'graphs') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">
<i class="fas fa-chart-bar" data-toggle="tooltip" data-placement="right" data-offset="30.0" title="graphs"></i>graphs
<i class="fas fa-chart-bar" data-toggle="tooltip" data-placement="right" data-offset="30.0" title="combined graphs"></i>combined graphs
</li>
</a>
<a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=latest">