added topic share highcharts pie chart

vipra-ui/app/html/articles/show.html

@@ -14,14 +14,6 @@
       <th>URL</th>
       <td><a ng-href="{{::article.url}}" ng-bind="::article.url"></a></td>
     </tr>
-    <tr>
-      <th>Topics</th>
-      <td class="topic-links">
-        <topic-link topic="topic.topic" ng-repeat="topic in article.topics">
-          <span ng-bind-template="({{topic.count / article.stats.wordCount | toPercent}}%)"></span>
-        </topic-link>
-      </td>
-    </tr>
     <tr>
       <th>Created</th>
       <td ng-bind="::article.created"></td>
@@ -43,4 +35,18 @@
   </tbody>
 </table>
 
+<h3>Topics <hide-link target="#topics"/></h3>
+
+<div class="row" id="topics">
+  <div class="col-md-4 topic-links">
+    <topic-link topic="topic.topic" ng-repeat="topic in article.topics">
+      <span ng-bind-template="({{topic.share}}%)"></span>
+    </topic-link>
+  </div>
+  <div class="col-md-8">
+    <div class="pie-chart" id="topic-share" highcharts="topicShare"></div>
+  </div>
+</div>
+
+<hr>
 <p ng-bind-html="::article.text"></p>
\ No newline at end of file

vipra-ui/app/js/controllers.js

@@ -100,6 +100,33 @@
       $scope.article.modified = formatDateTime($scope.article.modified);
       $scope.articleMeta = response.meta;
       $scope.queryTime = response.$queryTime;
+
+      // calculate percentage share
+      var topicShareSeries = [],
+          topics = $scope.article.topics;
+      for(var i = 0; i < topics.length; i++) {
+        var share = toPercent(topics[i].count / $scope.article.stats.wordCount);
+        topics[i].share = share;
+        topicShareSeries.push({name: topics[i].topic.name.ellipsize(20), y: share});
+      }
+
+      // highcharts data
+      var topicShare = {
+        chart: { type: 'pie' },
+        credits: { enabled: false },
+        plotOptions: {
+          pie: { allowPointSelect: true }
+        },
+        title: { text: 'Topic share' },
+        tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
+        series: [{
+          name: 'Topic Share',
+          colorByPoint: true,
+          data: topicShareSeries
+        }]
+      };
+
+      $scope.topicShare = topicShare;
     });
 
   }]);

vipra-ui/app/js/directives.js

@@ -221,4 +221,45 @@
     };
   }]);
 
+  app.directive('highcharts', function() {
+    return {
+      scope: {
+        highcharts: '='
+      },
+      link: function($scope, $element) {
+        $scope.$watch('highcharts', function(newVal) {
+          if(!newVal) return;
+
+          $element.highcharts($scope.highcharts);
+        });
+      }
+    };
+  });
+
+  app.directive('hideLink', function() {
+    return {
+      scope: {
+        target: '@'
+      },
+      replace: true,
+      template: '<a class="hide-link" href="#" ng-bind="text" ng-click="change($event)"></a>',
+      link: function($scope) {
+        var target = $($scope.target);
+        if(!target.length) return;
+
+        var setText = function(b) {
+          $scope.text = b ? 'hide' : 'show';
+        };
+
+        $scope.change = function(e) {
+          e.preventDefault();
+          setText(!target.is(':visible'));
+          target.slideToggle();
+        };
+
+        setText(target.is(':visible'));
+      }
+    };
+  });
+
 })();
\ No newline at end of file

vipra-ui/app/js/helpers.js

@@ -20,6 +20,7 @@
   };
 
   String.prototype.ellipsize = function(max) {
+    max = max || 20;
     if(this.length > max) {
       return this.substring(0, max) + '...';
     }

vipra-ui/app/less/app.less

@@ -117,6 +117,14 @@ body {
   border-radius: 3px;
 }
 
+.topic-links .topic-link {
+  display: block;
+}
+
+.hide-link {
+  font-size: 12px;
+}
+
 .noselect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;