/** * pagine delle precipitazioni di massima intensità * se viene richiesta con parametro codseq allora visualizza i dati di pioggia massima del sensore * * filippo 27/03/2023 start version * 29/03/2023 tabelle dei tempi di ritorno * 30/03/2023 tabelle dei paraemtri di gumbel e delle curve di possibilità * 31/03/2023 grafici dei tempi di ritorno * 04/04/2023 grafici dei tempi di ritorno * 12/04/2023 grafici delle curve di possibilità pluviometrica * */ // link per ottenere i dati visualizzati const lnkStazioni = 'https://api.arpa.veneto.it/REST/v1/meteo_precipmax'; const lnkTabella = 'https://api.arpa.veneto.it/REST/v1/meteo_precipmax_tabella'; const lnkGumbel = 'https://api.arpa.veneto.it/REST/v1/meteo_precipmax_gumbel'; const lnkCurve = 'https://api.arpa.veneto.it/REST/v1/meteo_precipmax_curve'; const nomiAggregaz = { '5m': '5 minuti', '10m': '10 minuti', '15m': '15 minuti', '30m': '30 minuti', '45m': '45 minuti', '1h': '1 ora', '3h': '3 ore', '6h': '6 ore', '12h': '12 ore', '24h': '24 ore', '48h': '48 ore', '72h': '72 ore', '96h': '96 ore', '120': '120 ore', '1g': '1 giorno', '2g': '2 giorni', '3g': '3 giorni', '4g': '4 giorni', '5g': '5 giorni'}; const chartsColors = 'blue'; // flag per avere i console.log attivi oppure no const DEBUG = false; // simbolo punto della stazione const pointDimension = 8; const colorFill = 'green'; const colorLine = 'black'; const fontStz = '24px Calibri, 24px sans-serif'; // colore di fondo della tabella province const btnBackgroundColor = 'skyblue'; // nome del layer aggiunto nella mappa const layerMappa = 'STZ_PRECMAX'; // oggetto mappa var map; // oggetto popup sul punto stazione var popup; // oggetto kml var kmlProvince; // oggetto delle stazoni var jsonStazioni = []; // momento di aggiornamento del sensore intabellato var aggiornamento; /*------------------------------------------------------------------------------ */ function getParameterByName(name) { name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]"); var regex = new RegExp("[\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } /** * ritorna una data (2022-09-12T01:00:00) in UTC * in realtà, visto che tutte le date sono in solare, faccio finta che il solare * corrisponda all'UTC in modo da non avere la conversione in locale del browser */ Date.prototype.ConvIstante = function( ist, isUTC = false ) { var nSolare = 0; if (isUTC) {nSolare = 1;} // 2022-09-12T01:00:00 // 0123456789012345678 var cosa = new Date(Date.UTC(ist.substring(0, 4), parseFloat(ist.substring(5, 7))-1, ist.substring(8, 10), parseFloat(ist.substring(11,13))+nSolare, ist.substring(14,16), 0, 0) ); this.setTime( cosa.getTime() ); return this; } /*------------------------------------------------------------------------------ ritorna una stringa con la data nel formato indicato */ Date.prototype.Formato = function( formato ) { var mm = ('0' + (this.getUTCMonth()+1) ) .slice(-2); var dd = ('0' + this.getUTCDate()).slice(-2); var yyyy = this.getUTCFullYear(); var hh = ('0' + (this.getUTCHours())).slice(-2); var mi = ('0' + this.getUTCMinutes()).slice(-2); var ss = ('0' + this.getUTCSeconds()).slice(-2); var mesi = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno','Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre']; var giorni = ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato']; var sRet = ''; switch (formato) { case 'gg g mmm YYYY': sRet =giorni[ this.getUTCDay() ] + ' ' + this.getUTCDate() + ' ' + mesi[ this.getUTCMonth() ] + ' ' + yyyy; break; case 'DD/MM/YYYY': sRet = dd + '/' + mm + '/' + yyyy; break; case 'DD/MM/YYYY HH': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh; break; case 'DD/MM/YYYY HH:mm': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh + ':' + mi; break; case 'DD HH' : sRet = dd + ' ' + hh; break; case 'DD' : sRet = dd; break; case 'HH:mm': sRet = hh + ':' + mi; break; case 'HH': sRet = hh; break; case 'mm': sRet = mi; break; case 'YYYYMMDDHHmm': sRet = yyyy + mm + dd + hh + mi; break; case 'YYYY-MM-DDTHH-mm': sRet = yyyy + '-' + mm + '-' + dd + 'T' + hh + ':' + mi + ':00'; break; default: sRet = this.toString(); break; } return sRet; } /** * Ritorno PADOVA come Padova */ function titleCase(string){ return string[0].toUpperCase() + string.slice(1).toLowerCase(); } /** * div sulla pagina utilizzati da questa procedura */ function CreaPaginaMappa() { // spazio dove mettere il testo del popup const divHint = document.createElement('div'); divHint.setAttribute('id', 'hintStazione'); divHint.setAttribute('class', 'ol-overlay-container ol-selectable'); divHint.style.transform= 'translate(-50%, -105%)'; divHint.style.borderStyle = "solid"; divHint.style.borderWidth = "thin"; divHint.style.borderRadius = "5px"; divHint.style.whiteSpace = 'nowrap'; divHint.style.backgroundColor = "#636363"; divHint.style.borderColor = "#C4C4C4"; divHint.style.padding = "5px"; divHint.style.color = "white"; divHint.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHint.style.fontSize = '10px'; block.append(divHint); CaricaMappa(); AddStazioni(); } /** * aggiungo il simbolo bi-chevron-down */ function AggiungiDown() { /* */ const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const iconPath = document.createElementNS('http://www.w3.org/2000/svg','path'); iconSvg.setAttribute('fill', 'currentColor'); iconSvg.setAttribute('viewBox', '0 0 16 16'); iconSvg.setAttribute('class', 'bi bi-chevron-down'); iconSvg.setAttribute('aria-hidden', 'true'); iconSvg.setAttribute('style', 'width:16; height:16') iconPath.setAttribute('d', 'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'); iconPath.setAttribute('fill-rule', 'evenodd'); iconSvg.appendChild(iconPath); return iconSvg; } /** * create map */ function CaricaMappa() { const MAP_DEFAULT_EXTENT = [818354.918, 5425389.1889, 1816693.282, 6070039.437]; map = new ARPAVAPI.openlayers.ol.Map({ target: 'meteoMap', view: new ARPAVAPI.openlayers.ol.View({ center: ARPAVAPI.openlayers.proj.transform([11.8, 45.9], 'EPSG:4326', 'EPSG:3857'), zoom: 8, maxZoom: 13, extent: MAP_DEFAULT_EXTENT, }), controls: [ new ARPAVAPI.openlayers.control.Zoom() ] }); // aggiungo lo sfondo map.addLayer( getTileLayer() ); // add kml delle province addKmlProvince(); // popup sulla stazione popup = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazione'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, }); map.addOverlay(popup) // click sul punto map.on('singleclick', function (evt) { clickMap(evt); }); // change mouse cursor when over marker map.on('pointermove', function (evt) { mouseMoveOnMap(evt); }); } /** * Get tile layer */ function getTileLayer() { return new ARPAVAPI.openlayers.layer.Tile({ source: new ARPAVAPI.openlayers.source.OSM({ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', }) }); } /** * gestione del click sul punto della stazione */ function clickMap(evt) { const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const stz = feature.getProperties().data; if (stz) { vediDati( feature.getProperties().data ); } } /** * change mouse cursor when over marker */ function mouseMoveOnMap(evt) { if (evt.dragging) return; var pixel = evt.map.getEventPixel(evt.originalEvent); var hit = map.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerMappa); } }); if (hit) { evt.map.getTargetElement().style.cursor = 'pointer'; const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if (feature) { const stz = feature.getProperties().data; if (stz) { const frase = stz.nome_stazione; document.getElementById('hintStazione').innerHTML = frase; popup.setPosition(evt.coordinate); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } //------------------------------------------------------------------------- // funzione di log su console se DEBUG function myConsoleLog(sFrase) { if (DEBUG) { console.log(sFrase); } } /** * livello kml delle Province */ function addKmlProvince() { kmlProvince = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ url: 'https://www.arpa.veneto.it/api/risorse/data-meteo/kml/Province.kml', format: new ARPAVAPI.openlayers.format.KML() }), name: 'kmlProvince', }); map.addLayer( kmlProvince ); } /** * recupero elenco stazioni e le visualizzo */ async function AddStazioni() { const lnk = lnkStazioni + '?rnd=' + Math.random(); const response = await fetch(lnk); const jsonResponse = (await response.json()); const stzData = jsonResponse.data; jsonStazioni = []; // oggetto geoJSON const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; // carico le stazioni nel geoJSON stzData.forEach((stazione, index) => { geojsonObject.features.push({ type: 'Feature', geometry: JSON.parse(stazione.point), properties: { id: stazione.codice_stazione, data: { ...stazione }, // tutte le proprietà della stazione presente nel json }, }); jsonStazioni.push( stazione ); }); // punto della stazione const iconStyle = new ARPAVAPI.openlayers.style.Style({ image: new ARPAVAPI.openlayers.style.Circle({ radius: pointDimension, fill: new ARPAVAPI.openlayers.style.Fill({color: colorFill}), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: colorLine, width: 1 }) }) }) // label stazione var labelStyle = new ARPAVAPI.openlayers.style.Style({ text: new ARPAVAPI.openlayers.style.Text({ placement: 'point', font: fontStz, overflow: true, fill: new ARPAVAPI.openlayers.style.Fill({ color: '#101010' }), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: 'white', width: 4 }), offsetY: (-1), textBaseline: 'bottom', textAlign: 'center', rotation: 0, }) }); var style = [iconStyle, labelStyle]; const vectorLayer = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ format: new ARPAVAPI.openlayers.format.GeoJSON(), features: new ARPAVAPI.openlayers.format.GeoJSON({ featureProjection: 'EPSG:3857', }).readFeatures(geojsonObject) }), visible: true, name: layerMappa, style: function(feature) { labelStyle.getText().setText( '' + feature.getProperties().data.codice_stazione ); return style; }, }); // aggiungo il nuovo layer delle stazioni map.addLayer( vectorLayer ); // intabello le stazioni sotto alla mappa TabellaStazioni(); } /** * TabellaMassimi: ritorno il testo per la tabella dei dati alle aggregazioni indicate */ function TabellaMassimi(massimi, aggregaz) { var frase = ''; frase += ''; frase += ''; frase += '' + ''; frase += ''; // intestazione delle aggregazioni frase += ''; aggregaz.forEach(agg => { frase += ''; }); frase += ''; // intestazione delle colonne con i numeri frase += ''; aggregaz.forEach(agg => { frase += ''; frase += ''; }); frase += ''; // tabella dei dati massimi.forEach(tupla => { frase += ''; frase += ''; aggregaz.forEach(agg => { let v = ' ', d = ' '; if (! tupla[ 'canc_' + agg]) { v = tupla[ 'max_' + agg]; if ( (v) && (! isNaN(v) ) ) { v = parseFloat(v).toFixed(1); } let dd = new Date().ConvIstante( tupla[ 'data_' + agg] ); // per i giorni non metto le ore if (agg.indexOf("g") >= 0) { d = dd.Formato('DD/MM/YYYY'); } else { d = dd.Formato('DD/MM/YYYY HH:mm'); } } frase += ''; frase += ''; }); }); frase += ''; frase += '

