added album and artist stats

music/tasks/refresh_lastfm_stats.py

@@ -24,13 +24,25 @@ def refresh_lastfm_stats(username, playlist_name):
     database_ref = database.get_user_playlist_ref_by_username(user=username, playlist=playlist_name)
 
     playlist_dict = database_ref.get().to_dict()
-    count = counter.count(Uri(playlist_dict['uri']))
+
+    spotify_playlist = spotnet.get_playlist(uri=Uri(playlist_dict['uri']))
+    track_count = counter.count_playlist(playlist=spotify_playlist)
+    album_count = counter.count_playlist(playlist=spotify_playlist, query_album=True)
+    artist_count = counter.count_playlist(playlist=spotify_playlist, query_artist=True)
 
     user_count = fmnet.get_user_scrobble_count()
-    percent = round((count * 100) / user_count, 2)
+    percent = round((track_count * 100) / user_count, 2)
+    album_percent = round((album_count * 100) / user_count, 2)
+    artist_percent = round((artist_count * 100) / user_count, 2)
 
     database_ref.update({
-        'lastfm_stat_count': count,
+        'lastfm_stat_count': track_count,
+        'lastfm_stat_album_count': album_count,
+        'lastfm_stat_artist_count': artist_count,
+
         'lastfm_stat_percent': percent,
+        'lastfm_stat_album_percent': album_percent,
+        'lastfm_stat_artist_percent': artist_percent,
+
         'lastfm_stat_last_refresh': datetime.utcnow()
     })

src/js/Maths/PieChart.js

@@ -21,7 +21,7 @@ class PieChart extends Component {
           },
           options: {
               legend : {
-                  display : false
+                  display : true
               },
               elements: {
                   arc : {

src/js/Playlist/View/Count.js

@@ -9,6 +9,17 @@ class Count extends Component {
     constructor(props){
         super(props);
         this.state = {
+            playlist: {
+                lastfm_stat_album_count: 0,
+                lastfm_stat_artist_count: 0,
+                lastfm_stat_count: 0,
+
+                lastfm_stat_album_percent: 0,
+                lastfm_stat_artist_percent: 0,
+                lastfm_stat_percent: 0,
+
+                lastfm_stat_last_refresh: ''
+            },
             name: props.name,
             lastfm_refresh: 'never',
             lastfm_percent: 0,
@@ -25,9 +36,7 @@ class Count extends Component {
         .then((response) => {
             if(response.data.lastfm_stat_last_refresh != undefined){
                 this.setState({
-                    count: response.data.lastfm_stat_count,
+                    playlist: response.data,
-                    lastfm_refresh: response.data.lastfm_stat_last_refresh,
-                    lastfm_percent: response.data.lastfm_stat_percent,
                     isLoading: false
                 })
             }else{
@@ -57,24 +66,51 @@ class Count extends Component {
         return (
             <tbody>
                 <tr>
-                    <td className="ui-text center-text text-no-select">scrobble count: <b>{this.state.count.toLocaleString()}</b></td>
+                    <td className="ui-text center-text text-no-select">scrobble count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td>
                 </tr>
                 <tr>
-                    <td className="ui-text center-text text-no-select">that's <b>{this.state.lastfm_percent}%</b> of all scrobbles</td>
+                    <td className="ui-text center-text text-no-select">album count: <b>{this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}%</b></td>
                 </tr>
                 <tr>
-                    <td className="ui-text center-text text-no-select">last updated <b>{this.state.lastfm_refresh.toLocaleString()}</b></td>
+                    <td className="ui-text center-text text-no-select">artist count: <b>{this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}%</b></td>
+                </tr>
+                <tr>
+                    <td className="ui-text center-text text-no-select">last updated <b>{this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}</b></td>
                 </tr>
                 <tr>
                     <td>
                         <PieChart data={[{
-                                "label": this.state.name,
+                                "label": `${this.state.playlist.name} tracks`,
-                                "value": this.state.lastfm_percent
+                                "value": this.state.playlist.lastfm_stat_percent
                             },{
                                 "label": 'other',
-                                "value": 100 - this.state.lastfm_percent
+                                "value": 100 - this.state.playlist.lastfm_stat_percent
                             }]} 
-                            title={this.state.name}/>
+                            title={this.state.playlist.name}/>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <PieChart data={[{
+                                "label": `${this.state.playlist.name} albums`,
+                                "value": this.state.playlist.lastfm_stat_album_percent
+                            },{
+                                "label": 'other',
+                                "value": 100 - this.state.playlist.lastfm_stat_album_percent
+                            }]} 
+                            title={this.state.playlist.name}/>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <PieChart data={[{
+                                "label": `${this.state.playlist.name} artists`,
+                                "value": this.state.playlist.lastfm_stat_artist_percent
+                            },{
+                                "label": 'other',
+                                "value": 100 - this.state.playlist.lastfm_stat_artist_percent
+                            }]} 
+                            title={this.state.playlist.name}/>
                     </td>
                 </tr>
                 <tr>