From 1b7a2bc3cc3f07b3c6d09756dcbc47d60db34d52 Mon Sep 17 00:00:00 2001 From: michaelglenister Date: Wed, 20 Mar 2024 15:43:04 +0200 Subject: [PATCH] Data explorer sticky table headings --- municipal_finance/static/javascript/table.js | 50 ++++--------------- .../static/stylesheets/table.scss | 33 +++++++++--- municipal_finance/templates/table.html | 1 - 3 files changed, 38 insertions(+), 46 deletions(-) diff --git a/municipal_finance/static/javascript/table.js b/municipal_finance/static/javascript/table.js index f5b75de74..f7b717dbe 100644 --- 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 = $('').html(' ').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(""); var munis = this.filters.get('municipalities'); for (var i = 0; i < munis.length; i++) { var muni = municipalities[munis[i]]; @@ -741,19 +709,20 @@ 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(""); _.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'); }); }); } @@ -761,12 +730,13 @@ // column (aggregate) headings if (CUBE_NAME == 'capital_v2' || cube.columns.length > 1) { tr = table.insertRow(); + $(tr).append(""); _.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 = `${heading.code} ${heading.label}`; + $(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 index 5892717db..42a70e97a 100644 --- 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; -} +} \ No newline at end of file diff --git a/municipal_finance/templates/table.html b/municipal_finance/templates/table.html index b17909807..17eb3c1b0 100644 --- a/municipal_finance/templates/table.html +++ b/municipal_finance/templates/table.html @@ -127,7 +127,6 @@
Government function
-