starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-01-16 05:56:38 +01:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

insights (wip)

Browse Source
This commit is contained in:
Herculino Trotta
2025-02-12 09:48:31 -03:00
parent 28b12faaf0
commit 038438fba7
4 changed files with 31 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/apps/insights/urls.py
View File

@@ -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"),
]

4
app/apps/insights/views.py
View File

@@ -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)

48
app/templates/insights/fragments/sankey.html
View File

@@ -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],
to: nodeIndices[flow.to_node],
from: flow.from_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',

23
app/templates/insights/pages/index.html Normal file
View File

@@ -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 %}