From 0122486768e41e482871f5a720623ca005fa54d7 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Mon, 18 Apr 2022 22:32:20 +0200
Subject: Line chart - nije konacno.

---
 frontend/src/app/app.module.ts                     |  4 +-
 .../point-linechart/point-linechart.component.css  |  0
 .../point-linechart/point-linechart.component.html |  2 +
 .../point-linechart.component.spec.ts              | 25 ++++++++++
 .../point-linechart/point-linechart.component.ts   | 57 ++++++++++++++++++++++
 5 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/point-linechart/point-linechart.component.css
 create mode 100644 frontend/src/app/point-linechart/point-linechart.component.html
 create mode 100644 frontend/src/app/point-linechart/point-linechart.component.spec.ts
 create mode 100644 frontend/src/app/point-linechart/point-linechart.component.ts

(limited to 'frontend/src/app')

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c4f89ad8..948e9a2b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -48,6 +48,7 @@ import { TrainingComponent } from './training/training.component';
 import { ItemExperimentComponent } from './_elements/item-experiment/item-experiment.component';
 import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component';
 import { Configuration } from './configuration.service';
+import { PointLinechartComponent } from './point-linechart/point-linechart.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -87,7 +88,8 @@ export function initializeApp(appConfig: Configuration) {
     GraphComponent,
     TrainingComponent,
     ItemExperimentComponent,
-    YesNoDialogComponent
+    YesNoDialogComponent,
+    PointLinechartComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/point-linechart/point-linechart.component.css b/frontend/src/app/point-linechart/point-linechart.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/point-linechart/point-linechart.component.html b/frontend/src/app/point-linechart/point-linechart.component.html
new file mode 100644
index 00000000..f9f9a24a
--- /dev/null
+++ b/frontend/src/app/point-linechart/point-linechart.component.html
@@ -0,0 +1,2 @@
+<canvas #linechart width="800" height="450">Point line chart:</canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/point-linechart/point-linechart.component.spec.ts b/frontend/src/app/point-linechart/point-linechart.component.spec.ts
new file mode 100644
index 00000000..fe08fe7c
--- /dev/null
+++ b/frontend/src/app/point-linechart/point-linechart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PointLinechartComponent } from './point-linechart.component';
+
+describe('PointLinechartComponent', () => {
+  let component: PointLinechartComponent;
+  let fixture: ComponentFixture<PointLinechartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PointLinechartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PointLinechartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/point-linechart/point-linechart.component.ts b/frontend/src/app/point-linechart/point-linechart.component.ts
new file mode 100644
index 00000000..3497a20c
--- /dev/null
+++ b/frontend/src/app/point-linechart/point-linechart.component.ts
@@ -0,0 +1,57 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+
+@Component({
+  selector: 'app-point-linechart',
+  templateUrl: './point-linechart.component.html',
+  styleUrls: ['./point-linechart.component.css']
+})
+export class PointLinechartComponent implements AfterViewInit {
+
+  @ViewChild('linechart') chartRef!: ElementRef;
+  constructor() { }
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'line',
+      data: {
+        labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
+        datasets: [{ 
+            data: [86,114,106,106,107,111,133,221,783,2478],
+            label: "Africa",
+            borderColor: "#3e95cd",
+            fill: false
+          }, { 
+            data: [282,350,411,502,635,809,947,1402,3700,5267],
+            label: "Asia",
+            borderColor: "#8e5ea2",
+            fill: false
+          }, { 
+            data: [168,170,178,190,203,276,408,547,675,734],
+            label: "Europe",
+            borderColor: "#3cba9f",
+            fill: false
+          }, { 
+            data: [40,20,10,16,24,38,74,167,508,784],
+            label: "Latin America",
+            borderColor: "#e8c3b9",
+            fill: false
+          }, { 
+            data: [6,3,2,2,7,26,82,172,312,433],
+            label: "North America",
+            borderColor: "#c45850",
+            fill: false
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'World population per region (in millions)'
+        }
+      }*/
+      
+    });
+  
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3