Test history chart using echarts

This commit is contained in:
Edgar P. Burkhart 2023-12-28 14:22:55 +01:00
parent 4bbb5de3c5
commit e2fb8b9703
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
6 changed files with 60818 additions and 3 deletions

View file

@ -1,6 +1,6 @@
from django.db import models from django.db import models
from django.db.models import Func, Max, Min, Q, Sum, Value from django.db.models import Func, Max, Min, Q, Sum, Value
from django.db.models.functions import Now, TruncMonth from django.db.models.functions import Abs, Now, TruncMonth
class GenerateMonth(Func): class GenerateMonth(Func):
@ -46,3 +46,13 @@ def history(transaction_set):
).values(), ).values(),
), ),
} }
def echarts(transaction_set):
if not transaction_set.exists():
return None
_data = transaction_set.values_list("date").annotate(sum=Sum("value"))
return {
"data": list(_data),
"max": _data.aggregate(max=Max(Abs("sum")))["max"],
}

View file

@ -0,0 +1,3 @@
.echarts {
height: 12rem;
}

View file

@ -0,0 +1,36 @@
// Initialize the echarts instance based on the prepared dom
const myChart = echarts.init(document.getElementById("echarts-year"), null, {
renderer: "svg",
});
const data = JSON.parse(document.getElementById("echarts-history").textContent);
console.log(data);
option = {
tooltip: {},
visualMap: {
min: -data.max,
max: +data.max,
type: "continuous",
orient: "horizontal",
show: false,
inRange: {
color: ["#802653", "#66cc66", "white", "#cc6699", "#338033"],
},
},
calendar: {
top: 30,
bottom: 30,
range: "2022",
left: "center",
},
series: {
type: "heatmap",
coordinateSystem: "calendar",
data: data.data,
},
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});

60757
nummi/main/static/main/js/echarts.min.js vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -10,6 +10,12 @@
<link rel="stylesheet" <link rel="stylesheet"
href="{% static 'main/css/plot.css' %}" href="{% static 'main/css/plot.css' %}"
type="text/css" /> type="text/css" />
<link rel="stylesheet"
href="{% static 'main/css/echarts.css' %}"
type="text/css" />
<script src="{% static 'main/js/echarts.min.js' %}"></script>
<script src="{% static 'main/js/echarts-year.js' %}" defer></script>
{{ echarts_history | json_script:"echarts-history" }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<h2>{% translate "Accounts" %}</h2> <h2>{% translate "Accounts" %}</h2>
@ -44,4 +50,5 @@
<h2>{% translate "History" %}</h2> <h2>{% translate "History" %}</h2>
{% include "history/plot.html" %} {% include "history/plot.html" %}
{% endif %} {% endif %}
<div id="echarts-year" class="echarts"></div>
{% endblock %} {% endblock %}

View file

@ -13,7 +13,7 @@ from django.views.generic import (
TemplateView, TemplateView,
UpdateView, UpdateView,
) )
from history.utils import history from history.utils import echarts, history
from statement.models import Statement from statement.models import Statement
from transaction.models import Transaction from transaction.models import Transaction
@ -25,13 +25,15 @@ class IndexView(LoginRequiredMixin, TemplateView):
_max = 8 _max = 8
_transactions = Transaction.objects.filter(user=self.request.user) _transactions = Transaction.objects.filter(user=self.request.user)
_statements = Statement.objects.filter(user=self.request.user) _statements = Statement.objects.filter(user=self.request.user)
_history = history(_transactions.exclude(category__budget=False))
res = { res = {
"accounts": Account.objects.filter(user=self.request.user), "accounts": Account.objects.filter(user=self.request.user),
"transactions": _transactions[:_max], "transactions": _transactions[:_max],
"categories": Category.objects.filter(user=self.request.user), "categories": Category.objects.filter(user=self.request.user),
"statements": _statements[:_max], "statements": _statements[:_max],
"history": history(_transactions.exclude(category__budget=False)), "history": _history,
"echarts_history": echarts(_transactions),
} }
if _transactions.count() > _max: if _transactions.count() > _max:
res["transactions_url"] = reverse_lazy("transactions") res["transactions_url"] = reverse_lazy("transactions")