aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts')
-rw-r--r--frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts289
1 files changed, 274 insertions, 15 deletions
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 7d21129c..2b97d6b4 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,5 +1,7 @@
-import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ElementRef, ViewChild, Input } from '@angular/core';
import { Chart } from 'chart.js';
+import Experiment from 'src/app/_data/Experiment';
+import Model, { ProblemType } from 'src/app/_data/Model';
@Component({
selector: 'app-line-chart',
@@ -23,14 +25,18 @@ export class LineChartComponent implements AfterViewInit {
wrapper!: ElementRef;
@ViewChild('canvas')
canvas!: ElementRef;
-
+ @Input() experiment!:Experiment;
constructor() {
}
width = 700;
height = 400;
-
- myChart!: Chart;
+ history: any[] = [];
+ myChartAcc!: Chart;
+ myChartMae!: Chart;
+ myChartMse!: Chart;
+ myChartLoss!: Chart;
+ ProblemType=ProblemType;
resize() {
this.width = this.wrapper.nativeElement.offsetWidth;
this.height = this.wrapper.nativeElement.offsetHeight;
@@ -69,14 +75,69 @@ export class LineChartComponent implements AfterViewInit {
this.dataValMSE.length = 0;
this.dataValMSE.push(...myValMse);
- this.myChart.update();
+ this.myChartAcc.update();
+ this.myChartLoss.update();
+ this.myChartMae.update();
+ this.myChartMse.update();
}
+ updateAll(history: any[],totalEpochs:number) {
+ const myAcc: number[] = [];
+ const myMae: number[] = [];
+ const myMse: number[] = [];
+ const myLoss: number[] = [];
+ const myValLoss: number[] = [];
+ const myValAcc: number[] = [];
+ const myValMAE: number[] = [];
+ const myValMSE: number[] = [];
+ const myEpochs: number[] = [];
+ this.history = history;
+ this.history.forEach((metrics, epoch) => {
+ if(totalEpochs>100)
+ {
+ let epochEstimate=epoch*Math.round(Math.sqrt(totalEpochs))
+ if(epochEstimate>totalEpochs)
+ epochEstimate=totalEpochs;
+ myEpochs.push(epochEstimate);
+ }
+ else
+ myEpochs.push(epoch + 1);
+ for (let key in metrics) {
+ let value = metrics[key];
+ if (key === 'accuracy') {
+ myAcc.push(parseFloat(value));
+ }
+ else if (key === 'loss') {
+ myLoss.push(parseFloat(value));
+ }
+ else if (key === 'mae') {
+ myMae.push(parseFloat(value));
+ }
+ else if (key === 'mse') {
+ myMse.push(parseFloat(value));
+ }
+ else if (key === 'val_acc') {
+ myValAcc.push(parseFloat(value));
+ }
+ else if (key === 'val_loss') {
+ myValLoss.push(parseFloat(value));
+ }
+ else if (key === 'val_mae') {
+ myValMAE.push(parseFloat(value));
+ }
+ else if (key === 'val_mse') {
+ myValMSE.push(parseFloat(value));
+ }
+ }
+ });
+
+ this.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc,myValLoss,myValMAE,myValMSE);
+ }
ngAfterViewInit(): void {
window.addEventListener('resize', () => { this.resize() });
this.resize();
- this.myChart = new Chart("myChart",
+ this.myChartAcc = new Chart("myChartacc",
{
type: 'line',
data: {
@@ -92,7 +153,69 @@ export class LineChartComponent implements AfterViewInit {
label: 'Val_Accuracy',
data: this.dataValAcc,
borderWidth: 1
+ }
+ ]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: true,
+ plugins: {
+ legend: {
+ labels: {
+ // This more specific font property overrides the global property
+ color:'white',
+ font: {
+ size: 10
+ }
+ }
+ }
},
+ scales: {
+ x: {
+ ticks: {
+ color: 'white'
+ },
+ grid: {
+ color: "rgba(0, 99, 171, 0.5)"
+ },
+ title: {
+ display: true,
+ text: 'Epoha',
+ color:"white"
+ }
+ },
+ y: {
+ beginAtZero: true,
+ ticks: {
+ color: 'white'
+
+ },
+ grid: {
+ color: "rgba(0, 99, 171, 0.5)"
+ },
+ title: {
+ display: true,
+ text: 'Vrednost',
+ color:"white"
+ }
+ }
+
+ },
+ animation: {
+ duration: 0
+ }
+
+ }
+ },
+
+ );
+ if(this.experiment.type==ProblemType.BinaryClassification || this.experiment.type==ProblemType.MultiClassification){}
+ this.myChartLoss = new Chart("myChartloss",
+ {
+ type: 'line',
+ data: {
+ labels: this.dataEpoch,
+ datasets: [
{
label: 'Loss',
data: this.dataLOSS,
@@ -103,16 +226,68 @@ export class LineChartComponent implements AfterViewInit {
data: this.dataValLoss,
borderWidth: 1
},
- {
- label: 'MAE',
- data: this.dataMAE,
- borderWidth: 1
+ ]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: true,
+
+ plugins: {
+ legend: {
+ labels: {
+ // This more specific font property overrides the global property
+ color:'white',
+ font: {
+ size: 10
+ }
+ }
+ }
},
- {
- label: 'Val_MAE',
- data: this.dataValMAE,
- borderWidth: 1
+ scales: {
+ x: {
+ ticks: {
+ color: 'white'
+ },
+ grid: {
+ color: "rgba(0, 99, 171, 0.5)"
+ },
+ title: {
+ display: true,
+ text: 'Epoha',
+ color:"white"
+ }
+ },
+ y: {
+ beginAtZero: true,
+ ticks: {
+ color: 'white'
+
+ },
+ grid: {
+ color: "rgba(0, 99, 171, 0.5)"
+ },
+ title: {
+ display: true,
+ text: 'Vrednost',
+ color:"white"
+ }
+ }
+
},
+ animation: {
+ duration: 0
+ }
+
+ }
+ },
+
+ );
+ this.myChartMse = new Chart("myChartmse",
+ {
+ type: 'line',
+ data: {
+ labels: this.dataEpoch,
+ datasets: [
{
label: 'MSE',
data: this.dataMSE,
@@ -148,6 +323,11 @@ export class LineChartComponent implements AfterViewInit {
grid: {
color: "rgba(0, 99, 171, 0.5)"
},
+ title: {
+ display: true,
+ text: 'Epoha',
+ color:"white"
+ }
},
y: {
beginAtZero: true,
@@ -157,6 +337,11 @@ export class LineChartComponent implements AfterViewInit {
},
grid: {
color: "rgba(0, 99, 171, 0.5)"
+ },
+ title: {
+ display: true,
+ text: 'Vrednost',
+ color:"white"
}
}
@@ -166,8 +351,82 @@ export class LineChartComponent implements AfterViewInit {
}
}
- }
+ },
+
);
+ this.myChartMae = new Chart("myChartmae",
+ {
+ type: 'line',
+ data: {
+ labels: this.dataEpoch,
+ datasets: [
+ {
+ label: 'MAE',
+ data: this.dataMAE,
+ borderWidth: 1
+ },
+ {
+ label: 'Val_MAE',
+ data: this.dataValMAE,
+ borderWidth: 1
+ },
+ ]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: true,
+
+ plugins: {
+ legend: {
+ labels: {
+ // This more specific font property overrides the global property
+ color:'white',
+ font: {
+ size: 10
+ }
+ }
+ }
+ },
+ scales: {
+ x: {
+ ticks: {
+ color: 'white'
+ },
+ grid: {
+ color: "rgba(0, 99, 171, 0.5)"
+ },
+ title: {
+ display: true,
+ text: 'Epoha',
+ color:"white"
+ }
+ },
+ y: {
+ beginAtZero: true,
+ ticks: {
+ color: 'white'
+
+ },
+ grid: {
+ color: "rgba(0, 99, 171, 0.5)"
+ },
+ title: {
+ display: true,
+ text: 'Vrednost',
+ color:"white"
+ }
+ }
+
+ },
+ animation: {
+ duration: 0
+ }
+
+ }
+ },
+
+ );
+
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-19 15:36:13 +0000