From a90b188e3294dc5ce2aced9c22b17af8ea664a79 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Fri, 27 Dec 2024 01:49:43 -0300
Subject: [PATCH] fix(networth): random broken rendering for charts when
 changing pages with htmx

---
 app/templates/net_worth/net_worth.html | 357 +++++++++++++------------
 1 file changed, 183 insertions(+), 174 deletions(-)

diff --git a/app/templates/net_worth/net_worth.html b/app/templates/net_worth/net_worth.html
index 43fb68e..3997a02 100644
--- a/app/templates/net_worth/net_worth.html
+++ b/app/templates/net_worth/net_worth.html
@@ -14,7 +14,8 @@
       <div class="col-12 col-xl-5">
         <div class="row row-cols-1 g-4 mb-3">
           <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 %}
                 <div class="d-flex justify-content-between mt-2">
                   <div class="d-flex align-items-baseline w-100">
@@ -49,75 +50,76 @@
             </c-ui.info-card>
           </div>
           <div class="col">
-              <c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans 'By account' %}" _="on click showAllDatasetsAccount()">
-                {% regroup account_net_worth.values by account.group as account_data %}
-                {% for data in account_data %}
-                  {% if data.grouper %}
+            <c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans 'By account' %}"
+                            _="on click showAllDatasetsAccount()">
+              {% regroup account_net_worth.values by account.group as account_data %}
+              {% 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 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 class="account-name text-start font-monospace tw-text-gray-300"
+                             _="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>
-                    {% 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="account-name text-start font-monospace tw-text-gray-300"
-                               _="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>
+                    {% 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 %}
+                {% else %}
+                  {% 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="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>
-                      {% 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 %}
-                  {% else %}
-                    {% 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="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>
+                    {% 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>
@@ -133,149 +135,156 @@
   </div>
 
   <script>
-      var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
-      var currencies = {{ currencies|safe }};
+      document.body.addEventListener('htmx:load', function (evt) {
+          var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
+          var currencies = {{ currencies|safe }};
 
-      var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
-      new Chart(ctx, {
-          type: 'line',
-          data: chartData,
-          options: {
-              maintainAspectRatio: false,
-              responsive: true,
-              interaction: {
-                  mode: 'index',
-                  intersect: false,
-              },
-              plugins: {
-                  title: {
-                      display: true,
-                      text: '{% translate 'Evolution by currency' %}'
-                  },
-                  tooltip: {
+          var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
+
+          new Chart(ctx, {
+              type: 'line',
+              data: chartData,
+              options: {
+                  maintainAspectRatio: false,
+                  responsive: true,
+                  interaction: {
                       mode: 'index',
-                      intersect: false
-                  }
-              },
-              scales: {
-                  x: {
-                      display: true,
+                      intersect: false,
+                  },
+                  plugins: {
                       title: {
-                          display: false,
+                          display: true,
+                          text: '{% translate 'Evolution by currency' %}'
+                      },
+                      tooltip: {
+                          mode: 'index',
+                          intersect: false
                       }
                   },
-                  ...Object.fromEntries(currencies.map((currency, i) => [
-                      `y${i}`,
-                      {
-                          type: 'linear',
+                  scales: {
+                      x: {
                           display: true,
-                          grid: {
-                              drawOnChartArea: i === 0,
-                          },
-                          ticks: {
+                          title: {
                               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>
-      var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
-      var accounts = {{ accounts|safe }};
+      document.body.addEventListener('htmx:load', function (evt) {
+          var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
+          var accounts = {{ accounts|safe }};
 
-      var ctx = document.getElementById('accountBalanceChart').getContext('2d');
-      new Chart(ctx, {
-          type: 'line',
-          data: chartData,
-          options: {
-              maintainAspectRatio: false,
-              responsive: true,
-              interaction: {
-                  mode: 'index',
-                  intersect: false,
-              },
-              stacked: false,
-              plugins: {
-                  title: {
-                      display: true,
-                      text: '{% translate "Evolution by account" %}'
-                  },
-                  tooltip: {
+          var ctx = document.getElementById('accountBalanceChart').getContext('2d');
+
+          new Chart(ctx, {
+              type: 'line',
+              data: chartData,
+              options: {
+                  maintainAspectRatio: false,
+                  responsive: true,
+                  interaction: {
                       mode: 'index',
-                      intersect: false
-                  }
-              },
-              scales: {
-                  x: {
-                      display: true,
+                      intersect: false,
+                  },
+                  stacked: false,
+                  plugins: {
                       title: {
-                          display: false,
+                          display: true,
+                          text: '{% translate "Evolution by account" %}'
+                      },
+                      tooltip: {
+                          mode: 'index',
+                          intersect: false
                       }
                   },
-                  ...Object.fromEntries(accounts.map((account, i) => [
-                      `y-axis-${i}`,
-                      {
-                          type: 'linear',
+                  scales: {
+                      x: {
                           display: true,
-                          position: i % 2 === 0 ? 'left' : 'right',
-                          grid: {
-                              drawOnChartArea: i === 0,
-                          },
-                          ticks: {
+                          title: {
                               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 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)
+    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
-    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)
+    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
-    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)
+    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
-    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)
+    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
-    call chart.update()
-  end
   </script>
 
 {% endblock %}