feat(stats): add chart form pickers to dashboard and profile tiles

src/components/stats/TopGamesStats.jsx

@@ -3,26 +3,35 @@ import {Trophy} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import StatsSection from './StatsSection.jsx';
+import ChartPicker from './ChartPicker.jsx';
+import GamePlayChart from './GamePlayChart.jsx';
 import GameRow from './GameRow.jsx';
 import {useStatDrill} from './StatDrill.jsx';
 import {formatPlaytime} from '../../utils/games.js';
+import {playChart} from '../../utils/statCharts.js';
 
-export default function TopGamesStats({topGames, linked = true}) {
+/**
+ * @param chart LIST, BARS, PIE or DONUT
+ * @param onChart `(form)`: shows the picker
+ */
+export default function TopGamesStats({topGames, linked = true, chart = 'LIST', onChart}) {
     const {t} = useTranslation();
     const drill = useStatDrill();
     const max = Math.max(1, ...topGames.mostPlayed.map((g) => g.minutes));
+    const form = playChart(chart, topGames.mostPlayed);
     return (
-        <StatsSection title={t('STATS.TOP_GAMES.TITLE')} icon={Trophy}>
+        <StatsSection title={t('STATS.TOP_GAMES.TITLE')} icon={Trophy}
+                      action={onChart && <ChartPicker group="TOP_GAMES" value={chart} onChange={onChart}/>}>
             {topGames.mostPlayed.length === 0 ? (
                 <p className="text-sm text-muted-foreground">{t('STATS.TOP_GAMES.EMPTY')}</p>
-            ) : (
+            ) : form === 'LIST' ? (
                 <ol className="space-y-2">
                     {topGames.mostPlayed.map((g) => (
                         <li key={g.appid}><GameRow game={g} value={formatPlaytime(g.minutes)} linked={linked}
                                                 share={g.minutes / max}/></li>
                     ))}
                 </ol>
-            )}
+            ) : <GamePlayChart games={topGames.mostPlayed} chart={form} linked={linked}/>}
             {drill && topGames.mostPlayed.length > 0 && (
                 <Button variant="ghost" size="sm" className="self-start max-sm:min-h-11"
                         onClick={() => drill.open(t('STATS.TOP_GAMES.TITLE'), {key: 'MOST_PLAYED'})}>