Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +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

16
package-lock.json generated
View file

@ -454,6 +454,14 @@
}
}
},
"angular2-chartjs": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/angular2-chartjs/-/angular2-chartjs-0.3.0.tgz",
"integrity": "sha1-KVA/pR9j4FpJAO11CqMLEeTB7hg=",
"requires": {
"chart.js": "2.5.0"
}
},
"angular2-toaster": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/angular2-toaster/-/angular2-toaster-4.0.0.tgz",
@ -5740,14 +5748,6 @@
"integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
"dev": true
},
"ng2-charts": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-1.5.0.tgz",
"integrity": "sha1-clVqH/D2dYwhq8fsz+cZhMgunC0=",
"requires": {
"chart.js": "2.5.0"
}
},
"ng2-ckeditor": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/ng2-ckeditor/-/ng2-ckeditor-1.1.6.tgz",

2
package.json
View file

@ -37,6 +37,7 @@
"@asymmetrik/angular2-leaflet": "2.1.4",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
"@swimlane/ngx-charts": "5.2.0",
"angular2-chartjs": "^0.3.0",
"angular2-toaster": "4.0.0",
"bootstrap": "4.0.0-alpha.6",
"chart.js": "2.5.0",
@ -50,7 +51,6 @@
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.0.3",
"ng2-charts": "1.5.0",
"ng2-ckeditor": "1.1.6",
"ng2-smart-table": "1.1.0",
"ng2-tree": "2.0.0-alpha.5",

19
src/app/@theme/styles/theme.cosmic.ts
View file

@ -43,7 +43,7 @@ export const COSMIC_THEME = {
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#ffffff',
xAxisColor: 'rgba(161, 161 ,229, 0.3)',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
xAxisTextColor: '#a1a1e5',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
@ -78,21 +78,8 @@ export const COSMIC_THEME = {
},
chartjs: {
xAxisColor: 'rgba(148,159,177,1)',
yAxisColor: 'rgba(148,159,177,1)',
tickColor: 'white',
legendTextColor: 'white',
barHorizontal: {
colors: ['red', 'blue'],
},
radar: {
colors: ['red', 'blue'],
scaleGridLinesColor: 'white',
scaleAngleLinesColor: 'white',
pointLabelFontColor: 'white',
},
axisLineColor: '#a1a1e5',
textColor: '#ffffff',
},
d3: {

19
src/app/@theme/styles/theme.default.ts
View file

@ -37,7 +37,7 @@ export const DEFAULT_THEME = {
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#222222',
xAxisColor: 'rgba(0, 0, 0, 0)',
axisLineColor: 'rgba(0, 0, 0, 0)',
xAxisTextColor: '#222222',
yAxisSplitLine: '#ebeef2',
@ -72,21 +72,8 @@ export const DEFAULT_THEME = {
},
chartjs: {
xAxisColor: 'rgba(148,159,177,1)',
yAxisColor: 'rgba(148,159,177,1)',
tickColor: 'white',
legendTextColor: 'white',
barHorizontal: {
colors: ['red', 'blue'],
},
radar: {
colors: ['red', 'blue'],
scaleGridLinesColor: 'white',
scaleAngleLinesColor: 'white',
pointLabelFontColor: 'white',
},
axisLineColor: '#cccccc',
textColor: '#484848',
},
d3: {

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

@ -3,95 +3,63 @@ import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-bar-horizontal',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="chartType"></canvas>
<chart type="horizontalBar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsBarHorizontalComponent {
chartData: any[];
chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
chartLegend: boolean = true;
chartType: string = 'horizontalBar';
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.chartData = [
{
label: 'Dataset 1',
backgroundColor: chartjs.barHorizontal.colors[0],
borderColor: chartjs.barHorizontal.colors[0],
borderWidth: 1,
data: [
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
],
},
{
label: 'Dataset 2',
backgroundColor: chartjs.barHorizontal.colors[1],
borderColor: chartjs.barHorizontal.colors[1],
data: [
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
],
},
];
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Dataset 1',
backgroundColor: colors.infoLight,
borderWidth: 1,
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
}, {
label: 'Dataset 2',
backgroundColor: colors.successLight,
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
},
],
};
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
this.options = {
responsive: true,
maintainAspectRatio: false,
elements: {
rectangle: {
borderWidth: 2,
},
},
responsive: true,
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.xAxisColor,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.yAxisColor,
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],
@ -106,7 +74,7 @@ export class ChartjsBarHorizontalComponent {
});
}
private randomScalingFactor() {
private random() {
return Math.round(Math.random() * 100);
}
}

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

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

