insights (wip)

app/apps/insights/urls.py

@@ -3,5 +3,6 @@ from django.urls import path
 from . import views
 
 urlpatterns = [
+    path("insights/", views.index, name="insights_index"),
     path("insights/sankey/", views.sankey, name="sankey"),
 ]

app/apps/insights/views.py

@@ -4,6 +4,10 @@ from apps.transactions.models import Transaction
 from apps.insights.utils.sankey import generate_sankey_data
 
 
+def index(request):
+    return render(request, "insights/pages/index.html")
+
+
 def sankey(request):
     # Get filtered transactions
     transactions = Transaction.objects.filter(date__year=2025)

app/templates/insights/fragments/sankey.html

@@ -5,69 +5,27 @@
 
 <script>
   function setupSankeyChart(data, chartId = 'sankeyChart') {
-    // Color generation function
-    function generateColors(nodes) {
-        const colorMap = {};
-        const incomeColor = '#4CAF50';  // Green
-        const expenseColor = '#F44336';  // Red
-        const savingsColor = '#4CAF50';  // Green (same as income)
-        const accountColor = '#2196F3';  // Blue
-
-        nodes.forEach((node) => {
-            if (node.name.includes('(')) {
-                const [category, currency] = node.name.split(' (');
-                if (category.toLowerCase() === 'savings') {
-                    colorMap[node.name] = savingsColor;
-                } else if (data.flows.some(flow => flow.from_node === node.name)) {
-                    colorMap[node.name] = incomeColor;
-                } else if (data.flows.some(flow => flow.to_node === node.name)) {
-                    colorMap[node.name] = expenseColor;
-                } else {
-                    colorMap[node.name] = accountColor;
-                }
-            } else {
-                colorMap[node.name] = accountColor;
-            }
-        });
-
-        return colorMap;
-    }
-
     // Format currency value
     function formatCurrency(value, currency) {
-        return new Intl.NumberFormat('pt-BR', {
+        return new Intl.NumberFormat(undefined, {
             minimumFractionDigits: currency.decimal_places,
             maximumFractionDigits: currency.decimal_places
         }).format(value);
     }
 
-    // Generate colors for nodes
-    const colorMap = generateColors(data.nodes);
-
-    // Create a mapping of node names to indices
     const nodeIndices = {};
-    const nodeSizes = {};
     data.nodes.forEach((node, index) => {
         nodeIndices[node.name] = index;
-        nodeSizes[node.name] = node.size;
     });
 
-    console.log(data.flows.map(flow => ({
-                from: nodeIndices[flow.from_node],
-                to: nodeIndices[flow.to_node],
-                flow: flow.flow
-            })),);
-    console.log(nodeSizes)
     // Format data for Chart.js
     const chartData = {
         datasets: [{
             data: data.flows.map(flow => ({
-                from: nodeIndices[flow.from_node],
+                from: flow.from_node,
-                to: nodeIndices[flow.to_node],
+                to: flow.to_node,
                 flow: flow.flow
             })),
-            colorFrom: (c) => colorMap[data.nodes[c.dataset.data[c.dataIndex].from].name],
-            colorTo: (c) => colorMap[data.nodes[c.dataset.data[c.dataIndex].to].name],
             colorMode: 'to',
             labels: data.nodes.map(node => node.name),
             size: 'max',

app/templates/insights/pages/index.html

@@ -0,0 +1,23 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block content %}
+<div class="container-fluid">
+  <div class="row mx-3 mt-3">
+    <div class="card shadow w-auto">
+      <div class="card-body">
+        <div class="btn-group" role="group" aria-label="Basic radio toggle button group" _="on change log 'oi'">
+          <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
+          <label class="btn btn-sm btn-outline-primary" for="btnradio1">{% translate 'Month' %}</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+          <label class="btn btn-sm btn-outline-primary" for="btnradio2">{% translate 'Year' %}</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+          <label class="btn btn-sm btn-outline-primary" for="btnradio3">{% translate 'Range' %}</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}