front

package-lock.json

@@ -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",

package.json

@@ -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"

src/app/app.module.ts

@@ -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]

src/app/main-view/post-analysis/post-analysis.component.html

@@ -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>

src/app/main-view/post-analysis/post-analysis.component.scss

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

src/app/main-view/post-analysis/post-analysis.component.ts

@@ -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;
@@ -74,6 +75,68 @@ export class PostAnalysisComponent implements OnInit {
 
     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']) {
             this.isPreview = true;