From 93cb146eb3c141f4fcc53a1b61d1aa3b0a837522 Mon Sep 17 00:00:00 2001
From: Kevin Alberts <kevin@kevinalberts.nl>
Date: Tue, 12 Nov 2019 13:58:30 +0100
Subject: [PATCH] Fix graph layout

---
 tapperssleutel/views.py | 4 ++++
 templates/detail.html   | 9 ++++++---
 templates/home.html     | 5 ++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/tapperssleutel/views.py b/tapperssleutel/views.py
index 85f97d9..3943f71 100644
--- a/tapperssleutel/views.py
+++ b/tapperssleutel/views.py
@@ -32,6 +32,7 @@ class HomePage(CreateView):
 
         dates = Kwijtgeraakt.objects.all().order_by('date')
         context['tapperlist'] = [x.name for x in Tapper.objects.all()]
+        context['datelist'] = [x.date.strftime("%Y-%m-%d") for x in dates]
         context['tappersdata'] = {}
         current_counts = {tapper.name: 0 for tapper in Tapper.objects.all()}
         for date in dates:
@@ -59,9 +60,12 @@ class DetailPage(FormView):
         context['tappers'] = Tapper.objects.all().annotate(amount=Count('kwijtgeraakt'))
 
         context['detailform'] = form
+        context['start_date'] = form.cleaned_data['start_date']
+        context['end_date'] = form.cleaned_data['end_date']
 
         dates = Kwijtgeraakt.objects.filter(date__gte=form.cleaned_data['start_date'], date__lte=form.cleaned_data['end_date']).order_by('date')
         context['tapperlist'] = [x.name for x in Tapper.objects.all()]
+        context['datelist'] = [x.date.strftime("%Y-%m-%d") for x in dates]
         context['tappersdata'] = {}
         current_counts = {tapper.name: 0 for tapper in Tapper.objects.all()}
         for date in dates:
diff --git a/templates/detail.html b/templates/detail.html
index 18e67c3..db38c60 100644
--- a/templates/detail.html
+++ b/templates/detail.html
@@ -54,10 +54,12 @@
                         <!-- Show chart -->
                         <script type="text/javascript" src="{% static 'js/gchart_loader.js' %}"></script>
                         {{ tapperlist|json_script:"tapperlist" }}
+                        {{ datelist|json_script:"datelist" }}
                         {{ tappersdata|json_script:"tapperdata" }}
                         <script type="text/javascript">
 
                             var data_headers = JSON.parse(document.getElementById('tapperlist').textContent);
+                            var data_dates = JSON.parse(document.getElementById('datelist').textContent);
                             var data_content = JSON.parse(document.getElementById('tapperdata').textContent);
 
                             var chartData = [];
@@ -66,7 +68,7 @@
                             chartData.push(headerRow);
 
                             // Add first row with all zeroes on start date of form
-                            var startDate = new Date("{{ detailform.start_date.value|date:"Y-m-d" }}");
+                            var startDate = new Date("{{ start_date|date:"Y-m-d" }}");
                             rowData = [startDate];
                             for (var index in data_headers) {
                                 if (data_headers[index] !== "Date") {
@@ -76,7 +78,8 @@
                             chartData.push(rowData);
 
                             // Add rest of rows
-                            for (var date in data_content) {
+                            for (var date_id in data_dates) {
+                                var date = data_dates[date_id];
                                 rowData = [new Date(date)];
                                 for (var index in data_headers) {
                                     if (data_headers[index] !== "Date") {
@@ -87,7 +90,7 @@
                             }
 
                             // Add last row with max values on end date of form
-                            var endDate = new Date("{{ detailform.end_date.value|date:"Y-m-d" }}");
+                            var endDate = new Date("{{ end_date|date:"Y-m-d" }}");
                             rowData = [endDate];
                             for (var index in data_headers) {
                                 if (data_headers[index] !== "Date") {
diff --git a/templates/home.html b/templates/home.html
index 4e870ac..b18987d 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -88,10 +88,12 @@
                         <!-- Show chart -->
                         <script type="text/javascript" src="{% static 'js/gchart_loader.js' %}"></script>
                         {{ tapperlist|json_script:"tapperlist" }}
+                        {{ datelist|json_script:"datelist" }}
                         {{ tappersdata|json_script:"tapperdata" }}
                         <script type="text/javascript">
 
                             var data_headers = JSON.parse(document.getElementById('tapperlist').textContent);
+                            var data_dates = JSON.parse(document.getElementById('datelist').textContent);
                             var data_content = JSON.parse(document.getElementById('tapperdata').textContent);
 
                             var chartData = [];
@@ -110,7 +112,8 @@
                             chartData.push(rowData);
 
                             // Add rest of rows
-                            for (var date in data_content) {
+                            for (var date_id in data_dates) {
+                                var date = data_dates[date_id];
                                 rowData = [new Date(date)];
                                 for (var index in data_headers) {
                                     if (data_headers[index] !== "Date") {