add timeseries in stats

public/js/loader.js

@@ -171,6 +171,7 @@ var loader_script_files=[
 	"js/layers.js",
 	"js/extras.js",
 	"js/modal.js",
+	"js/stats.js",
 	"js/maptab/lib/servicesFunctions.js",
 	"js/maptab/lib/layersFunctions.js",
 	"js/maptab/lib/attributesFunctions.js",

public/js/stats.js

@@ -0,0 +1,79 @@
+function populateStatisticsGrid() {
+  const statsGrid = new gridjs.Grid({
+    columns: ['stations', 'cruises', 'parameters', 'descriptors', 'criteria'],
+    server: {
+      url: BASE_URL + '/interface/stats/general',
+        then: data => data.map(stats => {
+          return [stats.total_stations, stats.total_cruises, stats.total_parameters, stats.total_criterias, stats.total_descriptors]
+        })
+    }
+  }).render(grid);
+}
+
+
+async function populateTimeseries(category) {
+  let url = BASE_URL;
+  let label = category.charAt(0).toUpperCase() + category.slice(1) + ' per Sampling Date';
+  switch (category) {
+    case 'descriptors':
+      url += '/interface/stats/descriptor-ts';
+    break;
+    case 'stations':
+      url += '/interface/stats/stations-ts';
+    break;
+    case 'cruises':
+      url += '/interface/stats/stations-ts';
+    break;
+  }
+
+
+  try {
+    const response = await fetch(url);
+    response.json().then(response => {
+      const data = response.map(row => ({
+        x: row.sampling_date,
+        y: parseInt(row.counts)
+      }));
+      console.debug(data);
+
+      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'
+          },
+              ticks: {
+                length: 4
+              }
+                        }
+      }
+    
+  }      };
+
+      const ctx = document.getElementById(category + '-timeseries').getContext('2d');
+      new Chart(ctx, chartOptions);
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+

src/Controllers/StatsController.php

@@ -19,6 +19,20 @@ class StatsController {
       echo $result;
     }
 
+    public function descriptorTimeseries() {
+      $sql = "SELECT * FROM webapp.stats_timeseries_descriptors";
+      $result = PgSql::getJson($sql);
+
+      echo $result;
+    }
+
+    public function stationsTimeseries() {
+      $sql = "SELECT * FROM webapp.stats_timeseries_stations";
+      $result = PgSql::getJson($sql);
+
+      echo $result;
+    }
+
     public function countTypes() {
         $sql = "SELECT * FROM webapp.stats_count_per_type";
         $result = PgSql::getJson($sql);

src/Routing/controls.php

@@ -15,3 +15,5 @@ $router->map('GET', '/actions/requests/[i:id]?', 'MSFD\Controllers\ActionControl
 $router->map('GET', '/interface/stats/typecount', 'MSFD\Controllers\StatsController@countTypes', 'stat_types');
 $router->map('GET', '/interface/stats/totalrows', 'MSFD\Controllers\StatsController@countTotal', 'stat_total');
 $router->map('GET', '/interface/stats/general', 'MSFD\Controllers\StatsController@all', 'stat_all');
+$router->map('GET', '/interface/stats/descriptor-ts', 'MSFD\Controllers\StatsController@descriptorTimeseries', 'stat_desc_ts');
+$router->map('GET', '/interface/stats/stations-ts', 'MSFD\Controllers\StatsController@stationsTimeseries', 'stat_station_ts');

src/Views/main-statistics.php

@@ -1,4 +1,4 @@
-<section id="statistics-view" :class="isActiveTab(4) ? '' : 'is-hidden'" x-init="">
+<section id="statistics-view" :class="isActiveTab(4) ? '' : 'is-hidden'" class="is-overlay p-4 mt-6"x-init="">
   <article class="panel is-info">
     <p class="panel-heading">
       General
@@ -13,21 +13,8 @@
     </p>
       <div id="stats-chart-1">
       </div>
-  <div id="timeseries"></div>
+    <canvas id="descriptors-timeseries" x-init="await populateTimeseries('descriptors')"></canvas>
+    <canvas id="stations-timeseries" x-init="await populateTimeseries('stations')"></canvas>
   </article>
 </section>
-<script>
 
-function populateStatisticsGrid() {
-  console.debug('statistsiscsc');
-  const statsGrid = new gridjs.Grid({
-    columns: ['stations', 'cruises', 'parameters', 'descriptors', 'criteria'],
-    server: {
-      url: BASE_URL + '/interface/stats/general',
-        then: data => data.map(stats => {
-          return [stats.total_stations, stats.total_cruises, stats.total_parameters, stats.total_criterias, stats.total_descriptors]
-        })
-    }
-  }).render(grid);
-}
-</script>