01/03: add visualize graphically results

16 Jun 2014

This is an automated email from the git hooks/post-receive script.

New commit to branch develop in repository pollen.

See http://git.chorem.org/pollen.git

commit 4f3077d608e345e863f5bae57b7c28a89c1fc3f4
Author: Adrien Garandel <a.garandel@dralagen.fr>
Date:   Mon Jun 16 14:52:12 2014 +0200

    add  visualize graphically results
---
 pollen-ui-angular/src/main/webapp/index.html       | 12 +++-
 pollen-ui-angular/src/main/webapp/js/app.js        | 74 ++++++++++++++++++++++
 .../src/main/webapp/js/controllers/pollCtrl.js     | 20 ++++--
 .../src/main/webapp/partials/poll-comment.html     |  1 +
 .../src/main/webapp/partials/poll-link.html        |  1 +
 .../main/webapp/partials/poll-listParticipant.html |  1 +
 .../src/main/webapp/partials/poll-result.html      |  6 ++
 .../src/main/webapp/partials/poll-settings.html    |  2 +-
 8 files changed, 107 insertions(+), 10 deletions(-)

diff --git a/pollen-ui-angular/src/main/webapp/index.html b/pollen-ui-angular/src/main/webapp/index.html
index 0d0106a..58e1889 100644
--- a/pollen-ui-angular/src/main/webapp/index.html
+++ b/pollen-ui-angular/src/main/webapp/index.html
@@ -23,12 +23,20 @@
 <head>
   <title>Pollen</title>
   <meta charset="utf-8" />
-  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" />
   <link rel="stylesheet" href="css/style.css"/>
 
   <script src="js/conf.js"></script>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
+
+
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
diff --git a/pollen-ui-angular/src/main/webapp/js/app.js b/pollen-ui-angular/src/main/webapp/js/app.js
index e2e148f..03fb078 100644
--- a/pollen-ui-angular/src/main/webapp/js/app.js
+++ b/pollen-ui-angular/src/main/webapp/js/app.js
@@ -277,3 +277,77 @@ angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userC
   }
 })
 
