Test history chart using echarts
This commit is contained in:
parent
4bbb5de3c5
commit
e2fb8b9703
6 changed files with 60818 additions and 3 deletions
|
@ -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"],
|
||||||
|
}
|
||||||
|
|
3
nummi/main/static/main/css/echarts.css
Normal file
3
nummi/main/static/main/css/echarts.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.echarts {
|
||||||
|
height: 12rem;
|
||||||
|
}
|
36
nummi/main/static/main/js/echarts-year.js
Normal file
36
nummi/main/static/main/js/echarts-year.js
Normal 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
60757
nummi/main/static/main/js/echarts.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
@ -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 %}
|
||||||
|
|
|
@ -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")
|
||||||
|
|
Loading…
Reference in a new issue