From b81be03c4fb807f1de79fe089da31590b026e348 Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Wed, 9 Oct 2024 14:53:57 +0300
Subject: [PATCH] Adds graphs page with some temporary example data

---
 app/pages/graphs.php                 |  17 ++-
 app/templates/graphs-conferences.php | 204 +++++++++++++++++++++++++++
 app/templates/page-header.php        |   5 +
 app/templates/page-sidebar.php       |   2 +-
 4 files changed, 226 insertions(+), 2 deletions(-)
 create mode 100644 app/templates/graphs-conferences.php

diff --git a/app/pages/graphs.php b/app/pages/graphs.php
index 56c75e0..a459e6f 100644
--- a/app/pages/graphs.php
+++ b/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';
 
 ?>
diff --git a/app/templates/graphs-conferences.php b/app/templates/graphs-conferences.php
new file mode 100644
index 0000000..5dd8861
--- /dev/null
+++ b/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>
diff --git a/app/templates/page-header.php b/app/templates/page-header.php
index 7108eed..8480c8d 100644
--- a/app/templates/page-header.php
+++ b/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">
diff --git a/app/templates/page-sidebar.php b/app/templates/page-sidebar.php
index a42f704..36353e8 100644
--- a/app/templates/page-sidebar.php
+++ b/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">