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

fix(demo): refactor js theme using

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-01 15:42:06 +03:00
parent 672615b710
commit b772882cd6
28 changed files with 561 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

230
src/app/@theme/styles/theme.cosmic.ts
View file

@ -2,152 +2,122 @@ export const COSMIC_THEME = {
name: 'cosmic',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#31ffad',
tempColorBlue: '#2ec7fe',
tempColorYellow: '#fff024',
tempColorOrange: '#f7bd59',
solarColorDarkGreen: '#19977E',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#000000',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#bdbaff',
trafficShadowLineDarkBg: '#a695ff',
trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
trafficGradTo: 'rgba(164, 84, 255, 0.5)',
temperature: [
'#2ec7fe',
'#31ffad',
'#7bff24',
'#fff024',
'#f7bd59',
],
electricityAxisColor: '#a1a1e5',
electricityLineGradFrom: '#00ffaa',
electricityLineGradTo: '#fff835',
electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
solar: {
color: '#19977E',
shadowColor: 'rgba(0, 217, 119, 0.3)',
gradientLeft: '#7bff24',
gradientRight: '#2ec7fe',
},
bubbleMapTitleColor: '#ffffff',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2c2961',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#654ddb',
traffic: {
colorBlack: '#000000',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
lineBg: 'rgba(146, 141, 255, 0.5)',
shadowLineBg: '#bdbaff',
shadowLineDarkBg: '#a695ff',
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
gradFrom: 'rgba(118, 89, 255, 0.4)',
gradTo: 'rgba(164, 84, 255, 0.5)',
},
echartsBackgroundColor: '#363175',
electricity: {
tooltipBg: 'rgba(0, 255, 170, 0.35)',
axisColor: '#a1a1e5',
lineGradFrom: '#00ffaa',
lineGradTo: '#fff835',
lineShadow: 'rgba(14, 16, 48, 0.4)',
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
areaGradTo: 'rgba(188, 92, 255, 0)',
shadowLineDarkBg: '#a695ff',
},
echartsPieColor1: 'rgb(168, 56, 93)',
echartsPieColor2: 'rgb(122, 163, 229)',
echartsPieColor3: 'rgb(170, 227, 245)',
echartsPieColor4: 'rgb(173, 205, 237)',
echartsPieColor5: 'rgb(162, 126, 168)',
echartsPieLegendTextColor: 'white',
echartsPieItemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
bubbleMap: {
titleColor: '#ffffff',
geoColors: ['#e6b045', '#0088ff', '#ff386a', '#00d977', '#7659ff', '#24dec8'],
areaColor: '#2c2961',
areaHoverColor: '#a1a1e5',
areaBorderColor: '#654ddb',
},
echartsBarColor1: '#3398DB',
echartsBarXAxisLineColor: 'white',
echartsBarYAxisLineColor: 'white',
echarts: {
bg: '#363175',
legendTextColor: 'white',
xAxisLineColor: 'white',
yAxisLineColor: 'white',
echartsLineColor1: 'red',
echartsLineColor2: 'black',
echartsLineColor3: 'white',
echartsLineLegendTextColor: 'white',
echartsLineXAxisLineColor: 'white',
echartsLineYAxisLineColor: 'white',
pie: {
colors: [
'rgb(168, 56, 93)',
'rgb(122, 163, 229)',
'rgb(170, 227, 245)',
'rgb(173, 205, 237)',
'rgb(162, 126, 168)',
],
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
},
echartsMultipleXAxisColor1: '#5793f3',
echartsMultipleXAxisColor2: '#d14a61',
echartsMultipleXAxisColor3: '#675bba',
echartsMultipleXAxisLegendTextColor: 'white',
echartsMultipleXAxisYAxisLineColor: 'white',
bar: {
color: '#3398DB',
},
echartsAreaStackColor1: 'red',
echartsAreaStackColor2: 'blue',
echartsAreaStackColor3: 'purple',
echartsAreaStackColor4: 'yellow',
echartsAreaStackColor5: 'pink',
echartsAreaStackLegendTextColor: 'white',
echartsAreaStackXAxisLineColor: 'white',
echartsAreaStackYAxisLineColor: 'white',
echartsAreaStackTooltipBackgroundColor: '#6a7985',
barAnimation: {
colors: ['red', 'white'],
},
echartsBarAnimationColor1: 'red',
echartsBarAnimationColor2: 'white',
echartsBarAnimationLegendTextColor: 'white',
echartsBarAnimationXAxisLineColor: 'white',
echartsBarAnimationYAxisLineColor: 'white',
line: {
colors: ['red', 'black', 'white'],
},
echartsRadarColor1: 'red',
echartsRadarColor2: 'white',
echartsRadarLegendTextColor: 'white',
echartsRadarNameTextColor: 'white',
echartsRadarSplitAreaStyleColor: 'transparent',
multipleLine: {
colors: ['#5793f3', '#d14a61', '#675bba'],
},
chartjsPieXAxisColor: 'rgba(148,159,177,1)',
chartjsPieYAxisColor: 'rgba(148,159,177,1)',
chartjsPieTickColor: 'white',
chartjsPieLegendTextColor: 'white',
areaStack: {
colors: ['red', 'blue', 'purple', 'yellow', 'pink'],
tooltipBackgroundColor: '#6a7985',
},
chartjsBarXAxisColor: 'rgba(148,159,177,1)',
chartjsBarYAxisColor: 'rgba(148,159,177,1)',
chartjsBarTickColor: 'white',
chartjsBarLegendTextColor: 'white',
radar: {
colors: ['red', 'white'],
nameTextColor: 'white',
splitAreaStyleColor: 'transparent',
},
},
chartjsLineXAxisColor: 'rgba(148,159,177,1)',
chartjsLineYAxisColor: 'rgba(148,159,177,1)',
chartjsLineTickColor: 'white',
chartjsLineLegendTextColor: 'white',
chartjs: {
xAxisColor: 'rgba(148,159,177,1)',
yAxisColor: 'rgba(148,159,177,1)',
tickColor: 'white',
legendTextColor: 'white',
chartjsMultipleXAxisXAxisColor: 'rgba(148,159,177,1)',
chartjsMultipleXAxisYAxisColor: 'rgba(148,159,177,1)',
chartjsMultipleXAxisTickColor: 'white',
chartjsMultipleXAxisLegendTextColor: 'white',
barHorizontal: {
colors: ['red', 'blue'],
},
chartjsBarHorizontalColor1: 'red',
chartjsBarHorizontalColor2: 'blue',
chartjsBarHorizontalXAxisColor: 'rgba(148,159,177,1)',
chartjsBarHorizontalYAxisColor: 'rgba(148,159,177,1)',
chartjsBarHorizontalTickColor: 'white',
chartjsBarHorizontalLegendTextColor: 'white',
radar: {
colors: ['red', 'blue'],
scaleGridLinesColor: 'white',
scaleAngleLinesColor: 'white',
pointLabelFontColor: 'white',
},
},
chartjsRadarColor1: 'red',
chartjsRadarColor2: 'blue',
chartjsRadarLegendTextColor: 'white',
chartjsRadarScaleGridLinesColor: 'white',
chartjsRadarScaleAngleLinesColor: 'white',
chartjsRadarPointLabelFontColor: 'white',
d3PieColor1: '#5AA454',
d3PieColor2: '#A10A28',
d3PieColor3: '#C7B42C',
d3PieColor4: '#AAAAAA',
d3BarColor1: '#5AA454',
d3BarColor2: '#A10A28',
d3BarColor3: '#C7B42C',
d3BarColor4: '#AAAAAA',
d3LineColor1: '#5AA454',
d3LineColor2: '#A10A28',
d3LineColor3: '#C7B42C',
d3LineColor4: '#AAAAAA',
d3AdvancedPieColor1: '#5AA454',
d3AdvancedPieColor2: '#A10A28',
d3AdvancedPieColor3: '#C7B42C',
d3AdvancedPieColor4: '#AAAAAA',
d3AreaStackColor1: '#5AA454',
d3AreaStackColor2: '#A10A28',
d3AreaStackColor3: '#C7B42C',
d3AreaStackColor4: '#AAAAAA',
d3PolarColor1: '#5AA454',
d3PolarColor2: '#A10A28',
d3PolarColor3: '#C7B42C',
d3PolarColor4: '#AAAAAA',
d3: {
pie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
bar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
line: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
advancedPie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
areaStack: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
polar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
},
},
};

141
src/app/@theme/styles/theme.default.ts
View file

@ -1,40 +1,117 @@
export const DEFAULT_THEME = {
name: 'default',
base: 'default',
base: null,
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#7bff24',
tempColorBlue: '#7bff24',
tempColorYellow: '#7bff24',
tempColorOrange: '#7bff24',
solarColorDarkGreen: '#7bff24',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#7bff24',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#7bff24',
trafficShadowLineDarkBg: '#7bff24',
trafficShadowLineShadow: '#7bff24',
trafficGradFrom: '#7bff24',
trafficGradTo: '#7bff24',
temperature: ['#7bff24', '#31ffad', '#2ec7fe', '#fff024', '#f7bd59'],
electricityAxisColor: '#7bff24',
electricityLineGradFrom: '#7bff24',
electricityLineGradTo: '#7bff24',
electricityLineShadow: '#7bff24',
electricityAreaGradFrom: '#7bff24',
electricityAreaGradTo: '#7bff24',
solar: {
color: '#19977E',
shadowColor: 'rgba(0, 217, 119, 0.3)',
gradientLeft: '#7bff24',
gradientRight: '#2ec7fe',
},
bubbleMapTitleColor: '#333333',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2f3234',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#dddddd',
traffic: {
colorBlack: '#000000',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
lineBg: 'rgba(146, 141, 255, 0.5)',
shadowLineBg: '#bdbaff',
shadowLineDarkBg: '#a695ff',
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
gradFrom: 'rgba(118, 89, 255, 0.4)',
gradTo: 'rgba(164, 84, 255, 0.5)',
},
electricity: {
tooltipBg: 'rgba(0, 255, 170, 0.35)',
axisColor: '#a1a1e5',
lineGradFrom: '#00ffaa',
lineGradTo: '#fff835',
lineShadow: 'rgba(14, 16, 48, 0.4)',
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
areaGradTo: 'rgba(188, 92, 255, 0)',
shadowLineDarkBg: '#a695ff',
},
bubbleMap: {
titleColor: '#ffffff',
geoColors: ['#e6b045', '#0088ff', '#ff386a', '#00d977', '#7659ff', '#24dec8'],
areaColor: '#2c2961',
areaHoverColor: '#a1a1e5',
areaBorderColor: '#654ddb',
},
echarts: {
bg: '#363175',
legendTextColor: 'white',
xAxisLineColor: 'white',
yAxisLineColor: 'white',
pie: {
colors: [
'rgb(168, 56, 93)',
'rgb(122, 163, 229)',
'rgb(170, 227, 245)',
'rgb(173, 205, 237)',
'rgb(162, 126, 168)',
],
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
},
bar: {
color: '#3398DB',
},
barAnimation: {
colors: ['red', 'white'],
},
line: {
colors: ['red', 'black', 'white'],
},
multipleLine: {
colors: ['#5793f3', '#d14a61', '#675bba'],
},
areaStack: {
colors: ['red', 'blue', 'purple', 'yellow', 'pink'],
tooltipBackgroundColor: '#6a7985',
},
radar: {
colors: ['red', 'white'],
nameTextColor: 'white',
splitAreaStyleColor: 'transparent',
},
},
chartjs: {
xAxisColor: 'rgba(148,159,177,1)',
yAxisColor: 'rgba(148,159,177,1)',
tickColor: 'white',
legendTextColor: 'white',
barHorizontal: {
colors: ['red', 'blue'],
},
radar: {
colors: ['red', 'blue'],
scaleGridLinesColor: 'white',
scaleAngleLinesColor: 'white',
pointLabelFontColor: 'white',
},
},
d3: {
pie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
bar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
line: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
advancedPie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
areaStack: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
polar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
},
},
};

2
src/app/@theme/theme.module.ts
View file

@ -63,7 +63,7 @@ const PIPES = [CapitalizePipe, PluralPipe, RoundPipe];
const NGA_THEME_PROVIDERS = [
...NgaThemeModule.forRoot(
{
name: 'cosmic',
name: 'default',
},
[DEFAULT_THEME, COSMIC_THEME],
).providers,

21
src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts
View file

@ -28,11 +28,14 @@ export class ChartjsBarHorizontalComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartData = [
{
label: 'Dataset 1',
backgroundColor: config.chartjsBarHorizontalColor1,
borderColor: config.chartjsBarHorizontalColor1,
backgroundColor: chartjs.barHorizontal.colors[0],
borderColor: chartjs.barHorizontal.colors[0],
borderWidth: 1,
data: [
this.randomScalingFactor(),
@ -46,8 +49,8 @@ export class ChartjsBarHorizontalComponent {
},
{
label: 'Dataset 2',
backgroundColor: config.chartjsBarHorizontalColor2,
borderColor: config.chartjsBarHorizontalColor2,
backgroundColor: chartjs.barHorizontal.colors[1],
borderColor: chartjs.barHorizontal.colors[1],
data: [
this.randomScalingFactor(),
this.randomScalingFactor(),
@ -74,10 +77,10 @@ export class ChartjsBarHorizontalComponent {
{
gridLines: {
display: true,
color: config.chartjsBarHorizontalXAxisColor,
color: chartjs.xAxisColor,
},
ticks: {
fontColor: config.chartjsBarHorizontalTickColor,
fontColor: chartjs.tickColor,
},
},
],
@ -85,10 +88,10 @@ export class ChartjsBarHorizontalComponent {
{
gridLines: {
display: true,
color: config.chartjsBarHorizontalYAxisColor,
color: chartjs.yAxisColor,
},
ticks: {
fontColor: config.chartjsBarHorizontalTickColor,
fontColor: chartjs.tickColor,
},
},
],
@ -96,7 +99,7 @@ export class ChartjsBarHorizontalComponent {
legend: {
position: 'right',
labels: {
fontColor: config.chartjsBarHorizontalLegendTextColor,
fontColor: chartjs.legendTextColor,
},
},
};

13
src/app/pages/charts/chartjs/chartjs-bar.component.ts
View file

@ -31,12 +31,15 @@ export class ChartjsBarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = {
scaleShowVerticalLines: false,
responsive: true,
legend: {
labels: {
fontColor: config.chartjsBarLegendTextColor,
fontColor: chartjs.legendTextColor,
},
},
scales: {
@ -44,10 +47,10 @@ export class ChartjsBarComponent {
{
gridLines: {
display: true,
color: config.chartjsBarXAxisColor,
color: chartjs.xAxisColor,
},
ticks: {
fontColor: config.chartjsBarTickColor,
fontColor: chartjs.tickColor,
},
},
],
@ -55,10 +58,10 @@ export class ChartjsBarComponent {
{
gridLines: {
display: true,
color: config.chartjsBarYAxisColor,
color: chartjs.yAxisColor,
},
ticks: {
fontColor: config.chartjsBarTickColor,
fontColor: chartjs.tickColor,
},
},
],

13
src/app/pages/charts/chartjs/chartjs-line.component.ts
View file

@ -32,6 +32,9 @@ export class ChartjsLineComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = {
responsive: true,
scales: {
@ -39,10 +42,10 @@ export class ChartjsLineComponent {
{
gridLines: {
display: true,
color: config.chartjsLineXAxisColor,
color: chartjs.xAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
fontColor: chartjs.tickColor,
},
},
],
@ -50,17 +53,17 @@ export class ChartjsLineComponent {
{
gridLines: {
display: true,
color: config.chartjsLineYAxisColor,
color: chartjs.yAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
fontColor: chartjs.tickColor,
},
},
],
},
legend: {
labels: {
fontColor: config.chartjsLineLegendTextColor,
fontColor: chartjs.legendTextColor,
},
},
};

13
src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts
View file

@ -96,12 +96,15 @@ export class ChartjsMultipleXaxisComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = {
responsive: true,
legend: {
position: 'bottom',
labels: {
fontColor: config.chartjsLineLegendTextColor,
fontColor: chartjs.legendTextColor,
},
},
hover: {
@ -117,10 +120,10 @@ export class ChartjsMultipleXaxisComponent {
},
gridLines: {
display: true,
color: config.chartjsLineXAxisColor,
color: chartjs.xAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
fontColor: chartjs.tickColor,
},
},
],
@ -133,10 +136,10 @@ export class ChartjsMultipleXaxisComponent {
},
gridLines: {
display: true,
color: config.chartjsLineXAxisColor,
color: chartjs.xAxisColor,
},
ticks: {
fontColor: config.chartjsLineTickColor,
fontColor: chartjs.tickColor,
},
},
],

19
src/app/pages/charts/chartjs/chartjs-pie.component.ts
View file

@ -26,17 +26,26 @@ export class ChartjsPieComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = {
responsive: true,
scale: {
pointLabels: {
fontSize: 14,
fontColor: chartjs.legendTextColor,
},
},
scales: {
xAxes: [
{
gridLines: {
display: true,
color: config.chartjsPieXAxisColor,
color: chartjs.xAxisColor,
},
ticks: {
fontColor: config.chartjsPitTickColor,
fontColor: chartjs.tickColor,
},
},
],
@ -44,17 +53,17 @@ export class ChartjsPieComponent {
{
gridLines: {
display: true,
color: config.chartjsPieYAxisColor,
color: chartjs.yAxisColor,
},
ticks: {
fontColor: config.chartjsPieTickColor,
fontColor: chartjs.tickColor,
},
},
],
},
legend: {
labels: {
fontColor: config.chartjsPieLegendTextColor,
fontColor: chartjs.legendTextColor,
},
},
};

19
src/app/pages/charts/chartjs/chartjs-radar.component.ts
View file

@ -26,18 +26,21 @@ export class ChartjsRadarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartData = [
{
data: [65, 59, 90, 81, 56, 55, 40],
label: 'Series A',
borderColor: config.chartjsRadarColor1,
backgroundColor: config.chartjsRadarColor1,
borderColor: chartjs.radar.colors[0],
backgroundColor: chartjs.radar.colors[0],
},
{
data: [28, 48, 40, 19, 96, 27, 100],
label: 'Series B',
borderColor: config.chartjsRadarColor2,
backgroundColor: config.chartjsRadarColor2,
borderColor: chartjs.radar.colors[1],
backgroundColor: chartjs.radar.colors[1],
},
];
@ -45,19 +48,19 @@ export class ChartjsRadarComponent {
scaleFontColor: 'white',
legend: {
labels: {
fontColor: config.chartjsRadarLegendTextColor,
fontColor: chartjs.legendTextColor,
},
},
scale: {
pointLabels: {
fontSize: 14,
fontColor: config.chartjsRadarPointLabelFontColor,
fontColor: chartjs.radar.pointLabelFontColor,
},
gridLines: {
color: config.chartjsRadarScaleGridLinesColor,
color: chartjs.radar.scaleGridLinesColor,
},
angleLines: {
color: config.chartjsRadarScaleAngleLinesColor,
color: chartjs.radar.scaleAngleLinesColor,
},
},
};

7
src/app/pages/charts/d3/d3-advanced-pie.component.ts
View file

@ -32,12 +32,7 @@ export class D3AdvancedPieComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [
config.d3AdvancedPieColor1,
config.d3AdvancedPieColor2,
config.d3AdvancedPieColor3,
config.d3AdvancedPieColor4,
],
domain: (<any>config.variables.d3).advancedPie,
};
});
}

7
src/app/pages/charts/d3/d3-area-stack.component.ts
View file

@ -77,12 +77,7 @@ export class D3AreaStackComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [
config.d3AreaStackColor1,
config.d3AreaStackColor2,
config.d3AreaStackColor3,
config.d3AreaStackColor4,
],
domain: (<any>config.variables.d3).areaStack,
};
});
}

2
src/app/pages/charts/d3/d3-bar.component.ts
View file

@ -47,7 +47,7 @@ export class D3BarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3BarColor1, config.d3BarColor2, config.d3BarColor3, config.d3BarColor4],
domain: (<any>config.variables.d3).bar,
};
});
}

2
src/app/pages/charts/d3/d3-line.component.ts
View file

@ -74,7 +74,7 @@ export class D3LineComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3LineColor1, config.d3LineColor2, config.d3LineColor3, config.d3LineColor4],
domain: (<any>config.variables.d3).line,
};
});
}

2
src/app/pages/charts/d3/d3-pie.component.ts
View file

@ -42,7 +42,7 @@ export class D3PieComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3PieColor1, config.d3PieColor2, config.d3PieColor3, config.d3PieColor4],
domain: (<any>config.variables.d3).pie,
};
});
}

2
src/app/pages/charts/d3/d3-polar.component.ts
View file

@ -87,7 +87,7 @@ export class D3PolarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3PolarColor1, config.d3PolarColor2, config.d3PolarColor3, config.d3PolarColor4],
domain: (<any>config.variables.d3).polar,
};
});
}

21
src/app/pages/charts/echarts/echarts-area-stack.component.ts
View file

@ -12,28 +12,25 @@ export class EchartsAreaStackComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [
config.echartsAreaStackColor1,
config.echartsAreaStackColor2,
config.echartsAreaStackColor3,
config.echartsAreaStackColor4,
config.echartsAreaStackColor5,
],
backgroundColor: echarts.bg,
color: echarts.areaStack.colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: config.echartsAreaStackTooltipBackgroundColor,
backgroundColor: echarts.areaStack.tooltipBackgroundColor,
},
},
},
legend: {
data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
textStyle: {
color: config.echartsAreaStackLegendTextColor,
color: echarts.legendTextColor,
},
},
grid: {
@ -49,7 +46,7 @@ export class EchartsAreaStackComponent {
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisLine: {
lineStyle: {
color: config.echartsAreaStackXAxisLineColor,
color: echarts.xAxisLineColor,
},
},
},
@ -59,7 +56,7 @@ export class EchartsAreaStackComponent {
type: 'value',
axisLine: {
lineStyle: {
color: config.echartsAreaStackYAxisLineColor,
color: echarts.yAxisLineColor,
},
},
},

12
src/app/pages/charts/echarts/echarts-bar-animation.component.ts
View file

@ -16,14 +16,16 @@ export class EchartsBarAnimationComponent {
const data1 = [];
const data2 = [];
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsBarAnimationColor1, config.echartsBarAnimationColor2],
backgroundColor: echarts.bg,
color: [echarts.barAnimation.colors],
legend: {
data: ['bar', 'bar2'],
align: 'left',
textStyle: {
color: config.echartsBarAnimationLegendTextColor,
color: echarts.legendTextColor,
},
},
xAxis: {
@ -34,14 +36,14 @@ export class EchartsBarAnimationComponent {
},
axisLine: {
lineStyle: {
color: config.echartsBarAnimationXAxisLineColor,
color: echarts.xAxisLineColor,
},
},
},
yAxis: {
axisLine: {
lineStyle: {
color: config.echartsBarAnimationYAxisLineColor,
color: echarts.yAxisLineColor,
},
},
},

11
src/app/pages/charts/echarts/echarts-bar.component.ts
View file

@ -12,9 +12,12 @@ export class EchartsBarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsBarColor1],
backgroundColor: echarts.bg,
color: [echarts.bar.color],
tooltip: {
trigger: 'axis',
axisPointer: {
@ -36,7 +39,7 @@ export class EchartsBarComponent {
},
axisLine: {
lineStyle: {
color: config.echartsBarXAxisLineColor,
color: echarts.xAxisLineColor,
},
},
},
@ -46,7 +49,7 @@ export class EchartsBarComponent {
type: 'value',
axisLine: {
lineStyle: {
color: config.echartsBarYAxisLineColor,
color: echarts.yAxisLineColor,
},
},
},

13
src/app/pages/charts/echarts/echarts-line.component.ts
View file

@ -12,9 +12,12 @@ export class EchartsLineComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsLineColor1, config.echartsLineColor2, config.echartsLineColor3],
backgroundColor: echarts.bg,
color: [echarts.line.colors],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}',
@ -23,7 +26,7 @@ export class EchartsLineComponent {
left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: {
color: config.echartsLineLegendTextColor,
color: echarts.legendTextColor,
},
},
xAxis: {
@ -33,7 +36,7 @@ export class EchartsLineComponent {
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisLine: {
lineStyle: {
color: config.echartsLineXAxisLineColor,
color: echarts.xAxisLineColor,
},
},
},
@ -48,7 +51,7 @@ export class EchartsLineComponent {
name: 'y',
axisLine: {
lineStyle: {
color: config.echartsLineYAxisLineColor,
color: echarts.yAxisLineColor,
},
},
},

19
src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts
View file

@ -12,15 +12,12 @@ export class EchartsMultipleXaxisComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors = [
config.echartsMultipleXAxisColor1,
config.echartsMultipleXAxisColor2,
config.echartsMultipleXAxisColor3,
];
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: colors,
backgroundColor: echarts.bg,
color: echarts.multipleLine.colors,
tooltip: {
trigger: 'none',
axisPointer: {
@ -30,7 +27,7 @@ export class EchartsMultipleXaxisComponent {
legend: {
data: ['2015 Precipitation', '2016 Precipitation'],
textStyle: {
color: config.echartsMultipleXAxisLegendTextColor,
color: echarts.legendTextColor,
},
},
grid: {
@ -46,7 +43,7 @@ export class EchartsMultipleXaxisComponent {
axisLine: {
onZero: false,
lineStyle: {
color: colors[1],
color: echarts.multipleLine.colors[1],
},
},
axisPointer: {
@ -81,7 +78,7 @@ export class EchartsMultipleXaxisComponent {
axisLine: {
onZero: false,
lineStyle: {
color: colors[0],
color: echarts.multipleLine.colors[0],
},
},
axisPointer: {
@ -114,7 +111,7 @@ export class EchartsMultipleXaxisComponent {
type: 'value',
axisLine: {
lineStyle: {
color: config.echartsMultipleXAxisYAxisLineColor,
color: echarts.yAxisLineColor,
},
},
},

17
src/app/pages/charts/echarts/echarts-pie.component.ts
View file

@ -12,15 +12,12 @@ export class EchartsPieComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [
config.echartsPieColor1,
config.echartsPieColor2,
config.echartsPieColor3,
config.echartsPieColor4,
config.echartsPieColor5,
],
backgroundColor: echarts.bg,
color: echarts.pie.colors,
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
@ -30,7 +27,7 @@ export class EchartsPieComponent {
left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: {
color: config.echartsPieLegendTextColor,
color: echarts.legendTextColor,
},
},
series: [
@ -65,7 +62,7 @@ export class EchartsPieComponent {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: config.echartsPieItemHoverShadowColor,
shadowColor: echarts.pie.itemHoverShadowColor,
},
},
},

13
src/app/pages/charts/echarts/echarts-radar.component.ts
View file

@ -12,20 +12,23 @@ export class EchartsRadarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsRadarColor1, config.echartsRadarColor2],
backgroundColor: echarts.bg,
color: echarts.radar.colors,
tooltip: {},
legend: {
data: ['Allocated Budget', 'Actual Spending'],
textStyle: {
color: config.echartsRadarLegendTextColor,
color: echarts.legendTextColor,
},
},
radar: {
name: {
textStyle: {
color: config.echartsRadarNameTextColor,
color: echarts.radar.nameTextColor,
},
},
indicator: [
@ -43,7 +46,7 @@ export class EchartsRadarComponent {
// },
splitArea: {
areaStyle: {
color: config.echartsRadarSplitAreaStyleColor,
color: echarts.radar.splitAreaStyleColor,
},
},
},

31
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -27,6 +27,9 @@ export class ElectricityChartComponent {
}));
this.theme.getJsTheme().subscribe(config => {
const eTheme: any = config.variables.electricity;
this.option = {
grid: {
left: 0,
@ -43,11 +46,11 @@ export class ElectricityChartComponent {
},
},
position: 'top',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
backgroundColor: eTheme.tooltipBg,
borderColor: config.variables.colorSuccess,
borderWidth: 3,
formatter: '{c0} kWh',
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
extraCssText: `box-shadow: 0px 2px 46px 0 ${eTheme.tooltipBg};border-radius: 10px;padding: 5px 20px;`,
},
xAxis: {
type: 'category',
@ -59,13 +62,13 @@ export class ElectricityChartComponent {
},
axisLabel: {
textStyle: {
color: config.electricityAxisColor,
color: eTheme.axisColor,
fontSize: 18,
},
},
axisLine: {
lineStyle: {
color: config.electricityAxisColor,
color: eTheme.axisColor,
opacity: 0.3,
width: '2',
},
@ -85,7 +88,7 @@ export class ElectricityChartComponent {
splitLine: {
show: true,
lineStyle: {
color: config.electricityAxisColor,
color: eTheme.axisColor,
opacity: 0.2,
width: '1',
},
@ -112,12 +115,12 @@ export class ElectricityChartComponent {
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.electricityLineGradFrom,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: config.electricityLineGradTo,
color: eTheme.lineGradTo,
}]),
shadowColor: config.electricityLineShadow,
shadowColor: eTheme.lineShadow,
shadowBlur: 6,
shadowOffsetY: 12,
},
@ -126,10 +129,10 @@ export class ElectricityChartComponent {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.electricityAreaGradFrom,
color: eTheme.areaGradFrom,
}, {
offset: 1,
color: config.electricityAreaGradTo,
color: eTheme.areaGradTo,
}]),
},
},
@ -146,12 +149,12 @@ export class ElectricityChartComponent {
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.electricityLineGradFrom,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: config.electricityLineGradTo,
color: eTheme.lineGradTo,
}]),
shadowColor: config.trafficShadowLineDarkBg,
shadowColor: eTheme.shadowLineDarkBg,
shadowBlur: 14,
},
},

20
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -30,6 +30,8 @@ export class SolarComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const solarTheme: any = config.variables.solar;
this.option = Object.assign({}, {
tooltip: {
trigger: 'item',
@ -53,8 +55,8 @@ export class SolarComponent {
formatter: '{d}%',
textStyle: {
fontSize: '22',
fontFamily: config.fontSecondary,
color: config.colorFgHeading,
fontFamily: config.variables.fontSecondary,
color: config.variables.colorFgHeading,
},
},
},
@ -66,14 +68,14 @@ export class SolarComponent {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: config.tempColorGreen,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: config.tempColorBlue,
color: solarTheme.gradientRight,
},
]),
shadowColor: config.solarColorDarkGreen,
shadowColor: solarTheme.gradientLeft,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 3,
@ -94,7 +96,7 @@ export class SolarComponent {
},
itemStyle: {
normal: {
color: config.layoutBg,
color: config.variables.layoutBg,
},
},
},
@ -125,14 +127,14 @@ export class SolarComponent {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: config.tempColorGreen,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: config.tempColorBlue,
color: solarTheme.gradientRight,
},
]),
shadowColor: 'rgba(0, 217, 119, 0.3)',
shadowColor: solarTheme.shadowColor,
shadowBlur: 7,
},
},

18
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -5,13 +5,8 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="[
themeConfig.tempColorBlue,
themeConfig.tempColorLightBlue,
themeConfig.tempColorGreen,
themeConfig.tempColorYellow,
themeConfig.tempColorOrange]">
[min]="12" [max]="30" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature">
@ -45,13 +40,8 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="[
themeConfig.tempColorBlue,
themeConfig.tempColorLightBlue,
themeConfig.tempColorGreen,
themeConfig.tempColorYellow,
themeConfig.tempColorOrange]">
[min]="0" [max]="100" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<div class="value humidity">

4
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -16,11 +16,11 @@ export class TemperatureComponent {
humidityOff: boolean = false;
humidityMode = 'heat';
themeConfig: any = {};
colors: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.themeConfig = config;
this.colors = config.variables;
});
}
}

26
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -21,6 +21,8 @@ export class TrafficChartComponent {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const trafficTheme: any = config.variables.traffic;
this.option = Object.assign({}, {
grid: {
left: 0,
@ -47,7 +49,7 @@ export class TrafficChartComponent {
splitLine: {
show: true,
lineStyle: {
color: config.trafficColorBlack,
color: trafficTheme.colorBlack,
opacity: 0.06,
width: '1',
},
@ -58,11 +60,11 @@ export class TrafficChartComponent {
type: 'shadow',
},
position: 'top',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
backgroundColor: trafficTheme.tooltipBg,
borderColor: config.variables.colorSuccess,
borderWidth: 3,
formatter: '{c0} MB',
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
extraCssText: `box-shadow: 0px 2px 46px 0 ${trafficTheme.tooltipBg};border-radius: 10px;padding: 5px 20px;`,
},
series: [
{
@ -73,7 +75,7 @@ export class TrafficChartComponent {
silent: true,
itemStyle: {
normal: {
color: config.trafficLineBg,
color: trafficTheme.lineBg,
},
emphasis: {
color: 'rgba(0,0,0,0)',
@ -84,7 +86,7 @@ export class TrafficChartComponent {
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
color: trafficTheme.lineBg,
},
},
data: points.map(p => p - 15),
@ -96,10 +98,10 @@ export class TrafficChartComponent {
sampling: 'average',
itemStyle: {
normal: {
color: config.trafficShadowLineBg,
color: trafficTheme.shadowLineBg,
borderColor: 'white',
borderWidth: 2,
shadowColor: config.trafficShadowLineShadow,
shadowColor: trafficTheme.shadowLineShadow,
shadowOffsetX: 0,
shadowOffsetY: -3,
shadowBlur: 10,
@ -113,8 +115,8 @@ export class TrafficChartComponent {
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
shadowColor: config.trafficShadowLineDarkBg,
color: trafficTheme.lineBg,
shadowColor: trafficTheme.shadowLineDarkBg,
shadowBlur: 14,
},
},
@ -122,10 +124,10 @@ export class TrafficChartComponent {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.trafficGradFrom,
color: trafficTheme.gradFrom,
}, {
offset: 1,
color: config.trafficGradTo,
color: trafficTheme.gradTo,
}]),
},
},

355
src/app/pages/maps/bubble/bubble-map.component.ts
View file

@ -21,11 +21,15 @@ export class BubbleMapComponent {
min = Infinity;
options: any;
bubbleTheme: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme()
.subscribe(config => {
this.bubbleTheme = config.variables.bubbleMap;
this.latlong['AD'] = { 'latitude': 42.5, 'longitude': 1.5 };
this.latlong['AE'] = { 'latitude': 24, 'longitude': 54 };
this.latlong['AF'] = { 'latitude': 33, 'longitude': 65 };
@ -268,175 +272,175 @@ export class BubbleMapComponent {
this.latlong['ZW'] = { 'latitude': -20, 'longitude': 30 };
this.mapData = [
{ 'code': 'AF', 'name': 'Afghanistan', 'value': 32358260, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'AL', 'name': 'Albania', 'value': 3215988, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'DZ', 'name': 'Algeria', 'value': 35980193, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'AO', 'name': 'Angola', 'value': 19618432, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'AR', 'name': 'Argentina', 'value': 40764561, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'AM', 'name': 'Armenia', 'value': 3100236, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'AU', 'name': 'Australia', 'value': 22605732, 'color': config.bubbleMapGeoColor5 },
{ 'code': 'AT', 'name': 'Austria', 'value': 8413429, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'AZ', 'name': 'Azerbaijan', 'value': 9306023, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'BH', 'name': 'Bahrain', 'value': 1323535, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'BD', 'name': 'Bangladesh', 'value': 150493658, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'BY', 'name': 'Belarus', 'value': 9559441, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'BE', 'name': 'Belgium', 'value': 10754056, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'BJ', 'name': 'Benin', 'value': 9099922, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'BT', 'name': 'Bhutan', 'value': 738267, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'BO', 'name': 'Bolivia', 'value': 10088108, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'BA', 'name': 'Bosnia and Herzegovina', 'value': 3752228, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'BW', 'name': 'Botswana', 'value': 2030738, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'BR', 'name': 'Brazil', 'value': 196655014, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'BN', 'name': 'Brunei', 'value': 405938, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'BG', 'name': 'Bulgaria', 'value': 7446135, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'BF', 'name': 'Burkina Faso', 'value': 16967845, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'BI', 'name': 'Burundi', 'value': 8575172, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'KH', 'name': 'Cambodia', 'value': 14305183, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'CM', 'name': 'Cameroon', 'value': 20030362, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'CA', 'name': 'Canada', 'value': 34349561, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'CV', 'name': 'Cape Verde', 'value': 500585, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'CF', 'name': 'Central African Rep.', 'value': 4486837, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'TD', 'name': 'Chad', 'value': 11525496, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'CL', 'name': 'Chile', 'value': 17269525, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'CN', 'name': 'China', 'value': 1347565324, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'CO', 'name': 'Colombia', 'value': 46927125, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'KM', 'name': 'Comoros', 'value': 753943, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'CD', 'name': 'Congo, Dem. Rep.', 'value': 67757577, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'CG', 'name': 'Congo, Rep.', 'value': 4139748, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'CR', 'name': 'Costa Rica', 'value': 4726575, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'CI', 'name': 'Cote d\'Ivoire', 'value': 20152894, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'HR', 'name': 'Croatia', 'value': 4395560, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'CU', 'name': 'Cuba', 'value': 11253665, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'CY', 'name': 'Cyprus', 'value': 1116564, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'CZ', 'name': 'Czech Rep.', 'value': 10534293, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'DK', 'name': 'Denmark', 'value': 5572594, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'DJ', 'name': 'Djibouti', 'value': 905564, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'DO', 'name': 'Dominican Rep.', 'value': 10056181, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'EC', 'name': 'Ecuador', 'value': 14666055, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'EG', 'name': 'Egypt', 'value': 82536770, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'SV', 'name': 'El Salvador', 'value': 6227491, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'GQ', 'name': 'Equatorial Guinea', 'value': 720213, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'ER', 'name': 'Eritrea', 'value': 5415280, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'EE', 'name': 'Estonia', 'value': 1340537, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'ET', 'name': 'Ethiopia', 'value': 84734262, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'FJ', 'name': 'Fiji', 'value': 868406, 'color': config.bubbleMapGeoColor5 },
{ 'code': 'FI', 'name': 'Finland', 'value': 5384770, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'FR', 'name': 'France', 'value': 63125894, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'GA', 'name': 'Gabon', 'value': 1534262, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'GM', 'name': 'Gambia', 'value': 1776103, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'GE', 'name': 'Georgia', 'value': 4329026, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'DE', 'name': 'Germany', 'value': 82162512, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'GH', 'name': 'Ghana', 'value': 24965816, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'GR', 'name': 'Greece', 'value': 11390031, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'GT', 'name': 'Guatemala', 'value': 14757316, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'GN', 'name': 'Guinea', 'value': 10221808, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'GW', 'name': 'Guinea-Bissau', 'value': 1547061, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'GY', 'name': 'Guyana', 'value': 756040, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'HT', 'name': 'Haiti', 'value': 10123787, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'HN', 'name': 'Honduras', 'value': 7754687, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'HK', 'name': 'Hong Kong, China', 'value': 7122187, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'HU', 'name': 'Hungary', 'value': 9966116, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'IS', 'name': 'Iceland', 'value': 324366, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'IN', 'name': 'India', 'value': 1241491960, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'ID', 'name': 'Indonesia', 'value': 242325638, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'IR', 'name': 'Iran', 'value': 74798599, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'IQ', 'name': 'Iraq', 'value': 32664942, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'IE', 'name': 'Ireland', 'value': 4525802, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'IL', 'name': 'Israel', 'value': 7562194, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'IT', 'name': 'Italy', 'value': 60788694, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'JM', 'name': 'Jamaica', 'value': 2751273, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'JP', 'name': 'Japan', 'value': 126497241, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'JO', 'name': 'Jordan', 'value': 6330169, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'KZ', 'name': 'Kazakhstan', 'value': 16206750, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'KE', 'name': 'Kenya', 'value': 41609728, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'KP', 'name': 'Korea, Dem. Rep.', 'value': 24451285, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'KR', 'name': 'Korea, Rep.', 'value': 48391343, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'KW', 'name': 'Kuwait', 'value': 2818042, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'KG', 'name': 'Kyrgyzstan', 'value': 5392580, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'LA', 'name': 'Laos', 'value': 6288037, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'LV', 'name': 'Latvia', 'value': 2243142, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'LB', 'name': 'Lebanon', 'value': 4259405, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'LS', 'name': 'Lesotho', 'value': 2193843, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'LR', 'name': 'Liberia', 'value': 4128572, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'LY', 'name': 'Libya', 'value': 6422772, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'LT', 'name': 'Lithuania', 'value': 3307481, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'LU', 'name': 'Luxembourg', 'value': 515941, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'MK', 'name': 'Macedonia, FYR', 'value': 2063893, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'MG', 'name': 'Madagascar', 'value': 21315135, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'MW', 'name': 'Malawi', 'value': 15380888, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'MY', 'name': 'Malaysia', 'value': 28859154, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'ML', 'name': 'Mali', 'value': 15839538, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'MR', 'name': 'Mauritania', 'value': 3541540, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'MU', 'name': 'Mauritius', 'value': 1306593, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'MX', 'name': 'Mexico', 'value': 114793341, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'MD', 'name': 'Moldova', 'value': 3544864, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'MN', 'name': 'Mongolia', 'value': 2800114, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'ME', 'name': 'Montenegro', 'value': 632261, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'MA', 'name': 'Morocco', 'value': 32272974, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'MZ', 'name': 'Mozambique', 'value': 23929708, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'MM', 'name': 'Myanmar', 'value': 48336763, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'NA', 'name': 'Namibia', 'value': 2324004, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'NP', 'name': 'Nepal', 'value': 30485798, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'NL', 'name': 'Netherlands', 'value': 16664746, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'NZ', 'name': 'New Zealand', 'value': 4414509, 'color': config.bubbleMapGeoColor5 },
{ 'code': 'NI', 'name': 'Nicaragua', 'value': 5869859, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'NE', 'name': 'Niger', 'value': 16068994, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'NG', 'name': 'Nigeria', 'value': 162470737, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'NO', 'name': 'Norway', 'value': 4924848, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'OM', 'name': 'Oman', 'value': 2846145, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'PK', 'name': 'Pakistan', 'value': 176745364, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'PA', 'name': 'Panama', 'value': 3571185, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'PG', 'name': 'Papua New Guinea', 'value': 7013829, 'color': config.bubbleMapGeoColor5 },
{ 'code': 'PY', 'name': 'Paraguay', 'value': 6568290, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'PE', 'name': 'Peru', 'value': 29399817, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'PH', 'name': 'Philippines', 'value': 94852030, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'PL', 'name': 'Poland', 'value': 38298949, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'PT', 'name': 'Portugal', 'value': 10689663, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'PR', 'name': 'Puerto Rico', 'value': 3745526, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'QA', 'name': 'Qatar', 'value': 1870041, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'RO', 'name': 'Romania', 'value': 21436495, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'RU', 'name': 'Russia', 'value': 142835555, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'RW', 'name': 'Rwanda', 'value': 10942950, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'SA', 'name': 'Saudi Arabia', 'value': 28082541, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'SN', 'name': 'Senegal', 'value': 12767556, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'RS', 'name': 'Serbia', 'value': 9853969, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'SL', 'name': 'Sierra Leone', 'value': 5997486, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'SG', 'name': 'Singapore', 'value': 5187933, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'SK', 'name': 'Slovak Republic', 'value': 5471502, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'SI', 'name': 'Slovenia', 'value': 2035012, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'SB', 'name': 'Solomon Islands', 'value': 552267, 'color': config.bubbleMapGeoColor5 },
{ 'code': 'SO', 'name': 'Somalia', 'value': 9556873, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'ZA', 'name': 'South Africa', 'value': 50459978, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'ES', 'name': 'Spain', 'value': 46454895, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'LK', 'name': 'Sri Lanka', 'value': 21045394, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'SD', 'name': 'Sudan', 'value': 34735288, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'SR', 'name': 'Suriname', 'value': 529419, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'SZ', 'name': 'Swaziland', 'value': 1203330, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'SE', 'name': 'Sweden', 'value': 9440747, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'CH', 'name': 'Switzerland', 'value': 7701690, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'SY', 'name': 'Syria', 'value': 20766037, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'TW', 'name': 'Taiwan', 'value': 23072000, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'TJ', 'name': 'Tajikistan', 'value': 6976958, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'TZ', 'name': 'Tanzania', 'value': 46218486, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'TH', 'name': 'Thailand', 'value': 69518555, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'TG', 'name': 'Togo', 'value': 6154813, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'TT', 'name': 'Trinidad and Tobago', 'value': 1346350, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'TN', 'name': 'Tunisia', 'value': 10594057, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'TR', 'name': 'Turkey', 'value': 73639596, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'TM', 'name': 'Turkmenistan', 'value': 5105301, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'UG', 'name': 'Uganda', 'value': 34509205, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'UA', 'name': 'Ukraine', 'value': 45190180, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'AE', 'name': 'United Arab Emirates', 'value': 7890924, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'GB', 'name': 'United Kingdom', 'value': 62417431, 'color': config.bubbleMapGeoColor2 },
{ 'code': 'US', 'name': 'United States', 'value': 313085380, 'color': config.bubbleMapGeoColor6 },
{ 'code': 'UY', 'name': 'Uruguay', 'value': 3380008, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'UZ', 'name': 'Uzbekistan', 'value': 27760267, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'VE', 'name': 'Venezuela', 'value': 29436891, 'color': config.bubbleMapGeoColor4 },
{ 'code': 'PS', 'name': 'West Bank and Gaza', 'value': 4152369, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'VN', 'name': 'Vietnam', 'value': 88791996, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'YE', 'name': 'Yemen, Rep.', 'value': 24799880, 'color': config.bubbleMapGeoColor1 },
{ 'code': 'ZM', 'name': 'Zambia', 'value': 13474959, 'color': config.bubbleMapGeoColor3 },
{ 'code': 'ZW', 'name': 'Zimbabwe', 'value': 12754378, 'color': config.bubbleMapGeoColor3 }];
{ 'code': 'AF', 'name': 'Afghanistan', 'value': 32358260, 'color': this.getRandomGeoColor() },
{ 'code': 'AL', 'name': 'Albania', 'value': 3215988, 'color': this.getRandomGeoColor() },
{ 'code': 'DZ', 'name': 'Algeria', 'value': 35980193, 'color': this.getRandomGeoColor() },
{ 'code': 'AO', 'name': 'Angola', 'value': 19618432, 'color': this.getRandomGeoColor() },
{ 'code': 'AR', 'name': 'Argentina', 'value': 40764561, 'color': this.getRandomGeoColor() },
{ 'code': 'AM', 'name': 'Armenia', 'value': 3100236, 'color': this.getRandomGeoColor() },
{ 'code': 'AU', 'name': 'Australia', 'value': 22605732, 'color': this.getRandomGeoColor() },
{ 'code': 'AT', 'name': 'Austria', 'value': 8413429, 'color': this.getRandomGeoColor() },
{ 'code': 'AZ', 'name': 'Azerbaijan', 'value': 9306023, 'color': this.getRandomGeoColor() },
{ 'code': 'BH', 'name': 'Bahrain', 'value': 1323535, 'color': this.getRandomGeoColor() },
{ 'code': 'BD', 'name': 'Bangladesh', 'value': 150493658, 'color': this.getRandomGeoColor() },
{ 'code': 'BY', 'name': 'Belarus', 'value': 9559441, 'color': this.getRandomGeoColor() },
{ 'code': 'BE', 'name': 'Belgium', 'value': 10754056, 'color': this.getRandomGeoColor() },
{ 'code': 'BJ', 'name': 'Benin', 'value': 9099922, 'color': this.getRandomGeoColor() },
{ 'code': 'BT', 'name': 'Bhutan', 'value': 738267, 'color': this.getRandomGeoColor() },
{ 'code': 'BO', 'name': 'Bolivia', 'value': 10088108, 'color': this.getRandomGeoColor() },
{ 'code': 'BA', 'name': 'Bosnia and Herzegovina', 'value': 3752228, 'color': this.getRandomGeoColor() },
{ 'code': 'BW', 'name': 'Botswana', 'value': 2030738, 'color': this.getRandomGeoColor() },
{ 'code': 'BR', 'name': 'Brazil', 'value': 196655014, 'color': this.getRandomGeoColor() },
{ 'code': 'BN', 'name': 'Brunei', 'value': 405938, 'color': this.getRandomGeoColor() },
{ 'code': 'BG', 'name': 'Bulgaria', 'value': 7446135, 'color': this.getRandomGeoColor() },
{ 'code': 'BF', 'name': 'Burkina Faso', 'value': 16967845, 'color': this.getRandomGeoColor() },
{ 'code': 'BI', 'name': 'Burundi', 'value': 8575172, 'color': this.getRandomGeoColor() },
{ 'code': 'KH', 'name': 'Cambodia', 'value': 14305183, 'color': this.getRandomGeoColor() },
{ 'code': 'CM', 'name': 'Cameroon', 'value': 20030362, 'color': this.getRandomGeoColor() },
{ 'code': 'CA', 'name': 'Canada', 'value': 34349561, 'color': this.getRandomGeoColor() },
{ 'code': 'CV', 'name': 'Cape Verde', 'value': 500585, 'color': this.getRandomGeoColor() },
{ 'code': 'CF', 'name': 'Central African Rep.', 'value': 4486837, 'color': this.getRandomGeoColor() },
{ 'code': 'TD', 'name': 'Chad', 'value': 11525496, 'color': this.getRandomGeoColor() },
{ 'code': 'CL', 'name': 'Chile', 'value': 17269525, 'color': this.getRandomGeoColor() },
{ 'code': 'CN', 'name': 'China', 'value': 1347565324, 'color': this.getRandomGeoColor() },
{ 'code': 'CO', 'name': 'Colombia', 'value': 46927125, 'color': this.getRandomGeoColor() },
{ 'code': 'KM', 'name': 'Comoros', 'value': 753943, 'color': this.getRandomGeoColor() },
{ 'code': 'CD', 'name': 'Congo, Dem. Rep.', 'value': 67757577, 'color': this.getRandomGeoColor() },
{ 'code': 'CG', 'name': 'Congo, Rep.', 'value': 4139748, 'color': this.getRandomGeoColor() },
{ 'code': 'CR', 'name': 'Costa Rica', 'value': 4726575, 'color': this.getRandomGeoColor() },
{ 'code': 'CI', 'name': 'Cote d\'Ivoire', 'value': 20152894, 'color': this.getRandomGeoColor() },
{ 'code': 'HR', 'name': 'Croatia', 'value': 4395560, 'color': this.getRandomGeoColor() },
{ 'code': 'CU', 'name': 'Cuba', 'value': 11253665, 'color': this.getRandomGeoColor() },
{ 'code': 'CY', 'name': 'Cyprus', 'value': 1116564, 'color': this.getRandomGeoColor() },
{ 'code': 'CZ', 'name': 'Czech Rep.', 'value': 10534293, 'color': this.getRandomGeoColor() },
{ 'code': 'DK', 'name': 'Denmark', 'value': 5572594, 'color': this.getRandomGeoColor() },
{ 'code': 'DJ', 'name': 'Djibouti', 'value': 905564, 'color': this.getRandomGeoColor() },
{ 'code': 'DO', 'name': 'Dominican Rep.', 'value': 10056181, 'color': this.getRandomGeoColor() },
{ 'code': 'EC', 'name': 'Ecuador', 'value': 14666055, 'color': this.getRandomGeoColor() },
{ 'code': 'EG', 'name': 'Egypt', 'value': 82536770, 'color': this.getRandomGeoColor() },
{ 'code': 'SV', 'name': 'El Salvador', 'value': 6227491, 'color': this.getRandomGeoColor() },
{ 'code': 'GQ', 'name': 'Equatorial Guinea', 'value': 720213, 'color': this.getRandomGeoColor() },
{ 'code': 'ER', 'name': 'Eritrea', 'value': 5415280, 'color': this.getRandomGeoColor() },
{ 'code': 'EE', 'name': 'Estonia', 'value': 1340537, 'color': this.getRandomGeoColor() },
{ 'code': 'ET', 'name': 'Ethiopia', 'value': 84734262, 'color': this.getRandomGeoColor() },
{ 'code': 'FJ', 'name': 'Fiji', 'value': 868406, 'color': this.getRandomGeoColor() },
{ 'code': 'FI', 'name': 'Finland', 'value': 5384770, 'color': this.getRandomGeoColor() },
{ 'code': 'FR', 'name': 'France', 'value': 63125894, 'color': this.getRandomGeoColor() },
{ 'code': 'GA', 'name': 'Gabon', 'value': 1534262, 'color': this.getRandomGeoColor() },
{ 'code': 'GM', 'name': 'Gambia', 'value': 1776103, 'color': this.getRandomGeoColor() },
{ 'code': 'GE', 'name': 'Georgia', 'value': 4329026, 'color': this.getRandomGeoColor() },
{ 'code': 'DE', 'name': 'Germany', 'value': 82162512, 'color': this.getRandomGeoColor() },
{ 'code': 'GH', 'name': 'Ghana', 'value': 24965816, 'color': this.getRandomGeoColor() },
{ 'code': 'GR', 'name': 'Greece', 'value': 11390031, 'color': this.getRandomGeoColor() },
{ 'code': 'GT', 'name': 'Guatemala', 'value': 14757316, 'color': this.getRandomGeoColor() },
{ 'code': 'GN', 'name': 'Guinea', 'value': 10221808, 'color': this.getRandomGeoColor() },
{ 'code': 'GW', 'name': 'Guinea-Bissau', 'value': 1547061, 'color': this.getRandomGeoColor() },
{ 'code': 'GY', 'name': 'Guyana', 'value': 756040, 'color': this.getRandomGeoColor() },
{ 'code': 'HT', 'name': 'Haiti', 'value': 10123787, 'color': this.getRandomGeoColor() },
{ 'code': 'HN', 'name': 'Honduras', 'value': 7754687, 'color': this.getRandomGeoColor() },
{ 'code': 'HK', 'name': 'Hong Kong, China', 'value': 7122187, 'color': this.getRandomGeoColor() },
{ 'code': 'HU', 'name': 'Hungary', 'value': 9966116, 'color': this.getRandomGeoColor() },
{ 'code': 'IS', 'name': 'Iceland', 'value': 324366, 'color': this.getRandomGeoColor() },
{ 'code': 'IN', 'name': 'India', 'value': 1241491960, 'color': this.getRandomGeoColor() },
{ 'code': 'ID', 'name': 'Indonesia', 'value': 242325638, 'color': this.getRandomGeoColor() },
{ 'code': 'IR', 'name': 'Iran', 'value': 74798599, 'color': this.getRandomGeoColor() },
{ 'code': 'IQ', 'name': 'Iraq', 'value': 32664942, 'color': this.getRandomGeoColor() },
{ 'code': 'IE', 'name': 'Ireland', 'value': 4525802, 'color': this.getRandomGeoColor() },
{ 'code': 'IL', 'name': 'Israel', 'value': 7562194, 'color': this.getRandomGeoColor() },
{ 'code': 'IT', 'name': 'Italy', 'value': 60788694, 'color': this.getRandomGeoColor() },
{ 'code': 'JM', 'name': 'Jamaica', 'value': 2751273, 'color': this.getRandomGeoColor() },
{ 'code': 'JP', 'name': 'Japan', 'value': 126497241, 'color': this.getRandomGeoColor() },
{ 'code': 'JO', 'name': 'Jordan', 'value': 6330169, 'color': this.getRandomGeoColor() },
{ 'code': 'KZ', 'name': 'Kazakhstan', 'value': 16206750, 'color': this.getRandomGeoColor() },
{ 'code': 'KE', 'name': 'Kenya', 'value': 41609728, 'color': this.getRandomGeoColor() },
{ 'code': 'KP', 'name': 'Korea, Dem. Rep.', 'value': 24451285, 'color': this.getRandomGeoColor() },
{ 'code': 'KR', 'name': 'Korea, Rep.', 'value': 48391343, 'color': this.getRandomGeoColor() },
{ 'code': 'KW', 'name': 'Kuwait', 'value': 2818042, 'color': this.getRandomGeoColor() },
{ 'code': 'KG', 'name': 'Kyrgyzstan', 'value': 5392580, 'color': this.getRandomGeoColor() },
{ 'code': 'LA', 'name': 'Laos', 'value': 6288037, 'color': this.getRandomGeoColor() },
{ 'code': 'LV', 'name': 'Latvia', 'value': 2243142, 'color': this.getRandomGeoColor() },
{ 'code': 'LB', 'name': 'Lebanon', 'value': 4259405, 'color': this.getRandomGeoColor() },
{ 'code': 'LS', 'name': 'Lesotho', 'value': 2193843, 'color': this.getRandomGeoColor() },
{ 'code': 'LR', 'name': 'Liberia', 'value': 4128572, 'color': this.getRandomGeoColor() },
{ 'code': 'LY', 'name': 'Libya', 'value': 6422772, 'color': this.getRandomGeoColor() },
{ 'code': 'LT', 'name': 'Lithuania', 'value': 3307481, 'color': this.getRandomGeoColor() },
{ 'code': 'LU', 'name': 'Luxembourg', 'value': 515941, 'color': this.getRandomGeoColor() },
{ 'code': 'MK', 'name': 'Macedonia, FYR', 'value': 2063893, 'color': this.getRandomGeoColor() },
{ 'code': 'MG', 'name': 'Madagascar', 'value': 21315135, 'color': this.getRandomGeoColor() },
{ 'code': 'MW', 'name': 'Malawi', 'value': 15380888, 'color': this.getRandomGeoColor() },
{ 'code': 'MY', 'name': 'Malaysia', 'value': 28859154, 'color': this.getRandomGeoColor() },
{ 'code': 'ML', 'name': 'Mali', 'value': 15839538, 'color': this.getRandomGeoColor() },
{ 'code': 'MR', 'name': 'Mauritania', 'value': 3541540, 'color': this.getRandomGeoColor() },
{ 'code': 'MU', 'name': 'Mauritius', 'value': 1306593, 'color': this.getRandomGeoColor() },
{ 'code': 'MX', 'name': 'Mexico', 'value': 114793341, 'color': this.getRandomGeoColor() },
{ 'code': 'MD', 'name': 'Moldova', 'value': 3544864, 'color': this.getRandomGeoColor() },
{ 'code': 'MN', 'name': 'Mongolia', 'value': 2800114, 'color': this.getRandomGeoColor() },
{ 'code': 'ME', 'name': 'Montenegro', 'value': 632261, 'color': this.getRandomGeoColor() },
{ 'code': 'MA', 'name': 'Morocco', 'value': 32272974, 'color': this.getRandomGeoColor() },
{ 'code': 'MZ', 'name': 'Mozambique', 'value': 23929708, 'color': this.getRandomGeoColor() },
{ 'code': 'MM', 'name': 'Myanmar', 'value': 48336763, 'color': this.getRandomGeoColor() },
{ 'code': 'NA', 'name': 'Namibia', 'value': 2324004, 'color': this.getRandomGeoColor() },
{ 'code': 'NP', 'name': 'Nepal', 'value': 30485798, 'color': this.getRandomGeoColor() },
{ 'code': 'NL', 'name': 'Netherlands', 'value': 16664746, 'color': this.getRandomGeoColor() },
{ 'code': 'NZ', 'name': 'New Zealand', 'value': 4414509, 'color': this.getRandomGeoColor() },
{ 'code': 'NI', 'name': 'Nicaragua', 'value': 5869859, 'color': this.getRandomGeoColor() },
{ 'code': 'NE', 'name': 'Niger', 'value': 16068994, 'color': this.getRandomGeoColor() },
{ 'code': 'NG', 'name': 'Nigeria', 'value': 162470737, 'color': this.getRandomGeoColor() },
{ 'code': 'NO', 'name': 'Norway', 'value': 4924848, 'color': this.getRandomGeoColor() },
{ 'code': 'OM', 'name': 'Oman', 'value': 2846145, 'color': this.getRandomGeoColor() },
{ 'code': 'PK', 'name': 'Pakistan', 'value': 176745364, 'color': this.getRandomGeoColor() },
{ 'code': 'PA', 'name': 'Panama', 'value': 3571185, 'color': this.getRandomGeoColor() },
{ 'code': 'PG', 'name': 'Papua New Guinea', 'value': 7013829, 'color': this.getRandomGeoColor() },
{ 'code': 'PY', 'name': 'Paraguay', 'value': 6568290, 'color': this.getRandomGeoColor() },
{ 'code': 'PE', 'name': 'Peru', 'value': 29399817, 'color': this.getRandomGeoColor() },
{ 'code': 'PH', 'name': 'Philippines', 'value': 94852030, 'color': this.getRandomGeoColor() },
{ 'code': 'PL', 'name': 'Poland', 'value': 38298949, 'color': this.getRandomGeoColor() },
{ 'code': 'PT', 'name': 'Portugal', 'value': 10689663, 'color': this.getRandomGeoColor() },
{ 'code': 'PR', 'name': 'Puerto Rico', 'value': 3745526, 'color': this.getRandomGeoColor() },
{ 'code': 'QA', 'name': 'Qatar', 'value': 1870041, 'color': this.getRandomGeoColor() },
{ 'code': 'RO', 'name': 'Romania', 'value': 21436495, 'color': this.getRandomGeoColor() },
{ 'code': 'RU', 'name': 'Russia', 'value': 142835555, 'color': this.getRandomGeoColor() },
{ 'code': 'RW', 'name': 'Rwanda', 'value': 10942950, 'color': this.getRandomGeoColor() },
{ 'code': 'SA', 'name': 'Saudi Arabia', 'value': 28082541, 'color': this.getRandomGeoColor() },
{ 'code': 'SN', 'name': 'Senegal', 'value': 12767556, 'color': this.getRandomGeoColor() },
{ 'code': 'RS', 'name': 'Serbia', 'value': 9853969, 'color': this.getRandomGeoColor() },
{ 'code': 'SL', 'name': 'Sierra Leone', 'value': 5997486, 'color': this.getRandomGeoColor() },
{ 'code': 'SG', 'name': 'Singapore', 'value': 5187933, 'color': this.getRandomGeoColor() },
{ 'code': 'SK', 'name': 'Slovak Republic', 'value': 5471502, 'color': this.getRandomGeoColor() },
{ 'code': 'SI', 'name': 'Slovenia', 'value': 2035012, 'color': this.getRandomGeoColor() },
{ 'code': 'SB', 'name': 'Solomon Islands', 'value': 552267, 'color': this.getRandomGeoColor() },
{ 'code': 'SO', 'name': 'Somalia', 'value': 9556873, 'color': this.getRandomGeoColor() },
{ 'code': 'ZA', 'name': 'South Africa', 'value': 50459978, 'color': this.getRandomGeoColor() },
{ 'code': 'ES', 'name': 'Spain', 'value': 46454895, 'color': this.getRandomGeoColor() },
{ 'code': 'LK', 'name': 'Sri Lanka', 'value': 21045394, 'color': this.getRandomGeoColor() },
{ 'code': 'SD', 'name': 'Sudan', 'value': 34735288, 'color': this.getRandomGeoColor() },
{ 'code': 'SR', 'name': 'Suriname', 'value': 529419, 'color': this.getRandomGeoColor() },
{ 'code': 'SZ', 'name': 'Swaziland', 'value': 1203330, 'color': this.getRandomGeoColor() },
{ 'code': 'SE', 'name': 'Sweden', 'value': 9440747, 'color': this.getRandomGeoColor() },
{ 'code': 'CH', 'name': 'Switzerland', 'value': 7701690, 'color': this.getRandomGeoColor() },
{ 'code': 'SY', 'name': 'Syria', 'value': 20766037, 'color': this.getRandomGeoColor() },
{ 'code': 'TW', 'name': 'Taiwan', 'value': 23072000, 'color': this.getRandomGeoColor() },
{ 'code': 'TJ', 'name': 'Tajikistan', 'value': 6976958, 'color': this.getRandomGeoColor() },
{ 'code': 'TZ', 'name': 'Tanzania', 'value': 46218486, 'color': this.getRandomGeoColor() },
{ 'code': 'TH', 'name': 'Thailand', 'value': 69518555, 'color': this.getRandomGeoColor() },
{ 'code': 'TG', 'name': 'Togo', 'value': 6154813, 'color': this.getRandomGeoColor() },
{ 'code': 'TT', 'name': 'Trinidad and Tobago', 'value': 1346350, 'color': this.getRandomGeoColor() },
{ 'code': 'TN', 'name': 'Tunisia', 'value': 10594057, 'color': this.getRandomGeoColor() },
{ 'code': 'TR', 'name': 'Turkey', 'value': 73639596, 'color': this.getRandomGeoColor() },
{ 'code': 'TM', 'name': 'Turkmenistan', 'value': 5105301, 'color': this.getRandomGeoColor() },
{ 'code': 'UG', 'name': 'Uganda', 'value': 34509205, 'color': this.getRandomGeoColor() },
{ 'code': 'UA', 'name': 'Ukraine', 'value': 45190180, 'color': this.getRandomGeoColor() },
{ 'code': 'AE', 'name': 'United Arab Emirates', 'value': 7890924, 'color': this.getRandomGeoColor() },
{ 'code': 'GB', 'name': 'United Kingdom', 'value': 62417431, 'color': this.getRandomGeoColor() },
{ 'code': 'US', 'name': 'United States', 'value': 313085380, 'color': this.getRandomGeoColor() },
{ 'code': 'UY', 'name': 'Uruguay', 'value': 3380008, 'color': this.getRandomGeoColor() },
{ 'code': 'UZ', 'name': 'Uzbekistan', 'value': 27760267, 'color': this.getRandomGeoColor() },
{ 'code': 'VE', 'name': 'Venezuela', 'value': 29436891, 'color': this.getRandomGeoColor() },
{ 'code': 'PS', 'name': 'West Bank and Gaza', 'value': 4152369, 'color': this.getRandomGeoColor() },
{ 'code': 'VN', 'name': 'Vietnam', 'value': 88791996, 'color': this.getRandomGeoColor() },
{ 'code': 'YE', 'name': 'Yemen, Rep.', 'value': 24799880, 'color': this.getRandomGeoColor() },
{ 'code': 'ZM', 'name': 'Zambia', 'value': 13474959, 'color': this.getRandomGeoColor() },
{ 'code': 'ZW', 'name': 'Zimbabwe', 'value': 12754378, 'color': this.getRandomGeoColor() }];
this.mapData.forEach((itemOpt) => {
if (itemOpt.value > this.max) {
@ -453,7 +457,7 @@ export class BubbleMapComponent {
left: 'center',
top: 'top',
textStyle: {
color: config.bubbleMapTitleColor,
color: this.bubbleTheme.titleColor,
},
},
tooltip: {
@ -485,11 +489,11 @@ export class BubbleMapComponent {
},
itemStyle: {
normal: {
areaColor: config.bubbleMapAreaColor,
borderColor: config.bubbleMapAreaBorderColor,
areaColor: this.bubbleTheme.areaColor,
borderColor: this.bubbleTheme.areaBorderColor,
},
emphasis: {
areaColor: config.bubbleMapAreaHoverColor,
areaColor: this.bubbleTheme.areaHoverColor,
},
},
zoom: 1.1,
@ -524,4 +528,9 @@ export class BubbleMapComponent {
};
});
}
private getRandomGeoColor() {
const index = Math.round(Math.random() * this.bubbleTheme.geoColors.length);
return this.bubbleTheme.geoColors[index];
}
}