From 4b1ab934746352eb3af21d19b007607f8ee821d7 Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Wed, 9 Oct 2024 15:56:51 +0300
Subject: [PATCH] Uses a common graphs helper template

---
 app/helpers/graph.php                | 100 +++++++++++++
 app/pages/graphs.php                 |  29 +++-
 app/templates/graphs-conferences.php | 204 ---------------------------
 3 files changed, 126 insertions(+), 207 deletions(-)
 create mode 100644 app/helpers/graph.php
 delete mode 100644 app/templates/graphs-conferences.php

diff --git a/app/helpers/graph.php b/app/helpers/graph.php
new file mode 100644
index 0000000..c5e722b
--- /dev/null
+++ b/app/helpers/graph.php
@@ -0,0 +1,100 @@
+<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>
+
+<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 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, {
+    type: 'line',
+    data: {
+        labels: labels,
+        datasets: [
+            {
+                label: '<?= $graph_data0_label ?? '' ?>',
+                data: values0,
+                borderColor: 'rgba(75, 192, 192, 1)',
+                borderWidth: 1,
+                fill: false
+            },
+            {
+                label: '<?= $graph_data1_label ?? '' ?>',
+                data: values1,
+                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)
+graph_<?= $graph_name ?>.options.plugins.zoom.onZoom = function({ chart }) {
+    updatePeriodLabel(chart);
+};
+
+// Update the label initially when the chart is rendered
+updatePeriodLabel(graph_<?= $graph_name ?>);
+
+</script>
diff --git a/app/pages/graphs.php b/app/pages/graphs.php
index a459e6f..7e7f893 100644
--- a/app/pages/graphs.php
+++ b/app/pages/graphs.php
@@ -1,20 +1,43 @@
 <?php
 
 // FIXME example data
-$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],
 ];
 
-$data2 = [
+$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],
 ];
 
-include '../app/templates/graphs-conferences.php';
+$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';
+
+// 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],
+];
+
+$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_name = 'participants';
+$graph_data0_label = 'Participants from Jitsi logs (Jilo)';
+$graph_data1_label = 'Participants from Jitsi API (Jilo Agents)';
+include '../app/helpers/graph.php';
 
 ?>
diff --git a/app/templates/graphs-conferences.php b/app/templates/graphs-conferences.php
deleted file mode 100644
index 5dd8861..0000000
--- a/app/templates/graphs-conferences.php
+++ /dev/null
@@ -1,204 +0,0 @@
-<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>