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

feat(charts): add chart.js examples page

Browse source
This commit is contained in:
Alexander Zhukov 2017-05-16 19:02:54 +03:00
parent 626da294c4
commit cf23f972d1
22 changed files with 657 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/app/pages/charts/chart.js/bar/bar.component.ts Normal file
View file

@ -0,0 +1,64 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chart-js-bar',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"></canvas>
`,
})
export class ChartJsBarComponent {
barChartOptions: 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',
},
}],
},
};
barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
barChartType: string = 'bar';
barChartLegend: boolean = true;
barChartData: any[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
];
}

26
src/app/pages/charts/chart.js/chart-js.component.html Normal file
View file

@ -0,0 +1,26 @@
<div class="row">
<div class="col-md-4">
<nga-card size="xmedium">
<nga-card-header>Pie</nga-card-header>
<nga-card-body>
<ngx-chart-js-pie></ngx-chart-js-pie>
</nga-card-body>
</nga-card>
</div>
<div class="col-md-4">
<nga-card size="xmedium">
<nga-card-header>Bar</nga-card-header>
<nga-card-body>
<ngx-chart-js-bar></ngx-chart-js-bar>
</nga-card-body>
</nga-card>
</div>
<div class="col-md-4">
<nga-card size="xmedium">
<nga-card-header>Line</nga-card-header>
<nga-card-body>
<ngx-chart-js-line></ngx-chart-js-line>
</nga-card-body>
</nga-card>
</div>
</div>

9
src/app/pages/charts/chart.js/chart-js.component.ts Normal file
View file

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chart-js',
templateUrl: './chart-js.component.html',
})
export class ChartJsComponent {
}

64
src/app/pages/charts/chart.js/line/line.component.ts Normal file
View file

@ -0,0 +1,64 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chart-js-line',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[legend]="lineChartLegend"
[chartType]="lineChartType"></canvas>
`,
})
export class ChartJsLineComponent {
lineChartData: 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' },
];
lineChartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
lineChartOptions: 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',
},
},
};
lineChartLegend: boolean = true;
lineChartType: string = 'line';
}

54
src/app/pages/charts/chart.js/pie/pie.component.ts Normal file
View file

@ -0,0 +1,54 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-chart-js-pie',
styles: [
`
:host {
display: block;
}
`,
],
template: `
<canvas baseChart
[data]="pieChartData"
[labels]="pieChartLabels"
[options]="pieChartOptions"
[chartType]="pieChartType"></canvas>
`,
})
export class ChartJsPieComponent {
pieChartType: string = 'pie';
pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
pieChartData: number[] = [300, 500, 100];
pieChartOptions: 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',
},
},
};
}

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

@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
import { ChartsComponent } from './charts.component';
import { EchartsComponent } from './echarts/echarts.component';
import { D3Component } from './d3/d3.component';
import { ChartJsComponent } from './chart.js/chart-js.component';
const routes: Routes = [{
path: '',
@ -14,6 +15,9 @@ const routes: Routes = [{
}, {
path: 'd3',
component: D3Component,
}, {
path: 'chartjs',
component: ChartJsComponent,
}],
}];
@ -27,4 +31,5 @@ export const routedComponents = [
ChartsComponent,
EchartsComponent,
D3Component,
ChartJsComponent,
];

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

@ -4,6 +4,27 @@ import { NgaChartsModule } from '@nga/theme';
import { SharedModule } from '../../shared.module';
import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
import { ChartJsBarComponent } from './chart.js/bar/bar.component';
import { ChartJsLineComponent } from './chart.js/line/line.component';
import { ChartJsPieComponent } from './chart.js/pie/pie.component';
import { D3BarComponent } from './d3/bar/bar.component';
import { D3LineComponent } from './d3/line/line.component';
import { D3PieComponent } from './d3/pie/pie.component';
import { EchartsLineComponent } from './echarts/line/line.component';
import { EchartsPieComponent } from './echarts/pie/pie.component';
import { EchartsBarComponent } from './echarts/bar/bar.component';
const components = [
ChartJsBarComponent,
ChartJsLineComponent,
ChartJsPieComponent,
D3BarComponent,
D3LineComponent,
D3PieComponent,
EchartsLineComponent,
EchartsPieComponent,
EchartsBarComponent,
];
@NgModule({
imports: [
@ -13,6 +34,7 @@ import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
],
declarations: [
...routedComponents,
...components,
],
})
export class ChartsModule { }

