commit 6eb83e6d55e4b45fc2eb5a564be42e0cdba52d32
author Austin Schuh <austin.schuh@bluerivertech.com> Tue Jul 19 15:40:30 2022 -0700
committer Austin Schuh <austin.schuh@bluerivertech.com> Tue Jul 19 15:40:30 2022 -0700
tree 46003d23ae85baae10a44f30bf36c9ef3e10f743
parent 59d93f41bb2a824121e915e1655eee3c72303020

Use display:flex to make the plot full height

We were setting the plot to 97% height to leave space for the select...
Instead, use flex boxes to have the browser make the plots full height.
Works like a champ!

Change-Id: I4f2d5af4ab285a4e73ebc803cbf08e8b306b8f41
Signed-off-by: Austin Schuh <austin.schuh@bluerivertech.com>

aos/network/www/styles.css

diff --git a/aos/network/www/styles.css b/aos/network/www/styles.css
index 6ca2aa3..547ec94 100644
--- a/aos/network/www/styles.css
+++ b/aos/network/www/styles.css
@@ -33,12 +33,12 @@
   font-size: 12;
 }
 
-.aos_legend_line div {
+.aos_legend_line>div {
   display: inline-block;
   vertical-align: middle;
   margin-left: 5px;
 }
-.aos_legend_line canvas {
+.aos_legend_line>canvas {
   vertical-align: middle;
   pointer-events: all;
 }
@@ -46,3 +46,16 @@
 .aos_legend_line_hidden {
   filter: contrast(0.75);
 }
+
+.aos_cpp_plot {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: flex-start;
+}
+
+.aos_cpp_plot>div {
+  flex: 1;
+  width: 100%;
+}

frc971/analysis/cpp_plot/cpp_plot.ts

diff --git a/frc971/analysis/cpp_plot/cpp_plot.ts b/frc971/analysis/cpp_plot/cpp_plot.ts
index ffbd485..a704e89 100644
--- a/frc971/analysis/cpp_plot/cpp_plot.ts
+++ b/frc971/analysis/cpp_plot/cpp_plot.ts
@@ -4,7 +4,7 @@
 import {plotData} from 'org_frc971/frc971/analysis/plot_data_utils';
 
 const rootDiv = document.createElement('div');
-rootDiv.style.width = '100%';
+rootDiv.classList.add('aos_cpp_plot');
 document.body.appendChild(rootDiv);
 
 const conn = new Connection();

frc971/analysis/plot_data_utils.ts

diff --git a/frc971/analysis/plot_data_utils.ts b/frc971/analysis/plot_data_utils.ts
index f8debe7..1362a09 100644
--- a/frc971/analysis/plot_data_utils.ts
+++ b/frc971/analysis/plot_data_utils.ts
@@ -48,10 +48,7 @@
             figureDiv.style.width = figure.position().width().toString() + 'px';
           }
           if (figure.position().height() == 0) {
-            // TODO(austin): I don't know the css for 100%, excluding other
-            // stuff in the div...  Just go with a little less for now, it's
-            // good enough and quite helpful.
-            figureDiv.style.height = '97%';
+            figureDiv.style.height = '100%';
           } else {
             figureDiv.style.height =
                 figure.position().height().toString() + 'px';