💄 improve styling of stats overlay (#10)

Make this collapsible and change defaults so that loading data will mean it displays correctly on smaller screens. Collpasing replaces changing opacity, which was an old option.
minimav · Feb 23, 2023 · 8700f8b · 8700f8b
1 parent 67534ef
commit 8700f8b
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 82 deletions.
diff --git a/static/css/index.css b/static/css/index.css
@@ -43,7 +43,6 @@
   position: absolute;
   right: 10px;
   z-index: 600;
-  pointer-events: none;
 }
 
 .mapbox .left-overlay {
@@ -73,21 +72,18 @@
   width: 300px;
 }
 
-#overall-stats-box {
+#stats-box {
   top: 10px;
   width: 300px;
 }
 
-#run-stats-box {
-  top: 230px;
-  width: 300px;
-  height: 390px;
+#run-stats-box-data {
+  font-size: 12px;
 }
 
 @media (max-width: 1000px) {
 
-  #run-stats-box,
-  #overall-stats-box {
+  #stats-box {
     display: none;
   }
 }
@@ -107,6 +103,12 @@
   pointer-events: initial;
 }
 
+#toggle-stats-collapse {
+  margin-left: auto;
+  margin-right: 0;
+  float: right;
+}
+
 .search-input {
   pointer-events: initial;
 }

diff --git a/static/javascript/map_stats.js b/static/javascript/map_stats.js
@@ -144,11 +144,11 @@ function getStyle(numTraversals) {
 }
 
 /** Refesh the statistics table in the lower right pane. */
