Demo - Closure Table

let maxWeekNumber=0;
      let selectedYear="";
      let lastYear = null;
  
      let speciesDropdownValues = [
        {
      label: 'All Species',
      value: ''
        }
      ];

const closureDashboardConfig = {
        widgets: [
          {
            size: 'tiny-size',
            type: 'dropdown-filter',
            config: {
              label: 'Year',
              selected: 2026,
              id: 'yearFilter',
              values: [

{
                    label: '2026',
                    value: '2026'
                  },
                  
                  {
                    label: '2025',
                    value: '2025'
                  },
                  
                  {
                    label: '2024',
                    value: '2024'
                  },
                  
                  {
                    label: '2023',
                    value: '2023'
                  },
                  
                  {
                    label: '2022',
                    value: '2022'
                  },
                  
                  {
                    label: '2021',
                    value: '2021'
                  },
                  
                  {
                    label: '2020',
                    value: '2020'
                  },
                  
                  {
                    label: '2019',
                    value: '2019'
                  },
                  
                  {
                    label: '2018',
                    value: '2018'
                  },
                  
                  {
                    label: '2017',
                    value: '2017'
                  },
                  
                  {
                    label: '2016',
                    value: '2016'
                  },
                  
                  {
                    label: '2015',
                    value: '2015'
                  },
                  
                  {
                    label: '2014',
                    value: '2014'
                  },
                  
                  {
                    label: '2013',
                    value: '2013'
                  },
                  
                  {
                    label: '2012',
                    value: '2012'
                  },
                  
                  {
                    label: '2011',
                    value: '2011'
                  },
                  
                  {
                    label: '2010',
                    value: '2010'
                  },
                  
                  {
                    label: '2009',
                    value: '2009'
                  },
                  
                  {
                    label: '2008',
                    value: '2008'
                  },
                  
                  {
                    label: '2007',
                    value: '2007'
                  },
                  
                  {
                    label: '2006',
                    value: '2006'
                  },
                  
                  {
                    label: '2005',
                    value: '2005'
                  },
                  
                  {
                    label: '2004',
                    value: '2004'
                  },
                  
                  {
                    label: '2003',
                    value: '2003'
                  },
                                ]
            }
          },
          {
            size: 'small-size',
            type: 'dropdown-filter',
            config: {
              label: 'Species',
              id: 'speciesFilter',
              values: speciesDropdownValues
            }
          },
          {
            size: 'full-size',
            type: 'table',
            config: {
              testId: 'closureTable',
              url: 'https://erddap3.marine.ie/erddap/tabledap/habs_biotoxin.json',
              card: true,
              apiType: 'erddap',
              headerFiltering: false,
              pageSize: 100,
              enableEllipsis: false,
              showRecordCount: false,
              columnMinWidth: 50,
              download: true,
              maxHeight: 700,
              allowExport: true,
              allowSearch: false,
              manipulateData: function (data) {
                var result = {}, ret = [];
                maxWeekNumber = 0;
                const speciesSet = new Set();

for (var i = 0; i < data.length; i++) {
                  speciesSet.add(data[i].species);

let currentweek = parseInt(data[i].week_no);
                  if (currentweek > maxWeekNumber) {
                    maxWeekNumber = currentweek;
                  }

let parentAreaName = data[i].parent_area_name + ' - ' + data[i].location_name + ' (' + data[i].location_code + ')';
                  let key = parentAreaName + ' - ' + data[i].species;
                  let time = new Date(data[i].time).getFullYear();
                  selectedYear = new Date(data[i].time).getFullYear();

if (!result[key]) {
                    result[key] = {};
                    result[key].regionName = data[i].region_name;
                    result[key].locationName = data[i].location_name;
                    result[key].species = data[i].species;
                    result[key].parentAreaName = parentAreaName;
                    result[key].time = time;
                  }

if (!result[key][data[i].week_no]) {
                    result[key][data[i].week_no] = [];
                  }

result[key][data[i].week_no].push({
                    resultValue: Math.round(data[i].resultvalue * 100) / 100,
                    threshold: data[i].threshold,
                    resultName: data[i].resultname
                  });
                }

const resultNames = ['ASP', 'DSP', 'PSP', 'AZP'];

for (var location in result) {
                  let hasClosure = false;

for (let resultName of resultNames) {
                    hasClosure = false;
                    let item = {
                      species: result[location].species,
                      parentAreaName: location,
                      regionName: result[location].regionName,
                      parentAreaNameWithoutSpecies: result[location].parentAreaName,
                      time: result[location].time,
                      locationtime: ''
                    };

for (var weekNo = 1; weekNo <= maxWeekNumber; weekNo++) {
                      let weekData = (result[location]['' + weekNo] || []).filter(entry => entry.resultName === resultName);
                      weekData.sort((a, b) => b.resultValue - a.resultValue);

if (weekData.length === 0) {
                        item['col' + weekNo] = '<i style="color: black;" class="fas fa-circle"></i>';
                      } else {
                        let entry = weekData[0];

if (entry.resultValue >= entry.threshold) {
                          hasClosure = true;
                          item['col' + weekNo] = entry.resultValue.toFixed(2);
                        } else {
                          item['col' + weekNo] = '<i style="color: blue;" class="fas fa-less-than"></i>';
                        }

item['resultName' + weekNo] = entry.resultName;
                      }
                    }

if (hasClosure) {
                      ret.push(item);
                      hasClosure = false;
                    }
                  }
                }

const speciesList = [...new Set(ret.map(x => x.species))].sort((a, b) => a.localeCompare(b));

if (selectedYear != lastYear) {
                  speciesDropdownValues.length = 0;
                  speciesDropdownValues.push({
                    label: 'All Species',
                    value: ''
                  });

const speciesLabels = {
                    'Crassostrea gigas': 'Pacific Oyster - Crassostrea gigas',
                    'Cerastoderma edule': 'Common Cockle - Cerastoderma edule',
                    'Mytilus edulis': 'Blue Mussel - Mytilus edulis',
                    'Pecten maximus': 'King Scallop - Pecten maximus',
                    'Spisula solida': 'Atlantic Surf Clam - Spisula solida',
                    'Ostrea edulis': 'Native Oyster - Ostrea edulis',
                    'Ruditapes philipinarum': 'Manila Clam - Ruditapes philipinarum'
                  };

speciesList.forEach(species => {
                    speciesDropdownValues.push({
                      label: speciesLabels[species] || species,
                      value: `"${encodeURIComponent(species)}"`
                    });
                  });

lastYear = selectedYear;
                }

return ret;
              },
              sort: [{
                name: 'regionName',
                order: 'asc'
              }, {
                name: 'parentAreaNameWithoutSpecies',
                order: 'asc'
              }, {
                name: 'species',
                order: 'asc'
              }],
              columnsFunction: function (data) {
                let columns = [];

columns.push({
                  name: 'locationtime',
                  title: selectedYear + ' Closure Table',
                  data_type: 'string',
                  width: '180',
                  freeze: true,
                  formatter: function (value) {
                    return ' ';
                  }
                });

columns.push({
                  name: 'parentAreaNameWithoutSpecies',
                  title: 'Week Number:',
                  data_type: 'string',
                  width: '280',
                  freeze: true
                });

for (let index = 0; index < maxWeekNumber; index++) {
                  columns.push({
                    name: 'col' + (index + 1),
                    title: index + 1,
                    data_type: 'string',
                    width: '20',
                    encodeHtml: false,
                    ownerBand: 1
                  });
                }

columns.push({
                  name: 'species',
                  title: 'Species',
                  width: '280',
                  data_type: 'string',
                  groupIndex: 1
                });

columns.push({
                  name: 'regionName',
                  title: 'Region Name',
                  groupCellUseNameOnly: true,
                  groupIndex: 0
                });

return columns;
              },
              customCellStyle: function (tableData, cellData, rowData, cellName, rowIndex) {
                if (isNaN(cellData)) {
                  return '';
                }

function pickHex(color1, color2, weight) {
                  var w1 = weight;
                  var w2 = 1 - w1;
                  var rgb = [
                    Math.round(color1[0] * w2 + color2[0] * w1),
                    Math.round(color1[1] * w2 + color2[1] * w1),
                    Math.round(color1[2] * w2 + color2[2] * w1)
                  ];

function componentToHex(c) {
                    var hex = c.toString(16);
                    return hex.length == 1 ? '0' + hex : hex;
                  }

return '#' + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]);
                }

let toxinColors = {
                  'DSP': [255, 80, 80],
                  'AZP': [13, 145, 239],
                  'ASP': [255, 198, 9],
                  'PSP': [178, 138, 209]
                };

if (!rowData) {
                  return '';
                }

let toxin = rowData['resultName' + cellName];
                if (!toxin || !toxinColors[toxin]) {
                  return '';
                }

let year = tableData[0].time.getFullYear();
                this.ClosureTableSelectedYear = year;

if (!this.ClosureTableCache[year]) {
                  this.ClosureTableCache[year] = {};
                }

if (!this.ClosureTableCache[year][toxin]) {
                  this.ClosureTableCache[year][toxin] = Math.max.apply(Math, tableData
                    .filter(item => item['resultname'] === toxin)
                    .map(item => item.resultvalue));
                }

let maxValueForToxin = this.ClosureTableCache[year][toxin];
                if (!maxValueForToxin) {
                  return '';
                }

let ratio = (((cellData) * 0.8) / (maxValueForToxin)) + 0.2;
                  let color = pickHex([255, 255, 255], toxinColors[toxin], ratio);

return `padding-left: 5px; background-color: ${color}; font-weight: bold`;
              },
              legendTemplate: "<div style='font-family: Roboto,RobotoFallback,Helvetica,Arial,sans-serif; font-size: 14px; font-weight: bold; height: 25px;margin-bottom: 30px;'><div style='height: 25px; line-height: 25px; font-size: 16px; margin-bottom: 5px;'>Regulatory Levels</div><div style='border: 1 solid; background-color: #ff5050; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; padding-right: 5px; float: left;'>Diarrhetic Shellfish Toxins (0.16 μg/g)</div><div style='border: 1 solid; background-color: #0d91ef; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; padding-right: 5px; float: left;'>Azaspiracid Shellfish Toxins (0.16 μg/g)</div><div style='border: 1 solid; background-color: #ffc609; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; padding-right: 5px; float: left;'>Amnesic Shellfish Toxins (20 mg/kg)</div><div style='border: 1 solid; background-color: #b28ad1; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; padding-right: 5px; float: left;'>Paralytic Shellfish Toxins (800 μg STXdiHCL-eq.kg)</div><div style='height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; float: left;'><i style='color: blue;' class='fas fa-less-than'></i> Result below regulatory level</div><div style='height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; float: left;'><i style='color: black;' class='fas fa-circle'></i> No Sample Analysed</div></div>",
              dropdownFilters: [
                {
                  id: 'yearFilter',
                  query: '&time>=$value-01-01&time<=$value-12-31'
                },
                {
                  id: 'speciesFilter',
                  query: 'species=$value'
                }
              ],
              groupByColumn: 'regionName, species'
            }
          }
        ]
      };

(window || globalThis).closureDashboardConfig = closureDashboardConfig;

digitalocean.create({
        type: 'configurable-dashboard',
        config: closureDashboardConfig
      });

Ireland's Marine Atlas