From b7a7d1d9512357bb2309fff50afaebd4082f9dd8 Mon Sep 17 00:00:00 2001
From: Benedict Börger <benedict@0xb8000.de>
Date: Sat, 22 Jun 2019 23:56:25 +0200
Subject: [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.
---
 src/web_frontend/chart.rs | 15 +++++++++++++--
 templates/chart.html.tera | 17 +++++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/web_frontend/chart.rs b/src/web_frontend/chart.rs
index 43ec3eb..0992e99 100644
--- a/src/web_frontend/chart.rs
+++ b/src/web_frontend/chart.rs
@@ -12,10 +12,16 @@ use regex::Regex;
 use chrono::{NaiveDate, Utc};
 use chrono::Datelike;
 
+#[derive(Serialize)]
+struct GroupValues {
+	amount : f32,
+	filter : String
+}
+
 #[derive(Serialize)]
 struct ChartContext {
 	account_name : String,
-	groups : HashMap<String, f32>,
+	groups : HashMap<String, GroupValues>,
 	total_sum : f32,
 	total_chart : f32,
 	date_start : String,
@@ -71,9 +77,14 @@ pub fn chart_handler(account : &RawStr, start : Option<&RawStr>, end : Option<&R
 	println!("total sum: {}", total_sum);
 	let mut total_chart = 0.0;
 	for (section_name, entries) in ini_file.sections {
+		let mut filter_string = String::from("");
 		let mut complete = 0.0;
 		for (key, values) in entries {
 		    for val in values {
+			filter_string.push_str(&key);
+			filter_string.push_str("-");
+			filter_string.push_str(&val);
+			filter_string.push_str(".");
 			let mut t_filtered_cloned = t_filtered.clone();
 			if val.is_empty() || val.is_empty() {
 				continue
@@ -85,7 +96,7 @@ pub fn chart_handler(account : &RawStr, start : Option<&RawStr>, end : Option<&R
 		    	complete = complete + tmp.abs();
 		    }
 		}
-		groups.insert(section_name, complete);
+		groups.insert(section_name, GroupValues{ amount: complete, filter : filter_string } );
 		total_chart = total_chart + complete;
 		// ALSO INSERT OTHER, AKA THE REST
 	}
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>
-- 
cgit v1.2.3-70-g09d2