55
src/app/pages/charts/d3/bar/bar.component.ts Normal file
View file

@ -0,0 +1,55 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-d3-bar',
template: `
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
`,
})
export class D3BarComponent {
single = [{
name: 'Germany',
value: 8940000,
}, {
name: 'USA',
value: 5000000,
}, {
name: 'France',
value: 7200000,
}];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
showXAxis = true;
showYAxis = true;
showLabels = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
}

34
src/app/pages/charts/d3/d3.component.html
View file

@ -3,13 +3,7 @@
<nga-card size="xmedium">
<nga-card-header>Pie</nga-card-header>
<nga-card-body>
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"
[legend]="showLegend"
[labels]="showLabels">
</ngx-charts-pie-chart>
<ngx-d3-pie></ngx-d3-pie>
</nga-card-body>
</nga-card>
</div>
@ -17,18 +11,7 @@
<nga-card size="xmedium">
<nga-card-header>Bar</nga-card-header>
<nga-card-body>
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
<ngx-d3-bar></ngx-d3-bar>
</nga-card-body>
</nga-card>
</div>
@ -38,18 +21,7 @@
<nga-card size="xmedium">
<nga-card-header>Line</nga-card-header>
<nga-card-body>
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-line-chart>
<ngx-d3-line></ngx-d3-line>
</nga-card-body>
</nga-card>
</div>

62
src/app/pages/charts/d3/d3.component.ts
View file

@ -5,66 +5,4 @@ import { Component } from '@angular/core';
templateUrl: './d3.component.html',
})
export class D3Component {
single = [{
name: 'Germany',
value: 8940000,
}, {
name: 'USA',
value: 5000000,
}, {
name: 'France',
value: 7200000,
}];
multi = [{
name: 'Germany',
series: [{
name: '2010',
value: 7300000,
}, {
name: '2011',
value: 8940000,
}],
}, {
name: 'USA',
series: [{
name: '2010',
value: 7870000,
}, {
name: '2011',
value: 8270000,
}],
}, {
name: 'France',
series: [{
name: '2010',
value: 5000002,
}, {
name: '2011',
value: 5800000,
}],
}];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
showXAxis = true;
showYAxis = true;
showLabels = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
}

73
src/app/pages/charts/d3/line/line.component.ts Normal file
View file

@ -0,0 +1,73 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-d3-line',
template: `
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-line-chart>
`,
})
export class D3LineComponent {
multi = [{
name: 'Germany',
series: [{
name: '2010',
value: 7300000,
}, {
name: '2011',
value: 8940000,
}],
}, {
name: 'USA',
series: [{
name: '2010',
value: 7870000,
}, {
name: '2011',
value: 8270000,
}],
}, {
name: 'France',
series: [{
name: '2010',
value: 5000002,
}, {
name: '2011',
value: 5800000,
}],
}];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
showXAxis = true;
showYAxis = true;
showLabels = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
}

46
src/app/pages/charts/d3/pie/pie.component.ts Normal file
View file

@ -0,0 +1,46 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-d3-pie',
template: `
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="single" [legend]="showLegend"
[labels]="showLabels">
</ngx-charts-pie-chart>
`,
})
export class D3PieComponent {
single = [{
name: 'Germany',
value: 8940000,
}, {
name: 'USA',
value: 5000000,
}, {
name: 'France',
value: 7200000,
}];
view: any[] = [700, 400];
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
};
showXAxis = true;
showYAxis = true;
showLabels = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
}

59
src/app/pages/charts/echarts/bar/bar.component.ts Normal file
View file

@ -0,0 +1,59 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-echarts-bar',
template: `
<div echarts [options]="barChartOptions" class="echart"></div>
`,
})
export class EchartsBarComponent {
barChartOptions = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: 'white',
},
},
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: 'white',
},
},
}],
series: [{
name: 'Score',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220],
}],
};
}

6
src/app/pages/charts/echarts/echarts.component.html
View file

