diff --git a/changes/changelog.d/873.enhancement b/changes/changelog.d/873.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..fd8e3c3a1004f8b9bd00f3b40b13f2c0bce2c2a8 --- /dev/null +++ b/changes/changelog.d/873.enhancement @@ -0,0 +1 @@ +Numbers on the stats page will now be formatted in a human readable way and will update with the locale (#873) diff --git a/front/src/components/instance/Stats.vue b/front/src/components/instance/Stats.vue index c245cf9955e5e787a826521e4453f204774f1926..85ce14fa07bfc67c79f7627da92525506dff093c 100644 --- a/front/src/components/instance/Stats.vue +++ b/front/src/components/instance/Stats.vue @@ -9,19 +9,19 @@ <div class="statistic"> <div class="value"> <i class="green user icon"></i> - {{ stats.users }} + {{ stats.users.toLocaleString($store.state.ui.momentLocale) }} </div> <div class="label"><translate translate-context="Content/About/Paragraph/Unit">users</translate></div> </div> <div class="statistic"> <div class="value"> - <i class="orange sound icon"></i> {{ stats.listenings }} + <i class="orange sound icon"></i> {{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }} </div> <div class="label"><translate translate-context="Content/About/Paragraph/Unit">tracks listened</translate></div> </div> <div class="statistic"> <div class="value"> - <i class="pink heart icon"></i> {{ stats.trackFavorites }} + <i class="pink heart icon"></i> {{ stats.trackFavorites.toLocaleString($store.state.ui.momentLocale) }} </div> <div class="label"><translate translate-context="Content/About/Paragraph/Unit">Tracks favorited</translate></div> </div> @@ -32,25 +32,25 @@ <div class="ui mini horizontal statistics"> <div class="statistic"> <div class="value"> - {{ parseInt(stats.musicDuration) }} + {{ stats.musicDuration.toLocaleString($store.state.ui.momentLocale) }} </div> <div class="label"><translate translate-context="Content/About/Paragraph/Unit">Hours of music</translate></div> </div> <div class="statistic"> <div class="value"> - {{ stats.artists }} + {{ stats.artists.toLocaleString($store.state.ui.momentLocale) }} </div> <div class="label"><translate translate-context="*/*/*/Noun">Artists</translate></div> </div> <div class="statistic"> <div class="value"> - {{ stats.albums }} + {{ stats.albums.toLocaleString($store.state.ui.momentLocale) }} </div> <div class="label"><translate translate-context="*/*/*">Albums</translate></div> </div> <div class="statistic"> <div class="value"> - {{ stats.tracks }} + {{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }} </div> <div class="label"><translate translate-context="*/*/*/Noun">Tracks</translate></div> </div> @@ -85,13 +85,13 @@ export default { self.stats.users = _.get(d, 'usage.users.total') self.stats.listenings = _.get(d, 'metadata.usage.listenings.total') self.stats.trackFavorites = _.get(d, 'metadata.usage.favorites.tracks.total') - self.stats.musicDuration = _.get(d, 'metadata.library.music.hours') + self.stats.musicDuration = Math.round(_.get(d, 'metadata.library.music.hours')) self.stats.artists = _.get(d, 'metadata.library.artists.total') self.stats.albums = _.get(d, 'metadata.library.albums.total') self.stats.tracks = _.get(d, 'metadata.library.tracks.total') self.isLoading = false }) - } + }, } } </script>