@ -1,51 +1,55 @@
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-line',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="chatyType"></canvas>
<chart type="line" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsLineComponent {
chartData: any[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ 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'];
chartLegend: boolean = true;
chatyType: string = 'line';
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 = {
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
borderColor: colors.primary,
}, {
data: [28, 48, 40, 19, 86, 27, 90],
label: 'Series B',
backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
borderColor: colors.danger,
}, {
data: [18, 48, 77, 9, 100, 27, 40],
label: 'Series C',
backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
borderColor: colors.info,
},
],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.xAxisColor,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],
@ -53,10 +57,10 @@ export class ChartjsLineComponent {
{
gridLines: {
display: true,
color: chartjs.yAxisColor,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],

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

@ -3,104 +3,62 @@ import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-multiple-xaxis',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="chartType"></canvas>
<chart type="line" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsMultipleXaxisComponent {
chartType: string = 'line';
chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
chartLegend: boolean = true;
chartData: any[] = [
{
label: 'dataset - big points',
data: [
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
],
backgroundColor: 'red',
borderColor: 'red',
fill: false,
borderDash: [5, 5],
pointRadius: 15,
pointHoverRadius: 10,
},
{
label: 'dataset - individual point sizes',
data: [
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
],
backgroundColor: 'blue',
borderColor: 'blue',
fill: false,
borderDash: [5, 5],
pointRadius: [2, 4, 6, 18, 0, 12, 20],
},
{
label: 'dataset - large pointHoverRadius',
data: [
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
],
backgroundColor: 'green',
borderColor: 'green',
fill: false,
pointHoverRadius: 30,
},
{
label: 'dataset - large pointHitRadius',
data: [
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
this.randomScalingFactor(),
],
backgroundColor: 'yellow',
borderColor: 'yellow',
fill: false,
pointHitRadius: 20,
},
];
chartOptions: any;
data: {};
options: any;
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.chartOptions = {
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'dataset - big points',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.primary,
backgroundColor: colors.primary,
fill: false,
borderDash: [5, 5],
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - individual point sizes',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.dangerLight,
backgroundColor: colors.dangerLight,
fill: false,
borderDash: [5, 5],
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - large pointHoverRadius',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.info,
backgroundColor: colors.info,
fill: false,
pointRadius: 8,
pointHoverRadius: 10,
}, {
label: 'dataset - large pointHitRadius',
data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
borderColor: colors.success,
backgroundColor: colors.success,
fill: false,
pointRadius: 8,
pointHoverRadius: 10,
}],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
@ -120,10 +78,10 @@ export class ChartjsMultipleXaxisComponent {
},
gridLines: {
display: true,
color: chartjs.xAxisColor,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],
@ -136,10 +94,10 @@ export class ChartjsMultipleXaxisComponent {
},
gridLines: {
display: true,
color: chartjs.xAxisColor,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.tickColor,
fontColor: chartjs.textColor,
},
},
],
@ -148,7 +106,7 @@ export class ChartjsMultipleXaxisComponent {
});
}
private randomScalingFactor() {
private random() {
return Math.round(Math.random() * 100);
}
}

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

