diff --git a/src/app/pages/dashboard/pieChart/pieChart.component.ts b/src/app/pages/dashboard/pieChart/pieChart.component.ts index ced146e6..fa5394e0 100644 --- a/src/app/pages/dashboard/pieChart/pieChart.component.ts +++ b/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) { diff --git a/src/app/pages/dashboard/pieChart/pieChart.loader.ts b/src/app/pages/dashboard/pieChart/pieChart.loader.ts new file mode 100644 index 00000000..c5568b93 --- /dev/null +++ b/src/app/pages/dashboard/pieChart/pieChart.loader.ts @@ -0,0 +1 @@ +require('easy-pie-chart/dist/jquery.easypiechart.js'); diff --git a/src/app/pages/dashboard/pieChart/pieChart.scss b/src/app/pages/dashboard/pieChart/pieChart.scss index e44dfe8c..ee5b66b2 100644 --- a/src/app/pages/dashboard/pieChart/pieChart.scss +++ b/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