From c9ba5e36a409665e51bf0554860bacbb6e630fe1 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Thu, 14 May 2026 17:46:52 +0300
Subject: [PATCH] refactor(webui): drop deprecated recharts cell usage

- replace Cell-based pie slice coloring with data-driven fill props
- keep the stats genre and database charts visually unchanged
- remove the deprecation warning from the stats route
---
 webui/src/routes/stats/-ui/stats-page.tsx | 26 +++++++++--------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/webui/src/routes/stats/-ui/stats-page.tsx b/webui/src/routes/stats/-ui/stats-page.tsx
index 5a9f4c94..988cf8c9 100644
--- a/webui/src/routes/stats/-ui/stats-page.tsx
+++ b/webui/src/routes/stats/-ui/stats-page.tsx
@@ -5,7 +5,6 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
-  Cell,
   Pie,
   PieChart,
   ResponsiveContainer,
@@ -347,7 +346,10 @@ function StatsGenreChart({
 }: {
   genres: Array<{ genre: string; play_count: number; percentage: number }>;
 }) {
-  const topGenres = genres.slice(0, 10);
+  const topGenres = genres.slice(0, 10).map((genre, index) => ({
+    ...genre,
+    fill: STATS_GENRE_COLORS[index % STATS_GENRE_COLORS.length],
+  }));
   return (
     <ResponsiveContainer width={180} height={180}>
       <PieChart>
@@ -359,11 +361,7 @@ function StatsGenreChart({
           outerRadius={84}
           paddingAngle={2}
           stroke="transparent"
-        >
-          {topGenres.map((genre, index) => (
-            <Cell key={genre.genre} fill={STATS_GENRE_COLORS[index % STATS_GENRE_COLORS.length]} />
-          ))}
-        </Pie>
+        />
         <Tooltip contentStyle={STATS_TOOLTIP_STYLE} wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE} />
       </PieChart>
     </ResponsiveContainer>
@@ -782,7 +780,10 @@ function StatsDbStorage({
     return <SectionSubtleError message={getErrorMessage(error)} />;
   }
 
-  const tables = groupDbStorageTables(payload?.tables ?? []);
+  const tables = groupDbStorageTables(payload?.tables ?? []).map((table, index) => ({
+    ...table,
+    fill: STATS_DB_STORAGE_COLORS[index % STATS_DB_STORAGE_COLORS.length],
+  }));
   const method = payload?.method;
 
   return (
@@ -798,14 +799,7 @@ function StatsDbStorage({
               outerRadius={84}
               paddingAngle={2}
               stroke="transparent"
-            >
-              {tables.map((table, index) => (
-                <Cell
-                  key={table.name}
-                  fill={STATS_DB_STORAGE_COLORS[index % STATS_DB_STORAGE_COLORS.length]}
-                />
-              ))}
-            </Pie>
+            />
             <Tooltip
               contentStyle={STATS_TOOLTIP_STYLE}
               wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE}