Add some basic charts

public/src/js/app.js

@@ -21,6 +21,7 @@ angular.module('insight',[
   'insight.transactions',
   'insight.address',
   'insight.search',
+  'insight.charts',
   'insight.status',
   'insight.connection',
   'insight.currency',
@@ -33,6 +34,7 @@ angular.module('insight.blocks', []);
 angular.module('insight.transactions', []);
 angular.module('insight.address', []);
 angular.module('insight.search', []);
+angular.module('insight.charts', []);
 angular.module('insight.status', []);
 angular.module('insight.connection', []);
 angular.module('insight.currency', []);

public/src/js/config.js

@@ -35,6 +35,10 @@ angular.module('insight').config(function($routeProvider) {
       templateUrl: 'views/address.html',
       title: 'Zcash Address '
     }).
+    when('/charts/:chartType?', {
+      templateUrl: 'views/charts.html',
+      title: 'Charts'
+    }).
     when('/status', {
       templateUrl: 'views/status.html',
       title: 'Status'

public/src/js/controllers/charts.js

@@ -0,0 +1,44 @@
+'use strict';
+
+angular.module('insight.charts').controller('ChartsController',
+  function($scope, $rootScope, $routeParams, $location, Chart, Charts) {
+  $scope.loading = false;
+
+  $scope.list = function() {
+    Charts.get({
+    }, function(res) {
+      $scope.charts = res.charts;
+    });
+
+    if ($routeParams.chartType) {
+      $scope.chart();
+    }
+  };
+
+  $scope.chart = function() {
+    $scope.loading = true;
+
+    Chart.get({
+      chartType: $routeParams.chartType
+    }, function(chart) {
+      $scope.loading = false;
+      $scope.chartType = $routeParams.chartType;
+      $scope.chartName = chart.name;
+      $scope.chart = c3.generate(chart);
+    }, function(e) {
+      if (e.status === 400) {
+        $rootScope.flashMessage = 'Invalid chart: ' + $routeParams.chartType;
+      }
+      else if (e.status === 503) {
+        $rootScope.flashMessage = 'Backend Error. ' + e.data;
+      }
+      else {
+        $rootScope.flashMessage = 'Chart Not Found';
+      }
+      $location.path('/');
+    });
+  };
+
+  $scope.params = $routeParams;
+
+});

public/src/js/controllers/header.js

@@ -14,6 +14,9 @@ angular.module('insight.system').controller('HeaderController',
     $scope.menu = [{
       'title': 'Blocks',
       'link': 'blocks'
+    }, {
+      'title': 'Charts',
+      'link': 'charts'
     }, {
       'title': 'Status',
       'link': 'status'

public/src/js/services/charts.js

@@ -0,0 +1,27 @@
+'use strict';
+
+angular.module('insight.charts')
+  .factory('Chart',
+    function($resource) {
+    return $resource(window.apiPrefix + '/chart/:chartType', {
+      chartType: '@chartType'
+    }, {
+      get: {
+        method: 'GET',
+        interceptor: {
+          response: function (res) {
+            return res.data;
+          },
+          responseError: function (res) {
+            if (res.status === 404) {
+              return res;
+            }
+          }
+        }
+      }
+    });
+  })
+  .factory('Charts',
+    function($resource) {
+      return $resource(window.apiPrefix + '/charts');
+  });

public/views/charts.html

@@ -0,0 +1,32 @@
+<div data-ng-include src="'views/includes/connection.html'"></div>
+<section data-ng-controller="ChartsController" data-ng-init="list()">
+  <div class="row">
+    <div class="col-xs-12 col-gray col-gray-fixed">
+      <div class="block-id">
+        <div class="icon-block text-center">
+          <span class="glyphicon glyphicon-stats"></span>
+          <h3><span translate>Charts</span></h3>
+        </div>
+      </div>
+      <div class="m20v text-center">
+        <span class="fader" data-ng-repeat='(type, c) in charts'>
+          <a class="btn btn-primary" style="margin-bottom: 3px" href="charts/{{type}}">{{c.name}}<a>
+        </span>
+      </div>
+    </div>
+    <div class="col-xs-12 col-md-9 col-md-offset-3">
+      <div class="page-header">
+        <h1>
+          <span>{{chartName}}</span>
+        </h1>
+      </div>
+      <div data-ng-show="loading">
+        <span translate>Loading chart...</span> <span class="loader-gif"></span>
+      </div>
+      <div data-ng-show="!loading">
+        <div id="chart"></div>
+      </div>
+    </div>
+  </div>
+</section>
+