fix(networth): random broken rendering for charts when changing pages with htmx

This commit is contained in:
Herculino Trotta
2024-12-27 01:49:43 -03:00
parent 0ab0ad2ccb
commit a90b188e32
+11 -2
View File
@@ -14,7 +14,8 @@
<div class="col-12 col-xl-5"> <div class="col-12 col-xl-5">
<div class="row row-cols-1 g-4 mb-3"> <div class="row row-cols-1 g-4 mb-3">
<div class="col"> <div class="col">
<c-ui.info-card color="yellow" icon="fa-solid fa-coins" title="{% trans 'By currency' %}" _="on click showAllDatasetsCurrency()"> <c-ui.info-card color="yellow" icon="fa-solid fa-coins" title="{% trans 'By currency' %}"
_="on click showAllDatasetsCurrency()">
{% for currency in currency_net_worth.values %} {% for currency in currency_net_worth.values %}
<div class="d-flex justify-content-between mt-2"> <div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100"> <div class="d-flex align-items-baseline w-100">
@@ -49,7 +50,8 @@
</c-ui.info-card> </c-ui.info-card>
</div> </div>
<div class="col"> <div class="col">
<c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans 'By account' %}" _="on click showAllDatasetsAccount()"> <c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans 'By account' %}"
_="on click showAllDatasetsAccount()">
{% regroup account_net_worth.values by account.group as account_data %} {% regroup account_net_worth.values by account.group as account_data %}
{% for data in account_data %} {% for data in account_data %}
{% if data.grouper %} {% if data.grouper %}
@@ -133,10 +135,12 @@
</div> </div>
<script> <script>
document.body.addEventListener('htmx:load', function (evt) {
var chartData = JSON.parse('{{ chart_data_currency_json|safe }}'); var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
var currencies = {{ currencies|safe }}; var currencies = {{ currencies|safe }};
var ctx = document.getElementById('currencyBalanceChart').getContext('2d'); var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
new Chart(ctx, { new Chart(ctx, {
type: 'line', type: 'line',
data: chartData, data: chartData,
@@ -184,13 +188,16 @@
} }
} }
}); });
});
</script> </script>
<script> <script>
document.body.addEventListener('htmx:load', function (evt) {
var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}'); var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
var accounts = {{ accounts|safe }}; var accounts = {{ accounts|safe }};
var ctx = document.getElementById('accountBalanceChart').getContext('2d'); var ctx = document.getElementById('accountBalanceChart').getContext('2d');
new Chart(ctx, { new Chart(ctx, {
type: 'line', type: 'line',
data: chartData, data: chartData,
@@ -240,6 +247,8 @@
} }
} }
}); });
});
</script> </script>
<script type="text/hyperscript"> <script type="text/hyperscript">