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

app/templates/net_worth/net_worth.html

@@ -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 %}