diff options
Diffstat (limited to 'frontend/src/app/_elements/_charts')
3 files changed, 26 insertions, 14 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 9694119d..862a86e1 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 @@ -4,7 +4,7 @@ } .bottom { - height: 10%; + height: 30px; } canvas { 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 a81f9dc4..cc1c0121 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,28 +1,29 @@ -<div #wrapper class="position-relative" style="width:100%;height:95%;"> +<div #wrapper class="position-relative" style="width:100%;height:95%; border: 1px solid var(--ns-accent); background-color: var(--ns-bg-dark-100); border-radius: 15px;"> <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type != ProblemType.Regression}" style="width: 100%; height: 90%;"> <div class="canvas-container"> - <canvas id="myChartmae" #canvas> + <canvas #myChartmae> </canvas> </div> <div class="canvas-container"> - <canvas id="myChartmse" #canvas> + <canvas #myChartmse> </canvas> </div> </div> <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}"> <div class="ns-col"> - <canvas id="myChartloss" #canvas> + <canvas #myChartloss> </canvas> </div> <div class="ns-col"> - <canvas id="myChartacc" #canvas> + <canvas #myChartacc> </canvas> </div> </div> - <div class="bottom d-flex flex-row align-items-center"> - <button *ngIf="predictor" class="btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above"> + <div class="bottom d-flex flex-row" style="justify-content: space-between; align-items: center;"> + <h3 class="mt-5 mx-2"><span *ngIf="modelName.length > 0 && predictor">Model treniran za konfiguraciju: {{modelName}}</span><span *ngIf="modelName.length > 0 && !predictor">Model se trenira za konfiguraciju: {{modelName}}</span></h3> + <button *ngIf="predictor" class="mt-5 mx-2 btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above"> <mat-icon>download</mat-icon> <div>H5</div> </button> </div> 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 ceff02bd..b2eec377 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 @@ -26,8 +26,12 @@ export class LineChartComponent implements AfterViewInit { @ViewChild('wrapper') wrapper!: ElementRef; - @ViewChildren('canvas') - canvas!: QueryList<ElementRef>; + + @ViewChild('myChartacc') myChartacc!: ElementRef; + @ViewChild('myChartloss') myChartloss!: ElementRef; + @ViewChild('myChartmse') myChartmse!: ElementRef; + @ViewChild('myChartmae') myChartmae!: ElementRef; + @Input() experiment!: Experiment; @Input() predictor?: Predictor; @@ -149,7 +153,7 @@ export class LineChartComponent implements AfterViewInit { window.addEventListener('resize', () => { this.resize() }); this.resize(); - this.myChartAcc = new Chart("myChartacc", + this.myChartAcc = new Chart(this.myChartacc.nativeElement, { type: 'line', data: { @@ -222,7 +226,7 @@ export class LineChartComponent implements AfterViewInit { ); if (this.experiment.type == ProblemType.BinaryClassification || this.experiment.type == ProblemType.MultiClassification) { } - this.myChartLoss = new Chart("myChartloss", + this.myChartLoss = new Chart(this.myChartloss.nativeElement, { type: 'line', data: { @@ -294,7 +298,7 @@ export class LineChartComponent implements AfterViewInit { }, ); - this.myChartMse = new Chart("myChartmse", + this.myChartMse = new Chart(this.myChartmse.nativeElement, { type: 'line', data: { @@ -366,7 +370,7 @@ export class LineChartComponent implements AfterViewInit { }, ); - this.myChartMae = new Chart("myChartmae", + this.myChartMae = new Chart(this.myChartmae.nativeElement, { type: 'line', data: { @@ -440,5 +444,12 @@ export class LineChartComponent implements AfterViewInit { ); } + + modelName: string = ''; + + setName(name: string) { + this.modelName = name; + this.predictor = undefined; + } } |