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

fix(charts): change color scheme for the ecahrts

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-28 13:34:21 +03:00
parent 64a0fd330b
commit 0c323f55ef
16 changed files with 254 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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: {

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

@ -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: {

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

@ -99,7 +99,7 @@ export class ChartjsBarHorizontalComponent {
legend: {
position: 'right',
labels: {
fontColor: chartjs.legendTextColor,
fontColor: chartjs.textColor,
},
},
};

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

@ -39,7 +39,7 @@ export class ChartjsBarComponent {
responsive: true,
legend: {
labels: {
fontColor: chartjs.legendTextColor,
fontColor: chartjs.textColor,
},
},
scales: {

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

@ -63,7 +63,7 @@ export class ChartjsLineComponent {
},
legend: {
labels: {
fontColor: chartjs.legendTextColor,
fontColor: chartjs.textColor,
},
},
};

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

@ -104,7 +104,7 @@ export class ChartjsMultipleXaxisComponent {
legend: {
position: 'bottom',
labels: {
fontColor: chartjs.legendTextColor,
fontColor: chartjs.textColor,
},
},
hover: {

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

@ -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,
},
},
};

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

@ -48,7 +48,7 @@ export class ChartjsRadarComponent {
scaleFontColor: 'white',
legend: {
labels: {
fontColor: chartjs.legendTextColor,
fontColor: chartjs.textColor,
},
},
scale: {

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

@ -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';
<div echarts [options]="options" class="echart"></div>
`,
})
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],
},
],

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

@ -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';
<div echarts [options]="options" class="echart"></div>
`,
})
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',

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

@ -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';
<div echarts [options]="options" class="echart"></div>
`,
})
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,
},
},
},

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

@ -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';
<div echarts [options]="options" class="echart"></div>
`,
})
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} <br/>{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',

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

@ -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';
<div echarts [options]="options" class="echart"></div>
`,
})
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,
},
},
},

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

@ -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';
<div echarts [options]="options" class="echart"></div>
`,
})
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} <br/>{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,
},
},
},
},

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

@ -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';
<div echarts [options]="options" class="echart"></div>
`,
})
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',
},
},
},

8
src/app/pages/charts/echarts/echarts.component.scss
View file

@ -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%;
}
}