/** * Some information: * - Drupal's jQuery is binded as `$` keyword * - `this` context keyword is provided as a visualization container * - `libraries` keyword contains enabeld libraries (names only, not instance) * - countries data can be reached using `drupalSettings.ugrid.countriesJsonArray` */ (async () => { const { default: Highcharts } = await import('https://unpkg.com/highcharts@9.0.1/es-modules/masters/highcharts.src.js'); await import('https://unpkg.com/highcharts@9.0.1/es-modules/masters/highmaps.src.js'); /** * UI */ const html = `

INFORM Risk Index

INFORM Risk (JRC 2021)

Hazard & Exposure

Lack of Coping Capacity

Vulnerability

`; this.innerHTML = html; /** * Parameters */ const el = El.el; const country = 'RWA'; const project = 'wesr-cca'; const countriesDict = drupalSettings.ugrid.countriesJsonArray; const apiBaseUrl = 'https://dash-aa.unepgrid.ch/api'; const mapUrl = 'https://owncloud.unepgrid.ch/index.php/s/u8lAsRlFNWYvRcd/download'; // UNMap BNDA25 world robinson const mainIndicators = [{ "container": "inform-value", "indicator": "INFORM Risk Index", "indicator_uid": 1517 }, { "container": "haz-value", "indicator": "Hazard & Exposure Index", "indicator_uid": 1464 }, { "container": "cop-value", "indicator": "Lack of Coping Capacity Index", "indicator_uid": 1413 }, { "container": "vul-value", "indicator": "Vulnerability Index", "indicator_uid": 1544 } ]; const detailsIndicators = [{ "title": "Hazard & Exposure", "indicators": [ "Physical exposure to earthquakes", "Physical exposure to floods", "Physical exposure to tropical cyclones", "Physical exposure to tsunamis", "Droughts probability and historical impact", "Epidemic" ] }, { "title": "Lack of Coping Capacity", "indicators": [ "Poverty & Development", "Inequality", "Aid Dependency", "Uprooted people", "Others Vulnerable Groups" ] }, { "title": "Vulnerability", "indicators": [ "Disaster Risk Reduction", "Governance", "Communication", "Physical Infrastructure", "Access to Health Care" ] } ]; const colorClasses = [{ "from": 0, "to": 1, "color": "#006837" }, { "from": 1, "to": 2, "color": "#1a9850" }, { "from": 2, "to": 3, "color": "#66bd63", }, { "from": 3, "to": 4, "color": "#a6d96a", }, { "from": 4, "to": 5, "color": "#d9ef8b", }, { "from": 5, "to": 6, "color": "#fee08b", }, { "from": 6, "to": 7, "color": "#fdae61", }, { "from": 7, "to": 8, "color": "#f46d43", }, { "from": 8, "to": 9, "color": "#d73027", }, { "from": 9, "to": 10, "color": "#a50026" } ]; const colors = [ '#00abf1', '#fbc550', '#408084', '#6bd4b3', '#ee5960', '#484e5a', '#ff874e', '#04748e', '#c9bbab', '#b17baa', '#b6e9d9', '#fde3a7', '#a0c0c0', '#b1e5f0', '#f6acaf', '#a4a6ac', '#ffc3a6', '#81b8c6', '#e4ddd5', '#d9bdd4' ]; /** * Initialize Highcharts series and parameters */ var mapSeries = {}; var riskSerie = []; var hasZoomed = false; /** * Setup lister on the drop-down list to update map data */ var select = document.getElementById("indicator-map"); select.addEventListener("change", updateMap); /** * Queries to retrieve data from Superset */ const queryContextMap = { datasource: { id: 117, type: "table" }, force: false, queries: [{ time_range: "No filter", filters: [{ col: "indicator_uid", op: "IN", val: [ "1413", "1464", "1517", "1544" ] }, { col: "date_text", op: "==", val: "2022" }, { col: "projects", op: "LIKE", val: `%${project}%` }, /*{ col: "code_iso3", op: "NOT IN", val: [ "USA", "DEU" ] }*/ ], extras: { time_grain_sqla: "P1D", having: "", having_druid: [] }, applied_time_extras: {}, annotation_layers: [], groupby: [], columns: [ "code_iso3", "indicator_name_label", "indicator_value" ], metrics: [], order_desc: true, orderby: [], row_limit: 10000, timeseries_limit: 0, url_params: {} }], result_format: "json", result_type: "full" }; const queryContextRisk = { datasource: { id: 117, type: "table" }, force: false, queries: [{ time_range: "No filter", filters: [{ col: "indicator_uid", op: "==", val: "1517" }, { col: "code_iso3", op: "==", val: `${country}` } ], extras: { time_grain_sqla: "P1D", having: "", having_druid: [] }, applied_time_extras: {}, annotation_layers: [], groupby: [], columns: [ "indicator_value", "date_text" ], metrics: [], order_desc: true, orderby: [ [ "date_text", true ] ], row_limit: 10000, timeseries_limit: 0, url_params: {} }], result_format: "json", result_type: "full" }; const queryContextIndex = { datasource: { id: 117, type: "table" }, force: false, queries: [{ time_range: "No filter", filters: [{ col: "indicator_uid", op: "IN", val: [ "1413", "1464", "1517", "1544", "1485", "1478", "1486", "1493", "1496", "1507", "1558", "1555", "1546", "1586", "1565", "1430", "1415", "1392", "1431", "1425" ] }, { col: "code_iso3", op: "==", val: `${country}` }, { col: "date_text", op: "==", val: `2022` } ], extras: { time_grain_sqla: "P1D", having: "", having_druid: [] }, applied_time_extras: {}, annotation_layers: [], groupby: [], columns: [ "indicator_uid", "indicator_name_label", "indicator_value" ], metrics: [], order_desc: true, orderby: [], row_limit: 10000, timeseries_limit: 0, url_params: {} }], result_format: "json", result_type: "full" }; /** * Fetch all data */ const dataMap = await fetchData(apiBaseUrl, queryContextMap); const dataRisk = await fetchData(apiBaseUrl, queryContextRisk); var dataIndex = await fetchData(apiBaseUrl, queryContextIndex); const geojson = await fetchGeoJSON(mapUrl); dataIndex.forEach(d => d.color = getColor(d.indicator_value, colorClasses)); /** * Add main indicator value and INFORM Risk trend in the UI */ mainIndicators.forEach(d => { var element = dataIndex.find(i => i.indicator_uid == d.indicator_uid); if (element) { addTextToEl(d.container, element.indicator_value.toFixed(1), element.color); } else { var value = '-'; var color = getColor(value, colorClasses); addTextToEl(d.container, value, color); } }); addTextToEl('inform-label', trendLabel(dataRisk, 5)); /** * Format data for use in map */ mainIndicators.forEach(i => { var data_filtered = dataMap.filter(d => d.indicator_name_label === i.indicator); var serie = data_filtered.map(v => ({ iso3code: v.code_iso3, id: v.code_iso3, value: v.indicator_value })); mapSeries[i.indicator] = serie; }); /** * Format data for use in chart */ riskSerie = dataRisk.map(d => ({ y: d.indicator_value, x: Number(d.date_text) })); /** * Generate UI for the details pop-up */ var detailsCont = document.getElementById('country-viz-ra-details'); detailsIndicators.forEach(d => { var titleCont = createDetailsTitle(d.title); d.indicators.forEach(i => createDetailsEl(dataIndex, i, titleCont)); detailsCont.appendChild(titleCont); }); const $detailsModal = $('#country-viz-ra-details-modal', this); $('#country-viz-ra-details-modal-button', this).click(function (e) { e.preventDefault(); $detailsModal.addClass('open'); }); $detailsModal.find('.modal-btn-close, .modal-mask').click(function (e) { e.preventDefault(); $(this).closest('.modal').removeClass('open'); }); /** * Map options */ var hmap = Highcharts.mapChart('container-map', { chart: { type: 'map', animation: false, spacing: [0, 0, 0, 0] }, title: { text: '' }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom', x: 1, } }, colorAxis: { dataClasses: colorClasses }, credits: { enabled: false }, tooltip: { headerFormat: '{series.name}
', pointFormatter: function () { const countryName = countriesDict.countries.find(d => d.iso3 == this.id).country_name; return `${countryName}: ${this.value}
`; } }, legend: { labelFormatter: function () { return `${this.from} - ${this.to}`; } }, series: [{ mapData: geojson, data: mapSeries[select.value], joinBy: 'iso3code', name: select.value, borderWidth: 0.2, states: { hover: { borderWidth: 1, color: '#a4a9af' } }, }] }); if(hmap.get(country)){ zoomToCountry(country); } /** * Chart options */ var chart = Highcharts.chart('container-chart', { chart: { type: 'area', margin: [0, 0, 0, 0] }, title: { text: undefined }, legend: { enabled: false }, plotOptions: { area: { fillOpacity: 0, marker: { enabled: false }, lineWidth: 2, states: { hover: { enabled: false } }, threshold: null } }, xAxis: { visible: false }, credits: { enabled: false }, tooltip: { valueDecimals: 1 }, series: [{ name: 'INFORM Risk', data: riskSerie, color: colors[0], fillColor: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, Highcharts.color(colors[0]).setOpacity(0.5).get('rgba')], [1, Highcharts.color(colors[0]).setOpacity(0).get('rgba')] ] } }] }); $(window).resize(function () { hmap.reflow(); chart.reflow(); }); $(window).trigger('resize'); // forces a reflow of all charts to fit to their container /** * Utility functions */ async function fetchData(apiBaseUrl, queryContext) { const response = await fetch(`${apiBaseUrl}/v1/chart/data`, { method: 'POST', headers: { 'accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(queryContext) }); const data = await response.json(); return data.result[0].data; } async function fetchGeoJSON(url) { const response = await fetch(url); const data = await response.json(); return data; } function updateMap() { hmap.series[0].setData([]); hmap.series[0].update({ data: mapSeries[select.value], name: select.value }, true); if(!hasZoomed && hmap.get(country)){ zoomToCountry(country); } } function zoomToCountry(country){ hmap.get(country).zoomTo(); hasZoomed = true; updateMap(); } function getColor(value, colors) { var color; if (value == 0) { color = colors.find(c => c.from == 0).color; } else if (value > 0 && value <= 10) { color = colors.find(c => value > c.from && value <= c.to).color; } else { color = '#7388a3'; } return color; } function trendLabel(data, year) { let trend = '-'; if (data.length > 0) { const index_last_value = data.length - 1; const last_value = data[index_last_value].indicator_value; const start_value = data[index_last_value - year].indicator_value; trend = (((last_value - start_value) / Math.abs(start_value)) * 100).toFixed(1); } return `${trend}% change in the last ${year} years`; } function addTextToEl(id, txt, color = undefined) { var element = document.getElementById(id); element.innerText = txt; if (color != undefined) { element.style.color = color; } } function createDetailsTitle(item) { var title = el('div', { class: ["flex", "flex-col", "mt-4"] }, el('h2', item, { class: ["flex"] })); return title; } function createDetailsEl(data, item, container) { var value = '-'; var color = getColor(value, colorClasses); var element = data.find(i => i.indicator_name_label == item); if (element) { color = element.color; value = element.indicator_value.toFixed(1); } var valCont; var ind = el('div', { class: ["flex", "flex-row", "mt-2"] }, el('div', { class: ["flex", "w-12", "mx-2", "items-center", "justify-center"], style: { backgroundColor: color } }, valCont = el('span', { class: ["flex", "text-lg", "font-medium"], })), el('div', item, { class: ["flex", "text-base", "items-center"], })); valCont.innerText = value; container.appendChild(ind); } })();

INFORM Risk Index

INFORM Risk (JRC 2021)

INFORM Risk in detail