feat: pie chart added on admin panel

back/src/main/java/net/daw/alist/controllers/ChartController.java

@@ -0,0 +1,48 @@
+package net.daw.alist.controllers;
+
+import java.util.*;
+
+import net.daw.alist.models.Post;
+import net.daw.alist.models.Topic;
+import net.daw.alist.services.PostService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+public class ChartController {
+
+    @Autowired
+    private PostService postService;
+
+    @GetMapping("/chart")
+    public List<Object> calculateChart() {
+
+        List<Object> counters = calculateUsedTopics();
+        return calculateUsedTopics();
+    }
+
+    private List<Object> calculateUsedTopics(){
+        List<Object> counter = new ArrayList<>();
+        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);
+                }
+            }
+        }
+        Set<String> keySet = map.keySet();
+        for(String string: keySet){
+            counter.add(string);
+            counter.add(map.get(string));
+        }
+        return counter;
+    }
+
+}

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

@@ -8,6 +8,8 @@
 import org.springframework.data.domain.PageRequest;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 @Service
 @AllArgsConstructor
 public class PostService {
@@ -27,4 +29,8 @@ public Page<Post> getStarredPosts(int pageNumber, int user_id) {
     public void save(Post post) {
         postRepository.save(post);
     }
+
+    public List<Post> findAll() {
+        return postRepository.findAll();
+    }
 }

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

@@ -32,36 +32,19 @@ public List<Topic> getTopics(List<String> topicNames) {
         return topics;
     }
 
-import java.util.List;
-
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.stereotype.Service;
-
-import lombok.AllArgsConstructor;
-import net.daw.alist.models.Topic;
-import net.daw.alist.repositories.TopicRepository;
-
-@Service
-@AllArgsConstructor
-public class TopicService{
-
-  @Autowired
-  private final TopicRepository topicRepository;
-
-  public List<Topic> findAll() {
-    return topicRepository.findAll();
-  }
-
-  public Topic findById(long id) {
-    return topicRepository.findById(id).orElseThrow();
-  }
+    public List<Topic> findAll() {
+        return topicRepository.findAll();
+    }
 
-  public void delete(Topic topic) {
-    topicRepository.delete(topic);
-  }
+    public Topic findById(long id) {
+        return topicRepository.findById(id).orElseThrow();
+    }
 
-  public void save(Topic topic) {
-    topicRepository.save(topic);
-  }
+    public void delete(Topic topic) {
+        topicRepository.delete(topic);
+    }
 
+    public void save(Topic topic) {
+        topicRepository.save(topic);
+    }
 }

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

@@ -0,0 +1,53 @@
+// Load google charts
+google.charts.load('current', {'packages':['corechart']});
+google.charts.setOnLoadCallback(drawChart);
+
+function sortArray(arr) {
+  return arr.sort((a, b) => a[0] - b[0]);
+}
+
+// Draw the chart and set the chart values
+function drawChart() {
+  $.ajax({
+	url: '/chart'
+  }).done(function(counters) {
+
+
+    let result = [];
+     for (let i = 0; i < counters.length; i += 2) {
+       result.push([counters[i], counters[i+1]]);
+     }
+     result = sortArray(result);
+     result.reverse();
+
+     console.log(result);
+
+     topic1 = result[0];
+     topic2 = result[1];
+     topic3 = result[2];
+     topic4 = result[3];
+     topic5 = result[4];
+
+
+	var data = google.visualization.arrayToDataTable([
+		['Topic', 'Comments Number'],
+		[String(topic1[0]), Number(topic1[1])],
+		[String(topic2[0]), Number(topic2[1])],
+		[String(topic3[0]), Number(topic3[1])],
+		[String(topic4[0]), Number(topic4[1])],
+		[String(topic5[0]), Number(topic5[1])]
+	]);
+
+	var options = {
+		'width': 460,
+		'height': 305,
+		'backgroundColor': 'transparent',
+		'chartArea': { left: 20, top: 0, width: '100%', height: '100%' },
+		'legend': { position: 'right', alignment: 'center', textStyle: { color: 'white', fontSize: 16 } }
+	};
+
+	// Display the chart inside the <div> element with id="piechart"
+	var chart = new google.visualization.PieChart(document.getElementById('piechart'));
+	chart.draw(data, options);
+  });
+}

back/src/main/resources/templates/admin-panel.html

@@ -13,13 +13,23 @@
   <link rel="stylesheet" type="text/css" href="styles/bootstrap/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="styles/styles.css">
   <link rel="stylesheet" type="text/css" href="styles/admin-panel.css">
+  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"
+          integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9"
+          crossorigin="anonymous"></script>
+  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <script src="/scripts/create-chart.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <title>Alist | Admin Panel</title>
 </head>
 
 <body>
   {{>navbar}}
   <div class="container px-4 py-5 text-center" id="featured-3">
     <h1 class="pb-2 border-bottom">Admin Panel</h1>
+    <div class="row d-flex row-cols-1 row-cols-lg-3 m-auto">
+      <h1>Popular topics</h1>
+      <div id="piechart"></div>
+    </div>
     <div class="row d-flex row-cols-1 row-cols-lg-3 m-auto">
       <div class="feature col flex-grow-1">
         <a href="#collapseUsers" data-bs-toggle="collapse" data-bs-target="#collapseUsers" role="button"