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

2
layouts/shortcodes/table.html
View File

@ -2,7 +2,7 @@
<div id = '{{ .Get "id" }}--container'> <div id = '{{ .Get "id" }}--container'>
<script> <script>
document.addEventListener("DOMContentLoaded", function () { 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> </script>
</div> </div>