users map component

src/app/pages/dashboard/dashboard.component.ts

@@ -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')

src/app/pages/dashboard/dashboard.html

@@ -9,6 +9,11 @@
                      title="Acquisition Channels" baCardClass="traffic-panel medium-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">

src/app/pages/dashboard/usersMap/index.ts

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

src/app/pages/dashboard/usersMap/usersMap.component.ts

@@ -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());
+  }
+}

src/app/pages/dashboard/usersMap/usersMap.html

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

src/app/pages/dashboard/usersMap/usersMap.loader.ts

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

src/app/pages/dashboard/usersMap/usersMap.scss

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

src/app/pages/dashboard/usersMap/usersMap.service.ts

@@ -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;
+  }
+}