From ebf9a9f4a820866a0ec937f0bb3b6b67256a0fd4 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 4 Jun 2026 17:04:29 +0200
Subject: [PATCH] feat: replace CSS bar charts with recharts, fix label
 readability

---
 spa/src/aero-theme.css                  |  5 +++
 spa/src/components/profile-view.tsx     | 25 ++++++-----
 spa/src/components/rating-histogram.tsx | 32 +++++++-------
 spa/src/routes/_app/wrapup.$id.tsx      | 56 ++++++++++++-------------
 4 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/spa/src/aero-theme.css b/spa/src/aero-theme.css
index 79eedd7..1070ffe 100644
--- a/spa/src/aero-theme.css
+++ b/spa/src/aero-theme.css
@@ -298,6 +298,11 @@ body > #root {
   color: oklch(0.985 0 0);
 }
 
+/* Chart label readability */
+[data-slot="chart"] .recharts-cartesian-axis-tick text {
+  fill: rgba(255, 255, 255, 0.85) !important;
+}
+
 /* Star glow for filled amber stars */
 .aero-star-filled {
   filter: drop-shadow(0 0 4px var(--aero-primary-glow)) drop-shadow(0 0 1px var(--aero-primary));
diff --git a/spa/src/components/profile-view.tsx b/spa/src/components/profile-view.tsx
index 9682850..de9405a 100644
--- a/spa/src/components/profile-view.tsx
+++ b/spa/src/components/profile-view.tsx
@@ -1,7 +1,9 @@
 import { Link } from "@tanstack/react-router"
 import { useCallback } from "react"
 import { useTranslation } from "react-i18next"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
 import { User } from "lucide-react"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -136,6 +138,10 @@ function DiaryTab({ sortBy }: { sortBy: string; userId?: string }) {
   )
 }
 
+const trendChartConfig = {
+  count: { label: "Movies", color: "var(--primary)" },
+} satisfies ChartConfig
+
 function TrendsView({
   data,
 }: {
@@ -183,17 +189,14 @@ function TrendsView({
             <CardTitle className="text-sm">{t("profile.monthlyActivity")}</CardTitle>
           </CardHeader>
           <CardContent>
-            {data.trends.monthly_ratings.map((m) => (
-              <div
-                key={m.month_label}
-                className="flex items-center justify-between py-1 text-sm"
-              >
-                <span>{m.month_label}</span>
-                <span className="text-xs text-muted-foreground">
-                  {t("common.filmsAvg", { count: m.count, avg: m.avg_rating.toFixed(1) })}
-                </span>
-              </div>
-            ))}
+            <ChartContainer config={trendChartConfig} className="aspect-[2/1] w-full">
+              <BarChart data={data.trends.monthly_ratings} margin={{ top: 8, right: 0, bottom: 0, left: -20 }}>
+                <XAxis dataKey="month_label" tickFormatter={(v: string) => v.slice(0, 3)} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} />
+                <YAxis allowDecimals={false} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} width={30} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey="count" fill="var(--color-count)" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ChartContainer>
           </CardContent>
         </Card>
       )}
diff --git a/spa/src/components/rating-histogram.tsx b/spa/src/components/rating-histogram.tsx
index 5de426b..e0ef250 100644
--- a/spa/src/components/rating-histogram.tsx
+++ b/spa/src/components/rating-histogram.tsx
@@ -1,26 +1,24 @@
+import { Bar, BarChart, XAxis } from "recharts"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
+
+const chartConfig = {
+  count: { label: "Reviews", color: "var(--primary)" },
+} satisfies ChartConfig
+
 type RatingHistogramProps = {
   histogram: number[]
 }
 
 export function RatingHistogram({ histogram }: RatingHistogramProps) {
-  const max = Math.max(...histogram, 1)
+  const data = histogram.map((count, i) => ({ rating: `${i + 1}★`, count }))
 
   return (
-    <div>
-      <div className="flex items-end gap-1" style={{ height: 40 }}>
-        {histogram.map((count, i) => (
-          <div
-            key={i}
-            className="flex-1 rounded-t bg-amber-500/80"
-            style={{ height: `${(count / max) * 100}%`, minHeight: count > 0 ? 2 : 0 }}
-          />
-        ))}
-      </div>
-      <div className="mt-1 flex gap-1">
-        {[1, 2, 3, 4, 5].map((n) => (
-          <div key={n} className="flex-1 text-center text-[10px] text-muted-foreground/40">{n}</div>
-        ))}
-      </div>
-    </div>
+    <ChartContainer config={chartConfig} className="aspect-[3/1] w-full">
+      <BarChart data={data} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
+        <XAxis dataKey="rating" tick={{ fontSize: 11, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent hideIndicator />} />
+        <Bar dataKey="count" fill="var(--color-count)" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ChartContainer>
   )
 }
diff --git a/spa/src/routes/_app/wrapup.$id.tsx b/spa/src/routes/_app/wrapup.$id.tsx
index 7bb930a..3bde4ce 100644
--- a/spa/src/routes/_app/wrapup.$id.tsx
+++ b/spa/src/routes/_app/wrapup.$id.tsx
@@ -1,10 +1,20 @@
 import { createFileRoute, Link } from "@tanstack/react-router"
 import { lazy, Suspense, useState } from "react"
 import { useTranslation } from "react-i18next"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
 import { BarChart3, DollarSign, Globe, Hash, Share2, Star, Users } from "lucide-react"
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"
 import { BackButton } from "@/components/back-button"
 import { Button } from "@/components/ui/button"
 
+const monthlyChartConfig = {
+  count: { label: "Movies", color: "var(--primary)" },
+} satisfies ChartConfig
+
+const genreChartConfig = {
+  count: { label: "Movies", color: "var(--primary)" },
+} satisfies ChartConfig
+
 const WrapUpShareCard = lazy(() => import("@/components/wrapup-share-card").then((m) => ({ default: m.WrapUpShareCard })))
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -111,18 +121,14 @@ function WrapUpReportPage() {
             <CardDescription>{t("wrapup.genresExplored", { count: report.genre_diversity })}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-2">
-            {report.top_genres.slice(0, 8).map((g) => {
-              const max = report.top_genres[0]?.count ?? 1
-              return (
-                <div key={g.genre} className="flex items-center gap-2 text-sm">
-                  <span className="w-20 truncate">{g.genre}</span>
-                  <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
-                    <div className="h-full rounded-full bg-primary" style={{ width: `${(g.count / max) * 100}%` }} />
-                  </div>
-                  <span className="w-6 text-right text-xs text-muted-foreground">{g.count}</span>
-                </div>
-              )
-            })}
+            <ChartContainer config={genreChartConfig} className="w-full" style={{ height: Math.min(report.top_genres.length, 8) * 28 + 16 }}>
+              <BarChart data={report.top_genres.slice(0, 8)} layout="vertical" margin={{ top: 0, right: 4, bottom: 0, left: 0 }}>
+                <XAxis type="number" hide />
+                <YAxis type="category" dataKey="genre" tick={{ fontSize: 11, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} width={80} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey="count" fill="var(--color-count)" radius={[0, 4, 4, 0]} />
+              </BarChart>
+            </ChartContainer>
             <div className="flex flex-wrap gap-2 pt-2">
               {report.highest_rated_genre && (
                 <Badge variant="secondary">{t("wrapup.highestRated", { genre: report.highest_rated_genre })}</Badge>
@@ -144,24 +150,14 @@ function WrapUpReportPage() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            {(() => {
-              const max = Math.max(...report.movies_per_month.map((x) => x.count))
-              const barHeight = 96
-              return (
-                <div className="flex items-end gap-1">
-                  {report.movies_per_month.map((m) => {
-                    const h = max > 0 ? Math.max((m.count / max) * barHeight, 4) : 4
-                    return (
-                      <div key={m.year_month} className="flex flex-1 flex-col items-center gap-1">
-                        <span className="text-[10px] text-muted-foreground">{m.count}</span>
-                        <div className="w-full rounded-t bg-primary" style={{ height: h }} />
-                        <span className="text-[9px] text-muted-foreground">{m.year_month.slice(5)}</span>
-                      </div>
-                    )
-                  })}
-                </div>
-              )
-            })()}
+            <ChartContainer config={monthlyChartConfig} className="aspect-[2/1] w-full">
+              <BarChart data={report.movies_per_month} margin={{ top: 8, right: 0, bottom: 0, left: -20 }}>
+                <XAxis dataKey="year_month" tickFormatter={(v: string) => v.slice(5)} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} />
+                <YAxis allowDecimals={false} tick={{ fontSize: 10, fill: "rgba(255,255,255,0.85)" }} tickLine={false} axisLine={false} width={30} />
+                <ChartTooltip content={<ChartTooltipContent labelFormatter={(v) => report.movies_per_month.find((m) => m.year_month === String(v))?.label ?? String(v)} />} />
+                <Bar dataKey="count" fill="var(--color-count)" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ChartContainer>
           </CardContent>
         </Card>
       )}