From 1177f4b29b616a59af39f4aef11b116f9660357d Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 01:28:46 +0200 Subject: Reorganizovao stranice i komponente. --- .../_charts/box-plot/box-plot.component.css | 0 .../_charts/box-plot/box-plot.component.html | 1 + .../_charts/box-plot/box-plot.component.spec.ts | 25 ++++++++++++++++++++++ .../_charts/box-plot/box-plot.component.ts | 15 +++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.css create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.html create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts (limited to 'frontend/src/app/_elements/_charts/box-plot') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html new file mode 100644 index 00000000..20cf6487 --- /dev/null +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -0,0 +1 @@ +

box-plot works!

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts new file mode 100644 index 00000000..759e7c5e --- /dev/null +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BoxPlotComponent } from './box-plot.component'; + +describe('BoxPlotComponent', () => { + let component: BoxPlotComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BoxPlotComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BoxPlotComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..0cef8f90 --- /dev/null +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-box-plot', + templateUrl: './box-plot.component.html', + styleUrls: ['./box-plot.component.css'] +}) +export class BoxPlotComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} -- cgit v1.2.3 From 0b38d83378e3ea03893eb60729e8bebbf9942949 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 24 Apr 2022 18:17:18 +0200 Subject: Pie Chart dodat (Test Page). --- .../_charts/box-plot/box-plot.component.ts | 3 ++- .../_charts/pie-chart/pie-chart.component.html | 2 +- .../_charts/pie-chart/pie-chart.component.ts | 27 +++++++++++++++++++--- frontend/src/app/_pages/test/test.component.css | 0 frontend/src/app/_pages/test/test.component.html | 1 + .../src/app/_pages/test/test.component.spec.ts | 25 ++++++++++++++++++++ frontend/src/app/_pages/test/test.component.ts | 15 ++++++++++++ frontend/src/app/app-routing.module.ts | 4 +++- frontend/src/app/app.module.ts | 4 +++- 9 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 frontend/src/app/_pages/test/test.component.css create mode 100644 frontend/src/app/_pages/test/test.component.html create mode 100644 frontend/src/app/_pages/test/test.component.spec.ts create mode 100644 frontend/src/app/_pages/test/test.component.ts (limited to 'frontend/src/app/_elements/_charts/box-plot') 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 0cef8f90..56f87057 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 @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; @Component({ selector: 'app-box-plot', diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html index 43a2d766..413aa6f3 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html @@ -1 +1 @@ -

pie-chart works!

+ 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 dde5cbab..e7d79615 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 @@ -1,15 +1,36 @@ -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; @Component({ selector: 'app-pie-chart', templateUrl: './pie-chart.component.html', styleUrls: ['./pie-chart.component.css'] }) -export class PieChartComponent implements OnInit { +export class PieChartComponent implements AfterViewInit { + @ViewChild('piechart') chartRef!: ElementRef; constructor() { } - ngOnInit(): void { + ngAfterViewInit(): void { + const myChart = new Chart(this.chartRef.nativeElement, { + type: 'pie', + data: { + labels: ["Africa", "Asia", "Europe", "Latin America", "North America"], + datasets: [{ + label: "Population (millions)", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], + data: [2478,5267,734,784,433] + }] + }, + /*options: { + title: { + display: true, + text: 'Predicted world population (millions) in 2050' + } + }*/ +}); + } + } diff --git a/frontend/src/app/_pages/test/test.component.css b/frontend/src/app/_pages/test/test.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html new file mode 100644 index 00000000..8085f77f --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/app/_pages/test/test.component.spec.ts b/frontend/src/app/_pages/test/test.component.spec.ts new file mode 100644 index 00000000..e0f9bcc9 --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestComponent } from './test.component'; + +describe('TestComponent', () => { + let component: TestComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TestComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/test/test.component.ts b/frontend/src/app/_pages/test/test.component.ts new file mode 100644 index 00000000..b3c0d8cf --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-test', + templateUrl: './test.component.html', + styleUrls: ['./test.component.css'] +}) +export class TestComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index cd742cfc..7a6b0890 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -7,13 +7,15 @@ import { ProfileComponent } from './_pages/profile/profile.component'; import { PlaygroundComponent } from './_pages/playground/playground.component'; import { ExperimentComponent } from './_pages/experiment/experiment.component'; import { ArchiveComponent } from './_pages/archive/archive.component'; +import { TestComponent } from './_pages/test/test.component'; const routes: Routes = [ { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } }, - { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } } + { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } }, + { path: 'test', component: TestComponent, data: { title: 'Test' } } ]; @NgModule({ diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index da81fc4a..0271d64d 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -43,6 +43,7 @@ import { FormDatasetComponent } from './_elements/form-dataset/form-dataset.comp import { FormModelComponent } from './_elements/form-model/form-model.component'; import { ColumnTableComponent } from './_elements/column-table/column-table.component'; import { FolderComponent } from './_elements/folder/folder.component'; +import { TestComponent } from './_pages/test/test.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -74,7 +75,8 @@ export function initializeApp(appConfig: Configuration) { ColumnTableComponent, PieChartComponent, BoxPlotComponent, - FolderComponent + FolderComponent, + TestComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From dbc6d56f495b2238ed1e8b6bc036b23a6067b051 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 24 Apr 2022 18:43:14 +0200 Subject: Doughnut Chart (Varijanta Pie Chart). --- .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/box-plot/box-plot.component.ts | 3 +- .../doughnut-chart/doughnut-chart.component.css | 0 .../doughnut-chart/doughnut-chart.component.html | 1 + .../doughnut-chart.component.spec.ts | 25 ++++++++++++++++ .../doughnut-chart/doughnut-chart.component.ts | 34 ++++++++++++++++++++++ frontend/src/app/_pages/test/test.component.html | 4 ++- frontend/src/app/app.module.ts | 4 ++- 8 files changed, 68 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts (limited to 'frontend/src/app/_elements/_charts/box-plot') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html index 20cf6487..2006eada 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1 +1 @@ -

box-plot works!

+

Box-plot

\ No newline at end of file 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 56f87057..0cef8f90 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 @@ -1,5 +1,4 @@ -import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -import {Chart} from 'node_modules/chart.js'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-box-plot', diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html new file mode 100644 index 00000000..4befc7dc --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html @@ -0,0 +1 @@ + diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts new file mode 100644 index 00000000..67309670 --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DoughnutChartComponent } from './doughnut-chart.component'; + +describe('DoughnutChartComponent', () => { + let component: DoughnutChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DoughnutChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DoughnutChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts new file mode 100644 index 00000000..4c7508fe --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts @@ -0,0 +1,34 @@ +import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + +@Component({ + selector: 'app-doughnut-chart', + templateUrl: './doughnut-chart.component.html', + styleUrls: ['./doughnut-chart.component.css'] +}) +export class DoughnutChartComponent implements AfterViewInit { + + @ViewChild('doughnut') chartRef!: ElementRef; + constructor() { } + + ngAfterViewInit(): void { + const myChart = new Chart(this.chartRef.nativeElement, { + type: 'doughnut', + data: { + labels: ["Africa", "Asia", "Europe", "Latin America", "North America"], + datasets: [{ + label: "Population (millions)", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], + data: [2478,5267,734,784,433] + }] + }, + /*options: { + title: { + display: true, + text: 'Predicted world population (millions) in 2050' + } + }*/ + }); + } + +} diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html index 8085f77f..625739f8 100644 --- a/frontend/src/app/_pages/test/test.component.html +++ b/frontend/src/app/_pages/test/test.component.html @@ -1 +1,3 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 0271d64d..5502df26 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -44,6 +44,7 @@ import { FormModelComponent } from './_elements/form-model/form-model.component' import { ColumnTableComponent } from './_elements/column-table/column-table.component'; import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; +import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -76,7 +77,8 @@ export function initializeApp(appConfig: Configuration) { PieChartComponent, BoxPlotComponent, FolderComponent, - TestComponent + TestComponent, + DoughnutChartComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From 5857e1c71eda1ee6455d55ef9f8d1c10f75a8457 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Tue, 26 Apr 2022 21:05:08 +0200 Subject: Box plot-sredjeno. --- frontend/package-lock.json | 30 ++++++++++ frontend/package.json | 1 + .../_charts/barchart/barchart.component.ts | 1 + .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/box-plot/box-plot.component.ts | 64 ++++++++++++++++++++-- .../doughnut-chart/doughnut-chart.component.html | 2 +- .../doughnut-chart/doughnut-chart.component.ts | 5 +- .../_charts/pie-chart/pie-chart.component.html | 2 +- .../_charts/pie-chart/pie-chart.component.ts | 7 ++- frontend/src/app/_pages/test/test.component.html | 3 +- 10 files changed, 106 insertions(+), 11 deletions(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9c3256b2..710e9710 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -24,6 +24,7 @@ "@microsoft/signalr": "^6.0.4", "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", + "@sgratzl/chartjs-chart-boxplot": "^3.7.1", "bootstrap": "^5.1.3", "chart.js": "^3.7.1", "csv-parser": "^3.0.0", @@ -2701,6 +2702,22 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@sgratzl/boxplots": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz", + "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA==" + }, + "node_modules/@sgratzl/chartjs-chart-boxplot": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz", + "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==", + "dependencies": { + "@sgratzl/boxplots": "^1.3.0" + }, + "peerDependencies": { + "chart.js": "^3.7.0" + } + }, "node_modules/@socket.io/base64-arraybuffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", @@ -13722,6 +13739,19 @@ "jsonc-parser": "3.0.0" } }, + "@sgratzl/boxplots": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz", + "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA==" + }, + "@sgratzl/chartjs-chart-boxplot": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz", + "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==", + "requires": { + "@sgratzl/boxplots": "^1.3.0" + } + }, "@socket.io/base64-arraybuffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index f2d1e991..369ac5c9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "@microsoft/signalr": "^6.0.4", "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", + "@sgratzl/chartjs-chart-boxplot": "^3.7.1", "bootstrap": "^5.1.3", "chart.js": "^3.7.1", "csv-parser": "^3.0.0", diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts index def64b7d..904335d7 100644 --- a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts +++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts @@ -8,6 +8,7 @@ import {Chart} from 'node_modules/chart.js'; }) export class BarchartComponent implements OnInit { + constructor() { } ngOnInit(){ diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html index 2006eada..34c283c7 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1 +1 @@ -

Box-plot

\ No newline at end of file + \ No newline at end of file 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 0cef8f90..078e7176 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 @@ -1,15 +1,71 @@ -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { Chart, LinearScale, CategoryScale } from 'chart.js'; +import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot'; + +function randomValues(count: number, min: number, max: number) { + const delta = max - min; + return Array.from({ length: count }).map(() => Math.random() * delta + min); +} + +Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); @Component({ selector: 'app-box-plot', templateUrl: './box-plot.component.html', styleUrls: ['./box-plot.component.css'] }) -export class BoxPlotComponent implements OnInit { +export class BoxPlotComponent implements AfterViewInit { + @Input()width: number = 800; + @Input()height: number = 450; + + @ViewChild('boxplot') chartRef!: ElementRef; constructor() { } - ngOnInit(): void { - } + 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) + ] + }, { + label: 'Dataset 2', + backgroundColor: 'rgba(0,0,255,0.5)', + borderColor: 'blue', + borderWidth: 1, + outlierColor: '#999999', + padding: 10, + itemRadius: 0, + data: [ + randomValues(100, 60, 100), + randomValues(100, 0, 100), + randomValues(100, 0, 20), + randomValues(100, 20, 70), + randomValues(40, 60, 120), + randomValues(100, 20, 100), + randomValues(100, 80, 100) + ] + }] + }; + ngAfterViewInit(): void { + const myChart = new Chart(this.chartRef.nativeElement, { + type: "boxplot", + data: this.boxplotData + }); +} } diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html index 4befc7dc..9c464534 100644 --- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html @@ -1 +1 @@ - + diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts index 4c7508fe..fc13289c 100644 --- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import {Chart} from 'node_modules/chart.js'; @Component({ @@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js'; }) export class DoughnutChartComponent implements AfterViewInit { + @Input()width: number = 800; + @Input()height: number = 450; + @ViewChild('doughnut') chartRef!: ElementRef; constructor() { } diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html index 413aa6f3..aa3f26ab 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html @@ -1 +1 @@ - + 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 e7d79615..3f2dbfaf 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 @@ -1,5 +1,5 @@ -import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -import {Chart} from 'node_modules/chart.js'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'chart.js'; @Component({ selector: 'app-pie-chart', @@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js'; }) export class PieChartComponent implements AfterViewInit { + @Input()width: number = 800; + @Input()height: number = 450; + @ViewChild('piechart') chartRef!: ElementRef; constructor() { } diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html index 625739f8..ec6ef0d6 100644 --- a/frontend/src/app/_pages/test/test.component.html +++ b/frontend/src/app/_pages/test/test.component.html @@ -1,3 +1,4 @@ - \ No newline at end of file + + \ No newline at end of file -- cgit v1.2.3 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(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') 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 From 98d3f4dedaabf62213b95dd8e7b67f9e8ab99006 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Wed, 27 Apr 2022 19:52:48 +0200 Subject: Sredjen dizajn tabele. Sredjena difoltna vrednost za missingvalue. Grafici uredjeni. --- .../_charts/box-plot/box-plot.component.html | 4 +- .../_charts/box-plot/box-plot.component.ts | 25 +++++++-- .../_charts/pie-chart/pie-chart.component.html | 4 +- .../_charts/pie-chart/pie-chart.component.ts | 10 ++-- .../column-table/column-table.component.css | 60 ++++++++++++++++++++++ .../column-table/column-table.component.html | 57 +++++++++++--------- .../column-table/column-table.component.ts | 38 +++++--------- frontend/src/styles/helper.css | 6 +++ frontend/src/styles/theme.css | 3 +- 9 files changed, 143 insertions(+), 64 deletions(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html index 34c283c7..688eafae 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1 +1,3 @@ - \ No newline at end of file +
+ +
\ No newline at end of file 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 45e83e83..3faa4794 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,8 +16,8 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); }) export class BoxPlotComponent implements AfterViewInit { - @Input()width: number = 600; - @Input()height: number = 800; + @Input()width?: number; + @Input()height?: number; @ViewChild('boxplot') chartRef!: ElementRef; constructor() { } @@ -27,10 +27,11 @@ export class BoxPlotComponent implements AfterViewInit { labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], datasets: [{ label: 'Dataset 1', - backgroundColor: 'rgba(255,0,0,0.5)', - borderColor: 'red', + backgroundColor: 'rgba(0, 65, 101, 1.0)', + borderColor: '#0063AB', borderWidth: 1, outlierColor: '#999999', + scaleFontColor: '#0063AB', padding: 10, itemRadius: 0, data: [ @@ -75,9 +76,23 @@ export class BoxPlotComponent implements AfterViewInit { }, }, scales : { + x: { + ticks: { + color: 'rgba(0, 65, 101, 1.0)' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, y : { min: -50, - max: 200 + max: 200, + ticks: { + color: 'rgba(0, 65, 101, 1.0)' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } } } } diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html index aa3f26ab..7faf3af0 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html @@ -1 +1,3 @@ - +
+ +
\ No newline at end of file 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 248c9aa8..f141f522 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,8 +8,8 @@ import {Chart} from 'chart.js'; }) export class PieChartComponent implements AfterViewInit { - @Input()width: number = 600; - @Input()height: number = 450; + @Input()width?: number; + @Input()height?: number; @ViewChild('piechart') chartRef!: ElementRef; constructor() { } @@ -22,7 +22,7 @@ export class PieChartComponent implements AfterViewInit { datasets: [{ label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], - data: [2478,5267,734,784,433] + data: [2478,5267,734,784,433], }] }, options: { @@ -34,7 +34,9 @@ export class PieChartComponent implements AfterViewInit { legend: { display: false }, - } + }, + layout: { + padding: 15} } }); diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 0db50cdb..1e7d4745 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -3,18 +3,25 @@ table.fixed { display: block; overflow-x: auto; white-space: nowrap; + border: 1px solid var(--ns-primary-50); + font-size: 12px; + border-radius: 4px; } table.fixed td { overflow: hidden; max-width: 200px; vertical-align: middle; + background-color: var(--ns-bg-dark-100); + margin: 4px; } table.fixed th { overflow: hidden; max-width: 350px; vertical-align: middle; + background-color: var(--ns-bg-dark-100); + font-size: 14px; } table.fixed th:first-child { @@ -28,6 +35,11 @@ table.fixed th:first-child { .brighter { background-color: var(--ns-primary) !important; + border-color: var(--offwhite); +} + +.border-bottom { + border-bottom-color: var(--offwhite) !important; } mat-slider { @@ -40,4 +52,52 @@ mat-slider { .slider { background-color: var(--ns-bg-dark-100); +} + +#missingValuesHeader { + font-size: 12px; + line-height: 110% !important; +} + +.verticalAlign { + vertical-align: center; +} + +.cell-align { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 100%; +} + +table ::ng-deep .mat-form-field-wrapper { + margin-top: -2rem; +} + +.graphics-row { + height: 100px; + padding: 1px; + margin: 0; +} + +.no-pad { + padding: 1px; + margin: 0; +} + +.text-overflow { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.row-height { + height: 30px; + border: none; + outline: none; +} + +.graphic-class { + background-color: white !important; } \ No newline at end of file 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 55c07b87..92a4699a 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -3,8 +3,10 @@ Naziv - #{{i + 1}}  {{colInfo.columnName}} - +
+ #{{i + 1}}  {{colInfo.columnName}} + +
@@ -20,11 +22,11 @@ - - Grafik - - - + + Grafik + + + @@ -40,16 +42,17 @@ Q3: {{colInfo.q3}}
--> - +
{{uniqueValue}}
 - +
- Enkoding - settings + + Enkodiranje  + settings @@ -62,25 +65,29 @@ - Regulisanje
nedostajućih
vrednosti
+ +
Regulisanje
nedostajućih
vrednosti
settings - - - + + - - - - + + + + @@ -88,22 +95,22 @@ - + - + - + Vrednosti - -
+ +
{{col}}
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 9cb038bc..85046b8c 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -7,7 +7,6 @@ import { MatDialog } from '@angular/material/dialog'; import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component'; 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({ @@ -25,7 +24,7 @@ export class ColumnTableComponent implements AfterViewInit { Encoding = Encoding; NullValueOptions = NullValueOptions; tableData?: any[][]; - nesto = 10; + nullValOption: string[] = []; testSetDistribution:number=70; constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { @@ -35,7 +34,6 @@ export class ColumnTableComponent implements AfterViewInit { ngAfterViewInit(): void { this.datasetService.getMyDatasets().subscribe((datasets) => { this.dataset = datasets[0]; - //console.log(this.dataset); this.experiment = new Experiment(); for (let i = 0; i < this.dataset?.columnInfo.length; i++) { this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); @@ -43,39 +41,27 @@ export class ColumnTableComponent implements AfterViewInit { this.resetColumnEncodings(Encoding.Label); this.setDeleteColumnsForMissingValTreatment(); - /*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.nullValOption = [].constructor(this.dataset.columnInfo.length).fill('Obriši redove'); + 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); } }); }); } setDeleteColumnsForMissingValTreatment() { - console.log("USAOOOO"); if (this.experiment != undefined) { - this.experiment.nullValues = NullValueOptions.DeleteColumns; + this.experiment.nullValues = NullValueOptions.DeleteRows; this.experiment.nullValuesReplacers = []; - console.log("duzina",this.experiment.inputColumns.length); for (let i = 0; i < this.experiment.inputColumns.length; i++) { this.experiment.nullValuesReplacers.push({ column: this.experiment.inputColumns[i], - option: NullValueOptions.DeleteColumns, + option: NullValueOptions.DeleteRows, value: "" }); - console.log(i); } - //console.log("len",this.nullValMenus.length); - this.nullValMenus.forEach((menu) => { - //console.log(menu.nativeElement); - menu.nativeElement.textContent = "Obriši kolonu"; - }); } } @@ -127,7 +113,7 @@ export class ColumnTableComponent implements AfterViewInit { option: NullValueOptions.DeleteColumns, value: "" }); - (document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši kolonu"; + this.nullValOption[i] = "Obriši kolonu"; } } else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) { @@ -139,7 +125,7 @@ export class ColumnTableComponent implements AfterViewInit { option: NullValueOptions.DeleteRows, value: "" }); - (document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši redove"; + this.nullValOption[i] = "Obriši redove"; } } } @@ -158,7 +144,7 @@ export class ColumnTableComponent implements AfterViewInit { } - MissValsDeleteClicked(event: Event, replacementType: NullValueOptions) { + MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) { if (this.experiment != undefined) { let columnName = (event.currentTarget).value; let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; @@ -174,12 +160,12 @@ export class ColumnTableComponent implements AfterViewInit { arrayElement.option = (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows; arrayElement.value = ""; } - - (document.getElementById("main_" + columnName)).textContent = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; + + this.nullValOption[index] = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; } } - MissValsReplaceClicked(event: Event, columnName: string) { + MissValsReplaceClicked(event: Event, columnName: string, index: number) { if (this.experiment != undefined) { let fillValue = (event.currentTarget).value; let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; @@ -196,7 +182,7 @@ export class ColumnTableComponent implements AfterViewInit { arrayElement.value = fillValue; } - (document.getElementById("main_" + columnName)).textContent = "Popuni sa: " + fillValue; + this.nullValOption[index] = "Popuni sa: " + fillValue; } } getValue(columnName: string): string { diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index fa362803..ef875069 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -122,4 +122,10 @@ .bg-blur { backdrop-filter: blur(2px); +} + +.chart-wrapper { + width: 150px; + height: 150px; + margin: auto; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index f9ea219f..17a433c6 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -8,8 +8,7 @@ --ns-bg-dark-100: rgba(0, 65, 101, 1.0); --ns-bg-dark-50: rgba(0, 65, 101, 0.5); --offwhite: #dfd7d7; - --ns-warn:#f9b7b7; - + --ns-warn: #f9b7b7; } body { -- cgit v1.2.3 From b1c19a1729f5a875ab486e06d5bc70c9d59cc44c Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Sat, 30 Apr 2022 21:01:57 +0200 Subject: Regulisan odabir kolona i zatamnjenje kolona koje su unchecked (column-table). Backend: u klasu Experiment dodat type i u ColumnInfo columnType. Frontend: u ColumnInfo columnType. Promenjene boje boxplota. --- backend/api/api/Models/ColumnInfo.cs | 4 +- backend/api/api/Models/Experiment.cs | 1 + frontend/package-lock.json | 172 +++++++++++++-------- frontend/src/app/_data/Dataset.ts | 13 +- .../_charts/box-plot/box-plot.component.ts | 8 +- .../column-table/column-table.component.css | 32 +++- .../column-table/column-table.component.html | 58 ++++--- .../column-table/column-table.component.ts | 6 +- 8 files changed, 199 insertions(+), 95 deletions(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') diff --git a/backend/api/api/Models/ColumnInfo.cs b/backend/api/api/Models/ColumnInfo.cs index 04450fef..be3c7251 100644 --- a/backend/api/api/Models/ColumnInfo.cs +++ b/backend/api/api/Models/ColumnInfo.cs @@ -4,9 +4,10 @@ { public ColumnInfo() { } - public ColumnInfo(string columnName, bool isNumber, int numNulls, float mean, float min, float max, float median, string[] uniqueValues) + public ColumnInfo(string columnName, string columnType, bool isNumber, int numNulls, float mean, float min, float max, float median, string[] uniqueValues) { this.columnName = columnName; + this.columnType = columnType; this.isNumber = isNumber; this.numNulls = numNulls; this.mean = mean; @@ -17,6 +18,7 @@ } public string columnName { get; set; } + public string columnType { get; set; } public bool isNumber { get; set; } public int numNulls { get; set; } public float mean { get; set; } diff --git a/backend/api/api/Models/Experiment.cs b/backend/api/api/Models/Experiment.cs index 6f665c52..f7bec083 100644 --- a/backend/api/api/Models/Experiment.cs +++ b/backend/api/api/Models/Experiment.cs @@ -10,6 +10,7 @@ namespace api.Models public string _id { get; set; } public string name { get; set; } public string description { get; set; } + public string type { get; set; } public List ModelIds { get; set; } public string datasetId { get; set; } public string uploaderId { get; set; } diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7f6dbdde..3f17c89a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -456,6 +456,7 @@ "version": "13.2.5", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz", "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==", + "dev": true, "dependencies": { "@babel/core": "^7.17.2", "chokidar": "^3.0.0", @@ -485,6 +486,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.0" }, @@ -496,6 +498,7 @@ "version": "7.17.5", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz", "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==", + "dev": true, "dependencies": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", @@ -525,6 +528,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, "bin": { "semver": "bin/semver.js" } @@ -533,6 +537,7 @@ "version": "7.17.3", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz", "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==", + "dev": true, "dependencies": { "@babel/types": "^7.17.0", "jsesc": "^2.5.1", @@ -546,6 +551,7 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -785,6 +791,7 @@ "version": "7.16.12", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz", "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==", + "dev": true, "dependencies": { "@babel/code-frame": "^7.16.7", "@babel/generator": "^7.16.8", @@ -814,6 +821,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, "bin": { "semver": "bin/semver.js" } @@ -822,6 +830,7 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -830,6 +839,7 @@ "version": "7.16.8", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz", "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==", + "dev": true, "dependencies": { "@babel/types": "^7.16.8", "jsesc": "^2.5.1", @@ -843,6 +853,7 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -3494,6 +3505,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -3767,6 +3779,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, "engines": { "node": ">=8" } @@ -3863,6 +3876,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -4045,6 +4059,7 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, "funding": [ { "type": "individual", @@ -5062,6 +5077,7 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", + "dev": true, "engines": { "node": ">= 0.6.0" } @@ -5226,6 +5242,7 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "dev": true, "optional": true, "dependencies": { "iconv-lite": "^0.6.2" @@ -5235,6 +5252,7 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, "optional": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -6038,6 +6056,7 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -6206,6 +6225,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -6315,6 +6335,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -6907,6 +6928,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -6960,6 +6982,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -6976,6 +6999,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -7002,6 +7026,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, "engines": { "node": ">=0.12.0" } @@ -7867,6 +7892,7 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, "dependencies": { "yallist": "^4.0.0" }, @@ -7878,6 +7904,7 @@ "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", + "dev": true, "dependencies": { "sourcemap-codec": "^1.4.4" } @@ -8507,6 +8534,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -9202,6 +9230,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, "engines": { "node": ">=8.6" }, @@ -10016,6 +10045,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -10321,7 +10351,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "devOptional": true + "dev": true }, "node_modules/sass": { "version": "1.49.0", @@ -10451,6 +10481,7 @@ "version": "7.3.5", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "dev": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -10835,7 +10866,8 @@ "node_modules/sourcemap-codec": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true }, "node_modules/spdy": { "version": "4.0.2", @@ -11236,6 +11268,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -11327,6 +11360,7 @@ "version": "4.5.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", + "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -11966,7 +12000,8 @@ "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true }, "node_modules/yaml": { "version": "1.10.2", @@ -12301,6 +12336,7 @@ "version": "13.2.5", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz", "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==", + "dev": true, "requires": { "@babel/core": "^7.17.2", "chokidar": "^3.0.0", @@ -12318,6 +12354,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", + "dev": true, "requires": { "@jridgewell/trace-mapping": "^0.3.0" } @@ -12326,6 +12363,7 @@ "version": "7.17.5", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz", "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==", + "dev": true, "requires": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", @@ -12347,7 +12385,8 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true } } }, @@ -12355,6 +12394,7 @@ "version": "7.17.3", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz", "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==", + "dev": true, "requires": { "@babel/types": "^7.17.0", "jsesc": "^2.5.1", @@ -12364,7 +12404,8 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true } } }, @@ -12509,6 +12550,7 @@ "version": "7.16.12", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz", "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==", + "dev": true, "requires": { "@babel/code-frame": "^7.16.7", "@babel/generator": "^7.16.8", @@ -12530,12 +12572,14 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true } } }, @@ -12543,6 +12587,7 @@ "version": "7.16.8", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz", "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==", + "dev": true, "requires": { "@babel/types": "^7.16.8", "jsesc": "^2.5.1", @@ -12552,7 +12597,8 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true } } }, @@ -13713,8 +13759,7 @@ "ws": { "version": "7.5.7", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", - "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", - "requires": {} + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==" } } }, @@ -13730,8 +13775,7 @@ "version": "13.2.5", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.2.5.tgz", "integrity": "sha512-obiPvwPe+UJUO8cfNbBxukLKG30F+gLF5/erexwklRknJzS4KP8ciH2on6XlTuXUahpDjbO0pffugFE2I/IszQ==", - "dev": true, - "requires": {} + "dev": true }, "@nodelib/fs.scandir": { "version": "2.1.5", @@ -14451,8 +14495,7 @@ "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", - "dev": true, - "requires": {} + "dev": true }, "adjust-sourcemap-loader": { "version": "4.0.0", @@ -14575,6 +14618,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -14772,7 +14816,8 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true }, "bl": { "version": "4.1.0", @@ -14843,8 +14888,7 @@ "bootstrap": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", - "requires": {} + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==" }, "brace-expansion": { "version": "1.1.11", @@ -14859,6 +14903,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, "requires": { "fill-range": "^7.0.1" } @@ -14992,6 +15037,7 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -15019,8 +15065,7 @@ "version": "5.2.2", "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz", "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==", - "dev": true, - "requires": {} + "dev": true }, "clean-stack": { "version": "2.2.0", @@ -15497,8 +15542,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", - "dev": true, - "requires": {} + "dev": true }, "css-select": { "version": "4.2.1", @@ -15764,7 +15808,8 @@ "dependency-graph": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", - "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==" + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", + "dev": true }, "destroy": { "version": "1.0.4", @@ -15899,6 +15944,7 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "dev": true, "optional": true, "requires": { "iconv-lite": "^0.6.2" @@ -15908,6 +15954,7 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, "optional": true, "requires": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -16431,6 +16478,7 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, "requires": { "to-regex-range": "^5.0.1" } @@ -16553,6 +16601,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "optional": true }, "function-bind": { @@ -16628,6 +16677,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, "requires": { "is-glob": "^4.0.1" } @@ -16884,8 +16934,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true, - "requires": {} + "dev": true }, "ieee754": { "version": "1.2.1", @@ -17082,6 +17131,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, "requires": { "binary-extensions": "^2.0.0" } @@ -17113,7 +17163,8 @@ "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", + "dev": true }, "is-fullwidth-code-point": { "version": "3.0.0", @@ -17124,6 +17175,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, "requires": { "is-extglob": "^2.1.1" } @@ -17143,7 +17195,8 @@ "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true }, "is-path-cwd": { "version": "2.2.0", @@ -17567,8 +17620,7 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz", "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==", - "dev": true, - "requires": {} + "dev": true }, "karma-source-map-support": { "version": "1.4.0", @@ -17790,6 +17842,7 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, "requires": { "yallist": "^4.0.0" } @@ -17798,6 +17851,7 @@ "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", + "dev": true, "requires": { "sourcemap-codec": "^1.4.4" } @@ -18263,7 +18317,8 @@ "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true }, "normalize-range": { "version": "0.1.2", @@ -18796,7 +18851,8 @@ "picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true }, "pify": { "version": "2.3.0", @@ -18912,8 +18968,7 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz", "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==", - "dev": true, - "requires": {} + "dev": true }, "postcss-custom-properties": { "version": "12.1.4", @@ -18983,15 +19038,13 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", - "dev": true, - "requires": {} + "dev": true }, "postcss-gap-properties": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz", "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==", - "dev": true, - "requires": {} + "dev": true }, "postcss-image-set-function": { "version": "4.0.6", @@ -19017,8 +19070,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", - "dev": true, - "requires": {} + "dev": true }, "postcss-lab-function": { "version": "4.1.1", @@ -19045,22 +19097,19 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "dev": true, - "requires": {} + "dev": true }, "postcss-media-minmax": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "dev": true, - "requires": {} + "dev": true }, "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true, - "requires": {} + "dev": true }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -19104,15 +19153,13 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz", "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==", - "dev": true, - "requires": {} + "dev": true }, "postcss-page-break": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", - "dev": true, - "requires": {} + "dev": true }, "postcss-place": { "version": "7.0.4", @@ -19177,8 +19224,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", - "dev": true, - "requires": {} + "dev": true }, "postcss-selector-not": { "version": "5.0.0", @@ -19352,6 +19398,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, "requires": { "picomatch": "^2.2.1" } @@ -19583,7 +19630,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "devOptional": true + "dev": true }, "sass": { "version": "1.49.0", @@ -19639,8 +19686,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -19669,6 +19715,7 @@ "version": "7.3.5", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "dev": true, "requires": { "lru-cache": "^6.0.0" } @@ -19984,7 +20031,8 @@ "sourcemap-codec": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true }, "spdy": { "version": "4.0.2", @@ -20192,8 +20240,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -20267,6 +20314,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, "requires": { "is-number": "^7.0.0" } @@ -20335,7 +20383,8 @@ "typescript": { "version": "4.5.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", - "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==" + "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", + "dev": true }, "ua-parser-js": { "version": "0.7.31", @@ -20544,8 +20593,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -20781,8 +20829,7 @@ "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true, - "requires": {} + "dev": true }, "y18n": { "version": "5.0.8", @@ -20792,7 +20839,8 @@ "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true }, "yaml": { "version": "1.10.2", diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index e8207718..36eced88 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -29,6 +29,7 @@ export default class Dataset extends FolderFile { export class ColumnInfo { constructor( public columnName: string = '', + public columnType: ColumnType, public isNumber: boolean = false, public numNulls: number = 0, public uniqueValues?: string[], @@ -36,5 +37,15 @@ export class ColumnInfo { public mean?: number, public min?: number, public max?: number - ) { } + ) { + if (isNumber) + columnType = ColumnType.numerical; + else + columnType = ColumnType.categorical; + } } + +export enum ColumnType { + categorical = "Kategorijski", + numerical = "Numerički" +} \ No newline at end of file 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/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 108efb32..5dc2e9ec 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -3,7 +3,6 @@ table.fixed { display: block; overflow-x: auto; white-space: nowrap; - border: 1px solid var(--ns-primary-50); font-size: 12px; border-radius: 4px; } @@ -18,7 +17,6 @@ table.fixed td { max-width: 200px; min-width: 200px; vertical-align: middle; - background-color: var(--ns-bg-dark-100); margin: 4px; } @@ -27,13 +25,12 @@ table.fixed th { max-width: 120px; min-width: 120px; vertical-align: middle; - background-color: var(--ns-bg-dark-100); + background-color: var(--ns-primary-50); font-size: 14px; } table.fixed th:first-child { text-align: center; - background-color: var(--ns-primary-25); } .columnNames { @@ -107,7 +104,7 @@ table ::ng-deep .mat-form-field-wrapper { } .graphic-class { - background-color: white !important; + opacity: 0.5; } @@ -220,4 +217,29 @@ table ::ng-deep .mat-form-field-wrapper { .long { height: 3rem; +} + +.col-disabled { + background-color: rgb(0, 45, 69); +} + +.text-disabled { + color: gray; +} + +.header-disabled { + color: gray; +} + +.menu-disabled { + pointer-events: none; + opacity: .5; +} + +col:not(.col-disabled) { + background-color: var(--ns-bg-dark-100); +} + +.col-first { + background-color: rgb(1, 56, 86) !important; } \ No newline at end of file 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 53cb3551..42c43138 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -4,11 +4,12 @@ {{tab.name}}
+ + -->
@@ -16,13 +17,17 @@
+ + + + - @@ -30,7 +35,7 @@ -
# +
#{{i + 1}}  {{colInfo.columnName}} - +
#{{i}} +
{{col}}
@@ -42,22 +47,29 @@
+ + + + - - + - -
Naziv - #{{i + 1}}  {{colInfo.columnName}} + Kolona +
+ #{{i + 1}}  {{colInfo.columnName}} + +
+
{{colInfo.columnName}}
+
0.1
@@ -69,13 +81,17 @@
+ + + + - @@ -83,9 +99,9 @@ - - - + - - +
Naziv +
#{{i + 1}}  {{colInfo.columnName}} - +
Tip + - + Kategorijski Numerički @@ -93,15 +109,15 @@
Grafik + Grafik
Statistika + Statistika Mean: {{colInfo.mean}}
Median: {{colInfo.median}}
@@ -124,9 +140,9 @@ Enkodiranje  settings - 		+ - + {{ optionName }} @@ -139,9 +155,9 @@
Regulisanje
nedostajućih
vrednosti
settings - 		+ -