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

feat(networth): hide other chart data points when clicking on account or currency name

Browse Source
This commit is contained in:
Herculino Trotta
2024-12-14 02:42:05 -03:00
parent b86e859c39
commit 216f9b8ef4
1 changed files with 239 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/templates/net_worth/net_worth.html
View File

@@ -9,7 +9,7 @@
{% block title %}{% translate 'Net Worth' %}{% endblock %}
{% block content %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="container px-md-3 py-3 column-gap-5">
<div class="row gx-xl-4 gy-3">
<div class="col-12 col-xl-5">
<div class="row row-cols-1 g-4 mb-3">
@@ -24,7 +24,21 @@
{% for currency in currency_net_worth.values %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="currency-name text-start font-monospace tw-text-gray-300">{{ currency.currency.name }}</div>
<div class="currency-name text-start font-monospace tw-text-gray-300"
_="def showOnlyDatasetByName(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
on click
showOnlyDatasetByName('{{ currency.currency.name }}')
end">
{{ currency.currency.name }}
</div>
<div class="dotted-line flex-grow-1"></div>
<div>
<c-amount.display
@@ -72,7 +86,19 @@
{% for account in data.list %}
<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">
<div class="account-name text-start font-monospace tw-text-gray-300"
_="def showOnlyDatasetByName(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
on click
showOnlyDatasetByName('{{ account.account.name }}')
end">
<span class="hierarchy-line-icon"></span>{{ account.account.name }}</div>
<div class="dotted-line flex-grow-1"></div>
<div class="">
@@ -99,7 +125,21 @@
{% for account in data.list %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="currency-name text-start font-monospace tw-text-gray-300">{{ account.account.name }}</div>
<div class="account-name text-start font-monospace tw-text-gray-300"
_="def showOnlyDatasetByName(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
on click
showOnlyDatasetByName('{{ account.account.name }}')
end">
{{ account.account.name }}
</div>
<div class="dotted-line flex-grow-1"></div>
<div>
<c-amount.display
@@ -133,9 +173,9 @@
<canvas id="accountBalanceChart"></canvas>
</div>
</div>
</div>
</div>
<script>
<script>
var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
var currencies = {{ currencies|safe }};
@@ -176,7 +216,7 @@
},
ticks: {
display: false,
format: { maximumFractionDigits: 40, minimumFractionDigits: 0 }
format: {maximumFractionDigits: 40, minimumFractionDigits: 0}
},
border: {
display: false
@@ -186,9 +226,9 @@
}
}
});
</script>
</script>
<script>
<script>
var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
var accounts = {{ accounts|safe }};
@@ -231,7 +271,7 @@
},
ticks: {
display: false,
format: { maximumFractionDigits: 40, minimumFractionDigits: 0 }
format: {maximumFractionDigits: 40, minimumFractionDigits: 0}
},
border: {
display: false
@@ -241,6 +281,6 @@
}
}
});
</script>
</script>
{% endblock %}