Add Lobby Display to Website

I added a "look a like" lobby display to aoss/tower/lobby.

The way that tower/lobby is distinguished from tower/meteorogram programmatically is via plotInfo.isLobbyDisplay which is set to true via site_configs_lobby.js. The rest of the code structure is the same at meteorogram, but checks if plotInfo.isLobbyDisplay is true along the way, and acts accordingly.

Notes:

1. The background color is changed every 1 second by setInterval, which changes the background-color attributes in tower/lobby (using hsl color scheme). The initial color is set via --starting-hue which defaults to 0.

2. Units change every 5 seconds: Both the current values and the y-axis values.

Requested and assisted by @davidh

content/js/meteorogram/plot/init.js

@@ -25,6 +25,73 @@ function getSecondAxisConfig(axis_number, plot_info, axis_info, axis_kwargs) {
 }
 
 
+function coreLobbyLayout(layout, axis_config, axis_number, plot_idx, topOfGraph, graphName, textSize) {
+    layout['xaxis' + axis_number] = {
+        ticktext: ['-6h', '-3h', 'Now'],
+        tickfont: {
+            size: textSize / 5
+        },
+        showline: true,
+        linecolor: 'white',
+        anchor: 'y' + axis_number,
+         // 1 is the far right of the plot, 0 is the far left.
+        // Space the x-axis with the 10% of window width on each side. The bottom row has no middle graph,
+        // which is why we multiply by (1 + Math.floor(plot_idx / 6)).
+        domain: [.1 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6)), 14 / 60 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6))],
+        // xaxis doesn't show its lines.
+        zeroline: false,
+        // hide grid.
+        showgrid: false
+    };
+    // This is the text for the current value above each graph.
+    layout['annotations'].push({
+        font: {
+            size: textSize / 2
+        },
+        showarrow: false,
+        align: 'center',
+        // Middle of each x-axis domain.
+        x: 1/6 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6)), //position in x domain
+        y: topOfGraph + .04, //position in y domain
+        xref: 'paper',
+        yref: 'paper',
+        //Makes text centered
+        showarrow: true,
+        arrowhead: 0,
+        ax: 0,
+        ay: 0,
+      });
+    // This is the text for the name of each graph.
+    layout['annotations'].push({
+        text: graphName,
+        font: {
+            size: textSize / 4
+        },
+        showarrow: false,
+        align: 'center',
+        x: 1/6 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6)), //position in x domain
+        y: topOfGraph + .085, //position in y domain
+        xref: 'paper',
+        yref: 'paper',
+        //Makes text centered
+        showarrow: true,
+        arrowhead: 0,
+        ax: 0,
+        ay: 0,
+      });
+    // Removes title from yaxis.
+    delete axis_config['title']
+    axis_config['tickfont'] = { size: textSize / 5 }
+    axis_config['showgrid'] = false;
+    axis_config['showticklabels'] = true;
+    // Give each subgraph its own y-axis.
+    axis_config['anchor'] = 'x' + axis_number;
+    axis_config['showline'] =  true;
+    axis_config['linecolor'] = 'white';
+    // axis_config are both modified without having to be returned.
+}
+
+
 function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
     var DEFAULT_PLOT_HEIGHT = 170;
     var nshowing = plotOrder.length;
@@ -32,8 +99,9 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
         title: plotsInfo.title,
         showlegend: false,
         height: DEFAULT_PLOT_HEIGHT * nshowing + 180,
-    };
-
+    }
+    // Updates layout with plotsInfo.layout, which is defined for lobby display.
+    Object.assign(layout, plotsInfo.layout)
     layout['xaxis'] = {
         //domain affects size of x axis
         //this made room for the legend
@@ -49,13 +117,12 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
         showticklabels: nshowing > 0,
 
         //its grid is a little darker than default
-        gridcolor : "#777777",
+        gridcolor: "#777777",
 
         //hide grid
         showgrid: false,
         tickformat: '%Y-%m-%d %H:%MZ'
     };
-
     var axis_number = 0;
     var axis_info;
     var plot_info;
@@ -67,21 +134,24 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
     var step = 1 / nshowing;
     var domain;
     var x_anchor = axis_number;
