diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts index f25a9b13..69518887 100644 --- a/src/app/@theme/styles/theme.cosmic.ts +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -85,5 +85,39 @@ export const COSMIC_THEME = { echartsRadarLegendTextColor: 'white', echartsRadarNameTextColor: 'white', echartsRadarSplitAreaStyleColor: 'transparent', + + chartjsPieXAxisColor: 'rgba(148,159,177,1)', + chartjsPieYAxisColor: 'rgba(148,159,177,1)', + chartjsPieTickColor: 'white', + chartjsPieLegendTextColor: 'white', + + chartjsBarXAxisColor: 'rgba(148,159,177,1)', + chartjsBarYAxisColor: 'rgba(148,159,177,1)', + chartjsBarTickColor: 'white', + chartjsBarLegendTextColor: 'white', + + chartjsLineXAxisColor: 'rgba(148,159,177,1)', + chartjsLineYAxisColor: 'rgba(148,159,177,1)', + chartjsLineTickColor: 'white', + chartjsLineLegendTextColor: 'white', + + chartjsMultipleXAxisXAxisColor: 'rgba(148,159,177,1)', + chartjsMultipleXAxisYAxisColor: 'rgba(148,159,177,1)', + chartjsMultipleXAxisTickColor: 'white', + chartjsMultipleXAxisLegendTextColor: 'white', + + chartjsBarHorizontalColor1: 'red', + chartjsBarHorizontalColor2: 'blue', + chartjsBarHorizontalXAxisColor: 'rgba(148,159,177,1)', + chartjsBarHorizontalYAxisColor: 'rgba(148,159,177,1)', + chartjsBarHorizontalTickColor: 'white', + chartjsBarHorizontalLegendTextColor: 'white', + + chartjsRadarColor1: 'red', + chartjsRadarColor2: 'blue', + chartjsRadarLegendTextColor: 'white', + chartjsRadarScaleGridLinesColor: 'white', + chartjsRadarScaleAngleLinesColor: 'white', + chartjsRadarPointLabelFontColor: 'white', }, }; diff --git a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts index 72b700a3..d85332d5 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-chartjs-bar-horizontal', @@ -19,57 +20,88 @@ import { Component } from '@angular/core'; `, }) export class ChartjsBarHorizontalComponent { - chartData = [ - { - label: 'Dataset 1', - backgroundColor: 'red', - borderColor: 'red', - borderWidth: 1, - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - }, - { - label: 'Dataset 2', - backgroundColor: 'blue', - borderColor: 'blue', - data: [ - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - this.randomScalingFactor(), - ], - }, - ]; + chartData: any[]; chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - chartOptions = { - // Elements options apply to all of the options unless overridden in a dataset - // In this case, we are setting the border of each horizontal bar to be 2px wide - elements: { - rectangle: { - borderWidth: 2, - }, - }, - responsive: true, - legend: { - position: 'right', - }, - title: { - display: true, - text: 'Chart.js Horizontal Bar Chart', - }, - }; chartLegend: boolean = true; chartType: string = 'horizontalBar'; + chartOptions: any; + + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.chartData = [ + { + label: 'Dataset 1', + backgroundColor: config.chartjsBarHorizontalColor1, + borderColor: config.chartjsBarHorizontalColor1, + borderWidth: 1, + data: [ + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + ], + }, + { + label: 'Dataset 2', + backgroundColor: config.chartjsBarHorizontalColor2, + borderColor: config.chartjsBarHorizontalColor2, + data: [ + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + this.randomScalingFactor(), + ], + }, + ]; + + this.chartOptions = { + // Elements options apply to all of the options unless overridden in a dataset + // In this case, we are setting the border of each horizontal bar to be 2px wide + elements: { + rectangle: { + borderWidth: 2, + }, + }, + responsive: true, + scales: { + xAxes: [ + { + gridLines: { + display: true, + color: config.chartjsBarHorizontalXAxisColor, + }, + ticks: { + fontColor: config.chartjsBarHorizontalTickColor, + }, + }, + ], + yAxes: [ + { + gridLines: { + display: true, + color: config.chartjsBarHorizontalYAxisColor, + }, + ticks: { + fontColor: config.chartjsBarHorizontalTickColor, + }, + }, + ], + }, + legend: { + position: 'right', + labels: { + fontColor: config.chartjsBarHorizontalLegendTextColor, + }, + }, + }; + }); + } private randomScalingFactor() { return Math.round(Math.random() * 100); diff --git a/src/app/pages/charts/chartjs/chartjs-bar.component.ts b/src/app/pages/charts/chartjs/chartjs-bar.component.ts index 17b5c2ba..9d91405a 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-chartjs-bar', @@ -19,39 +20,6 @@ import { Component } from '@angular/core'; `, }) export class ChartjsBarComponent { - chartOptions: any = { - scaleShowVerticalLines: false, - responsive: true, - legend: { - labels: { - fontColor: 'white', - }, - }, - scales: { - xAxes: [ - { - gridLines: { - display: true, - color: 'rgba(148,159,177,1)', - }, - ticks: { - fontColor: 'white', - }, - }, - ], - yAxes: [ - { - gridLines: { - display: true, - color: 'rgba(148,159,177,1)', - }, - ticks: { - fontColor: 'white', - }, - }, - ], - }, - }; chartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; chartType: string = 'bar'; chartLegend: boolean = true; @@ -59,4 +27,43 @@ export class ChartjsBarComponent { { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }, ]; + chartOptions: any; + + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.chartOptions = { + scaleShowVerticalLines: false, + responsive: true, + legend: { + labels: { + fontColor: config.chartjsBarLegendTextColor, + }, + }, + scales: { + xAxes: [ + { + gridLines: { + display: true, + color: config.chartjsBarXAxisColor, + }, + ticks: { + fontColor: config.chartjsBarTickColor, + }, + }, + ], + yAxes: [ + { + gridLines: { + display: true, + color: config.chartjsBarYAxisColor, + }, + ticks: { + fontColor: config.chartjsBarTickColor, + }, + }, + ], + }, + }; + }); + } } diff --git a/src/app/pages/charts/chartjs/chartjs-line.component.ts b/src/app/pages/charts/chartjs/chartjs-line.component.ts index 333d07b8..f553c499 100644 --- a/src/app/pages/charts/chartjs/chartjs-line.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-line.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-chartjs-line', @@ -24,40 +25,45 @@ export class ChartjsLineComponent { { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }, { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' }, ]; - chartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - chartOptions: any = { - responsive: true, - scales: { - xAxes: [ - { - gridLines: { - display: true, - color: 'rgba(148,159,177,1)', - }, - ticks: { - fontColor: 'white', - }, - }, - ], - yAxes: [ - { - gridLines: { - display: true, - color: 'rgba(148,159,177,1)', - }, - ticks: { - fontColor: 'white', - }, - }, - ], - }, - legend: { - labels: { - fontColor: 'white', - }, - }, - }; chartLegend: boolean = true; chatyType: string = 'line'; + chartOptions: any; + + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.chartOptions = { + responsive: true, + scales: { + xAxes: [ + { + gridLines: { + display: true, + color: config.chartjsLineXAxisColor, + }, + ticks: { + fontColor: config.chartjsLineTickColor, + }, + }, + ], + yAxes: [ + { + gridLines: { + display: true, + color: config.chartjsLineYAxisColor, + }, + ticks: { + fontColor: config.chartjsLineTickColor, + }, + }, + ], + }, + legend: { + labels: { + fontColor: config.chartjsLineLegendTextColor, + }, + }, + }; + }); + } } diff --git a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts index 21ee99dc..822db18f 100644 --- a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-chartjs-multiple-xaxis', @@ -21,39 +22,6 @@ import { Component } from '@angular/core'; export class ChartjsMultipleXaxisComponent { chartType: string = 'line'; chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - chartOptions: { - responsive: true; - legend: { - position: 'bottom'; - }; - hover: { - mode: 'index'; - }; - scales: { - xAxes: [ - { - display: true; - scaleLabel: { - display: true; - labelString: 'Month'; - }; - } - ]; - yAxes: [ - { - display: true; - scaleLabel: { - display: true; - labelString: 'Value'; - }; - } - ]; - }; - title: { - display: true; - text: 'Chart.js Line Chart - Different point sizes'; - }; - }; chartLegend: boolean = true; chartData: any[] = [ { @@ -124,6 +92,58 @@ export class ChartjsMultipleXaxisComponent { pointHitRadius: 20, }, ]; + chartOptions: any; + + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.chartOptions = { + responsive: true, + legend: { + position: 'bottom', + labels: { + fontColor: config.chartjsLineLegendTextColor, + }, + }, + hover: { + mode: 'index', + }, + scales: { + xAxes: [ + { + display: true, + scaleLabel: { + display: true, + labelString: 'Month', + }, + gridLines: { + display: true, + color: config.chartjsLineXAxisColor, + }, + ticks: { + fontColor: config.chartjsLineTickColor, + }, + }, + ], + yAxes: [ + { + display: true, + scaleLabel: { + display: true, + labelString: 'Value', + }, + gridLines: { + display: true, + color: config.chartjsLineXAxisColor, + }, + ticks: { + fontColor: config.chartjsLineTickColor, + }, + }, + ], + }, + }; + }); + } private randomScalingFactor() { return Math.round(Math.random() * 100); diff --git a/src/app/pages/charts/chartjs/chartjs-pie.component.ts b/src/app/pages/charts/chartjs/chartjs-pie.component.ts index 8b707214..3c10fdcf 100644 --- a/src/app/pages/charts/chartjs/chartjs-pie.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-pie.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-chartjs-pie', @@ -10,7 +11,7 @@ import { Component } from '@angular/core'; `, ], template: ` - { + this.chartOptions = { + responsive: true, + scale: { + pointLabels: { + fontSize: 14, + fontColor: config.chartjsRadarPointLabelFontColor, }, }, - ], - yAxes: [ - { - gridLines: { - display: true, - color: 'rgba(148,159,177,1)', - }, - ticks: { - fontColor: 'white', + scales: { + xAxes: [ + { + gridLines: { + display: true, + color: config.chartjsPieXAxisColor, + }, + ticks: { + fontColor: config.chartjsPitTickColor, + }, + }, + ], + yAxes: [ + { + gridLines: { + display: true, + color: config.chartjsPieYAxisColor, + }, + ticks: { + fontColor: config.chartjsPieTickColor, + }, + }, + ], + }, + legend: { + labels: { + fontColor: config.chartjsPieLegendTextColor, }, }, - ], - }, - legend: { - labels: { - fontColor: 'white', - }, - }, - }; + }; + }); + } } diff --git a/src/app/pages/charts/chartjs/chartjs-radar.component.ts b/src/app/pages/charts/chartjs/chartjs-radar.component.ts index 01d4721a..457d005d 100644 --- a/src/app/pages/charts/chartjs/chartjs-radar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-radar.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-chartjs-radar', @@ -11,16 +12,55 @@ import { Component } from '@angular/core'; ], template: ` + [datasets]="chartData" + [labels]="chartLabels" + [chartType]="chartType" + [options]="chartOptions"> `, }) export class ChartjsRadarComponent { chartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']; - chartData: any = [ - { data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' }, - { data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' }, - ]; chartType: string = 'radar'; + chartOptions: any; + chartData: any[]; + + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.chartData = [ + { + data: [65, 59, 90, 81, 56, 55, 40], + label: 'Series A', + borderColor: config.chartjsRadarColor1, + backgroundColor: config.chartjsRadarColor1, + }, + { + data: [28, 48, 40, 19, 96, 27, 100], + label: 'Series B', + borderColor: config.chartjsRadarColor2, + backgroundColor: config.chartjsRadarColor2, + }, + ]; + + this.chartOptions = { + scaleFontColor: 'white', + legend: { + labels: { + fontColor: config.chartjsRadarLegendTextColor, + }, + }, + scale: { + pointLabels: { + fontSize: 14, + fontColor: config.chartjsRadarPointLabelFontColor, + }, + gridLines: { + color: config.chartjsRadarScaleGridLinesColor, + }, + angleLines: { + color: config.chartjsRadarScaleAngleLinesColor, + }, + }, + }; + }); + } }