Recount/Recount-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

switched to intelligent check for chartjs chart

Browse source
This commit is contained in:
Nickiel12 2024-01-23 19:21:19 -08:00
parent 0e749e5afb
commit dbe49b45aa
3 changed files with 51 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
web/static/chart_functions.js
View file

@ -144,27 +144,30 @@ function sparkline_summary_chart(jsonData, element) {
function fill_charts() {
document.querySelectorAll(".chartjs-chart").forEach(function (el) {
var url = el.dataset.chartEndpoint;
var type = el.dataset.chartType;
fetch(url)
.then(response => {
if (!response.ok) {
console.log(response);
throw new Error("Fetch response was not ok!")
}
return response.json();
}).then(jsonData => {
if (type == "historical_vs_current") {
historical_vs_current_chart(jsonData, el);
} else if (type == "sparkline_summary") {
sparkline_summary_chart(jsonData, el);
}
}).catch(error => {
console.error("Unable to set up chart: ", error)
});
fill_chart(el);
});
}
export {fill_charts}
function fill_chart(el) {
var url = el.dataset.chartEndpoint;
var type = el.dataset.chartType;
fetch(url)
.then(response => {
if (!response.ok) {
console.log(response);
throw new Error("Fetch response was not ok!")
}
return response.json();
}).then(jsonData => {
if (type == "historical_vs_current") {
historical_vs_current_chart(jsonData, el);
} else if (type == "sparkline_summary") {
sparkline_summary_chart(jsonData, el);
}
}).catch(error => {
console.error("Unable to set up chart: ", error)
});
}
export {fill_charts, fill_chart}

6
web/static/index.js
View file

@ -1,4 +1,4 @@
import {fill_charts} from "./chart_functions.js";
import {fill_charts, fill_chart} from "./chart_functions.js";
import {register_dropdowns} from "./dropdowns.js";
@ -33,7 +33,7 @@ function register_nav_links() {
function register_handlers() {
register_nav_links();
fill_charts();
//fill_charts();
register_dropdowns();
}
@ -57,4 +57,4 @@ const trigger_table_animation = debounce(load_in_table, 100);
const trigger_reset_handlers = debounce(register_handlers, 200);
export {trigger_reset_handlers, trigger_table_animation};
export {trigger_reset_handlers, trigger_table_animation, fill_chart};

29
web/templates/index.html
View file

@ -61,15 +61,34 @@
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module">
import {trigger_reset_handlers, trigger_table_animation} from "/static/index.js";
feather.replace();
import {trigger_reset_handlers, trigger_table_animation, fill_chart} from "/static/index.js";
htmx.onLoad(function (element) {
if (element.localName === "tr") {
trigger_table_animation();
} else {
feather.replace();
if (element.dataset.mainBody) {
trigger_reset_handlers();
}
if (element.localName === "tr") {
trigger_table_animation();
}
if (element.querySelectorAll("canvas").length > 0) {
element.querySelectorAll("canvas").forEach(function (el) {
fill_chart(el);
});
}
});
document.body.addEventListener('htmx:beforeSwap', function (event) {
// Get the target element where content will be replaced
var target = event.detail.target;
// Check if the target has Chart.js charts
var charts = target.querySelectorAll('.chartjs-chart');
charts.forEach(function (chart) {
// Destroy each Chart.js chart before swapping content
Chart.getChart(chart).destroy();
});
});
trigger_reset_handlers();
</script>
</body>
</html>