msfd_portal_hcmr/public/js/stats.js

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),
        details: row.details
      }));
      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'
              },
                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);
    });
  } catch (error) {
    console.error(error);
  }
}