diff options
Diffstat (limited to 'frontend/src/app')
-rw-r--r-- | frontend/src/app/_data/Model.ts | 48 | ||||
-rw-r--r-- | frontend/src/app/app.component.html | 4 | ||||
-rw-r--r-- | frontend/src/app/app.module.ts | 11 | ||||
-rw-r--r-- | frontend/src/app/barchart/barchart.component.css | 6 | ||||
-rw-r--r-- | frontend/src/app/barchart/barchart.component.html | 4 | ||||
-rw-r--r-- | frontend/src/app/barchart/barchart.component.spec.ts | 25 | ||||
-rw-r--r-- | frontend/src/app/barchart/barchart.component.ts | 54 | ||||
-rw-r--r-- | frontend/src/app/scatterchart/scatterchart.component.css | 6 | ||||
-rw-r--r-- | frontend/src/app/scatterchart/scatterchart.component.html | 4 | ||||
-rw-r--r-- | frontend/src/app/scatterchart/scatterchart.component.spec.ts | 25 | ||||
-rw-r--r-- | frontend/src/app/scatterchart/scatterchart.component.ts | 32 |
11 files changed, 212 insertions, 7 deletions
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 + } + } + } + }); + } +} |