-function refreshStatByRunTable() {
+function refreshStatsByRunTable() {
   return $("#stats-by-run-table").DataTable({
     "lengthMenu": [[5, 10], [5, 10]],
-    "pageLength": 10,
-    "pagingType": "full_numbers"
+    "pageLength": 5,
+    "pagingType": "full"
   });
 }
 
@@ -169,12 +169,12 @@ function removeSegments(removePolygon) {
 
   statsByRunTable.destroy();
   document.getElementById("stats-by-run-rows").innerHTML = ""
-  statsByRunTable = refreshStatByRunTable();
+  statsByRunTable = refreshStatsByRunTable();
 
   // refresh the geometry if options have changed
-  let includeCulDeSacs = $("#use-cul-de-sacs").is(":checked"),
+  let includeCulDeSacs = true,
     minLengthM = parseInt(document.getElementById("min-segment-length-m-slider").value);
-  if (currentNetworkOptions.minLengthM !== minLengthM || currentNetworkOptions.includeCulDeSacs !== includeCulDeSacs) {
+  if (currentNetworkOptions.minLengthM !== minLengthM) {
     loadGeometry(minLengthM, includeCulDeSacs)
     currentNetworkOptions = {
       minLengthM: minLengthM,
@@ -291,16 +291,12 @@ function showOverallStats(lengthData) {
   const uniqueLengthKm = lengthData !== undefined ? lengthData["unique"].toFixed(1) : '- '
   const percProgress = lengthData !== undefined ? (100 * lengthData["unique"] / lengthData["totalLengthKm"]).toFixed(2) : '- '
   const statsBox = `
-    <div class="stat-label">Total length:</div>
-    <div id="total-length-km">${totalLengthKm}km</div>
-    <div class="stat-label">Length shown (with repeats):</div>
-    <div id="length-km-shown-with-repeats">${withRepeatsKm}km</div>
-    <div class="stat-label">Unique length shown:</div>
-    <div id="length-km-shown">${uniqueLengthKm}km</div>
-    <div class="stat-label">Progress shown:</div>
-    <div id="percentage-covered-shown">${percProgress}%</div>
+    <div><span class="stat-label">Total length: </span>${totalLengthKm}km</div>
+    <div><span class="stat-label">Length (with repeats): </span>${withRepeatsKm}km</div>
+    <div><span class="stat-label">Unique length: </span>${uniqueLengthKm}km</div>
+    <div><span class="stat-label">Progress shown: </span>${percProgress}%</div>
   `
-  document.getElementById("overall-stats-box").innerHTML = statsBox
+  document.getElementById("overall-stats-box-data").innerHTML = statsBox
 }
 
 /** Group segments by date to facilitate calculating stats by date. */
@@ -380,7 +376,7 @@ function buildStatsByRunTable(statsByRun) {
     newRow += "<td>" + s.percNew.toFixed(2) + "%</td>"
     tableBody.append("<tr onmouseover='highlightRow(this);' onmouseout='removeHighlightRow(this);'>" + newRow + "</tr>");
   })
-  statsByRunTable = refreshStatByRunTable();
+  statsByRunTable = refreshStatsByRunTable();
 }
 
 /** Calculate statistics for each run.
@@ -591,15 +587,13 @@ function showMissingSegments(segmentIds) {
 
 /** Display stats on how many roads have not currently been run. */
 function showMissingStats(stats) {
-  var statsBox = '<div class="stat-label">Total length:</div>'
-  statsBox += '<div id="total-length-km">' + stats["totalLengthKm"].toFixed(1) + "km</div>"
-  statsBox += '<div class="stat-label">Total missing length:</div>'
-  statsBox += '<div id="total-missing-length-km">' + stats["totalMissingLengthKm"].toFixed(1) + "km</div>"
-  statsBox += '<div class="stat-label">% missing:</div>'
-  statsBox += '<div id="perc-missing">' + (100 * stats["totalMissingLengthKm"] / stats["totalLengthKm"]).toFixed(2) + "%</div>"
-  statsBox += '<div class="stat-label">Number missing segments:</div>'
-  statsBox += '<div id="num-missing-segments">' + stats["numMissing"] + "(of " + stats["totalNumSegments"] + ")</div>"
-  document.getElementById("overall-stats-box").innerHTML = statsBox
+  let statsBox = `
+    <div><span class="stat-label">Total length: </span>${stats["totalLengthKm"].toFixed(1)}km</div>
+    <div><span class="stat-label">Total missing length: </span>${stats["totalMissingLengthKm"].toFixed(1)}km</div>
+    <div><span class="stat-label">% missing: </span>${(100 * stats["totalMissingLengthKm"] / stats["totalLengthKm"]).toFixed(2)}%</div>
+    <div><span class="stat-label"># missing segments: </span><br>${stats["numMissing"]} (of ${stats["totalNumSegments"]})</div>
+  `
+  document.getElementById("overall-stats-box-data").innerHTML = statsBox
 }
 
 /** Show all roads that have not been run (in a polygon if drawn, otherwise everywhere). */
@@ -667,15 +661,19 @@ function animateRuns() {
     })
 }
 
-/** Toggle opacity of stats panes to the right of the map. */
-function toggleStatsOpacity() {
-  let ids = ["overall-stats-box", "run-stats-box"];
-  ids.forEach(id => {
-    el = document.getElementById(id)
-    el.style.opacity == "0" ? el.style.opacity = "1" : el.style.opacity = "0"
-  })
+/** Toggle whether the stats overlay is collapsed or not */
+function collapseStatsOverlay() {
+  let classList = document.getElementById("stats-box-data").classList
+  let toggle = document.getElementById("toggle-stats-collapse")
+  if (classList.contains("collapse")) {
+    toggle.innerHTML = '<i class="fa fa-compress"></i>'
+  } else {
+    toggle.innerHTML = '<i class="fa fa-expand"></i>'
+  }
+  classList.toggle('collapse')
 }
 
+
 /** Remove the currently drawn polygon from the map. */
 function removeDrawnPolygon() {
   if (currentPolygon !== undefined) {
@@ -949,7 +947,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
   showOverallStats()
 
   initialiseGeometry()
-  statsByRunTable = refreshStatByRunTable()
+  statsByRunTable = refreshStatsByRunTable()
 
   wkt = makeWktReader()
 

diff --git a/templates/index.html b/templates/index.html
@@ -53,7 +53,7 @@
     <div class="form-check">
         <input class="form-check-input" type="checkbox" value="" id="allow-multiple">
         <label class="form-check-label" for="allow-multiple">
-            Allow multiple run per date
+            Allow multiple runs per date
         </label>
     </div>
 </div>

diff --git a/templates/stats.html b/templates/stats.html
@@ -6,20 +6,13 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
 <link rel="stylesheet" href="{{ url_for('static', path='/css/autocomplete.css') }}">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 {% endblock %}
 
 {% block controls %}
 <div>
     <label class="option-label">Options</label>
 </div>
-<div class="form-check form-check-inline">
-    <input class="form-check-input" type="checkbox" id="use-cul-de-sacs" checked>
-    <label class="form-check-label" for="use-cul-de-sacs">Include cul-de-sacs</label>
-</div>
-<div class="form-check form-check-inline">
-    <input class="form-check-input" type="checkbox" id="stats-overlay-checkbox" onclick="toggleStatsOpacity();" checked>
-    <label class="form-check-label" for="stats-overlay-checkbox">Show stats overlays</label>
-</div>
 <div class="form-check form-check-inline">
     <input class="form-check-input" type="checkbox" id="use-num-traversals">
     <label class="form-check-label" for="use-num-traversals">Colour by number of traversals</label>
@@ -175,42 +168,47 @@
 <div class="mapbox">
     <div id="map"></div>
     <div id="animation-date" class="row-fluid left-overlay stats-box"></div>
-    <div id="segment-search-box" class="row-fluid right-overlay stats-box">
-        {{ macros.autocomplete(
-        "autocomplete-segment-ids",
-        placeholder="Search for segment IDs",
-        input_id="segment-id-search-input"
-        ) }}
-    </div>
-    <div id="overall-stats-box" class="row-fluid right-overlay stats-box"></div>
-    <div id="run-stats-box" class="row-fluid right-overlay stats-box">
-        <div class="container body-content">
-            <div class="page-header">
-                <div class="form-group">
-                    <fieldset>
-                        <form action="" class="form-group" method="post">
-                            <div class="table-responsive">
+    <div id="stats-box" class="row-fluid right-overlay stats-box">
+        <span style="font-size: 20px;">Stats</span>
+        <button id="toggle-stats-collapse" class="btn btn-sm btn-secondary" onclick="collapseStatsOverlay();">
+            <i class="fa fa-compress"></i>
+        </button>
+        <div id="stats-box-data">
+            <div id="overall-stats-box-data"></div>
+            <hr>
+            <div id="run-stats-box-data" class="container body-content">
+                <div class="page-header">
+                    <div class="form-group">
+                        <fieldset>
+                            <form action="" class="form-group" method="post">
                                 <div class="table-responsive">
-                                    <table id="stats-by-run-table" class="table table-striped table-bordered"
-                                        cellspacing="0" width="100%">
-                                        <thead>
-                                            <tr>
-                                                <th id="date-col-header">Date</th>
-                                                <th>Run km</th>
-                                                <th>New km</th>
-                                                <th>% New</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody id="stats-by-run-rows">
-                                        </tbody>
-                                    </table>
+                                    <div class="table-responsive">
+                                        <table id="stats-by-run-table" class="table table-striped table-bordered"
+                                            cellspacing="0" width="100%">
+                                            <thead>
+                                                <tr>
+                                                    <th id="date-col-header">Date</th>
+                                                    <th>Run km</th>
+                                                    <th>New km</th>
+                                                    <th>% New</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="stats-by-run-rows">
+                                            </tbody>
+                                        </table>
+                                    </div>
                                 </div>
-                            </div>
-                        </form>
-                    </fieldset>
+                            </form>
+                        </fieldset>
+                    </div>
                 </div>
-                <hr />
             </div>
+            <hr>
+            {{ macros.autocomplete(
+            "autocomplete-segment-ids",
+            placeholder="Search for segment IDs",
+            input_id="segment-id-search-input"
+            ) }}
         </div>
     </div>
 </div>