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

<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</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="!totalSizeSt"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                            <h3 *ngIf="totalSizeSt">{{totalSizeSt}}</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</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-12">
    <h3>Last added albums</h3>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Album</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>

<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>

<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>