Skip to content

2
2021-005
Commit e82b27ec authored by Dinushe Jayasekera's avatar Dinushe Jayasekera
Browse files
Options

Added charts

parent 317139d7
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 18 deletions
test-Angular - Copy/angular.json
View file @ e82b27ec
......@@ -95,6 +95,7 @@
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
......
test-Angular - Copy/package-lock.json
View file @ e82b27ec
......@@ -1661,6 +1661,14 @@
"integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
"dev": true
},
"@types/chart.js": {
"version": "2.9.33",
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.33.tgz",
"integrity": "sha512-vB6ZFx1cA91aiCoVpreLQwCQHS/Cj+9YtjBTwFlTjKXyY0douXV2KV4+fluxdI+grDZ6hTCQeg2HY/aQ9NeLHA==",
"requires": {
"moment": "^2.10.2"
}
},
"@types/component-emitter": {
"version": "1.2.10",
"resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
......@@ -2539,6 +2547,11 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
"bootstrap": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz",
"integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
......@@ -2716,6 +2729,32 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
"chart.js": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
"integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
"requires": {
"chartjs-color": "^2.1.0",
"moment": "^2.10.2"
}
},
"chartjs-color": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"requires": {
"chartjs-color-string": "^0.6.0",
"color-convert": "^1.9.3"
}
},
"chartjs-color-string": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
"requires": {
"color-name": "^1.0.0"
}
},
"chokidar": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
......@@ -2899,7 +2938,6 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
......@@ -2907,8 +2945,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"colord": {
"version": "2.1.0",
......@@ -6377,8 +6414,7 @@
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash.debounce": {
"version": "4.0.8",
......@@ -6881,6 +6917,11 @@
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
"dev": true
},
"moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
......@@ -6970,6 +7011,23 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
"ng2-charts": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-2.2.3.tgz",
"integrity": "sha512-Kxj2bewn537xGFVkR7AgDmfqV+YH4hIL4R36EjlUI9WCWnphzY+VKZGX+D+usXd8e+znuqly+sbGHjddLxupUA==",
"requires": {
"@types/chart.js": "^2.7.48",
"lodash": "^4.17.11",
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
......
test-Angular - Copy/package.json
View file @ e82b27ec
......@@ -20,6 +20,9 @@
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"bootstrap": "^5.0.2",
"chart.js": "^2.9.3",
"ng2-charts": "^2.2.3",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
......
test-Angular - Copy/src/app/app.module.ts
View file @ e82b27ec
......@@ -15,6 +15,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatListModule } from '@angular/material/list';
import { AudioComponent } from './audio/audio.component';
import { ChartsModule } from 'ng2-charts';
@NgModule({
......@@ -36,7 +37,8 @@ import { AudioComponent } from './audio/audio.component';
MatMenuModule,
MatIconModule,
MatDividerModule,
MatListModule
MatListModule,
ChartsModule
],
providers: [],
......
test-Angular - Copy/src/app/audio/audio.component.css
View file @ e82b27ec
@import url(../home/home.component.css);
\ No newline at end of file
.page {
color: white;
padding: 0 1rem;
background: #f1f5f9;
}
.page__box{
min-height: 120px;
background: #1e293b;
margin: 0 -1rem;
font-size: 36px;
}
.page__content{
min-height: calc(150vh - 178px);
border-radius: 10px;
margin-top: -2rem;
background: white;
color: black;
font-size: 2rem;
}
.page__chart{
min-height: calc(50vh - 178px);
margin-top: 70px;
}
.page__content-data{
top: 25%;
left: 25%;
transform: translate(-25%, -25%);
}
test-Angular - Copy/src/app/audio/audio.component.html
View file @ e82b27ec
<div class="container-fluid page">
<div class="d-flex page__box p-3 mt-2">Home</div>
<div class="d-flex page__box p-3 mt-2">Audio Recognition Status</div>
<div class="page__content shadow p-3 position-relative">
<div class="page__content-data position-absolute">
Audio Content Goes Here
<div class="page__chart shadow p-3 position-relative">
<div class="chart-wrapper">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
</div>
</div>
</div>
test-Angular - Copy/src/app/audio/audio.component.spec.ts
View file @ e82b27ec
......@@ -5,7 +5,7 @@ import { AudioComponent } from './audio.component';
describe('AudioComponent', () => {
let component: AudioComponent;
let fixture: ComponentFixture<AudioComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AudioComponent ]
......
test-Angular - Copy/src/app/audio/audio.component.ts
View file @ e82b27ec
import { Component, OnInit } from '@angular/core';
import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
selector: 'app-audio',
templateUrl: './audio.component.html',
styleUrls: ['./audio.component.css']
})
export class AudioComponent implements OnInit {
export class AudioComponent implements OnInit {
barChartOptions: ChartOptions = {
responsive: true,
};
barChartLabels: Label[] = ['LEVEL 1', 'LEVEL 2', 'LEVEL 3'];
barChartType: ChartType = 'bar';
barChartLegend = true;
barChartPlugins = [];
barChartData: ChartDataSets[] = [
{ data: [45, 37, 60], label: 'ASD Severity Level' }
];
constructor() { }
ngOnInit(): void {
......
test-Angular - Copy/src/app/dashboard/dashboard.component.css
View file @ e82b27ec
@import url(../home/home.component.css);
\ No newline at end of file
.page {
color: white;
padding: 0 1rem;
background: #f1f5f9;
}
.page__box{
min-height: 120px;
background: #1e293b;
margin: 0 -1rem;
font-size: 36px;
}
.page__content{
min-height: calc(150vh - 178px);
border-radius: 10px;
margin-top: -2rem;
background: white;
color: black;
font-size: 2rem;
}
.page__chart{
min-height: calc(50vh - 178px);
margin-top: 70px;
}
.page__content-data{
top: 25%;
left: 25%;
transform: translate(-25%, -25%);
}
test-Angular - Copy/src/app/dashboard/dashboard.component.html
View file @ e82b27ec
<div class="container-fluid page">
<div class="d-flex page__box p-3 mt-2">Home</div>
<div class="page__content shadow p-3 position-relative">
<div class="page__content-data position-absolute">
Dashboard Content Goes Here
</div>
<div class="page__chart shadow p-3 position-relative">
<div class="chart-wrapper">
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[plugins]="lineChartPlugins">
</canvas>
</div>
</div>
</div>
</div>
>>>>>>> test-Angular - Copy/src/app/dashboard/dashboard.component.html
test-Angular - Copy/src/app/dashboard/dashboard.component.ts
View file @ e82b27ec
import { Component, OnInit } from '@angular/core';
import { ChartDataSets, ChartType } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
selector: 'app-dashboard',
......@@ -6,6 +8,27 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
lineChartData: ChartDataSets[] = [
{ data: [85, 72, 78, 75, 77, 75], label: 'ASD Severity Level growth' },
];
lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
lineChartOptions = {
responsive: true,
};
lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType:ChartType = 'line';
constructor() { }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment