(help) Help file: configure ELS for CORS + remote work

Remove or comment unused methods
Better handle of errors

.gitignore

@@ -0,0 +1,18 @@
+node_modules/
+.vscode/
+/es-albums.json
+/es-artists.json
+/es-songs.json
+/iTunesLibrary.xml
+
+# Working files
+*.txt
+*.code-workspace
+
+# Snippets for tests
+snippet.py
+snippet.js
+dashboard/resultToStudy.json
+sand_box.py
+rating_test.py
+iTunesGraphParser.my.py

check_id.py

@@ -0,0 +1,26 @@
+import json
+
+files = ['es-songs.json', 'es-artists.json', 'es-albums.json']
+
+ids = []
+bad_lines = {}
+
+for file in files:
+    with open(file) as fp:
+        line = fp.readline()
+
+        while line:
+            content = json.loads(line)
+            if 'index' in content:
+                id = content['index']['_id']
+                if id in ids:
+                    bad_lines[id] = content
+                else:
+                    ids.append(id)
+            line = fp.readline()
+
+if not bad_lines:
+    print("No duplicate ID's found, everything's fine!!")
+else:
+    print('KO')
+    print(bad_lines)

dashboard/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

dashboard/.gitignore

@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

dashboard/angular.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "dashboard": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "dashboard:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "dashboard:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "dashboard:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "dashboard-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "dashboard:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "dashboard",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

dashboard/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('dashboard App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

dashboard/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

dashboard/e2e/tsconfig.e2e.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

dashboard/karma.conf.js

@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

dashboard/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "dashboard",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "6.0.3",
+    "@angular/common": "6.0.3",
+    "@angular/compiler": "6.0.3",
+    "@angular/core": "6.0.3",
+    "@angular/forms": "6.0.3",
+    "@angular/http": "6.0.3",
+    "@angular/platform-browser": "6.0.3",
+    "@angular/platform-browser-dynamic": "6.0.3",
+    "@angular/router": "6.0.3",
+    "core-js": "^2.4.1",
+    "rxjs": "^6.2.0",
+    "zone.js": "^0.8.26",
+    "bootstrap": "3.3.7"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.6.6",
+    "@angular/cli": "^6.0.7",
+    "@angular/compiler-cli": "6.0.3",
+    "@angular/language-service": "6.0.3",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.1.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "^2.0.2",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "^5.3.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "2.7.2"
+  }
+}

dashboard/protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

dashboard/requestAlbum.txt

@@ -0,0 +1,63 @@
+POST http://localhost:9200/itunessongs/album/_search
+content-type: application/json
+User-Agent: vscode-restclient
+
+{
+    "query": {
+        "match" : {
+            "Album" : {
+                "query": "Crystal Castles",
+                 "operator" : "and"
+            }
+        }
+    },
+    "size": 20
+}
+
+POST http://localhost:9200/itunessongs/song/_search
+content-type: application/json
+User-Agent: vscode-restclient
+
+{
+    "query": {
+        "match_phrase" : {
+            "Album" : "Crystal Castles"
+        }
+    },
+    "size": 20
+}
+
+POST http://localhost:9200/itunessongs/song/_search
+content-type: application/json
+User-Agent: vscode-restclient
+
+{
+    "query": {
+        "bool": {
+            "must": [
+                {"match_phrase" : { "Album" : "Crystal Castles" }},
+                {"match_phrase" : { "Artist" : "Crystal Castles" }}
+            ]
+        }
+    },
+    "size": 20
+}
+
+POST http://localhost:9200/itunessongs/song/_search
+content-type: application/json
+User-Agent: vscode-restclient
+
+{
+    "query": {
+        "bool": {
+            "must": {
+                "match_phrase" : { "Album" : "Crystal Castles" }
+            },
+            "should" : [
+                {"match_phrase" : { "Artist" : "Crystal Castles" }},
+                {"match_phrase" : { "Album Artist" : "Crystal Castles" }}
+            ]
+        }
+    },
+    "size": 20
+}

dashboard/src/app/album/album.component.html

@@ -0,0 +1,92 @@
+<div class="container">
+  <h1>{{albumName}}</h1>
+
+  <div class="alert alert-warning">
+      <h3>Debug Zone</h3>
+      Returned song: {{songs.length}}<br />
+      Theorical number song: {{ album ? album['Track Count'] : ""  }}
+      <span *ngIf="album && (songs.length == album['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
+      <span *ngIf="album && (songs.length != album['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
+  </div>
+
+  <div class="row cardAdmin">
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-yellow">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-star stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album.Rating}}/100</h3>
+                          </div>
+                          <div><br>Rating</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-green">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-list-alt stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album['Track Count']}}</h3>
+                          </div>
+                          <div><br>Songs</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-purple">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-headphones stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album['Play Count']}} list.</h3>
+                          </div>
+                          <div><br>~{{album['Play Count'] / album['Track Count'] | number:'1.0-0'}} listening avg.</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-blue">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-time stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="album">{{album['Total Time'] | convertMs}}</h3>
+                          </div>
+                          <div><br>Album time</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+
+  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
+
+  <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
+      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
+  </button>
+  </div>

dashboard/src/app/album/album.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlbumComponent } from './album.component';
+
+describe('AlbumComponent', () => {
+  let component: AlbumComponent;
+  let fixture: ComponentFixture<AlbumComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlbumComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlbumComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/album/album.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+
+import { ElsService } from './../els.service';
+import { Song } from './../model/song';
+import { Album } from './../model/album';
+import { SongTableComponent } from '../song-table/song-table.component';
+
+@Component({
+  selector: 'app-album',
+  templateUrl: './album.component.html',
+  styleUrls: [ './album.component.css', './../dashboard/dashboard.component.css' ]
+})
+
+export class AlbumComponent implements OnInit {
+  @ViewChild(SongTableComponent) private songtable: SongTableComponent;
+
+  albumName = '';
+  songs: Array<Song> = [];
+  album: Album = new Album(); // If album not found, will be replaced by 'undefined'
+
+  // Prevent useless data load + activate button in interface var
+  moreDataAvailable = true;
+  lockLoadData = false;
+
+  constructor(
+    private elsService: ElsService,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit(): void {
+    this.route.params
+      .subscribe((params: Params) => this.albumName = params['name']);
+
+    this.loadSongs();
+
+    this.elsService.getAlbum(this.albumName).subscribe(data => this.album = data);
+  }
+
+  loadSongs(): void {
+    if (this.lockLoadData) {
+      console.log('Loading data locked');
+      return;
+    }
+
+    if (!this.moreDataAvailable) {
+      return;
+    }
+
+    this.lockLoadData = true;
+    this.elsService.getAlbumSongs(this.albumName, this.songs.length).subscribe(
+      data => {
+        this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;
+
+        // Erase song array with result for first load, then add elements one by one
+        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
+        if (this.songs.length === 0) {
+          this.songs = data;
+        } else {
+          this.songtable.setSortable(true);
+          data.forEach(song => {
+            this.songs.push(song);
+          });
+        }
+        console.log('Unlock load data');
+        this.lockLoadData = false;
+      }
+    );
+  }
+}

dashboard/src/app/app-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { AlbumComponent } from './album/album.component';
+import { ArtistComponent } from './artist/artist.component';
+import { GenreComponent } from './genre/genre.component';
+import { LastAddedComponent } from './last-added/last-added.component';
+import { TopPlayedComponent } from './top-played/top-played.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard',  component: DashboardComponent },
+  { path: 'album/:name',      component: AlbumComponent },
+  { path: 'artist/:name',      component: ArtistComponent },
+  { path: 'genre/:name',      component: GenreComponent },
+  { path: 'lastAdded',      component: LastAddedComponent },
+  { path: 'top-played',      component: TopPlayedComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+
+export class AppRoutingModule {}

dashboard/src/app/app.component.css

@@ -0,0 +1,45 @@
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  margin-left: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+/*
+nav a:visited, a:link {
+  color: #607D8B;
+}
+
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+
+nav a.active {
+  color: #039be5;
+} */
+
+
+/* FIXME Code Repetition  */
+.btn-top {
+  display: inline-block;
+  position: fixed;
+  z-index: 1;
+  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+  -moz-transition: opacity .3s 0s, visibility 0s 0s;
+  transition: opacity .3s 0s, visibility 0s 0s;
+}

dashboard/src/app/app.component.html

@@ -0,0 +1,4 @@
+<nav>
+  <a class="btn-top" routerLink="/dashboard" routerLinkActive="active"><span class="glyphicon glyphicon-home"></span></a>
+</nav>
+<router-outlet></router-outlet>

dashboard/src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});

dashboard/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}

