diff options
Diffstat (limited to 'frontend/src/app/_elements')
7 files changed, 60 insertions, 24 deletions
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css index 35c7c8d5..2eea561e 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css @@ -6,5 +6,6 @@ canvas{ background-color: var(--ns-bg-dark-100); border-radius: 5px; margin: 10px; - font-size: 10px !important; - }
\ No newline at end of file + font-size: 11 !important; + } +
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html index 5bb7aae6..d48212cd 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -1,4 +1,4 @@ - - <canvas id="myChart" > +<div #wrapper style="width:100%;height:95%;"> + <canvas id="myChart" #canvas> </canvas> -
\ No newline at end of file +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts index e873618c..89a76a44 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -1,4 +1,4 @@ -import { Component, AfterViewInit, ViewChild } from '@angular/core'; +import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core'; import { Chart } from 'chart.js'; @Component({ @@ -19,11 +19,27 @@ export class LineChartComponent implements AfterViewInit { dataValLoss:number[]=[]; dataEpoch: number[] = []; + @ViewChild('wrapper') + wrapper!: ElementRef; + @ViewChild('canvas') + canvas!: ElementRef; + constructor() { + } - + width = 700; + height = 400; + myChart!: Chart; - + resize() { + this.width = this.wrapper.nativeElement.offsetWidth; + this.height = this.wrapper.nativeElement.offsetHeight; + + if (this.canvas) { + this.canvas.nativeElement.width = this.width; + this.canvas.nativeElement.height = this.height; + } + } update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) { this.dataAcc.length = 0; this.dataAcc.push(...myAcc); @@ -56,6 +72,9 @@ export class LineChartComponent implements AfterViewInit { } ngAfterViewInit(): void { + + window.addEventListener('resize', () => { this.resize() }); + this.resize(); this.myChart = new Chart("myChart", { type: 'line', @@ -69,7 +88,7 @@ export class LineChartComponent implements AfterViewInit { }, { - label: 'VAl_Accuracy', + label: 'Val_Accuracy', data: this.dataMSE, borderWidth: 1 }, @@ -150,3 +169,4 @@ export class LineChartComponent implements AfterViewInit { ); } } + diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 8af56c43..31c32dfd 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -46,7 +46,7 @@ </table> <div class="mb-3"> <button mat-button (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button> - <div style="display: inline;">{{(this.begin/10)+1}}</div> + <div style="display: inline;">{{(this.begin/10)+1}}...{{getPage()}}</div> <button mat-button (click)="goForward()"><mat-icon>keyboard_arrow_right</mat-icon></button> </div> diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 7c2f8cef..8824ecf4 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -52,16 +52,28 @@ export class ColumnTableComponent implements AfterViewInit { this.begin=0; } goBack(){ - if(this.begin-10<=0) + if(this.begin-10<0) this.begin=0; else + { this.begin-=10; - this.loadData(); + this.loadData(); + } } goForward(){ + if(this.dataset!=undefined){ this.begin+=10; - this.loadData(); + if(this.dataset.rowCount<this.begin) + this.begin-=10; + else + this.loadData(); + } + } + getPage(){ + if(this.dataset!=undefined) + return Math.ceil(this.dataset.rowCount/this.step); + return 0; } diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html index 9f8e9e6f..7be838f1 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html @@ -3,8 +3,7 @@ <div class="topBar"> <div class="kolona mb-3"> <div class="fileButton"> - <button type="button" mat-raised-button (click)="fileInput.click()">Dodaj izvor podataka</button> - + <button type="button" mat-raised-button (click)="fileInput.click()"><span *ngIf="!firstInput">Dodaj izvor podataka</span><span *ngIf="firstInput">{{filename}}</span></button> </div> </div> @@ -32,11 +31,7 @@ </mat-form-field> </div> </div> - - <div class="row" *ngIf="firstInput"> - <label class="naslov mt-2">{{filename}}</label> - - </div> + <div class="row" style="margin-right: 0;"> <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}"> @@ -49,7 +44,7 @@ <div class="mt-5 datatable"> <div [ngClass]="{'hidden': (!existingFlag)}" class="text-center"> <button mat-button (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button> - <div style="display: inline;">{{(this.begin/10)+1}}</div> + <div style="display: inline;">{{(this.begin/10)+1}}...{{getPage()}}</div> <button mat-button (click)="goForward()"><mat-icon>keyboard_arrow_right</mat-icon></button> </div> <app-datatable [tableData]="tableData"></app-datatable> diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts index d801b5fb..19c0083c 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts @@ -47,20 +47,28 @@ export class FormDatasetComponent { this.begin=0; } goBack(){ - if(this.begin-10<=0) + if(this.begin-10<0) this.begin=0; else + { this.begin-=10; - this.loadExisting(); + this.loadExisting(); + } } goForward(){ this.begin+=10; - this.loadExisting(); + if(this.dataset.rowCount<this.begin) + this.begin-=10; + else + this.loadExisting(); } clear(){ this.tableData.hasInput = false; } + getPage(){ + return Math.ceil(this.dataset.rowCount/10) + } changeListener($event: any): void { this.files = $event.srcElement.files; |