dashboard chart refactoring

This commit is contained in:
nixa 2016-05-04 17:57:34 +03:00
parent 4338caec36
commit d5d7247c5d
3 changed files with 15 additions and 13 deletions

View file

@ -1,7 +1,7 @@
import {Component, ViewEncapsulation} from 'angular2/core'; 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({ @Component({
selector: 'pie-chart', selector: 'pie-chart',
@ -36,26 +36,27 @@ export class PieChart {
} }
]; ];
init = false; private _init = false;
constructor() { constructor() {
} }
ngAfterViewInit() { ngAfterViewInit() {
if (!this.init) { if (!this._init) {
this.loadPieCharts(); this._loadPieCharts();
this.updatePieCharts(); this._updatePieCharts();
this.init = true; this._init = true;
} }
} }
private loadPieCharts() { private _loadPieCharts() {
$('.chart').each(function () { $('.chart').each(function () {
$('.chart').easyPieChart({ let chart = $(this);
chart.easyPieChart({
easing: 'easeOutBounce', easing: 'easeOutBounce',
onStep: function (from, to, percent) { 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'), barColor: $(this).attr('data-rel'),
trackColor: 'rgba(0,0,0,0)', 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 }; let getRandomArbitrary = (min, max) => { return Math.random() * (max - min) + min };
$('.pie-charts .chart').each(function(index, chart) { $('.pie-charts .chart').each(function(index, chart) {

View file

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

View file

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