add descriptor labels in custom tooltip in stats

public/js/stats.js

@@ -32,42 +32,54 @@ async function populateTimeseries(category) {
     response.json().then(response => {
       const data = response.map(row => ({
         x: row.sampling_date,
-        y: parseInt(row.counts)
+        y: parseInt(row.counts),
+        details: row.details
       }));
-      console.debug(data);
+      console.debug(response);
 
       const chartOptions = {
         type: 'bar',
-  data: {
-    datasets: [{
-      label: label,
-      data: data,
-      backgroundColor: 'rgba(54, 162, 235, 0.5)',
-      borderColor: 'rgba(54, 162, 235, 1)',
-      borderWidth: 1,
-          barPercentage: 0.8, // Adjust the bar percentage as desired
-      categoryPercentage: 0.9
-    }]
-  },
-  options: {
-    scales: {
-      y: {
-        beginAtZero: true,
-        ticks: {
-          precision: 0
-        }
-      },
-      x: {
-              displayFormats: {
-            month: 'MMM'
-          },
+        data: {
+          datasets: [{
+            label: label,
+            data: data,
+            backgroundColor: 'rgba(54, 162, 235, 0.5)',
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderWidth: 1,
+            barPercentage: 0.8, // Adjust the bar percentage as desired
+            categoryPercentage: 0.9
+          }]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
               ticks: {
-                length: 4
+                precision: 0
+              }
+            },
+            x: {
+              displayFormats: {
+                month: 'MMM'
+              },
+                ticks: {
+                  length: 4
+                }
+              }
+            },
+          plugins: {
+            tooltip: {
+              callbacks: {
+                label: function(tooltipItems) {
+                  console.debug('adsfasdfasdf',tooltipItems);
+                  return tooltipItems.raw.details;
+                }
               }
-                        }
-      }
-    
-  }      };
+            }
+          }
+          
+        }      
+      };
 
       const ctx = document.getElementById(category + '-timeseries').getContext('2d');
       new Chart(ctx, chartOptions);

src/Views/main-statistics.php

@@ -3,16 +3,16 @@
     <p class="panel-heading">
       General
     </p>
-      <div id="stats-chart-1">
-      </div>
+    <div id="stats-chart-1">
+    </div>
   <div id="grid" x-init="populateStatisticsGrid"></div>
   </article>
   <article class="panel is-info">
     <p class="panel-heading">
       Timeline
     </p>
-      <div id="stats-chart-1">
-      </div>
+    <div id="stats-chart-1">
+    </div>
     <canvas id="descriptors-timeseries" x-init="await populateTimeseries('descriptors')"></canvas>
     <canvas id="stations-timeseries" x-init="await populateTimeseries('stations')"></canvas>
   </article>