From 1f4d193f475c627cd06989188ca98ba12da368a5 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 20 Mar 2022 10:06:15 +0100 Subject: Komponenta za iscrtavanje metrika. --- frontend/package-lock.json | 11 +++++ frontend/package.json | 3 +- frontend/src/app/app.component.html | 1 + frontend/src/app/app.module.ts | 4 +- 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 ++++++++++++++++++++++++ 8 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 frontend/src/app/charts/charts.component.css create mode 100644 frontend/src/app/charts/charts.component.html create mode 100644 frontend/src/app/charts/charts.component.spec.ts create mode 100644 frontend/src/app/charts/charts.component.ts (limited to 'frontend') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5b23f3d2..c68dbd52 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -24,6 +24,7 @@ "@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", @@ -3792,6 +3793,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", @@ -14259,6 +14265,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", diff --git a/frontend/package.json b/frontend/package.json index 01cdf462..a3059487 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -26,6 +26,7 @@ "@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", @@ -49,4 +50,4 @@ "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.5.2" } -} \ No newline at end of file +} diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 35e5adb1..d1aed156 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,4 +1,5 @@
+
\ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 5aa405fb..904a4e7f 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -29,6 +29,7 @@ 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'; @NgModule({ declarations: [ @@ -49,7 +50,8 @@ import { PredictComponent } from './_pages/predict/predict.component'; MyModelsComponent, BrowseDatasetsComponent, BrowsePredictorsComponent, - PredictComponent + PredictComponent, + ChartsComponent ], imports: [ BrowserModule, diff --git a/frontend/src/app/charts/charts.component.css b/frontend/src/app/charts/charts.component.css new file mode 100644 index 00000000..f56029a1 --- /dev/null +++ b/frontend/src/app/charts/charts.component.css @@ -0,0 +1,5 @@ +#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 new file mode 100644 index 00000000..c5e681ab --- /dev/null +++ b/frontend/src/app/charts/charts.component.html @@ -0,0 +1,4 @@ +

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 new file mode 100644 index 00000000..6a4f0b75 --- /dev/null +++ b/frontend/src/app/charts/charts.component.spec.ts @@ -0,0 +1,25 @@ +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 new file mode 100644 index 00000000..af7ba25a --- /dev/null +++ b/frontend/src/app/charts/charts.component.ts @@ -0,0 +1,59 @@ +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 + } + } + } + }); + } + +} -- cgit v1.2.3