Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-23 10:50:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(charts): change chart.js lib wrapper

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-29 10:54:30 +03:00
parent df7de82737
commit bdca59b793
13 changed files with 206 additions and 314 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,37 @@
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-bar',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="chartType"></canvas>
<chart type="bar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsBarComponent {
chartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
chartType: string = 'bar';
chartLegend: boolean = true;
chartData: any[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
];
chartOptions: any;
data: any;
options: any;
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.chartOptions = {
scaleShowVerticalLines: false,
this.data = {
labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
}, {
data: [28, 48, 40, 19, 86, 27, 90],
label: 'Series B',
backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
}],
};
this.options = {
maintainAspectRatio: false,
responsive: true,
legend: {
labels: {
@ -46,11 +42,11 @@ export class ChartjsBarComponent {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.xAxisColor,
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],
@ -58,10 +54,10 @@ export class ChartjsBarComponent {
{
gridLines: {
display: true,
color: chartjs.yAxisColor,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],