diff options
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 @@ <tr> <th>Grafik</th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> - <!-- <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot> - TODO: dodati [data] - <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart> --> + <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot> + <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart> </td> </tr> <tr> @@ -48,8 +47,8 @@ </span> </td> </tr> - <tr> - <th class="brighter" (click)="openEncodingDialog()">Enkoding + <tr style="padding: 0"> + <th class="brighter" (click)="openEncodingDialog()">Enkoding <span class="material-icons-round">settings</span> </th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> @@ -99,24 +98,28 @@ </td> </tr> - <tr *ngFor="let element of [1, 2]; let i = index"> - <th *ngIf="i == 0" rowspan="2">Vrednosti</th> + <tr *ngFor="let row of tableData; let i = index"> + <th *ngIf="i == 0" [attr.rowspan]="tableData!.length">Vrednosti</th> + - <td *ngFor="let colInfo of dataset.columnInfo; let j = index"> - <!--<app-datatable [data]=""></app-datatable>-->ok + <td *ngFor="let col of row; let j = index"> + <div style="overflow: auto"> + {{col}} + </div> </td> </tr> </tbody> </table> <div class="container text-offwhite belowColumn"> - <div class="row " > + <div class="row "> <div class="col-sm slider rounded"> <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div> - <div class="text-center pt-0 mt-0">Trening<mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>Test</div> - + <div class="text-center pt-0 mt-0">Trening + <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>Test</div> + </div> - + <div class="col-sm-3 d-flex pt-3"> <mat-form-field appearance="fill" style="width: 270px;"> <mat-label>Tip problema</mat-label> @@ -128,7 +131,7 @@ </mat-form-field> </div> <div class="col-sm-3 d-flex pt-3"> - <mat-form-field appearance="fill" > + <mat-form-field appearance="fill"> <mat-label>Izlazna kolona</mat-label> <mat-select> <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option> 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<any> { + return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}/${startRow}/${rowNum}`, { headers: this.authService.authHeader(), responseType: 'text' }); + } editDataset(dataset: Dataset): Observable<Dataset> { return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() }); |