mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
bubble maps component refactoring
This commit is contained in:
nixa
parent
49b545ec32
commit
17846aa08a
4 changed files with 42 additions and 237 deletions
|
|
@ -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 = '<span style="font-size:14px;"><b>[[title]]</b>: [[value]]</span>';
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<ba-card title="Map with bubbles">
|
||||
<div id="map-bubbles" class="bubble-maps"></div>
|
||||
<ba-am-chart baAmChartClass="bubble-maps" [baAmChartConfiguration]="chartData"></ba-am-chart>
|
||||
</ba-card>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#map-bubbles {
|
||||
.bubble-maps {
|
||||
width: 100%;
|
||||
height: calc(100vh - 283px);
|
||||
font-size : 11px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -652,6 +457,8 @@ export class BubbleMapsService {
|
|||
var size = Math.sqrt(square / (Math.PI * 2));
|
||||
var id = dataItem.code;
|
||||
|
||||
|
||||
|
||||
dataProvider.images.push({
|
||||
type: 'circle',
|
||||
width: size,
|
||||
|
|
@ -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: '<span style="font-size:14px;"><b>[[title]]</b>: [[value]]</span>'
|
||||
},
|
||||
|
||||
export: {
|
||||
enabled: true
|
||||
},
|
||||
pathToImages: layoutPaths.images.amMap
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue