Commit 30100e16c1f1b2bb5305aefab4dba4fa7dac1ff9

Authored by Marco
Committed by Sergio Oliveira
1 parent b15e84d5

Update charts in the user details page

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