pie chart has a title and hover on items now, still some improvements to do

fbormann
1 parent 49ef3290
Showing 3 changed files with 59 additions and 13 deletions Show diff stats
amadeus/static/css/base/amadeus.css
amadeus/static/js/charts/home.js
topics/views.py
@@ -1125,4 +1125,25 @@ li.item .notify_badge {
  
 .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
     outline: none;
-}
 \ No newline at end of file
+}
+
+
+/* CHART APP */
+.pie-tooltip{
+  background: #eee;
+  box-shadow: 0 0 5px #999999;
+  color: #333;
+  display: none;
+  font-size: 30px;
+  left: 130px;
+  padding: 10px;
+  position: absolute;
+  text-align: center;
+  top: 95px;
+  width: 80px;
+  z-index: 10;
+}
+
+
+
+/**/
 \ No newline at end of file
@@ -17,10 +17,11 @@ var resource_donut_chart = {
 		$.get(url, function(dataset){
  
  
-	        var width = 360;
-	        var height = 400;
-	        var radius = Math.min(width, height) / 2;
-
+	        var width = 600;
+	        var height = 480;
+	        var padding = 30;
+	        var radius = Math.min(width, height) / 2 - padding;
+	       
 	        var color = d3.scaleOrdinal(d3.schemeCategory20c);
 	        var new_div = d3.select(".carousel-inner").append("div").attr("class","item");
 	        var svg = new_div.append("svg").attr("width", width).attr("height", height)
@@ -28,8 +29,9 @@ var resource_donut_chart = {
 	        	.style("display","block")
 	        	.append('g')
 	          	.attr('transform', 'translate(' + (width / 2) +
-	            ',' + (height / 2) + ')');
+	            ',' + (height / 2 ) + ')');
  
+	     
  
 	        var donutInner = 50;
 	        var arc = d3.arc()
@@ -37,16 +39,19 @@ var resource_donut_chart = {
 	          .outerRadius(radius);
  
 	        svg.append("text")
-	        .attr("x", (width / 2))             
-        	.attr("y", 0 - (height / 2))
-        	.attr("text-anchor", "middle")  
-        	.style("font-size", "16px") 
-        	.text("Recurso mais utilizado");
+	        	.attr("text-anchor", "middle")
+	        	.attr("x",0  )
+	        	.attr("y", -height/2 + padding)  
+	        	.style("font-size", "30px") 
+	        	.text("Recursos mais utilizados");
+
  
 	        var pie = d3.pie()
 	          .value(function(d) { return d[1]; })
 	          .sort(null);
  
+	        
+
 	        var path = svg.selectAll('path')
 	          .data(pie(dataset))
 	          .enter()
@@ -55,6 +60,28 @@ var resource_donut_chart = {
 	          .attr('fill', function(d, i) {
 	            return color(i);
 	          });
+	        
+	       	
+	       	svg.selectAll("text.pie-tooltip")
+            .data(dataset)
+            .enter()
+            .append("text")
+                    .text(function(d){
+                        return d[0];
+                    })
+                    .attr("id", function(d){
+                    	return d[0];
+                    })
+                    .attr("class","pie-tooltip");
+
+            path.on('mouseover', function(d) { //When the mouse is over the path         
+			  $('#'+d.data[0]).css("display", "block");                                   
+			});                                          
+
+			path.on('mouseout', function(d) { //When the mouse "leaves" the path
+			  t = $('#'+d.data[0]).css("display", "none");                                   
+			});                                          
+
 		}) // end of the get method
 	}
 }
@@ -274,8 +274,6 @@ def getResourceCount(request):
 		else:
 			data[key] = 1
  
-	data["test"] = 30
-	data["azul"] = 20
 	real_data = []	
 	for item in data.items():
 		real_data.append(item)
...	...	@@ -1125,4 +1125,25 @@ li.item .notify_badge {
1125	1125
1126	1126	.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
1127	1127	outline: none;
1128		-}
1129	1128	\ No newline at end of file
	1129	+}
	1130	+
	1131	+
	1132	+/* CHART APP */
	1133	+.pie-tooltip{
	1134	+ background: #eee;
	1135	+ box-shadow: 0 0 5px #999999;
	1136	+ color: #333;
	1137	+ display: none;
	1138	+ font-size: 30px;
	1139	+ left: 130px;
	1140	+ padding: 10px;
	1141	+ position: absolute;
	1142	+ text-align: center;
	1143	+ top: 95px;
	1144	+ width: 80px;
	1145	+ z-index: 10;
	1146	+}
	1147	+
	1148	+
	1149	+
	1150	+/**/
