Merge pull request #245 from eitchtee/dev

feat(insights:category-overview): pick between Projected/Current/Final totals

app/apps/insights/views.py

@@ -177,11 +177,14 @@ def category_overview(request):
     if "show_tags" in request.GET:
         show_tags = request.GET["show_tags"] == "on"
         request.session["insights_category_explorer_show_tags"] = show_tags
-        print(request.GET["show_tags"], show_tags)
     else:
         show_tags = request.session.get("insights_category_explorer_show_tags", True)
 
-    print(show_tags)
+    if "showing" in request.GET:
+        showing = request.GET["showing"]
+        request.session["insights_category_explorer_showing"] = showing
+    else:
+        showing = request.session.get("insights_category_explorer_showing", "final")
 
     # Get filtered transactions
     transactions = get_transactions(request, include_silent=True)
@@ -193,7 +196,12 @@ def category_overview(request):
     return render(
         request,
         "insights/fragments/category_overview/index.html",
-        {"total_table": total_table, "view_type": view_type, "show_tags": show_tags},
+        {
+            "total_table": total_table,
+            "view_type": view_type,
+            "show_tags": show_tags,
+            "showing": showing,
+        },
     )
 
 

app/templates/insights/fragments/category_overview/index.html

@@ -1,15 +1,14 @@
 {% load i18n %}
 
 <div hx-get="{% url 'category_overview' %}" hx-trigger="updated from:window" class="show-loading" hx-swap="outerHTML"
-     hx-include="#picker-form, #picker-type, #view-type, #show-tags">
+     hx-include="#picker-form, #picker-type, #view-type, #show-tags, #showing">
   <div class="h-100 text-center mb-4">
-    <div class="btn-group gap-3" role="group" id="view-type">
+    <div class="btn-group gap-3" role="group" id="view-type" _="on change trigger updated">
       <input type="radio" class="btn-check"
              name="view_type"
              id="table-view"
              autocomplete="off"
              value="table"
-             _="on change trigger updated"
              {% if view_type == "table" %}checked{% endif %}>
       <label class="btn btn-outline-primary rounded-5" for="table-view"><i
           class="fa-solid fa-table fa-fw me-2"></i>{% trans 'Table' %}</label>
@@ -20,29 +19,43 @@
              id="bars-view"
              autocomplete="off"
              value="bars"
-             _="on change trigger updated"
              {% if view_type == "bars" %}checked{% endif %}>
       <label class="btn btn-outline-primary rounded-5" for="bars-view"><i
           class="fa-solid fa-chart-bar fa-fw me-2"></i>{% trans 'Bars' %}</label>
     </div>
   </div>
-  {% if total_table %}
+  <div class="mt-3 mb-1 d-flex flex-column flex-md-row justify-content-between">
-    {% if view_type == "table" %}
+    <div class="form-check form-switch" id="show-tags">
-      <div class="mt-3">
+      {% if view_type == 'table' %}
-        <div class="form-check form-switch" id="show-tags">
+        <input type="hidden" name="show_tags" value="off">
-          <input type="hidden" name="show_tags" value="off">
+        <input class="form-check-input" type="checkbox" role="switch" id="show-tags-switch" name="show_tags"
-          <input class="form-check-input" type="checkbox" role="switch" id="show-tags-switch" name="show_tags"
+               _="on change trigger updated" {% if show_tags %}checked{% endif %}>
-                 _="on change trigger updated" {% if show_tags %}checked{% endif %}>
+        {% spaceless %}
-          {% spaceless %}
           <label class="form-check-label" for="show-tags-switch">
-            {% trans 'Show tags' %}
+            {% trans 'Tags' %}
           </label>
           <c-ui.help-icon
               content="{% trans 'Transaction amounts associated with multiple tags will be counted once for each tag' %}"
               icon="fa-solid fa-circle-exclamation"></c-ui.help-icon>
-          {% endspaceless %}
+        {% endspaceless %}
-        </div>
+      {% endif %}
-      </div>
+    </div>
+    <div class="btn-group btn-group-sm" role="group" id="showing" _="on change trigger updated">
+      <input type="radio" class="btn-check" name="showing" id="showing-projected" autocomplete="off"
+             value="projected" {% if showing == 'projected' %}checked{% endif %}>
+      <label class="btn btn-outline-primary" for="showing-projected">{% trans "Projected" %}</label>
+
+      <input type="radio" class="btn-check" name="showing" id="showing-current" autocomplete="off" value="current"
+             {% if showing == 'current' %}checked{% endif %}>
+      <label class="btn btn-outline-primary" for="showing-current">{% trans "Current" %}</label>
+
+      <input type="radio" class="btn-check" name="showing" id="showing-final" autocomplete="off" value="final"
+             {% if showing == 'final' %}checked{% endif %}>
+      <label class="btn btn-outline-primary" for="showing-final">{% trans "Final total" %}</label>
+    </div>
+  </div>
+  {% if total_table %}
+    {% if view_type == "table" %}
       <div class="table-responsive">
         <table class="table table-striped table-hover table-bordered align-middle">
           <thead>
@@ -58,9 +71,23 @@
             <!-- Category row -->
             <tr class="table-group-header">
               <th>{% if category.name %}{{ category.name }}{% else %}{% trans 'Uncategorized' %}{% endif %}</th>
