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)
      }));
      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);
  }
}