feat(stats): add movies by year

db/queries.sql

@@ -281,3 +281,14 @@ ORDER BY
     rating DESC
 LIMIT 1;
 
+-- name: stats-movies-by-year
+SELECT
+    EXTRACT(YEAR FROM release_date) AS label,
+    COUNT(*) AS value
+FROM
+    movie
+GROUP BY
+    label
+ORDER BY
+    label DESC;
+

handlers/stats.go

@@ -82,13 +82,29 @@ func HandleGetStats(c *fiber.Ctx) error {
 		return err
 	}
 
+	moviesByYear, err := getGraphWithQuery("stats-movies-by-year")
+
+	if err != nil {
+		log.Fatalf("Error getting movies by year: %v", err)
+		return err
+	}
+
 	var bestOfTheYear types.Movie
 	err = db.Dot.Get(db.Client, &bestOfTheYear, "stats-best-of-the-year")
 
 	if err != nil {
 		bestOfTheYear = types.Movie{ID: 0}
 	}
 
+	bestYear := ""
+	bestYearValue := 0
+	for _, year := range moviesByYear {
+		if year.Value > bestYearValue {
+			bestYear = year.Label
+			bestYearValue = year.Value
+		}
+	}
+
 	return utils.TemplRender(c, views.Stats(
 		stats,
 		utils.FormatRuntime(stats.TotalRuntime),
@@ -99,6 +115,8 @@ func HandleGetStats(c *fiber.Ctx) error {
 		movies,
 		seenThisYearByMonth,
 		bestOfTheYear,
+		moviesByYear,
+		bestYear,
 	))
 }
 
@@ -153,7 +171,7 @@ func constructGraphFromData(data []types.GraphData) ([]types.Bar, error) {
 			// Calcualte the bar Height
 			// Subtract 46 from the graph height to make room for the labels
 			barHeight = clamp(int(float64(row.Value)/float64(maxCount.Value)*float64(graphHeight-46)), 2, graphHeight-46)
-			barWidth  = int(float64(graphWidth)/float64(len(data))) - 5
+			barWidth  = clamp(int(float64(graphWidth)/float64(len(data)))-5, 2, 100)
 
 			// Space the bars evenly across the graph
 			barX = elementsInGraph*i + 1

views/stats.templ

@@ -7,7 +7,7 @@ import (
 	"fmt"
 )
 
-templ Stats(stats types.Stats, formattedTotalRuntime string, mostWatchedCast []components.ListItem, watchedByYear []types.Bar, ratings []types.Bar, yearRatings []types.Bar, mostWatchedMovies []components.ListItem, seenThisYear []types.Bar, bestOfTheYear types.Movie) {
+templ Stats(stats types.Stats, formattedTotalRuntime string, mostWatchedCast []components.ListItem, watchedByYear []types.Bar, ratings []types.Bar, yearRatings []types.Bar, mostWatchedMovies []components.ListItem, seenThisYear []types.Bar, bestOfTheYear types.Movie, moviesByYear []types.Bar, bestYear string) {
 	@Layout("Stats", "") {
 		<div class="mx-auto flex max-w-xl lg:max-w-5xl flex-col gap-y-8 px-5 pb-8 pt-8 lg:pt-24">
 			<nav class="flex items-center gap-5">
@@ -59,6 +59,29 @@ templ Stats(stats types.Stats, formattedTotalRuntime string, mostWatchedCast []c
 					@components.Graph(ratings, "Ratings")
 					@components.Graph(yearRatings, "Ratings this year")
 					@components.Graph(seenThisYear, "Seen this year by month")
+					@components.Section("Movies by year", 0) {
+						<ol class="flex flex-col gap-2">
+							for _, year := range moviesByYear {
+								<li
+									class={ "flex items-baseline justify-between gap-4",
+                  templ.KV("text-yellow-800 dark:text-yellow-200", bestYear == year.Label ) }
+								>
+									{ year.Label }
+									<hr
+										class={ "m-0 flex-1 border-dashed",
+                      templ.KV(" border-neutral-300 dark:border-neutral-700", bestYear != year.Label),
+                      templ.KV("border-yellow-800 dark:border-yellow-100", bestYear == year.Label) }
+									/>
+									<span
+										class={ "tabular-nums text-sm",
+                    templ.KV("text-neutral-500 dark:text-neutral-400", bestYear != year.Label) }
+									>
+										{ strconv.Itoa(year.Value) }
+									</span>
+								</li>
+							}
+						</ol>
+					}
 				</div>
 				<div class="flex flex-col gap-y-8">
 					@components.Section("Most watched movies", 0) {