Els Service: get Artists

dashboard/.angular-cli.json

@@ -22,7 +22,9 @@
         "styles.css",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
-      "scripts": [],
+      "scripts": [
+        "../node_modules/angular4-word-cloud/d3.min.js"
+      ],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

dashboard/package.json

@@ -21,10 +21,13 @@
     "@angular/platform-browser": "^4.2.4",
     "@angular/platform-browser-dynamic": "^4.2.4",
     "@angular/router": "^4.2.4",
+    "angular-tag-cloud-module": "^1.4.0",
+    "angular4-word-cloud": "^0.1.2",
+    "bootstrap": "3.3.7",
     "core-js": "^2.4.1",
+    "d3": "^4.11.0",
     "rxjs": "^5.4.2",
-    "zone.js": "^0.8.14",
-    "bootstrap": "3.3.7"
+    "zone.js": "^0.8.14"
   },
   "devDependencies": {
     "@angular/cli": "1.3.2",

dashboard/src/app/app.module.ts

@@ -2,6 +2,9 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 
+import { TagCloudModule } from 'angular-tag-cloud-module';
+import { AgWordCloudModule } from 'angular4-word-cloud';
+
 import { AppComponent } from './app.component';
 import { DashboardComponent } from './dashboard.component';
 import { AlbumComponent } from './album/album.component';
@@ -19,6 +22,8 @@ import { SortByPipe } from './sort-by.pipe';
   imports: [
     BrowserModule,
     HttpModule,
+    TagCloudModule,
+    AgWordCloudModule.forRoot(),
     AppRoutingModule
   ],
   declarations: [

dashboard/src/app/dashboard.component.html

@@ -150,4 +150,22 @@
     </tbody>
     </table>
 </div>
+
+<div>
+    <angular-tag-cloud
+      [data]="wordCloud"
+      [width]="options.width"
+      [height]="options.height"
+      [overflow]="options.overflow">
+    </angular-tag-cloud>
+  </div>
+
+
+<div AgWordCloud
+  #word_cloud_chart=ag-word-cloud
+  [wordData]="word_cloud">
+</div>
+
+<button (click)="word_cloud_chart.update()">Toggle tooltip</button>
+
 </div>

dashboard/src/app/dashboard.component.ts

@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
+
+import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
+import { AgWordCloudData, AgWordCloudDirective } from 'angular4-word-cloud';
 
 import { ElsService } from './els.service';
 import { Song } from './object/song';
@@ -31,6 +35,25 @@ export class DashboardComponent implements OnInit {
   lastAddedAlbums: Bucket[] = [];
   albumArtists = [];
 
+  /**
+   * Test of angular-tag-cloud-module (https://www.npmjs.com/package/angular-tag-cloud-module)
+   */
+  options: CloudOptions = {
+    // if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value
+    width : 1,
+    height : 400,
+    overflow: false,
+  };
+
+  wordCloud: Array<CloudData> = [];
+
+  /**
+   * Test of angular4-word-cloud (https://www.npmjs.com/package/angular4-word-cloud)
+   */
+  word_cloud: Array<AgWordCloudData> = [];
+
+  @ViewChild('word_cloud_chart') testTruc: AgWordCloudDirective;
+
   constructor(private elsService: ElsService) { }
 
   ngOnInit(): void {
@@ -57,8 +80,23 @@ export class DashboardComponent implements OnInit {
       data => this.mostPlayedSongs = data
     );
 
-    this.elsService.getGenres().subscribe(data => this.topGenres = data);
-    this.elsService.getGenres('asc').subscribe(data => this.bottomGenres = data);
+    this.elsService.getGenres().subscribe(data => {
+      this.topGenres = data.slice(0, 10);
+
+      /** angular-tag-cloud-module **/
+      const changedData: Observable<Array<CloudData>> = Observable.of(
+        data.map(element => {
+          return {weight: element.doc_count, text: element.key, link: '/genre/' + element.key};
+        })
+      );
+      changedData.subscribe(res => this.wordCloud = res);
+
+      data.forEach((el) => {
+        this.word_cloud.push({size: el.doc_count, text: el.key});
+      });
+      this.testTruc.update();
+    });
+    this.elsService.getGenres('asc').subscribe(data => this.bottomGenres = data.slice(0, 10).reverse());
     // this.elsService.getGenreCount().subscribe(data => console.log(data));
 
     this.elsService.getLastAddedAlbums(6).subscribe(buckets => {

dashboard/src/app/els.service.ts

@@ -265,7 +265,7 @@ export class ElsService {
                 'genres' : {
                   'terms' : {
                     'field' : 'Genre.original',
-                    'size' : 10,
+                    'size' : 100,
                     'missing': 'N/A',
                     'order': { '_count' : ordering }
                   }
@@ -277,6 +277,39 @@ export class ElsService {
       .map((hits: Array<any>) => this.hitsToBuckets(hits));
   }
 
+  getArtists(): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + 'artist' + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'size': 100,
+              '_source': [
+                'Artist',
+                'Track Count'
+              ],
+              'sort': [
+                {
+                  'Track Count': {
+                    'order': 'desc'
+                  }
+                }
+              ]
+          }), {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        const result: Array<Bucket> = [];
+        hits.forEach((hit) => {
+          const bucket = new Bucket;
+          bucket.doc_count = hit._source['Track Count'];
+          bucket.key = hit._source.Artist;
+          result.push(bucket);
+        });
+        console.log(result);
+        return result;
+      });
+  }
+
   getGenreCount(): Observable<number> {
     return this.http
       .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,