Commit 1e2118beb4f8e8fba95ca1171ee224204eb4327c

Authored by fbormann
1 parent 12a840b7

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

amadeus/static/css/base/amadeus.css
@@ -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
amadeus/static/js/charts/home.js
@@ -67,7 +67,7 @@ var charts = { @@ -67,7 +67,7 @@ var charts = {
67 .outerRadius(radius - donutInner + 30) 67 .outerRadius(radius - donutInner + 30)
68 .innerRadius(radius + 20 ); 68 .innerRadius(radius + 20 );
69 69
70 - 70 + //Adding tooltips to each part of the pie chart.
71 svg.selectAll("text.pie-tooltip") 71 svg.selectAll("text.pie-tooltip")
72 .data(pie(dataset)) 72 .data(pie(dataset))
73 .enter() 73 .enter()
@@ -192,6 +192,7 @@ var charts = { @@ -192,6 +192,7 @@ var charts = {
192 192
193 var defs = groups.append('svg:defs'); 193 var defs = groups.append('svg:defs');
194 194
  195 + //Attching images to bubbles
195 defs.append("svg:pattern") 196 defs.append("svg:pattern")
196 .attr("id", function(d){ 197 .attr("id", function(d){
197 return "user_"+d['user_id']; 198 return "user_"+d['user_id'];
@@ -233,7 +234,7 @@ var charts = { @@ -233,7 +234,7 @@ var charts = {
233 234
234 most_accessed_subjects: function(url){ 235 most_accessed_subjects: function(url){
235 $.get(url, function(dataset){ 236 $.get(url, function(dataset){
236 - var width = 1000; 237 + var width = 800;
237 var height = 300; 238 var height = 300;
238 239
239 var new_div = d3.select(".carousel-inner").append("div").attr("class","item"); 240 var new_div = d3.select(".carousel-inner").append("div").attr("class","item");
@@ -242,22 +243,25 @@ var charts = { @@ -242,22 +243,25 @@ var charts = {
242 .style("margin","auto") 243 .style("margin","auto")
243 .style("display","block"); 244 .style("display","block");
244 245
245 - var barPadding = 5 246 + var barPadding = 2
246 var bottomPadding = 15; 247 var bottomPadding = 15;
247 - var padding = 30; 248 + var marginLeft = 170; //Margin Left for all bars inside the graph
  249 +
248 var yScale = d3.scaleLinear() 250 var yScale = d3.scaleLinear()
249 .domain([0, d3.max(dataset, function(d) { return d.count; })]) 251 .domain([0, d3.max(dataset, function(d) { return d.count; })])
250 - .range([bottomPadding, 300]); 252 + .range([bottomPadding, 260]);
251 253
252 var rects = svg.selectAll("rect") 254 var rects = svg.selectAll("rect")
253 .data(dataset) 255 .data(dataset)
254 .enter() 256 .enter()
255 - .append("rect") 257 + .append("g");
  258 +
  259 + rects.append("rect")
256 .attr("x", function(d, i){ 260 .attr("x", function(d, i){
257 - return i * (width / dataset.length ) + barPadding ; 261 + return i * (width / dataset.length ) + barPadding + marginLeft ;
258 }) 262 })
259 .attr("y", function(d){ 263 .attr("y", function(d){
260 - return height - d.count - bottomPadding; 264 + return height - yScale(d.count) - bottomPadding;
261 }) 265 })
262 .attr("width", 266 .attr("width",
263 width / dataset.length - barPadding 267 width / dataset.length - barPadding
@@ -265,18 +269,39 @@ var charts = { @@ -265,18 +269,39 @@ var charts = {
265 .attr("height", function(d){ 269 .attr("height", function(d){
266 return yScale(d.count); 270 return yScale(d.count);
267 }); 271 });
268 -  
269 - rects.on("mouseover", function(d){ 272 +
  273 +
  274 + var tooltipDiv = new_div.append("div").attr("class","bar-tip");
  275 +
  276 + rects.on("mouseover", function(d, i){
270 $(this).attr("fill", "red"); 277 $(this).attr("fill", "red");
  278 + $("#accessed_subject_"+i).show(); //So the tooltip is hidden
  279 + tooltipDiv.transition()
  280 + .duration(200)
  281 + .style("opacity", .9);
  282 + tooltipDiv.html("<p style='font-size:9px'>" + d.name + "( " + d.count + " )" +"</p>")
  283 + .style("left", (i * (width / dataset.length ) + barPadding + marginLeft) + "px")
  284 + .style("top", (height - yScale(d.count) - bottomPadding) + "px");
271 }); 285 });
272 286
273 - rects.on("mouseout", function(d){ 287 + rects.on("mouseout", function(d, i ){
274 $(this).attr("fill", "black"); 288 $(this).attr("fill", "black");
  289 +
  290 + $("#accessed_subject_"+i).hide(); //So the tooltip shows up
  291 +
  292 +
  293 + tooltipDiv.transition()
  294 + .duration(500)
  295 + .style("opacity", 0);
  296 +
275 }); 297 });
276 298
  299 +
  300 +
  301 + //Styling title
277 svg.append("text") 302 svg.append("text")
278 .attr("x", width/2) 303 .attr("x", width/2)
279 - .attr("y", 20) 304 + .attr("y", 30)
280 .attr("text-anchor", "middle") 305 .attr("text-anchor", "middle")
281 .style("font-size", "30px") 306 .style("font-size", "30px")
282 .text("Subjects mais acessados") 307 .text("Subjects mais acessados")
subjects/views.py
@@ -13,7 +13,7 @@ from django.contrib.auth.mixins import LoginRequiredMixin @@ -13,7 +13,7 @@ from django.contrib.auth.mixins import LoginRequiredMixin
13 from random import shuffle 13 from random import shuffle
14 from rolepermissions.mixins import HasRoleMixin 14 from rolepermissions.mixins import HasRoleMixin
15 from categories.forms import CategoryForm 15 from categories.forms import CategoryForm
16 - 16 +import operator
17 from braces import views 17 from braces import views
18 from subjects.models import Subject 18 from subjects.models import Subject
19 from django.contrib.auth.decorators import login_required 19 from django.contrib.auth.decorators import login_required
@@ -676,6 +676,9 @@ def most_acessed_subjects(request): @@ -676,6 +676,9 @@ def most_acessed_subjects(request):
676 else: 676 else:
677 subjects[subject_id] = {'name': datum.context['subject_name'], 'count':0 } 677 subjects[subject_id] = {'name': datum.context['subject_name'], 'count':0 }
678 678
  679 +
  680 + #order the values of the dictionary by the count in descendent order
  681 + subjects = sorted(subjects.values(), key = lambda x: x['count'], reverse=True )
  682 + subjects = subjects[:30]
679 683
680 -  
681 - return JsonResponse(list(subjects.values()), safe=False) 684 + return JsonResponse(subjects, safe=False)