add memory chart

Author: micrum

src/app/controllers/MemoryController.js

@@ -0,0 +1,36 @@
+(function () {
+    angular
+        .module('app')
+        .controller('MemoryController', [
+            MemoryController
+        ]);
+
+    function MemoryController() {
+        var vm = this;
+
+        // TODO: move data to the service
+        vm.memoryChartData = [ {key: 'memory', y: 42}, { key: 'free', y: 58} ];
+
+        vm.chartOptions = {
+            chart: {
+                type: 'pieChart',
+                height: 210,
+                donut: true,
+                pie: {
+                    startAngle: function (d) { return d.startAngle/2 -Math.PI/2 },
+                    endAngle: function (d) { return d.endAngle/2 -Math.PI/2 }
+                },
+                x: function (d) { return d.key; },
+                y: function (d) { return d.y; },
+                valueFormat: (d3.format(".0f")),
+                color: ['rgb(0, 150, 136)', 'rgb(191, 191, 191)'],
+                showLabels: false,
+                showLegend: false,
+                tooltips: false,
+                title: '42%',
+                titleOffset: -10,
+                margin: { bottom: -80, left: -20, right: -20 }
+            }
+        };
+    }
+})();

src/app/controllers/UsageController.js

@@ -24,7 +24,7 @@
                 showLabels: false,
                 showLegend: false,
                 title: '83%',
-                margin: { top: -10 }
+                margin: { top: -10, left: -20, right: -20 }
             }
         };
     }

src/app/controllers/WarningsController.js

@@ -23,7 +23,7 @@
             chart: {
                 type: 'lineChart',
                 height: 210,
-                margin: { left: -20, right: -20 },
+                margin: { top: -10, left: -20, right: -20 },
                 x: function (d) { return d.x },
                 y: function (d) { return d.y },
                 showLabels: false,

src/app/stylesheets/_custom.scss

@@ -9,6 +9,7 @@ $warning-color: #E75753;
 $left-sidenav-width: 110px;
 $widget-height: 310px;
 $font-weight-bold: 600;
+$font-size-large: 22px;
 
 
 // LAYOUT
@@ -101,7 +102,7 @@ body {
 }
 
 .custom-tooltip {
-  font-size: 24px;
+  font-size: $font-size-large;
   color: $text-color;
   text-align: center;
 }
@@ -144,6 +145,7 @@ md-radio-button.md-accent.md-checked .md-label span {
 .nvd3.nv-pie .nv-pie-title {
   fill: rgb(68, 68, 68);
   font-weight: $font-weight-bold;
+  font-size: $font-size-large !important;
 }
 
 .nvtooltip {

src/app/views/partials/memory.html

@@ -0,0 +1,3 @@
+<md-content ng-controller="MemoryController as vm" class="md-padding" layout="row" layout-align="center center">
+    <nvd3 options="vm.chartOptions" data="vm.memoryChartData"></nvd3>
+</md-content>