Anno	Pioggia in mm
	' + nomiAggregaz[agg] + '
	mm	data ora
' + tupla.anno + '	' + v + '	' + d + '

'; return frase; } /** * dammiGumbel: ritorna il valore del campo */ function dammiGumbel(gumbel, agg, campo) { var ret = ''; gumbel.forEach(tupla => { if ( tupla.intervallo == agg.toUpperCase()) { ret = tupla[campo]; } }); return ret; } /** * dammiCurva: ritorna li valore del campo dalle curve */ function dammiCurva(curve, anno, campo) { var ret = ''; curve.forEach(tupla => { if ( tupla.temporitorno == anno ) { ret = tupla[campo]; } }); return ret; } /** * TabellaGumbel: ritorno il testo per la tabella dei parametri di gumbel */ function TabellaGumbel(gumbel, aggregaz) { var frase = 'Parametri della distribuzione probabilistica di Gumbel
'; frase += ''; frase += ''; frase += ''; aggregaz.forEach(agg => { frase += ''; }); frase += ''; frase += ''; frase += ''; aggregaz.forEach(agg => { frase += ''; }); frase += ''; frase += ''; frase += ''; aggregaz.forEach(agg => { frase += ''; }); frase += ''; frase += ''; frase += ''; aggregaz.forEach(agg => { frase += ''; }); frase += ''; frase += ''; frase += ''; aggregaz.forEach(agg => { frase += ''; }); frase += ''; frase += ''; frase += ''; aggregaz.forEach(agg => { frase += ''; }); frase += ''; frase += '

