danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor(webui): drop deprecated recharts cell usage

Browse source 
- 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
This commit is contained in:
Antti Kettunen 2026-05-14 17:46:52 +03:00
parent 23de70958a
commit c9ba5e36a4
No known key found for this signature in database
GPG key ID: C6B2A3D250359BD7
1 changed files with 10 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
webui/src/routes/stats/-ui/stats-page.tsx
View file

@ -5,7 +5,6 @@ import {
Bar, Bar,
BarChart, BarChart,
CartesianGrid, CartesianGrid,
Cell,
Pie, Pie,
PieChart, PieChart,
ResponsiveContainer, ResponsiveContainer,
@ -347,7 +346,10 @@ function StatsGenreChart({
}: { }: {
genres: Array<{ genre: string; play_count: number; percentage: number }>; 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 ( return (
<ResponsiveContainer width={180} height={180}> <ResponsiveContainer width={180} height={180}>
<PieChart> <PieChart>
@ -359,11 +361,7 @@ function StatsGenreChart({
outerRadius={84} outerRadius={84}
paddingAngle={2} paddingAngle={2}
stroke="transparent" 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} /> <Tooltip contentStyle={STATS_TOOLTIP_STYLE} wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE} />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
@ -782,7 +780,10 @@ function StatsDbStorage({
return <SectionSubtleError message={getErrorMessage(error)} />; 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; const method = payload?.method;
return ( return (
@ -798,14 +799,7 @@ function StatsDbStorage({
outerRadius={84} outerRadius={84}
paddingAngle={2} paddingAngle={2}
stroke="transparent" stroke="transparent"
> />
{tables.map((table, index) => (
<Cell
key={table.name}
fill={STATS_DB_STORAGE_COLORS[index % STATS_DB_STORAGE_COLORS.length]}
/>
))}
</Pie>
<Tooltip <Tooltip
contentStyle={STATS_TOOLTIP_STYLE} contentStyle={STATS_TOOLTIP_STYLE}
wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE} wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE}