feat(stats): add chart form selection and pie, donut, line charts

Tag rows with 0 games are no longer clickable.

src/pages/PublicProfilePage.test.jsx

@@ -339,6 +339,73 @@ describe('PublicProfilePage', () => {
         }
     });
 
+    const platformStats = {pile: null, trend: null, taste: null, finished: null, habits: null, topGames: null,
+        platforms: {perPlatform: [{name: 'Steam', games: 10, minutes: 5000}, {name: 'PS5', games: 2, minutes: 600}]}};
+    const platformTile = {tiles: [{id: 'STATS_PLATFORMS', size: 'M'}]};
+    const platformGames = {'GET /api/public/profiles/library/stats/games': json(200, {
+        content: [{appid: 7, name: 'Hades', status: 'BACKLOG', playtimeMinutes: 0}], page: 0, size: 40, totalElements: 1, totalPages: 1})};
+
+    it('showsTheOwnerChartFormWithoutAPicker', async () => {
+        library.stats = platformStats;
+        try {
+            mockBackends({style: {...platformTile, statCharts: {PLATFORMS: 'DONUT'}}});
+            const {container} = renderPage();
+
+            expect(await screen.findByText('Steam')).toBeTruthy();
+            expect(container.querySelectorAll('path.stroke-card')).toHaveLength(2);
+            expect(screen.queryByRole('group', {name: 'STATS.CHART.LABEL'})).toBeNull();
+        } finally {
+            delete library.stats;
+        }
+    });
+
+    it('showsBarsForAFormTheProfileDoesNotKnow', async () => {
+        library.stats = platformStats;
+        try {
+            mockBackends({style: {...platformTile, statCharts: {PLATFORMS: 'RADAR'}}});
+            const {container} = renderPage();
+
+            expect(await screen.findByText('Steam')).toBeTruthy();
+            expect(container.querySelector('path.stroke-card')).toBeNull();
+        } finally {
+            delete library.stats;
+        }
+    });
+
+    it('aChartLegendRowOfTheOwnerOpensTheDetailPage', async () => {
+        localStorage.setItem('tbp_session', '1');
+        library.stats = platformStats;
+        try {
+            mockBackends({me: {displayName: 'lobo', role: 'USER'}, style: {...platformTile, statCharts: {PLATFORMS: 'PIE'}},
+                extra: platformGames});
+            const {container} = renderPage();
+
+            await waitFor(() => expect(container.querySelectorAll('path.stroke-card')).toHaveLength(2));
+            fireEvent.click(await screen.findByRole('button', {name: /Steam/}));
+
+            expect((await screen.findByRole('link', {name: /Hades/})).getAttribute('href')).toBe('/library/7');
+        } finally {
+            delete library.stats;
+            localStorage.clear();
+        }
+    });
+
+    it('aChartLegendRowOfAVisitorShowsAPlainGameRow', async () => {
+        library.stats = platformStats;
+        try {
+            mockBackends({style: {...platformTile, statCharts: {PLATFORMS: 'PIE'}}, extra: platformGames});
+            const {container} = renderPage();
+
+            await waitFor(() => expect(container.querySelectorAll('path.stroke-card')).toHaveLength(2));
+            fireEvent.click(await screen.findByRole('button', {name: /Steam/}));
+
+            expect(await screen.findByText('Hades')).toBeTruthy();
+            expect(screen.queryByRole('link', {name: /Hades/})).toBeNull();
+        } finally {
+            delete library.stats;
+        }
+    });
+
     it('opensTheGamesBehindPerfectGames', async () => {
         library.perfectGames = 12;
         library.averageCompletion = 64.5;