From c861b9ae07e436a445ea5dc52bf150b5dfd94199 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Fri, 3 Jan 2025 17:36:10 -0300
Subject: [PATCH 1/2] fix(networth): charts not changing between views

---
 app/templates/net_worth/net_worth.html | 65 ++++++++++++++------------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/app/templates/net_worth/net_worth.html b/app/templates/net_worth/net_worth.html
index 6908ade..b5c75da 100644
--- a/app/templates/net_worth/net_worth.html
+++ b/app/templates/net_worth/net_worth.html
@@ -9,7 +9,7 @@
 {% block title %}{% if type == "current" %}{% translate 'Current Net Worth' %}{% else %}{% translate 'Projected Net Worth' %}{% endif %}{% endblock %}
 
 {% block content %}
-  <div class="container px-md-3 py-3">
+  <div class="container px-md-3 py-3" _="on load call initializeAccountChart() then initializeCurrencyChart()">
     <div class="row gx-xl-4 gy-3 mb-4">
       <div class="col-12 col-xl-5">
         <div class="row row-cols-1 g-4">
@@ -52,7 +52,7 @@
         </div>
       </div>
       <div class="col-12 col-xl-7">
-        <div class="chart-container position-relativo tw-min-h-[40vh] tw-h-full">
+        <div class="chart-container position-relative tw-min-h-[40vh] tw-h-full">
           <canvas id="currencyBalanceChart"></canvas>
         </div>
       </div>
@@ -136,7 +136,7 @@
         </div>
       </div>
       <div class="col-12 col-xl-7">
-        <div class="chart-container position-relativo tw-min-h-[40vh] tw-h-full">
+        <div class="chart-container position-relative tw-min-h-[40vh] tw-h-full">
           <canvas id="accountBalanceChart"></canvas>
         </div>
       </div>
@@ -144,13 +144,19 @@
   </div>
 
   <script>
-      document.body.addEventListener('htmx:load', function (evt) {
+      var currencyChart;
+
+      function initializeCurrencyChart() {
+          // Destroy existing chart if it exists
+          if (currencyChart) {
+              currencyChart.destroy();
+          }
+
           var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
           var currencies = {{ currencies|safe }};
-
           var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
 
-          new Chart(ctx, {
+          currencyChart = new Chart(ctx, {
               type: 'line',
               data: chartData,
               options: {
@@ -197,17 +203,23 @@
                   }
               }
           });
-      });
+      }
   </script>
 
-  <script>
-      document.body.addEventListener('htmx:load', function (evt) {
+  <script id="accountBalanceChartScript">
+      var accountChart;
+
+      function initializeAccountChart() {
+          // Destroy existing chart if it exists
+          if (accountChart) {
+              accountChart.destroy();
+          }
+
           var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
           var accounts = {{ accounts|safe }};
-
           var ctx = document.getElementById('accountBalanceChart').getContext('2d');
 
-          new Chart(ctx, {
+          accountChart = new Chart(ctx, {
               type: 'line',
               data: chartData,
               options: {
@@ -256,43 +268,38 @@
                   }
               }
           });
-      });
-
+      }
   </script>
 
   <script type="text/hyperscript">
     def showOnlyAccountDataset(datasetName)
-      set chart to Chart.getChart('accountBalanceChart')
-      for dataset in chart.data.datasets
+      for dataset in accountChart.data.datasets
         set isMatch to dataset.label is datasetName
-        call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
+        call accountChart.setDatasetVisibility(accountChart.data.datasets.indexOf(dataset), isMatch)
       end
-      call chart.update()
+      call accountChart.update()
     end
 
     def showOnlyCurrencyDataset(datasetName)
-      set chart to Chart.getChart('currencyBalanceChart')
-      for dataset in chart.data.datasets
+      for dataset in currencyChart.data.datasets
         set isMatch to dataset.label is datasetName
-        call chart.setDatasetVisibility(chart.data.datasets.indexOf(dataset), isMatch)
+        call currencyChart.setDatasetVisibility(currencyChart.data.datasets.indexOf(dataset), isMatch)
       end
-      call chart.update()
+      call currencyChart.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)
+      for dataset in accountChart.data.datasets
+        call accountChart.setDatasetVisibility(accountChart.data.datasets.indexOf(dataset), true)
       end
-      call chart.update()
+      call accountChart.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)
+      for dataset in currencyChart.data.datasets
+        call currencyChart.setDatasetVisibility(currencyChart.data.datasets.indexOf(dataset), true)
       end
-      call chart.update()
+      call currencyChart.update()
     end
   </script>
 

From eb753bb30eaea823b564904b294b9709f6b2938f Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sat, 4 Jan 2025 01:32:09 -0300
Subject: [PATCH 2/2] feat(transactions): properly sum income and expense when
 selected

also added a flatTotal (old behavior) for future use
---
 app/templates/cotton/transaction/item.html     |  2 +-
 .../cotton/ui/transactions_action_bar.html     | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/templates/cotton/transaction/item.html b/app/templates/cotton/transaction/item.html
index ed0adc9..8007599 100644
--- a/app/templates/cotton/transaction/item.html
+++ b/app/templates/cotton/transaction/item.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div class="transaction d-flex my-1">
+<div class="transaction d-flex my-1 {% if transaction.type == "EX" %}expense{% else %}income{% endif %}">
   {% if not disable_selection %}
   <label class="px-3 d-flex align-items-center justify-content-center">
     <input class="form-check-input" type="checkbox" name="transactions" value="{{ transaction.id }}" id="check-{{ transaction.id }}" aria-label="{% translate 'Select' %}" hx-preserve>
diff --git a/app/templates/cotton/ui/transactions_action_bar.html b/app/templates/cotton/ui/transactions_action_bar.html
index bc73ccc..ec98c03 100644
--- a/app/templates/cotton/ui/transactions_action_bar.html
+++ b/app/templates/cotton/ui/transactions_action_bar.html
@@ -57,15 +57,23 @@
       </button>
       <div class="vr mx-3 tw-align-middle"></div>
       <span _="on selected_transactions_updated from #actions-bar
-                set total to 0.0
-                for amt in <.transaction:has(input[name='transactions']:checked) .main-amount .amount/>
+                set realTotal to 0.0
+                set flatTotal to 0.0
+                for transaction in <.transaction:has(input[name='transactions']:checked)/>
+                  set amt to first <.main-amount .amount/> in transaction
                   set amountValue to parseFloat(amt.getAttribute('data-amount'))
                   if not isNaN(amountValue)
-                    set total to total + (amountValue * 100)
+                    set flatTotal to flatTotal + (amountValue * 100)
+
+                    if transaction match .income
+                      set realTotal to realTotal + (amountValue * 100)
+                    else
+                      set realTotal to realTotal - (amountValue * 100)
+                    end
                   end
                 end
-                set total to total / 100
-                put total.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into me
+                set realTotal to realTotal / 100
+                put realTotal.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into me
               end
               on click
                 set original_value to my innerText