replace google-chart to nvd3 chart

Author: micrum

bower.json

@@ -13,7 +13,7 @@
     "angular-ui-router": "~0.2.13",
     "angular-material": "~0.10.0",
     "angular": "~1.3.4",
-    "angular-google-chart": "~0.0.11"
+    "angular-nvd3": "1.0.0-rc.2"
   },
   "devDependencies": {
     "angular-mocks": "~1.3.4"

src/app/controllers/UsageController.js

@@ -1,30 +1,28 @@
-(function(){
-  angular
-    .module('app')
-    .controller('UsageController', [
-      UsageController
-    ]);
+(function () {
+    angular
+        .module('app')
+        .controller('UsageController', [
+            UsageController
+        ]);
 
-  function UsageController() {
-    var vm = this;
+    function UsageController() {
+        var vm = this;
 
-    vm.chartOptions = {
-      pieHole: 0.5,
-      pieSliceTextStyle: { color: 'black' },
-      legend: 'none',
-      tooltip : { isHtml: true },
-      pieSliceText: 'none',
-      slices: { 0: { color: 'rgb(0, 150, 136)' },  1: { color: '#E75753' },  2: { color: 'rgb(235, 235, 235)' } }
-    };
-    vm.ramChart = {
-      type: 'PieChart',
-      options: vm.chartOptions,
-      data: [ ['usedBy', 'percent'], ['Memory', 768660], ['Cache', 367404], ['Swap', 41924] ]
-    };
-    vm.storageChart = {
-      type: 'PieChart',
-      options: vm.chartOptions,
-      data: [ ['usedBy', 'percent'], ['System', 126560], ['Other', 224365] ]
-    };
-  }
+        vm.ramChartData = [{key: 'Memory', y: 768660}, { key: 'Cache', y: 367404}, {key: 'Swap', y: 41924 }];
+        vm.storageChartData = [{key: 'System', y: 126560}, {key: 'Other', y: 224365 }];
+
+        vm.chartOptions = {
+            chart: {
+                type: 'pieChart',
+                height: 130,
+                donut: true,
+                x: function (d) { return d.key; },
+                y: function (d) { return d.y; },
+                color: ['rgb(0, 150, 136)', '#E75753', 'rgb(235, 235, 235)'],
+                showLabels: false,
+                showLegend: false,
+                title: '83%'
+            }
+        };
+    }
 })();

src/app/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
-  'ngSanitize', 'ui.router', 'ngMaterial', 'googlechart', 'app'])
+  'ngSanitize', 'ui.router', 'ngMaterial', 'nvd3', 'app'])
 
   .config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider,
                     $mdIconProvider) {

src/app/stylesheets/_custom.scss

@@ -132,4 +132,9 @@ md-radio-button.md-accent.md-checked .md-label span {
 .material-icons.md-18 { font-size: 18px; }
 .material-icons.md-24 { font-size: 24px; }
 .material-icons.md-36 { font-size: 36px; }
-.material-icons.md-48 { font-size: 48px; }
+.material-icons.md-48 { font-size: 48px; }
+
+.nvd3.nv-pie .nv-pie-title {
+  fill: rgb(68, 68, 68);
+  font-weight: 600;
+}

src/app/views/partials/usage.html

@@ -1,10 +1,10 @@
 <md-content ng-controller="UsageController as vm" class="md-padding" layout="row">
   <div flex>
-    <div google-chart chart="vm.ramChart" style="height:130px;" />
+    <nvd3 options="vm.chartOptions" data="vm.ramChartData"></nvd3>
     <h4 class="donut-chart-title">RAM</h4>
   </div>
   <div flex>
-    <div google-chart chart="vm.storageChart" style="height:130px;" />
+    <nvd3 options="vm.chartOptions" data="vm.storageChartData"></nvd3>
     <h4 class="donut-chart-title">Storage</h4>
   </div>
 </md-content>