Refactor genre data handling in GenreStatCard for improved sorting and display

Genres no display the top 15 genres alphabetically
should fix #359

backend/models/jf_library_items.js

@@ -50,7 +50,7 @@ const jf_library_items_mapping = (item) => ({
       ? item.ImageBlurHashes.Primary[item.ImageTags["Primary"]]
       : null,
   archived: false,
-  Genres: item.Genres && Array.isArray(item.Genres) ? JSON.stringify(filterInvalidGenres(item.Genres.map(titleCase))) : [],
+  Genres: item.Genres && Array.isArray(item.Genres) ? JSON.stringify(item.Genres.map(titleCase)) : [],
 });
 
 // Utility function to title-case a string
@@ -62,53 +62,6 @@ function titleCase(str) {
     .join(" ");
 }
 
-function filterInvalidGenres(genres) {
-  const validGenres = [
-    "Action",
-    "Adventure",
-    "Animated",
-    "Biography",
-    "Comedy",
-    "Crime",
-    "Dance",
-    "Disaster",
-    "Documentary",
-    "Drama",
-    "Erotic",
-    "Family",
-    "Fantasy",
-    "Found Footage",
-    "Historical",
-    "Horror",
-    "Independent",
-    "Legal",
-    "Live Action",
-    "Martial Arts",
-    "Musical",
-    "Mystery",
-    "Noir",
-    "Performance",
-    "Political",
-    "Romance",
-    "Satire",
-    "Science Fiction",
-    "Short",
-    "Silent",
-    "Slasher",
-    "Sports",
-    "Spy",
-    "Superhero",
-    "Supernatural",
-    "Suspense",
-    "Teen",
-    "Thriller",
-    "War",
-    "Western",
-  ];
-
-  return genres.filter((genre) => validGenres.map((g) => g.toLowerCase()).includes(genre.toLowerCase()));
-}
-
 module.exports = {
   jf_library_items_columns,
   jf_library_items_mapping,

src/pages/components/library/library-items.jsx

@@ -23,8 +23,6 @@ function LibraryItems(props) {
     localStorage.getItem("PREF_sortAsc") != undefined ? localStorage.getItem("PREF_sortAsc") == "true" : true
   );
 
-  console.log(sortOrder);
-
   const archive = {
     all: "all",
     archived: "true",
@@ -212,7 +210,11 @@ function LibraryItems(props) {
             }
           })
           .map((item) => (
-            <MoreItemCards data={item} base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl} key={item.Id + item.SeasonNumber + item.EpisodeNumber} />
+            <MoreItemCards
+              data={item}
+              base_url={config.settings?.EXTERNAL_URL ?? config.hostUrl}
+              key={item.Id + item.SeasonNumber + item.EpisodeNumber}
+            />
           ))}
       </div>
     </div>

src/pages/components/statCards/genre-stat-card.jsx

@@ -10,12 +10,26 @@ import i18next from "i18next";
 
 function GenreStatCard(props) {
   const [maxRange, setMaxRange] = useState(100);
+  const [data, setData] = useState(props.data);
 
   useEffect(() => {
     const maxDuration = props.data.reduce((max, item) => {
       return Math.max(max, parseFloat((props.dataKey == "duration" ? item.duration : item.plays) || 0));
     }, 0);
     setMaxRange(maxDuration);
+
+    let sorted = [...props.data]
+      .sort((a, b) => {
+        const valueA = parseFloat(props.dataKey === "duration" ? a.duration : a.plays) || 0;
+        const valueB = parseFloat(props.dataKey === "duration" ? b.duration : b.plays) || 0;
+        return valueB - valueA; // Descending order
+      })
+      .slice(0, 15); // Take only the top 10
+
+    // Sort top 10 genres alphabetically
+    sorted = sorted.sort((a, b) => a.genre.localeCompare(b.genre));
+
+    setData(sorted);
   }, [props.data, props.dataKey]);
 
   const CustomTooltip = ({ active, payload }) => {
@@ -67,7 +81,7 @@ function GenreStatCard(props) {
       </h1>
       <ErrorBoundary>
         <ResponsiveContainer width="100%" height="100%">
-          <RadarChart cx="50%" cy="50%" outerRadius="80%" data={props.data}>
+          <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
             <PolarGrid gridType="circle" />
             <PolarAngleAxis dataKey="genre" />
             <PolarRadiusAxis domain={[0, maxRange]} tick={false} axisLine={false} />