add usage section to dashboard, implement charts

- fix dashboard grid
- adjust top navbar styles
- move panel-widget directive to separate file

Author: micrum

bower.json

@@ -12,7 +12,8 @@
     "angular-sanitize": "~1.3.4",
     "angular-ui-router": "~0.2.13",
     "angular-material": "~0.8.3",
-    "angular": "~1.3.4"
+    "angular": "~1.3.4",
+    "angular-google-chart": "~0.0.11"
   },
   "devDependencies": {
     "angular-mocks": "~1.3.4"

src/app/controllers/UsageController.js

@@ -0,0 +1,30 @@
+(function(){
+  angular
+    .module('app')
+    .controller('UsageController', [
+      UsageController
+    ]);
+
+  function UsageController() {
+    var vm = this;
+
+    vm.chartOptions = {
+      pieHole: 0.5,
+      pieSliceTextStyle: { color: 'black' },
+      legend: 'none',
+      tooltip : { isHtml: true },
+      pieSliceText: 'none',
+      slices: { 0: { color: 'rgb(62, 164, 152)' },  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] ]
+    };
+  }
+})();

src/app/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
-  'ngSanitize', 'ui.router', 'ngMaterial', 'app'])
+  'ngSanitize', 'ui.router', 'ngMaterial', 'googlechart', 'app'])
 
   .config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider,
                     $mdIconProvider) {
@@ -84,34 +84,4 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
       .defaultIconSet('assets/images/icons.svg', 128)
       .icon('menu', 'assets/images/menu.svg', 24)
       .icon('user', 'assets/images/user.svg', 64);
-  })
-
-
-  .directive('panelWidget', function() {
-    return {
-      restrict: 'E',
-      replace: true,
-      transclude: true,
-      scope: { title: '@', template: '@', options: '@' },
-      template: '' +
-      '<section layout-margin class="md-whiteframe-z1">' +
-      '  <md-toolbar md-theme="white" class="panel-widget">' +
-      '    <div class="md-toolbar-tools">' +
-      '      <h3>{{title}}</h3>' +
-      '      <span flex></span>' +
-      '      <md-button ng-show="options" ng-click="$showOptions = !$showOptions" class="md-icon-button" aria-label="Show options">' +
-      '        <md-icon md-svg-icon="show"></md-icon>' +
-      '      </md-button>' +
-      '    </div>' +
-      '  </md-toolbar>' +
-      '  <div ng-include="template"/>' +
-      '</section>',
-      compile: function(element, attrs, linker) {
-        return function(scope, element) {
-          linker(scope, function(clone) {
-            element.append(clone);
-          });
-        };
-      }
-    };
   });

src/app/stylesheets/_custom.scss

@@ -4,6 +4,7 @@ $orange: #ffdb2b;
 $green: #269f19;
 $main-bg: #ECECEC;
 $text-color: #7A7A7A;
+$accent-color: #E75753;
 
 .blue {
   background-color: $blue;
@@ -29,6 +30,8 @@ $text-color: #7A7A7A;
 // VARIABLES
 $left-sidenav-width: 120px;
 
+$font-weight-normal: 400;
+
 
 // PANEL-WIDGET
 .panel-widget {
@@ -79,3 +82,14 @@ body {
 .sidenav-button {
   text-transform: none;
 }
+
+h1 {
+  color: $accent-color;
+  font-weight: $font-weight-normal;
+}
+
+
+// CHARTS
+.donut-chart-title{
+  text-align: center;
+}

src/app/views/dashboard.html

@@ -39,11 +39,12 @@ <h2 layout-padding>Memory load</h2>
 </md-grid-list>
 
 <div layout-gt-md="row">
-  <panel-widget flex-gt-md="50" title="Information Panel" template="app/views/partials/infoPanel.html" theme="white"></panel-widget>
+  <panel-widget flex title="Information Panel" template="app/views/partials/infoPanel.html" theme="white"></panel-widget>
+  <panel-widget flex title="Usage Stats" template="app/views/partials/usage.html" theme="white"></panel-widget>
   <panel-widget flex title="Autocomplete Input" template="app/views/partials/autocomplete.html" options="true" theme="white"></panel-widget>
 </div>
 
 <div layout-gt-md="row">
-  <panel-widget flex-gt-md="50" title="Performance" template="app/views/partials/progress.html" options="true" theme="white"></panel-widget>
+  <panel-widget flex title="Performance" template="app/views/partials/progress.html" options="true" theme="white"></panel-widget>
   <panel-widget flex title="TODO list" template="app/views/partials/checkboxes.html" theme="white"></panel-widget>
 </div>

src/app/views/partials/usage.html

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

src/components/directives/panelWidget.js

@@ -0,0 +1,31 @@
+'use strict';
+
+angular.module('app')
+  .directive('panelWidget', function() {
+    return {
+      restrict: 'E',
+      replace: true,
+      transclude: true,
+      scope: { title: '@', template: '@', options: '@' },
+      template: '' +
+      '<section layout-margin class="md-whiteframe-z1">' +
+      '  <md-toolbar md-theme="white" class="panel-widget">' +
+      '    <div class="md-toolbar-tools">' +
+      '      <h3>{{title}}</h3>' +
+      '      <span flex></span>' +
+      '      <md-button ng-show="options" ng-click="$showOptions = !$showOptions" class="md-icon-button" aria-label="Show options">' +
+      '        <md-icon md-svg-icon="show"></md-icon>' +
+      '      </md-button>' +
+      '    </div>' +
+      '  </md-toolbar>' +
+      '  <div ng-include="template"/>' +
+      '</section>',
+      compile: function(element, attrs, linker) {
+        return function(scope, element) {
+          linker(scope, function(clone) {
+            element.append(clone);
+          });
+        };
+      }
+    };
+  });