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

src/pages/Dashboard.jsx

@@ -23,6 +23,8 @@ import PageContainer from '../components/PageContainer.jsx';
 import useSteamProfile from '../hooks/useSteamProfile.js';
 import useUserStats from '../hooks/useUserStats.js';
 import useSaveResponse from '../hooks/useSaveResponse.js';
+import useStatCharts from '../hooks/useStatCharts.js';
+import {chartProps} from '../utils/statCharts.js';
 import TileGrid from '../components/TileGrid.jsx';
 import {StatDrillProvider} from '../components/stats/StatDrill.jsx';
 import statGroupTile from '../components/stats/statGroupTile.jsx';
@@ -42,6 +44,7 @@ const Dashboard = () => {
     const [shuffling, setShuffling] = useState(false);
     const [editing, setEditing] = useState(false);
     const runSave = useSaveResponse();
+    const {charts, change} = useStatCharts();
     const layout = normalizeLayout(userData?.settings?.dashboardTiles, DASHBOARD_TILES, DEFAULT_DASHBOARD);
     // The stat groups of the shown stat tiles, and TREND for the pile card and the "pile grew" hint. Waits for the
     // saved layout in /me.
@@ -71,10 +74,11 @@ const Dashboard = () => {
             stats.reload();
         },
     });
-    const forceSync = useForceSync(sync.watch);
+    const {watch} = sync;
+    const forceSync = useForceSync(watch);
     useEffect(() => {
-        if (steamData.syncStarted) sync.watch();
-    }, [steamData, sync.watch]);
+        if (steamData.syncStarted) watch();
+    }, [steamData, watch]);
 
     if (isLoading) {
         return <DashboardSkeleton/>;
@@ -101,7 +105,7 @@ const Dashboard = () => {
             case 'GAME_COUNT': return showLibrary && <SteamGameCount targetCount={steamData.count}/>;
             case 'MOST_PLAYED':
                 return showLibrary && <MostPlayedCard games={topGames.slice(0, TOP_GAMES[size])} syncing={sync.isRunning}
-                                       equipped={equipped}/>;
+                                       equipped={equipped} {...chartProps(charts, change, 'TOP_GAMES')}/>;
             case 'PLAYING':
                 return showLibrary && (
                     <CurrentlyPlayingCard games={playing.slice(0, PLAYING_GAMES[size])} syncing={sync.isRunning} wide={size === 'L'}/>
@@ -120,9 +124,9 @@ const Dashboard = () => {
                         </Button>
                     </Card>
                 );
-            case 'ACTIVITY': return hasSteamId && activity && <ActivityCard activity={activity}/>;
+            case 'ACTIVITY': return hasSteamId && activity && <ActivityCard activity={activity} charts={charts} onChart={change}/>;
             case 'ACHIEVEMENTS': return hasSteamId && achievements && <AchievementsCard summary={achievements}/>;
-            default: return statGroupTile(id, stats.stats, true, userData?.settings?.statCharts);
+            default: return statGroupTile(id, stats.stats, true, charts, change);
         }
     };