-              <td>
+              <td> {# income #}
                 {% for currency in category.currencies.values %}
-                  {% if currency.total_income != 0 %}
+                  {% if showing == 'current' and currency.income_current != 0 %}
+                    <c-amount.display
+                        :amount="currency.income_current"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="green"></c-amount.display>
+                  {% elif showing == 'projected' and currency.income_projected != 0 %}
+                    <c-amount.display
+                        :amount="currency.income_projected"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="green"></c-amount.display>
+                  {% elif showing == 'final' and currency.total_income != 0 %}
                     <c-amount.display
                         :amount="currency.total_income"
                         :prefix="currency.currency.prefix"
@@ -72,9 +99,23 @@
                   {% endif %}
                 {% endfor %}
               </td>
-              <td>
+              <td>  {# expenses #}
                 {% for currency in category.currencies.values %}
-                  {% if currency.total_expense != 0 %}
+                  {% if showing == 'current' and currency.expense_current != 0 %}
+                    <c-amount.display
+                        :amount="currency.expense_current"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="red"></c-amount.display>
+                  {% elif showing == 'projected' and currency.expense_projected != 0 %}
+                    <c-amount.display
+                        :amount="currency.expense_projected"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="red"></c-amount.display>
+                  {% elif showing == 'final' and currency.total_expense != 0 %}
                     <c-amount.display
                         :amount="currency.total_expense"
                         :prefix="currency.currency.prefix"
@@ -86,9 +127,23 @@
                   {% endif %}
                 {% endfor %}
               </td>
-              <td>
+              <td>  {# total #}
                 {% for currency in category.currencies.values %}
-                  {% if currency.total_final != 0 %}
+                  {% if showing == 'current' and currency.total_current != 0 %}
+                    <c-amount.display
+                        :amount="currency.total_current"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                  {% elif showing == 'projected' and currency.total_projected != 0 %}
+                    <c-amount.display
+                        :amount="currency.total_projected"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                  {% elif showing == 'final' and currency.total_final != 0 %}
                     <c-amount.display
                         :amount="currency.total_final"
                         :prefix="currency.currency.prefix"
@@ -112,7 +167,21 @@
                     </td>
                     <td>
                       {% for currency in tag.currencies.values %}
-                        {% if currency.total_income != 0 %}
+                        {% if showing == 'current' and currency.income_current != 0 %}
+                          <c-amount.display
+                              :amount="currency.income_current"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="green"></c-amount.display>
+                        {% elif showing == 'projected' and currency.income_projected != 0 %}
+                          <c-amount.display
+                              :amount="currency.income_projected"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="green"></c-amount.display>
+                        {% elif showing == 'final' and currency.total_income != 0 %}
                           <c-amount.display
                               :amount="currency.total_income"
                               :prefix="currency.currency.prefix"
@@ -126,7 +195,21 @@
                     </td>
                     <td>
                       {% for currency in tag.currencies.values %}
-                        {% if currency.total_expense != 0 %}
+                        {% if showing == 'current' and currency.expense_current != 0 %}
+                          <c-amount.display
+                              :amount="currency.expense_current"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="red"></c-amount.display>
+                        {% elif showing == 'projected' and currency.expense_projected != 0 %}
+                          <c-amount.display
+                              :amount="currency.expense_projected"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="red"></c-amount.display>
+                        {% elif showing == 'final' and currency.total_expense != 0 %}
                           <c-amount.display
                               :amount="currency.total_expense"
                               :prefix="currency.currency.prefix"
@@ -140,7 +223,21 @@
                     </td>
                     <td>
                       {% for currency in tag.currencies.values %}
-                        {% if currency.total_final != 0 %}
+                        {% if showing == 'current' and currency.total_current != 0 %}
+                          <c-amount.display
+                              :amount="currency.total_current"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                        {% elif showing == 'projected' and currency.total_projected != 0 %}
+                          <c-amount.display
+                              :amount="currency.total_projected"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                        {% elif showing == 'final' and currency.total_final != 0 %}
                           <c-amount.display
                               :amount="currency.total_final"
                               :prefix="currency.currency.prefix"
@@ -164,16 +261,19 @@
 
     {% elif view_type == "bars" %}
       <div>
-        <div class="chart-container" _="init call setupChart() end" style="position: relative; height:80vh; width:100%">
+        <div class="chart-container" _="init call setupChart() end" style="position: relative; height:78vh; width:100%">
           <canvas id="categoryChart"></canvas>
         </div>
       </div>
 
       {{ total_table|json_script:"categoryOverviewData" }}
+      {{ showing|json_script:"showingString" }}
 
       <script>
           function setupChart() {
               var rawData = JSON.parse(document.getElementById('categoryOverviewData').textContent);
+              var showing_string = JSON.parse(document.getElementById('showingString').textContent);
+              console.log(showing_string)
 
               // --- Dynamic Data Processing ---
               var categories = [];
@@ -219,7 +319,14 @@
                       Object.values(cat.currencies).forEach(curr => {
                           var code = curr.currency?.code;
                           if (code && currencyData[code]) {
-                              var value = parseFloat(curr.total_final);
+                              if (showing_string == 'current') {
+                                  var value = parseFloat(curr.total_current);
+                              } else if (showing_string == 'projected') {
+                                  var value = parseFloat(curr.total_projected);
+                              } else {
+                                  var value = parseFloat(curr.total_final);
+                              }
+
                               // Store the number if it's valid, otherwise keep null
                               currencyData[code][catIndex] = !isNaN(value) ? value : null;
                           }