diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts index 9ca1cf22..d823c4f0 100644 --- a/src/app/@theme/styles/theme.cosmic.ts +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -68,48 +68,13 @@ export const COSMIC_THEME = { }, 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', - }, + bg: '#3d3780', + textColor: '#ffffff', + axisLineColor: '#a1a1e5', + splitLineColor: '#342e73', + itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', + tooltipBackgroundColor: '#6a7985', + areaOpacity: '1', }, chartjs: { diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts index 3a7042dd..392939d9 100644 --- a/src/app/@theme/styles/theme.default.ts +++ b/src/app/@theme/styles/theme.default.ts @@ -62,48 +62,13 @@ export const DEFAULT_THEME = { }, 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', - }, + bg: '#ffffff', + textColor: '#484848', + axisLineColor: '#bbbbbb', + splitLineColor: '#ebeef2', + itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', + tooltipBackgroundColor: '#6a7985', + areaOpacity: '0.7', }, chartjs: { 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 6577e989..ee6b4d8f 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts @@ -99,7 +99,7 @@ export class ChartjsBarHorizontalComponent { legend: { position: 'right', labels: { - fontColor: chartjs.legendTextColor, + fontColor: chartjs.textColor, }, }, }; diff --git a/src/app/pages/charts/chartjs/chartjs-bar.component.ts b/src/app/pages/charts/chartjs/chartjs-bar.component.ts index 81bc2390..a0e112b1 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar.component.ts @@ -39,7 +39,7 @@ export class ChartjsBarComponent { responsive: true, legend: { labels: { - fontColor: chartjs.legendTextColor, + fontColor: chartjs.textColor, }, }, scales: { diff --git a/src/app/pages/charts/chartjs/chartjs-line.component.ts b/src/app/pages/charts/chartjs/chartjs-line.component.ts index 34798b9d..2fbd465b 100644 --- a/src/app/pages/charts/chartjs/chartjs-line.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-line.component.ts @@ -63,7 +63,7 @@ export class ChartjsLineComponent { }, legend: { labels: { - fontColor: chartjs.legendTextColor, + fontColor: chartjs.textColor, }, }, }; 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 83930be5..a7153684 100644 --- a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts @@ -104,7 +104,7 @@ export class ChartjsMultipleXaxisComponent { legend: { position: 'bottom', labels: { - fontColor: chartjs.legendTextColor, + fontColor: chartjs.textColor, }, }, hover: { diff --git a/src/app/pages/charts/chartjs/chartjs-pie.component.ts b/src/app/pages/charts/chartjs/chartjs-pie.component.ts index 04fcfc2a..26b9b564 100644 --- a/src/app/pages/charts/chartjs/chartjs-pie.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-pie.component.ts @@ -34,7 +34,7 @@ export class ChartjsPieComponent { scale: { pointLabels: { fontSize: 14, - fontColor: chartjs.legendTextColor, + fontColor: chartjs.textColor, }, }, scales: { @@ -63,7 +63,7 @@ export class ChartjsPieComponent { }, legend: { labels: { - fontColor: chartjs.legendTextColor, + fontColor: chartjs.textColor, }, }, }; diff --git a/src/app/pages/charts/chartjs/chartjs-radar.component.ts b/src/app/pages/charts/chartjs/chartjs-radar.component.ts index 5b90e915..815827ef 100644 --- a/src/app/pages/charts/chartjs/chartjs-radar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-radar.component.ts @@ -48,7 +48,7 @@ export class ChartjsRadarComponent { scaleFontColor: 'white', legend: { labels: { - fontColor: chartjs.legendTextColor, + fontColor: chartjs.textColor, }, }, scale: { 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 2a030c52..4764b409 100644 --- a/src/app/pages/charts/echarts/echarts-area-stack.component.ts +++ b/src/app/pages/charts/echarts/echarts-area-stack.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { NbThemeService } from '@nebular/theme'; @Component({ @@ -7,30 +7,34 @@ import { NbThemeService } from '@nebular/theme';
`, }) -export class EchartsAreaStackComponent { - options: any; +export class EchartsAreaStackComponent implements AfterViewInit { + options: any = {}; constructor(private theme: NbThemeService) { + } + + ngAfterViewInit() { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const echarts: any = config.variables.echarts; this.options = { backgroundColor: echarts.bg, - color: echarts.areaStack.colors, + color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { - backgroundColor: echarts.areaStack.tooltipBackgroundColor, + backgroundColor: echarts.tooltipBackgroundColor, }, }, }, legend: { data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'], textStyle: { - color: echarts.legendTextColor, + color: echarts.textColor, }, }, grid: { @@ -44,9 +48,17 @@ export class EchartsAreaStackComponent { type: 'category', boundaryGap: false, data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], + axisTick: { + alignWithLabel: true, + }, axisLine: { lineStyle: { - color: echarts.xAxisLineColor, + color: echarts.axisLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, }, }, }, @@ -56,7 +68,17 @@ export class EchartsAreaStackComponent { type: 'value', axisLine: { lineStyle: { - color: echarts.yAxisLineColor, + color: echarts.axisLineColor, + }, + }, + splitLine: { + lineStyle: { + color: echarts.splitLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, }, }, }, @@ -66,28 +88,28 @@ export class EchartsAreaStackComponent { name: 'Mail marketing', type: 'line', stack: 'Total amount', - areaStyle: { normal: {} }, + areaStyle: { normal: { opacity: echarts.areaOpacity } }, data: [120, 132, 101, 134, 90, 230, 210], }, { name: 'Affiliate advertising', type: 'line', stack: 'Total amount', - areaStyle: { normal: {} }, + areaStyle: { normal: { opacity: echarts.areaOpacity } }, data: [220, 182, 191, 234, 290, 330, 310], }, { name: 'Video ad', type: 'line', stack: 'Total amount', - areaStyle: { normal: {} }, + areaStyle: { normal: { opacity: echarts.areaOpacity } }, data: [150, 232, 201, 154, 190, 330, 410], }, { name: 'Direct interview', type: 'line', stack: 'Total amount', - areaStyle: { normal: {} }, + areaStyle: { normal: { opacity: echarts.areaOpacity } }, data: [320, 332, 301, 334, 390, 330, 320], }, { @@ -98,9 +120,12 @@ export class EchartsAreaStackComponent { normal: { show: true, position: 'top', + textStyle: { + color: echarts.textColor, + }, }, }, - areaStyle: { normal: {} }, + areaStyle: { normal: { opacity: echarts.areaOpacity } }, data: [820, 932, 901, 934, 1290, 1330, 1320], }, ], 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 f0a8aa75..75db9713 100644 --- a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts +++ b/src/app/pages/charts/echarts/echarts-bar-animation.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { NbThemeService } from '@nebular/theme'; @Component({ @@ -7,46 +7,69 @@ import { NbThemeService } from '@nebular/theme';
`, }) -export class EchartsBarAnimationComponent { - options: any; +export class EchartsBarAnimationComponent implements AfterViewInit { + options: any = {}; constructor(private theme: NbThemeService) { + } + + ngAfterViewInit() { this.theme.getJsTheme().subscribe(config => { const xAxisData = []; const data1 = []; const data2 = []; + const colors: any = config.variables; const echarts: any = config.variables.echarts; this.options = { backgroundColor: echarts.bg, - color: [echarts.barAnimation.colors], + color: [colors.primaryLight, colors.infoLight], legend: { data: ['bar', 'bar2'], align: 'left', textStyle: { - color: echarts.legendTextColor, + color: echarts.textColor, }, }, - xAxis: { - data: xAxisData, - silent: false, - splitLine: { - show: false, - }, - axisLine: { - lineStyle: { - color: echarts.xAxisLineColor, + xAxis: [ + { + data: xAxisData, + silent: false, + axisTick: { + alignWithLabel: true, + }, + axisLine: { + lineStyle: { + color: echarts.axisLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, + }, }, }, - }, - yAxis: { - axisLine: { - lineStyle: { - color: echarts.yAxisLineColor, + ], + yAxis: [ + { + axisLine: { + lineStyle: { + color: echarts.axisLineColor, + }, + }, + splitLine: { + lineStyle: { + color: echarts.splitLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, + }, }, }, - }, + ], series: [ { name: 'bar', diff --git a/src/app/pages/charts/echarts/echarts-bar.component.ts b/src/app/pages/charts/echarts/echarts-bar.component.ts index a43c586b..dcaffd8a 100644 --- a/src/app/pages/charts/echarts/echarts-bar.component.ts +++ b/src/app/pages/charts/echarts/echarts-bar.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { NbThemeService } from '@nebular/theme'; @Component({ @@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
`, }) -export class EchartsBarComponent { - options: any; +export class EchartsBarComponent implements AfterViewInit { + options: any = {}; constructor(private theme: NbThemeService) { + } + + ngAfterViewInit() { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const echarts: any = config.variables.echarts; this.options = { backgroundColor: echarts.bg, - color: [echarts.bar.color], + color: [colors.primaryLight], tooltip: { trigger: 'axis', axisPointer: { @@ -39,7 +43,12 @@ export class EchartsBarComponent { }, axisLine: { lineStyle: { - color: echarts.xAxisLineColor, + color: echarts.axisLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, }, }, }, @@ -49,7 +58,17 @@ export class EchartsBarComponent { type: 'value', axisLine: { lineStyle: { - color: echarts.yAxisLineColor, + color: echarts.axisLineColor, + }, + }, + splitLine: { + lineStyle: { + color: echarts.splitLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-line.component.ts b/src/app/pages/charts/echarts/echarts-line.component.ts index 568273d0..a412f3cb 100644 --- a/src/app/pages/charts/echarts/echarts-line.component.ts +++ b/src/app/pages/charts/echarts/echarts-line.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { NbThemeService } from '@nebular/theme'; @Component({ @@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
`, }) -export class EchartsLineComponent { - options: any; +export class EchartsLineComponent implements AfterViewInit { + options: any = {}; constructor(private theme: NbThemeService) { + } + + ngAfterViewInit() { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const echarts: any = config.variables.echarts; this.options = { backgroundColor: echarts.bg, - color: [echarts.line.colors], + color: [colors.danger, colors.primary, colors.info], tooltip: { trigger: 'item', formatter: '{a}
{b} : {c}', @@ -26,35 +30,54 @@ export class EchartsLineComponent { left: 'left', data: ['Line 1', 'Line 2', 'Line 3'], textStyle: { - color: echarts.legendTextColor, + color: echarts.textColor, }, }, - xAxis: { - type: 'category', - name: 'x', - splitLine: { show: false }, - data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], - axisLine: { - lineStyle: { - color: echarts.xAxisLineColor, + xAxis: [ + { + type: 'category', + data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], + axisTick: { + alignWithLabel: true, + }, + axisLine: { + lineStyle: { + color: echarts.axisLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, + }, }, }, - }, + ], + yAxis: [ + { + type: 'log', + axisLine: { + lineStyle: { + color: echarts.axisLineColor, + }, + }, + splitLine: { + lineStyle: { + color: echarts.splitLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, + }, + }, + }, + ], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, }, - yAxis: { - type: 'log', - name: 'y', - axisLine: { - lineStyle: { - color: echarts.yAxisLineColor, - }, - }, - }, series: [ { name: 'Line 1', 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 2873b154..d1dcf771 100644 --- a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts +++ b/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, AfterViewInit } from '@angular/core'; import { NbThemeService } from '@nebular/theme'; @Component({ @@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
`, }) -export class EchartsMultipleXaxisComponent { - options: any; +export class EchartsMultipleXaxisComponent implements AfterViewInit { + options: any = {}; constructor(private theme: NbThemeService) { + } + + ngAfterViewInit() { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const echarts: any = config.variables.echarts; this.options = { backgroundColor: echarts.bg, - color: echarts.multipleLine.colors, + color: [colors.success, colors.info], tooltip: { trigger: 'none', axisPointer: { @@ -27,7 +31,7 @@ export class EchartsMultipleXaxisComponent { legend: { data: ['2015 Precipitation', '2016 Precipitation'], textStyle: { - color: echarts.legendTextColor, + color: echarts.textColor, }, }, grid: { @@ -43,7 +47,12 @@ export class EchartsMultipleXaxisComponent { axisLine: { onZero: false, lineStyle: { - color: echarts.multipleLine.colors[1], + color: colors.info, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, }, }, axisPointer: { @@ -78,7 +87,12 @@ export class EchartsMultipleXaxisComponent { axisLine: { onZero: false, lineStyle: { - color: echarts.multipleLine.colors[0], + color: colors.success, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, }, }, axisPointer: { @@ -111,7 +125,17 @@ export class EchartsMultipleXaxisComponent { type: 'value', axisLine: { lineStyle: { - color: echarts.yAxisLineColor, + color: echarts.axisLineColor, + }, + }, + splitLine: { + lineStyle: { + color: echarts.splitLineColor, + }, + }, + axisLabel: { + textStyle: { + color: echarts.textColor, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-pie.component.ts b/src/app/pages/charts/echarts/echarts-pie.component.ts index cc1d1ed5..fb9620fd 100644 --- a/src/app/pages/charts/echarts/echarts-pie.component.ts +++ b/src/app/pages/charts/echarts/echarts-pie.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { NbThemeService } from '@nebular/theme'; @Component({ @@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
`, }) -export class EchartsPieComponent { - options: any; +export class EchartsPieComponent implements AfterViewInit { + options: any = {}; constructor(private theme: NbThemeService) { + } + + ngAfterViewInit() { this.theme.getJsTheme().subscribe(config => { + const colors = config.variables; const echarts: any = config.variables.echarts; this.options = { backgroundColor: echarts.bg, - color: echarts.pie.colors, + color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight], tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)', @@ -27,42 +31,41 @@ export class EchartsPieComponent { left: 'left', data: ['USA', 'Germany', 'France', 'Canada', 'Russia'], textStyle: { - color: echarts.legendTextColor, + color: echarts.textColor, }, }, series: [ { name: 'Countries', type: 'pie', - radius: '55%', - center: ['50%', '60%'], + radius: '80%', + center: ['50%', '50%'], data: [ - { - value: 335, - name: 'Germany', - }, - { - value: 310, - name: 'France', - }, - { - value: 234, - name: 'Canada', - }, - { - value: 135, - name: 'Russia', - }, - { - value: 1548, - name: 'USA', - }, + { value: 335, name: 'Germany' }, + { value: 310, name: 'France' }, + { value: 234, name: 'Canada' }, + { value: 135, name: 'Russia' }, + { value: 1548, name: 'USA' }, ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: echarts.pie.itemHoverShadowColor, + shadowColor: echarts.itemHoverShadowColor, + }, + }, + label: { + normal: { + textStyle: { + color: echarts.textColor, + }, + }, + }, + labelLine: { + normal: { + lineStyle: { + color: echarts.axisLineColor, + }, }, }, }, diff --git a/src/app/pages/charts/echarts/echarts-radar.component.ts b/src/app/pages/charts/echarts/echarts-radar.component.ts index f8fb5b1d..07a13322 100644 --- a/src/app/pages/charts/echarts/echarts-radar.component.ts +++ b/src/app/pages/charts/echarts/echarts-radar.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { AfterViewInit, Component } from '@angular/core'; import { NbThemeService } from '@nebular/theme'; @Component({ @@ -7,28 +7,32 @@ import { NbThemeService } from '@nebular/theme';
`, }) -export class EchartsRadarComponent { - options: any; +export class EchartsRadarComponent implements AfterViewInit { + options: any = {}; constructor(private theme: NbThemeService) { + } + + ngAfterViewInit() { this.theme.getJsTheme().subscribe(config => { + const colors: any = config.variables; const echarts: any = config.variables.echarts; this.options = { backgroundColor: echarts.bg, - color: echarts.radar.colors, + color: [colors.danger, colors.warning], tooltip: {}, legend: { data: ['Allocated Budget', 'Actual Spending'], textStyle: { - color: echarts.legendTextColor, + color: echarts.textColor, }, }, radar: { name: { textStyle: { - color: echarts.radar.nameTextColor, + color: echarts.textColor, }, }, indicator: [ @@ -39,14 +43,9 @@ export class EchartsRadarComponent { { name: 'Development', max: 52000 }, { name: 'Marketing', max: 25000 }, ], - // axisLine: { - // lineStyle: { - // color: 'white', - // }, - // }, splitArea: { areaStyle: { - color: echarts.radar.splitAreaStyleColor, + color: 'transparent', }, }, }, diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss index 025b4b5f..1b1c0fcf 100644 --- a/src/app/pages/charts/echarts/echarts.component.scss +++ b/src/app/pages/charts/echarts/echarts.component.scss @@ -3,12 +3,18 @@ @include nb-install-component() { ngx-echarts-pie, ngx-echarts-bar, - ngx-echarts-line { + ngx-echarts-line, + ngx-echarts-multiple-xaxis, + ngx-echarts-area-stack, + ngx-echarts-bar-animation, + ngx-echarts-radar { display: block; height: 100%; + width: 100%; } /deep/ .echart { height: 100%; + width: 100%; } }