Test history chart using echarts

nummi/history/utils.py

@@ -1,6 +1,6 @@
 from django.db import models
 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):
@@ -46,3 +46,13 @@ def history(transaction_set):
             ).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"],
+    }

nummi/main/static/main/css/echarts.css

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

nummi/main/static/main/js/echarts-year.js

@@ -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();
+});

nummi/main/templates/main/index.html

@@ -10,6 +10,12 @@
     <link rel="stylesheet"
           href="{% static 'main/css/plot.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 %}
 {% block body %}
     <h2>{% translate "Accounts" %}</h2>
@@ -44,4 +50,5 @@
         <h2>{% translate "History" %}</h2>
         {% include "history/plot.html" %}
     {% endif %}
+    <div id="echarts-year" class="echarts"></div>
 {% endblock %}

nummi/main/views.py

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