From cb84683ce168018def953becc7b8a0202257915e Mon Sep 17 00:00:00 2001 From: "C.-W. HSU" <11950284+chiaweh2@users.noreply.github.com> Date: Fri, 27 Sep 2024 11:13:11 -0600 Subject: [PATCH 1/6] adding default plotly --- forecast_mhw.html | 5 +++-- forecast_mhw.js | 2 ++ historical.html | 2 +- historical.js | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/forecast_mhw.html b/forecast_mhw.html index 0190712..f3e8234 100644 --- a/forecast_mhw.html +++ b/forecast_mhw.html @@ -153,14 +153,15 @@

Initialization :

Probability Forecast

-
-
+

Forecast Spread

+
+
diff --git a/forecast_mhw.js b/forecast_mhw.js index a34f651..3f57d09 100644 --- a/forecast_mhw.js +++ b/forecast_mhw.js @@ -55,6 +55,8 @@ window.createMomCobaltOpt_singleID('statMOMCobaltFcastMHW',momCobaltStatsFcastMH // setup colorbar option (using historical.js function) window.createMomCobaltCbarOpt('cbarOptsFcastMHW','inferno'); +// initialize the plotly +window.initializePlotly('mhwForecast') ///////////////// event listener //////////////// // screen size adjustment trigger by window resizing diff --git a/historical.html b/historical.html index 826fe46..5f47c41 100644 --- a/historical.html +++ b/historical.html @@ -191,7 +191,7 @@

Time Series Analyses

- +
diff --git a/historical.js b/historical.js index b222262..6efca28 100644 --- a/historical.js +++ b/historical.js @@ -402,7 +402,8 @@ function initializePlotly(flag) { } else if (flag ==='transect') { Plotly.newPlot('plotly-transect', [trace], layout2,config); } else if (flag ==='mhwForecast') { - + Plotly.newPlot('plotly-fcastmhw-prob', [trace], layoutTS,config); + Plotly.newPlot('plotly-fcastmhw-mag', [trace], layoutTS,config); } }; From 6fcad834700c02669449f2fd0fe73b15a5ab2a94 Mon Sep 17 00:00:00 2001 From: "C.-W. HSU" <11950284+chiaweh2@users.noreply.github.com> Date: Mon, 30 Sep 2024 14:32:52 -0600 Subject: [PATCH 2/6] add the google form and modal --- cefi.css | 5 +++++ overview.html | 27 ++++++++++++++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/cefi.css b/cefi.css index c6ced94..d260f6f 100644 --- a/cefi.css +++ b/cefi.css @@ -1,3 +1,8 @@ +.google-form{ + width: 100%; + height: 1000px; + max-height: 1000px; /* Or set a specific max height if needed */ +} .refresh-link { cursor: pointer; diff --git a/overview.html b/overview.html index 9ab28cb..baff6cb 100644 --- a/overview.html +++ b/overview.html @@ -3,6 +3,29 @@ + + If you have any questions or feedback, please feel free to contact us via google form! +
+ + +

1 minute CEFI

The goal of the Climate Ecosystem and Fisheries Initiative (CEFI) is to provide @@ -157,4 +180,6 @@

NOAA’s Response

- \ No newline at end of file + + + From 5eead91fe71a2575cbbffabe096cfae91f1f2754 Mon Sep 17 00:00:00 2001 From: "C.-W. HSU" <11950284+chiaweh2@users.noreply.github.com> Date: Mon, 30 Sep 2024 14:39:45 -0600 Subject: [PATCH 3/6] fix the div bug --- overview.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/overview.html b/overview.html index baff6cb..5160894 100644 --- a/overview.html +++ b/overview.html @@ -3,7 +3,7 @@ - + From 53a01d9141763316d4b6eca5dee5790a3c12e24a Mon Sep 17 00:00:00 2001 From: "C.-W. HSU" <11950284+chiaweh2@users.noreply.github.com> Date: Thu, 3 Oct 2024 12:22:56 -0600 Subject: [PATCH 4/6] add plotly and ts fetch --- forecast_mhw.js | 510 +++++++++++++++++++----------------------------- 1 file changed, 203 insertions(+), 307 deletions(-) diff --git a/forecast_mhw.js b/forecast_mhw.js index 3f57d09..adb516c 100644 --- a/forecast_mhw.js +++ b/forecast_mhw.js @@ -231,6 +231,7 @@ function replaceFoliumForecastMHW() { // getting the lon lat from iframe and send to // server to get // 1. value of the marker on the shading +// 2. plotly figure create/refresh var varDataFcastMHW = null function receiveMessageFcastMHW(event) { // Access the data sent from the iframe @@ -257,10 +258,8 @@ function receiveMessageFcastMHW(event) { }); // display forecast spread plotly - // plotTSFcast(locationDataFcastMHW) - + plotFcast(locationDataFcastMHW) } - // console.log("Received data from iframe:", locationDataFcastMHW); // console.log(event.originalEvent.origin); }; @@ -298,316 +297,213 @@ function getvarValFcastMHW(infoLonLat) { console.error('Fetch MHW value error:', error); }); - return ajaxGetPromise }; -// // function for setting up promises in Forecast TS spread(execute order for async) -// // 1. input lon lat location -// // 2. Fetch forecast TSs (setup promise) -// // 3. create plotly object on webpage (execute when promise resolved) -// function plotTSFcastMHW(infoLonLat) { -// showLoadingSpinner("loading-spinner-fcastmhw-spread"); -// getTSFcastsMHW(infoLonLat) // the function return a promise obj from fetch -// .then((jsonData)=>{ -// plotlyForecastSpread(jsonData) -// plotlyForecastBox(jsonData) -// hideLoadingSpinner("loading-spinner-fcastmhw-spread"); -// }) -// .catch((error)=>{ -// console.error(error); -// }) -// }; - -// // function to fetch all forecast spread based on locationData -// // response in the json format (testing) -// function getTSFcasts(infoLonLat) { -// var ajaxGet = "/cgi-bin/cefi_portal/mom_extract_timeseries_fcast.py" -// +"?variable="+varFoliumMapFcastMHW -// +"®ion="+$("#regMOMCobaltFcast").val() -// +"&stat="+statMapFcastMHW -// +"&depth="+depthMapFcast -// +"&lon="+infoLonLat.longitude -// +"&lat="+infoLonLat.latitude -// +"&iniyear="+$("#iniYearMOMCobaltFcast").val() -// +"&inimonth="+$("#iniMonthMOMCobaltFcast").val() +// function for setting up promises in Forecast prob TS spread +// 1. input lon lat location +// 2. fetch forecast TSs (return promise) +// 3. create plotly object on webpage (execute when promise resolved) +function plotFcast(infoLonLat) { + showLoadingSpinner("loading-spinner-fcastmhw-spread"); + // get promise obj from fetch + fetchFcastsTS(infoLonLat) + .then((jsonData)=>{ + plotlyFcastsProb(jsonData) + plotlyForecastSpread(jsonData) + hideLoadingSpinner("loading-spinner-fcast-spread"); + }) + .catch((error)=>{ + console.error('Plotting MHW time series error:',error); + }) +}; + +// function to fetch all forecast ts based on locationData +// response in the json format +function fetchFcastsTS(infoLonLat) { + var ajaxGet = "/cgi-bin/cefi_portal/mom_extract_variableValue_fcast_mhw.py" + +"?region="+$("#regMOMCobaltFcastMHW").val() + +"&lon="+infoLonLat.longitude + +"&lat="+infoLonLat.latitude + +"&iniyear="+$("#iniYearMOMCobaltFcastMHW").val() + +"&inimonth="+$("#iniMonthMOMCobaltFcastMHW").val() -// console.log('https://webtest.psd.esrl.noaa.gov/'+ajaxGet) - -// ajaxGetPromise = fetch(ajaxGet) -// .then(response => { -// if (!response.ok) { -// throw new Error('Network response was not ok'); -// } -// return response.json(); -// }) -// .catch(error => { -// // Handle errors here -// console.error('Fetch time series error:', error); -// }); - -// return ajaxGetPromise -// }; - -// // function for creating the plotly forecast spread time series -// function plotlyForecastSpread(jsonData) { -// var yformat = decimal_format(jsonData.mean); - -// var trace1Color = "rgba(113, 29, 176, 0.7)"; -// var trace = { -// x: leadMonthListMHW, -// y: jsonData.mean, -// type: 'scatter', -// mode: 'lines+markers', -// marker: { size: 5 }, -// line: { -// shape: 'linear', -// color: trace1Color, -// width: 3 -// }, -// // name: statMap+' time series', -// name: varnameFcast -// }; - -// var data = [trace]; - -// var trace2Color = "rgba(113, 29, 176, 0.1)"; -// for (var i=1; i<=10; i++) { -// var key = 'ens'+i -// var trace_ens = { -// x: leadMonthListMHW, -// y: jsonData[key], -// type: 'scatter', -// mode: 'lines+markers', -// marker: { size: 2 }, -// line: { -// shape: 'linear', -// color: trace2Color }, -// // name: statMap+' time series', -// name: key -// }; -// data.push(trace_ens) -// } + console.log('https://webtest.psd.esrl.noaa.gov/'+ajaxGet) + + var ajaxGetPromise = fetch(ajaxGet) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .catch(error => { + // Handle errors here + console.error('Fetch MHW time series error:', error); + }); + + return ajaxGetPromise +}; + +// function for creating the plotly forecast prob time series +function plotlyFcastsProb(jsonData) { + // getting the y axis format using forecast.js function + var yformat = window.decimal_format(jsonData.mhw_prob90.ts); + + var trace1Color = "rgba(113, 29, 176, 0.7)"; + var trace = { + x: leadMonthListMHW, + y: jsonData.mhw_prob90.ts, + type: 'scatter', + mode: 'lines+markers', + marker: { size: 5 }, + line: { + shape: 'linear', + color: trace1Color, + width: 3 + }, + // plotly figure title + name: jsonData.mhw_prob90.varname + }; + + var data = [trace]; + + var layout = { + hovermode: 'closest', + showlegend: false, + title: + varnameFcast +'
' + + ' @ (lat:'+parseFloat(jsonData.location.lat).toFixed(2)+'N,'+ + 'lon:'+parseFloat(jsonData.location.lon).toFixed(2)+'E)', + // autosize: true, + annotations: [{ + x: 0, + y: 0, + xref: 'paper', + yref: 'paper', + text: 'Source: NOAA CEFI data portal', + showarrow: false + }], + // width: 550, + // height: 400, + margin: { + l: 80, + r: 80, + b: 80, + t: 100, + // pad: 4 + }, + xaxis: { + title: 'Lead time' + }, + yaxis: { + title: { + text: 'MHW Probability (%)', + standoff: 10, + font: { color: trace1Color } + }, + tickfont: { color: trace1Color }, + tickformat: yformat, + tickmode: 'auto' + }, + modebar: { + remove: ["autoScale2d", "autoscale", "zoom", "zoom2d", ] + }, + dragmode: "select" + // responsive: true + }; + + Plotly.newPlot('plotly-fcastmhw-prob', data, layout); +}; + +// function for creating the plotly forecast spread time series +function plotlyForecastSpread(jsonData) { + // getting the y axis format using forecast.js function + var yformat = decimal_format(jsonData.ssta_avg.ts); + + // ensemble mean + var trace1Color = "rgba(113, 29, 176, 0.7)"; + var trace = { + x: leadMonthListMHW, + y: jsonData.ssta_avg.ts, + type: 'scatter', + mode: 'lines+markers', + marker: { size: 5 }, + line: { + shape: 'linear', + color: trace1Color, + width: 3 + }, + name: jsonData.ssta_avg.varname + }; + var data = [trace]; + + // ensemble members + var trace2Color = "rgba(113, 29, 176, 0.1)"; + for (var i=1; i<=10; i++) { + var key = 'ssta_ens'+i + var trace_ens = { + x: leadMonthListMHW, + y: jsonData[key].ts, + type: 'scatter', + mode: 'lines+markers', + marker: { size: 2 }, + line: { + shape: 'linear', + color: trace2Color }, + name: key + }; + data.push(trace_ens) + } + // plotly figure layout + var layout = { + hovermode: 'closest', + showlegend: false, + title: + varnameFcast +'
' + + ' @ (lat:'+parseFloat(jsonData.location.lat).toFixed(2)+'N,'+ + 'lon:'+parseFloat(jsonData.location.lon).toFixed(2)+'E)', + // autosize: true, + annotations: [{ + x: 0, + y: 0, + xref: 'paper', + yref: 'paper', + text: 'Source: NOAA CEFI data portal', + showarrow: false + }], + // width: 550, + // height: 400, + margin: { + l: 80, + r: 80, + b: 80, + t: 100, + // pad: 4 + }, + xaxis: { + title: 'Lead time' + }, + yaxis: { + title: { + text: 'Sea Surface Temperature Anomaly (degC)', + standoff: 10, + font: { color: trace1Color } + }, + tickfont: { color: trace1Color }, + tickformat: yformat, + tickmode: 'auto' + }, + modebar: { + remove: ["autoScale2d", "autoscale", "zoom", "zoom2d", ] + }, + dragmode: "select" + // responsive: true + }; -// var layout = { -// hovermode: 'closest', -// showlegend: false, -// title: -// varnameFcast +'
' + -// ' @ (lat:'+parseFloat(jsonData.lat).toFixed(2)+'N,'+ -// 'lon:'+parseFloat(jsonData.lon).toFixed(2)+'E)', -// // autosize: true, -// annotations: [{ -// x: 0, -// y: 0, -// xref: 'paper', -// yref: 'paper', -// text: 'Source: NOAA CEFI data portal', -// showarrow: false -// }], -// // width: 550, -// // height: 400, -// margin: { -// l: 80, -// r: 80, -// b: 80, -// t: 100, -// // pad: 4 -// }, -// xaxis: { -// title: 'Lead time' -// }, -// yaxis: { -// title: { -// text: statMapFcastNameMHW + ' (' + jsonData.units + ')', -// standoff: 10, -// font: { color: trace1Color } -// }, -// tickfont: { color: trace1Color }, -// tickformat: yformat, -// tickmode: 'auto' -// }, -// modebar: { -// remove: ["autoScale2d", "autoscale", "zoom", "zoom2d", ] -// }, -// dragmode: "select" -// // responsive: true -// }; - -// Plotly.newPlot('plotly-fcast-spread', data, layout); -// }; - -// // function for creating the plotly forecast ensemble range time series -// function plotlyForecastRange(jsonData) { -// var yformat = decimal_format(jsonData.spread); - -// var trace1Color = "rgba(113, 29, 176, 0.7)"; -// var trace = { -// x: leadMonthListMHW, -// y: jsonData.spread, -// type: 'scatter', -// mode: 'lines+markers', -// marker: { size: 5 }, -// line: { -// shape: 'linear', -// color: trace1Color, -// width: 3 -// }, -// // name: statMap+' time series', -// name: varnameFcast -// }; - -// var data = [trace]; - -// var layout = { -// hovermode: 'closest', -// showlegend: false, -// title: -// varnameFcast +'
' + -// ' @ (lat:'+parseFloat(jsonData.lat).toFixed(2)+'N,'+ -// 'lon:'+parseFloat(jsonData.lon).toFixed(2)+'E)', -// // autosize: true, -// annotations: [{ -// x: 0, -// y: 0, -// xref: 'paper', -// yref: 'paper', -// text: 'Source: NOAA CEFI data portal', -// showarrow: false -// }], -// // width: 1000, -// // height: 400, -// margin: { -// l: 80, -// r: 80, -// b: 80, -// t: 100, -// // pad: 4 -// }, -// xaxis: { -// title: 'Lead time' -// }, -// yaxis: { -// title: { -// text: statMapFcastNameMHW + ' (' + jsonData.units + ')', -// standoff: 10, -// font: { color: trace1Color } -// }, -// tickfont: { color: trace1Color }, -// tickformat: yformat, -// tickmode: 'auto' -// }, -// modebar: { -// remove: ["autoScale2d", "autoscale", "zoom", "zoom2d", ] -// }, -// dragmode: "select" -// // responsive: true -// }; -// var config = {responsive: true} -// Plotly.newPlot('plotly-fcast-spread', data, layout,config); -// }; - -// // function for creating the plotly time series box plot -// function plotlyForecastBox(jsonData) { -// var yformat = decimal_format(jsonData.mean); -// var trace1Color = "rgba(113, 29, 176, 0.8)"; -// var xData = leadMonthListMHW; -// var yData = []; -// for (var l=0; l<=11; l++) { -// var ens = [] -// for (var i=1; i<=10; i++) { -// var key = 'ens'+i -// ens.push(jsonData[key][l]); -// } -// yData.push(ens); -// }; - -// var data = []; - -// for ( var i = 0; i < xData.length; i ++ ) { -// var result = { -// type: 'box', -// y: yData[i], -// name: xData[i], -// boxpoints: false, -// // jitter: 0.3, -// // pointpos: -1.8, -// type: 'box', -// boxmean: 'sd', -// // boxpoints: 'all', -// // jitter: 0.5, -// whiskerwidth: 1, -// // fillcolor: none, -// marker: { -// size: 1, -// color: trace1Color -// }, -// line: { -// width: 1, -// color: trace1Color -// } -// }; -// data.push(result); -// }; - -// layout = { -// hovermode: 'closest', -// showlegend: false, -// title: 'Ensemble spread at each lead', -// annotations: [{ -// x: 0, -// y: 0, -// xref: 'paper', -// yref: 'paper', -// text: 'Source: NOAA CEFI data portal', -// showarrow: false -// }], -// // width: 530, -// // height: 400, -// margin: { -// l: 80, -// r: 80, -// b: 80, -// t: 100, -// // pad: 4 -// }, -// xaxis: { -// title: 'Lead time' -// }, -// yaxis: { -// title: { -// text: statMapFcastNameMHW + ' (' + jsonData.units + ')', -// standoff: 10, -// font: { color: trace1Color } -// }, -// tickfont: { color: trace1Color }, -// tickformat: yformat, -// tickmode: 'auto' -// }, -// modebar: { -// remove: ["autoScale2d", "autoscale", "zoom", "zoom2d", ] -// }, -// dragmode: "select" -// // responsive: true -// }; -// var config = {responsive: true} - -// Plotly.newPlot('plotly-fcast-box', data, layout,config); - -// }; - -// // function for deciding the y tick numerical format -// function decimal_format(numArray) { -// var format = '.2f'; -// var maxVal = Math.max(...numArray); -// var minVal = Math.min(...numArray); -// var diff = Math.abs(maxVal-minVal); -// if (diff< 0.01) { -// format = '.2e'; -// } -// return format -// }; + Plotly.newPlot('plotly-fcastmhw-mag', data, layout); +}; ///////// information function start ///////// From 9076cfe1ac1bcd550ccbc755661c589176aace50 Mon Sep 17 00:00:00 2001 From: "C.-W. HSU" <11950284+chiaweh2@users.noreply.github.com> Date: Thu, 3 Oct 2024 15:03:51 -0600 Subject: [PATCH 5/6] impliment the time series dashboard --- forecast_mhw.html | 2 +- forecast_mhw.js | 58 +++++++++++++++++++++++++++++++++++------------ 2 files changed, 45 insertions(+), 15 deletions(-) diff --git a/forecast_mhw.html b/forecast_mhw.html index f3e8234..55db3de 100644 --- a/forecast_mhw.html +++ b/forecast_mhw.html @@ -154,7 +154,7 @@

Initialization : Probability Forecast

- +
diff --git a/forecast_mhw.js b/forecast_mhw.js index adb516c..898c973 100644 --- a/forecast_mhw.js +++ b/forecast_mhw.js @@ -56,7 +56,9 @@ window.createMomCobaltOpt_singleID('statMOMCobaltFcastMHW',momCobaltStatsFcastMH window.createMomCobaltCbarOpt('cbarOptsFcastMHW','inferno'); // initialize the plotly -window.initializePlotly('mhwForecast') +$(document).ready(function() { + window.asyncInitializePlotlyResize('mhwForecast') +}); ///////////////// event listener //////////////// // screen size adjustment trigger by window resizing @@ -154,6 +156,8 @@ $("#"+dashNavPillID+" > ul.nav-pills > li.nav-item > .nav-link").on('click',func let hrefIDText = hrefID.slice(1) // reuse changeDashSelect (historical.js) window.changeDashSelect(dashDropDownID,hrefIDText+'Val') + // Manually trigger a resize event for triggering plotly resizing + window.dispatchEvent(new Event('resize')); }); // event listener for the "message" event when map location click @@ -305,13 +309,17 @@ function getvarValFcastMHW(infoLonLat) { // 2. fetch forecast TSs (return promise) // 3. create plotly object on webpage (execute when promise resolved) function plotFcast(infoLonLat) { + showLoadingSpinner("loading-spinner-fcastmhw-prob"); showLoadingSpinner("loading-spinner-fcastmhw-spread"); // get promise obj from fetch fetchFcastsTS(infoLonLat) .then((jsonData)=>{ - plotlyFcastsProb(jsonData) - plotlyForecastSpread(jsonData) - hideLoadingSpinner("loading-spinner-fcast-spread"); + plotlyFcastsProb(jsonData); + plotlyForecastSpread(jsonData); + }) + .then(()=>{ + hideLoadingSpinner("loading-spinner-fcastmhw-prob"); + hideLoadingSpinner("loading-spinner-fcastmhw-spread"); }) .catch((error)=>{ console.error('Plotting MHW time series error:',error); @@ -321,7 +329,7 @@ function plotFcast(infoLonLat) { // function to fetch all forecast ts based on locationData // response in the json format function fetchFcastsTS(infoLonLat) { - var ajaxGet = "/cgi-bin/cefi_portal/mom_extract_variableValue_fcast_mhw.py" + var ajaxGet = "/cgi-bin/cefi_portal/mom_extract_timeseries_fcast_mhw.py" +"?region="+$("#regMOMCobaltFcastMHW").val() +"&lon="+infoLonLat.longitude +"&lat="+infoLonLat.latitude @@ -362,7 +370,7 @@ function plotlyFcastsProb(jsonData) { color: trace1Color, width: 3 }, - // plotly figure title + // legend name: jsonData.mhw_prob90.varname }; @@ -372,10 +380,10 @@ function plotlyFcastsProb(jsonData) { hovermode: 'closest', showlegend: false, title: - varnameFcast +'
' + + 'MHW Probability
' + ' @ (lat:'+parseFloat(jsonData.location.lat).toFixed(2)+'N,'+ 'lon:'+parseFloat(jsonData.location.lon).toFixed(2)+'E)', - // autosize: true, + autosize: true, annotations: [{ x: 0, y: 0, @@ -434,7 +442,7 @@ function plotlyForecastSpread(jsonData) { color: trace1Color, width: 3 }, - name: jsonData.ssta_avg.varname + name: 'ssta ens mean' }; var data = [trace]; @@ -453,18 +461,40 @@ function plotlyForecastSpread(jsonData) { color: trace2Color }, name: key }; - data.push(trace_ens) + data.push(trace_ens); } + // threshold + var trace3Color = "rgba(203, 128, 171, 0.9)"; + var trace_thres = { + x: leadMonthListMHW, + y: jsonData.tos_threshold90.ts, + type: 'scatter', + mode: 'lines+markers', + marker: { size: 2 }, + line: { + shape: 'linear', + color: trace3Color, + dash: 'dash' + }, + name: '90% threshold' + }; + data.push(trace_thres); + // plotly figure layout var layout = { hovermode: 'closest', - showlegend: false, + showlegend: true, + legend: { + x: 1, // Positioning on the right + y: 0, + xanchor: 'left' // Anchor the legend to avoid it getting cut off + }, title: - varnameFcast +'
' + + 'MHW Magnitude
' + ' @ (lat:'+parseFloat(jsonData.location.lat).toFixed(2)+'N,'+ 'lon:'+parseFloat(jsonData.location.lon).toFixed(2)+'E)', - // autosize: true, + autosize: true, annotations: [{ x: 0, y: 0, @@ -477,7 +507,7 @@ function plotlyForecastSpread(jsonData) { // height: 400, margin: { l: 80, - r: 80, + r: 150, b: 80, t: 100, // pad: 4 From 22cabed1699faa5df5541c1274c861e485a6d7c2 Mon Sep 17 00:00:00 2001 From: "C.-W. HSU" <11950284+chiaweh2@users.noreply.github.com> Date: Thu, 3 Oct 2024 15:04:38 -0600 Subject: [PATCH 6/6] make plotly default plot centralized implement forced window resize on navpill change --- forecast.js | 59 +++++---------------------------------------------- historical.js | 29 ++++++++++++++++++++++--- 2 files changed, 31 insertions(+), 57 deletions(-) diff --git a/forecast.js b/forecast.js index afa472a..6688714 100644 --- a/forecast.js +++ b/forecast.js @@ -58,60 +58,9 @@ createMomCobaltDepthBlockOptFcast(varValueFcast,'blockMOMCobaltFcast') // setup colorbar option createMomCobaltCbarOpt('cbarOptsFcast'); -// Initial dashboard plot -$(function() { - var trace = { - x: "", - y: "", - type: 'scatter', - mode: 'lines+markers', - marker: { size: 8 }, - line: { shape: 'linear' }, - name: "" - }; - - var layout1 = { - title: - 'Create Forecast Map first
& pick point on the shaded area', - // autosize: true, - // width: 1000, - // height: 400, - xaxis: { title: 'Date' }, - yaxis: { title: 'Variable' }, - hovermode: 'closest', - showlegend: false, - // responsive: true - }; - - var layout2 = { - title: - 'Create Forecast Map first & draw transect (polyline) on the shaded area', - // autosize: true, - // width: 1000, - // height: 400, - xaxis: { title: 'Date' }, - yaxis: { title: 'Variable' }, - hovermode: 'closest', - showlegend: false, - // responsive: true - }; - - var layout3 = { - title: - 'Pick a index', - // autosize: true, - // width: 1000, - // height: 400, - xaxis: { title: 'Date' }, - yaxis: { title: 'Variable' }, - hovermode: 'closest', - showlegend: false, - // responsive: true - }; - var config = {responsive: true} - Plotly.newPlot('plotly-fcast-spread', [trace], layout1, config); - Plotly.newPlot('plotly-fcast-box', [trace], layout1, config); - // Plotly.newPlot('plotly-index', [trace], layout3) +// initialize plotly +$(document).ready(function() { + window.asyncInitializePlotlyResize('forecast') }); ///////////////// event listener //////////////// @@ -200,6 +149,8 @@ $("#analysisMOMCobaltFcast").on("change", function(){ $("#"+selectedValue.slice(0, -3)).addClass("active"); }) + + // add event listener for the "message" event using jQuery (location click) $(window).on("message", receiveMessageFcast); diff --git a/historical.js b/historical.js index 6efca28..00242c2 100644 --- a/historical.js +++ b/historical.js @@ -65,7 +65,10 @@ $('#depthMOMCobaltTS2').val(''); createMomCobaltVarOpt('onlyIndexes','indexMOMCobaltTS'); // initialize plotly -initializePlotly('all'); +$(document).ready(function() { + asyncInitializePlotlyResize('all') +}); +// initializePlotly('all'); // plot index plotIndexes(); @@ -174,6 +177,7 @@ $("#analysisMOMCobalt").on("change", function(){ // change the active navpil content $("#dashContentHistrun div.tab-pane").removeClass("active"); $("#"+selectedValue.slice(0, -3)).addClass("active"); + }) // event listener for navpil being clicked @@ -181,6 +185,7 @@ $("#dashNavHistrun > ul.nav-pills > li.nav-item > .nav-link").on('click',functio let hrefID = $(this).attr('href') let hrefIDText = hrefID.slice(1) changeDashSelect('analysisMOMCobalt',hrefIDText+'Val') + window.dispatchEvent(new Event('resize')); }); // // event listener for clicking the minitab @@ -301,6 +306,16 @@ $('#indexMOMCobaltTS').on("change", function () { ///////// functional function start ///////// // intialize the plotly plot // Initial dashboard plot +function asyncInitializePlotlyResize(flag) { + return initializePlotly(flag) + .then(() => { + window.dispatchEvent(new Event('resize')); + }) + .catch(error => { + console.error('Error in async plotly initialization:', error); + }); +} + function initializePlotly(flag) { var trace = { x: "", @@ -371,9 +386,9 @@ function initializePlotly(flag) { // responsive: true }; - var layout3 = { + var layoutFcst = { title: - 'Pick an index', + 'Create Forecast Map first
& pick point on the shaded area', // autosize: true, // width: 1000, // height: 400, @@ -401,10 +416,18 @@ function initializePlotly(flag) { Plotly.newPlot('plotly-time-series', [trace], layoutTS,config); } else if (flag ==='transect') { Plotly.newPlot('plotly-transect', [trace], layout2,config); + } else if (flag ==='forecast') { + Plotly.newPlot('plotly-fcast-spread', [trace], layoutFcst, config); + Plotly.newPlot('plotly-fcast-box', [trace], layoutFcst, config); } else if (flag ==='mhwForecast') { Plotly.newPlot('plotly-fcastmhw-prob', [trace], layoutTS,config); Plotly.newPlot('plotly-fcastmhw-mag', [trace], layoutTS,config); } + + return new Promise(resolve => { + console.log('Initial Plotly created'); + resolve(); + }); }; // //function for option change due to button/view change at the bottom