@ -3,7 +3,7 @@
<nga-card size="xmedium">
<nga-card-header>Pie</nga-card-header>
<nga-card-body>
<div echarts [options]="pieChartOptions" class="echart"></div>
<ngx-echarts-pie></ngx-echarts-pie>
</nga-card-body>
</nga-card>
</div>
@ -11,7 +11,7 @@
<nga-card size="xmedium">
<nga-card-header>Bar</nga-card-header>
<nga-card-body>
<div echarts [options]="barChartOptions" class="echart"></div>
<ngx-echarts-bar></ngx-echarts-bar>
</nga-card-body>
</nga-card>
</div>
@ -21,7 +21,7 @@
<nga-card size="xmedium">
<nga-card-header>Line</nga-card-header>
<nga-card-body>
<div echarts [options]="lineChartOptions" class="echart"></div>
<ngx-echarts-line></ngx-echarts-line>
</nga-card-body>
</nga-card>
</div>

2
src/app/pages/charts/echarts/echarts.component.scss
View file

@ -3,7 +3,7 @@
:host {
display: block;
.echart {
/deep/ .echart {
height: calc(#{$nga-card-height-xmedium} - 50px);
}
}

158
src/app/pages/charts/echarts/echarts.component.ts
View file

@ -6,162 +6,4 @@ import { Component } from '@angular/core';
templateUrl: './echarts.component.html',
})
export class EchartsComponent {
pieChartOptions = {
color: ['rgb(168, 56, 93)', 'rgb(122, 163, 229)', 'rgb(170, 227, 245)', 'rgb(173, 205, 237)', 'rgb(162, 126, 168)'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: {
color: 'white',
},
},
series: [{
name: 'Countries',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{
value: 335,
name: 'Germany',
}, {
value: 310,
name: 'France',
}, {
value: 234,
name: 'Canada',
}, {
value: 135,
name: 'Russia',
}, {
value: 1548,
name: 'USA',
}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
}],
};
barChartOptions = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: 'white',
},
},
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: 'white',
},
},
}],
series: [{
name: 'Score',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220],
}],
};
lineChartOptions = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}',
},
legend: {
left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: {
color: 'white',
},
},
xAxis: {
type: 'category',
name: 'x',
splitLine: { show: false },
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisLine: {
lineStyle: {
color: 'white',
},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
yAxis: {
type: 'log',
name: 'y',
axisLine: {
lineStyle: {
color: 'white',
},
},
},
series: [{
name: 'Line 1',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
}, {
name: 'Line 2',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
}, {
name: 'Line 3',
type: 'line',
data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
}],
};
}

70
src/app/pages/charts/echarts/line/line.component.ts Normal file
View file

@ -0,0 +1,70 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-echarts-line',
template: `
<div echarts [options]="lineChartOptions" class="echart"></div>
`,
})
export class EchartsLineComponent {
lineChartOptions = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}',
},
legend: {
left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: {
color: 'white',
},
},
xAxis: {
type: 'category',
name: 'x',
splitLine: { show: false },
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisLine: {
lineStyle: {
color: 'white',
},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
yAxis: {
type: 'log',
name: 'y',
axisLine: {
lineStyle: {
color: 'white',
},
},
},
series: [{
name: 'Line 1',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
}, {
name: 'Line 2',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
}, {
name: 'Line 3',
type: 'line',
data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
}],
};
}

61
src/app/pages/charts/echarts/pie/pie.component.ts Normal file
View file

@ -0,0 +1,61 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-echarts-pie',
template: `
<div echarts [options]="pieChartOptions" class="echart"></div>|
`,
})
export class EchartsPieComponent {
pieChartOptions = {
color: ['rgb(168, 56, 93)', 'rgb(122, 163, 229)', 'rgb(170, 227, 245)', 'rgb(173, 205, 237)', 'rgb(162, 126, 168)'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: {
color: 'white',
},
},
series: [{
name: 'Countries',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{
value: 335,
name: 'Germany',
}, {
value: 310,
name: 'France',
}, {
value: 234,
name: 'Canada',
}, {
value: 135,
name: 'Russia',
}, {
value: 1548,
name: 'USA',
}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
}],
};
}

3
src/app/pages/pages-menu.ts
View file

@ -56,6 +56,9 @@ export const menuItems: List<NgaMenuItem> = List([{
}, {
title: 'D3',
link: '/pages/charts/d3',
}, {
title: 'Charts.js',
link: '/pages/charts/chartjs',
}]),
}, {
title: 'Editors',