[web_frontend][chart] link chart to transactions

when a category in the pie chart is selected load the corresponding transaction
site with the right filter set.

1 files changed, 15 insertions, 2 deletions

diff --git a/templates/chart.html.tera b/templates/chart.html.tera
index 50adbef..acded96 100644
--- a/templates/chart.html.tera
+++ b/templates/chart.html.tera
@@ -14,7 +14,7 @@
         var data = google.visualization.arrayToDataTable([
           ['Money spent', 'EUR'],
 	{% for name, value in groups %}
-		['{{ name }}', {{ value }}],
+		['{{ name }}', {{ value.amount }}],
 	{% endfor %}
         ]);
 
@@ -26,6 +26,19 @@
         var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
         chart.draw(data, options);
 
+	google.visualization.events.addListener(chart, 'select', selectHandler); 
+
+        function selectHandler(e)     {   
+		var link_data = [
+			{% for name, value in groups %}
+			['{{ name }}', '{{ value.filter }}' ],
+			{% endfor %}
+		]
+		var filter = link_data[chart.getSelection()[0].row][1];
+		window.location = "http://localhost:8000/transactions/{{ account_name}}?filter=" + filter + "&start={{ date_start}}&end={{ date_end }}"
+
+    	}
+
       }
     </script>
   <title>Graphic Overview for account {{ account_name }}</title>
@@ -82,7 +95,7 @@
 	%) present in chart
 </h5>
 	<!-- stack coln charts to compare months -->
-    <div id="donutchart" style="margin: auto; width: 100%; height: 500px;"></div>
+    <div id="donutchart" style="margin: auto; width: 100%; height: 700px;"></div>
 </div>
 
   <script src="/static/jquery.min.js"></script>