refactor(networth): add functions for interacting with charts

This commit is contained in:
Herculino Trotta
2024-12-14 11:07:27 -03:00
parent b744aed388
commit 2993ead631

View File

@@ -21,31 +21,14 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<h5 class="tw-text-yellow-400 fw-bold mb-3" <h5 class="tw-text-yellow-400 fw-bold mb-3"
_="on click _="on click showAllDatasetsCurrency()">
set chart to Chart.getChart('currencyBalanceChart')
for dataset in chart.data.datasets
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true)
end
call chart.update()
end">
{% translate 'By currency' %} {% translate 'By currency' %}
</h5> </h5>
{% 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">
<div class="currency-name text-start font-monospace tw-text-gray-300" <div class="currency-name text-start font-monospace tw-text-gray-300"
_="def showOnlyDatasetByName(datasetName) _="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
set chart to Chart.getChart('currencyBalanceChart')
for dataset in chart.data.datasets
set isMatch to dataset.label is datasetName
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
end
call chart.update()
end
on click
showOnlyDatasetByName('{{ currency.currency.name }}')
end">
{{ currency.currency.name }} {{ currency.currency.name }}
</div> </div>
<div class="dotted-line flex-grow-1"></div> <div class="dotted-line flex-grow-1"></div>
@@ -83,13 +66,7 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<h5 class="tw-text-blue-400 fw-bold mb-3" <h5 class="tw-text-blue-400 fw-bold mb-3"
_="on click _="on click showAllDatasetsAccount()">
set chart to Chart.getChart('accountBalanceChart')
for dataset in chart.data.datasets
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true)
end
call chart.update()
end">
{% translate 'By account' %} {% translate 'By account' %}
</h5> </h5>
{% regroup account_net_worth.values by account.group as account_data %} {% regroup account_net_worth.values by account.group as account_data %}
@@ -105,18 +82,7 @@
<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="account-name text-start font-monospace tw-text-gray-300" <div class="account-name text-start font-monospace tw-text-gray-300"
_="def showOnlyDatasetByName(datasetName) _="on click showOnlyAccountDataset('{{ account.account.name }}')">
set chart to Chart.getChart('accountBalanceChart')
for dataset in chart.data.datasets
set isMatch to dataset.label is datasetName
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
end
call chart.update()
end
on click
showOnlyDatasetByName('{{ account.account.name }}')
end">
<span class="hierarchy-line-icon"></span>{{ account.account.name }}</div> <span class="hierarchy-line-icon"></span>{{ account.account.name }}</div>
<div class="dotted-line flex-grow-1"></div> <div class="dotted-line flex-grow-1"></div>
<div class=""> <div class="">
@@ -144,18 +110,7 @@
<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="account-name text-start font-monospace tw-text-gray-300" <div class="account-name text-start font-monospace tw-text-gray-300"
_="def showOnlyDatasetByName(datasetName) _="on click showOnlyAccountDataset('{{ account.account.name }}')">
set chart to Chart.getChart('accountBalanceChart')
for dataset in chart.data.datasets
set isMatch to dataset.label is datasetName
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
end
call chart.update()
end
on click
showOnlyDatasetByName('{{ account.account.name }}')
end">
{{ account.account.name }} {{ account.account.name }}
</div> </div>
<div class="dotted-line flex-grow-1"></div> <div class="dotted-line flex-grow-1"></div>
@@ -301,4 +256,40 @@
}); });
</script> </script>
<script type="text/hyperscript">
def showOnlyAccountDataset(datasetName)
set chart to Chart.getChart('accountBalanceChart')
for dataset in chart.data.datasets
set isMatch to dataset.label is datasetName
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
end
call chart.update()
end
def showOnlyCurrencyDataset(datasetName)
set chart to Chart.getChart('currencyBalanceChart')
for dataset in chart.data.datasets
set isMatch to dataset.label is datasetName
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
end
call chart.update()
end
def showAllDatasetsAccount()
set chart to Chart.getChart('accountBalanceChart')
for dataset in chart.data.datasets
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true)
end
call chart.update()
end
def showAllDatasetsCurrency()
set chart to Chart.getChart('currencyBalanceChart')
for dataset in chart.data.datasets
call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), true)
end
call chart.update()
end
</script>
{% endblock %} {% endblock %}