diff options
22 files changed, 192 insertions, 80 deletions
diff --git a/backend/microservice/PythonServer/project/api/api.py b/backend/microservice/api.py index b2fb503b..b2fb503b 100644 --- a/backend/microservice/PythonServer/project/api/api.py +++ b/backend/microservice/api.py diff --git a/backend/microservice/PythonServer/project/api/templates/data.html b/backend/microservice/data.html index d2fb44ab..d2fb44ab 100644 --- a/backend/microservice/PythonServer/project/api/templates/data.html +++ b/backend/microservice/data.html diff --git a/backend/microservice/PythonServer/project/api/templates/index.html b/backend/microservice/index.html index 98b35d52..98b35d52 100644 --- a/backend/microservice/PythonServer/project/api/templates/index.html +++ b/backend/microservice/index.html diff --git a/backend/microservice/mlservice.py b/backend/microservice/mlservice.py index 01a79c1a..3a0d41bd 100644 --- a/backend/microservice/mlservice.py +++ b/backend/microservice/mlservice.py @@ -1,4 +1,4 @@ -from typing_extensions import Self +#from typing_extensions import Self import pandas as pd import tensorflow as tf import keras @@ -335,6 +335,11 @@ def obuka(dataunos,params): ### 27)ROC fpr, tpr, _ = sm.roc_curve(y_test,y_pred) + # https://scikit-learn.org/stable/modules/generated/sklearn.metrics.confusion_matrix.html + # tn, fp, fn, tp = confusion_matrix(y_test, y_pred).ravel() + # Korelaciona matrica + # https://datatofish.com/correlation-matrix-pandas/ + ''' plt.plot(fpr, tpr, color='blue') plt.title('ROC') diff --git a/backend/microservice/PythonServer/project/api/titanic.csv b/backend/microservice/titanic.csv index 5cc466e9..5cc466e9 100644 --- a/backend/microservice/PythonServer/project/api/titanic.csv +++ b/backend/microservice/titanic.csv diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c68dbd52..0333f749 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -28,6 +28,7 @@ "csv-parser": "^3.0.0", "mdb-angular-ui-kit": "^2.0.0", "ng-uikit-pro-standard": "^1.0.0", + "ng2-charts": "^3.0.8", "ngx-cookie-service": "^13.1.2", "ngx-csv-parser": "^0.0.7", "rxjs": "~7.5.0", @@ -7382,6 +7383,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -7955,6 +7961,21 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/ng2-charts": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz", + "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==", + "dependencies": { + "lodash-es": "^4.17.15", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">=11.0.0", + "@angular/core": ">=11.0.0", + "chart.js": "^3.4.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/ngx-cookie-service": { "version": "13.1.2", "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-13.1.2.tgz", @@ -16867,6 +16888,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -17297,6 +17323,15 @@ } } }, + "ng2-charts": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz", + "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==", + "requires": { + "lodash-es": "^4.17.15", + "tslib": "^2.3.0" + } + }, "ngx-cookie-service": { "version": "13.1.2", "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-13.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index a3059487..c3f0310e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,6 +30,7 @@ "csv-parser": "^3.0.0", "mdb-angular-ui-kit": "^2.0.0", "ng-uikit-pro-standard": "^1.0.0", + "ng2-charts": "^3.0.8", "ngx-cookie-service": "^13.1.2", "ngx-csv-parser": "^0.0.7", "rxjs": "~7.5.0", diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index d1aed156..24828a06 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,5 +1,6 @@ <app-navbar></app-navbar> <div class="container h-100"> <router-outlet></router-outlet> - <app-charts></app-charts> -</div>
\ No newline at end of file + <app-barchart></app-barchart> + <app-scatterchart></app-scatterchart> +</div> diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 904a4e7f..7f076421 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -6,6 +6,8 @@ import { HttpClientModule } from '@angular/common/http'; import { MatSliderModule } from '@angular/material/slider'; import { MatIconModule } from '@angular/material/icon'; +import {NgChartsModule} from 'ng2-charts'; + import { AppComponent } from './app.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component'; @@ -29,7 +31,8 @@ import { MyModelsComponent } from './_pages/my-models/my-models.component'; import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component'; import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-predictors.component'; import { PredictComponent } from './_pages/predict/predict.component'; -import { ChartsComponent } from './charts/charts.component'; +import { ScatterchartComponent } from './scatterchart/scatterchart.component'; +import { BarchartComponent } from './barchart/barchart.component'; @NgModule({ declarations: [ @@ -51,7 +54,8 @@ import { ChartsComponent } from './charts/charts.component'; BrowseDatasetsComponent, BrowsePredictorsComponent, PredictComponent, - ChartsComponent + ScatterchartComponent, + BarchartComponent ], imports: [ BrowserModule, @@ -63,7 +67,8 @@ import { ChartsComponent } from './charts/charts.component'; MaterialModule, ReactiveFormsModule, MatSliderModule, - MatIconModule + MatIconModule, + NgChartsModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/app/barchart/barchart.component.css b/frontend/src/app/barchart/barchart.component.css new file mode 100644 index 00000000..c3634c9f --- /dev/null +++ b/frontend/src/app/barchart/barchart.component.css @@ -0,0 +1,6 @@ +#divBarChart{ + background-color: beige; + display: block; + width: 400px; + height: 200px; +} diff --git a/frontend/src/app/barchart/barchart.component.html b/frontend/src/app/barchart/barchart.component.html new file mode 100644 index 00000000..48b7bd3e --- /dev/null +++ b/frontend/src/app/barchart/barchart.component.html @@ -0,0 +1,4 @@ +<p>Bar chart:</p> +<div id="divBarChart"> + <canvas id="Barchart"> </canvas> +</div>
\ No newline at end of file diff --git a/frontend/src/app/charts/charts.component.spec.ts b/frontend/src/app/barchart/barchart.component.spec.ts index 6a4f0b75..8b346d1c 100644 --- a/frontend/src/app/charts/charts.component.spec.ts +++ b/frontend/src/app/barchart/barchart.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ChartsComponent } from './charts.component'; +import { BarchartComponent } from './barchart.component'; -describe('ChartsComponent', () => { - let component: ChartsComponent; - let fixture: ComponentFixture<ChartsComponent>; +describe('BarchartComponent', () => { + let component: BarchartComponent; + let fixture: ComponentFixture<BarchartComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ChartsComponent ] + declarations: [ BarchartComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(ChartsComponent); + fixture = TestBed.createComponent(BarchartComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/barchart/barchart.component.ts b/frontend/src/app/barchart/barchart.component.ts new file mode 100644 index 00000000..def64b7d --- /dev/null +++ b/frontend/src/app/barchart/barchart.component.ts @@ -0,0 +1,54 @@ +import { Component, OnInit } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + +@Component({ + selector: 'app-barchart', + templateUrl: './barchart.component.html', + styleUrls: ['./barchart.component.css'] +}) +export class BarchartComponent implements OnInit { + + constructor() { } + + ngOnInit(){ + const myChart = new Chart("Barchart", { + type: 'bar', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [{ + label: 'Number of Votes', + data: [12, 19, 3, 5, 2, 3], + backgroundColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 1 + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + + + }); + + + } + +} diff --git a/frontend/src/app/charts/charts.component.css b/frontend/src/app/charts/charts.component.css deleted file mode 100644 index f56029a1..00000000 --- a/frontend/src/app/charts/charts.component.css +++ /dev/null @@ -1,5 +0,0 @@ -#divChart{ - display: block; - width: 400px; - height: 400px; -}
\ No newline at end of file diff --git a/frontend/src/app/charts/charts.component.html b/frontend/src/app/charts/charts.component.html deleted file mode 100644 index c5e681ab..00000000 --- a/frontend/src/app/charts/charts.component.html +++ /dev/null @@ -1,4 +0,0 @@ -<p color="white">This is my chart!</p> -<div id="divChart"> - <canvas id="charts"> </canvas> -</div>
\ No newline at end of file diff --git a/frontend/src/app/charts/charts.component.ts b/frontend/src/app/charts/charts.component.ts deleted file mode 100644 index af7ba25a..00000000 --- a/frontend/src/app/charts/charts.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import {Chart} from 'node_modules/chart.js'; -//import {Chart} from 'chart.js'; - -@Component({ - selector: 'app-charts', - templateUrl: './charts.component.html', - styleUrls: ['./charts.component.css'] -}) -export class ChartsComponent implements OnInit { - - constructor() { } - - /* - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(75, 192, 192, 1)', - 'rgba(153, 102, 255, 1)', - 'rgba(255, 159, 64, 1)' - */ - ngOnInit(){ - const myChart = new Chart("charts", { - type: 'bar', - data: { - labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], - datasets: [{ - label: '# of Votes', - data: [12, 19, 3, 5, 2, 3], - backgroundColor: [ - 'rgba(255, 0, 0, 1)', - 'rgba(0, 255, 0, 1)', - 'rgba(0, 0, 255, 1)', - 'rgba(75, 192, 192, 1)', - 'rgba(153, 102, 255, 1)', - 'rgba(255, 159, 64, 1)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(75, 192, 192, 1)', - 'rgba(153, 102, 255, 1)', - 'rgba(255, 159, 64, 1)' - ], - borderWidth: 1 - }] - }, - options: { - scales: { - y: { - beginAtZero: true - } - } - } - }); - } - -} diff --git a/frontend/src/app/scatterchart/scatterchart.component.css b/frontend/src/app/scatterchart/scatterchart.component.css new file mode 100644 index 00000000..5735217e --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.css @@ -0,0 +1,6 @@ +#divScatterChart{ + background-color: beige; + display: block; + width: 400px; + height: 200px; +}
\ No newline at end of file diff --git a/frontend/src/app/scatterchart/scatterchart.component.html b/frontend/src/app/scatterchart/scatterchart.component.html new file mode 100644 index 00000000..2b30fe1f --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.html @@ -0,0 +1,4 @@ +<p>Scatter chart:</p> +<div id="divScatterChart"> + <canvas id="ScatterCharts"> </canvas> +</div>
\ No newline at end of file diff --git a/frontend/src/app/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/scatterchart/scatterchart.component.spec.ts new file mode 100644 index 00000000..1db81051 --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ScatterchartComponent } from './scatterchart.component'; + +describe('ScatterchartComponent', () => { + let component: ScatterchartComponent; + let fixture: ComponentFixture<ScatterchartComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ScatterchartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ScatterchartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/scatterchart/scatterchart.component.ts b/frontend/src/app/scatterchart/scatterchart.component.ts new file mode 100644 index 00000000..1da88fe7 --- /dev/null +++ b/frontend/src/app/scatterchart/scatterchart.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + +@Component({ + selector: 'app-scatterchart', + templateUrl: './scatterchart.component.html', + styleUrls: ['./scatterchart.component.css'] +}) +export class ScatterchartComponent implements OnInit { + + constructor() { } + + ngOnInit(){ + const myChart = new Chart("ScatterCharts", { + type: 'scatter', + data: { + datasets: [{ + label: 'Scatter Example:', + data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}], + backgroundColor: 'rgb(255, 99, 132)' + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); + } +} diff --git a/frontend/src/index.html b/frontend/src/index.html index b3b6eb54..0079969e 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -12,5 +12,6 @@ </head> <body class="mat-typography"> <app-root></app-root> + <script src="node_modules/chart.js/src/chart.js"></script> </body> </html> diff --git a/frontend/src/styles.css b/frontend/src/styles.css index d37ab6f1..5a30802b 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,3 +1,4 @@ +@import '~bootstrap/dist/css/bootstrap.min.css'; body { background-image: url('/assets/images/add_model_background.jpg'); }
\ No newline at end of file |