From b772882cd6d60b95a567bf3fc7a22b38e3040d34 Mon Sep 17 00:00:00 2001 From: KostyaDanovsky Date: Tue, 1 Aug 2017 15:42:06 +0300 Subject: [PATCH] fix(demo): refactor js theme using --- src/app/@theme/styles/theme.cosmic.ts | 230 +++++------- src/app/@theme/styles/theme.default.ts | 141 +++++-- src/app/@theme/theme.module.ts | 2 +- .../chartjs-bar-horizontal.component.ts | 21 +- .../charts/chartjs/chartjs-bar.component.ts | 13 +- .../charts/chartjs/chartjs-line.component.ts | 13 +- .../chartjs-multiple-xaxis.component.ts | 13 +- .../charts/chartjs/chartjs-pie.component.ts | 19 +- .../charts/chartjs/chartjs-radar.component.ts | 19 +- .../charts/d3/d3-advanced-pie.component.ts | 7 +- .../charts/d3/d3-area-stack.component.ts | 7 +- src/app/pages/charts/d3/d3-bar.component.ts | 2 +- src/app/pages/charts/d3/d3-line.component.ts | 2 +- src/app/pages/charts/d3/d3-pie.component.ts | 2 +- src/app/pages/charts/d3/d3-polar.component.ts | 2 +- .../echarts/echarts-area-stack.component.ts | 21 +- .../echarts-bar-animation.component.ts | 12 +- .../charts/echarts/echarts-bar.component.ts | 11 +- .../charts/echarts/echarts-line.component.ts | 13 +- .../echarts-multiple-xaxis.component.ts | 19 +- .../charts/echarts/echarts-pie.component.ts | 17 +- .../charts/echarts/echarts-radar.component.ts | 13 +- .../electricity-chart.component.ts | 31 +- .../pages/dashboard/solar/solar.component.ts | 20 +- .../temperature/temperature.component.html | 18 +- .../temperature/temperature.component.ts | 4 +- .../traffic/traffic-chart.component.ts | 26 +- .../pages/maps/bubble/bubble-map.component.ts | 355 +++++++++--------- 28 files changed, 561 insertions(+), 492 deletions(-) diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts index 4e30cfaf..f072a245 100644 --- a/src/app/@theme/styles/theme.cosmic.ts +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -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'], + }, }, }; diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts index 4ad0a8d1..a6eee6ea 100644 --- a/src/app/@theme/styles/theme.default.ts +++ b/src/app/@theme/styles/theme.default.ts @@ -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'], + }, }, }; diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index afb5eb81..52ba553c 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -63,7 +63,7 @@ const PIPES = [CapitalizePipe, PluralPipe, RoundPipe]; const NGA_THEME_PROVIDERS = [ ...NgaThemeModule.forRoot( { - name: 'cosmic', + name: 'default', }, [DEFAULT_THEME, COSMIC_THEME], ).providers, diff --git a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts index d85332d5..3849d154 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts @@ -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, }, }, }; diff --git a/src/app/pages/charts/chartjs/chartjs-bar.component.ts b/src/app/pages/charts/chartjs/chartjs-bar.component.ts index 9d91405a..ee09fbca 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar.component.ts @@ -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, }, }, ], diff --git a/src/app/pages/charts/chartjs/chartjs-line.component.ts b/src/app/pages/charts/chartjs/chartjs-line.component.ts index f553c499..b5dc3c2a 100644 --- a/src/app/pages/charts/chartjs/chartjs-line.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-line.component.ts @@ -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, }, }, }; diff --git a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts index 822db18f..6ebada2f 100644 --- a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts @@ -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, }, }, ], diff --git a/src/app/pages/charts/chartjs/chartjs-pie.component.ts b/src/app/pages/charts/chartjs/chartjs-pie.component.ts index 7e179a70..0a66f8ee 100644 --- a/src/app/pages/charts/chartjs/chartjs-pie.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-pie.component.ts @@ -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, }, }, }; diff --git a/src/app/pages/charts/chartjs/chartjs-radar.component.ts b/src/app/pages/charts/chartjs/chartjs-radar.component.ts index 457d005d..538992d4 100644 --- a/src/app/pages/charts/chartjs/chartjs-radar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-radar.component.ts @@ -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, }, }, }; diff --git a/src/app/pages/charts/d3/d3-advanced-pie.component.ts b/src/app/pages/charts/d3/d3-advanced-pie.component.ts index 129edc7c..b702ef97 100644 --- a/src/app/pages/charts/d3/d3-advanced-pie.component.ts +++ b/src/app/pages/charts/d3/d3-advanced-pie.component.ts @@ -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: (config.variables.d3).advancedPie, }; }); } diff --git a/src/app/pages/charts/d3/d3-area-stack.component.ts b/src/app/pages/charts/d3/d3-area-stack.component.ts index 6a2a3692..f8ffe9e0 100644 --- a/src/app/pages/charts/d3/d3-area-stack.component.ts +++ b/src/app/pages/charts/d3/d3-area-stack.component.ts @@ -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: (config.variables.d3).areaStack, }; }); } diff --git a/src/app/pages/charts/d3/d3-bar.component.ts b/src/app/pages/charts/d3/d3-bar.component.ts index 332e98d5..6b29f3c2 100644 --- a/src/app/pages/charts/d3/d3-bar.component.ts +++ b/src/app/pages/charts/d3/d3-bar.component.ts @@ -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: (config.variables.d3).bar, }; }); } diff --git a/src/app/pages/charts/d3/d3-line.component.ts b/src/app/pages/charts/d3/d3-line.component.ts index 4c31ef08..841776fb 100644 --- a/src/app/pages/charts/d3/d3-line.component.ts +++ b/src/app/pages/charts/d3/d3-line.component.ts @@ -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: (config.variables.d3).line, }; }); } diff --git a/src/app/pages/charts/d3/d3-pie.component.ts b/src/app/pages/charts/d3/d3-pie.component.ts index 55a82930..dc8d1d60 100644 --- a/src/app/pages/charts/d3/d3-pie.component.ts +++ b/src/app/pages/charts/d3/d3-pie.component.ts @@ -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: (config.variables.d3).pie, }; }); } diff --git a/src/app/pages/charts/d3/d3-polar.component.ts b/src/app/pages/charts/d3/d3-polar.component.ts index 0eac641a..1f8d7afd 100644 --- a/src/app/pages/charts/d3/d3-polar.component.ts +++ b/src/app/pages/charts/d3/d3-polar.component.ts @@ -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: (config.variables.d3).polar, }; }); } diff --git a/src/app/pages/charts/echarts/echarts-area-stack.component.ts b/src/app/pages/charts/echarts/echarts-area-stack.component.ts index f0463bf6..93c27191 100644 --- a/src/app/pages/charts/echarts/echarts-area-stack.component.ts +++ b/src/app/pages/charts/echarts/echarts-area-stack.component.ts @@ -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, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts b/src/app/pages/charts/echarts/echarts-bar-animation.component.ts index a35760fa..036bebc0 100644 --- a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts +++ b/src/app/pages/charts/echarts/echarts-bar-animation.component.ts @@ -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, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-bar.component.ts b/src/app/pages/charts/echarts/echarts-bar.component.ts index 1270513b..f7e6c1ed 100644 --- a/src/app/pages/charts/echarts/echarts-bar.component.ts +++ b/src/app/pages/charts/echarts/echarts-bar.component.ts @@ -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, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-line.component.ts b/src/app/pages/charts/echarts/echarts-line.component.ts index 732ec7be..b00d206c 100644 --- a/src/app/pages/charts/echarts/echarts-line.component.ts +++ b/src/app/pages/charts/echarts/echarts-line.component.ts @@ -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}
{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, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts b/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts index b3cdb43d..0fa09d46 100644 --- a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts +++ b/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts @@ -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, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-pie.component.ts b/src/app/pages/charts/echarts/echarts-pie.component.ts index b00e947a..b54e9aa2 100644 --- a/src/app/pages/charts/echarts/echarts-pie.component.ts +++ b/src/app/pages/charts/echarts/echarts-pie.component.ts @@ -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}
{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, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-radar.component.ts b/src/app/pages/charts/echarts/echarts-radar.component.ts index a0edbe6b..02011f8e 100644 --- a/src/app/pages/charts/echarts/echarts-radar.component.ts +++ b/src/app/pages/charts/echarts/echarts-radar.component.ts @@ -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, }, }, }, diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts index e40dea85..f5e0cc5a 100644 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts +++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts @@ -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, }, }, diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts index a9f8c2f9..832f4b39 100644 --- a/src/app/pages/dashboard/solar/solar.component.ts +++ b/src/app/pages/dashboard/solar/solar.component.ts @@ -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, }, }, diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html index 842ab889..add605bd 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.html +++ b/src/app/pages/dashboard/temperature/temperature.component.html @@ -5,13 +5,8 @@
+ [min]="12" [max]="30" [disableArcColor]="colors.layoutBg" + [fillColors]="colors.temperature">
@@ -45,13 +40,8 @@
+ [min]="0" [max]="100" [disableArcColor]="colors.layoutBg" + [fillColors]="colors.temperature">
diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts index 919d3b1d..f12d5042 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.ts +++ b/src/app/pages/dashboard/temperature/temperature.component.ts @@ -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; }); } } diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts index 272d81f0..ffc62fbe 100644 --- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts +++ b/src/app/pages/dashboard/traffic/traffic-chart.component.ts @@ -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, }]), }, }, diff --git a/src/app/pages/maps/bubble/bubble-map.component.ts b/src/app/pages/maps/bubble/bubble-map.component.ts index 71ba72b7..65b76812 100644 --- a/src/app/pages/maps/bubble/bubble-map.component.ts +++ b/src/app/pages/maps/bubble/bubble-map.component.ts @@ -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]; + } }