diff options
Diffstat (limited to 'frontend/src/app/_elements/_charts')
6 files changed, 58 insertions, 28 deletions
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index 3faa4794..d6f4b6ec 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -27,8 +27,8 @@ export class BoxPlotComponent implements AfterViewInit { labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], datasets: [{ label: 'Dataset 1', - backgroundColor: 'rgba(0, 65, 101, 1.0)', - borderColor: '#0063AB', + backgroundColor: '#0063AB', + borderColor: '#dfd7d7', borderWidth: 1, outlierColor: '#999999', scaleFontColor: '#0063AB', @@ -78,7 +78,7 @@ export class BoxPlotComponent implements AfterViewInit { scales : { x: { ticks: { - color: 'rgba(0, 65, 101, 1.0)' + color: '#dfd7d7' }, grid: { color: "rgba(0, 99, 171, 0.5)" @@ -88,7 +88,7 @@ export class BoxPlotComponent implements AfterViewInit { min: -50, max: 200, ticks: { - color: 'rgba(0, 65, 101, 1.0)' + color: '#dfd7d7' }, grid: { color: "rgba(0, 99, 171, 0.5)" 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 c8f406f4..7f18256a 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,5 +1,3 @@ -<div class="chart-wrapper"> - <canvas id="myChart"> - - </canvas> -</div>
\ No newline at end of file + + <canvas id="myChart" style="width: 100%; height: 530px;"> + </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 49558025..34df38bc 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 } from '@angular/core'; +import { Component, AfterViewInit, ViewChild } from '@angular/core'; import { Chart } from 'chart.js'; @Component({ @@ -9,12 +9,12 @@ import { Chart } from 'chart.js'; export class LineChartComponent implements AfterViewInit { - dataAcc: number[] = []; - dataMAE: number[] = []; - dataMSE: number[] = []; - dataLOSS: number[] = []; + dataAcc: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]; + dataMAE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]; + dataMSE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]; + dataLOSS: number[] =[2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]; - dataEpoch: number[] = []; + dataEpoch: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]; constructor() { /*let i = 0; @@ -77,11 +77,28 @@ export class LineChartComponent implements AfterViewInit { }, options: { scales: { - y: { - beginAtZero: true - } + x:{ + ticks: { + color: 'white' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, + y: { + beginAtZero: true, + ticks: { + color: 'white' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + } - } + + + } } ); } diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css index 5735217e..005cb692 100644 --- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css @@ -1,6 +1,4 @@ #divScatterChart{ - background-color: beige; - display: block; - width: 400px; - height: 200px; + + display: block; }
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html index 2b30fe1f..ef41775a 100644 --- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html @@ -1,4 +1,4 @@ -<p>Scatter chart:</p> -<div id="divScatterChart"> - <canvas id="ScatterCharts"> </canvas> + +<div id="divScatterChart" style="width: 100%;height: 100%;"> + <canvas id="ScatterCharts" style="width: 100%;height: 280px;"> </canvas> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts index 9dfef4c3..12795c70 100644 --- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts @@ -24,15 +24,32 @@ export class ScatterchartComponent implements OnInit { {x: 15, y: 5}, {x: 16, y: 3}, {x: 17, y: 2}], - backgroundColor: 'rgb(255, 99, 132)' + borderColor: 'white', }] }, options: { scales: { + x:{ + ticks: { + color: 'white' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, y: { - beginAtZero: true + beginAtZero: true, + ticks: { + color: 'white' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } } + } + + } }); } |