diff options
Diffstat (limited to 'frontend/src/app/_elements/_charts/line-chart')
3 files changed, 41 insertions, 12 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 124b39e8..a190693a 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 @@ -1,7 +1,7 @@ canvas{ - width:95% !important; - height:95% !important; + width:100% !important; + height:90% !important; border: 1px solid var(--ns-primary); background-color: var(--ns-bg-dark-100); border-radius: 5px; 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 6ffddd1f..5bb7aae6 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,3 +1,4 @@ <canvas id="myChart" > - </canvas>
\ No newline at end of file + </canvas> +
\ 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 0924801e..414d6327 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 @@ -13,22 +13,18 @@ export class LineChartComponent implements AfterViewInit { dataMAE: number[] = []; dataMSE: number[] = []; dataLOSS: number[] = []; - + dataValAcc:number[]=[]; + dataValMAE:number[]=[]; + dataValMSE:number[]=[]; + dataValLoss:number[]=[]; dataEpoch: number[] = []; constructor() { - /*let i = 0; - setInterval(() => { - this.dataAcc.push(0.5); - this.dataEpoch.push(i); - i++; - this.update(); - }, 200);*/ } myChart!: Chart; - update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[]) { + 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); @@ -42,6 +38,18 @@ export class LineChartComponent implements AfterViewInit { this.dataLOSS.push(...myLoss); this.dataMSE.length = 0; + this.dataMSE.push(...myValAcc); + + this.dataMSE.length = 0; + this.dataMSE.push(...myValLoss); + + this.dataMSE.length = 0; + this.dataMSE.push(...myValMae); + + this.dataMSE.length = 0; + this.dataMSE.push(...myValMse); + + this.dataMSE.length = 0; this.dataMSE.push(...myMse); this.myChart.update(); @@ -61,19 +69,39 @@ export class LineChartComponent implements AfterViewInit { }, { + label: 'VAl_Accuracy', + data: this.dataMSE, + borderWidth: 1 + }, + { label: 'Loss', data: this.dataLOSS, borderWidth: 1 }, { + label: 'Val_Loss', + data: this.dataMSE, + borderWidth: 1 + }, + { label: 'MAE', data: this.dataMAE, borderWidth: 1 }, { + label: 'Val_MAE', + data: this.dataMSE, + borderWidth: 1 + }, + { label: 'MSE', data: this.dataMSE, borderWidth: 1 + }, + { + label: 'Val_MSE', + data: this.dataMSE, + borderWidth: 1 } ] }, |