[enh] TX account pie: add click action

[fix] TX account pie: fix scale color
[fix] TX account pie: cut label using formatPubkey, if need

www/plugins/graph/js/controllers/account-controllers.js

@@ -293,34 +293,38 @@ function GpAccountBalanceController($scope, $controller, $q, $state, $filter, $t
 }
 
 //TODO : Avoid csTx loading, switch to Elasticsearch
-function GpAccountSumTxController($scope, $controller,$filter, csTx, gpColor) {
+function GpAccountSumTxController($scope, $controller, $filter, $state, csTx, gpColor) {
   'ngInject';
 
   // Initialize the super class and extend it.
   angular.extend(this, $controller('GpCurrencyAbstractCtrl', {$scope: $scope}));
 
   // When opening the view
-  $scope.init = function(e, state) {
-
-    var formatDecimal = $filter('formatDecimal');
+  $scope.init= function(e, state) {
 
     // Get the pubkey (from URL params) and store it in the page context ($scope)
     $scope.pubkey = (state && state.stateParams && state.stateParams.pubkey);
+
+  };
+
+  // When opening the view
+  $scope.load = function(e, state) {
     if (!$scope.pubkey) return;
 
+    var formatDecimal = $filter('formatDecimal');
+
     // Load account TX data
-    csTx.load($scope.pubkey, -1)
+    return csTx.load($scope.pubkey, -1)
       .then(function(result) {
-        console.log(result); // Allow to discover data structure
+
         if (result && result.tx && result.tx.history) {
-           //Charts data
-           $scope.inputChart = $scope.computeChartData(_.filter(result.tx.history, function(tx) {
-             return tx.amount > 0;
-           }));
+          //Charts data
+          $scope.inputChart = $scope.computeChartData(_.filter(result.tx.history, function(tx) {
+            return tx.amount > 0;
+          }));
           $scope.outputChart = $scope.computeChartData(_.filter(result.tx.history, function(tx) {
             return tx.amount < 0;
           }));
-          console.log( $scope.outputChart);
         }
       });
   };
@@ -328,12 +332,14 @@ function GpAccountSumTxController($scope, $controller,$filter, csTx, gpColor) {
   // Load chart data: received amount by pubkey
   $scope.computeChartData = function(txArray) {
 
+    var formatPubkey = $filter('formatPubkey');
 
     // Sum TX amount, with a group by pubkey
     var sumByPubkeys = {};
     _.forEach(txArray, function (tx) {
       sumByPubkeys[tx.pubkey] = sumByPubkeys[tx.pubkey] || {
-          label: tx.uid || tx.pubkey,
+          label: tx.name || tx.uid || formatPubkey(tx.pubkey),
+          pubkey: tx.pubkey,
           sum: 0
         };
       sumByPubkeys[tx.pubkey].sum += Math.abs(tx.amount/100);
@@ -346,9 +352,24 @@ function GpAccountSumTxController($scope, $controller,$filter, csTx, gpColor) {
     return {
       data: _.pluck(sumItems, 'sum'),
       labels: _.pluck(sumItems, 'label'),
-      colors: gpColor.scale.custom(sumItems.length)
+      pubkeys: _.pluck(sumItems, 'pubkey'),
+      colors: gpColor.scale.custom(
+        Math.max(10, sumItems.length) // avoid strange colors
+      )
     };
   };
+
+  $scope.onInputChartClick = function(data, e, item) {
+    if (!item) return;
+    var pubkey = $scope.inputChart.pubkeys[item._index];
+    $state.go('app.wot_identity', {pubkey: pubkey});
+  };
+
+  $scope.onOutputChartClick = function(data, e, item) {
+    if (!item) return;
+    var pubkey = $scope.outputChart.pubkeys[item._index];
+    $state.go('app.wot_identity', {pubkey: pubkey});
+  };
 }
 
 

www/plugins/graph/templates/account/graph_sum_tx.html

-<div class="row">
+<div class="row responsive-sm" ng-if="!loading">
 
-  <div class="col col-10"></div>
+  <div class="col col-10 hidden-xs hidden-sm">&nbsp;</div>
 
-  <div class="col col-33 text-center">
+  <div class="col text-center">
 
     <!-- [NEW] TX input chart -->
-    <p class="gray" translate>GRAPH.ACCOUNT.INPUT_CHART_TITLE</p>
+    <p class="gray padding text-wrap"
+       ng-if="inputChart.data.length"
+       translate>GRAPH.ACCOUNT.INPUT_CHART_TITLE</p>
     <canvas id="chart-received-pie" class="chart-pie"
             chart-data="inputChart.data"
-            chart-labels="inputChart.labels">
+            chart-labels="inputChart.labels"
+            chart-colors="inputChart.colors"
+            chart-click="onInputChartClick">
     </canvas>
 
   </div>
 
-  <div class="col"></div>
+  <div class="col col-10 hidden-xs hidden-sm">&nbsp;</div>
 
-  <div class="col col-33 text-center">
+  <div class="col text-center">
 
     <!-- [NEW] TX input chart -->
-    <p class="gray" translate>GRAPH.ACCOUNT.OUTPUT_CHART_TITLE</p>
+    <p class="gray padding text-wrap"
+       ng-if="outputChart.data.length"
+       translate>GRAPH.ACCOUNT.OUTPUT_CHART_TITLE</p>
     <canvas id="chart-sent-pie" class="chart-pie"
             chart-data="outputChart.data"
-            chart-labels="outputChart.labels">
+            chart-labels="outputChart.labels"
+            chart-colors="outputChart.colors"
+            chart-click="onOutputChartClick">
     </canvas>
 
   </div>
 
-  <div class="col col-10"></div>
+  <div class="col col-10 hidden-xs hidden-sm">&nbsp;</div>
 
 </div>