Commit 30100e16c1f1b2bb5305aefab4dba4fa7dac1ff9
Committed by
Sergio Oliveira
1 parent
b15e84d5
Exists in
master
and in
39 other branches
Update charts in the user details page
Showing
4 changed files
with
23 additions
and
13 deletions
Show diff stats
src/accounts/templates/accounts/user_detail.html
... | ... | @@ -8,8 +8,8 @@ |
8 | 8 | {% trans "Messages" as group_collabs %} |
9 | 9 | {% trans "Contributions" as type_collabs %} |
10 | 10 | |
11 | - {% include "pizza-chart.html" with chart_data=type_count chart_div="collabs" chart_height=300 name=type_collabs %} | |
12 | - {% include "pizza-chart.html" with chart_data=list_activity chart_div="collabs2" chart_height=300 name=group_collabs %} | |
11 | + {% include "doughnut-chart.html" with chart_data=type_count chart_div="collabs" name=type_collabs %} | |
12 | + {% include "doughnut-chart.html" with chart_data=list_activity chart_div="collabs2" name=group_collabs %} | |
13 | 13 | {% endblock %} |
14 | 14 | |
15 | 15 | {% block main-content %} |
... | ... | @@ -101,6 +101,10 @@ |
101 | 101 | </div> |
102 | 102 | <div class="panel-body"> |
103 | 103 | <div id="collabs"></div> |
104 | + <div class="chart collabs"> | |
105 | + <canvas width="270" height="270"></canvas> | |
106 | + <p></p> | |
107 | + </div> | |
104 | 108 | </div> |
105 | 109 | </div> |
106 | 110 | </div> |
... | ... | @@ -112,7 +116,10 @@ |
112 | 116 | <h3 class="panel-title">{% trans "Participation by Group" %}</h3> |
113 | 117 | </div> |
114 | 118 | <div class="panel-body"> |
115 | - <div id="collabs2"></div> | |
119 | + <div class="chart collabs2"> | |
120 | + <canvas width="270" height="270"></canvas> | |
121 | + <p></p> | |
122 | + </div> | |
116 | 123 | </div> |
117 | 124 | </div> |
118 | 125 | </div> | ... | ... |
src/static/css/screen.css
... | ... | @@ -431,15 +431,18 @@ span.highlighted { |
431 | 431 | |
432 | 432 | /* Chart div */ |
433 | 433 | .chart { |
434 | + text-align: center; | |
435 | +} | |
436 | + | |
437 | +.chart > canvas { | |
434 | 438 | width: 250px; |
435 | - margin:0px auto; | |
436 | 439 | } |
437 | 440 | |
438 | -.chart-description { | |
441 | +.chart > p { | |
439 | 442 | text-align: center; |
440 | 443 | margin-top: 10px; |
441 | 444 | } |
442 | -.chart-description > label { | |
445 | +.chart > p > label { | |
443 | 446 | margin: 0 3px; |
444 | 447 | line-height: 2.5em; |
445 | 448 | } | ... | ... |
src/templates/doughnut-chart.html
... | ... | @@ -9,7 +9,7 @@ $(function () { |
9 | 9 | var colors = ['#2F7ED8', '#0D233A', '#8BBC21', '#910000', '#1AADCE', |
10 | 10 | '#492970', '#F28F43', '#77A1E5', '#C42525', '#A6C96A', '#FFDB42', |
11 | 11 | '#A2B4BD', '#AA734A']; |
12 | - var description = $('.chart-description'); | |
12 | + var description = $('.{{ chart_canvas }} > p'); | |
13 | 13 | var data = []; |
14 | 14 | |
15 | 15 | {% for option, value in type_count.items %} |
... | ... | @@ -29,10 +29,10 @@ $(function () { |
29 | 29 | ); |
30 | 30 | description.append(' '); |
31 | 31 | {% endfor %} |
32 | - var context = document.getElementById("{{ chart_div }}").getContext("2d"); | |
32 | + | |
33 | + var context = $('.{{ chart_canvas }} > canvas').get(0).getContext("2d"); | |
33 | 34 | var chart = new Chart(context).Pie(data, { |
34 | 35 | animateRotate: true, |
35 | - responsive: true, | |
36 | 36 | animationSteps: 30, |
37 | 37 | animationEasing: "easeInOutCirc", |
38 | 38 | segmentStrokeWidth: 1, | ... | ... |
src/templates/home.html
... | ... | @@ -6,7 +6,7 @@ |
6 | 6 | {% block head_js %} |
7 | 7 | {% trans "Contributions" as collabs_name %} |
8 | 8 | |
9 | - {% include "doughnut-chart.html" with chart_data=type_count chart_div="collabs" name=collabs_name %} | |
9 | + {% include "doughnut-chart.html" with chart_data=type_count chart_canvas="collabs" name=collabs_name %} | |
10 | 10 | {% endblock %} |
11 | 11 | |
12 | 12 | {% block header %} |
... | ... | @@ -39,10 +39,10 @@ |
39 | 39 | |
40 | 40 | <div class="col-lg-6 col-md-6"> |
41 | 41 | <h3 class="column-align">{% trans "Collaboration Graph" %}</h3> |
42 | - <div class="chart_canvas"> | |
43 | - <canvas id="collabs"></canvas> | |
42 | + <div class="chart collabs"> | |
43 | + <canvas width="270" height="270"></canvas> | |
44 | + <p></p> | |
44 | 45 | </div> |
45 | - <p class="chart-description"></p> | |
46 | 46 | </div> |
47 | 47 | </div> |
48 | 48 | ... | ... |