Download as
Browse Code »

Commit 1e2118beb4f8e8fba95ca1171ee224204eb4327c

Authored by fbormann
1 parent 12a840b7
Exists in master and in 3 other branches amadeus_univasf, image-crop, refactoring

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

Showing 3 changed files with 57 additions and 15 deletions   Show diff stats
amadeus/static/css/base/amadeus.css
  Diff comments   View file @1e2118b
... ... @@ -1164,6 +1164,20 @@ li.item .notify_badge {
1164 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 1184 \ No newline at end of file
... ...
amadeus/static/js/charts/home.js
  Diff comments   View file @1e2118b
... ... @@ -67,7 +67,7 @@ var charts = {
67 67 .outerRadius(radius - donutInner + 30)
68 68 .innerRadius(radius + 20 );
69 69  
70   -
  70 + //Adding tooltips to each part of the pie chart.
71 71 svg.selectAll("text.pie-tooltip")
72 72 .data(pie(dataset))
73 73 .enter()
... ... @@ -192,6 +192,7 @@ var charts = {
192 192  
193 193 var defs = groups.append('svg:defs');
194 194  
  195 + //Attching images to bubbles
195 196 defs.append("svg:pattern")
196 197 .attr("id", function(d){
197 198 return "user_"+d['user_id'];
... ... @@ -233,7 +234,7 @@ var charts = {
233 234  
234 235 most_accessed_subjects: function(url){
235 236 $.get(url, function(dataset){
236   - var width = 1000;
  237 + var width = 800;
237 238 var height = 300;
238 239  
239 240 var new_div = d3.select(".carousel-inner").append("div").attr("class","item");
... ... @@ -242,22 +243,25 @@ var charts = {
242 243 .style("margin","auto")
243 244 .style("display","block");
244 245  
245   - var barPadding = 5
  246 + var barPadding = 2
246 247 var bottomPadding = 15;
247   - var padding = 30;
  248 + var marginLeft = 170; //Margin Left for all bars inside the graph
  249 +
248 250 var yScale = d3.scaleLinear()
249 251 .domain([0, d3.max(dataset, function(d) { return d.count; })])
250   - .range([bottomPadding, 300]);
  252 + .range([bottomPadding, 260]);
251 253  
252 254 var rects = svg.selectAll("rect")
253 255 .data(dataset)
254 256 .enter()
255   - .append("rect")
  257 + .append("g");
  258 +
  259 + rects.append("rect")
256 260 .attr("x", function(d, i){
257   - return i * (width / dataset.length ) + barPadding ;
  261 + return i * (width / dataset.length ) + barPadding + marginLeft ;
258 262 })
259 263 .attr("y", function(d){
260   - return height - d.count - bottomPadding;
  264 + return height - yScale(d.count) - bottomPadding;
261 265 })
262 266 .attr("width",
263 267 width / dataset.length - barPadding
... ... @@ -265,18 +269,39 @@ var charts = {
265 269 .attr("height", function(d){
266 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 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 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 302 svg.append("text")
278 303 .attr("x", width/2)
279   - .attr("y", 20)
  304 + .attr("y", 30)
280 305 .attr("text-anchor", "middle")
281 306 .style("font-size", "30px")
282 307 .text("Subjects mais acessados")
... ...
subjects/views.py
  Diff comments   View file @1e2118b
... ... @@ -13,7 +13,7 @@ from django.contrib.auth.mixins import LoginRequiredMixin
13 13 from random import shuffle
14 14 from rolepermissions.mixins import HasRoleMixin
15 15 from categories.forms import CategoryForm
16   -
  16 +import operator
17 17 from braces import views
18 18 from subjects.models import Subject
19 19 from django.contrib.auth.decorators import login_required
... ... @@ -676,6 +676,9 @@ def most_acessed_subjects(request):
676 676 else:
677 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)
... ...