Update charts in the user details page

Marco · Sergio Oliveira
1 parent b15e84d5
Showing 4 changed files with 23 additions and 13 deletions Show diff stats
src/accounts/templates/accounts/user_detail.html
src/static/css/screen.css
src/templates/doughnut-chart.html
src/templates/home.html
@@ -8,8 +8,8 @@
   {% trans "Messages" as group_collabs %}
   {% trans "Contributions" as type_collabs %}
-  {% include "pizza-chart.html" with chart_data=type_count chart_div="collabs" chart_height=300 name=type_collabs %}
-  {% include "pizza-chart.html" with chart_data=list_activity chart_div="collabs2" chart_height=300 name=group_collabs %}
+  {% include "doughnut-chart.html" with chart_data=type_count chart_div="collabs" name=type_collabs %}
+  {% include "doughnut-chart.html" with chart_data=list_activity chart_div="collabs2" name=group_collabs %}
 {% endblock %}
 {% block main-content %}
@@ -101,6 +101,10 @@
         </div>
         <div class="panel-body">
           <div id="collabs"></div>
+          <div class="chart collabs">
+              <canvas width="270" height="270"></canvas>
+            <p></p>
+          </div>
         </div>
       </div>
     </div>
@@ -112,7 +116,10 @@
           <h3 class="panel-title">{% trans "Participation by Group" %}</h3>
         </div>
         <div class="panel-body">
-          <div id="collabs2"></div>
+          <div class="chart collabs2">
+              <canvas width="270" height="270"></canvas>
+            <p></p>
+          </div>
         </div>
       </div>
     </div>
@@ -431,15 +431,18 @@ span.highlighted {
 /* Chart div */
 .chart {
+    text-align: center;
+}
+
+.chart > canvas {
     width: 250px;
-    margin:0px auto;
 }
-.chart-description {
+.chart > p {
     text-align: center;
     margin-top: 10px;
 }
-.chart-description > label {
+.chart > p > label {
     margin: 0 3px;
     line-height: 2.5em;
 }
@@ -9,7 +9,7 @@ $(function () {
     var colors = ['#2F7ED8', '#0D233A', '#8BBC21', '#910000', '#1AADCE',
         '#492970', '#F28F43', '#77A1E5', '#C42525', '#A6C96A', '#FFDB42',
         '#A2B4BD', '#AA734A'];
-    var description = $('.chart-description');
+    var description = $('.{{ chart_canvas }} > p');
     var data = [];
     {% for option, value in type_count.items %}
@@ -29,10 +29,10 @@ $(function () {
     );
     description.append(' ');
     {% endfor %}
-    var context = document.getElementById("{{ chart_div }}").getContext("2d");
+
+    var context = $('.{{ chart_canvas }} > canvas').get(0).getContext("2d");
     var chart = new Chart(context).Pie(data, {
         animateRotate: true,
-        responsive: true,
         animationSteps: 30,
         animationEasing: "easeInOutCirc",
         segmentStrokeWidth: 1,
@@ -6,7 +6,7 @@
 {% block head_js %}
   {% trans "Contributions" as collabs_name %}
-  {% include "doughnut-chart.html" with chart_data=type_count chart_div="collabs" name=collabs_name %}
+  {% include "doughnut-chart.html" with chart_data=type_count chart_canvas="collabs" name=collabs_name %}
 {% endblock %}
 {% block header %}
@@ -39,10 +39,10 @@
     <div class="col-lg-6 col-md-6">
       <h3 class="column-align">{% trans "Collaboration Graph" %}</h3>
-      <div class="chart_canvas">
-        <canvas id="collabs"></canvas>
+      <div class="chart collabs">
+          <canvas width="270" height="270"></canvas>
+        <p></p>
       </div>
-      <p class="chart-description"></p>
     </div>
   </div>