1130	1151	\ No newline at end of file
...	...
...	...	@@ -17,10 +17,11 @@ var resource_donut_chart = {
17	17	$.get(url, function(dataset){
18	18
19	19
20		- var width = 360;
21		- var height = 400;
22		- var radius = Math.min(width, height) / 2;
23		-
	20	+ var width = 600;
	21	+ var height = 480;
	22	+ var padding = 30;
	23	+ var radius = Math.min(width, height) / 2 - padding;
	24	+
24	25	var color = d3.scaleOrdinal(d3.schemeCategory20c);
25	26	var new_div = d3.select(".carousel-inner").append("div").attr("class","item");
26	27	var svg = new_div.append("svg").attr("width", width).attr("height", height)
...	...	@@ -28,8 +29,9 @@ var resource_donut_chart = {
28	29	.style("display","block")
29	30	.append('g')
30	31	.attr('transform', 'translate(' + (width / 2) +
31		- ',' + (height / 2) + ')');
	32	+ ',' + (height / 2 ) + ')');
32	33
	34	+
33	35
34	36	var donutInner = 50;
35	37	var arc = d3.arc()
...	...	@@ -37,16 +39,19 @@ var resource_donut_chart = {
37	39	.outerRadius(radius);
38	40
39	41	svg.append("text")
40		- .attr("x", (width / 2))
41		- .attr("y", 0 - (height / 2))
42		- .attr("text-anchor", "middle")
43		- .style("font-size", "16px")
44		- .text("Recurso mais utilizado");
	42	+ .attr("text-anchor", "middle")
	43	+ .attr("x",0 )
	44	+ .attr("y", -height/2 + padding)
	45	+ .style("font-size", "30px")
	46	+ .text("Recursos mais utilizados");
	47	+
45	48
46	49	var pie = d3.pie()
47	50	.value(function(d) { return d[1]; })
48	51	.sort(null);
49	52
	53	+
	54	+
50	55	var path = svg.selectAll('path')
51	56	.data(pie(dataset))
52	57	.enter()
...	...	@@ -55,6 +60,28 @@ var resource_donut_chart = {
55	60	.attr('fill', function(d, i) {
56	61	return color(i);
57	62	});
	63	+
	64	+
	65	+ svg.selectAll("text.pie-tooltip")
	66	+ .data(dataset)
	67	+ .enter()
	68	+ .append("text")
	69	+ .text(function(d){
	70	+ return d[0];
	71	+ })
	72	+ .attr("id", function(d){
	73	+ return d[0];
	74	+ })
	75	+ .attr("class","pie-tooltip");
	76	+
	77	+ path.on('mouseover', function(d) { //When the mouse is over the path
	78	+ $('#'+d.data[0]).css("display", "block");
	79	+ });
	80	+
	81	+ path.on('mouseout', function(d) { //When the mouse "leaves" the path
	82	+ t = $('#'+d.data[0]).css("display", "none");
	83	+ });
	84	+
58	85	}) // end of the get method
59	86	}
60	87	}
...	...
...	...	@@ -274,8 +274,6 @@ def getResourceCount(request):
274	274	else:
275	275	data[key] = 1
276	276
277		- data["test"] = 30
278		- data["azul"] = 20
279	277	real_data = []
280	278	for item in data.items():
281	279	real_data.append(item)
...	...