dashboard/src/app/app.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { AlbumComponent } from './album/album.component';
+import { ArtistComponent } from './artist/artist.component';
+import { GenreComponent } from './genre/genre.component';
+import { SongTableComponent } from './song-table/song-table.component';
+import { LastAddedComponent } from './last-added/last-added.component';
+import { TopPlayedComponent } from './top-played/top-played.component';
+
+import { ElsService } from './els.service';
+
+import { AppRoutingModule } from './app-routing.module';
+
+import { ConvertMsPipe } from './pipes/convertms.pipe';
+import { ConvertMoreExactPipe } from './pipes/convert-more-exact.pipe';
+import { SortByPipe } from './pipes/sort-by.pipe';
+import { ConvertSizeToStringPipe } from './pipes/convert-size-to-string.pipe';
+import { RoundPipe } from './pipes/round.pipe';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    AlbumComponent,
+    ArtistComponent,
+    GenreComponent,
+    SongTableComponent,
+    LastAddedComponent,
+    ConvertMsPipe,
+    ConvertMoreExactPipe,
+    SortByPipe,
+    ConvertSizeToStringPipe,
+    TopPlayedComponent,
+    RoundPipe
+  ],
+  providers: [
+    ElsService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

dashboard/src/app/artist/artist.component.html

@@ -0,0 +1,97 @@
+<div class="container">
+  <h1>{{artistName}}</h1>
+
+  <div class="alert alert-warning">
+      <h3>Debug Zone</h3>
+      Returned song:&emsp;{{songs.length}}<br />
+      Theorical song:&emsp;{{ artist ? artist['Track Count'] : ""  }}
+      <span *ngIf="artist && (songs.length == artist['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
+      <span *ngIf="artist && (songs.length != artist['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
+      <br />
+      Artist song:&emsp;&emsp;&emsp;{{countSong}}
+      <span *ngIf="artist && (songs.length == countSong)" class="glyphicon glyphicon-ok" style="color:green"></span>
+      <span *ngIf="artist && (songs.length != countSong)" class="glyphicon glyphicon-remove" style="color:red"></span>
+  </div>
+
+  <div class="row cardAdmin">
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-yellow">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-star stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist.Rating}}/100</h3>
+                          </div>
+                          <div>Rating</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-blue">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-cd stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist.Album?.length}}</h3>
+                          </div>
+                          <div>Albums</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-green">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-list-alt stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist['Track Count']}}</h3>
+                          </div>
+                          <div>Songs</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="col-lg-3 col-md-3 col-sm-6">
+          <div class="panel panel-purple">
+              <div class="panel-heading">
+                  <div class="row">
+                      <div class="col-xs-3">
+                          <span class="glyphicon glyphicon-headphones stats_icon"></span>
+                      </div>
+                      <div class="col-xs-9 text-right">
+                          <div>
+                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                              <h3 *ngIf="artist">{{artist['Play Count']}} list.</h3>
+                          </div>
+                          <div *ngIf="artist">~{{artist['Play Count'] / artist['Track Count'] | number:'1.0-0'}} listening avg.</div>
+                          <div *ngIf="!artist">Listening</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+
+  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
+
+  <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
+      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
+  </button>
+  </div>

dashboard/src/app/artist/artist.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArtistComponent } from './artist.component';
+
+describe('ArtistComponent', () => {
+  let component: ArtistComponent;
+  let fixture: ComponentFixture<ArtistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ArtistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArtistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/artist/artist.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+
+import { ElsService } from './../els.service';
+import { Song } from './../model/song';
+import { Artist } from './../model/artist';
+import { SongTableComponent } from '../song-table/song-table.component';
+
+@Component({
+  selector: 'app-artist',
+  templateUrl: './artist.component.html',
+  styleUrls: [ './../album/album.component.css', './../dashboard/dashboard.component.css', './artist.component.css' ]
+})
+
+export class ArtistComponent implements OnInit {
+  // Interacte with table to set sortable
+  @ViewChild(SongTableComponent) songtable: SongTableComponent;
+
+  // Prevent useless data load + activate button in interface var
+  moreDataAvailable = true;
+
+  artistName = '';
+  songs: Array<Song> = [];
+  artist: Artist = new Artist();
+  lockLoadData = false;
+  countSong: number;
+
+  constructor(
+    private elsService: ElsService,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params: Params) => this.artistName = params['name']);
+
+    this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);
+
+    this.elsService.getCountArtistSong(this.artistName).subscribe(data => this.countSong = data);
+
+    this.loadSongs();
+  }
+
+  // TODO Duplicate code!
+  loadSongs(): void {
+    if (this.lockLoadData) {
+      console.log('Loading data locked');
+      return;
+    }
+
+    if (!this.moreDataAvailable) {
+      return;
+    }
+
+    this.lockLoadData = true;
+    this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
+      data => {
+        this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;
+
+        // Erase song array with result for first load, then add elements one by one
+        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
+        if (this.songs.length === 0) {
+          this.songs = data;
+        } else {
+          this.songtable.setSortable(true);
+          data.forEach(song => {
+            this.songs.push(song);
+          });
+        }
+        console.log('Unlock load data');
+        this.lockLoadData = false;
+      }
+    );
+  }
+}

dashboard/src/app/dashboard/dashboard.component.css

@@ -0,0 +1,38 @@
+.panel-stat {
+    min-height: 102px;
+}
+
+.panel-green {
+  background-color: #16a085;
+  color:white;
+}
+.panel-yellow {
+  background-color: #f1c40f;
+  color:white;
+}
+
+.panel-red {
+  background-color: #d9534f;
+  color:white;
+}
+
+.panel-purple {
+  background-color: #9b59b6;
+  color:white;
+}
+
+.panel-blue {
+  background-color: #3498db;
+  color:white;
+}
+
+.stats_icon {
+  font-size: 3em;
+}
+
+.circle {
+  border-radius: 50%;
+  background-color: #9b59b6;
+  margin: 0 auto;
+
+}

dashboard/src/app/dashboard/dashboard.component.html

@@ -0,0 +1,158 @@
+<div class="container">
+    <h1>iTunes stats</h1>
+
+<br />
+<div class="row cardAdmin">
+    <div class="col-lg-3 col-md-3">
+        <div class="panel panel-blue">
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-xs-3">
+                        <span class="glyphicon glyphicon-time stats_icon"></span>
+                    </div>
+                    <div class="col-xs-9 text-right">
+                        <div>
+                            <h3 *ngIf="!totalTime"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                            <h3 *ngIf="totalTime">{{totalTime | convertMs}}</h3>
+                        </div>
+                        <div><br>Total time ({{totalTime | convertMoreExact}})</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-3 col-md-3">
+        <div class="panel panel-green">
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-xs-3">
+                        <span class="glyphicon glyphicon-hdd stats_icon"></span>
+                    </div>
+                    <div class="col-xs-9 text-right">
+                        <div>
+                            <h3 *ngIf="!totalSize"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                            <h3 *ngIf="totalSize">{{totalSize | convertSizeToString}}</h3>
+                        </div>
+                        <div><br>Total size</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-3 col-md-3">
+        <div class="panel panel-yellow">
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-xs-3">
+                        <span class="glyphicon glyphicon-play stats_icon"></span>
+                    </div>
+                    <div class="col-xs-9 text-right">
+                        <div>
+                            <h3 *ngIf="!trackCountSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                            <h3 *ngIf="trackCountSong">{{trackCountSong}}</h3>
+                        </div>
+                        <div><br>Total Songs</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-3 col-md-3">
+        <div class="panel panel-red">
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-xs-3">
+                        <span class="glyphicon glyphicon-stop stats_icon"></span>
+                    </div>
+                    <div class="col-xs-9 text-right">
+                        <div>
+                            <h3 *ngIf="!neverListenSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                            <h3 *ngIf="neverListenSong">{{neverListenSong}}</h3>
+                        </div>
+                        <div><br>Never list. songs (~{{neverListenSong / trackCountSong * 100 | round}}%)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="col-md-12">
+    <h3><a [routerLink]="['/lastAdded']">Last Added</a></h3>
+
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                <th>Album</th>
+                <th>Track Count</th>
+                <th>Album Artist</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let album of lastAddedAlbums">
+                <td><a [routerLink]="['/album', album.key]">{{album.key}}</a></td>
+                <td>{{album.doc_count}}</td>
+                <td><a [routerLink]="['/artist', albumArtists[album.key]]">{{albumArtists[album.key]}}</a></td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<div class="col-md-12">
+<h3>Top Played Songs</h3>
+    <table class="table table-striped">
+    <thead>
+        <tr>
+            <th>Track Name</th>
+            <th>Artist</th>
+            <th>Album</th>
+            <th>Play Count</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let song of mostPlayedSongs">
+            <td><b>{{song.Name}}</b></td>
+            <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+            <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+            <td>{{song['Play Count']}}</td>
+        </tr>
+    </tbody>
+    </table>
+    <h3><a [routerLink]="['/top-played']">Top Played page</a></h3>
+</div>
+
+<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><a [routerLink]="['/genre', genre.key]">{{genre.key}}</a></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><a [routerLink]="['/genre', genre.key]">{{genre.key}}</a></td>
+            <td>{{genre.doc_count}}</td>
+        </tr>
+    </tbody>
+    </table>
+</div>
+</div>

dashboard/src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,116 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ElsService } from './../els.service';
+import { Song } from './../model/song';
+import { Bucket } from './../model/bucket';
+import { Album } from './../model/album';
+import { Artist } from './../model/artist';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
+})
+
+export class DashboardComponent implements OnInit {
+  totalTime = 0;
+  totalSize = 0;
+  trackCountSong = 0;
+  trackCountArtist = 0;
+  trackCountAlbum = 0;
+  neverListenSong = 0;
+
+  albumArtistCount = 0;
+
+  topGenres: Bucket[] = [];
+  bottomGenres: Bucket[] = [];
+
+  mostPlayedSongs: Song[] = [];
+
+  lastAddedAlbums: Bucket[] = [];
+  albumArtists = [];
+
+  constructor(private elsService: ElsService) { }
+
+  ngOnInit(): void {
+    this.elsService.getTime().then(result => {
+      this.totalTime = result;
+    });
+
+    this.elsService.getSize().then(result => this.totalSize = result);
+
+    this.elsService.getCountSong(ElsService.SONG_INDEX_NAME)
+      .then(result => this.trackCountSong = result);
+    // TODO: Unused information
+    // this.elsService.getCountSong(ElsService.ARTIST_INDEX_NAME)
+      // .then(result => this.trackCountArtist = result);
+    // this.elsService.getCountSong(ElsService.ALBUM_INDEX_NAME)
+      // .then(result => this.trackCountAlbum = result);
+
+    this.elsService.getCountNeverListenSong()
+      .then(result => this.neverListenSong = result);
+
+    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));
+
+    const lastAddedAlbumsTemp: Bucket[] = [];
+    const BreakException = {};
+    this.elsService.getLastAddedAlbums(6).subscribe(buckets => {
+      buckets.forEach(bucket => {
+        // console.log(bucket);
+
+        if (lastAddedAlbumsTemp.length === 0) {
+          lastAddedAlbumsTemp.push(bucket);
+        } else {
+          let found = false;
+          lastAddedAlbumsTemp.forEach(element => {
+            if (element.key === bucket.key) {
+              element.doc_count += bucket.doc_count;
+              found = true;
+            }
+          });
+          if (!found) {
+            lastAddedAlbumsTemp.push(bucket);
+          }
+        }
+      });
+      // console.log("alors");
+      // console.log(lastAddedAlbumsTemp);
+
+      this.lastAddedAlbums = lastAddedAlbumsTemp;
+      this.lastAddedAlbums.forEach(bucket => this.getArtistName(bucket));
+    });
+  }
+
+  private getArtistName(albumBucket: Bucket) {
+    // For each bucket.key (album name), search artist.
+    // Use track count to compare
+    this.elsService.getArtistFromAlbumName(albumBucket.key).subscribe(albums => {
+      // Identification of the good album
+      let goodAlbum;
+      if (albums.length > 1) {
+        // More than one result for an album name: search good by track count
+        albums.forEach(album => {
+          if (album['Track Count'] === albumBucket.doc_count) {
+            goodAlbum = album;
+          }
+        });
+      } else {
+        // Just one result for album name
+        goodAlbum = albums[0];
+      }
+
+      this.albumArtists[goodAlbum.Name] = goodAlbum['Album Artist'] ? goodAlbum['Album Artist'].toString() : goodAlbum.Artist.toString();
+
+      // If an album with multiple artist doesn't have 'Album Artist' field - this case should not happen
+      if (this.albumArtists[goodAlbum.Name].length > 50) {
+        this.albumArtists[goodAlbum.Name] = this.albumArtists[goodAlbum.Name].substring(0, 50) + '...';
+      }
+    });
+  }
+}

