Improve search page

package-lock.json

@@ -16049,6 +16049,11 @@
         "pify": "^4.0.1"
       }
     },
+    "wordcloud": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/wordcloud/-/wordcloud-1.1.2.tgz",
+      "integrity": "sha512-YTaVrHbCM44xslcw5QOxTKT3v0vLhpNsgVb8vGH9NocO8aIugt0Rw+WhkzgVyo5E6vv7tJO5ISb/ujUO7mBAyw=="
+    },
     "worker-farm": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",

package.json

@@ -59,6 +59,7 @@
     "sharp": "^0.25.4",
     "socket.io-client": "^2.3.0",
     "tslib": "^1.10.0",
+    "wordcloud": "^1.1.2",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {

src/app/models/top-search.ts

@@ -0,0 +1,8 @@
+export class TopSearch {
+
+	Documents: { 
+		Text: string;
+		Hits: number;
+	}[] = [];
+    
+}

src/app/pages/search/search.page.html

@@ -95,13 +95,8 @@
       <!-- most searched word-->
       <div class="most-searched-words" *ngIf="!showDocuments">
         <p class="title ion-text-center">Palavras mais pesquisadas</p>
-        <div>
+        <div class="most-searched-word-container">
-          <angular-tag-cloud class="world-cloud"
+            123
-            [data]="data"
-            [width]=width
-            [height]=height
-            [overflow]=true>
-          </angular-tag-cloud>
         </div>
       </div>
       

src/app/pages/search/search.page.scss

@@ -197,6 +197,11 @@ ion-slide{
       text-align: center;
       color: black;
     }
+
+    .most-searched-word-container{
+      width: 441px;
+      height: 400px;
+    }
   }
 }
 

src/app/pages/search/search.page.ts

@@ -1,13 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { ProcessesService } from 'src/app/services/processes.service';
-import { SearchService } from "../../services/search.service";
+import { SearchService,  } from "../../services/search.service";
 import { SearchCategory } from "src/app/models/search-category";
 import { SearchDocument } from "src/app/models/search-document";
 import { formatDate } from '@angular/common';
 import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
 import { SenderPage } from 'src/app/pages/search/sender/sender.page';
 import { OrganicEntityPage } from 'src/app/pages/search/organic-entity/organic-entity.page';
+import  WordCloud from 'src/plugin/wordcloud2.js'
+
 
 import { NgModel } from '@angular/forms';
 @Component({
@@ -54,12 +56,40 @@ export class SearchPage implements OnInit {
     speed: 400,
   }
 
+
+  list = []
+
   constructor(private modalController: ModalController,
     private search: SearchService) {
       this.ordinance = "recent";
     }
 
   ngOnInit() {
+
+    this.search.mostSeachWord("10").subscribe(res=>{
+
+      let list = []
+
+      res.forEach(element => {
+        list.push(Object.values(element))
+      });
+
+      this.list = list
+      
+      const elem = document.documentElement.querySelector('.most-searched-word-container');
+
+
+      WordCloud(
+        elem,
+        { 
+          list: this.list,
+          Family: 'Times, serif',
+          gridSize: 15
+        },
+      );
+
+    });
+
   }
 
   close(){

src/app/services/search.service.ts

@@ -1,11 +1,12 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Event } from '../models/event.model';
-import { Observable } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { AuthService } from '../services/auth.service';
 import { User } from '../models/user.model';
 import { EventSearch } from "src/app/models/event-search";
+import { TopSearch } from 'src/app/models/top-search';
 
 @Injectable({
   providedIn: 'root'
@@ -52,4 +53,22 @@ export class SearchService {
     return this.http.get<EventSearch>(`${geturl}`, options);
   }
 
+  mostSeachWord(size:string): Observable<TopSearch>{
+    // Endpoint
+    const geturl = environment.apiURL + 'search/top';
+    // store params
+    let params = new HttpParams();
+    // set https params
+
+    params = params.set("size", size);
+
+
+    const options = { 
+      headers: this.headers, 
+      params: params 
+    };
+
+    return this.http.get<TopSearch>(`${geturl}`, options);
+  }
+
 }

src/global.scss

@@ -156,15 +156,14 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 
 .timeline-mdgpr-box-Oficial{
-    border-left: 5px solid #f05d5e !important;
+    border-left: 5px solid #ffb703 !important;
 
 }
 .timeline-mdgpr-box-Pessoal{
-    border-left: 5px solid #ffb703 !important;
+    border-left: 5px solid #f05d5e !important;
 }
 
 
-
 .table-bordered, .table-bordered{
     border: none !important;
     td, th {