diff --git a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts
index 8c04e80f..2f216615 100644
--- a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts
+++ b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts
@@ -1,51 +1,27 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {BaCard} from '../../../../theme/components';
+import {BaAmChart} from '../../../../theme/components';
-import {layoutPaths} from "../../../../theme/theme.constants";
import {BubbleMapsService} from "./bubbleMaps.service";
-require('ammap3');
-require('ammap3/ammap/maps/js/worldLow');
-// TODO: use baAmChart instead of this
@Component({
selector: 'bubble-maps',
pipes: [],
providers: [BubbleMapsService],
- // otherwise maps won't work
encapsulation: ViewEncapsulation.None,
- styles: [require('ammap3/ammap/ammap.css'), require('./bubbleMaps.scss')],
- directives: [BaCard],
+ directives: [BaCard, BaAmChart],
+ styles: [require('./bubbleMaps.scss')],
template: require('./bubbleMaps.html'),
})
export class BubbleMaps {
+ chartData:Object;
+
constructor(private _bubbleMapsService:BubbleMapsService) {
}
- ngAfterViewInit() {
- AmCharts.theme = this._bubbleMapsService.getTheme();
+ ngOnInit() {
- let map = new AmCharts.AmMap();
-
- map.addTitle('Population of the World in 2011', 14);
- map.addTitle('source: Gapminder', 11);
- map.areasSettings = {
- unlistedAreasColor: '#000000',
- unlistedAreasAlpha: 0.1
- };
- map.imagesSettings.balloonText = '[[title]]: [[value]]';
- map.pathToImages = layoutPaths.images.amMap;
-
- let dataProvider = {
- mapVar: AmCharts.maps.worldLow,
- images: []
- };
-
- map.dataProvider = this._bubbleMapsService.getDataProvider(dataProvider);
- map.export = {
- enabled: true
- };
-
- map.write('map-bubbles');
+ this.chartData = this._bubbleMapsService.getData();
}
}
diff --git a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.html b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.html
index 8307fbd4..5e20e6c8 100644
--- a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.html
+++ b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.html
@@ -1,3 +1,3 @@
-
+
diff --git a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.scss b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.scss
index 45295320..43e499df 100644
--- a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.scss
+++ b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.scss
@@ -1,4 +1,4 @@
-#map-bubbles {
+.bubble-maps {
width: 100%;
height: calc(100vh - 283px);
font-size : 11px;
diff --git a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
index 7c8ae94c..36761034 100644
--- a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
+++ b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
@@ -1,211 +1,10 @@
import {Injectable} from '@angular/core';
-import {layoutColors} from "../../../../theme/theme.constants";
+import {layoutColors, layoutPaths} from "../../../../theme/theme.constants";
@Injectable()
export class BubbleMapsService {
- theme = {
-
- themeName: "blur",
-
- AmChart: {
- color: layoutColors.defaultText,
- backgroundColor: "#FFFFFF"
- },
-
- AmCoordinateChart: {
- colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
- },
-
- AmStockChart: {
- colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
- },
-
- AmSlicedChart: {
- colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg],
- labelTickColor: "#FFFFFF",
- labelTickAlpha: 0.3
- },
-
- AmRectangularChart: {
- zoomOutButtonColor: '#FFFFFF',
- zoomOutButtonRollOverAlpha: 0.15,
- zoomOutButtonImage: "lens.png"
- },
-
- AxisBase: {
- axisColor: "#FFFFFF",
- axisAlpha: 0.3,
- gridAlpha: 0.1,
- gridColor: "#FFFFFF"
- },
-
- ChartScrollbar: {
- backgroundColor: "#FFFFFF",
- backgroundAlpha: 0.12,
- graphFillAlpha: 0.5,
- graphLineAlpha: 0,
- selectedBackgroundColor: "#FFFFFF",
- selectedBackgroundAlpha: 0.4,
- gridAlpha: 0.15
- },
-
- ChartCursor: {
- cursorColor: layoutColors.primary,
- color: "#FFFFFF",
- cursorAlpha: 0.5
- },
-
- AmLegend: {
- color: "#FFFFFF"
- },
-
- AmGraph: {
- lineAlpha: 0.9
- },
- GaugeArrow: {
- color: "#FFFFFF",
- alpha: 0.8,
- nailAlpha: 0,
- innerRadius: "40%",
- nailRadius: 15,
- startWidth: 15,
- borderAlpha: 0.8,
- nailBorderAlpha: 0
- },
-
- GaugeAxis: {
- tickColor: "#FFFFFF",
- tickAlpha: 1,
- tickLength: 15,
- minorTickLength: 8,
- axisThickness: 3,
- axisColor: '#FFFFFF',
- axisAlpha: 1,
- bandAlpha: 0.8
- },
-
- TrendLine: {
- lineColor: layoutColors.danger,
- lineAlpha: 0.8
- },
-
- // ammap
- AreasSettings: {
- alpha: 0.8,
- color: layoutColors.info,
- colorSolid: layoutColors.primaryDark,
- unlistedAreasAlpha: 0.4,
- unlistedAreasColor: "#FFFFFF",
- outlineColor: "#FFFFFF",
- outlineAlpha: 0.5,
- outlineThickness: 0.5,
- rollOverColor: layoutColors.primary,
- rollOverOutlineColor: "#FFFFFF",
- selectedOutlineColor: "#FFFFFF",
- selectedColor: "#f15135",
- unlistedAreasOutlineColor: "#FFFFFF",
- unlistedAreasOutlineAlpha: 0.5
- },
-
- LinesSettings: {
- color: "#FFFFFF",
- alpha: 0.8
- },
-
- ImagesSettings: {
- alpha: 0.8,
- labelColor: "#FFFFFF",
- color: "#FFFFFF",
- labelRollOverColor: layoutColors.primaryDark
- },
-
- ZoomControl: {
- buttonFillAlpha: 0.8,
- buttonIconColor: layoutColors.default,
- buttonRollOverColor: layoutColors.danger,
- buttonFillColor: layoutColors.primaryDark,
- buttonBorderColor: layoutColors.primaryDark,
- buttonBorderAlpha: 0,
- buttonCornerRadius: 0,
- gridColor: "#FFFFFF",
- gridBackgroundColor: "#FFFFFF",
- buttonIconAlpha: 0.6,
- gridAlpha: 0.6,
- buttonSize: 20
- },
-
- SmallMap: {
- mapColor: "#000000",
- rectangleColor: layoutColors.danger,
- backgroundColor: "#FFFFFF",
- backgroundAlpha: 0.7,
- borderThickness: 1,
- borderAlpha: 0.8
- },
-
- // the defaults below are set using CSS syntax, you can use any existing css property
- // if you don't use Stock chart, you can delete lines below
- PeriodSelector: {
- color: "#FFFFFF"
- },
-
- PeriodButton: {
- color: "#FFFFFF",
- background: "transparent",
- opacity: 0.7,
- border: "1px solid rgba(0, 0, 0, .3)",
- MozBorderRadius: "5px",
- borderRadius: "5px",
- margin: "1px",
- outline: "none",
- boxSizing: "border-box"
- },
-
- PeriodButtonSelected: {
- color: "#FFFFFF",
- backgroundColor: "#b9cdf5",
- border: "1px solid rgba(0, 0, 0, .3)",
- MozBorderRadius: "5px",
- borderRadius: "5px",
- margin: "1px",
- outline: "none",
- opacity: 1,
- boxSizing: "border-box"
- },
-
- PeriodInputField: {
- color: "#FFFFFF",
- background: "transparent",
- border: "1px solid rgba(0, 0, 0, .3)",
- outline: "none"
- },
-
- DataSetSelector: {
- color: "#FFFFFF",
- selectedBackgroundColor: "#b9cdf5",
- rollOverBackgroundColor: "#a8b0e4"
- },
-
- DataSetCompareList: {
- color: "#FFFFFF",
- lineHeight: "100%",
- boxSizing: "initial",
- webkitBoxSizing: "initial",
- border: "1px solid rgba(0, 0, 0, .3)"
- },
-
- DataSetSelect: {
- border: "1px solid rgba(0, 0, 0, .3)",
- outline: "none"
- }
- };
-
- getTheme() {
- return this.theme;
- }
-
- getDataProvider(dataProvider) {
+ getData() {
var latlong = {};
latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
@@ -637,6 +436,12 @@ export class BubbleMapsService {
}
}
+
+ let dataProvider = {
+ mapVar: AmCharts.maps.worldLow,
+ images: []
+ };
+
var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;
@@ -651,6 +456,8 @@ export class BubbleMapsService {
}
var size = Math.sqrt(square / (Math.PI * 2));
var id = dataItem.code;
+
+
dataProvider.images.push({
type: 'circle',
@@ -664,6 +471,28 @@ export class BubbleMapsService {
});
}
- return dataProvider;
+ return {
+ type: 'map',
+ theme: 'blur',
+ titles: [
+ {text: 'Population of the World in 2011', size: 14},
+ {text: 'source: Gapminder', size: 11}
+ ],
+ dataProvider: dataProvider,
+
+ areasSettings: {
+ unlistedAreasColor: '#000000',
+ unlistedAreasAlpha: 0.1
+ },
+
+ imagesSettings: {
+ balloonText: '[[title]]: [[value]]'
+ },
+
+ export: {
+ enabled: true
+ },
+ pathToImages: layoutPaths.images.amMap
+ };
}
}