dashboard/src/app/els.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ElsService } from './els.service';
+
+describe('ElsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ElsService]
+    });
+  });
+
+  it('should be created', inject([ElsService], (service: ElsService) => {
+    expect(service).toBeTruthy();
+  }));
+});

dashboard/src/app/els.service.ts

@@ -0,0 +1,472 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http'
+
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+import { Song } from './model/song';
+import { Album } from './model/album';
+import { Artist } from './model/artist';
+import { Bucket } from './model/bucket';
+
+@Injectable()
+export class ElsService {
+  public static readonly DEFAULT_SIZE: number = 50;
+  public static readonly SONG_INDEX_NAME = '/itunes-songs';
+  public static readonly ARTIST_INDEX_NAME = '/itunes-artists';
+  public static readonly ALBUM_INDEX_NAME = '/itunes-albums';
+
+  private static readonly ACTION_SEARCH = '/_search';
+  private static readonly ACTION_COUNT = '/_count';
+
+  private elsUrl = 'http://localhost:9200';
+  private headers = new HttpHeaders({'Content-Type': 'application/json'});
+
+  constructor(private http: HttpClient) { }
+
+  getTime(): Promise<number> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              aggs: {
+                sum_time: {
+                  sum: { field: 'Total Time'}
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.aggregations.sum_time.value as number)
+      .catch(error => this.handleError(error, 'getTime()'));
+  }
+
+  getSize(): Promise<number> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              aggs: {
+                sum_time: {
+                  sum: { field: 'Size' }
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.aggregations.sum_time.value as number)
+      .catch(error => this.handleError(error, 'getSize()'));
+  }
+
+  getCountSong(index: string): Promise<number> {
+    return this.http
+      .get<any>(this.elsUrl + index + ElsService.ACTION_COUNT)
+      .toPromise()
+      .then(res => res.count as number)
+      .catch(error => this.handleError(error, 'getCountSong(' + index + ')'));
+  }
+
+  getCountNeverListenSong(): Promise<number> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
+            JSON.stringify({
+              'query': {
+                'bool': {
+                  'must_not': {
+                    'exists': { 'field': 'Play Count'}
+                  }
+                }
+              }
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.count as number)
+      .catch(error => this.handleError(error, 'getCountNeverListenSong()'));
+  }
+
+  getMostPlayedTrack(): Observable<Song[]> {
+    // Thank to http://chariotsolutions.com/blog/post/angular2-observables-http-separating-services-components/
+    // for the map part
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'sort': [ {
+                'Play Count': {
+                  'order': 'desc'
+                }
+              } ],
+              'size': 5
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToSongs(res)),
+        catchError(error => this.handleError(error, 'getMostPlayedTrack()'))
+      );
+  }
+
+  /**
+   * A basic get of albums ordered by 'Play Count' field.
+   */
+  getMostPlayedAlbumNaive(): Promise<Album[]> {
+    return this.http
+      .get(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH + '?sort=Play Count:desc&size=20')
+      .toPromise()
+      .then(res => this.responseToAlbums(res))
+      .catch(error => this.handleError(error, 'getMostPlayedAlbumNaive'));
+    // TODO Excluse 'Divers' + compilation
+  }
+
+  /**
+   * More complicated query to calculate Avg. Play and get  top ordrered by this results.
+   * Result is in '.hits.hits[].sort' field - not casted by conversion method
+   */
+  getMostPlayedAlbum(): Observable<Album[]> {
+    return this.http
+      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'sort': [
+                {
+                '_script': {
+                  'type': 'number',
+                  'script': {
+                    'inline': 'doc[\'Play Count\'].value / doc[\'Track Count\'].value'
+                  },
+                  'order': 'desc'
+                }
+              }
+            ]
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToAlbums(res)),
+        catchError(error => this.handleError(error, 'getMostPlayedAlbum()'))
+      );
+  }
+
+  getMostPlayedArtistNaive(): Promise<Artist[]> {
+    return this.http
+      .get(this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH + '?sort=Play Count:desc&size=20')
+      .toPromise()
+      .then(res => this.responseToAlbums(res))
+      .catch(error => this.handleError(error, 'getMostPlayedArtistNaive'));
+    // TODO Excluse 'Divers' + compilation
+  }
+
+  getMostPlayedArtist(): Observable<Artist[]> {
+    return this.http
+      .post(this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'sort': [
+                {
+                '_script': {
+                  'type': 'number',
+                  'script': {
+                    'inline': 'doc[\'Play Count\'].value / doc[\'Track Count\'].value'
+                  },
+                  'order': 'desc'
+                }
+              },
+            ],
+            'size': 100
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToArtists(res)),
+        catchError(error => this.handleError(error, 'getMostPlayedArtist()'))
+      );
+  }
+
+  getAlbumSongs(albumName: string, from: number = 0): Observable<Song[]> {
+    console.info('getAlbumSongs- Album name: ' + albumName + ' - from: ' + from);
+    return this.http
+      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Album': albumName }
+              },
+              'size': ElsService.DEFAULT_SIZE,
+              'from': from
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToSongs(res)),
+        catchError(error => this.handleError(error, 'getAlbumSongs(' + albumName + ',' + from + ')'))
+      );
+  }
+
+  getGenreSongs(genreName: string, from: number = 0): Observable<Song[]> {
+    console.info('getGenreSongs- Genre name: ' + genreName + ' - from: ' + from);
+    // TODO Code repetition => to refactor
+    return this.http
+      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Genre': genreName }
+              },
+              'size': ElsService.DEFAULT_SIZE,
+              'from': from
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToSongs(res)),
+        catchError(error => this.handleError(error, 'getAlbumSongs(' + genreName + ',' + from + ')'))
+      );
+  }
+
+  getArtistSongs(artistName: string, from: number = 0): Observable<Song[]> {
+    console.info('getArtistSongs- Artist name: ' + artistName + ' - from: ' + from);
+    return this.http
+      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                  'bool': {
+                      'should': [
+                          {'match_phrase' : { 'Album Artist' : artistName }},
+                          {'match_phrase' : { 'Artist' : artistName }}
+                      ]
+                  }
+              },
+              'size': ElsService.DEFAULT_SIZE,
+              'from': from
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToSongs(res)),
+        catchError(error => this.handleError(error, 'getArtistSongs(' + artistName + ',' + from + ')'))
+      );
+  }
+
+  getAlbum(albumName: string): Observable<Album> {
+    // TODO Why this is used on album pages?
+    // When it's commented, the album information goes up correctly  */
+    return this.http
+      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Album': albumName }
+              },
+              'size': ElsService.DEFAULT_SIZE
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToOneTypedResult<Album>(res, albumName)),
+        catchError(error => this.handleError(error, 'getAlbum(' + albumName + ')'))
+      );
+  }
+
+  getArtist(artistName: string): Observable<Artist> {
+    return this.http
+      .post(this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                'match_phrase': { 'Artist': artistName }
+              },
+              'size': ElsService.DEFAULT_SIZE
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToOneTypedResult<Artist>(res, artistName)),
+        catchError(error => this.handleError(error, 'getArtist(' + artistName + ')'))
+      );
+  }
+
+  getGenres(ordering: string = 'desc'): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'aggs' : {
+                'genres' : {
+                  'terms' : {
+                    'field' : 'Genre',
+                    'size' : 10,
+                    'missing': 'N/A',
+                    'order': { '_count' : ordering }
+                  }
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseAggregationToBucket(res, 'genres')),
+        catchError(error => this.handleError(error, 'getGenres(' + ordering + ')'))
+      );
+  }
+
+//   getGenreCount(): Observable<number> {
+//     return this.http
+//       .post<any>(this.elsUrl + 'song' + ElsService.ACTION_SEARCH,
+//             JSON.stringify({
+//               'aggs' : {
+//                 'genres' : {
+//                   'cardinality' : {
+//                     'field' : 'Genre.original',
+//                     'missing': 'N/A',
+//                   }
+//                 }
+//               },
+//               'size': 0
+//             }), {headers: this.headers})
+//       .pipe(
+//         map(res => res.aggregations.genres.value)
+//       );
+//   }
+
+  getLastAddedAlbums(month: number): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+              'range' : {
+                  'Date Added' : {
+                      'gte' : 'now-' + month + 'M/d',
+                      'lte' : 'now/d'
+                  }
+              }
+          },
+              'size': 0,
+              'aggs': {
+                'date' : {
+                  'terms': {
+                    'field' : 'Date Added',
+                    'order': { '_term': 'desc' },
+                    'size': 20
+                  },
+                  'aggs': {
+                    'album': {
+                      'terms': {
+                        'field': 'Album.raw'
+                      }
+                    }
+                  }
+                }
+              }
+            }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseSubAggregationToBucket(res, 'date')),
+        catchError(error => this.handleError(error, 'getLastAddedAlbums(' + month + ')' ))
+      );
+      // TODO Take in consideration "sum_other_doc_count"
+  }
+
+  getArtistFromAlbumName(albumname: string): Observable<Album[]> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              'query': {
+                  'match_phrase' : {
+                      'Album' : albumname
+                  }
+              }
+          }), {headers: this.headers})
+      .pipe(
+        map(res => res.hits.hits),
+        map((hits: Array<any>) => {
+          // TODO Use a method (duplicated code ?)
+          const result: Array<Album> = [];
+          hits.forEach((hit) => {
+            result.push(hit._source);
+          });
+          return result;
+        }),
+        catchError(error => this.handleError(error, 'getArtistFromAlbumName' + albumname + ')'))
+      );
+  }
+
+  getCountArtistSong(artistName: string): Observable<number> {
+    console.log('artistname: ' + artistName);
+    return this.http
+    .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
+          JSON.stringify({
+            'query': {
+                'bool': {
+                    'should': [
+                        {'match_phrase' : { 'Album Artist' : artistName }},
+                        {'match_phrase' : { 'Artist' : artistName }}
+                    ]
+                }
+            }
+          }), {headers: this.headers})
+    .pipe(
+      map(res => res.count as number),
+      catchError(error => this.handleError(error, 'getCountArtistSong' + artistName + ')'))
+    );
+  }
+
+  /** Process a result to return just one result.
+   * Used to get an album or an artist.
+   * Take a name to put in console output if no result or more than one result.
+   *
+   * @param res Response to process
+   * @param name The searched name - for console output
+   */
+  private responseToOneTypedResult<T>(res: any, name: string): T {
+    const hits = res.hits.hits;
+
+    if (hits.length < 1) {
+      console.info('No result found for name: "' + name);
+      return undefined;
+    }
+    if (hits.length > 1) {
+      // TODO Cumul results (for album)
+      console.error('More than one result for name: "' + name + '". Found (' + hits.length + '), return the first.');
+    }
+    return hits[0]._source;
+  }
+
+  /** Process a response to a array of songs.
+   *
+   * @param res Response to process
+   */
+  private responseToSongs(res: any): Song[] {
+    const result: Array<Song> = [];
+    res.hits.hits.forEach((hit) => {
+      result.push(hit._source);
+    });
+    return result;
+  }
+
+  /** Process a response to a array of songs.
+   *
+   * @param res Response to process
+   */
+  private responseToAlbums(res: any): Album[] {
+    const result: Array<Album> = [];
+    res.hits.hits.forEach((hit) => {
+      result.push(hit._source);
+    });
+    return result;
+  }
+
+  /** Process a response to a array of songs.
+   *
+   * @param res Response to process
+   */
+  private responseToArtists(res: any): Artist[] {
+    const result: Array<Artist> = [];
+    res.hits.hits.forEach((hit) => {
+      result.push(hit._source);
+    });
+    return result;
+  }
+
+
+  /** Process an aggregation response to an array of Bucket.
+   *
+   * @param res Response to process
+   * @param name Name of aggregation
+   */
+  private responseAggregationToBucket(res: any, name: string): Bucket[] {
+    const result: Array<Bucket> = [];
+    res.aggregations[name].buckets.forEach((bucket) => {
+      result.push(bucket);
+    });
+    return result;
+  }
+
+  private responseSubAggregationToBucket(res: any, name: string): Bucket[] {
+    const result: Array<Bucket> = [];
+    res.aggregations[name].buckets.forEach((bucket) => {
+      bucket['album'].buckets.forEach((subBucket) => {
+        result.push(subBucket);
+      });
+    });
+    return result;
+  }
+
+  private handleError(error: any, origin: string): Promise<any> {
+    console.error('An error occurred!');
+    console.error('Origin function: ', origin);
+    console.error('An error occurred!', error); // for demo purposes only
+    console.error(error); // for demo purposes only
+    return Promise.reject(error.message || error);
+  }
+}

dashboard/src/app/genre/genre.component.html

@@ -0,0 +1,5 @@
+<div class="container">
+  <h1>{{genreName}}</h1>
+
+  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
+</div>

dashboard/src/app/genre/genre.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GenreComponent } from './genre.component';
+
+describe('GenreComponent', () => {
+  let component: GenreComponent;
+  let fixture: ComponentFixture<GenreComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GenreComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GenreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/genre/genre.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+import { ElsService } from '../els.service';
+import { SongTableComponent } from '../song-table/song-table.component';
+
+import { Song } from '../model/song';
+
+@Component({
+  selector: 'app-genre',
+  templateUrl: './genre.component.html',
+  styleUrls: ['./genre.component.css']
+})
+export class GenreComponent implements OnInit {
+  @ViewChild(SongTableComponent) songtable: SongTableComponent;
+  genreName = '';
+  songs: Array<Song> = [];
+
+  constructor(
+    private elsService: ElsService,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+    this.route.params
+      .subscribe((params: Params) => this.genreName = params['name']);
+
+    this.loadSongs();
+  }
+
+  loadSongs(): any {
+    this.elsService.getGenreSongs(this.genreName, this.songs.length).subscribe(
+      data => {
+        // this.moreDataAvailable = data.length === ElsService.DEFAULT_SIZE;
+
+        // Erase song array with result for first load, then add elements one by one
+        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
+        if (this.songs.length === 0) {
+          this.songs = data;
+        } else {
+          data.forEach(song => {
+            this.songtable.setSortable(true);
+            this.songs.push(song);
+          });
+        }
+      }
+    );
+  }
+
+}

dashboard/src/app/last-added/last-added.component.html

@@ -0,0 +1,2 @@
+<div class="container">
+ </div>

dashboard/src/app/last-added/last-added.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LastAddedComponent } from './last-added.component';
+
+describe('LastAddedComponent', () => {
+  let component: LastAddedComponent;
+  let fixture: ComponentFixture<LastAddedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LastAddedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LastAddedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/last-added/last-added.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-last-added',
+  templateUrl: './last-added.component.html',
+  styleUrls: ['./last-added.component.css']
+})
+export class LastAddedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

dashboard/src/app/model/album.ts

@@ -0,0 +1,14 @@
+export class Album {
+    Name: string;
+    Album: string;
+    Artist: Array<string>;
+    Rating: number;
+    Genre: Array<string>;
+    'Track Count': number;
+    'Album Rating': number;
+    'Persistent ID': string;
+    'Album Rating Computed':  boolean;
+    'Play Count': number;
+    'Total Time': number;
+    'Album Artist': string;
+}

dashboard/src/app/model/artist.ts

@@ -0,0 +1,10 @@
+export class Artist {
+    Name: string;
+    Album: string[];
+    Artist: string;
+    Rating: number;
+    Genre: Array<string>;
+    'Track Count': number;
+    'Persistent ID': string;
+    'Play Count': number;
+}

dashboard/src/app/model/bucket.ts

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

dashboard/src/app/model/song.ts

@@ -0,0 +1,8 @@
+export class Song {
+    Name: string;
+    Artist: string;
+    'Play Count': number;
+    Album: string;
+    'Track Number': number; // TODO Default property
+    'Disc Number': number;
+}

dashboard/src/app/pipes/convert-more-exact.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ConvertMoreExactPipe } from './convert-more-exact.pipe';
+
+describe('ConvertMoreExactPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ConvertMoreExactPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/pipes/convert-more-exact.pipe.ts

@@ -0,0 +1,56 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'convertMoreExact'
+})
+export class ConvertMoreExactPipe implements PipeTransform {
+
+  /**
+   * Convert milliseconds to rounded time e.g. ~84d
+   * @param timeMs time in milliseconds
+   */
+  transform(timeMs: number): string  {
+    let x = timeMs / 1000;
+
+    const seconds = Math.floor(x % 60);
+    x /= 60;
+
+    let minutes = 0;
+    if (x > 1) { minutes = Math.floor(x % 60); }
+    x /= 60;
+
+    let hours = 0;
+    if (x > 1) { hours = Math.floor(x % 24); }
+    // TODO Enable/disable day
+    x /= 24;
+    const days = Math.floor(x);
+
+    // Final string
+    let ret = '~';
+    if (days > 0) {
+      return '~' + (days + (hours > 12 ? 1 : 0)) + 'd';
+    }
+    if (hours > 0) {
+      if (minutes > 45) {
+        ret += (hours + 1) + 'h';
+      } else if (minutes < 15) {
+        ret += hours + 'h';
+      } else {
+        ret += hours + 'h 1/2';
+      }
+      return ret;
+    }
+    if (minutes > 0) {
+      ret += (minutes + (seconds > 35 ? 1 : 0)) + 'min';
+      return ret;
+    }
+    if (seconds > 0) {
+      if (seconds > 35) {
+        return '~1min';
+      } else {
+        return seconds + 's';
+      }
+    }
+  }
+
+}

dashboard/src/app/pipes/convert-size-to-string.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ConvertSizeToStringPipe } from './convert-size-to-string.pipe';
+
+describe('ConvertSizeToStringPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ConvertSizeToStringPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/pipes/convert-size-to-string.pipe.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'convertSizeToString'
+})
+export class ConvertSizeToStringPipe implements PipeTransform {
+
+  /**
+   * Convert size to human readable size
+   * @param size size in byte
+   */
+  transform(size: number): any {
+    const units = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+
+    if (size === 0) {
+      return '0 Byte';
+    }
+
+    const i = Math.floor(Math.log(size) / Math.log(1024));
+    let calcSize = size / Math.pow(1024, i);
+    calcSize = Math.round(calcSize * 100) / 100;
+
+    return calcSize + ' ' + units[i];
+  }
+
+}

