mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
dashboard chart refactoring
This commit is contained in:
parent
4338caec36
commit
d5d7247c5d
3 changed files with 15 additions and 13 deletions
|
|
@ -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) {
|
||||||
|
|
|
||||||
1
src/app/pages/dashboard/pieChart/pieChart.loader.ts
Normal file
1
src/app/pages/dashboard/pieChart/pieChart.loader.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
require('easy-pie-chart/dist/jquery.easypiechart.js');
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue