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

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

@ -1,40 +1,117 @@
export const DEFAULT_THEME = { export const DEFAULT_THEME = {
name: 'default', name: 'default',
base: 'default', base: null,
variables: { variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#7bff24',
tempColorBlue: '#7bff24',
tempColorYellow: '#7bff24',
tempColorOrange: '#7bff24',
solarColorDarkGreen: '#7bff24', temperature: ['#7bff24', '#31ffad', '#2ec7fe', '#fff024', '#f7bd59'],
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',
electricityAxisColor: '#7bff24', solar: {
electricityLineGradFrom: '#7bff24', color: '#19977E',
electricityLineGradTo: '#7bff24', shadowColor: 'rgba(0, 217, 119, 0.3)',
electricityLineShadow: '#7bff24', gradientLeft: '#7bff24',
electricityAreaGradFrom: '#7bff24', gradientRight: '#2ec7fe',
electricityAreaGradTo: '#7bff24', },
bubbleMapTitleColor: '#333333', traffic: {
bubbleMapGeoColor1: '#e6b045', colorBlack: '#000000',
bubbleMapGeoColor2: '#0088ff', tooltipBg: 'rgba(0, 255, 170, 0.35)',
bubbleMapGeoColor3: '#ff386a', lineBg: 'rgba(146, 141, 255, 0.5)',
bubbleMapGeoColor4: '#00d977', shadowLineBg: '#bdbaff',
bubbleMapGeoColor5: '#7659ff', shadowLineDarkBg: '#a695ff',
bubbleMapGeoColor6: '#24dec8', shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
bubbleMapAreaColor: '#2f3234', gradFrom: 'rgba(118, 89, 255, 0.4)',
bubbleMapAreaHoverColor: '#a1a1e5', gradTo: 'rgba(164, 84, 255, 0.5)',
bubbleMapAreaBorderColor: '#dddddd', },
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 = [ const NGA_THEME_PROVIDERS = [
...NgaThemeModule.forRoot( ...NgaThemeModule.forRoot(
{ {
name: 'cosmic', name: 'default',
}, },
[DEFAULT_THEME, COSMIC_THEME], [DEFAULT_THEME, COSMIC_THEME],
).providers, ).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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartData = [ this.chartData = [
{ {
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: config.chartjsBarHorizontalColor1, backgroundColor: chartjs.barHorizontal.colors[0],
borderColor: config.chartjsBarHorizontalColor1, borderColor: chartjs.barHorizontal.colors[0],
borderWidth: 1, borderWidth: 1,
data: [ data: [
this.randomScalingFactor(), this.randomScalingFactor(),
@ -46,8 +49,8 @@ export class ChartjsBarHorizontalComponent {
}, },
{ {
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: config.chartjsBarHorizontalColor2, backgroundColor: chartjs.barHorizontal.colors[1],
borderColor: config.chartjsBarHorizontalColor2, borderColor: chartjs.barHorizontal.colors[1],
data: [ data: [
this.randomScalingFactor(), this.randomScalingFactor(),
this.randomScalingFactor(), this.randomScalingFactor(),
@ -74,10 +77,10 @@ export class ChartjsBarHorizontalComponent {
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsBarHorizontalXAxisColor, color: chartjs.xAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsBarHorizontalTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
@ -85,10 +88,10 @@ export class ChartjsBarHorizontalComponent {
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsBarHorizontalYAxisColor, color: chartjs.yAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsBarHorizontalTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
@ -96,7 +99,7 @@ export class ChartjsBarHorizontalComponent {
legend: { legend: {
position: 'right', position: 'right',
labels: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = { this.chartOptions = {
scaleShowVerticalLines: false, scaleShowVerticalLines: false,
responsive: true, responsive: true,
legend: { legend: {
labels: { labels: {
fontColor: config.chartjsBarLegendTextColor, fontColor: chartjs.legendTextColor,
}, },
}, },
scales: { scales: {
@ -44,10 +47,10 @@ export class ChartjsBarComponent {
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsBarXAxisColor, color: chartjs.xAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsBarTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
@ -55,10 +58,10 @@ export class ChartjsBarComponent {
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsBarYAxisColor, color: chartjs.yAxisColor,
}, },
ticks: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = { this.chartOptions = {
responsive: true, responsive: true,
scales: { scales: {
@ -39,10 +42,10 @@ export class ChartjsLineComponent {
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsLineXAxisColor, color: chartjs.xAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsLineTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
@ -50,17 +53,17 @@ export class ChartjsLineComponent {
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsLineYAxisColor, color: chartjs.yAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsLineTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
}, },
legend: { legend: {
labels: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = { this.chartOptions = {
responsive: true, responsive: true,
legend: { legend: {
position: 'bottom', position: 'bottom',
labels: { labels: {
fontColor: config.chartjsLineLegendTextColor, fontColor: chartjs.legendTextColor,
}, },
}, },
hover: { hover: {
@ -117,10 +120,10 @@ export class ChartjsMultipleXaxisComponent {
}, },
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsLineXAxisColor, color: chartjs.xAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsLineTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
@ -133,10 +136,10 @@ export class ChartjsMultipleXaxisComponent {
}, },
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsLineXAxisColor, color: chartjs.xAxisColor,
}, },
ticks: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartOptions = { this.chartOptions = {
responsive: true, responsive: true,
scale: {
pointLabels: {
fontSize: 14,
fontColor: chartjs.legendTextColor,
},
},
scales: { scales: {
xAxes: [ xAxes: [
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsPieXAxisColor, color: chartjs.xAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsPitTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
@ -44,17 +53,17 @@ export class ChartjsPieComponent {
{ {
gridLines: { gridLines: {
display: true, display: true,
color: config.chartjsPieYAxisColor, color: chartjs.yAxisColor,
}, },
ticks: { ticks: {
fontColor: config.chartjsPieTickColor, fontColor: chartjs.tickColor,
}, },
}, },
], ],
}, },
legend: { legend: {
labels: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs;
this.chartData = [ this.chartData = [
{ {
data: [65, 59, 90, 81, 56, 55, 40], data: [65, 59, 90, 81, 56, 55, 40],
label: 'Series A', label: 'Series A',
borderColor: config.chartjsRadarColor1, borderColor: chartjs.radar.colors[0],
backgroundColor: config.chartjsRadarColor1, backgroundColor: chartjs.radar.colors[0],
}, },
{ {
data: [28, 48, 40, 19, 96, 27, 100], data: [28, 48, 40, 19, 96, 27, 100],
label: 'Series B', label: 'Series B',
borderColor: config.chartjsRadarColor2, borderColor: chartjs.radar.colors[1],
backgroundColor: config.chartjsRadarColor2, backgroundColor: chartjs.radar.colors[1],
}, },
]; ];
@ -45,19 +48,19 @@ export class ChartjsRadarComponent {
scaleFontColor: 'white', scaleFontColor: 'white',
legend: { legend: {
labels: { labels: {
fontColor: config.chartjsRadarLegendTextColor, fontColor: chartjs.legendTextColor,
}, },
}, },
scale: { scale: {
pointLabels: { pointLabels: {
fontSize: 14, fontSize: 14,
fontColor: config.chartjsRadarPointLabelFontColor, fontColor: chartjs.radar.pointLabelFontColor,
}, },
gridLines: { gridLines: {
color: config.chartjsRadarScaleGridLinesColor, color: chartjs.radar.scaleGridLinesColor,
}, },
angleLines: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { this.colorScheme = {
domain: [ domain: (<any>config.variables.d3).advancedPie,
config.d3AdvancedPieColor1,
config.d3AdvancedPieColor2,
config.d3AdvancedPieColor3,
config.d3AdvancedPieColor4,
],
}; };
}); });
} }

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

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

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

@ -47,7 +47,7 @@ export class D3BarComponent {
constructor(private theme: NgaThemeService) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: config.echartsBackgroundColor, backgroundColor: echarts.bg,
color: [ color: echarts.areaStack.colors,
config.echartsAreaStackColor1,
config.echartsAreaStackColor2,
config.echartsAreaStackColor3,
config.echartsAreaStackColor4,
config.echartsAreaStackColor5,
],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
label: { label: {
backgroundColor: config.echartsAreaStackTooltipBackgroundColor, backgroundColor: echarts.areaStack.tooltipBackgroundColor,
}, },
}, },
}, },
legend: { legend: {
data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'], data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
textStyle: { textStyle: {
color: config.echartsAreaStackLegendTextColor, color: echarts.legendTextColor,
}, },
}, },
grid: { grid: {
@ -49,7 +46,7 @@ export class EchartsAreaStackComponent {
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: config.echartsAreaStackXAxisLineColor, color: echarts.xAxisLineColor,
}, },
}, },
}, },
@ -59,7 +56,7 @@ export class EchartsAreaStackComponent {
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { 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 data1 = [];
const data2 = []; const data2 = [];
const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: config.echartsBackgroundColor, backgroundColor: echarts.bg,
color: [config.echartsBarAnimationColor1, config.echartsBarAnimationColor2], color: [echarts.barAnimation.colors],
legend: { legend: {
data: ['bar', 'bar2'], data: ['bar', 'bar2'],
align: 'left', align: 'left',
textStyle: { textStyle: {
color: config.echartsBarAnimationLegendTextColor, color: echarts.legendTextColor,
}, },
}, },
xAxis: { xAxis: {
@ -34,14 +36,14 @@ export class EchartsBarAnimationComponent {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: config.echartsBarAnimationXAxisLineColor, color: echarts.xAxisLineColor,
}, },
}, },
}, },
yAxis: { yAxis: {
axisLine: { axisLine: {
lineStyle: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: config.echartsBackgroundColor, backgroundColor: echarts.bg,
color: [config.echartsBarColor1], color: [echarts.bar.color],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -36,7 +39,7 @@ export class EchartsBarComponent {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: config.echartsBarXAxisLineColor, color: echarts.xAxisLineColor,
}, },
}, },
}, },
@ -46,7 +49,7 @@ export class EchartsBarComponent {
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: config.echartsBackgroundColor, backgroundColor: echarts.bg,
color: [config.echartsLineColor1, config.echartsLineColor2, config.echartsLineColor3], color: [echarts.line.colors],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c}', formatter: '{a} <br/>{b} : {c}',
@ -23,7 +26,7 @@ export class EchartsLineComponent {
left: 'left', left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'], data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: { textStyle: {
color: config.echartsLineLegendTextColor, color: echarts.legendTextColor,
}, },
}, },
xAxis: { xAxis: {
@ -33,7 +36,7 @@ export class EchartsLineComponent {
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: config.echartsLineXAxisLineColor, color: echarts.xAxisLineColor,
}, },
}, },
}, },
@ -48,7 +51,7 @@ export class EchartsLineComponent {
name: 'y', name: 'y',
axisLine: { axisLine: {
lineStyle: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const colors = [
config.echartsMultipleXAxisColor1, const echarts: any = config.variables.echarts;
config.echartsMultipleXAxisColor2,
config.echartsMultipleXAxisColor3,
];
this.options = { this.options = {
backgroundColor: config.echartsBackgroundColor, backgroundColor: echarts.bg,
color: colors, color: echarts.multipleLine.colors,
tooltip: { tooltip: {
trigger: 'none', trigger: 'none',
axisPointer: { axisPointer: {
@ -30,7 +27,7 @@ export class EchartsMultipleXaxisComponent {
legend: { legend: {
data: ['2015 Precipitation', '2016 Precipitation'], data: ['2015 Precipitation', '2016 Precipitation'],
textStyle: { textStyle: {
color: config.echartsMultipleXAxisLegendTextColor, color: echarts.legendTextColor,
}, },
}, },
grid: { grid: {
@ -46,7 +43,7 @@ export class EchartsMultipleXaxisComponent {
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
color: colors[1], color: echarts.multipleLine.colors[1],
}, },
}, },
axisPointer: { axisPointer: {
@ -81,7 +78,7 @@ export class EchartsMultipleXaxisComponent {
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
color: colors[0], color: echarts.multipleLine.colors[0],
}, },
}, },
axisPointer: { axisPointer: {
@ -114,7 +111,7 @@ export class EchartsMultipleXaxisComponent {
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: config.echartsBackgroundColor, backgroundColor: echarts.bg,
color: [ color: echarts.pie.colors,
config.echartsPieColor1,
config.echartsPieColor2,
config.echartsPieColor3,
config.echartsPieColor4,
config.echartsPieColor5,
],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)', formatter: '{a} <br/>{b} : {c} ({d}%)',
@ -30,7 +27,7 @@ export class EchartsPieComponent {
left: 'left', left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'], data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: { textStyle: {
color: config.echartsPieLegendTextColor, color: echarts.legendTextColor,
}, },
}, },
series: [ series: [
@ -65,7 +62,7 @@ export class EchartsPieComponent {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, 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) { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: config.echartsBackgroundColor, backgroundColor: echarts.bg,
color: [config.echartsRadarColor1, config.echartsRadarColor2], color: echarts.radar.colors,
tooltip: {}, tooltip: {},
legend: { legend: {
data: ['Allocated Budget', 'Actual Spending'], data: ['Allocated Budget', 'Actual Spending'],
textStyle: { textStyle: {
color: config.echartsRadarLegendTextColor, color: echarts.legendTextColor,
}, },
}, },
radar: { radar: {
name: { name: {
textStyle: { textStyle: {
color: config.echartsRadarNameTextColor, color: echarts.radar.nameTextColor,
}, },
}, },
indicator: [ indicator: [
@ -43,7 +46,7 @@ export class EchartsRadarComponent {
// }, // },
splitArea: { splitArea: {
areaStyle: { 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 => { this.theme.getJsTheme().subscribe(config => {
const eTheme: any = config.variables.electricity;
this.option = { this.option = {
grid: { grid: {
left: 0, left: 0,
@ -43,11 +46,11 @@ export class ElectricityChartComponent {
}, },
}, },
position: 'top', position: 'top',
backgroundColor: config.trafficTooltipBg, backgroundColor: eTheme.tooltipBg,
borderColor: config.colorSuccess, borderColor: config.variables.colorSuccess,
borderWidth: 3, borderWidth: 3,
formatter: '{c0} kWh', 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: { xAxis: {
type: 'category', type: 'category',
@ -59,13 +62,13 @@ export class ElectricityChartComponent {
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: config.electricityAxisColor, color: eTheme.axisColor,
fontSize: 18, fontSize: 18,
}, },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: config.electricityAxisColor, color: eTheme.axisColor,
opacity: 0.3, opacity: 0.3,
width: '2', width: '2',
}, },
@ -85,7 +88,7 @@ export class ElectricityChartComponent {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: config.electricityAxisColor, color: eTheme.axisColor,
opacity: 0.2, opacity: 0.2,
width: '1', width: '1',
}, },
@ -112,12 +115,12 @@ export class ElectricityChartComponent {
type: 'dotted', type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: config.electricityLineGradFrom, color: eTheme.lineGradFrom,
}, { }, {
offset: 1, offset: 1,
color: config.electricityLineGradTo, color: eTheme.lineGradTo,
}]), }]),
shadowColor: config.electricityLineShadow, shadowColor: eTheme.lineShadow,
shadowBlur: 6, shadowBlur: 6,
shadowOffsetY: 12, shadowOffsetY: 12,
}, },
@ -126,10 +129,10 @@ export class ElectricityChartComponent {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: config.electricityAreaGradFrom, color: eTheme.areaGradFrom,
}, { }, {
offset: 1, offset: 1,
color: config.electricityAreaGradTo, color: eTheme.areaGradTo,
}]), }]),
}, },
}, },
@ -146,12 +149,12 @@ export class ElectricityChartComponent {
type: 'dotted', type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: config.electricityLineGradFrom, color: eTheme.lineGradFrom,
}, { }, {
offset: 1, offset: 1,
color: config.electricityLineGradTo, color: eTheme.lineGradTo,
}]), }]),
shadowColor: config.trafficShadowLineDarkBg, shadowColor: eTheme.shadowLineDarkBg,
shadowBlur: 14, shadowBlur: 14,
}, },
}, },

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

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

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

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