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

users map component

Browse source
This commit is contained in:
nixa 2016-05-04 19:08:05 +03:00
parent 21cd0bc433
commit cd13ee9105
8 changed files with 141 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/pages/dashboard/dashboard.component.ts
View file

@ -3,12 +3,13 @@ import {Component, ViewEncapsulation} from 'angular2/core';
import {PopularApp} from './popularApp';
import {PieChart} from './pieChart';
import {TrafficChart} from './trafficChart';
import {UsersMap} from './usersMap';
import {BaCard} from '../../theme/components';
@Component({
selector: 'dashboard',
pipes: [],
directives: [PopularApp, PieChart, TrafficChart, BaCard],
directives: [PopularApp, PieChart, TrafficChart, UsersMap, BaCard],
encapsulation: ViewEncapsulation.None,
styles: [require('./dashboard.scss')],
template: require('./dashboard.html')

9
src/app/pages/dashboard/dashboard.html
View file

@ -7,8 +7,13 @@
<div class="row">
<ba-card class="col-xl-6 col-lg-12 col-md-12 col-sm-12"
title="Acquisition Channels" baCardClass="traffic-panel medium-card">
<traffic-chart></traffic-chart>
</ba-card>
<traffic-chart></traffic-chart>
</ba-card>
<ba-card class="col-xl-6 col-lg-12 col-md-12 col-sm-12"
title="Users by Country" baCardClass="medium-card">
<users-map></users-map>
</ba-card>
</div>
<div class="row">

1
src/app/pages/dashboard/usersMap/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './usersMap.component';

26
src/app/pages/dashboard/usersMap/usersMap.component.ts Normal file
View file

@ -0,0 +1,26 @@
import {Component, ViewEncapsulation} from 'angular2/core';
import './usersMap.loader.ts';
import {UsersMapService} from './usersMap.service';
@Component({
selector: 'users-map',
encapsulation: ViewEncapsulation.None,
providers: [UsersMapService],
styles: [require('./usersMap.scss')],
template: require('./usersMap.html')
})
export class UsersMap {
constructor(private _usersMapService:UsersMapService) {
}
ngAfterViewInit() {
this._loadUsersMap();
}
// TODO: load proper AmCharts theme
private _loadUsersMap() {
AmCharts.makeChart('amChartMap', this._usersMapService.getData());
}
}

1
src/app/pages/dashboard/usersMap/usersMap.html Normal file
View file

@ -0,0 +1 @@
<div id="amChartMap"></div>

2
src/app/pages/dashboard/usersMap/usersMap.loader.ts Normal file
View file

@ -0,0 +1,2 @@
require('ammap3');
require('ammap3/ammap/maps/js/worldLow');

4
src/app/pages/dashboard/usersMap/usersMap.scss Normal file
View file

@ -0,0 +1,4 @@
#amChartMap {
width: 100%;
height: 315px;
}

98
src/app/pages/dashboard/usersMap/usersMap.service.ts Normal file
View file

@ -0,0 +1,98 @@
import {Injectable} from 'angular2/core';
import {layoutColors, layoutPaths} from '../../../theme';
@Injectable()
export class UsersMapService {
private _data = {
type: 'map',
theme: 'blur',
zoomControl: { zoomControlEnabled: false, panControlEnabled: false },
dataProvider: {
map: 'worldLow',
zoomLevel: 3.5,
zoomLongitude: 10,
zoomLatitude: 52,
areas: [
{ title: 'Austria', id: 'AT', color: layoutColors.primary, customData: '1 244', groupId: '1'},
{ title: 'Ireland', id: 'IE', color: layoutColors.primary, customData: '1 342', groupId: '1'},
{ title: 'Denmark', id: 'DK', color: layoutColors.primary, customData: '1 973', groupId: '1'},
{ title: 'Finland', id: 'FI', color: layoutColors.primary, customData: '1 573', groupId: '1'},
{ title: 'Sweden', id: 'SE', color: layoutColors.primary, customData: '1 084', groupId: '1'},
{ title: 'Great Britain', id: 'GB', color: layoutColors.primary, customData: '1 452', groupId: '1'},
{ title: 'Italy', id: 'IT', color: layoutColors.primary, customData: '1 321', groupId: '1'},
{ title: 'France', id: 'FR', color: layoutColors.primary, customData: '1 112', groupId: '1'},
{ title: 'Spain', id: 'ES', color: layoutColors.primary, customData: '1 865', groupId: '1'},
{ title: 'Greece', id: 'GR', color: layoutColors.primary, customData: '1 453', groupId: '1'},
{ title: 'Germany', id: 'DE', color: layoutColors.primary, customData: '1 957', groupId: '1'},
{ title: 'Belgium', id: 'BE', color: layoutColors.primary, customData: '1 011', groupId: '1'},
{ title: 'Luxembourg', id: 'LU', color: layoutColors.primary, customData: '1 011', groupId: '1'},
{ title: 'Netherlands', id: 'NL', color: layoutColors.primary, customData: '1 213', groupId: '1'},
{ title: 'Portugal', id: 'PT', color: layoutColors.primary, customData: '1 291', groupId: '1'},
{ title: 'Lithuania', id: 'LT', color: layoutColors.successLight, customData: '567', groupId: '2'},
{ title: 'Latvia', id: 'LV', color: layoutColors.successLight, customData: '589', groupId: '2'},
{ title: 'Czech Republic ', id: 'CZ', color: layoutColors.successLight, customData: '785', groupId: '2'},
{ title: 'Slovakia', id: 'SK', color: layoutColors.successLight, customData: '965', groupId: '2'},
{ title: 'Estonia', id: 'EE', color: layoutColors.successLight, customData: '685', groupId: '2'},
{ title: 'Hungary', id: 'HU', color: layoutColors.successLight, customData: '854', groupId: '2'},
{ title: 'Cyprus', id: 'CY', color: layoutColors.successLight, customData: '754', groupId: '2'},
{ title: 'Malta', id: 'MT', color: layoutColors.successLight, customData: '867', groupId: '2'},
{ title: 'Poland', id: 'PL', color: layoutColors.successLight, customData: '759', groupId: '2'},
{ title: 'Romania', id: 'RO', color: layoutColors.success, customData: '302', groupId: '3'},
{ title: 'Bulgaria', id: 'BG', color: layoutColors.success, customData: '102', groupId: '3'},
{ title: 'Slovenia', id: 'SI', color: layoutColors.danger, customData: '23', groupId: '4'},
{ title: 'Croatia', id: 'HR', color: layoutColors.danger, customData: '96', groupId: '4'}
]
},
areasSettings: {
rollOverOutlineColor: '#FFFFFF',
rollOverColor: layoutColors.primaryDark,
alpha: 0.8,
unlistedAreasAlpha: 0.1,
balloonText: '[[title]]: [[customData]] users'
},
legend: {
width: '100%',
marginRight: 27,
marginLeft: 27,
equalWidths: false,
backgroundAlpha: 0.5,
backgroundColor: '#FFFFFF',
borderColor: '#ffffff',
borderAlpha: 1,
top: 362,
left: 0,
horizontalGap: 10,
data: [
{
title: 'over 1 000 users',
color: layoutColors.primary
},
{
title: '500 - 1 000 users',
color: layoutColors.successLight
},
{
title: '100 - 500 users',
color: layoutColors.success
},
{
title: '0 - 100 users',
color: layoutColors.danger
}
]
},
export: {
enabled: true
},
creditsPosition: 'bottom-right',
pathToImages: layoutPaths.images.amChart
};
getData() {
return this._data;
}
}