Add Genre tables

dashboard/src/app/dashboard.component.html

@@ -98,4 +98,39 @@
     </tr>
 </tbody>
 </table>
+
+<div class="col-md-6">
+    <h3>Top Genres</h3>
+    <table class="table table-striped">
+    <thead>
+        <tr>
+            <th>Genre</th>
+            <th>Track Count</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let genre of topGenres">
+            <td>{{genre.key}}</td>
+            <td>{{genre.doc_count}}</td>
+        </tr>
+    </tbody>
+    </table>
+</div>
+<div class="col-md-6">
+    <h3>Bottom Genres</h3>
+    <table class="table table-striped">
+    <thead>
+        <tr>
+            <th>Genre</th>
+            <th>Track Count</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let genre of bottomGenres">
+            <td>{{genre.key}}</td>
+            <td>{{genre.doc_count}}</td>
+        </tr>
+    </tbody>
+    </table>
+</div>
 </div>

dashboard/src/app/dashboard.component.ts

@@ -21,6 +21,9 @@ export class DashboardComponent implements OnInit {
   trackCountAlbum: number = 0;
   neverListenSong: number = 0;
 
+  topGenres: Bucket[] = [];
+  bottomGenres: Bucket[] = [];
+
   mostPlayedSongs: Song[] = [];
 
   constructor(private elsService: ElsService) { }
@@ -48,6 +51,10 @@ export class DashboardComponent implements OnInit {
     this.elsService.getMostPlayedTrack().subscribe(
       data => this.mostPlayedSongs = data
     );
+
+    this.elsService.getGenres().subscribe(data => this.topGenres = data);
+    this.elsService.getGenres("asc").subscribe(data => this.bottomGenres = data);
+    this.elsService.getGenreCount().subscribe(data => console.log(data));
   }
 
 

dashboard/src/app/els.service.ts

@@ -8,6 +8,7 @@ import 'rxjs/add/operator/map';
 import { Song }  from './object/song';
 import { Album } from './object/album';
 import { Artist } from './object/artist';
+import { Bucket } from './object/bucket';
 
 @Injectable()
 export class ElsService {
@@ -196,6 +197,53 @@ export class ElsService {
       });
   }
 
+  getGenres(ordering: string = 'desc'): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + "song" + ElsService.ACTION_SEARCH,
+            JSON.stringify(
+              {
+                "aggs" : {
+                  "genres" : {
+                    "terms" : {
+                      "field" : "Genre.original",
+                      "size" : 10,
+                      "missing": "N/A",
+                      "order": { "_count" : ordering }
+                    }
+                  }
+                },
+                "size": 0
+              }),
+            {headers: this.headers})
+      .map(res => res.json().aggregations.genres.buckets)
+      .map((hits: Array<any>) => {
+        let result:Array<Bucket> = [];
+        hits.forEach((bucket) => {
+          result.push(bucket);
+        });
+        return result;
+      });;
+  }
+
+  getGenreCount(): Observable<number> {
+    return this.http
+      .post(this.elsUrl + "song" + ElsService.ACTION_SEARCH,
+            JSON.stringify(
+              {
+                "aggs" : {
+                  "genres" : {
+                    "cardinality" : {
+                      "field" : "Genre.original",
+                      "missing": "N/A",
+                    }
+                  }
+                },
+                "size": 0
+              }),
+            {headers: this.headers})
+      .map(res => res.json().aggregations.genres.value);
+  }
+
   private handleError(error: any): Promise<any> {
     console.error('An error occurred', error); // for demo purposes only
     return Promise.reject(error.message || error);

dashboard/src/app/object/bucket.ts

@@ -0,0 +1,4 @@
+export class Bucket {
+    key: string;
+    doc_count: number;
+}