diff options
Diffstat (limited to 'frontend/src/app/_elements/_charts/line-chart')
3 files changed, 49 insertions, 26 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 a190693a..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,4 +6,6 @@ canvas{ background-color: var(--ns-bg-dark-100); border-radius: 5px; margin: 10px; - }
\ 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..1c711562 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 class="position-relative" 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..7d21129c 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,43 +19,63 @@ 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); - + this.dataEpoch.length = 0; this.dataEpoch.push(...myEpochs); - this.dataMAE.length = 0; - this.dataMAE.push(...myMae); + this.dataAcc.length = 0; + this.dataAcc.push(...myAcc); this.dataLOSS.length = 0; this.dataLOSS.push(...myLoss); - this.dataMSE.length = 0; - this.dataMSE.push(...myValAcc); + this.dataMAE.length = 0; + this.dataMAE.push(...myMae); this.dataMSE.length = 0; - this.dataMSE.push(...myValLoss); + this.dataMSE.push(...myMse); - this.dataMSE.length = 0; - this.dataMSE.push(...myValMae); + this.dataValAcc.length = 0; + this.dataValAcc.push(...myValAcc); - this.dataMSE.length = 0; - this.dataMSE.push(...myValMse); + this.dataValLoss.length = 0; + this.dataValLoss.push(...myValLoss); - this.dataMSE.length = 0; - this.dataMSE.push(...myMse); + this.dataValMAE.length = 0; + this.dataValMAE.push(...myValMae); + + this.dataValMSE.length = 0; + this.dataValMSE.push(...myValMse); this.myChart.update(); } ngAfterViewInit(): void { + + window.addEventListener('resize', () => { this.resize() }); + this.resize(); this.myChart = new Chart("myChart", { type: 'line', @@ -69,8 +89,8 @@ export class LineChartComponent implements AfterViewInit { }, { - label: 'VAl_Accuracy', - data: this.dataMSE, + label: 'Val_Accuracy', + data: this.dataValAcc, borderWidth: 1 }, { @@ -80,7 +100,7 @@ export class LineChartComponent implements AfterViewInit { }, { label: 'Val_Loss', - data: this.dataMSE, + data: this.dataValLoss, borderWidth: 1 }, { @@ -90,7 +110,7 @@ export class LineChartComponent implements AfterViewInit { }, { label: 'Val_MAE', - data: this.dataMSE, + data: this.dataValMAE, borderWidth: 1 }, { @@ -100,7 +120,7 @@ export class LineChartComponent implements AfterViewInit { }, { label: 'Val_MSE', - data: this.dataMSE, + data: this.dataValMSE, borderWidth: 1 } ] @@ -150,3 +170,4 @@ export class LineChartComponent implements AfterViewInit { ); } } + |