Closure Table

digitalocean.create({ type: 'configurable-dashboard', config: { widgets: [ { size: "full-size", type: 'branding', config: { markdown: `<h3>Instructions:</h3> <ul><li>Select the desired year on the dropdown</li> <li>Use the Species filter to select a specific species</li> <li>The table will be updated accordingly to the filters, showing the closed areas for each species and its concentrations</li></ul> <p style="font-size: 12px;">* The dashboard is best viewed in large screens</p>`, padding: '10px' } }, { size: "quarter-size", type: 'dropdown-filter', config: { label: 'Year', selected: 2024, id: 'yearFilter', values: [ { 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: "quarter-size", type: 'dropdown-filter', config: { label: 'Species', id: 'speciesFilter', values: [{ label: 'All Species', value: '' }, { label: 'Pacific Oyster - Crassostrea gigas', value: '"Crassostrea%20gigas"' }, { label: 'Blue Mussel - Mytilus edulis', value: '"Mytilus%20edulis"' }, { label: 'King Scallop - Pecten maximus', value: '"Pecten%20maximus"' }, { label: 'Atlantic Surf Clam - Spisula solida', value: '"Spisula%20solida"' } ] } }, { "size": "full-size", "type": "table", "config": { "url": "https://erddap3.marine.ie/erddap/tabledap/habs_biotoxin.json", "card": true, "apiType": "erddap", "headerFiltering": false, "pageSize": 50, "showRecordCount": false, "columnMinWidth": 50, "maxHeight": 500, "allowExport": false, "allowSearch": false, "manipulateData": function(data) { var result = {}, ret = []; console.log("data.lenght",data); console.log("result",result); for (var i = 0; i < data.length; i++) { let parentAreaName = data[i].parent_area_name + ' - ' + data[i].location_name + '(' + data[i].location_code + ')'; if (!result[parentAreaName]) { result[parentAreaName] = {}; result[parentAreaName].regionName = data[i].region_name; result[parentAreaName].locationName = data[i].location_name; } result[parentAreaName][data[i].week_no] = { resultValue: data[i].resultvalue, threshold: data[i].threshold, resultName: data[i].resultname }; } for (var location in result) { let item = { parentAreaName: location, regionName: result[location].regionName }; let hasClosure = false; for (var locationResult in result[location]) { if (result[location][locationResult]?.resultValue >= result[location][locationResult]?.threshold) { hasClosure = true; break; } } if (!hasClosure) { continue; } for (var weekNo = 1; weekNo <= 52; weekNo++) { if (!result[location]["" + weekNo]) { item["col" + weekNo] = "<i style='color: black;' class='fas fa-circle'></i>"; } else if (result[location]["" + weekNo].resultValue >= result[location]["" + weekNo].threshold) { item["col" + weekNo] = result[location]["" + weekNo].resultValue.toFixed(2); } else { item["col" + weekNo] = "<i style='color: blue;' class='fas fa-less-than'></i>"; } item["resultName" + weekNo] = result[location]["" + weekNo]?.resultName; } ret.push(item); } return ret; }, "sort": [{ name: "regionName", order: "asc" },{ name: "parentAreaName", order: "asc" } ], "columnsFunction": function(data) { let columns = []; for (let index = 0; index < 52; index++) { columns.push({ name: "col" + (index + 1), title: index + 1, data_type: "string", width: "20", encodeHtml: false, ownerBand: 1 }); } columns.unshift({ name: "parentAreaName", title: "Week Number:", data_type: "string", width: "280", freeze: true }); columns.push({ name: "regionName", 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]; let maxValueForToxin = Math.max.apply(Math, tableData.filter(x => x.resultName == toxin).map(function(o) { return o.resultValue; })); let ratio = (((cellData) * 0.8) / (maxValueForToxin)) + 0.2 //let ratio = cellData / maxValueForToxin; 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;'><div style='border: 1 solid; background-color: #ff5050; width: 220px; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; float: left;'>> Regulatory Levels - DSP (μg/g)</div><div style='border: 1 solid; background-color: #0d91ef; width: 230px; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; float: left;'>> Regulatory Levels - AZP (μg/g)</div><div style='border: 1 solid; background-color: #ffc609; width: 230px; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; float: left;'>> Regulatory Levels - ASP (mg/kg)</div><div style='border: 1 solid; background-color: #b28ad1; width: 320px; height: 25px; line-height: 25px; margin-right: 10px; padding-left: 5px; float: left;'>> Regulatory Levels - PSP (μ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></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" } } ] } });