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

feat(charts): integrate js theme with d3

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-31 15:03:12 +03:00
parent 746d18680e
commit 672615b710
8 changed files with 100 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -119,5 +119,35 @@ export const COSMIC_THEME = {
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',
},
};

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

@ -28,12 +28,6 @@ export class ChartjsPieComponent {
this.theme.getJsTheme().subscribe(config => {
this.chartOptions = {
responsive: true,
scale: {
pointLabels: {
fontSize: 14,
fontColor: config.chartjsRadarPointLabelFontColor,
},
},
scales: {
xAxes: [
{

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-d3-advanced-pie',
@ -26,7 +27,18 @@ export class D3AdvancedPieComponent {
},
];
view: any[] = [700, 400];
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
colorScheme: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [
config.d3AdvancedPieColor1,
config.d3AdvancedPieColor2,
config.d3AdvancedPieColor3,
config.d3AdvancedPieColor4,
],
};
});
}
}

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-d3-area-stack',
@ -64,9 +65,6 @@ export class D3AreaStackComponent {
];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
autoScale = true;
showXAxis = true;
showYAxis = true;
@ -74,4 +72,18 @@ export class D3AreaStackComponent {
showYAxisLabel = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [
config.d3AreaStackColor1,
config.d3AreaStackColor2,
config.d3AreaStackColor3,
config.d3AreaStackColor4,
],
};
});
}
}

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-d3-bar',
@ -34,9 +35,6 @@ export class D3BarComponent {
];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
showXAxis = true;
showYAxis = true;
showLabels = true;
@ -44,4 +42,13 @@ export class D3BarComponent {
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3BarColor1, config.d3BarColor2, config.d3BarColor3, config.d3BarColor4],
};
});
}
}

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-d3-line',
@ -61,9 +62,6 @@ export class D3LineComponent {
];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
showXAxis = true;
showYAxis = true;
showLabels = true;
@ -71,4 +69,13 @@ export class D3LineComponent {
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3LineColor1, config.d3LineColor2, config.d3LineColor3, config.d3LineColor4],
};
});
}
}

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-d3-pie',
@ -29,9 +30,6 @@ export class D3PieComponent {
];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
showXAxis = true;
showYAxis = true;
showLabels = true;
@ -39,4 +37,13 @@ export class D3PieComponent {
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3PieColor1, config.d3PieColor2, config.d3PieColor3, config.d3PieColor4],
};
});
}
}

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-d3-polar',
@ -74,9 +75,6 @@ export class D3PolarComponent {
];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
autoScale = true;
showXAxis = true;
showYAxis = true;
@ -84,4 +82,13 @@ export class D3PolarComponent {
showYAxisLabel = true;
xAxisLabel = 'Country';
yAxisLabel = 'Population';
colorScheme: any;
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.colorScheme = {
domain: [config.d3PolarColor1, config.d3PolarColor2, config.d3PolarColor3, config.d3PolarColor4],
};
});
}
}