Dodate su komponente za grafik.

5 files changed, 94 insertions, 1 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';
+  
+}
+
+
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 948e9a2b..6a95bfe6 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -50,6 +50,7 @@ import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.comp
 import { Configuration } from './configuration.service';
 import { PointLinechartComponent } from './point-linechart/point-linechart.component';
 
+import { LineChartComponent } from './_elements/line-chart/line-chart.component';
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
 }
@@ -89,7 +90,8 @@ export function initializeApp(appConfig: Configuration) {
     TrainingComponent,
     ItemExperimentComponent,
     YesNoDialogComponent,
-    PointLinechartComponent
+    PointLinechartComponent,
+    LineChartComponent
   ],
   imports: [
     BrowserModule,