feat(insights:category-overview): select if you want to view table or bar charts, defaults to table

app/apps/insights/views.py

@@ -168,6 +168,12 @@ def category_sum_by_currency(request):
 @login_required
 @require_http_methods(["GET"])
 def category_overview(request):
+    view_type = request.session.get("insights_category_explorer_view_type", "table")
+
+    if "view_type" in request.GET:
+        view_type = request.GET["view_type"]
+        request.session["insights_category_explorer_view_type"] = view_type
+
     # Get filtered transactions
     transactions = get_transactions(request, include_silent=True)
 
@@ -178,7 +184,7 @@ def category_overview(request):
     return render(
         request,
         "insights/fragments/category_overview/index.html",
-        {"total_table": total_table},
+        {"total_table": total_table, "view_type": view_type},
     )
 
 

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

@@ -1,10 +1,35 @@
 {% 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">
+     hx-include="#picker-form, #picker-type, #view-type">
+  <div class="h-100 text-center mb-4">
+    <div class="btn-group btn-group-sm gap-3" role="group" aria-label="Basic radio toggle button group" id="view-type">
+      <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>
+
+      <input type="radio"
+             class="btn-check"
+             name="view_type"
+             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 %}
+    {% if view_type == "table" %}
       <div class="table-responsive">
-      <table class="table table-striped table-hover">
+        <table class="table table-striped table-hover table-bordered">
           <thead>
           <tr>
             <th scope="col">{% trans 'Category' %}</th>
@@ -65,8 +90,9 @@
         </table>
       </div>
 
-    <div class="mt-4">
-      <div class="chart-container" _="init call setupChart() end" style="position: relative; height:90vh; width:100%">
+    {% elif view_type == "bars" %}
+      <div>
+        <div class="chart-container" _="init call setupChart() end" style="position: relative; height:80vh; width:100%">
           <canvas id="categoryChart"></canvas>
         </div>
       </div>
@@ -220,7 +246,7 @@
                   });
           }
       </script>
-
+    {% endif %}
   {% else %}
     <c-msg.empty title="{% translate "No categories" %}"></c-msg.empty>
   {% endif %}