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 (
@@ -359,11 +361,7 @@ function StatsGenreChart({
outerRadius={84}
paddingAngle={2}
stroke="transparent"
- >
- {topGenres.map((genre, index) => (
- |
- ))}
-
+ />
@@ -782,7 +780,10 @@ function StatsDbStorage({
return ;
}
- 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) => (
- |
- ))}
-
+ />