table view config options: clickColumns, rightAlign, noWrap

earthrise-media · Dec 15, 2023 · 5ddcda8 · 5ddcda8
1 parent 21cfd7b
commit 5ddcda8
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 24 deletions.
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,7 @@
     <script src="https://cdn.datatables.net/v/bs5/dt-1.13.4/fh-3.4.0/r-2.4.1/datatables.min.js"></script>
 
     <link href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@700&display=swap" rel="stylesheet">
-    <link href="../../src/site.css" rel="stylesheet" />
+    <link href="../../src/site.css" id="site-style" rel="stylesheet" />
 </head>
 
 <body>

diff --git a/src/site.css b/src/site.css
@@ -28,11 +28,13 @@ table.dataTable>tbody>tr.odd {
 }
 table.dataTable>tbody>tr {
    border-bottom: 1pt solid #676767;
-   cursor: pointer;
 }
 table.dataTable>tbody>tr:hover {
    background-color: #e9e9e9;
 }
+table.dataTable td {
+   padding-right: 10px;
+}
 
 .map-overlay {
     font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;

diff --git a/src/site.js b/src/site.js
@@ -521,7 +521,16 @@ function buildTable() {
         columns: config.tableHeaders.labels.map((header) => { return {'title': header}})
     });
 
-    config.table.column(config.tableHeaders.values.indexOf(config.tableHeaders.clickColumn)).visible(false);
+    if ('rightAlign' in config.tableHeaders) {
+        config.tableHeaders.rightAlign.forEach((col) => {
+            $("#site-style").get(0).sheet.insertRule('td:nth-child(' + (config.tableHeaders.values.indexOf(col)+1) + ') { text-align:right }', 0);
+        });
+    }
+    if ('noWrap' in config.tableHeaders) {
+        config.tableHeaders.noWrap.forEach((col) => {
+            $("#site-style").get(0).sheet.insertRule('td:nth-child(' + (config.tableHeaders.values.indexOf(col)+1) + ') { white-space: nowrap }', 0);
+        });        
+    }
 
     $('#table-toggle').on("click", function() {
         if ($('#table-toggle-label').text().includes("Table view")) {
@@ -538,25 +547,19 @@ function buildTable() {
             $('#basemap-toggle').show();
         }
     });
-
-    $('#table tbody tr').click(function() {
-        window.open(config.table.row(this).data()[config.tableHeaders.values.indexOf(config.tableHeaders.clickColumn)], '_blank');
-    });
-
-    config.table.on( 'draw', function () {
-        $('#table tbody tr').click(function() {
-            window.open(config.table.row(this).data()[config.tableHeaders.values.indexOf(config.tableHeaders.clickColumn)], '_blank');
-        });
-    });
 }
 function updateTable() {
     config.table.clear();
     config.table.rows.add(geoJSON2Table()).draw();
 }
 function geoJSON2Table() {
     return config.preLinkedGeoJSON.features.map(feature => {
-        return config.tableHeaders.values.map((header) => { 
-            return feature.properties[header]; 
+        return config.tableHeaders.values.map((header) => {
+            if ('clickColumns' in config.tableHeaders && config.tableHeaders.clickColumns.includes(header)) {
+                return "<a href='" + feature.properties[config.linkField] + "' target='_blank'>" + feature.properties[header] + '</a>'; 
+            } else {
+                return feature.properties[header];
+            }
         });
     });
 }

diff --git a/trackers/coal-plant/config.js b/trackers/coal-plant/config.js
@@ -45,9 +45,11 @@ var config = {
     /* configure the table view, selecting which columns to show, how to label them, 
         and designated which column has the link */
     tableHeaders: {
-        values: ['url','plant','unit','chinese_name','owner', 'parent', 'capacity', 'status', 'region', 'country', 'subnational', 'year'],
-        labels: ['url', 'Plant','Unit','Chinese Name','Owner','Parent','Capacity (MW)','Status','Region','Country','Subnational unit (province/state)','Start year'],
-        clickColumn: 'url'
+        values: ['plant','unit','chinese_name','owner', 'parent', 'capacity', 'status', 'region', 'country', 'subnational', 'year'],
+        labels: ['Plant','Unit','Chinese Name','Owner','Parent','Capacity (MW)','Status','Region','Country','Subnational unit (province/state)','Start year'],
+        clickColumns: ['plant'],
+        rightAlign: ['unit','capacity','year'],
+        noWrap: ['plant']
     },
 
     /* configure the search box; 

diff --git a/trackers/gas-plant/config.js b/trackers/gas-plant/config.js
@@ -25,9 +25,11 @@ var config = {
     assetLabel: 'units',
     nameField: 'project',
     tableHeaders: {
-        values: ['url','project','unit', 'owner', 'parent', 'capacity', 'status', 'region', 'country', 'province', 'start_year'],
-        labels: ['url', 'Plant','Unit','Owner','Parent','Capacity (MW)','Status','Region','Country','Subnational unit (province/state)','Start year'],
-        clickColumn: 'url'
+        values: ['project','unit', 'owner', 'parent', 'capacity', 'status', 'region', 'country', 'province', 'start_year'],
+        labels: ['Plant','Unit','Owner','Parent','Capacity (MW)','Status','Region','Country','Subnational unit (province/state)','Start year'],
+        clickColumns: ['project'],
+        rightAlign: ['unit','capacity','start_year'],
+        noWrap: ['project']
     },
     searchFields: { 'Plant': ['project'], 
         'Companies': ['owner', 'parent'],

diff --git a/trackers/new-tracker/index.html b/trackers/new-tracker/index.html
@@ -0,0 +1 @@
+../../src/index.html
diff --git a/trackers/wind-power/config.js b/trackers/wind-power/config.js
@@ -33,9 +33,11 @@ var config = {
     assetLabel: 'phases',
     nameField: 'project',
     tableHeaders: {
-        values: ['url','project','unit','project_local','type','capacity','status', 'start_year', 'operator', 'owner', 'country'],
-        labels: ['url', 'Project Name','Phase name','Project Name in Local Language / Script','Installation Type','Capacity (MW)' ,'Status','Start Year','Operator', 'Owner','Country'],
-        clickColumn: 'url'
+        values: ['project','unit','project_local','type','capacity','status', 'start_year', 'operator', 'owner', 'country'],
+        labels: ['Project Name','Phase name','Project Name in Local Language / Script','Installation Type','Capacity (MW)' ,'Status','Start Year','Operator', 'Owner','Country'],
+        clickColumns: ['project'],
+        rightAlign: ['unit','capacity','start_year'],
+        noWrap: ['project']
     },
     searchFields: { 'Project': ['project'], 
         'Companies': ['owner', 'operator'],