mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(charts): integrate js theme with chart.js
This commit is contained in:
Alexander Zhukov
parent
0f0bea801d
commit
bc536dbded
7 changed files with 335 additions and 183 deletions
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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: `
|
||||
<canvas baseChart width="400" height="400"
|
||||
<canvas baseChart
|
||||
[data]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
|
|
@ -21,36 +22,48 @@ export class ChartjsPieComponent {
|
|||
chartType: string = 'pie';
|
||||
chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
chartData: number[] = [300, 500, 100];
|
||||
chartOptions: any = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
chartOptions: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
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',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: `
|
||||
<canvas baseChart
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[chartType]="chartType"></canvas>
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[chartType]="chartType"
|
||||
[options]="chartOptions"></canvas>
|
||||
`,
|
||||
})
|
||||
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,
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue