starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-24 09:38:35 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

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

Browse Source
This commit is contained in:
Herculino Trotta
2024-12-27 01:49:43 -03:00
parent 0ab0ad2ccb
commit a90b188e32
1 changed files with 183 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
app/templates/net_worth/net_worth.html
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,75 +50,76 @@
</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' %}"
{% regroup account_net_worth.values by account.group as account_data %} _="on click showAllDatasetsAccount()">
{% for data in account_data %} {% regroup account_net_worth.values by account.group as account_data %}
{% if data.grouper %} {% for data in account_data %}
{% if data.grouper %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="text-start font-monospace tw-text-gray-300"><span class="badge text-bg-primary">
{{ data.grouper }}</span></div>
</div>
</div>
{% for account in data.list %}
<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">
<div class="text-start font-monospace tw-text-gray-300"><span class="badge text-bg-primary"> <div class="account-name text-start font-monospace tw-text-gray-300"
{{ data.grouper }}</span></div> _="on click showOnlyAccountDataset('{{ account.account.name }}')">
<span class="hierarchy-line-icon"></span>{{ account.account.name }}</div>
<div class="dotted-line flex-grow-1"></div>
<div class="">
<c-amount.display
:amount="account.total_final"
:prefix="account.currency.prefix"
:suffix="account.currency.suffix"
:decimal_places="account.currency.decimal_places"
color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
</div>
</div> </div>
</div> </div>
{% for account in data.list %} {% if account.exchanged and account.exchanged.total_final %}
<div class="d-flex justify-content-between mt-2"> <c-amount.display
<div class="d-flex align-items-baseline w-100"> :amount="account.exchanged.total_final"
<div class="account-name text-start font-monospace tw-text-gray-300" :prefix="account.exchanged.currency.prefix"
_="on click showOnlyAccountDataset('{{ account.account.name }}')"> :suffix="account.exchanged.currency.suffix"
<span class="hierarchy-line-icon"></span>{{ account.account.name }}</div> :decimal_places="account.exchanged.currency.decimal_places"
<div class="dotted-line flex-grow-1"></div> color="grey"
<div class=""> text-end></c-amount.display>
<c-amount.display {% endif %}
:amount="account.total_final" {% endfor %}
:prefix="account.currency.prefix" {% else %}
:suffix="account.currency.suffix" {% for account in data.list %}
:decimal_places="account.currency.decimal_places" <div class="d-flex justify-content-between mt-2">
color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display> <div class="d-flex align-items-baseline w-100">
</div> <div class="account-name text-start font-monospace tw-text-gray-300"
_="on click showOnlyAccountDataset('{{ account.account.name }}')">
{{ account.account.name }}
</div>
<div class="dotted-line flex-grow-1"></div>
<div>
<c-amount.display
:amount="account.total_final"
:prefix="account.currency.prefix"
:suffix="account.currency.suffix"
:decimal_places="account.currency.decimal_places"
color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
</div> </div>
</div> </div>
{% if account.exchanged and account.exchanged.total_final %} </div>
<c-amount.display {% if account.exchanged and account.exchanged.total_final %}
:amount="account.exchanged.total_final" <c-amount.display
:prefix="account.exchanged.currency.prefix" :amount="account.exchanged.total_final"
:suffix="account.exchanged.currency.suffix" :prefix="account.exchanged.currency.prefix"
:decimal_places="account.exchanged.currency.decimal_places" :suffix="account.exchanged.currency.suffix"
color="grey" :decimal_places="account.exchanged.currency.decimal_places"
text-end></c-amount.display> color="grey"
{% endif %} text-end></c-amount.display>
{% endfor %} {% endif %}
{% else %} {% endfor %}
{% for account in data.list %} {% endif %}
<div class="d-flex justify-content-between mt-2"> {% endfor %}
<div class="d-flex align-items-baseline w-100"> </c-ui.info-card>
<div class="account-name text-start font-monospace tw-text-gray-300"
_="on click showOnlyAccountDataset('{{ account.account.name }}')">
{{ account.account.name }}
</div>
<div class="dotted-line flex-grow-1"></div>
<div>
<c-amount.display
:amount="account.total_final"
:prefix="account.currency.prefix"
:suffix="account.currency.suffix"
:decimal_places="account.currency.decimal_places"
color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
</div>
</div>
</div>
{% if account.exchanged and account.exchanged.total_final %}
<c-amount.display
:amount="account.exchanged.total_final"
:prefix="account.exchanged.currency.prefix"
:suffix="account.exchanged.currency.suffix"
:decimal_places="account.exchanged.currency.decimal_places"
color="grey"
text-end></c-amount.display>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</c-ui.info-card>
</div> </div>
</div> </div>
</div> </div>
@@ -133,149 +135,156 @@
</div> </div>
<script> <script>
var chartData = JSON.parse('{{ chart_data_currency_json|safe }}'); document.body.addEventListener('htmx:load', function (evt) {
var currencies = {{ currencies|safe }}; var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
var currencies = {{ currencies|safe }};
var ctx = document.getElementById('currencyBalanceChart').getContext('2d'); var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
new Chart(ctx, {
type: 'line', new Chart(ctx, {
data: chartData, type: 'line',
options: { data: chartData,
maintainAspectRatio: false, options: {
responsive: true, maintainAspectRatio: false,
interaction: { responsive: true,
mode: 'index', interaction: {
intersect: false,
},
plugins: {
title: {
display: true,
text: '{% translate 'Evolution by currency' %}'
},
tooltip: {
mode: 'index', mode: 'index',
intersect: false intersect: false,
} },
}, plugins: {
scales: {
x: {
display: true,
title: { title: {
display: false, display: true,
text: '{% translate 'Evolution by currency' %}'
},
tooltip: {
mode: 'index',
intersect: false
} }
}, },
...Object.fromEntries(currencies.map((currency, i) => [ scales: {
`y${i}`, x: {
{
type: 'linear',
display: true, display: true,
grid: { title: {
drawOnChartArea: i === 0,
},
ticks: {
display: false, display: false,
format: {maximumFractionDigits: 40, minimumFractionDigits: 0}
},
border: {
display: false
} }
} },
])) ...Object.fromEntries(currencies.map((currency, i) => [
`y${i}`,
{
type: 'linear',
display: true,
grid: {
drawOnChartArea: i === 0,
},
ticks: {
display: false,
format: {maximumFractionDigits: 40, minimumFractionDigits: 0}
},
border: {
display: false
}
}
]))
}
} }
} });
}); });
</script> </script>
<script> <script>
var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}'); document.body.addEventListener('htmx:load', function (evt) {
var accounts = {{ accounts|safe }}; var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
var accounts = {{ accounts|safe }};
var ctx = document.getElementById('accountBalanceChart').getContext('2d'); var ctx = document.getElementById('accountBalanceChart').getContext('2d');
new Chart(ctx, {
type: 'line', new Chart(ctx, {
data: chartData, type: 'line',
options: { data: chartData,
maintainAspectRatio: false, options: {
responsive: true, maintainAspectRatio: false,
interaction: { responsive: true,
mode: 'index', interaction: {
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: '{% translate "Evolution by account" %}'
},
tooltip: {
mode: 'index', mode: 'index',
intersect: false intersect: false,
} },
}, stacked: false,
scales: { plugins: {
x: {
display: true,
title: { title: {
display: false, display: true,
text: '{% translate "Evolution by account" %}'
},
tooltip: {
mode: 'index',
intersect: false
} }
}, },
...Object.fromEntries(accounts.map((account, i) => [ scales: {
`y-axis-${i}`, x: {
{
type: 'linear',
display: true, display: true,
position: i % 2 === 0 ? 'left' : 'right', title: {
grid: {
drawOnChartArea: i === 0,
},
ticks: {
display: false, display: false,
format: {maximumFractionDigits: 40, minimumFractionDigits: 0}
},
border: {
display: false
} }
} },
])) ...Object.fromEntries(accounts.map((account, i) => [
`y-axis-${i}`,
{
type: 'linear',
display: true,
position: i % 2 === 0 ? 'left' : 'right',
grid: {
drawOnChartArea: i === 0,
},
ticks: {
display: false,
format: {maximumFractionDigits: 40, minimumFractionDigits: 0}
},
border: {
display: false
}
}
]))
}
} }
} });
}); });
</script> </script>
<script type="text/hyperscript"> <script type="text/hyperscript">
def showOnlyAccountDataset(datasetName) def showOnlyAccountDataset(datasetName)
set chart to Chart.getChart('accountBalanceChart') set chart to Chart.getChart('accountBalanceChart')
for dataset in chart.data.datasets for dataset in chart.data.datasets
set isMatch to dataset.label is datasetName set isMatch to dataset.label is datasetName
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch) call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
end
call chart.update()
end end
call chart.update()
end
def showOnlyCurrencyDataset(datasetName) def showOnlyCurrencyDataset(datasetName)
set chart to Chart.getChart('currencyBalanceChart') set chart to Chart.getChart('currencyBalanceChart')
for dataset in chart.data.datasets for dataset in chart.data.datasets
set isMatch to dataset.label is datasetName set isMatch to dataset.label is datasetName
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch) call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
end
call chart.update()
end end
call chart.update()
end
def showAllDatasetsAccount() def showAllDatasetsAccount()
set chart to Chart.getChart('accountBalanceChart') set chart to Chart.getChart('accountBalanceChart')
for dataset in chart.data.datasets for dataset in chart.data.datasets
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true) call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true)
end
call chart.update()
end end
call chart.update()
end
def showAllDatasetsCurrency() def showAllDatasetsCurrency()
set chart to Chart.getChart('currencyBalanceChart') set chart to Chart.getChart('currencyBalanceChart')
for dataset in chart.data.datasets for dataset in chart.data.datasets
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true) call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true)
end
call chart.update()
end end
call chart.update()
end
</script> </script>
{% endblock %} {% endblock %}