From a8a04c45c8941afde34ec0765a0e5f4051fe1f02 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 26 Apr 2022 22:47:39 +0200 Subject: Dodat poziv back-u za deo fajla sa podacima (planirano stranicenje). Prikaz podataka iz dataseta u okviru glavne tabele. Uredjeni grafici za statistiku. --- .../_charts/box-plot/box-plot.component.ts | 62 ++++++++++++++-------- .../_charts/pie-chart/pie-chart.component.ts | 15 ++++-- .../column-table/column-table.component.html | 31 ++++++----- .../column-table/column-table.component.ts | 12 ++++- frontend/src/app/_services/datasets.service.ts | 3 ++ 5 files changed, 79 insertions(+), 44 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 078e7176..45e83e83 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 @@ -16,33 +16,32 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); }) export class BoxPlotComponent implements AfterViewInit { - @Input()width: number = 800; - @Input()height: number = 450; + @Input()width: number = 600; + @Input()height: number = 800; @ViewChild('boxplot') chartRef!: ElementRef; constructor() { } boxplotData = { // define label tree - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [{ - label: 'Dataset 1', - backgroundColor: 'rgba(255,0,0,0.5)', - borderColor: 'red', - borderWidth: 1, - outlierColor: '#999999', - padding: 10, - itemRadius: 0, - data: [ - randomValues(100, 0, 100), - randomValues(100, 0, 20), - randomValues(100, 20, 70), - randomValues(100, 60, 100), - randomValues(40, 50, 100), - randomValues(100, 60, 120), - randomValues(100, 80, 100) - ] - }, { + labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], + datasets: [{ + label: 'Dataset 1', + backgroundColor: 'rgba(255,0,0,0.5)', + borderColor: 'red', + borderWidth: 1, + outlierColor: '#999999', + padding: 10, + itemRadius: 0, + data: [ + randomValues(100, 0, 100), + /*randomValues(100, 0, 20), + randomValues(100, 20, 70), + randomValues(100, 60, 100), + randomValues(40, 50, 100), + randomValues(100, 60, 120), + randomValues(100, 80, 100)*/ + ]}/*, { label: 'Dataset 2', backgroundColor: 'rgba(0,0,255,0.5)', borderColor: 'blue', @@ -59,12 +58,29 @@ export class BoxPlotComponent implements AfterViewInit { randomValues(100, 20, 100), randomValues(100, 80, 100) ] - }] + }*/] }; ngAfterViewInit(): void { const myChart = new Chart(this.chartRef.nativeElement, { type: "boxplot", - data: this.boxplotData + data: this.boxplotData, + options: { + /*title: { + display: true, + text: 'Predicted world population (millions) in 2050' + }*/ + plugins:{ + legend: { + display: false + }, + }, + scales : { + y : { + min: -50, + max: 200 + } + } + } }); } diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts index 3f2dbfaf..248c9aa8 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts @@ -8,7 +8,7 @@ import {Chart} from 'chart.js'; }) export class PieChartComponent implements AfterViewInit { - @Input()width: number = 800; + @Input()width: number = 600; @Input()height: number = 450; @ViewChild('piechart') chartRef!: ElementRef; @@ -25,12 +25,17 @@ export class PieChartComponent implements AfterViewInit { data: [2478,5267,734,784,433] }] }, - /*options: { - title: { + options: { + /*title: { display: true, text: 'Predicted world population (millions) in 2050' - } - }*/ + }*/ + plugins:{ + legend: { + display: false + }, + } + } }); } diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 1a5a5e81..8551f710 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -23,9 +23,8 @@ Grafik - + + @@ -48,8 +47,8 @@ - - Enkoding  + + Enkoding settings @@ -99,24 +98,28 @@ - - Vrednosti + + Vrednosti + - - ok + +
+ {{col}} +
-
+
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
TreningTest
- +
Trening + Test
+
- +
Tip problema @@ -128,7 +131,7 @@
- + Izlazna kolona {{item.columnName}} diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index f3aedd1b..9cb038bc 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -8,6 +8,7 @@ import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dial import { MatSliderChange } from '@angular/material/slider'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; @Component({ selector: 'app-column-table', @@ -24,9 +25,10 @@ export class ColumnTableComponent implements AfterViewInit { Encoding = Encoding; NullValueOptions = NullValueOptions; tableData?: any[][]; + nesto = 10; testSetDistribution:number=70; - constructor(private datasetService: DatasetsService, public dialog: MatDialog) { + constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -41,11 +43,17 @@ export class ColumnTableComponent implements AfterViewInit { this.resetColumnEncodings(Encoding.Label); this.setDeleteColumnsForMissingValTreatment(); - /*this.tableData = this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => { + /*this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => { if (file) { //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); } });*/ + this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { + if (response && this.dataset != undefined) { + this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter); + console.log(this.tableData); + } + }); }); } diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts index ff96c39b..3b6e6b64 100644 --- a/frontend/src/app/_services/datasets.service.ts +++ b/frontend/src/app/_services/datasets.service.ts @@ -27,6 +27,9 @@ export class DatasetsService { getDatasetFile(fileId: any): any { return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' }); } + getDatasetFilePartial(fileId: any, startRow: number, rowNum: number): Observable { + return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}/${startRow}/${rowNum}`, { headers: this.authService.authHeader(), responseType: 'text' }); + } editDataset(dataset: Dataset): Observable { return this.http.put(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() }); -- cgit v1.2.3