From 0b38d83378e3ea03893eb60729e8bebbf9942949 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 24 Apr 2022 18:17:18 +0200 Subject: Pie Chart dodat (Test Page). --- frontend/src/app/app.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'frontend/src/app/app.module.ts') diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index da81fc4a..0271d64d 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -43,6 +43,7 @@ import { FormDatasetComponent } from './_elements/form-dataset/form-dataset.comp import { FormModelComponent } from './_elements/form-model/form-model.component'; import { ColumnTableComponent } from './_elements/column-table/column-table.component'; import { FolderComponent } from './_elements/folder/folder.component'; +import { TestComponent } from './_pages/test/test.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -74,7 +75,8 @@ export function initializeApp(appConfig: Configuration) { ColumnTableComponent, PieChartComponent, BoxPlotComponent, - FolderComponent + FolderComponent, + TestComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From dbc6d56f495b2238ed1e8b6bc036b23a6067b051 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 24 Apr 2022 18:43:14 +0200 Subject: Doughnut Chart (Varijanta Pie Chart). --- .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/box-plot/box-plot.component.ts | 3 +- .../doughnut-chart/doughnut-chart.component.css | 0 .../doughnut-chart/doughnut-chart.component.html | 1 + .../doughnut-chart.component.spec.ts | 25 ++++++++++++++++ .../doughnut-chart/doughnut-chart.component.ts | 34 ++++++++++++++++++++++ frontend/src/app/_pages/test/test.component.html | 4 ++- frontend/src/app/app.module.ts | 4 ++- 8 files changed, 68 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts (limited to 'frontend/src/app/app.module.ts') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html index 20cf6487..2006eada 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1 +1 @@ -

box-plot works!

+

Box-plot

\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index 56f87057..0cef8f90 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -1,5 +1,4 @@ -import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -import {Chart} from 'node_modules/chart.js'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-box-plot', diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html new file mode 100644 index 00000000..4befc7dc --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html @@ -0,0 +1 @@ + diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts new file mode 100644 index 00000000..67309670 --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DoughnutChartComponent } from './doughnut-chart.component'; + +describe('DoughnutChartComponent', () => { + let component: DoughnutChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DoughnutChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DoughnutChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts new file mode 100644 index 00000000..4c7508fe --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts @@ -0,0 +1,34 @@ +import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + +@Component({ + selector: 'app-doughnut-chart', + templateUrl: './doughnut-chart.component.html', + styleUrls: ['./doughnut-chart.component.css'] +}) +export class DoughnutChartComponent implements AfterViewInit { + + @ViewChild('doughnut') chartRef!: ElementRef; + constructor() { } + + ngAfterViewInit(): void { + const myChart = new Chart(this.chartRef.nativeElement, { + type: 'doughnut', + data: { + labels: ["Africa", "Asia", "Europe", "Latin America", "North America"], + datasets: [{ + label: "Population (millions)", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], + data: [2478,5267,734,784,433] + }] + }, + /*options: { + title: { + display: true, + text: 'Predicted world population (millions) in 2050' + } + }*/ + }); + } + +} diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html index 8085f77f..625739f8 100644 --- a/frontend/src/app/_pages/test/test.component.html +++ b/frontend/src/app/_pages/test/test.component.html @@ -1 +1,3 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 0271d64d..5502df26 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -44,6 +44,7 @@ import { FormModelComponent } from './_elements/form-model/form-model.component' import { ColumnTableComponent } from './_elements/column-table/column-table.component'; import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; +import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -76,7 +77,8 @@ export function initializeApp(appConfig: Configuration) { PieChartComponent, BoxPlotComponent, FolderComponent, - TestComponent + TestComponent, + DoughnutChartComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From aee2cd43578a255f5a0e346ac8955f663a673cca Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 00:56:45 +0200 Subject: Ažurirana komponenta form-model, dodata komponenta hidden-layer. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 12 +-- .../_elements/form-model/form-model.component.css | 11 ++- .../_elements/form-model/form-model.component.html | 107 +++++++++++---------- .../_elements/form-model/form-model.component.ts | 12 +-- .../hidden-layer/hidden-layer.component.css | 5 + .../hidden-layer/hidden-layer.component.html | 40 ++++++++ .../hidden-layer/hidden-layer.component.spec.ts | 25 +++++ .../hidden-layer/hidden-layer.component.ts | 16 +++ frontend/src/app/app.module.ts | 5 +- 9 files changed, 166 insertions(+), 67 deletions(-) create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.css create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.html create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts (limited to 'frontend/src/app/app.module.ts') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 22756c36..14c957cb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3420,9 +3420,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -14355,9 +14355,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css index 9340fed5..c650bdeb 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -1,3 +1,12 @@ -*{ +mat-label{ + color: var(--offwhite) !important; +} +select{ + color: var(--offwhite) !important; +} +mat-form-field{ + color: var(--offwhite) !important; +} +hr{ color: var(--offwhite) !important; } \ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 5db2cb49..69635a4a 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -2,29 +2,27 @@
- - Naziv - - - Obavezno polje - - + + Naziv + + + Unesite naziv + + + Naziv je obavezan + +
Tip problema - + + Obavezno polje @@ -35,13 +33,13 @@
Optimizacija - + + Obavezno polje @@ -50,12 +48,12 @@
Learning rate - + + + Saab + Mercedes + Audi + Obavezno polje @@ -66,12 +64,12 @@
Broj epoha - + + + Saab + Mercedes + Audi + Obavezno polje @@ -80,12 +78,12 @@
Broj uzoraka po iteraciji - + + + Saab + Mercedes + Audi + Obavezno polje @@ -96,13 +94,13 @@
Funkcija aktivacije izlaznog sloja - + + Obavezno polje @@ -111,13 +109,13 @@
Funkcija troška - + + Obavezno polje @@ -125,15 +123,24 @@
- +
- -
+ +
+
+ Broj skrivenih slojeva:
- +
+
+
+
+ +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index 6f795161..c5ab9811 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -4,6 +4,8 @@ import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; +import {FormGroupDirective, NgForm} from '@angular/forms'; +import {ErrorStateMatcher} from '@angular/material/core'; @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', @@ -18,15 +20,9 @@ export class FormModelComponent implements OnInit { ngOnInit(): void { } - animalControl = new FormControl('', Validators.required); selectFormControl = new FormControl('', Validators.required); - /*animals: Animal[] = [ - {name: 'Dog', sound: 'Woof!'}, - {name: 'Cat', sound: 'Meow!'}, - {name: 'Cow', sound: 'Moo!'}, - {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'}, - ]; - */ + nameFormControl = new FormControl('', [Validators.required, Validators.email]); + newModel: Model = new Model(); myModels?: Model[]; selectedModel?: Model; diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css new file mode 100644 index 00000000..c8db6056 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css @@ -0,0 +1,5 @@ +.container{ + max-width: 15rem; + border: 1px solid white; + border-radius: 5px; +} diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html new file mode 100644 index 00000000..65e0f626 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html @@ -0,0 +1,40 @@ +
+ + Aktivaciona funkcija + + + Relu + Sigmoid + Softmax + + + Obavezno polje + + +
+ Broj čvorova: +
+ + Regularizacija + + + L1 + L2 + + + Obavezno polje + + +
+ + Stopa regularizacije + + 0.001 + 0.01 + 0.1 + + + Obavezno polje + + +
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts new file mode 100644 index 00000000..103e4539 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HiddenLayerComponent } from './hidden-layer.component'; + +describe('HiddenLayerComponent', () => { + let component: HiddenLayerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HiddenLayerComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HiddenLayerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts new file mode 100644 index 00000000..fa9a1114 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-hidden-layer', + templateUrl: './hidden-layer.component.html', + styleUrls: ['./hidden-layer.component.css'] +}) +export class HiddenLayerComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + selectFormControl = new FormControl('', Validators.required); +} diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 5502df26..a7850552 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -45,7 +45,7 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; - +import { HiddenLayerComponent } from './_elements/hidden-layer/hidden-layer.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); } @@ -78,7 +78,8 @@ export function initializeApp(appConfig: Configuration) { BoxPlotComponent, FolderComponent, TestComponent, - DoughnutChartComponent + DoughnutChartComponent, + HiddenLayerComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From fd8abefd0caed47b7e3d7dd0abf10e747a18f82e Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 12:07:36 +0200 Subject: Izbrisana komponenta hidden-layer iz app.module fajla. --- .../src/app/_elements/form-model/form-model.component.html | 10 +--------- frontend/src/app/app.module.ts | 4 ++-- 2 files changed, 3 insertions(+), 11 deletions(-) (limited to 'frontend/src/app/app.module.ts') diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 22307d4d..7d669d1d 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -114,15 +114,7 @@
- - +
Broj Skrivenih Slojeva
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index a7850552..faa8bb8e 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -45,7 +45,7 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; -import { HiddenLayerComponent } from './_elements/hidden-layer/hidden-layer.component'; + export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); } @@ -79,7 +79,7 @@ export function initializeApp(appConfig: Configuration) { FolderComponent, TestComponent, DoughnutChartComponent, - HiddenLayerComponent + ], imports: [ BrowserModule, -- cgit v1.2.3