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 | ... | ... |