Commit 1e2118beb4f8e8fba95ca1171ee224204eb4327c
1 parent
12a840b7
Exists in
master
and in
3 other branches
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
@@ -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) |