Minor & temporary formatting fixes

episphere · Jan 25, 2024 · 5d9f0dd · 5d9f0dd
1 parent e374e79
commit 5d9f0dd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/src/utils/quantilePlots.js b/src/utils/quantilePlots.js
@@ -28,6 +28,10 @@ export function plotQuantileScatter(container, data, options={}) {
 
   options.yLabel = options.yLabel != null ? options.yLabel : options.valueField
 
+  //const containerWidth = container.getBoundingClientRect().width
+  const height = container.getBoundingClientRect().height
+  console.log("Height", container.getAttribute("id"), height)
+
   const marks = []
   if (options.valueFieldLow != null && options.valueFieldHigh != null) {
     marks.push(Plot.link(data, {
@@ -81,7 +85,7 @@ export function plotQuantileScatter(container, data, options={}) {
 
   const plotOptions = {
     width: sizePerFacet * nFacets,
-    height: 720,
+    height,
     style: {fontSize: "14px"},
     color: colorOpt,
     x: {type: "point", label: options.xLabel, tickFormat: options.xTickFormat, tickRotate: -45},

diff --git a/static/css/epitracker.css b/static/css/epitracker.css
@@ -2486,6 +2486,7 @@ button.previous-btn {
 
 #plot-quantiles {
   width: 100%;
+  height: 100%;
 }
 
 /* #maps-container {
@@ -2782,7 +2783,7 @@ button.previous-btn {
 }
 
 #plot-container.fill-height {
-  height: calc(100% - 120px); /* TODO: This is hack-y, fix */
+  height: calc(100% - 180px); /* TODO: This is hack-y, fix */
 }
 
 #plot-container svg {

diff --git a/visualization/demographics.html b/visualization/demographics.html
@@ -166,9 +166,7 @@ <h4>Other</h4>
 
     <div id="content">
       <div id="topbar">
-        <div id="topbar-content">
-
-          <div id="display-mode-control">
+        <div id="display-mode-control">
             <ul class="nav nav-tabs">
               <li class="nav-item">
                 <a id="graph-nav-link" class="nav-link active"><i class="bi bi-graph-up"></i></a>
@@ -177,9 +175,11 @@ <h4>Other</h4>
                 <a id="table-nav-link" class="nav-link"><i class="bi bi-table"></i></a>
               </li>
             <ul>
-          </div> 
         </div>
-        <div id="download-container"></div>
+        <div id="topbar-cnt">
+          <div id="download-container"></div>
+        </div>
+
       </div>
       <div id="plots">
         <div id="plot-title">...loading...</div>

diff --git a/visualization/quantile.html b/visualization/quantile.html
@@ -136,7 +136,7 @@ <h4>Other</h4>
       <div id="plots">
         <div id="plot-legend"></div>
         <div id="plot-title"></div>
-        <div id="plot-container">
+        <div id="plot-container" class="fill-height">
           <div id="plot-quantiles"></div>
         </div>