Adds graphs page with some temporary example data

app/pages/graphs.php

@@ -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';
 
 ?>

app/templates/graphs-conferences.php

@@ -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>

app/templates/page-header.php

@@ -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">

app/templates/page-sidebar.php

@@ -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">