feat: Pie chart implemented

.vscode/settings.json

@@ -8,5 +8,8 @@
   },
   "editor.tabSize": 2,
   "java.compile.nullAnalysis.mode": "automatic",
-  "java.configuration.updateBuildConfiguration": "interactive"
+  "java.configuration.updateBuildConfiguration": "interactive",
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }

back/src/main/java/net/daw/alist/controllers/rest/TopicRestController.java

@@ -11,6 +11,7 @@
 import lombok.Getter;
 import lombok.Setter;
 import net.daw.alist.models.Topic;
+import net.daw.alist.services.ChartService;
 import net.daw.alist.services.TopicService;
 import net.daw.alist.utils.Utils;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -19,6 +20,10 @@
 import org.springframework.security.core.Authentication;
 import org.springframework.web.bind.annotation.*;
 
+import javax.persistence.criteria.CriteriaBuilder;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
 import java.util.Optional;
 
 @RestController
@@ -27,10 +32,13 @@ public class TopicRestController {
 
   @Autowired
   private TopicService topicService;
+  @Autowired
+  private ChartService chartService;
 
   @Autowired
   private Utils utils;
 
+
   @Operation(summary = "Get specific topic")
   @ApiResponses(value = {
           @ApiResponse(responseCode = "200", description = "Topic found", content = {
@@ -65,6 +73,13 @@ public ResponseEntity<Topic> getTopic(@PathVariable long topicId) {
     return new ResponseEntity<>(HttpStatus.NOT_FOUND);
   }
 
+
+  @GetMapping("/chart")
+  public ResponseEntity<Map<String, Integer>> getMappedTopics(){
+    Map<String, Integer> topicsMapped = chartService.getTopicsMapped();
+    return new ResponseEntity<>(topicsMapped, HttpStatus.OK);
+  }
+
   @Operation(summary = "Create topic")
   @ApiResponses(value = {
     @ApiResponse(responseCode = "201", description = "Topic created", content = {

back/src/main/java/net/daw/alist/services/ChartService.java

@@ -0,0 +1,35 @@
+package net.daw.alist.services;
+
+import net.daw.alist.models.Post;
+import net.daw.alist.models.Topic;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.web.bind.annotation.GetMapping;
+
+import java.util.*;
+
+@Service
+public class ChartService {
+
+    @Autowired
+    private PostService postService;
+
+    @GetMapping("/chart")
+
+    public Map<String,Integer> getTopicsMapped(){
+        List<Post> posts = postService.findAll();
+        Map<String, Integer> map = new HashMap<>();
+        for (Post post:posts) {
+            List<Topic> topics = post.getTopics();
+            for (Topic topic:topics) {
+                if(map.containsKey(topic.getName())){
+                    Integer repetition = map.get(topic.getName());
+                    map.put(topic.getName(), repetition+1);
+                }else{
+                    map.put(topic.getName(), 1);
+                }
+            }
+        }
+        return map;
+    }
+}

back/src/main/resources/static/scripts/create-chart.js

@@ -54,4 +54,10 @@ function drawChart() {
         google.charts.setOnLoadCallback(drawChart);
     };
   });
-}
+}
+
+					[this.topicsArray[0][0], this.topicsArray[0][1]],
+          [this.topicsArray[1][0], this.topicsArray[1][1]],
+          [this.topicsArray[2][0], this.topicsArray[2][1]],
+          [this.topicsArray[3][0], this.topicsArray[3][1]],
+          [this.topicsArray[4][0], this.topicsArray[4][1]],

front/angular.json

@@ -27,7 +27,8 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/@popperjs/core/dist/umd/popper.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/google-charts/dist/googleCharts.js"
             ]
           },
           "configurations": {

front/package.json

@@ -33,6 +33,7 @@
     "@angular-devkit/build-angular": "^14.2.1",
     "@angular/cli": "~14.2.1",
     "@angular/compiler-cli": "^14.0.0",
+    "@types/google.visualization": "^0.0.68",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",

front/src/app/admin/admin.module.ts

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { GoogleChartsModule } from 'angular-google-charts';
 
+
 import { AdminPanelComponent } from './pages/admin-panel/admin-panel.component';
 import { ChartComponent } from './components/chart/chart.component';
 import { ManageUsersComponent } from './components/manage-users/manage-users.component';

front/src/app/admin/components/chart/chart.component.html

@@ -1,6 +1,8 @@
 <p>chart works!</p>
+
 <div class="m-auto">
   <google-chart #chart [title]="title" [type]="type" [data]="data" [options]="options" [width]="width"
     [height]="height">
   </google-chart>
+
 </div>

front/src/app/admin/components/chart/chart.component.ts

@@ -1,35 +1,61 @@
-import { Component, OnInit } from '@angular/core';
-import { ChartType } from 'angular-google-charts';
-
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AdminHttpsService } from '../../services/admin-Https-Service';
+import { ChartType, Row } from 'angular-google-charts';
+declare var google: any;
 
 
 @Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.css'],
 })
-export class ChartComponent {
-  title = ' Topic popularity';
-  data = [
-    ['Firefox', 45.0],
-   ['IE', 26.8],
-   ['Chrome', 12.8],
-   ['Safari', 8.5],
-   ['Opera', 6.2],
-   ['Others', 0.7] 
-  ]
-  type: ChartType = ChartType.PieChart;
-  columnNames = ['Browser', 'Percentage'];
-  options = {
-
-	  titleTextStyle: {color: 'white'},
-		backgroundColor: 'transparent',
-		chartArea: {width: '100%', height: '85%'},
-		legend: { position: 'right', alignment: 'center', textStyle: { color: 'white', fontSize: 16 } },
-		colors: ['#69c0a1', '#6399A4', '#426f76', '#203E4F', '#356E57']
-  };
-  width = 550;
-  height = 400;
+export class ChartComponent implements OnInit {
+  topicsArray: Array<[string, number]> | undefined
+  title: string | undefined;
+  type!: ChartType;
+  data: Row[] = [];
+  options!: object;
+  width: number | undefined;
+  height: number | undefined;
+
+  constructor(private httpService: AdminHttpsService) { }
+
+  ngOnInit() {
+
+    const map = this.httpService.getTopicsMapped().subscribe(topics => {
+      const topicsMapped = new Map<string, number>(
+        Object.entries(topics).reduce((acc, [key, value]) => {
+          acc.set(key, value);
+          return acc;
+        }, new Map<string, number>())
+      );
+      this.topicsArray = [...topicsMapped.entries()].sort((a, b) => b[1] - a[1]);
+      console.log(this.topicsArray[0])
+      this.data = [
+        [this.topicsArray[0][0], this.topicsArray[0][1]],
+        [this.topicsArray[1][0], this.topicsArray[1][1]],
+        [this.topicsArray[2][0], this.topicsArray[2][1]],
+        [this.topicsArray[3][0], this.topicsArray[3][1]],
+        [this.topicsArray[4][0], this.topicsArray[4][1]],
+      ]
+
+
+    });
+
+    this.options = {
+      titleTextStyle: { color: 'white' },
+      backgroundColor: 'transparent',
+      chartArea: { width: '100%', height: '85%' },
+      legend: { position: 'right', alignment: 'center', textStyle: { color: 'white', fontSize: 16 } },
+      colors: ['#69c0a1', '#6399A4', '#426f76', '#203E4F', '#356E57']
+    };
+    this.title = ' Topic popularity';
+    this.type = ChartType.PieChart;
+    this.width = 550;
+    this.height = 400;
+
+  }
+
 
 }
 

front/src/app/admin/pages/admin-panel/admin-panel.component.html

@@ -2,6 +2,7 @@
   <h1 class="pb-2 border-bottom">Admin Panel</h1>
   <h5 class="mt-4 font-weight-bold">Topic popularity</h5>
   <div class="row d-flex row-cols-1 row-cols-lg-3 m-auto">
+
     <app-chart></app-chart>
 
   </div>

front/src/app/admin/services/admin-Https-Service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, catchError, of } from 'rxjs';
+
+
+@Injectable({ providedIn: 'root' })
+
+export class AdminHttpsService {
+  constructor(private httpClient: HttpClient) { }
+
+  topics: Map<string, number> | undefined; 
+
+ getTopicsMapped(): Observable<Map<string, number>> {
+  return this.httpClient.get<Map<string, number>>("api/topics/chart").pipe(
+    catchError(error => {
+      console.error(error);
+      return of(new Map<string, number>());
+    })
+  );
+}
+
+
+}