-    var trace_kwargs = ['color', 'mode', 'zmin', 'zmax', 'y',
+    var trace_kwargs = ['marker', 'color', 'mode', 'zmin', 'zmax', 'y',
         'contours', 'line', 'colorscale', 'showscale', 'colorbar', 'tick0', 'dtick', 'hovermode'];
     var axis_kwargs = ['nticks', 'range', 'autorange', 'zeroline', 'showgrid',
         'tickmode', 'ticktext', 'tickvals'];
-    for (var plot_idx=0; plot_idx < plotOrder.length; plot_idx++) {
+    for (var plot_idx = 0; plot_idx < plotOrder.length; plot_idx++) {
         plot_key = plotOrder[plot_idx];
         plot_info = plotsInfo.plots[plot_key];
         axis_number += 1;
         x_anchor = axis_number;
         axis_info = plot_info.yaxis;
-        domain = [(plotOrder.length - 1 - plot_idx) * step * 1.03,
-            1 - plot_idx * step * 1.05];
+        domain = [(plotOrder.length - 1 - plot_idx) * step * 1.03, 1 - plot_idx * step * 1.05];
+        if (plotsInfo['isLobbyDisplay']) {
+            // Leaves 8% for the header, then divides the rest into thirds with 10% height above and below each graph.
+            domain = [.82 - 8 / 75 - (.2 + 8 / 75) * Math.floor(plot_idx / 3), .82 - (.2 + 8 / 75) * Math.floor(plot_idx / 3)];
+        }
 
         // Create the necessary traces (lines)
-        for (var trace_info_idx=0; trace_info_idx < plot_info.traces.length; trace_info_idx++) {
+        for (var trace_info_idx = 0; trace_info_idx < plot_info.traces.length; trace_info_idx++) {
             trace_info = plot_info.traces[trace_info_idx];
             trace_config = {
                 name: trace_info['name'],
@@ -89,7 +159,8 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
                 y: [],
                 text: [],
                 type: trace_info.type ? trace_info.type : 'scatter',
-                xaxis: 'x1',
+                // Gives each graph its own x-axis if plotsInfo['isLobbyDisplay'].
+                xaxis: plotsInfo['isLobbyDisplay'] ? 'x' + axis_number : 'x1',
                 yaxis: 'y' + axis_number,
                 hoverinfo: 'x+text',
                 hovermode: 'closest',
@@ -98,9 +169,8 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
                 anc_variables: trace_info['anc_variables'],
                 anc_data: [],
                 plot_name: plot_key,
-                trace_index: trace_info_idx,
+                trace_index: trace_info_idx
             };
-
             // when we have a second trace that is purely there to make the
             // second y-axis appear, we do this to point the trace to the
             // correct axis
@@ -108,7 +178,7 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
                 trace_config.yaxis = 'y' + (axis_number + trace_info_idx);
             }
 
-            for (var idx=0; idx < trace_kwargs.length; idx++) {
+            for (var idx = 0; idx < trace_kwargs.length; idx++) {
                 key = trace_kwargs[idx];
                 if (key in trace_info) {
                     trace_config[key] = trace_info[key];
@@ -125,17 +195,17 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
         // Create Y-axis configuration object
         axis_config = {
             gridcolor: '#777777',
-            titlefont: {'size' : 12},
+            titlefont: { 'size': 12 },
             title: axis_info['title'],
             zeroline: false,
             // where on the canvas does this axis belong
-            domain: [
-                (plotOrder.length - 1 - plot_idx) * step * 1.03,
-                1 - plot_idx * step * 1.05
-            ],
+            domain: domain
         };
+        if (plotsInfo['isLobbyDisplay']) {
+            coreLobbyLayout(layout, axis_config, axis_number, plot_idx, domain[1], trace_info['name'], plotsInfo['rowTextSize'])
+        }
 
-        for (idx=0; idx < axis_kwargs.length; idx++) {
+        for (idx = 0; idx < axis_kwargs.length; idx++) {
             key = axis_kwargs[idx];
             if (key in axis_info) {
                 axis_config[key] = axis_info[key];
@@ -147,7 +217,7 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
         // Process second y-axis config
         // Skip if specified meaning this configuration is only parsed
         // for additional hover/probe information (custom MetObs thing, not Plotly)
-        if ('yaxis2' in plot_info && !plot_info.yaxis2.skip) {
+        if (!plotsInfo['isLobbyDisplay'] && 'yaxis2' in plot_info && !plot_info.yaxis2.skip) {
             axis_number += 1;
             axis_info = plot_info.yaxis2;
             axis_config = getSecondAxisConfig(axis_number, plot_info, axis_info, axis_kwargs);
@@ -173,7 +243,12 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
         'displayModeBar': true,
         'responsive': true
     };
-
+    if (plotsInfo['isLobbyDisplay']) {
+        // Prevents first graph from taking up entire width, and other layout problems.
+        delete layout['xaxis'];
+        // Adjusts graph sizes every time window size is changed.
+        toolbar = {responsive: true};
+    }
     //creates new graph
     Plotly.plot(div_id, dataCache, layout, toolbar);
     loading.loading();