Improved profile statistics

pages/profile/profile.go

@@ -13,6 +13,7 @@ import (
 const (
 	maxCharacters = 6
 	maxFriends    = 7
+	maxStudios    = 4
 )
 
 // Get user profile page.
@@ -44,6 +45,47 @@ func Profile(ctx *aero.Context, viewUser *arn.User) string {
 	// Genres
 	topGenres := animeList.TopGenres(5)
 
+	// Studios
+	animeWatchingTime := time.Duration(0)
+	studios := map[string]float64{}
+	var topStudios []*arn.Company
+
+	for _, item := range animeList.Items {
+		if item.Status == arn.AnimeListStatusPlanned {
+			continue
+		}
+
+		currentWatch := item.Episodes * item.Anime().EpisodeLength
+		reWatch := item.RewatchCount * item.Anime().EpisodeCount * item.Anime().EpisodeLength
+		duration := time.Duration(currentWatch + reWatch)
+		animeWatchingTime += duration * time.Minute
+
+		for _, studio := range item.Anime().Studios() {
+			count, exists := studios[studio.ID]
+
+			if !exists {
+				topStudios = append(topStudios, studio)
+			}
+
+			studios[studio.ID] = count + 1
+		}
+	}
+
+	sort.Slice(topStudios, func(i, j int) bool {
+		affinityA := studios[topStudios[i].ID]
+		affinityB := studios[topStudios[j].ID]
+
+		if affinityA == affinityB {
+			return topStudios[i].Name.English < topStudios[j].Name.English
+		}
+
+		return affinityA > affinityB
+	})
+
+	if len(topStudios) > maxStudios {
+		topStudios = topStudios[:maxStudios]
+	}
+
 	// Open graph
 	openGraph := &arn.OpenGraph{
 		Tags: map[string]string{
@@ -128,5 +170,18 @@ func Profile(ctx *aero.Context, viewUser *arn.User) string {
 	}
 
 	ctx.Data = openGraph
-	return ctx.HTML(components.Profile(viewUser, user, animeList, completedList, characters, friends, topGenres, dayToActivityCount, ctx.URI()))
+
+	return ctx.HTML(components.Profile(
+		viewUser,
+		user,
+		animeList,
+		completedList,
+		characters,
+		friends,
+		topGenres,
+		topStudios,
+		animeWatchingTime,
+		dayToActivityCount,
+		ctx.URI(),
+	))
 }

pages/profile/profile.pixy

@@ -1,4 +1,4 @@
-component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, completedList *arn.AnimeList, characters []*arn.Character, friends []*arn.User, topGenres []string, dayToActivityCount map[int]int, uri string)
+component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, completedList *arn.AnimeList, characters []*arn.Character, friends []*arn.User, topGenres []string, topStudios []*arn.Company, animeWatchingTime time.Duration, dayToActivityCount map[int]int, uri string)
 	.profile
 		ProfileHeader(viewUser, animeList, user, uri)
 
@@ -47,6 +47,17 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
 							each genre in topGenres
 								a.anime-genre.mountable(href="/genre/" + strings.ToLower(genre), data-mountable-type="genre")= genre
 				
+				//- Studios
+				.profile-section
+					h3.profile-column-header.mountable(data-mountable-type="extra") Studios
+
+					if len(topStudios) == 0
+						p.no-data.mountable(data-mountable-type="extra") Nothing here yet.
+					else
+						.anime-studios.mountable(data-mountable-type="extra")
+							each company in topStudios
+								a.anime-studio.mountable(href=company.Link(), data-mountable-type="company")= company.Name.English
+
 				//- Friends
 				.profile-section.profile-section-friends
 					h3.profile-column-header.mountable(data-mountable-type="extra") Friends
@@ -77,6 +88,11 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
 											if day == 2
 												.spacer-box
 				
+					.footer.activities-footer.mountable(data-mountable-type="extra")
+						span= viewUser.Nick + " spent "
+						span= int(animeWatchingTime / time.Hour / 24)
+						span  days watching anime.
+				
 component ProfileHeader(viewUser *arn.User, animeList *arn.AnimeList, user *arn.User, uri string)
 	ProfileHead(viewUser, animeList, user, uri)
 

pages/profile/profile.scarlet

@@ -157,22 +157,32 @@ const profile-image-size = 280px
 .profile-activities
 	horizontal-wrap
 
+.activities-footer
+	margin-top 0
+
 // Margin between activity boxes
 const month-margin = 0.4rem
+const box-size = 11px
+const box-margin = 2px
 
 .activities-month
-	horizontal
+	display grid
+	grid-template-columns repeat(4, box-size)
+	grid-gap box-margin
+	// width calc(100% / 6 - month-margin)
 	margin 0 calc(month-margin / 2)
 	margin-bottom content-padding
 
 .activities-week
-	vertical
+	display grid
+	grid-template-rows repeat(5, box-size) month-margin repeat(2, box-size)
+	grid-template-columns box-size
+	grid-gap box-margin
 
 .box
-	width 0.75rem
-	height 0.75rem
+	width 100%
+	height 100%
 	border-radius 1px
-	margin 1px
 	background hsla(link-color-h, link-color-s, link-color-l, 0.75)
 
 	:hover
@@ -186,8 +196,18 @@ const month-margin = 0.4rem
 			cursor default
 			background reverse-light-color
 
-.spacer-box
-	height month-margin
+.anime-studios
+	horizontal-wrap
+	justify-content center
+	margin-bottom typography-margin
+
+.anime-studio
+	genre-tag
+
+> 800px
+	.anime-studios
+		justify-content flex-start
+		margin-bottom 0
 
 .profile-image
 	object-fit cover