Skip to content

Commit d230e05

Browse files
xidedixxidedix
committed
feat: charts view
1 parent 8d5dc41 commit d230e05

File tree

8 files changed

+288
-0
lines changed

8 files changed

+288
-0
lines changed

‎src/app/app-routing.module.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ const routes: Routes = [
4545
loadChildren: () =>
4646
import('./views/forms/forms.module').then((m) => m.CoreUIFormsModule)
4747
},
48+
{
49+
path: 'charts',
50+
loadChildren: () =>
51+
import('./views/charts/charts.module').then((m) => m.ChartsModule)
52+
},
4853
{
4954
path: 'icons',
5055
loadChildren: () =>

‎src/app/containers/default-layout/_nav.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,11 @@ export const navItems: INavData[] = [
150150
}
151151
]
152152
},
153+
{
154+
name: 'Charts',
155+
url: '/charts',
156+
iconComponent: { name: 'cil-chart-pie' }
157+
},
153158
{
154159
name: 'Icons',
155160
iconComponent: { name: 'cil-star' },

‎src/app/views/charts/charts-routing.module.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
4+
import { ChartsComponent } from './charts.component';
5+
6+
const routes: Routes = [
7+
{
8+
path: '',
9+
component: ChartsComponent,
10+
data: {
11+
title: 'Charts',
12+
},
13+
},
14+
];
15+
16+
@NgModule({
17+
imports: [RouterModule.forChild(routes)],
18+
exports: [RouterModule],
19+
})
20+
export class ChartsRoutingModule {}
21+

‎src/app/views/charts/charts.component.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
2+
<c-row>
3+
<c-col xs="12">
4+
<app-docs-callout href="charts">
5+
Angular wrapper component for Chart.js 3.6, the most popular charting library.
6+
<br>
7+
</app-docs-callout>
8+
</c-col>
9+
<c-col xs="12" lg="6">
10+
<c-card class="mb-4">
11+
<c-card-header>
12+
Bar Chart
13+
</c-card-header>
14+
<c-card-body>
15+
<c-chart type="bar" [data]="chartBarData"></c-chart>
16+
</c-card-body>
17+
</c-card>
18+
</c-col>
19+
<c-col xs="12" lg="6">
20+
<c-card class="mb-4">
21+
<c-card-header>
22+
Line Chart
23+
</c-card-header>
24+
<c-card-body>
25+
<c-chart type="line" [data]="chartLineData"></c-chart>
26+
</c-card-body>
27+
</c-card>
28+
</c-col>
29+
</c-row>
30+
<c-row>
31+
<c-col xs="12" lg="6">
32+
<c-card class="mb-4">
33+
<c-card-header>
34+
Doughnut Chart
35+
</c-card-header>
36+
<c-card-body>
37+
<c-chart type="doughnut" [data]="chartDoughnutData"></c-chart>
38+
</c-card-body>
39+
</c-card>
40+
</c-col>
41+
<c-col xs="12" lg="6">
42+
<c-card class="mb-4">
43+
<c-card-header>
44+
Pie Chart
45+
</c-card-header>
46+
<c-card-body>
47+
<c-chart type="pie" [data]="chartPieData"></c-chart>
48+
</c-card-body>
49+
</c-card>
50+
</c-col>
51+
</c-row>
52+
<c-row>
53+
<c-col xs="12" lg="6">
54+
<c-card class="mb-4">
55+
<c-card-header>
56+
Polar Area Chart
57+
</c-card-header>
58+
<c-card-body>
59+
<c-chart type="polarArea" [data]="chartPolarAreaData"></c-chart>
60+
</c-card-body>
61+
</c-card>
62+
</c-col>
63+
<c-col xs="12" lg="6">
64+
<c-card class="mb-4">
65+
<c-card-header>
66+
Radar Chart
67+
</c-card-header>
68+
<c-card-body>
69+
<c-chart type="radar" [data]="chartRadarData"></c-chart>
70+
</c-card-body>
71+
</c-card>
72+
</c-col>
73+
</c-row>

‎src/app/views/charts/charts.component.scss

Whitespace-only changes.

‎src/app/views/charts/charts.component.spec.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2+
3+
import { ChartsComponent } from './charts.component';
4+
5+
describe('ChartsComponent', () => {
6+
let component: ChartsComponent;
7+
let fixture: ComponentFixture<ChartsComponent>;
8+
9+
beforeEach(waitForAsync(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ChartsComponent],
12+
}).compileComponents();
13+
}));
14+
15+
beforeEach(() => {
16+
fixture = TestBed.createComponent(ChartsComponent);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it('should create', () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});

‎src/app/views/charts/charts.component.ts

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-charts',
5+
templateUrl: './charts.component.html',
6+
styleUrls: ['./charts.component.scss']
7+
})
8+
export class ChartsComponent {
9+
10+
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
11+
12+
chartBarData = {
13+
labels: [...this.months].slice(0, 7),
14+
datasets: [
15+
{
16+
label: 'GitHub Commits',
17+
backgroundColor: '#f87979',
18+
data: [40, 20, 12, 39, 17, 42, 79]
19+
}
20+
]
21+
};
22+
23+
// chartBarOptions = {
24+
// maintainAspectRatio: false,
25+
// };
26+
27+
chartLineData = {
28+
labels: [...this.months].slice(0, 7),
29+
datasets: [
30+
{
31+
label: 'My First dataset',
32+
backgroundColor: 'rgba(220, 220, 220, 0.2)',
33+
borderColor: 'rgba(220, 220, 220, 1)',
34+
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
35+
pointBorderColor: '#fff',
36+
data: [this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData]
37+
},
38+
{
39+
label: 'My Second dataset',
40+
backgroundColor: 'rgba(151, 187, 205, 0.2)',
41+
borderColor: 'rgba(151, 187, 205, 1)',
42+
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
43+
pointBorderColor: '#fff',
44+
data: [this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData]
45+
}
46+
]
47+
};
48+
49+
chartLineOptions = {
50+
maintainAspectRatio: false,
51+
};
52+
53+
chartDoughnutData = {
54+
labels: ['VueJs', 'EmberJs', 'ReactJs', 'Angular'],
55+
datasets: [
56+
{
57+
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
58+
data: [40, 20, 80, 10]
59+
}
60+
]
61+
};
62+
63+
// chartDoughnutOptions = {
64+
// aspectRatio: 1,
65+
// responsive: true,
66+
// maintainAspectRatio: false,
67+
// radius: '100%'
68+
// };
69+
70+
chartPieData = {
71+
labels: ['Red', 'Green', 'Yellow'],
72+
datasets: [
73+
{
74+
data: [300, 50, 100],
75+
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
76+
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
77+
}
78+
]
79+
};
80+
81+
// chartPieOptions = {
82+
// aspectRatio: 1,
83+
// responsive: true,
84+
// maintainAspectRatio: false,
85+
// radius: '100%'
86+
// };
87+
88+
chartPolarAreaData = {
89+
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
90+
datasets: [
91+
{
92+
data: [11, 16, 7, 3, 14],
93+
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB']
94+
}
95+
]
96+
};
97+
98+
chartRadarData = {
99+
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
100+
datasets: [
101+
{
102+
label: '2020',
103+
backgroundColor: 'rgba(179,181,198,0.2)',
104+
borderColor: 'rgba(179,181,198,1)',
105+
pointBackgroundColor: 'rgba(179,181,198,1)',
106+
pointBorderColor: '#fff',
107+
pointHoverBackgroundColor: '#fff',
108+
pointHoverBorderColor: 'rgba(179,181,198,1)',
109+
tooltipLabelColor: 'rgba(179,181,198,1)',
110+
data: [65, 59, 90, 81, 56, 55, 40]
111+
},
112+
{
113+
label: '2021',
114+
backgroundColor: 'rgba(255,99,132,0.2)',
115+
borderColor: 'rgba(255,99,132,1)',
116+
pointBackgroundColor: 'rgba(255,99,132,1)',
117+
pointBorderColor: '#fff',
118+
pointHoverBackgroundColor: '#fff',
119+
pointHoverBorderColor: 'rgba(255,99,132,1)',
120+
tooltipLabelColor: 'rgba(255,99,132,1)',
121+
data: [this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData, this.randomData]
122+
}
123+
]
124+
};
125+
126+
// chartRadarOptions = {
127+
// aspectRatio: 1.5,
128+
// responsive: true,
129+
// maintainAspectRatio: false,
130+
// };
131+
132+
get randomData() {
133+
return Math.round(Math.random() * 100);
134+
}
135+
136+
}

‎src/app/views/charts/charts.module.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import { BadgeModule, CardModule, GridModule } from '@coreui/angular';
5+
import { ChartjsModule } from '@coreui/angular-chartjs';
6+
7+
import { ChartsComponent } from './charts.component';
8+
import { ChartsRoutingModule } from './charts-routing.module';
9+
import { ComponentsModule } from '../../../components/components.module';
10+
11+
@NgModule({
12+
declarations: [ChartsComponent],
13+
imports: [
14+
CommonModule,
15+
ChartsRoutingModule,
16+
ChartjsModule,
17+
CardModule,
18+
GridModule,
19+
BadgeModule,
20+
ComponentsModule
21+
]
22+
})
23+
export class ChartsModule {
24+
}

0 commit comments

Comments
 (0)