Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

traffic chart loader & service

Browse source
This commit is contained in:
nixa 2016-05-04 18:11:13 +03:00
parent 73e8ef5721
commit 4b3665007b
3 changed files with 67 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/app/pages/dashboard/trafficChart/trafficChart.component.ts
View file

@ -1,70 +1,33 @@
import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
import {layoutColors} from "../../../theme";
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import './trafficChart.loader.ts';
import {TrafficChartService} from './trafficChart.service';
@Component({
selector: 'traffic-chart',
encapsulation: ViewEncapsulation.None,
providers: [TrafficChartService],
styles: [require('./trafficChart.scss')],
template: require('./trafficChart.html')
})
export class TrafficChart {
palette = layoutColors.bgColorPalette;
doughnutData = [
{
value: 2000,
color: this.palette.white,
highlight: this.palette.whiteDark,
label: 'Ad Campaigns',
percentage: 87,
order: 0,
},
{
value: 400,
color: this.palette.gossip,
highlight: this.palette.gossipDark,
label: 'Other',
percentage: 17,
order: 1,
},
{
value: 1200,
color: this.palette.silverTree,
highlight: this.palette.silverTreeDark,
label: 'Direct Traffic',
percentage: 38,
order: 2,
},
{
value: 1000,
color: this.palette.surfieGreen,
highlight: this.palette.surfieGreenDark,
label: 'Referral Traffic',
percentage: 70,
order: 3,
},
{
value: 1500,
color: this.palette.blueStone,
highlight: this.palette.blueStoneDark,
label: 'Search engines',
percentage: 22,
order: 4,
}
];
public doughnutData: Array<Object>;
constructor(private _elementRef:ElementRef) {
constructor(private trafficChartService:TrafficChartService) {
this.doughnutData = trafficChartService.getData();
}
ngAfterViewInit() {
let el = DOM.querySelector(this._elementRef.nativeElement, '.chart-area');
this._loadDoughnutCharts();
}
private _loadDoughnutCharts() {
let el = $('.chart-area').get(0);
new Chart(el.getContext('2d')).Doughnut(this.doughnutData, {
segmentShowStroke: false,
percentageInnerCutout : 64,
responsive: true
});
}
}

1
src/app/pages/dashboard/trafficChart/trafficChart.loader.ts Normal file
View file

@ -0,0 +1 @@
require('chart.js');

54
src/app/pages/dashboard/trafficChart/trafficChart.service.ts Normal file
View file

@ -0,0 +1,54 @@
import {Injectable} from 'angular2/core';
import {layoutColors} from '../../../theme';
@Injectable()
export class TrafficChartService {
private _palette = layoutColors.bgColorPalette;
private _data = [
{
value: 2000,
color: this._palette.white,
highlight: this._palette.whiteDark,
label: 'Ad Campaigns',
percentage: 87,
order: 0,
},
{
value: 400,
color: this._palette.gossip,
highlight: this._palette.gossipDark,
label: 'Other',
percentage: 17,
order: 1,
},
{
value: 1200,
color: this._palette.silverTree,
highlight: this._palette.silverTreeDark,
label: 'Direct Traffic',
percentage: 38,
order: 2,
},
{
value: 1000,
color: this._palette.surfieGreen,
highlight: this._palette.surfieGreenDark,
label: 'Referral Traffic',
percentage: 70,
order: 3,
},
{
value: 1500,
color: this._palette.blueStone,
highlight: this._palette.blueStoneDark,
label: 'Search engines',
percentage: 22,
order: 4,
}
];
getData() {
return this._data;
}
}