@ -3,33 +3,30 @@ import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-pie',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[data]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[chartType]="chartType"></canvas>
<chart type="pie" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsPieComponent {
chartType: string = 'pie';
chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
chartData: number[] = [300, 500, 100];
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 = {
this.data = {
labels: ['Download Sales', 'In-Store Sales', 'Mail Sales'],
datasets: [{
data: [300, 500, 100],
backgroundColor: [colors.primaryLight, colors.infoLight, colors.successLight],
}],
};
this.options = {
maintainAspectRatio: false,
responsive: true,
scale: {
pointLabels: {
@ -40,24 +37,12 @@ export class ChartjsPieComponent {
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.xAxisColor,
},
ticks: {
fontColor: chartjs.tickColor,
},
display: false,
},
],
yAxes: [
{
gridLines: {
display: true,
color: chartjs.yAxisColor,
},
ticks: {
fontColor: chartjs.tickColor,
},
display: false,
},
],
},

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

@ -1,50 +1,40 @@
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
@Component({
selector: 'ngx-chartjs-radar',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[chartType]="chartType"
[options]="chartOptions"></canvas>
<chart type="radar" [data]="data" [options]="options"></chart>
`,
})
export class ChartjsRadarComponent {
chartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
chartType: string = 'radar';
chartOptions: any;
chartData: any[];
options: any;
data: {};
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.chartData = [
{
this.data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
data: [65, 59, 90, 81, 56, 55, 40],
label: 'Series A',
borderColor: chartjs.radar.colors[0],
backgroundColor: chartjs.radar.colors[0],
},
{
borderColor: colors.danger,
backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5),
}, {
data: [28, 48, 40, 19, 96, 27, 100],
label: 'Series B',
borderColor: chartjs.radar.colors[1],
backgroundColor: chartjs.radar.colors[1],
},
];
borderColor: colors.warning,
backgroundColor: NbColorHelper.hexToRgbA(colors.warningLight, 0.5),
}],
};
this.chartOptions = {
this.options = {
responsive: true,
maintainAspectRatio: false,
scaleFontColor: 'white',
legend: {
labels: {
@ -54,13 +44,13 @@ export class ChartjsRadarComponent {
scale: {
pointLabels: {
fontSize: 14,
fontColor: chartjs.radar.pointLabelFontColor,
fontColor: chartjs.textColor,
},
gridLines: {
color: chartjs.radar.scaleGridLinesColor,
color: chartjs.axisLineColor,
},
angleLines: {
color: chartjs.radar.scaleAngleLinesColor,
color: chartjs.axisLineColor,
},
},
};

16
src/app/pages/charts/chartjs/chartjs.component.scss
View file

@ -1,4 +1,20 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
ngx-chartjs-pie,
ngx-chartjs-bar,
ngx-chartjs-line,
ngx-chartjs-multiple-xaxis,
ngx-chartjs-bar-horizontal,
ngx-chartjs-radar {
display: block;
height: 100%;
width: 100%;
/deep/ chart {
display: block;
height: 100%;
width: 100%;
}
}
}

5
src/app/pages/charts/charts.module.ts
View file

@ -1,7 +1,8 @@
import { NgModule } from '@angular/core';
import { AngularEchartsModule } from 'ngx-echarts';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { ChartsModule as Ng2Charts } from 'ng2-charts/ng2-charts';
import { ChartModule } from 'angular2-chartjs';
import { ThemeModule } from '../../@theme/theme.module';
import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
@ -48,7 +49,7 @@ const components = [
];
@NgModule({
imports: [ThemeModule, ChartsRoutingModule, AngularEchartsModule, NgxChartsModule, Ng2Charts],
imports: [ThemeModule, ChartsRoutingModule, AngularEchartsModule, NgxChartsModule, ChartModule],
declarations: [...routedComponents, ...components],
})
export class ChartsModule {}

2
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -87,7 +87,7 @@ export class ElectricityChartComponent implements AfterViewInit {
},
axisLine: {
lineStyle: {
color: eTheme.xAxisColor,
color: eTheme.axisLineColor,
width: '2',
},
},