s444386/mgr-frontend
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

front

Browse Source
This commit is contained in:
szymonj98 2023-01-23 23:11:30 +01:00
parent 3917ffe845
commit 2c55bc0247
6 changed files with 131 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
package-lock.json generated
View File

@ -18,6 +18,7 @@
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
"ng2-charts": "^3.1.2",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
@ -3964,6 +3965,12 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
"node_modules/chart.js": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
"integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
"peer": true
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -7637,6 +7644,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",
@ -8230,6 +8242,21 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
"node_modules/ng2-charts": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.1.2.tgz",
"integrity": "sha512-KkbpQhbf8DhcEm5SnqKBQMa25cBOKBiopjl4+8aUbfOaKY59uOfImAYPDsT3du7cfMVD6w7xt4SWhRbbelY9sQ==",
"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/nice-napi": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@ -15029,6 +15056,12 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
"chart.js": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
"integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
"peer": true
},
"chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -17718,6 +17751,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",
@ -18174,6 +18212,15 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
"ng2-charts": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.1.2.tgz",
"integrity": "sha512-KkbpQhbf8DhcEm5SnqKBQMa25cBOKBiopjl4+8aUbfOaKY59uOfImAYPDsT3du7cfMVD6w7xt4SWhRbbelY9sQ==",
"requires": {
"lodash-es": "^4.17.15",
"tslib": "^2.3.0"
}
},
"nice-napi": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

3
package.json
View File

@ -20,6 +20,7 @@
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
"ng2-charts": "^3.1.2",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
@ -38,4 +39,4 @@
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.2"
}
}
}

4
src/app/app.module.ts
View File

@ -19,6 +19,7 @@ import { SettingsComponent } from './main-view/settings/settings.component';
import { MatTableModule } from '@angular/material/table';
import {MatTooltipModule} from '@angular/material/tooltip';
import { DashboardComponent } from './main-view/dashboard/dashboard.component';
import { NgChartsModule } from 'ng2-charts';
@NgModule({
declarations: [
@ -43,7 +44,8 @@ import { DashboardComponent } from './main-view/dashboard/dashboard.component';
MatToolbarModule,
MatIconModule,
MatTableModule,
MatTooltipModule
MatTooltipModule,
NgChartsModule
],
providers: [],
bootstrap: [AppComponent]

12
src/app/main-view/post-analysis/post-analysis.component.html
View File

@ -90,6 +90,16 @@
<button class="button-primary">Więcej szczególów</button>
</div>
</div>
<div class="charts-container">
<canvas baseChart width="200" height="200" [data]="barChartData" [options]="barChartOptions"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
</canvas>
<canvas baseChart width="200" height="200" [type]="'line'" [data]="lineChartData"
[options]="lineChartOptions" [legend]="lineChartLegend">
</canvas>
<canvas baseChart width="200" height="200" [type]="'pie'" [datasets]="pieChartDatasets" [labels]="pieChartLabels"
[options]="pieChartOptions" [plugins]="pieChartPlugins" [legend]="pieChartLegend" >
</canvas>
</div>
</div>
</div>

3
src/app/main-view/post-analysis/post-analysis.component.scss
View File

@ -136,6 +136,9 @@
justify-content: flex-end;
}
}
.charts-container{
display: flex;
}
}

67
src/app/main-view/post-analysis/post-analysis.component.ts
View File

@ -1,5 +1,6 @@
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { ChartConfiguration, ChartOptions, ChartType } from 'chart.js';
export interface Reaction {
angry: number;
@ -17,7 +18,7 @@ export interface PopularComments {
}
export interface PostAnalysisResult {
isPositive:boolean;
isPositive: boolean;
reaction: Reaction;
postCommentCounts: number;
mostPopularComments: PopularComments[];
@ -72,7 +73,69 @@ export class PostAnalysisComponent implements OnInit {
analysisResults: []
}
constructor(private route:ActivatedRoute) { }
constructor(private route: ActivatedRoute) { }
//bar chart
public barChartLegend = true;
public barChartPlugins = [];
public barChartData: ChartConfiguration<'bar'>['data'] = {
labels: ['Ironia czy coś tam'],
datasets: [
{ data: [65], label: '65%', backgroundColor: 'rgba(250, 66, 66, 1)', borderRadius: 15, },
{ data: [35], label: '35%', backgroundColor: 'rgba(124, 136, 248, 1)', borderRadius: 15, }
]
};
public barChartOptions: ChartConfiguration<'bar'>['options'] = {
responsive: false,
scales: {
yAxes: {
display: false
}
}
};
//line chart
public lineChartData: ChartConfiguration<'line'>['data'] = {
labels: [
'super',
'fajny',
'wykres',
],
datasets: [
{
data: [65, 59, 80],
label: 'Ale wykres ooo',
fill: true,
tension: 0.0,
borderColor: 'black',
backgroundColor: 'rgba(124, 136, 248, 1)'
}
]
};
public lineChartOptions: ChartOptions<'line'> = {
responsive: false,
scales: {
yAxes: {
display: false
}
}
};
public lineChartLegend = true;
//pie
public pieChartOptions: ChartOptions<'pie'> = {
responsive: false,
};
public pieChartLabels = [['59%'], ['41%']];
public pieChartDatasets = [{
data: [41, 59], backgroundColor: ["rgba(124, 136, 248, 1)","rgba(250, 66, 66, 1)"], borderWidth:0
}];
public pieChartLegend = true;
public pieChartPlugins = [];
ngOnInit(): void {
if (this.route.snapshot.params['id']) {