dashboard/src/app/pipes/convertms.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ConvertMsPipe } from './convertms.pipe';
+
+describe('ConvertMsPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ConvertMsPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/pipes/convertms.pipe.ts

@@ -0,0 +1,38 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'convertMs'
+})
+export class ConvertMsPipe implements PipeTransform {
+
+  /**
+   * Convert milliseconds to "readable" duration e.g. 1d21h35m24s
+   * @param timeMs time in milliseconds
+   */
+  transform(timeMs: number): string {
+    let x = timeMs / 1000;
+
+    const seconds = Math.floor(x % 60);
+    x /= 60;
+
+    let minutes = 0;
+    if (x > 1) { minutes = Math.floor(x % 60); }
+    x /= 60;
+
+    let hours = 0;
+    if (x > 1) { hours = Math.floor(x % 24); }
+    // TODO Enable/disable day
+    x /= 24;
+    const days = Math.floor(x);
+
+    // Final string
+    let ret = '';
+    if (days > 0) { ret += parseInt('0' + days) + 'd'; }
+    if (hours > 0) { ret += ('0' + hours).slice(-2) + 'h'; }
+    if (minutes > 0) { ret += ('0' + minutes).slice(-2) + 'm'; }
+    if (seconds > 0) { ret += ('0' + seconds).slice(-2) + 's'; }
+
+    return ret;
+    // return ('0' + days).slice(-2) + ':' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
+  }
+}

dashboard/src/app/pipes/round.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { RoundPipe } from './round.pipe';
+
+describe('RoundPipe', () => {
+  it('create an instance', () => {
+    const pipe = new RoundPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/pipes/round.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'round'
+})
+export class RoundPipe implements PipeTransform {
+
+  /**
+   * Round a value
+   * @param value value to round
+   * @param precision number of numbers to keep after coma - 1 if unspecified
+   */
+  transform(value: number, precision?: number): number {
+    if (precision === undefined) {
+      precision = 1;
+    }
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+  }
+
+}

dashboard/src/app/pipes/sort-by.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SortByPipe } from './sort-by.pipe';
+
+describe('SortByPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SortByPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/pipes/sort-by.pipe.ts

@@ -0,0 +1,40 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sortBy'
+})
+export class SortByPipe implements PipeTransform {
+
+  /**
+   * Sort an array by multiple elements.
+   *
+   * Example to sort an array respectively by Year, Album, Disc Number, etc.
+   * Typescript usage:
+   * <pre>
+   * new SortByPipe().transform(this.songs, 'Year', 'Album', 'Disc Number', 'Track Number', 'Play Count');
+   * </pre>
+   * In HTML usage:
+   * <pre>
+   * <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Disc Number':'Track Number'">
+   * </pre>
+   *
+   * @param array array to sort
+   * @param args elements used to sort in oder
+   */
+  transform(array: Array<any>, ...args: any[]): Array<any> {
+    array.sort((a: any, b: any) => {
+      for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+
+        if (a[arg] === undefined && b[arg] !== undefined) { return -1; }
+        if (a[arg] !== undefined && b[arg] === undefined) { return 1; }
+
+        if (a[arg] < b[arg]) { return -1; }
+        if (a[arg] > b[arg]) { return 1; }
+      }
+      return 0;
+    });
+    return array;
+  }
+
+}

dashboard/src/app/song-table/song-table.component.html

@@ -0,0 +1,64 @@
+<table class="table table-striped" (window:scroll)="onScroll($event)">
+  <thead>
+    <tr>
+      <th></th>
+      <th>Name</th>
+      <th>Album</th>
+      <th>Year</th>
+      <th>Artist</th>
+      <th>Album Artist</th>
+      <th>Play Count</th>
+      <th>Genre</th>
+      <th>Bit Rate</th>
+      <th>Rating</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Disc Number':'Track Number'">
+      <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
+      <td>{{song.Name}}</td>
+      <td>
+        <a [routerLink]="['/album', song.Album]">{{song.Album}}</a>
+      </td>
+      <td>{{song.Year}}</td>
+      <td>
+        <a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a>
+      </td>
+      <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
+      <td>{{song['Play Count']}}</td>
+      <td>
+        <a [routerLink]="['/genre', song.Genre]">{{song.Genre}}</a>
+      </td>
+      <td [title]="song['Bit Rate']">
+        <span [class]="'signal signal-' + roundBitRate(song['Bit Rate'])"></span>
+      </td>
+      <td *ngIf="!song['Rating Computed']" [title]="'Rating: ' + song.Rating" class="star">
+        <span *ngIf="song.Rating >= 20" class="glyphicon glyphicon-star"></span>
+        <span *ngIf="song.Rating >= 40" class="glyphicon glyphicon-star"></span>
+        <span *ngIf="song.Rating >= 60" class="glyphicon glyphicon-star"></span>
+        <span *ngIf="song.Rating >= 80" class="glyphicon glyphicon-star"></span>
+        <span *ngIf="song.Rating >= 100" class="glyphicon glyphicon-star"></span>
+      </td>
+      <td *ngIf="song['Rating Computed']" [title]="'Computed Rating: ' + song.Rating" class="star">
+        <span *ngIf="song.Rating >= 20" class="glyphicon glyphicon-star-empty"></span>
+        <span *ngIf="song.Rating >= 40" class="glyphicon glyphicon-star-empty"></span>
+        <span *ngIf="song.Rating >= 60" class="glyphicon glyphicon-star-empty"></span>
+        <span *ngIf="song.Rating >= 80" class="glyphicon glyphicon-star-empty"></span>
+        <span *ngIf="song.Rating >= 100" class="glyphicon glyphicon-star-empty"></span>
+      </td>
+      <td *ngIf="song.Loved" class="loved">
+        <span class="glyphicon glyphicon-heart heart"></span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- Go to Top Button-->
+<button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="bottomReached" aria-label="Top" (click)="scrollTop()"
+  title="Go back to Top!">
+  <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
+</button>
+<button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="sortable" aria-label="Top" (click)="sort()"
+  title="Sort by Album & Track Number">
+  <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
+</button>

dashboard/src/app/song-table/song-table.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SongTableComponent } from './song-table.component';
+
+describe('SongTableComponent', () => {
+  let component: SongTableComponent;
+  let fixture: ComponentFixture<SongTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SongTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SongTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/song-table/song-table.component.ts

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Song } from './../model/song';
+import { SortByPipe } from './../pipes/sort-by.pipe';
+
+@Component({
+  selector: 'app-song-table',
+  templateUrl: './song-table.component.html',
+  styleUrls: ['./song-table.component.css']
+})
+export class SongTableComponent {
+  @Input() songs: Array<Song> = [];
+  @Output() private atBottom = new EventEmitter();
+
+  // To activate button in interface var
+  bottomReached = false;
+  sortable: boolean;
+
+  constructor() { }
+
+  /**
+   * Handle scroll:
+   * - load data if at bottom of screen (if needed)
+   * - hide/show "go to top" button
+   *
+   * @param event scroll event
+   */
+  private onScroll(event: any) {
+    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+      this.atBottom.emit();
+    }
+
+    // Show/hide 'at top' button
+    if (window.scrollY > window.innerHeight) {
+      this.bottomReached = true;
+    }
+
+    if (window.scrollY === 0) {
+      this.bottomReached = false;
+    }
+  }
+
+  scrollTop(): void {
+    window.scrollTo(0, 0);
+  }
+
+  roundBitRate(bitRate: number) {
+    return Math.round(bitRate / 64);
+  }
+
+  sort(): void {
+    this.songs = new SortByPipe().transform(this.songs, 'Year', 'Album', 'Disc Number', 'Track Number', 'Play Count');
+    this.sortable = false;
+  }
+
+  setSortable(sortable: boolean) {
+    this.sortable = sortable;
+  }
+}

dashboard/src/app/top-played/top-played.component.html

