Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-07 22:22:33 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): refactor js theme using

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-01 15:42:06 +03:00
parent 672615b710
commit b772882cd6
28 changed files with 561 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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: (<any>config.variables.d3).advancedPie,
};
});
}

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

@ -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: (<any>config.variables.d3).areaStack,
};
});
}

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

@ -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: (<any>config.variables.d3).bar,
};
});
}

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

@ -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: (<any>config.variables.d3).line,
};
});
}

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

@ -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: (<any>config.variables.d3).pie,
};
});
}

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

@ -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: (<any>config.variables.d3).polar,
};
});
}

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

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

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

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

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

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

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

@ -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} <br/>{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,
},
},
},

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

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

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

@ -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} <br/>{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,
},
},
},

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

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