aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/package-lock.json46
-rw-r--r--frontend/package.json4
-rw-r--r--frontend/src/app/_data/Model.ts48
-rw-r--r--frontend/src/app/app.component.html4
-rw-r--r--frontend/src/app/app.module.ts11
-rw-r--r--frontend/src/app/barchart/barchart.component.css6
-rw-r--r--frontend/src/app/barchart/barchart.component.html4
-rw-r--r--frontend/src/app/barchart/barchart.component.spec.ts25
-rw-r--r--frontend/src/app/barchart/barchart.component.ts54
-rw-r--r--frontend/src/app/scatterchart/scatterchart.component.css6
-rw-r--r--frontend/src/app/scatterchart/scatterchart.component.html4
-rw-r--r--frontend/src/app/scatterchart/scatterchart.component.spec.ts25
-rw-r--r--frontend/src/app/scatterchart/scatterchart.component.ts32
-rw-r--r--frontend/src/index.html1
-rw-r--r--frontend/src/styles.css1
15 files changed, 263 insertions, 8 deletions
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5b23f3d2..0333f749 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,9 +24,11 @@
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
+ "chart.js": "^3.7.1",
"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",
@@ -3792,6 +3794,11 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
+ "node_modules/chart.js": {
+ "version": "3.7.1",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+ "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+ },
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -7376,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",
@@ -7949,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",
@@ -14259,6 +14286,11 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
+ "chart.js": {
+ "version": "3.7.1",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
+ "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
+ },
"chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -16856,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",
@@ -17286,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 01cdf462..c3f0310e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,9 +26,11 @@
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
+ "chart.js": "^3.7.1",
"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",
@@ -49,4 +51,4 @@
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
-} \ No newline at end of file
+}
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 810b347d..0768a374 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -39,21 +39,61 @@ export enum ANNType {
// removeOutliers
export enum Encoding {
Label = 'label',
- OneHot = 'one hot'
+ OneHot = 'one hot',
+ BackwardDifference = 'backward difference',
+ BaseN = 'baseN',
+ Binary = 'binary',
+ CatBoost = 'cat boost',
+ Count = 'count',
+ GLMM = 'glmm',
+ Hashing = 'hashing',
+ Helmert = 'helmert',
+ JamesStein = 'james stein',
+ LeaveOneOut = 'leave one out',
+ MEstimate = 'MEstimate',
+ Ordinal = 'ordinal',
+ Sum = 'sum',
+ Polynomial = 'polynomial',
+ Target = 'target',
+ WOE = 'woe',
+ Quantile = 'quantile'
}
export enum ActivationFunction {
+ // linear
+ Binary_Step = 'binaryStep',
+ Linear = 'linear',
+ // non-linear
Relu = 'relu',
+ Leaky_Relu = 'leakyRelu',
+ Parameterised_Relu = 'parameterisedRelu',
+ Exponential_Linear_Unit = 'exponentialLinearUnit',
+ Swish = 'swish',
Sigmoid = 'sigmoid',
Tanh = 'tanh',
- Linear = 'linear'
+ Softmax = 'softmax'
}
export enum LossFunction {
+ // binary classification loss functions
BinaryCrossEntropy = 'binary_crossentropy',
- MeanSquaredError = 'mean_squared_error'
+ HingeLoss = 'hinge_loss',
+ // multi-class classiication loss functions
+ CategoricalCrossEntropy = 'categorical_crossentropy',
+ KLDivergence = 'kullback_leibler_divergence',
+ // regression loss functions
+ MeanSquaredError = 'mean_squared_error',
+ MeanAbsoluteError = 'mean_absolute_error',
+ HuberLoss = 'Huber',
}
export enum Optimizer {
- Adam = 'adam'
+ Adam = 'Adam',
+ Adadelta = 'Adadelta',
+ Adagrad = 'Adagrad',
+ Ftrl = 'Ftrl',
+ Nadam = 'Nadam',
+ SGD = 'SGD',
+ SGDMomentum = 'SGDMomentum',
+ RMSprop = 'RMSprop'
} \ No newline at end of file
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 35e5adb1..24828a06 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,4 +1,6 @@
<app-navbar></app-navbar>
<div class="container h-100">
<router-outlet></router-outlet>
-</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 5aa405fb..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,6 +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 { ScatterchartComponent } from './scatterchart/scatterchart.component';
+import { BarchartComponent } from './barchart/barchart.component';
@NgModule({
declarations: [
@@ -49,7 +53,9 @@ import { PredictComponent } from './_pages/predict/predict.component';
MyModelsComponent,
BrowseDatasetsComponent,
BrowsePredictorsComponent,
- PredictComponent
+ PredictComponent,
+ ScatterchartComponent,
+ BarchartComponent
],
imports: [
BrowserModule,
@@ -61,7 +67,8 @@ import { PredictComponent } from './_pages/predict/predict.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/barchart/barchart.component.spec.ts b/frontend/src/app/barchart/barchart.component.spec.ts
new file mode 100644
index 00000000..8b346d1c
--- /dev/null
+++ b/frontend/src/app/barchart/barchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarchartComponent } from './barchart.component';
+
+describe('BarchartComponent', () => {
+ let component: BarchartComponent;
+ let fixture: ComponentFixture<BarchartComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ BarchartComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BarchartComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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/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
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 05:54:03 +0000