sam
/
baseddata.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add defaultFirstSelected to table functions

This commit is contained in:
Sam 2024-11-07 21:40:07 +00:00
parent 5943fd5dd8
commit bec1b2c796
3 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
content/data-lab/protected-mangroves.md
View File

@ -9,6 +9,8 @@ tags: ["Bitcoin", "Stats"]
script: "/js/mangrove-map.js"
---
{{< table id="mangrove_countries" endpoint="mangrove_by_country_latest" headers="{'country_with_parent': 'Country', 'original_pixels': '1996 Cover', 'total_n_pixels': '2020 Cover', 'cumulative_pixels_diff': 'Diff', 'cumulative_pct_diff': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_with_parent" selectableRows="single" >}}
{{< table id="mangrove_countries" endpoint="mangrove_by_country_latest" headers="{'country_with_parent': 'Country', 'original_pixels': '1996 Cover', 'total_n_pixels': '2020 Cover', 'cumulative_pixels_diff': 'Diff', 'cumulative_pct_diff': '% Diff'}" maxHeight="400px" sortable="true" valueId="country_with_parent" selectableRows="single" defaultFirstSelected="true" >}}
{{< chart id="mangrove_countries" endpoint="mangrove_by_country_agg" chartType="bar" xAxisField="year" yAxisField="total_pixels" scaleChart=true >}}
{{< map id="map" style="https://tiles.semitamaps.com/styles/maptiler-basic/style.json">}}
{{< chart id="mangrove-country-timeseries-chart" endpoint="mangrove_country_timeseries" chartType="line" xAxisField="date" yAxisField="n_pixels" scaleChart=true >}}

40
layouts/partials/table.html
View File

@ -7,7 +7,8 @@
sortable,
valueId,
selectableRows,
filterTargets
filterTargets,
defaultFirstSelected,
) {
async function fetchDataForTable(query) {
try {
@ -25,9 +26,7 @@
}
function generateTable(data) {
const jsonTableContainer = document.getElementById(
`${id}--container`,
);
const jsonTableContainer = document.getElementById(`${id}--container`);
jsonTableContainer.className = "jsonTableContainer";
jsonTableContainer.innerHTML = "";
jsonTableContainer.style.maxHeight = maxHeight;
@ -63,6 +62,13 @@
}
table.appendChild(thead);
table.appendChild(tbody);
jsonTableContainer.appendChild(table);
// sortable
if (sortable == "true") {
table.className = "sortable";
sorttable.makeSortable(document.getElementById(`${id}`));
}
if (selectableRows === "multi" || selectableRows === "single") {
const rows = table.getElementsByTagName("tr");
@ -76,7 +82,7 @@
filterId: valueId,
filterValue: this.value,
filterActions: ["selected"],
filterTargets: filterTargets
filterTargets: filterTargets,
},
});
document.dispatchEvent(event);
@ -86,7 +92,7 @@
filterId: valueId,
filterValue: this.value,
filterActions: ["deselected"],
filterTargets: filterTargets
filterTargets: filterTargets,
},
});
document.dispatchEvent(event);
@ -102,20 +108,28 @@
}
}
});
if (defaultFirstSelected == true) {
if (i == 1) {
rows[i].classList.add("selected");
const event = new CustomEvent("filterChange", {
detail: {
filterId: valueId,
filterValue: rows[i].value,
filterActions: ["selected"],
filterTargets: filterTargets,
},
});
document.dispatchEvent(event);
}
}
}
}
jsonTableContainer.appendChild(table);
// sortable
if (sortable == "true") {
table.className = "sortable";
sorttable.makeSortable(document.getElementById(`${id}`));
}
}
// listen for filter events for this target
document.addEventListener("filterChange", function (event) {
tableId = document.getElementById(id).id
tableId = document.getElementById(id).id;
if (event.detail.filterTargets.includes(tableId)) {
query = queryConstructor();
fetchDataForTable(query);

2
layouts/shortcodes/table.html
View File

@ -2,7 +2,7 @@
<div id = '{{ .Get "id" }}--container'>
<script>
document.addEventListener("DOMContentLoaded", function () {
createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }}, '{{ .Get "targets" }}'.split(" "))
createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }}, '{{ .Get "targets" }}'.split(" "), {{ .Get "defaultFirstSelected" | safeJS }})
});
</script>
</div>