Merge branch 'develop' into bug-fix/tabjs

NOAA-CEFI-Portal · Oct 7, 2024 · 9db1269 · 9db1269
2 parents 45a313b + ef27390
commit 9db1269
Show file tree

Hide file tree

Showing 7 changed files with 305 additions and 370 deletions.
diff --git 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/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<br>& 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  ////////////////
@@ -202,6 +151,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/forecast_mhw.html b/forecast_mhw.html
@@ -161,14 +161,15 @@ <h3 class="sliderTitle"> Initialization : <span class="initTimeValueFcastMHW"></
         <div id='mhwProb' class="tab-pane view col-12 active">
             <h3>Probability Forecast</h3>
             <div class = "row position-relative">
-                <div id="plotly-fcastmhw-spread" class="col-xs-12 col-md-6"></div>
-                <div id="plotly-fcastmhw-box" class="col-xs-12 col-md-6"></div>
-                <div id="loading-spinner-fcastmhw-spread" class="col-12 position-absolute top-0 start-0 w-100 h-100 loading-spinner"></div>
+                <div id="plotly-fcastmhw-prob" class="col-xs-12"></div>
+                <div id="loading-spinner-fcastmhw-prob" class="col-12 position-absolute top-0 start-0 w-100 h-100 loading-spinner"></div>
             </div>
         </div>
         <div id='mhwDist' class="tab-pane view col-12">
             <h3>Forecast Spread</h3>
             <div class = "row position-relative">
+                <div id="plotly-fcastmhw-mag" class="col-xs-12"></div>
+                <div id="loading-spinner-fcastmhw-spread" class="col-12 position-absolute top-0 start-0 w-100 h-100 loading-spinner"></div>
             </div>
         </div>
     </div>