Data explorer sticky table headings

OpenUpSA · Mar 20, 2024 · 1b7a2bc · 1b7a2bc
1 parent 06d35ae
commit 1b7a2bc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 46 deletions.
diff --git a/municipal_finance/static/javascript/table.js b/municipal_finance/static/javascript/table.js
@@ -200,9 +200,9 @@
       // amount types per year
       // TODO HACK
       var amountTypes = [{ code: 'ACT', label: 'Actual' }, { code: 'ADJB', label: 'Adjusted Budget' }, { code: 'AUDA', label: 'Audited Actual' },
-        { code: 'IBY1', label: 'Forecast 1 year ahead of budget year' },
-        { code: 'IBY2', label: 'Forecast 2 years ahead of budget year' },
-        { code: 'ORGB', label: 'Original Budget' }, { code: 'PAUD', label: 'Pre-audit' }];
+      { code: 'IBY1', label: 'Forecast 1 year ahead of budget year' },
+      { code: 'IBY2', label: 'Forecast 2 years ahead of budget year' },
+      { code: 'ORGB', label: 'Original Budget' }, { code: 'PAUD', label: 'Pre-audit' }];
 
       self.amountTypes = {};
       _.each(self.years, (year) => {
@@ -659,8 +659,6 @@
       }
 
       if (cube.rowHeadings || !cube.hasItems) {
-        this.renderRowHeadings();
-
         if (municipalities) {
           if (CUBE_NAME == 'capital_v2') {
             var columns = [];
@@ -686,37 +684,6 @@
       this.renderDownloadLinks();
     },
 
-    renderRowHeadings() {
-      // render row headings table
-      var table = this.$('.row-headings').empty()[0];
-      var blanks = 1;
-
-      if (cube.columns.length > 1) blanks++;
-      if (!_.isEmpty(this.filters.get('functions'))) blanks++;
-      if (CUBE_NAME == 'capital_v2') blanks++;
-
-      for (var i = 0; i < blanks; i++) {
-        var spacer = $('<th>').html('&nbsp;').addClass('spacer');
-        table.insertRow().appendChild(spacer[0]);
-      }
-
-      for (i = 0; i < (cube.rowHeadings || []).length; i++) {
-        var heading = cube.rowHeadings[i];
-        var tr = table.insertRow();
-        var td;
-
-        $(tr).addClass(`item-${heading.class}`);
-
-        td = tr.insertCell();
-        td.innerText = heading.code;
-        if (heading.label) {
-          td = tr.insertCell();
-          td.innerText = heading.label;
-          td.setAttribute('title', heading.label);
-        }
-      }
-    },
-
     renderColHeadings() {
       var table = this.$('.values').empty()[0];
       var functions = this.functionHeadings();
@@ -733,6 +700,7 @@
 
       // municipality headings
       var tr = table.insertRow();
+      $(tr).append("<th class='spacer'></th>");
       var munis = this.filters.get('municipalities');
       for (var i = 0; i < munis.length; i++) {
         var muni = municipalities[munis[i]];
@@ -741,32 +709,34 @@
         th.setAttribute('colspan', muniColumns * Math.max(functions.length, 1));
         th.setAttribute('title', muni.demarcation_code);
         tr.appendChild(th);
-        $(tr).addClass('sticky-row');
+        $(tr).addClass('sticky-row-first');
       }
 
       // function headings
       if (cube.hasFunctions && !_.isEmpty(functions)) {
         tr = table.insertRow();
+        $(tr).append("<th class='spacer'></th>");
         _.times(munis.length, () => {
           _.each(functions, (func) => {
             var th = document.createElement('th');
             th.innerText = func.label;
             th.setAttribute('colspan', cube.columns.length);
             tr.appendChild(th);
-            $(tr).addClass('sticky-row');
+            $(tr).addClass('sticky-row-second');
           });
         });
       }
 
       // column (aggregate) headings
       if (CUBE_NAME == 'capital_v2' || cube.columns.length > 1) {
         tr = table.insertRow();
+        $(tr).append("<th class='spacer'></th>");
         _.times(munis.length, () => {
           _.each(valueColumns, (columns) => {
             var th = document.createElement('th');
             th.innerText = columns.label;
             tr.appendChild(th);
-            $(tr).addClass('sticky-row');
+            $(tr).addClass('sticky-row-second');
           });
         });
       }
@@ -804,6 +774,8 @@
           var tr = table.insertRow();
           $(tr).addClass(`item-${heading.class}`);
 
+          let rowHeading = `<td class='headcol'>${heading.code} ${heading.label}</td>`;
+          $(tr).prepend(rowHeading);
           // highlight?
           if (highlights[heading.code]) toHighlight.push(table.rows.length - 1);
 

diff --git a/municipal_finance/static/stylesheets/table.scss b/municipal_finance/static/stylesheets/table.scss
@@ -24,7 +24,8 @@ h3 {
   font-size: 16px;
 }
 
-h4, h5 {
+h4,
+h5 {
   font-size: 14px;
   font-weight: bold;
 }
@@ -52,6 +53,7 @@ label {
       color: white;
     }
   }
+
   h1.site-notice {
     margin: -1px 0px 0px 140px;
     font-size: 16px;
@@ -80,6 +82,7 @@ label {
 
     li.text {
       padding: 7px 0px 0px 0px;
+
       a {
         color: white;
         text-decoration: underline;
@@ -176,6 +179,7 @@ label {
       float: left;
       width: 33%;
     }
+
     label {
       margin-bottom: 2px;
     }
@@ -195,7 +199,8 @@ label {
   padding: 10px;
   border-top: 1px solid #ccc;
 
-  td, th {
+  td,
+  th {
     padding: 2px;
     white-space: nowrap;
   }
@@ -204,6 +209,7 @@ label {
     font-weight: bold;
     text-transform: uppercase;
   }
+
   .item-subtotal td {
     font-weight: bold;
   }
@@ -225,17 +231,28 @@ label {
 
   .table-scroll-area {
     overflow: auto;
-    height:500px;
+    height: 100%;
 
     table {
       float: left;
     }
   }
 
-  .sticky-row {
+  .headcol {
     position: sticky;
     top: 0;
-    background-color: #f2f2f2;
+    left: 0;
+    float: left;
+  }
+
+  .sticky-row-first {
+    position: sticky;
+    top: 0;
+  }
+
+  .sticky-row-second {
+    position: sticky;
+    top: 21.64px;
   }
 
   .values {
@@ -250,6 +267,10 @@ label {
       background-color: $nt-red;
       color: white;
       border-bottom-color: #7f1a1d;
+
+      .spacer {
+        background-color: #efefef;
+      }
     }
 
     tr:nth-child(2) th {
@@ -313,4 +334,4 @@ label {
 // prevent boxes from getting in the way
 .article-header .downloads {
   z-index: 10;
-}
+}
diff --git a/municipal_finance/templates/table.html b/municipal_finance/templates/table.html
@@ -127,7 +127,6 @@ <h5>Government function</h5>
     </aside>
 
     <section class="table-display">
-      <table class="row-headings"></table>
       <div class="table-scroll-area">
         <table class="values"></table>
       </div>