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

refactor(charts): change color scheme for d3 charts

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-29 11:42:03 +03:00
parent bdca59b793
commit 933881f69e
10 changed files with 70 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -81,14 +81,5 @@ export const COSMIC_THEME = {
axisLineColor: '#a1a1e5',
textColor: '#ffffff',
},
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'],
},
},
};

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

@ -75,14 +75,5 @@ export const DEFAULT_THEME = {
axisLineColor: '#cccccc',
textColor: '#484848',
},
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'],
},
},
};

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

@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
selector: 'ngx-d3-advanced-pie',
template: `
<ngx-charts-advanced-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single">
</ngx-charts-advanced-pie-chart>
@ -26,13 +25,13 @@ export class D3AdvancedPieComponent {
value: 7200000,
},
];
view: any[] = [700, 400];
colorScheme: any;
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: (<any>config.variables.d3).advancedPie,
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}

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

@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
selector: 'ngx-d3-area-stack',
template: `
<ngx-charts-area-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
@ -20,50 +19,34 @@ import { NbThemeService } from '@nebular/theme';
`,
})
export class D3AreaStackComponent {
multi = [
{
name: 'Germany',
series: [
{
name: '2010',
value: 7300000,
},
{
name: '2011',
value: 8940000,
},
],
},
{
name: 'USA',
series: [
{
name: '2010',
value: 7870000,
},
{
name: '2011',
value: 8270000,
},
],
},
{
name: 'France',
series: [
{
name: '2010',
value: 5000002,
},
{
name: '2011',
value: 5800000,
},
],
},
];
view: any[] = [700, 400];
multi = [{
name: 'Germany',
series: [{
name: '2010',
value: 7300000,
}, {
name: '2011',
value: 8940000,
}],
}, {
name: 'USA',
series: [{
name: '2010',
value: 7870000,
}, {
name: '2011',
value: 8270000,
}],
}, {
name: 'France',
series: [{
name: '2010',
value: 5000002,
}, {
name: '2011',
value: 5800000,
}],
}];
showLegend = true;
autoScale = true;
showXAxis = true;
@ -76,8 +59,9 @@ export class D3AreaStackComponent {
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: (<any>config.variables.d3).areaStack,
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}

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

@ -5,49 +5,35 @@ import { NbThemeService } from '@nebular/theme';
selector: 'ngx-d3-bar',
template: `
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[results]="results"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
`,
})
export class D3BarComponent {
single = [
{
name: 'Germany',
value: 8940000,
},
{
name: 'USA',
value: 5000000,
},
{
name: 'France',
value: 7200000,
},
results = [
{ name: 'Germany', value: 8940 },
{ name: 'USA', value: 5000 },
{ name: 'France', value: 7200 },
];
view: any[] = [700, 400];
showLegend = true;
showXAxis = true;
showYAxis = true;
showLabels = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme: any;
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: (<any>config.variables.d3).bar,
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}

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

@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
selector: 'ngx-d3-line',
template: `
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
@ -25,11 +24,11 @@ export class D3LineComponent {
series: [
{
name: '2010',
value: 7300000,
value: 7300,
},
{
name: '2011',
value: 8940000,
value: 8940,
},
],
},
@ -38,11 +37,11 @@ export class D3LineComponent {
series: [
{
name: '2010',
value: 7870000,
value: 7870,
},
{
name: '2011',
value: 8270000,
value: 8270,
},
],
},
@ -51,20 +50,18 @@ export class D3LineComponent {
series: [
{
name: '2010',
value: 5000002,
value: 5002,
},
{
name: '2011',
value: 5800000,
value: 5800,
},
],
},
];
view: any[] = [700, 400];
showLegend = true;
showXAxis = true;
showYAxis = true;
showLabels = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
@ -73,8 +70,9 @@ export class D3LineComponent {
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: (<any>config.variables.d3).line,
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}

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

@ -5,44 +5,28 @@ import { NbThemeService } from '@nebular/theme';
selector: 'ngx-d3-pie',
template: `
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"
[results]="results"
[legend]="showLegend"
[labels]="showLabels">
</ngx-charts-pie-chart>
`,
})
export class D3PieComponent {
single = [
{
name: 'Germany',
value: 8940000,
},
{
name: 'USA',
value: 5000000,
},
{
name: 'France',
value: 7200000,
},
results = [
{ name: 'Germany', value: 8940 },
{ name: 'USA', value: 5000 },
{ name: 'France', value: 7200 },
];
view: any[] = [700, 400];
showLegend = true;
showXAxis = true;
showYAxis = true;
showLabels = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme: any;
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: (<any>config.variables.d3).pie,
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}

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

@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
selector: 'ngx-d3-polar',
template: `
<ngx-charts-polar-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
@ -73,7 +72,6 @@ export class D3PolarComponent {
],
},
];
view: any[] = [700, 400];
showLegend = true;
autoScale = true;
showXAxis = true;
@ -86,8 +84,9 @@ export class D3PolarComponent {
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
this.colorScheme = {
domain: (<any>config.variables.d3).polar,
domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
};
});
}

10
src/app/pages/charts/d3/d3.component.scss
View file

@ -1,4 +1,14 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-d3-bar,
ngx-d3-pie,
ngx-d3-advanced-pie,
ngx-d3-area-stack,
ngx-d3-line,
ngx-d3-polar {
display: block;
width: 100%;
height: 100%;
}
}

6
src/app/pages/pages-menu.ts
View file

@ -75,12 +75,12 @@ export const MENU_ITEMS: List<NbMenuItem> = List([{
children: List<NbMenuItem>([{
title: 'Echarts',
link: '/pages/charts/echarts',
}, {
title: 'D3',
link: '/pages/charts/d3',
}, {
title: 'Charts.js',
link: '/pages/charts/chartjs',
}, {
title: 'D3',
link: '/pages/charts/d3',
}]),
}, {
title: 'Editors',