Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-04 21:00:16 +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,
},
},
};