improved tooltip code in bar chart, corrected query and code of most_acessed_subjects data

fbormann
1 parent 12a840b7
Showing 3 changed files with 57 additions and 15 deletions Show diff stats
amadeus/static/css/base/amadeus.css
amadeus/static/js/charts/home.js
subjects/views.py
@@ -1164,6 +1164,20 @@ li.item .notify_badge {
   width: 80px;
 }
+.bar-tip{
+    position: absolute;
+    text-align: center;
+    line-height: 1;
+    font-weight: bold;
+    width: 140px;
+    height: 32px;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 2px;
+    pointer-events: none;      
+}
+
 /**/
 \ No newline at end of file
@@ -67,7 +67,7 @@ var charts = {
 			    .outerRadius(radius - donutInner + 30)
 			    .innerRadius(radius + 20 );
-	       	
+	       	//Adding tooltips to each part of the pie chart.
 	       	svg.selectAll("text.pie-tooltip")
             .data(pie(dataset))
             .enter()
@@ -192,6 +192,7 @@ var charts = {
 	       	var defs = groups.append('svg:defs');
+	       	//Attching images to bubbles
 			defs.append("svg:pattern")
 			    .attr("id", function(d){
 			    	return "user_"+d['user_id'];
@@ -233,7 +234,7 @@ var charts = {
 	most_accessed_subjects: function(url){
 		$.get(url, function(dataset){
-			var width = 1000;
+			var width = 800;
             var height = 300;
             var new_div = d3.select(".carousel-inner").append("div").attr("class","item"); 
@@ -242,22 +243,25 @@ var charts = {
 	        	.style("margin","auto")
 	        	.style("display","block");
-	        var barPadding = 5
+	        var barPadding = 2
 	        var bottomPadding = 15;
-	      	var padding = 30;
+	        var marginLeft = 170; //Margin Left for all bars inside the graph
+	      	
 	      	var yScale = d3.scaleLinear()
                      .domain([0, d3.max(dataset, function(d) { return d.count; })])
-                     .range([bottomPadding, 300]);
+                     .range([bottomPadding, 260]);
 		    var rects = svg.selectAll("rect")
 	        .data(dataset)
 	        .enter()
-	            .append("rect")
+	        	.append("g");
+	            
+	        rects.append("rect")
 	            .attr("x", function(d, i){
-	                return i * (width / dataset.length ) + barPadding ;
+	                return i * (width / dataset.length ) + barPadding + marginLeft ;
 	            })
 	            .attr("y", function(d){
-	                return height - d.count - bottomPadding;
+	                return height - yScale(d.count) - bottomPadding;
 	            })
 	            .attr("width", 
 	            	width / dataset.length - barPadding
@@ -265,18 +269,39 @@ var charts = {
 	            .attr("height", function(d){
 	                return  yScale(d.count);
 	            });
-	        	
-         	rects.on("mouseover", function(d){
+
+
+	        var tooltipDiv = new_div.append("div").attr("class","bar-tip");
+
+         	rects.on("mouseover", function(d, i){
 	       		$(this).attr("fill", "red");
+	       		$("#accessed_subject_"+i).show(); //So the tooltip is hidden 
+	       		 tooltipDiv.transition()		
+                .duration(200)		
+                .style("opacity", .9);		
+            	tooltipDiv.html("<p style='font-size:9px'>" + d.name + "( " + d.count + " )" +"</p>")	
+                .style("left", (i * (width / dataset.length ) + barPadding + marginLeft) + "px")		
+                .style("top", (height - yScale(d.count) - bottomPadding) + "px");
 	       	});
-	       	rects.on("mouseout", function(d){
+	       	rects.on("mouseout", function(d, i ){
 	       		$(this).attr("fill", "black");
+	       		
+	       		$("#accessed_subject_"+i).hide(); //So the tooltip shows up
+
+
+	       		  tooltipDiv.transition()		
+                .duration(500)		
+                .style("opacity", 0);	
+	       			
 	       	});
+	     
+
+	        //Styling title
 	       	 svg.append("text")
 		        .attr("x", width/2)             
-		        .attr("y", 20)
+		        .attr("y", 30)
 		        .attr("text-anchor", "middle")  
 		        .style("font-size", "30px") 
 		        .text("Subjects mais acessados")
@@ -13,7 +13,7 @@ from django.contrib.auth.mixins import LoginRequiredMixin
 from random import shuffle
 from rolepermissions.mixins import HasRoleMixin
 from categories.forms import CategoryForm
-
+import operator
 from braces import views
 from subjects.models import Subject
 from django.contrib.auth.decorators import login_required
@@ -676,6 +676,9 @@ def most_acessed_subjects(request):
             else:
                 subjects[subject_id] = {'name': datum.context['subject_name'], 'count':0 }
+    
+    #order the values of the dictionary by the count in descendent order
+    subjects = sorted(subjects.values(), key = lambda x: x['count'], reverse=True ) 
+    subjects = subjects[:30]
-
-    return JsonResponse(list(subjects.values()), safe=False)
+    return JsonResponse(subjects, safe=False)
	@@ -1164,6 +1164,20 @@ li.item .notify_badge {		@@ -1164,6 +1164,20 @@ li.item .notify_badge {
1164	width: 80px;	1164	width: 80px;
1165	}	1165	}
1166		1166
		1167	+.bar-tip{
		1168	+ position: absolute;
		1169	+ text-align: center;
		1170	+ line-height: 1;
		1171	+ font-weight: bold;
		1172	+ width: 140px;
		1173	+ height: 32px;
		1174	+ padding: 12px;
		1175	+ background: rgba(0, 0, 0, 0.8);
		1176	+ color: #fff;
		1177	+ border-radius: 2px;
		1178	+ pointer-events: none;
		1179	+}
		1180	+
1167		1181
1168		1182
1169	/**/	1183	/**/
1170	\ No newline at end of file	1184	\ No newline at end of file