Parametro	' + nomiAggregaz[agg] + '
Numerosità (anni)	' + dammiGumbel(gumbel, agg, 'numero') + '
Media (mm)	' + dammiGumbel(gumbel, agg, 'media') + '
Deviazione standard (mm)	' + dammiGumbel(gumbel, agg, 'devstandard') + '
Alfa	' + Math.round(dammiGumbel(gumbel, agg, 'alfa') * 1000) / 1000 + '
Mu	' + Math.round(dammiGumbel(gumbel, agg, 'mu') * 1000) / 1000 + '

'; return frase; } /** * CalcolaMMdaAnni: ritorna i mm di pioggia avendo il tempo di ritorno */ function CalcolaMMdaAnni(anni, alfa, mu) { // la formula usata è quella indicata nella mail di Marco Sangati del 08/04/2010 // con oggetto 'Re: Riassunto della riunione odierna sui tempi di ritorno delle piogge' // alfa è 1/alfa che devo farlo tornare come prima // console.log('anni ' + anni); // console.log('alfa ' + alfa); // console.log('mu ' + mu); var ret = mu - ( ( Math.log( Math.log( ( anni / (anni-1) ) ) ) ) / (1.0/alfa) ); // console.log('ret ' + ret); // arrotondo a una cifra decimale ret = Math.round(ret * 10) / 10; // metto sempre un decimale ret = ret.toFixed(1); return ret; } /** * TabellaTempiRitorno: ritorna il codice html per la tabella degli anni di ritorno all'agg indicata */ function TabellaTempiRitorno(gumbel, agg, anniRitorno) { const alfa = dammiGumbel(gumbel, agg, 'alfa'); const mu = dammiGumbel(gumbel, agg, 'mu'); // console.log('agg ' + agg); var frase = ''; frase += ''; frase += ''; anniRitorno.forEach(anni => { frase += ''; }); frase += "

Tempo di ritorno con durata ' + nomiAggregaz[agg] + '	mm
' + anni + ' anni	' + CalcolaMMdaAnni(anni, alfa, mu) + '

"; return frase; } /** * TabellaCurvePossibilita: ritorna l'html per la tabella delle curve di possibilità */ function TabellaCurvePossibilita(curve, campo, anniRitorno) { var tito = ''; // intestazione presonalizzata var tito = ''; switch (campo) { case 'MIN': tito = '<1h'; break; case 'ORE': tito = '1-24h'; break; case 'GIORNI': tito = '1-5gg'; break; } var frase = 'Parametri delle curve di possibilità pluviometriche con durata ' + tito + ' (espressa in ore)
'; frase += ''; frase += '' + '' + '' + ''; curve.forEach(tupla => { if (anniRitorno.includes(tupla.temporitorno) ) { frase += '' + '' + '' + ''; } }); frase += "

Tempo di ritorno	a	n
' + tupla.temporitorno + ' anni	' + Math.round( tupla['A_' + campo] * 1000 ) / 1000 + '	' + Math.round( tupla['N_' + campo] * 1000 ) / 1000 + '

"; return frase; } /** * visualizzo la tabella dei dati della stazione indicata */ async function ValoriSensore( codseq ) { // recupero i massimi annuali const lnkMassimi = lnkTabella + '?codseq=' + codseq + '&rnd=' + Math.random(); const respMax = await fetch(lnkMassimi); const dataMax = (await respMax.json()); var massimi = dataMax.data; // recupero i tempi di gumbel const lnkparamGumbel = lnkGumbel + '?codseq=' + codseq + '&rnd=' + Math.random(); const respGumb = await fetch(lnkparamGumbel); const dataGumb = (await respGumb.json()); var gumbel = dataGumb.data; // recupero i parametri delle curve di possibilità pluviometrica const lnkparamCurve = lnkCurve + '?codseq=' + codseq + '&rnd=' + Math.random(); const respCurve = await fetch(lnkparamCurve); const dataCurve = (await respCurve.json()); var curve = dataCurve.data; // per gli attributi della stazione prendo il primo recrod di gumbel const pntStaz = gumbel[0]; document.getElementById('StazioneNome').innerHTML = pntStaz.nome_stazione; document.getElementById('StazioneQuota').innerHTML = pntStaz.altitude; document.getElementById('StazioneCoord').innerHTML = pntStaz.longitudine + '; ' + pntStaz.latitudine; document.getElementById('StazioneComune').innerHTML = pntStaz.comune + ' (' + titleCase( pntStaz.provincia ) +')'; // i link ai dati json NON li metto // document.getElementById('lnkJson').setAttribute('href', lnkMassimi); // document.getElementById('lnkGumbel').setAttribute('href', lnkparamGumbel); // array degli anni da usare per i mm dnei tempi di ritorno alle vare aggregazioni const anniRitorno = [2, 5, 10, 20, 50]; // aggreagzioni per ogni gruppo var aggregazio; // tabella dei massimi con durata minuti aggregazio = ['5m', '10m', '15m', '30m', '45m']; document.getElementById('tabMinutiAnni').innerHTML = TabellaMassimi(massimi, aggregazio); document.getElementById('tabMinutiGumbel').innerHTML = TabellaGumbel(gumbel, aggregazio); aggregazio.forEach(element => { document.getElementById('tr-' + element + '-tab').innerHTML = TabellaTempiRitorno(gumbel, element, anniRitorno); DatiTRitorno(massimi, gumbel, element, 'tr-' + element + '-graf'); }); document.getElementById('curve-minuti-tab').innerHTML = TabellaCurvePossibilita(curve, 'MIN', anniRitorno); DatiCurvaPoss(gumbel, curve, 'minuti', aggregazio, anniRitorno, 'curve-minuti-graf'); // tabella dei massimi con durata ore aggregazio = ['1h', '3h', '6h', '12h', '24h']; document.getElementById('tabOreAnni').innerHTML = TabellaMassimi(massimi, aggregazio); document.getElementById('tabOreGumbel').innerHTML = TabellaGumbel(gumbel, aggregazio); aggregazio.forEach(element => { document.getElementById('tr-' + element + '-tab').innerHTML = TabellaTempiRitorno(gumbel, element, anniRitorno); DatiTRitorno(massimi, gumbel, element, 'tr-' + element + '-graf'); }); document.getElementById('curve-ore-tab').innerHTML = TabellaCurvePossibilita(curve, 'ORE', anniRitorno); DatiCurvaPoss(gumbel, curve, 'ore', aggregazio, anniRitorno, 'curve-ore-graf'); // tabella dei massimi con durata giorni aggregazio = ['1g', '2g', '3g', '4g', '5g']; document.getElementById('tabGiorniAnni').innerHTML = TabellaMassimi(massimi, aggregazio); document.getElementById('tabGiorniGumbel').innerHTML = TabellaGumbel(gumbel, aggregazio); aggregazio.forEach(element => { document.getElementById('tr-' + element + '-tab').innerHTML = TabellaTempiRitorno(gumbel, element, anniRitorno); DatiTRitorno(massimi, gumbel, element, 'tr-' + element + '-graf'); }); document.getElementById('curve-giorni-tab').innerHTML = TabellaCurvePossibilita(curve, 'GIORNI', anniRitorno); DatiCurvaPoss(gumbel, curve, 'giorni', aggregazio, anniRitorno, 'curve-giorni-graf'); let dd = new Date().ConvIstante( curve[0].aggiornamento ); document.getElementById('aggiornamento').innerHTML = 'Aggiornamento del ' + dd.Formato('DD/MM/YYYY') + '.'; } /** * Visualizzo la tabella delle stazioni */ function TabellaStazioni() { // metto le stazioni in ordine alfabetico per provincia (sono già in ordine alfabetico basta dividerle per provincia) let ord = {'BELLUNO' : [], 'PADOVA' : [], 'ROVIGO' : [], 'TREVISO' : [], 'VENEZIA' : [], 'VICENZA' : [], 'VERONA' : [], 'UDINE' : []}; jsonStazioni.forEach((stazione, index) => { ord[ stazione.provincia ].push( stazione ); }); // myConsoleLog( JSON.stringify(ord, null, 4) ); var table = document.createElement('table'); table.setAttribute('id', 'eleStazioni'); table.setAttribute('class', 'table table-sm table-striped table-bordered table-hover'); var body = table.createTBody(); // ciclo le province Object.keys(ord).forEach( nomeProv => { var rowProv = body.insertRow(-1); var cellProv = rowProv.insertCell(-1); cellProv.colSpan = '2'; cellProv.innerHTML = 'Stazioni nella provincia di ' + titleCase(nomeProv); cellProv.style.textAlign = "center"; cellProv.style.backgroundColor = btnBackgroundColor; // ciclo le stazioni della provincia for (let index = 0; index < ord[nomeProv].length; index += 2) { const e1 = ord[nomeProv][index]; const e2 = ord[nomeProv][index+1]; var row = body.insertRow(-1); const cell1 = row.insertCell(-1); const cell2 = row.insertCell(-1); cell1.innerHTML = e1.nome_stazione + ' (' + e1.codice_stazione + ')'; cell1.onclick = function () { vediDati( e1 ); } cell1.onmouseover = function () { cell1.style.cursor = "pointer"; } cell1.onmouseout = function () { cell1.style.cursor = "default"; } if (e2) { cell2.innerHTML = e2.nome_stazione + ' (' + e2.codice_stazione + ')'; cell2.onclick = function () { vediDati( e2 ); } cell2.onmouseover = function () { cell2.style.cursor = "pointer"; } cell2.onmouseout = function () { cell2.style.cursor = "default"; } } else { cell2.innerHTML = ''; } } }); var divTab = document.createElement('div'); divTab.setAttribute('id', 'tabElencoStazioni'); divTab.setAttribute('class', 'bmodal-body'); divTab.style.height = "500px"; divTab.style.overflowY = "scroll"; divTab.append(table); document.getElementById('meteoTabella').innerHTML = ''; document.getElementById('meteoTabella').append(divTab); document.getElementById('meteoTabella').style.border = ""; } // ------------------------------------------------------------------------ // formatto l'array per il grafico dei tempi di ritorno che visualizzo nel nomeDIv function DatiTRitorno(massimi, gumbel, agg, nomeDiv) { var sensor = { stazione: 'nome stazione', // nome della stazione labelAnni: 'Max annuali', // nome della serie dei pallini labelRetta: 'Curva di Gumbel', // nome della serie della retta durata: agg, // durata dell'aggregazione dataAnni: [], // array dei dati da visualizzare nel grafico {anno:, mm:} dataRetta: [], // array per la retta da visualizzare nel grafico {anno:, mm:} }; const alfa = dammiGumbel(gumbel, agg, 'alfa'); const mu = dammiGumbel(gumbel, agg, 'mu'); var serie = []; massimi.forEach(tupla => { sensor.stazione = tupla.nome_stazione; if (tupla[ 'canc_' + agg ] == 0) { serie.push( {anno: tupla.anno, mm: tupla[ 'max_' + agg ] } ); } }); // devo ordinare la serie in decrescente serie.sort(function(a, b) { return b.mm - a.mm; } ); // calcolo i valori da mettere nel grafico con asse x logaritmica for (let index = 0; index < serie.length; index++) { const tupla = serie[index]; // valori x corrispondenti alla posizione ordinale dei massimi var logAnno = -1.0 * Math.log( -1.0 * Math.log(1-(( index + 1 ) / ( serie.length +1) ))); // tempo di ritorno var tr = Math.round( Math.log(logAnno), 1); const punto = {anno: logAnno, mm: tupla.mm, tr: tr, durata: agg }; sensor.dataAnni.push( punto ); // valori x per avere una retta in base ai parametri calcolati const xAnno = (tupla.mm - mu ) * (1.0/alfa); tr = Math.round( Math.log( xAnno ), 1); sensor.dataRetta.push( {anno: xAnno, mm: tupla.mm, tr: tr, durata: agg } ); } sensor.stazione = 'Stazione ' + sensor.stazione + ', durata ' + nomiAggregaz[agg]; GraficoTRitorno(nomeDiv, sensor); } // ------------------------------------------------------------------------ // grafico tempi di ritorno function GraficoTRitorno(nomeDIV, sensor) { const ctx = document.getElementById(nomeDIV); let xPointStyle = 'circle'; let xPointColor = chartsColors; let xRadius = 3; var maxY = 0; sensor.dataAnni.forEach((valore, index) => { // trovo la massima delle cumulate per impostare l'asse y1 maxY = Math.max(maxY, valore.mm); }); // in base al valore massimo aumento di una percentuale diversa maxY = Math.round(maxY * 1.09, 0); /* https://www.chartjs.org/ */ const myChart = new ARPAVAPI.Chart( ctx, { responsive: true, data: { datasets: [ { // serie per i pallini type: 'scatter', label: 'Max annuali', data: sensor.dataAnni, fill: false, borderColor: chartsColors, backgroundColor: chartsColors, tension: 0, pointStyle: xPointStyle, pointBackgroundColor: xPointColor, pointBorderColor: xPointColor, radius: xRadius, toolTipContent: 'anni:{anno}
mm: {mm}', parsing: { xAxisKey: 'anno', yAxisKey: 'mm', }, }, { // serie per la retta type: 'line', label: 'Curva di Gumbel', data: sensor.dataRetta, borderColor: 'green', backgroundColor: 'white', fill: false, borderWidth: 1, // and not lineWidth tension: 0, pointStyle: xPointStyle, radius: 0, toolTipContent: '', parsing: { xAxisKey: 'anno', yAxisKey: 'mm', }, }, ] }, options: { plugins: { title: { display: true, text: 'Analisi probabilistica dei tempi di ritorno con metodo di Gumbel, durata ' + nomiAggregaz[ sensor.durata ] , }, subtitle: { display: false, text: sensor.stazione, }, legend: { display: true, position: 'top', align: 'end', }, tooltip: { enabled: false, // ci ho lavorato molto ma non riesco a venirne a capo per mettere gli anni di ritorno corretti callbacks: { title: function (context) { let label = context[0].dataset.label || ''; if (label) { label = 'Durata ' + nomiAggregaz[ context[0].raw.durata ]; } return label; }, label: function (context) { let label = context.dataset.label || ''; if ( (label) && (context.parsed.y !== null) ) { const tr = Math.exp(context.raw.anno); label = 'mm ' + context.raw.mm + ' Tempo di ritorno ' + tr.toFixed(1) + ' anni '; } return label; }, }, }, }, scales: { x: { type: 'linear', min: -2.5, max: 5.5, autoSkip: false, title: { display: true, text: 'Tempo di ritorno (anni)' }, ticks: { stepSize: 1, callback: function (value, index, ticks) { let ret = ticks[index]; return ret.label; } }, afterBuildTicks: function(scale) { /* usando questo sono sicuro del numero che sto trattando.... i valori corrispondono ai tempi di ritorno Tr w 2 0.366512921 5 1.499939987 10 2.250367327 20 2.970195249 50 3.901938658 100 4.600149227 */ scale.ticks = [ {value:0.366512921, label:'2'}, {value:1.499939987, label:'5'}, {value:2.250367327, label:'10'}, {value:2.970195249, label:'20'}, {value:3.901938658, label:'50'}, {value:4.600149227, label:'100'} ]; return; }, }, y: { type: 'linear', title: { display: true, text: 'Precipitazione (mm)' }, ticks: { // stepSize: 2, }, min: 0, max: maxY, } }, }, }); } //------------------------------------------------------------------------------ // ritorna il numero di ore in base all'intervallo function ConvertiIntervallo(quale) { let ret = 0; switch (quale) { case "5m": ret = 1/12; break; case "10m": ret = 1/6; break; case "15m": ret = 1/4; break; case "30m": ret = 1/2; break; case "45m": ret = 3/4; break; case "1h" : ret = 1; break; case "3h" : ret = 3; break; case "6h" : ret = 6; break; case "12h": ret = 12; break; case "24h": ret = 24; break; case "1g" : ret = 24*1; break; case "2g" : ret = 24*2; break; case "3g" : ret = 24*3; break; case "4g" : ret = 24*4; break; case "5g" : ret = 24*5; break; } return ret; } //------------------------------------------------------------------------------ // ritorna un'array con i punti, per l'anno indicato, da graficare function ValoriGumbelCurva(anno, pCurva, campo) { // per questa formula vedere il file curve_poss_pluvio_AGORDO.xls // fornitomi da Rech. Cartella C:\Lavori CFD\CurvePossibilitaPluvio // per ogni alfa-mu presente nell'array pCurva // calcolo il valore in base al tempo di ritorno var ret = []; pCurva.forEach(element => { // valore in ore dell'intervallo let ore = ConvertiIntervallo( element.intervallo ); let interv = Math.log(ore); let htr = element.mu - (Math.log(Math.log( anno / (anno-1))) / ( 1 / element.alfa) ); let lnh = Math.log(htr); // [$pg[INTERVALLO]] = array( X => $interv, Y => $lnh, ORE => $ore, LORE => $interv, MM => $htr ); const punto = {anno: anno, intervallo: element.intervallo, x: interv, y: lnh, ore: ore, lore: interv, mm: htr, durata: campo }; ret.push( punto ); // console.log( 'ValoriGumbelCurva ' + JSON.stringify(punto, null, 4) ); }); return ret; } // ------------------------------------------------------------------------ // formatto l'array per il grafico della curva di possibilità che visualizzo nel nomeDIv function DatiCurvaPoss( gumbel, curve, campo, aggregazio, anniRitorno, nomeDiv) { let barAggreg = [], pGumbel = [], pCurva = []; // range della scala x let minX, maxX; var afterBuildTicksFunction; switch (campo) { case 'minuti': // valori x delle linee per aggregazione aggregazio.forEach(agg => { barAggreg.push( Math.log(ConvertiIntervallo( agg )) ); pGumbel.push( { intervallo: agg, alfa: dammiGumbel(gumbel, agg, 'alfa'), mu: dammiGumbel(gumbel, agg, 'mu') } ); }); anniRitorno.forEach(anno => { pCurva.push( { temporitorno: anno, a: dammiCurva(curve, anno, 'A_MIN'), n: dammiCurva(curve, anno, 'N_MIN') } ); }); minX = -3; maxX = 0; afterBuildTicksFunction = function(scale) { scale.ticks = [ {value: Math.log( ConvertiIntervallo('5m')), label:'5'}, {value: Math.log( ConvertiIntervallo('10m')), label:'10'}, {value: Math.log( ConvertiIntervallo('15m')), label:'15'}, {value: Math.log( ConvertiIntervallo('30m')), label:'30'}, {value: Math.log( ConvertiIntervallo('45m')), label:'45'} ]; return; } break; case 'ore': aggregazio.forEach(agg => { barAggreg.push( Math.log(ConvertiIntervallo( agg )) ); pGumbel.push( { intervallo: agg, alfa: dammiGumbel(gumbel, agg, 'alfa'), mu: dammiGumbel(gumbel, agg, 'mu') } ); }); anniRitorno.forEach(anno => { pCurva.push( { temporitorno: anno, a: dammiCurva(curve, anno, 'A_ORE'), n: dammiCurva(curve, anno, 'N_ORE') } ); }); minX = -1; maxX = 4; afterBuildTicksFunction = function(scale) { scale.ticks = [ {value: Math.log( ConvertiIntervallo('1h')), label:'1'}, {value: Math.log( ConvertiIntervallo('3h')), label:'3'}, {value: Math.log( ConvertiIntervallo('6h')), label:'6'}, {value: Math.log( ConvertiIntervallo('12h')), label:'12'}, {value: Math.log( ConvertiIntervallo('24h')), label:'24'} ]; return; } break; case 'giorni': aggregazio.forEach(agg => { barAggreg.push( Math.log(ConvertiIntervallo( agg )) ); pGumbel.push( { intervallo: agg, alfa: dammiGumbel(gumbel, agg, 'alfa'), mu: dammiGumbel(gumbel, agg, 'mu') } ); }); anniRitorno.forEach(anno => { pCurva.push( { temporitorno: anno, a: dammiCurva(curve, anno, 'A_GIORNI'), n: dammiCurva(curve, anno, 'N_GIORNI') } ); }); minX = 3; maxX = 5; afterBuildTicksFunction = function(scale) { scale.ticks = [ {value: Math.log( ConvertiIntervallo('1g')), label:'1'}, {value: Math.log( ConvertiIntervallo('2g')), label:'2'}, {value: Math.log( ConvertiIntervallo('3g')), label:'3'}, {value: Math.log( ConvertiIntervallo('4g')), label:'4'}, {value: Math.log( ConvertiIntervallo('5g')), label:'5'} ]; return; } break; } // console.log('barAggreg ' + JSON.stringify(barAggreg, null, 4) ); // console.log('pGumbel ' + JSON.stringify(pGumbel, null, 4) ); // console.log('pCurva ' + JSON.stringify(pCurva, null, 4) ); // calcolo dei punti da graficare e della curva interpolante var puntiGumbel = [], curvaGumbel = []; anniRitorno.forEach(xAnno => { var xGumb = ValoriGumbelCurva(xAnno, pGumbel, campo); puntiGumbel.push( xGumb ); // per ogni durata var pRetta = []; pCurva.forEach(curva => { // solo per l'anno desiderato if (xAnno == curva.temporitorno) { // console.log('curva usata ' + JSON.stringify(curva, null, 4) ); // solo per la gumb corretta xGumb.forEach( gumb => { if ( xAnno == gumb.anno) { var yCurva = Math.log( curva.a * Math.pow( gumb.ore , curva.n) ); var mm = Math.exp(yCurva); var xCurv = { anno: xAnno, intervallo: gumb.intervallo, x: gumb.x, y: yCurva, ore: gumb.ore, lore: gumb.lore, mm: mm, durata: campo } // console.log('retta calcolata ' + JSON.stringify(xCurv, null, 4) ); pRetta.push( xCurv ); } }); } }); // alla curva metto solo il primo e ultimo punto var primoultimo = []; primoultimo.push( pRetta[ 0 ] ); primoultimo.push( pRetta[ pRetta.length - 1 ] ); curvaGumbel.push( primoultimo ); }); // console.log('puntiGumbel ' + JSON.stringify(puntiGumbel, null, 4) ); // console.log('curvaGumbel ' + JSON.stringify(curvaGumbel, null, 4) ); GraficoCurvaPoss(nomeDiv, campo, puntiGumbel, curvaGumbel, minX, maxX, afterBuildTicksFunction); } // ------------------------------------------------------------------------ // grafico curva di possibilità function GraficoCurvaPoss(nomeDiv, campo, puntiGumbel, curvaGumbel, minX, maxX, afterBuildTicksFunction) { // colori da usare per oggni tempo di ritorno // 2, 5, 10, 20, 50 anni var colori = ['green', 'aqua', 'blue', 'gold', 'orange', 'black']; let xPointStyle = 'circle'; let xPointColor = chartsColors; let xRadius = 3; let tito = ''; switch (campo) { case 'minuti': tito = '<1h'; break; case 'ore': tito = '1-24h'; break; case 'giorni': tito = '1-5gg'; break; } /* https://www.chartjs.org/ */ const ctx = document.getElementById(nomeDiv); const myChart = new ARPAVAPI.Chart( ctx, { responsive: true, data: { datasets: [], }, options: { plugins: { title: { display: true, text: 'Curve di possibilità pluviometrica con metodo di Gumbel, durata ' + tito, }, subtitle: { display: false, text: '', }, legend: { display: true, position: 'top', align: 'end', labels: { filter: (item, chart) => { const type = chart.datasets[item.datasetIndex].type; return type == 'line'; }, } }, tooltip: { enabled: false, // ci ho lavorato molto ma non riesco a venirne a capo per mettere gli anni di ritorno corretti callbacks: { title: function (context) { let label = context[0].dataset.label || ''; if (label) { label = 'Tempo di ritorno ' + label; } return label; }, label: function (context) { let label = context.dataset.label || ''; if ( (label) && (context.parsed.y !== null) ) { label = Math.round( context.raw.mm, 1) + ' mm' + ' Durata ' + context.raw.durata + ' X ' + context.raw.x; } return label; }, }, }, }, scales: { x: { type: 'linear', min: minX, max: maxX, autoSkip: false, title: { display: true, text: titleCase(campo), }, ticks: { stepSize: 0.1, callback: function (value, index, ticks) { let ret = ticks[index]; return ret.label; } }, afterBuildTicks: afterBuildTicksFunction, }, y: { type: 'linear', title: { display: true, text: 'Precipitazione (mm)' }, ticks: { count: 6, stepSize: 0.2, callback: function (value, index, ticks) { let ret = Math.round( Math.exp(value) ); return ret; /* // ritorno il tick solo se multiplo di 5 mm if ( ( ret % 5 ) == 0) { return ret; } else { return; } */ }, }, }, }, }, }); const xPallini = { type: 'scatter', label: 'anni', // poi la correggo data: [], fill: false, borderColor: chartsColors, backgroundColor: chartsColors, tension: 0, pointStyle: xPointStyle, pointBackgroundColor: xPointColor, pointBorderColor: xPointColor, radius: xRadius, parsing: { xAxisKey: 'x', yAxisKey: 'y', }, }; const xLinea = { type: 'line', label: 'Curva di Gumbel anni', // poi la correggo data: [], borderColor: 'green', backgroundColor: 'white', fill: false, borderWidth: 2, // and not lineWidth tension: 0, pointStyle: xPointStyle, radius: 0, parsing: { xAxisKey: 'x', yAxisKey: 'y', }, }; var minY = 100, maxY = -100; // devo fare uno scatter e una retta per ogni anno puntiGumbel.forEach( (punti, index) => { var pallini = structuredClone( xPallini ); var linea = structuredClone( xLinea ); var dataPallini = []; var anno; punti.forEach( puntoGumb => { anno = puntoGumb.anno; dataPallini.push( {x: puntoGumb.x, y: puntoGumb.y, mm: puntoGumb.mm, anno: puntoGumb.anno, durata: puntoGumb.durata, intervallo: puntoGumb.intervallo} ); if (minY == 100) { minY = puntoGumb.y; maxY = puntoGumb.y; } minY = Math.min(minY, puntoGumb.y); maxY = Math.max(maxY, puntoGumb.y); }); pallini.label = anno + ' anni'; pallini.data = dataPallini; pallini.pointBackgroundColor = colori[index]; pallini.pointBorderColor = colori[index]; var curve = curvaGumbel[index]; var dataLinea = []; curve.forEach(curva => { dataLinea.push( {x: curva.x, y: curva.y, mm: curva.mm, anno: curva.anno, durata: curva.durata, intervallo: curva.intervallo } ); minY = Math.min(minY, curva.y); maxY = Math.max(maxY, curva.y); }); linea.label = anno + ' anni'; linea.data = dataLinea; linea.borderColor = colori[index]; myChart.data.datasets.push( pallini ); myChart.data.datasets.push( linea ); }); // in base al valore massimo/minimo aumento di una percentuale diversa minY = (minY * 0.9); maxY = (maxY * 1.1); myChart.options.scales.y.min = minY; myChart.options.scales.y.max = maxY; myChart.update(); } // ------------------------------------------------------------------------ function CreaDivPagina() { var frase = '\ \

\ Stazione
\ Quota (m s.l.m.)
\ Coordinate (EPSG:4258) (longitudine;latitudine)
\ Comune (m s.l.m.)
\

\ L\'orario indicato è solare e indica la fine dell\'evento.
\
\

\
\ Tempi di ritorno per precipitazioni con durate
\

Caricamento dati

\ L\'orario indicato è solare e indica la fine dell\'evento.
\
\

\
\ Tempi di ritorno per precipitazioni con durate
\

Caricamento dati

\
\

\
\ Tempi di ritorno per precipitazioni con durate
\

Caricamento dati

Data di aggiornamento

\
\ ATTENZIONE:
\ I valori di precipitazione per un dato tempo di ritorno sono delle stime la cui affidabilità dipende dalla numerosità
\ del campione ovvero dal numero di anni di osservazioni pluviometriche disponibili.
\ Non è opportuno utilizzare valori di precipitazioni con tempo di ritorno elevato in presenza di serie pluviometriche di breve durata. \

\
\ \

'; const divPage = document.createElement('div'); divPage.setAttribute('id', 'divPage'); divPage.innerHTML = frase; block.append(divPage); } /** * vediDati: richiama questa pagina passando il paramentro codseq */ function vediDati( tuplaStaz ) { const lnk = window.location.href.split('?')[0] + '?codseq=' + tuplaStaz.codseq; document.location.href = lnk; } // se esiste il parametro in chiamata allora visualizza i dati del sensore indicato function main() { CreaDivPagina(); const codseq = getParameterByName('codseq'); if (codseq.length == 0) { document.getElementById('Mappa-Tabella').style.cssText = 'display:flex'; CreaPaginaMappa(); } else { ValoriSensore(codseq); document.getElementById('Dati-Massimi').style.cssText = 'display:flex'; } } main();

Precipitazioni di massima intensità

Questa pagina ti è stata utile?