Merge pull request #243

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/cotton/ui/help_icon.html

@@ -1,7 +1,8 @@
 {% spaceless %}
+{% load i18n %}
 <span class="tw-text-xs text-white-50 mx-1"
       data-bs-toggle="tooltip"
       data-bs-title="{{ content }}">
-  <i class="fa-solid fa-circle-question fa-fw"></i>
+  <i class="{% if not icon %}fa-solid fa-circle-question{% else %}{{ icon }}{% endif %} fa-fw"></i>
 </span>
 {% endspaceless %}

app/templates/cotton/ui/info_card.html

@@ -3,7 +3,7 @@
     {% if icon %}<i class="{{ icon }}"></i>{% else %}<span class="fw-bold">{{ title.0 }}</span>{% endif %}
   </div>
   <div class="card-body">
-    <h5 class="tw-text-{{ color }}-400 fw-bold tw-mr-[50px]" {{ attrs }}>{{ title }}{% if help_text %}{% include 'includes/help_icon.html' with content=help_text %}{% endif %}</h5>
+    <h5 class="tw-text-{{ color }}-400 fw-bold tw-mr-[50px]" {{ attrs }}>{{ title }}{% if help_text %}<c-ui.help-icon :content="help_text" icon=""></c-ui.help-icon>{% endif %}</h5>
     {{ slot }}
   </div>
 </div>

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">
+    {% elif view_type == "bars" %}
-      <div class="chart-container" _="init call setupChart() end" style="position: relative; height:90vh; width:100%">
+      <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 %}

app/templates/insights/pages/index.html

@@ -2,6 +2,8 @@
 {% load crispy_forms_tags %}
 {% load i18n %}
 
+{% block title %}{% translate 'Insights' %}{% endblock %}
+
 {% block content %}
   <div class="container-fluid">
     <div class="row my-3 h-100">