From 30100e16c1f1b2bb5305aefab4dba4fa7dac1ff9 Mon Sep 17 00:00:00 2001
From: Marco Rougeth <marco@rougeth.com>
Date: Wed, 6 Aug 2014 15:19:10 +0000
Subject: [PATCH] Update charts in the user details page

---
 src/accounts/templates/accounts/user_detail.html | 13 ++++++++++---
 src/static/css/screen.css                        |  9 ++++++---
 src/templates/doughnut-chart.html                |  6 +++---
 src/templates/home.html                          |  8 ++++----
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/accounts/templates/accounts/user_detail.html b/src/accounts/templates/accounts/user_detail.html
index 6b8cf55..cf28653 100644
--- a/src/accounts/templates/accounts/user_detail.html
+++ b/src/accounts/templates/accounts/user_detail.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>
diff --git a/src/static/css/screen.css b/src/static/css/screen.css
index 9a5491f..0153db0 100644
--- a/src/static/css/screen.css
+++ b/src/static/css/screen.css
@@ -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;
 }
diff --git a/src/templates/doughnut-chart.html b/src/templates/doughnut-chart.html
index ed7c609..5607c4b 100644
--- a/src/templates/doughnut-chart.html
+++ b/src/templates/doughnut-chart.html
@@ -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,
diff --git a/src/templates/home.html b/src/templates/home.html
index 53b68a5..1f5e2f0 100644
--- a/src/templates/home.html
+++ b/src/templates/home.html
@@ -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>
 
--
libgit2 0.21.2