From 34254357ea1a6c15b386162b63eb451e91895c9d Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 20 Mar 2022 21:11:18 +0100 Subject: Doradjeni grafici. --- frontend/src/app/app.component.html | 5 +- frontend/src/app/app.module.ts | 11 ++-- frontend/src/app/barchart/barchart.component.css | 6 +++ frontend/src/app/barchart/barchart.component.html | 4 ++ .../src/app/barchart/barchart.component.spec.ts | 25 +++++++++ frontend/src/app/barchart/barchart.component.ts | 54 ++++++++++++++++++++ frontend/src/app/charts/charts.component.css | 5 -- frontend/src/app/charts/charts.component.html | 4 -- frontend/src/app/charts/charts.component.spec.ts | 25 --------- frontend/src/app/charts/charts.component.ts | 59 ---------------------- .../app/scatterchart/scatterchart.component.css | 6 +++ .../app/scatterchart/scatterchart.component.html | 4 ++ .../scatterchart/scatterchart.component.spec.ts | 25 +++++++++ .../src/app/scatterchart/scatterchart.component.ts | 32 ++++++++++++ 14 files changed, 167 insertions(+), 98 deletions(-) create mode 100644 frontend/src/app/barchart/barchart.component.css create mode 100644 frontend/src/app/barchart/barchart.component.html create mode 100644 frontend/src/app/barchart/barchart.component.spec.ts create mode 100644 frontend/src/app/barchart/barchart.component.ts delete mode 100644 frontend/src/app/charts/charts.component.css delete mode 100644 frontend/src/app/charts/charts.component.html delete mode 100644 frontend/src/app/charts/charts.component.spec.ts delete mode 100644 frontend/src/app/charts/charts.component.ts create mode 100644 frontend/src/app/scatterchart/scatterchart.component.css create mode 100644 frontend/src/app/scatterchart/scatterchart.component.html create mode 100644 frontend/src/app/scatterchart/scatterchart.component.spec.ts create mode 100644 frontend/src/app/scatterchart/scatterchart.component.ts (limited to 'frontend/src/app') 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 @@
- -
\ No newline at end of file + + + 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 @@ +

Bar chart:

+
+ +
\ 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; + + 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/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 @@ -

This is my chart!

-
- -
\ No newline at end of file diff --git a/frontend/src/app/charts/charts.component.spec.ts b/frontend/src/app/charts/charts.component.spec.ts deleted file mode 100644 index 6a4f0b75..00000000 --- a/frontend/src/app/charts/charts.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ChartsComponent } from './charts.component'; - -describe('ChartsComponent', () => { - let component: ChartsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ChartsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ChartsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 @@ +

Scatter chart:

+
+ +
\ 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; + + 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 + } + } + } + }); + } +} -- cgit v1.2.3