+.directive('chart', function ($timeout) {
+  return {
+    restrict : 'E',
+    scope : {
+      data:'=',
+    },
+    template:'<div class="jqplot-target"></div>',
+    link: function(scope, element, attrs) {
+      var initChart = function () {
+        if (angular.isDefined(scope.data)) {
+          var plot = $.jqplot.config.enablePlugins = true;
+          $(element).find('div').jqplot([scope.data], {
+            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
+            animate: !$.jqplot.use_excanvas,
+            seriesDefaults:{
+              renderer:$.jqplot.BarRenderer,
+              pointLabels: { show: true },
+              rendererOptions : {
+                varyBarColor: true
+              }
+            },
+            axes: {
+              xaxis: {
+                renderer: $.jqplot.CategoryAxisRenderer,
+              }
+            }
+          });
+        }
+      };
+
+      scope.$watch('data', function () {
+        initChart();
+      });
+    }
+  }
+})
+
+.directive('pie', function ($timeout) {
+  return {
+    restrict : 'E',
+    scope : {
+      data:'=',
+    },
+    template:'<div class="jqplot-target"></div>',
+    link: function(scope, element, attrs) {
+      var initChart = function () {
+        if (angular.isDefined(scope.data)) {
+          $.jqplot.config.enablePlugins = true;
+          $(element).find('div').jqplot([scope.data], {
+            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
+            animate: !$.jqplot.use_excanvas,
+            seriesDefaults:{
+              renderer:$.jqplot.PieRenderer,
+              rendererOptions : {
+                padding: 8,
+                sliceMargin: 4,
+                showDataLabels: true,
+                varyBarColor: true
+              }
+            },
+            legend:{
+              show:true
+            }
+          });
+        }
+      };
+
+      scope.$watch('data', function () {
+        initChart();
+      });
+    }
+  }
+})
+
diff --git a/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js b/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js
index c3d2c18..086adb2 100644
--- a/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js
+++ b/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js
@@ -385,7 +385,6 @@ angular.module('pollControllers', [])
   }
 
   $scope.callBackEditChoice = function (choice) {
-    console.log('save choice');
     PollChoice.update({pollId:$routeParams.pollId, permission:$scope.globalVariables.permission}, choice, function() {
       delete choice.restError;
       $scope.globalVariables.saved = true;
@@ -449,7 +448,6 @@ angular.module('pollControllers', [])
 
   $scope.saveVoterList = function (voterList) {
     if (angular.isDefined(voterList.group.id)) {
-      console.log(voterList);
       PollVoterList.update({pollId:$routeParams.pollId, permission:$scope.globalVariables.permission, voterListId:voterList.group.id}, voterList.group, function (data) {
         $scope.globalVariables.saved = true;
         delete voterList.group.restError;
@@ -902,22 +900,30 @@ angular.module('pollControllers', [])
 
   var votesPromise =  PollVote.query({pollId:$routeParams.pollId}, function (votes) {
     $scope.data.votants = votes;
-    $scope.data.result.nbVotant = $scope.data.votants.length;
+    resultPromise.then(function () {
+      $scope.data.result.nbVotant = $scope.data.votants.length;
+    });
   }).$promise;
 
-  choicesPromise.then(function () {
-    Poll.result({pollId:$routeParams.pollId}, function (result) {
-      $scope.data.result = result;
+  var resultPromise = Poll.result({pollId:$routeParams.pollId}, function (result) {
+    $scope.data.result = result;
+    choicesPromise.then(function () {
+      var scoresSorted = [];
       angular.forEach(result.scores, function(value, key) {
         for (var i = 0; i < $scope.data.choices.length; i++) {
           if ($scope.data.choices[i].id == value.choiceId) {
             value.choice = $scope.data.choices[i];
+
+            scoresSorted[$scope.data.choices[i].choiceOrder] = [value.choice.name, value.scoreValue];
+
+            // finish loop
             i = $scope.data.choices.length;
           }
         }
       })
+      $scope.data.result.scoresChart = scoresSorted;
     });
-  });
+  }).$promise;
 
 }])
 
diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-comment.html b/pollen-ui-angular/src/main/webapp/partials/poll-comment.html
index 381b03b..0e3110e 100644
--- a/pollen-ui-angular/src/main/webapp/partials/poll-comment.html
+++ b/pollen-ui-angular/src/main/webapp/partials/poll-comment.html
@@ -19,6 +19,7 @@
   #L%
   -->
 <div>
+  <h1>{{ data.poll.title }}</h1>
   <h2>{{ 'title.comment' | translate }}</h2>
 
   <!-- begin for add comment -->
diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-link.html b/pollen-ui-angular/src/main/webapp/partials/poll-link.html
index 36e3e4c..fc2b4cb 100644
--- a/pollen-ui-angular/src/main/webapp/partials/poll-link.html
+++ b/pollen-ui-angular/src/main/webapp/partials/poll-link.html
@@ -19,6 +19,7 @@
   #L%
   -->
 <div>
+  <h1>{{data.poll.title}}</h1>
   <h2>Sondage:</h2>
 
   <alert type="warning" ng-if="globalVariables.linkEdit && data.poll.permission">
diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html b/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html
index e36d9ee..dcf7068 100644
--- a/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html
+++ b/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html
@@ -18,6 +18,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
   #L%
   -->
+<h1>{{data.poll.title}}</h1>
 <h2>{{ 'poll.restricted.pollType' | translate }}</h2>
 <div>
   <label for="formFree">
diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-result.html b/pollen-ui-angular/src/main/webapp/partials/poll-result.html
index d21b64c..20fb3f0 100644
--- a/pollen-ui-angular/src/main/webapp/partials/poll-result.html
+++ b/pollen-ui-angular/src/main/webapp/partials/poll-result.html
@@ -1,4 +1,10 @@
+<h1>{{data.poll.title}}</h1>
+
 <h2> Résultats : {{data.result.nbVotant}}</h2>
+
+<chart data="data.result.scoresChart"></chart>
+<pie data="data.result.scoresChart"></pie>
+
 <div ng-repeat="score in data.result.scores">
   <h4> {{score.choice.name}} </h4>
   <p>
diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-settings.html b/pollen-ui-angular/src/main/webapp/partials/poll-settings.html
index 0f277d5..960d5c7 100644
--- a/pollen-ui-angular/src/main/webapp/partials/poll-settings.html
+++ b/pollen-ui-angular/src/main/webapp/partials/poll-settings.html
@@ -18,7 +18,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
   #L%
   -->
-
+<h1>{{data.poll.title}}</h1>
 <form class="form-horizontal" novalidate>
     <h4>Confiuration global</h4>
 

-- 
To stop receiving notification emails like this one, please contact
chorem.org SCM administrator <admin+scm@chorem.org>.

    

chorem.org scm

tags

participants (1)