diff options
Diffstat (limited to 'frontend/src/app/_elements/line-chart')
4 files changed, 91 insertions, 0 deletions
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.css b/frontend/src/app/_elements/line-chart/line-chart.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/line-chart/line-chart.component.css diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.html b/frontend/src/app/_elements/line-chart/line-chart.component.html new file mode 100644 index 00000000..8607aac5 --- /dev/null +++ b/frontend/src/app/_elements/line-chart/line-chart.component.html @@ -0,0 +1,9 @@ +<div class="chart-wrapper"> + <canvas baseChart + [datasets]="lineChartData" + [labels]="lineChartLabels" + [options]="lineChartOptions" + [legend]="lineChartLegend" + [plugins]="lineChartPlugins"> + </canvas> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts new file mode 100644 index 00000000..0c5e7ef5 --- /dev/null +++ b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LineChartComponent } from './line-chart.component'; + +describe('LineChartComponent', () => { + let component: LineChartComponent; + let fixture: ComponentFixture<LineChartComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LineChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LineChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts new file mode 100644 index 00000000..7a06ecf5 --- /dev/null +++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit } from '@angular/core'; +import { ChartOptions } from 'chart.js'; +import { BaseChartDirective } from 'ng2-charts'; + +@Component({ + selector: 'app-line-chart', + templateUrl: './line-chart.component.html', + styleUrls: ['./line-chart.component.css'] +}) +export class LineChartComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + lineChartData:Array<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: BaseChartDirective["labels"] = ['January', 'February', 'March', 'April', 'May', 'June']; + lineChartOptions = { + responsive: true, + }; + lineChartColors:Array<any> = [ + { // grey + backgroundColor: 'rgba(148,159,177,0.2)', + borderColor: 'rgba(148,159,177,1)', + pointBackgroundColor: 'rgba(148,159,177,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(148,159,177,0.8)' + }, + { // dark grey + backgroundColor: 'rgba(77,83,96,0.2)', + borderColor: 'rgba(77,83,96,1)', + pointBackgroundColor: 'rgba(77,83,96,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(77,83,96,1)' + }, + { // grey + backgroundColor: 'rgba(148,159,177,0.2)', + borderColor: 'rgba(148,159,177,1)', + pointBackgroundColor: 'rgba(148,159,177,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(148,159,177,0.8)' + } + ]; + lineChartLegend = true; + lineChartPlugins = []; + lineChartType = 'line'; + +} + + |