Fixes graphs and adds mouse selection

app/helpers/graph.php

@@ -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>
+    <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>
 
 <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) {
     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,
+//                    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: {
                 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
+// 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 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
-updatePeriodLabel(graph_<?= $graph_name ?>);
+updatePeriodLabel(graph_<?= $data['graph_name'] ?>, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
 
 </script>

app/pages/graphs.php

@@ -1,43 +1,44 @@
 <?php
 
 // 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';
 
 ?>

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>

app/templates/page-header.php

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