@@ -0,0 +1,111 @@
+<div class="container">
+<div class="col-md-12">
+  <h3>Top Played Album (Naive Way)</h3>
+  <div class="alert alert-info">
+    <strong>Caution:</strong> In this list, albums with more than 10 artists are ignored.
+  </div>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Album</th>
+        <th>Artist Name</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let album of mostPlayedAlbumsNaive">
+        <td>
+          <b>{{album.Name}}</b>
+        </td>
+        <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
+        <td>{{album['Track Count']}}</td>
+        <td>{{album['Play Count']}}</td>
+        <td>{{album['Play Count'] / album['Track Count'] | round}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="col-md-12">
+  <h3>Top Played Album (avg. play way)</h3>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Album</th>
+        <th>Artist Name</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let album of mostPlayedAlbums">
+        <td>
+          <b>{{album.Name}}</b>
+        </td>
+        <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
+        <td>{{album['Track Count']}}</td>
+        <td>{{album['Play Count']}}</td>
+        <td>{{album['Play Count'] / album['Track Count'] | round}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="col-md-12">
+  <h3>Top Played Artist (Naive Way)</h3>
+  <!-- <div class="alert alert-info"> -->
+  <!-- <strong>Caution:</strong> In this list, artist with more than 10 artists are ignored. -->
+  <!-- </div> -->
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Artist</th>
+        <th>Album Count</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let artist of mostPlayedArtistsNaive">
+        <td>
+          <b>{{artist.Name}}</b>
+        </td>
+        <td>{{artist.Album.length}}</td>
+        <td>{{artist['Track Count']}}</td>
+        <td>{{artist['Play Count']}}</td>
+        <td>{{artist['Play Count'] / artist['Track Count'] | round}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="col-md-12">
+  <h3>Top Played Artist (avg. play way)</h3>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Artist</th>
+        <th>Album Count</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let artist of mostPlayedArtists">
+        <td>
+          <b>{{artist.Name}}</b>
+        </td>
+        <td>{{artist.Album.length}}</td>
+        <td>{{artist['Track Count']}}</td>
+        <td>{{artist['Play Count']}}</td>
+        <td>{{artist['Play Count'] / artist['Track Count'] | round}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+</div>

dashboard/src/app/top-played/top-played.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopPlayedComponent } from './top-played.component';
+
+describe('TopPlayedComponent', () => {
+  let component: TopPlayedComponent;
+  let fixture: ComponentFixture<TopPlayedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TopPlayedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopPlayedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/top-played/top-played.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ElsService } from '../els.service';
+import { Album } from '../model/album';
+import { Artist } from '../model/artist';
+
+@Component({
+  selector: 'app-top-played',
+  templateUrl: './top-played.component.html',
+  styleUrls: ['./top-played.component.css']
+})
+export class TopPlayedComponent implements OnInit {
+  mostPlayedAlbumsNaive: Album[] = [];
+  mostPlayedAlbums: Album[] = [];
+  mostPlayedArtistsNaive: Artist[] = [];
+  mostPlayedArtists: Artist[] = [];
+
+  constructor(private elsService: ElsService) { }
+
+  ngOnInit() {
+    this.elsService.getMostPlayedAlbumNaive()
+    .then(result => {
+      result.forEach(album => {
+        if (album.Artist.length <= 10) {
+          this.mostPlayedAlbumsNaive.push(album);
+        }
+      });
+
+      this.mostPlayedAlbumsNaive.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
+    });
+
+    this.elsService.getMostPlayedAlbum().subscribe(result => {
+      this.mostPlayedAlbums = result;
+
+      this.mostPlayedAlbums.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
+      // TODO Load more! (Use a )
+    });
+
+    this.elsService.getMostPlayedArtistNaive()
+    .then(result => {
+      this.mostPlayedArtistsNaive = result;
+
+      this.mostPlayedArtistsNaive.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
+    });
+
+    this.elsService.getMostPlayedArtist().subscribe(result => {
+      result.forEach(artist => {
+        if (artist['Track Count'] > 10) {
+          this.mostPlayedArtists.push(artist);
+        }
+      });
+
+      this.mostPlayedArtists.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
+    });
+  }
+
+  sortByAveragePlay(a: any, b: any) {
+    if ((a['Play Count'] / a['Track Count']) < (b['Play Count'] / b['Track Count'])) {
+      return 1;
+    } else {
+      return -1;
+    }
+  }
+
+}

dashboard/src/assets/icons_signal/carre-high/0.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="45" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="35" display="inline" width="10" height="10"></rect><rect x="25" y="25" display="inline" width="10" height="10"></rect><rect x="55" y="35" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="35" y="5" display="inline" width="10" height="10"></rect><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="15" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="85" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="75" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="5" display="inline" width="10" height="10"></rect></g><g><path d="M5.675,93.515h9V61.651h-9V93.515z M6.675,62.651h7v29.864h-7V62.651z"></path><path d="M18.175,93.515h9V52.803h-9V93.515z M19.175,53.803h7v38.712h-7V53.803z"></path><path d="M30.675,93.515h9v-47.06h-9V93.515z M31.675,47.455h7v45.06h-7V47.455z"></path><path d="M43.175,93.515h9V37.607h-9V93.515z M44.175,38.607h7v53.908h-7V38.607z"></path><path d="M55.675,93.515h9V28.759h-9V93.515z M56.675,29.759h7v62.756h-7V29.759z"></path><path d="M68.175,17.411v76.104h9V17.411H68.175z M76.175,92.515h-7V18.411h7V92.515z"></path></g></svg>

dashboard/src/assets/icons_signal/carre-high/1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="25" y="25" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="75" display="inline" width="10" height="10"></rect><rect x="35" y="15" display="inline" width="10" height="10"></rect><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="55" y="15" display="inline" width="10" height="10"></rect><rect x="5" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="55" display="inline" width="10" height="10"></rect><rect x="15" y="45" display="inline" width="10" height="10"></rect><rect x="25" y="35" display="inline" width="10" height="10"></rect><rect x="65" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="45" display="inline" width="10" height="10"></rect><rect x="75" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="65" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="55" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="75" display="inline" width="10" height="10"></rect></g><g><polygon points="5.675,93.515 14.675,93.515 14.675,93.015 14.675,62.152 14.675,61.652 5.675,61.652  "></polygon><path d="M18.175,93.515h9V52.804h-9V93.515z M19.175,53.804h7v38.711h-7V53.804z"></path><path d="M30.675,93.515h9v-47.06h-9V93.515z M31.675,47.456h7v45.06h-7V47.456z"></path><path d="M43.175,93.515h9V37.607h-9V93.515z M44.175,38.607h7v53.908h-7V38.607z"></path><path d="M55.675,93.515h9V28.759h-9V93.515z M56.675,29.759h7v62.756h-7V29.759z"></path><path d="M68.175,93.515h9V17.412h-9V93.515z M69.175,18.412h7v74.104h-7V18.412z"></path></g></svg>

dashboard/src/assets/icons_signal/carre-high/2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="85" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="35" display="inline" width="10" height="10"></rect><rect x="55" y="45" display="inline" width="10" height="10"></rect><rect x="45" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="55" display="inline" width="10" height="10"></rect><rect x="35" y="65" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="65" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="15" y="45" display="inline" width="10" height="10"></rect><rect x="25" y="45" display="inline" width="10" height="10"></rect></g><g><polygon points="5.675,93.516 14.675,93.516 14.675,93.016 14.675,62.151 14.675,61.651 5.675,61.651  "></polygon><polygon points="18.175,93.516 27.175,93.516 27.175,93.016 27.175,53.304 27.175,52.804 18.175,52.804  "></polygon><path d="M30.675,93.516h9v-47.06h-9V93.516z M31.675,47.456h7v45.06h-7V47.456z"></path><path d="M43.175,93.516h9V37.607h-9V93.516z M44.175,38.607h7v53.908h-7V38.607z"></path><path d="M55.675,93.516h9V28.76h-9V93.516z M56.675,29.76h7v62.756h-7V29.76z"></path><path d="M68.175,93.516h9V17.412h-9V93.516z M69.175,18.412h7v74.104h-7V18.412z"></path></g></svg>

dashboard/src/assets/icons_signal/carre-high/3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="45" y="45" display="inline" width="10" height="10"></rect><rect x="35" y="5" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="25" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="15" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="85" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="75" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="5" display="inline" width="10" height="10"></rect></g><g><polygon points="5.427,93.516 14.427,93.516 14.427,93.016 14.427,62.151 14.427,61.651 5.427,61.651  "></polygon><polygon points="17.927,93.516 26.927,93.516 26.927,93.016 26.927,53.304 26.927,52.804 17.927,52.804  "></polygon><polygon points="30.427,93.516 39.427,93.516 39.427,93.016 39.427,46.956 39.427,46.456 30.427,46.456  "></polygon><path d="M42.927,93.516h9V37.607h-9V93.516z M43.927,38.607h7v53.908h-7V38.607z"></path><path d="M55.427,93.516h9V28.76h-9V93.516z M56.427,29.76h7v62.756h-7V29.76z"></path><path d="M67.927,93.516h9V17.412h-9V93.516z M68.927,18.412h7v74.104h-7V18.412z"></path></g></svg>

dashboard/src/assets/icons_signal/carre-high/4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="35" y="15" display="inline" width="10" height="10"></rect><rect x="45" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="15" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="85" y="25" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="55" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="75" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="5" y="65" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="5" y="25" display="inline" width="10" height="10"></rect></g><g><polygon points="4,94.5 13,94.5 13,94 13,63.136 13,62.636 4,62.636  "></polygon><polygon points="16.5,94.5 25.5,94.5 25.5,94 25.5,54.288 25.5,53.788 16.5,53.788  "></polygon><polygon points="29,94.5 38,94.5 38,94 38,47.94 38,47.44 29,47.44  "></polygon><polygon points="41.5,94.5 50.5,94.5 50.5,94 50.5,39.092 50.5,38.592 41.5,38.592  "></polygon><path d="M54,94.5h9V29.744h-9V94.5z M55,30.744h7V93.5h-7V30.744z"></path><path d="M66.5,94.5h9V18.396h-9V94.5z M67.5,19.396h7V93.5h-7V19.396z"></path></g></svg>

dashboard/src/assets/icons_signal/carre-high/5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><circle display="inline" fill="#000000" cx="50" cy="50" r="45"></circle></g><g display="none"><rect x="45" y="5" display="inline" width="10" height="10"></rect><rect x="35" y="5" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="25" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="5" y="55" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="15" y="65" display="inline" width="10" height="10"></rect><rect x="15" y="75" display="inline" width="10" height="10"></rect><rect x="25" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="35" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="85" display="inline" width="10" height="10"></rect><rect x="65" y="75" display="inline" width="10" height="10"></rect><rect x="75" y="65" display="inline" width="10" height="10"></rect><rect x="75" y="75" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="85" y="55" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="15" display="inline" width="10" height="10"></rect><rect x="55" y="5" display="inline" width="10" height="10"></rect></g><g><polygon points="5.675,94.5 14.675,94.5 14.675,94 14.675,63.136 14.675,62.636 5.675,62.636  "></polygon><polygon points="18.175,94.5 27.175,94.5 27.175,94 27.175,54.288 27.175,53.788 18.175,53.788  "></polygon><polygon points="30.675,94.5 39.675,94.5 39.675,94 39.675,47.94 39.675,47.44 30.675,47.44  "></polygon><polygon points="43.175,94.5 52.175,94.5 52.175,94 52.175,39.092 52.175,38.592 43.175,38.592  "></polygon><polygon points="55.675,94.5 64.675,94.5 64.675,94 64.675,30.244 64.675,29.744 55.675,29.744  "></polygon><path d="M68.175,94.5h9V18.396h-9V94.5z M69.175,19.396h7V93.5h-7V19.396z"></path></g></svg>

dashboard/src/assets/icons_signal/carre-high/6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g display="none"><rect x="45" y="25" display="inline" width="10" height="10"></rect><rect x="35" y="15" display="inline" width="10" height="10"></rect><rect x="25" y="15" display="inline" width="10" height="10"></rect><rect x="15" y="25" display="inline" width="10" height="10"></rect><rect x="5" y="35" display="inline" width="10" height="10"></rect><rect x="5" y="45" display="inline" width="10" height="10"></rect><rect x="15" y="55" display="inline" width="10" height="10"></rect><rect x="25" y="65" display="inline" width="10" height="10"></rect><rect x="35" y="75" display="inline" width="10" height="10"></rect><rect x="45" y="85" display="inline" width="10" height="10"></rect><rect x="55" y="15" display="inline" width="10" height="10"></rect><rect x="65" y="15" display="inline" width="10" height="10"></rect><rect x="75" y="25" display="inline" width="10" height="10"></rect><rect x="85" y="35" display="inline" width="10" height="10"></rect><rect x="85" y="45" display="inline" width="10" height="10"></rect><rect x="75" y="55" display="inline" width="10" height="10"></rect><rect x="65" y="65" display="inline" width="10" height="10"></rect><rect x="55" y="75" display="inline" width="10" height="10"></rect></g><g><rect x="4.895" y="64.136" width="8" height="30.864"></rect><rect x="17.395" y="55.288" width="8" height="39.712"></rect><rect x="29.895" y="48.94" width="8" height="46.06"></rect><rect x="42.395" y="40.092" width="8" height="54.908"></rect><rect x="54.895" y="31.244" width="8" height="63.756"></rect><rect x="67.395" y="19.896" width="8" height="75.104"></rect></g></svg>

dashboard/src/assets/icons_signal/carre-little/0.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M18.404,83.511H5V70.106h13.404V83.511z M7,81.511h9.404v-9.404H7V81.511z"></path><path d="M37.553,83.511H24.149V56.702h13.404V83.511z M26.149,81.511h9.404V58.702h-9.404V81.511z"></path><path d="M56.702,83.511H43.298V43.298h13.404V83.511z M45.298,81.511h9.404V45.298h-9.404V81.511z"></path><path d="M75.851,83.511H62.447V29.894h13.403V83.511z M64.447,81.511h9.403V31.894h-9.403V81.511z"></path><path d="M95,83.511H81.596V16.489H95V83.511z M83.596,81.511H93V18.489h-9.404V81.511z"></path></svg>

dashboard/src/assets/icons_signal/carre-little/1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="5" y="70.106" width="13.404" height="13.404"></rect><path d="M37.553,83.511H24.149V56.702h13.404V83.511z M26.149,81.511h9.404V58.702h-9.404V81.511z"></path><path d="M56.702,83.511H43.298V43.298h13.404V83.511z M45.298,81.511h9.404V45.298h-9.404V81.511z"></path><path d="M75.851,83.511H62.447V29.894h13.403V83.511z M64.447,81.511h9.403V31.894h-9.403V81.511z"></path><path d="M95,83.511H81.596V16.489H95V83.511z M83.596,81.511H93V18.489h-9.404V81.511z"></path></svg>

dashboard/src/assets/icons_signal/carre-little/2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="5" y="70.106" width="13.404" height="13.404"></rect><rect x="24.149" y="56.702" width="13.404" height="26.809"></rect><path d="M56.702,83.511H43.298V43.298h13.404V83.511z M45.298,81.511h9.404V45.298h-9.404V81.511z"></path><path d="M75.851,83.511H62.447V29.894h13.403V83.511z M64.447,81.511h9.403V31.894h-9.403V81.511z"></path><path d="M95,83.511H81.596V16.489H95V83.511z M83.596,81.511H93V18.489h-9.404V81.511z"></path></svg>

dashboard/src/assets/icons_signal/carre-little/3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="5" y="70.106" width="13.404" height="13.404"></rect><rect x="24.149" y="56.702" width="13.404" height="26.809"></rect><rect x="43.298" y="43.298" width="13.404" height="40.213"></rect><path d="M75.851,83.511H62.447V29.894h13.403V83.511z M64.447,81.511h9.403V31.894h-9.403V81.511z"></path><path d="M95,83.511H81.596V16.489H95V83.511z M83.596,81.511H93V18.489h-9.404V81.511z"></path></svg>

dashboard/src/assets/icons_signal/carre-little/4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="5" y="70.106" width="13.404" height="13.404"></rect><rect x="24.149" y="56.702" width="13.404" height="26.809"></rect><rect x="43.298" y="43.298" width="13.404" height="40.213"></rect><rect x="62.447" y="29.894" width="13.403" height="53.617"></rect><path d="M95,83.511H81.596V16.489H95V83.511z M83.596,81.511H93V18.489h-9.404V81.511z"></path></svg>

dashboard/src/assets/icons_signal/carre-little/5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="5" y="70.106" width="13.404" height="13.404"></rect><rect x="24.149" y="56.702" width="13.404" height="26.809"></rect><rect x="43.298" y="43.298" width="13.404" height="40.213"></rect><rect x="62.447" y="29.894" width="13.403" height="53.617"></rect><rect x="81.596" y="16.489" width="13.404" height="67.021"></rect></svg>

dashboard/src/assets/icons_signal/rounded-little/2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" x="0px" y="0px"><defs><style>.cls-1{fill:none;}</style></defs><title>wifi20</title><path class="cls-1" d="M475.76,117.66c-0.11-.13-0.93-0.77-6.22-0.78-7.64,0-15.39-.15-22.89-0.29-8.19-.15-16.65-0.31-25-0.29-3.61,0-4.84.26-5.26,0.44-0.13.32-.4,1.34-0.4,4.37q0,55.17,0,110.28c0,52.37.05,106.52,0,159.82,0,3.08.6,4,.86,4.26s1.15,0.82,4.08.76C432.28,396,443.7,396,454.74,396c4.26,0,8.51,0,12.78,0h0c1.85,0,3.45.09,4.84,0.13s2.86,0.1,3.79,0c0.18-1.42,0-4.13,0-6.23,0-30.92-.17-60.64-0.17-90.88V256h0.5V225.41c0-33.43,0-67.76,0-100.56C476.48,123.29,476.48,118.51,475.76,117.66Z"></path><path class="cls-1" d="M380.16,172.31c-0.52-.51-1.89-0.78-3.78-0.75-11.11.19-22.39,0.16-33.29,0.12-5.36,0-10.71,0-16.07,0-5.68,0-5.68,0-5.69,7.76,0,25.75,0,52.27,0,78.71V283l0.06,4.5c0,9.29,0,18.41,0,27.45,0,26.37,0,51.27-.11,77.85a8.8,8.8,0,0,0,.33,3.19,10.17,10.17,0,0,0,3.83.34l6.25-.15c14.88-.35,30.26-0.71,45.44-0.4,2.51,0,3.08-.47,3.14-0.53s0.68-.83.67-4c-0.08-66.1-.07-136.42.05-215C381,173.45,380.41,172.56,380.16,172.31Z"></path><path class="cls-1" d="M284.44,228.07c-0.18-.17-1-0.73-3.67-0.68-11.41.21-23,.17-34.2,0.13q-7.58,0-15.17,0c-4.88,0-5.64.75-5.74,0.9-0.79,1.14-.79,5.7-0.8,8.42,0,18.36,0,37.33,0,56.49V312H225v24.91c0,16.72,0,33.21,0,50.68,0,4,0,8.2.4,9.53a41.48,41.48,0,0,0,7.07.26h3.12c6.43,0,13-.15,19.34-0.29,8.38-.19,17-0.39,25.6-0.25,1.89,0,3.24-.25,3.77-0.77s0.89-2.05.88-4.1c-0.12-52.9-.1-106.67.06-159.8C285.24,229.18,284.68,228.31,284.44,228.07Z"></path><path d="M469.54,107.88c-7.56,0-15.27-.15-22.73-0.29-8.24-.15-16.75-0.31-25.15-0.29-9.91,0-14.63,2.1-14.63,13.81q0,55.17,0,110.29c0,52.36.05,106.51,0,159.81,0,3.09.37,7.56,3.56,10.69,2.29,2.24,5.56,3.34,10,3.34,0.19,0,.38,0,0.58,0,11.14-.23,22.5-0.22,33.49-0.19,4.11,0,8.22,0,12.33,0h0.51c1.76,0,3.24.09,4.56,0.12,4.8,0.12,7.94.26,10.45-2.19,2.71-2.64,2.62-6.53,2.62-13,0-30.92-.17-60.65-0.17-90.89V265h0.5V225.41c0-33.43,0-67.76,0-100.57C485.48,112.9,483.26,107.9,469.54,107.88Zm7,117.53V256H476v43.07c0,30.24.18,60,.17,90.88,0,2.1.18,4.81,0,6.23-0.94.05-2.43,0-3.79,0s-3-.13-4.84-0.13h0c-4.27,0-8.52,0-12.78,0-11,0-22.46,0-33.71.21-2.94.06-3.83-.51-4.08-0.76s-0.86-1.18-.86-4.26c0-53.3,0-107.45,0-159.82q0-55.13,0-110.28c0-3,.26-4,0.4-4.37,0.42-.18,1.65-0.43,5.26-0.44,8.31,0,16.77.14,25,.29,7.49,0.14,15.24.29,22.89,0.29,5.29,0,6.11.65,6.22,0.78,0.72,0.85.73,5.62,0.73,7.19C476.5,157.66,476.5,192,476.5,225.41Z"></path><path d="M386.47,165.89c-2.36-2.32-5.69-3.4-10.25-3.34-11,.19-22.25.16-33.11,0.12q-8.06,0-16.11,0c-13.56,0-14.67,7.6-14.67,16.76,0,25.75,0,52.28,0,78.71V287.5l0.06,4.5h0c0,7.74,0,15.38,0,23,0,26.35,0,51.24-.11,77.79,0,3.3.32,7,3,9.67,2.51,2.47,6.08,2.92,9.4,2.92h1l6.26-.15c14.78-.35,30.06-0.71,45-0.4,4.26,0.09,7.41-.93,9.63-3.1,3-2.94,3.38-7.1,3.37-10.4-0.08-66.09-.07-136.41.05-215C390,171.65,388.85,168.24,386.47,165.89Zm-5.53,225.4c0,3.13-.56,3.85-0.67,4s-0.64.58-3.14,0.53c-15.17-.31-30.56,0-45.44.4l-6.25.15a10.17,10.17,0,0,1-3.83-.34,8.8,8.8,0,0,1-.33-3.19c0.16-26.58.13-51.48,0.11-77.85,0-9,0-18.16,0-27.45l-0.06-4.5V258.12c0-26.43,0-53,0-78.71,0-7.75,0-7.75,5.69-7.76,5.36,0,10.71,0,16.07,0,10.9,0,22.18.07,33.29-.12,1.89,0,3.26.24,3.78,0.75,0.25,0.25.85,1.14,0.84,4C380.88,254.87,380.86,325.19,380.95,391.3Z"></path><path d="M290.75,221.66c-2.32-2.28-5.66-3.37-10.15-3.26-11.31.21-22.84,0.17-34,.13q-7.6,0-15.21,0c-14.46,0-15.52,6.92-15.54,18.3,0,18.36,0,37.34,0,56.51V321H216v15.91c0,16.72,0,33.21,0,50.69,0,8.63,0,13,3,16,2.56,2.54,6,2.82,11.31,2.82h5.26c6.53,0,13.15-.15,19.55-0.3,8.29-.19,16.86-0.38,25.25-0.25,4.53,0.1,7.87-1,10.24-3.36s3.57-5.82,3.56-10.53c-0.12-52.89-.1-106.63.06-159.75C294.24,229.14,293.89,224.74,290.75,221.66ZM285.17,392c0,2-.32,3.54-0.88,4.1s-1.88.8-3.77,0.77c-8.56-.14-17.22.06-25.6,0.25-6.35.14-12.91,0.29-19.34,0.29h-3.12a41.48,41.48,0,0,1-7.07-.26c-0.42-1.33-.4-5.49-0.4-9.53,0-17.47,0-34,0-50.68V312h-0.16V293.3c0-19.16,0-38.13,0-56.49,0-2.72,0-7.27.8-8.42,0.1-.15.87-0.9,5.74-0.9q7.58,0,15.17,0c11.2,0,22.78.08,34.2-.13,2.72-.05,3.5.51,3.67,0.68s0.8,1.11.79,4.08C285.07,285.29,285.05,339.05,285.17,392Z"></path><path d="M195,277.32c-1.57-1.6-4.44-3.32-9.17-3.32H186v-0.16c-17,.1-34-0.06-51.54-0.15-4.31,0-7.61,1.08-9.9,3.38s-3.48,5.62-3.46,10.07c0.14,36,.14,71.12,0,104.39,0,4.65,1.11,8,3.46,10.36s5.67,3.41,10.26,3.34c17.36-.26,34.38-0.25,50.6,0h1c3.39,0,7-.36,9.59-2.92s2.87-6.34,2.82-9.31c-0.22-12.28-.18-23.48-0.14-35.35,0-3.48,0-7,0-10.65l0-4.49c0-4.37,0-9.06,0-13.94,0-12.74-.09-27.15.15-39.74C198.92,283.79,197.65,280,195,277.32Z"></path><path d="M100.94,330.66c-2.18-2.13-5.21-3.14-9.31-3h0c-4.7.1-9.27,0.11-13.14,0.1l-5.38,0q-7.91,0-15.82,0l-5.32,0h0c-3.85,0-8.42,0-13.1-.12-4.05-.12-7.05.86-9.2,3s-3.22,5.26-3.17,9.53c0.19,18.44.19,35.5,0,52.15,0,4.22,1,7.35,3.18,9.55s5.07,3.2,9,3.2H91.74c4,0,7.07-1.1,9.2-3.24s3.13-5,3.12-8.7c-0.05-18.82,0-37.71,0-53.7C104.08,335.63,103,332.71,100.94,330.66Z"></path></svg>

dashboard/src/assets/icons_signal/rounded-little/3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" x="0px" y="0px"><defs><style>.cls-1{fill:none;}</style></defs><title>wifi20</title><path class="cls-1" d="M475.76,117.66c-0.11-.13-0.93-0.77-6.22-0.78-7.64,0-15.39-.15-22.89-0.29-8.19-.15-16.65-0.31-25-0.29-3.61,0-4.84.26-5.26,0.44-0.13.32-.4,1.34-0.4,4.37q0,55.17,0,110.28c0,52.37.05,106.52,0,159.82,0,3.08.6,4,.86,4.26s1.15,0.82,4.08.76c11.25-.24,22.66-0.2,33.71-0.16q6.39,0,12.78,0c1.83,0,3.47,0,4.86.08s2.86,0.07,3.79,0c0.18-1.42,0-4.14,0-6.24,0-30.92-.17-60.65-0.17-90.89V256h0.5V225.41c0-33.43,0-67.76,0-100.56C476.48,123.29,476.48,118.51,475.76,117.66Z"></path><path class="cls-1" d="M380.16,172.31c-0.52-.51-1.9-0.78-3.78-0.75-11.11.19-22.39,0.16-33.29,0.12-5.36,0-10.71,0-16.07,0-5.68,0-5.68,0-5.69,7.76,0,25.75,0,52.27,0,78.71V283l0.06,4.5c0,9.29,0,18.41,0,27.45,0,26.37,0,51.27-.11,77.85a8.8,8.8,0,0,0,.33,3.19,10.16,10.16,0,0,0,3.83.34l6.25-.15c14.88-.35,30.26-0.71,45.44-0.4,2.5,0,3.08-.47,3.14-0.53s0.68-.83.67-4c-0.08-66.1-.07-136.42.05-215C381,173.45,380.41,172.56,380.16,172.31Z"></path><path d="M469.54,107.88c-7.56,0-15.27-.15-22.73-0.29-8.24-.15-16.75-0.31-25.15-0.29-9.91,0-14.63,2.1-14.63,13.81q0,55.17,0,110.29c0,52.36.05,106.51,0,159.81,0,3.09.37,7.56,3.56,10.69,2.29,2.24,5.56,3.34,10,3.34,0.19,0,.38,0,0.58,0,11.14-.23,22.5-0.22,33.49-0.19,4.11,0,8.22,0,12.33,0h0.51c1.76,0,3.24.09,4.56,0.12,4.8,0.12,7.94.26,10.45-2.19,2.71-2.64,2.62-6.53,2.62-13,0-30.92-.17-60.65-0.17-90.89V265h0.5V225.41c0-33.43,0-67.76,0-100.57C485.48,112.9,483.26,107.9,469.54,107.88Zm7,117.53V256H476v43.07c0,30.24.18,60,.17,90.89,0,2.1.18,4.82,0,6.24-0.93.05-2.43,0-3.79,0s-3-.11-4.86-0.08q-6.4,0-12.78,0c-11,0-22.46-.07-33.71.16-2.94.06-3.83-.51-4.08-0.76s-0.86-1.18-.86-4.26c0-53.3,0-107.45,0-159.82q0-55.13,0-110.28c0-3,.26-4,0.4-4.37,0.42-.18,1.65-0.43,5.26-0.44,8.31,0,16.77.14,25,.29,7.49,0.14,15.24.29,22.89,0.29,5.29,0,6.11.65,6.22,0.78,0.72,0.85.73,5.62,0.73,7.19C476.5,157.66,476.5,192,476.5,225.41Z"></path><path d="M386.47,165.89c-2.36-2.32-5.71-3.4-10.25-3.34-11,.19-22.25.16-33.11,0.12q-8.06,0-16.11,0c-13.56,0-14.67,7.6-14.67,16.76,0,25.75,0,52.28,0,78.71V287.5l0.06,4.5h0c0,7.74,0,15.38,0,23,0,26.35,0,51.24-.11,77.79,0,3.3.32,7,3,9.67,2.51,2.47,6.08,2.92,9.4,2.92h1l6.26-.15c14.78-.35,30.06-0.71,45-0.4,4.25,0.09,7.41-.93,9.63-3.1,3-2.94,3.38-7.1,3.37-10.4-0.08-66.09-.07-136.41.05-215C390,171.65,388.85,168.24,386.47,165.89Zm-5.53,225.4c0,3.13-.56,3.85-0.67,4s-0.64.58-3.14,0.53c-15.17-.31-30.56,0-45.44.4l-6.25.15a10.16,10.16,0,0,1-3.83-.34,8.8,8.8,0,0,1-.33-3.19c0.16-26.58.13-51.48,0.11-77.85,0-9,0-18.16,0-27.45l-0.06-4.5V258.12c0-26.43,0-53,0-78.71,0-7.75,0-7.75,5.69-7.76,5.36,0,10.71,0,16.07,0,10.9,0,22.18.07,33.29-.12,1.88,0,3.26.24,3.78,0.75,0.25,0.25.85,1.14,0.84,4C380.88,254.87,380.86,325.19,380.95,391.3Z"></path><path d="M290.75,221.66c-2.32-2.28-5.66-3.37-10.15-3.26-11.31.21-22.84,0.17-34,.13q-7.6,0-15.21,0c-14.46,0-15.52,6.92-15.54,18.3,0,18.36,0,37.34,0,56.51V321H216v15.91c0,16.72,0,33.21,0,50.69,0,8.63,0,13,3,16,2.56,2.54,6,2.82,11.31,2.82h5.26c6.53,0,13.15-.15,19.55-0.3,8.29-.19,16.86-0.38,25.25-0.25,4.51,0.1,7.87-1,10.24-3.36s3.57-5.82,3.56-10.53c-0.12-52.89-.1-106.63.06-159.75C294.24,229.14,293.89,224.74,290.75,221.66Z"></path><path d="M195,277.32c-1.57-1.6-4.44-3.32-9.17-3.32H186v-0.16c-17,.1-34-0.06-51.54-0.15-4.31,0-7.61,1.08-9.9,3.38s-3.48,5.62-3.46,10.07c0.14,36,.14,71.12,0,104.39,0,4.65,1.11,8,3.46,10.36s5.69,3.41,10.26,3.34c17.36-.26,34.38-0.25,50.6,0h1c3.39,0,7-.36,9.59-2.92s2.87-6.34,2.82-9.31c-0.22-12.28-.18-23.48-0.14-35.35,0-3.48,0-7,0-10.65l0-4.49c0-4.37,0-9.06,0-13.94,0-12.74-.09-27.15.15-39.74C198.92,283.79,197.65,280,195,277.32Z"></path><path d="M100.94,330.66c-2.17-2.13-5.2-3.14-9.31-3h0c-4.7.1-9.28,0.11-13.14,0.1l-5.38,0q-7.91,0-15.82,0l-5.32,0h0c-3.85,0-8.42,0-13.1-.12-4-.12-7.05.86-9.2,3s-3.22,5.26-3.17,9.53c0.19,18.44.19,35.5,0,52.15,0,4.22,1,7.35,3.18,9.55s5.07,3.2,9,3.2H91.74c4,0,7.07-1.1,9.2-3.24s3.13-5,3.12-8.7c-0.05-18.82,0-37.71,0-53.7C104.08,335.63,103,332.71,100.94,330.66Z"></path></svg>