dashboard chart refactoring

src/app/pages/dashboard/pieChart/pieChart.component.ts

@@ -1,7 +1,7 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
-import {BaCard} from '../../../theme/components';
 
-require('easy-pie-chart/dist/jquery.easypiechart.js');
+import {BaCard} from '../../../theme/components';
+import './pieChart.loader.ts';
 
 @Component({
   selector: 'pie-chart',
@@ -36,26 +36,27 @@ export class PieChart {
     }
   ];
 
-  init = false;
+  private _init = false;
 
   constructor() {
   }
 
   ngAfterViewInit() {
-    if (!this.init) {
-      this.loadPieCharts();
-      this.updatePieCharts();
-      this.init = true;
+    if (!this._init) {
+      this._loadPieCharts();
+      this._updatePieCharts();
+      this._init = true;
     }
   }
 
-  private loadPieCharts() {
+  private _loadPieCharts() {
 
     $('.chart').each(function () {
-      $('.chart').easyPieChart({
+      let chart = $(this);
+      chart.easyPieChart({
         easing: 'easeOutBounce',
         onStep: function (from, to, percent) {
-          $(this).find('.percent').text(Math.round(percent));
+          $(this.el).find('.percent').text(Math.round(percent));
         },
         barColor: $(this).attr('data-rel'),
         trackColor: 'rgba(0,0,0,0)',
@@ -68,8 +69,7 @@ export class PieChart {
     });
   }
 
-  private updatePieCharts() {
-
+  private _updatePieCharts() {
     let getRandomArbitrary = (min, max) => { return Math.random() * (max - min) + min };
 
     $('.pie-charts .chart').each(function(index, chart) {

src/app/pages/dashboard/pieChart/pieChart.loader.ts

@@ -0,0 +1 @@
+require('easy-pie-chart/dist/jquery.easypiechart.js');

src/app/pages/dashboard/pieChart/pieChart.scss

@@ -1,5 +1,5 @@
 @import "../../../theme/sass/conf/conf";
-//@import "../../../theme/sass/bootstrap-overrides/";
+
 .pie-charts {
   color: $default-text;
 
@@ -39,6 +39,7 @@
       position: absolute;
       right: 0;
       top: 3px;
+      z-index: -1;
     }
   }
   @media screen and