Skip to content
Snippets Groups Projects

Add Lobby Display to Website

Merged William Roberts requested to merge wroberts/MetObsSite:develop into develop
Compare and
19 files
+ 1117
209
Compare changes
  • Side-by-side
  • Inline
Files
19
@@ -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();
Loading