style profile and stattistics component

Author: Sorosliu1029

src/components/DifficultyStatistics.tsx

@@ -1,13 +1,22 @@
 import React from 'react';
 import { Stack, Text } from '@mantine/core';
 
-const DifficultyStatistics: React.FC<{ text: string; color: string }> = ({
-  text,
-  color
-}) => {
+const DifficultyStatistics: React.FC<{
+  text: string;
+  color: string;
+  solved: number;
+  total: number;
+  onHover: () => void;
+  onLeave: () => void;
+}> = ({ text, color, solved, total, onHover, onLeave }) => {
   return (
-    <Stack>
-      <Text tt="capitalize">{text}</Text>
+    <Stack bg="#FAFAFA" onMouseOver={onHover} onMouseLeave={onLeave} gap={0}>
+      <Text tt="capitalize" c={color} size="xs" ta="center" fw="bolder">
+        {text}
+      </Text>
+      <Text size="xs" fw="bold" ta="center">
+        {solved}/{total}
+      </Text>
     </Stack>
   );
 };

src/components/LeetCodeMain.tsx

@@ -1,13 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { Notification } from '@jupyterlab/apputils';
-import { Container, Group, Stack } from '@mantine/core';
+import { Container, Group, PaperProps, Stack } from '@mantine/core';
 import { getProfile } from '../services/leetcode';
 import { LeetCodeProfile } from '../types/leetcode';
 import Profile from './Profile';
 import Statistics from './Statistics';
 import QuestionTable from './QuestionTable';
 
+const MainHeaderPaperProps: PaperProps = {
+  shadow: 'md',
+  radius: 'md',
+  withBorder: true,
+  p: 'sm',
+  bg: 'var(--mantine-color-body)'
+};
+
 const LeetCodeMain: React.FC<{ docManager: IDocumentManager }> = ({
   docManager
 }) => {
@@ -46,9 +54,12 @@ const LeetCodeMain: React.FC<{ docManager: IDocumentManager }> = ({
   return (
     <Container fluid={true} h="100%" p="lg" id="jll-main">
       <Stack>
-        <Group id="jll-profile" h={146}>
-          {profile && <Profile profile={profile} />}
-          {profile && <Statistics username={profile.username} />}
+        <Group id="jll-profile" align="stretch">
+          <Profile paperProps={MainHeaderPaperProps} profile={profile} />
+          <Statistics
+            paperProps={MainHeaderPaperProps}
+            username={profile?.username}
+          />
         </Group>
         <QuestionTable openNotebook={openNoteBook} height={calcHeight()} />
       </Stack>

src/components/LeetCodeNotebookToolbar.tsx renamed to src/components/NotebookToolbar.tsx

@@ -1,27 +1,29 @@
 import React from 'react';
-import { Avatar, Paper, Text } from '@mantine/core';
+import { Avatar, Center, Paper, PaperProps, Stack, Text } from '@mantine/core';
 import { LeetCodeProfile } from '../types/leetcode';
 
 const Profile: React.FC<{
-  profile: LeetCodeProfile;
-}> = ({ profile }) => {
+  profile: LeetCodeProfile | null;
+  paperProps: PaperProps;
+}> = ({ profile, paperProps }) => {
   return (
     <Paper
-      shadow="md"
-      radius="md"
-      withBorder
-      p="sm"
       miw="20%"
       maw="40%"
-      bg="var(--mantine-color-body)"
+      {...paperProps}
+      style={{ alignContent: 'center' }}
     >
-      <Avatar src={profile.avatar} size={60} radius={60} mx="auto" />
-      <Text ta="center" fz="md" fw={500} mt="xs">
-        {profile.realName}
-      </Text>
-      <Text ta="center" c="dimmed" fz="xs">
-        {profile.username}
-      </Text>
+      <Center>
+        <Stack gap={0}>
+          <Avatar src={profile?.avatar} size="md" radius="xl" mx="auto" />
+          <Text ta="center" fz="md" fw={500} mt="xs">
+            {profile?.realName}
+          </Text>
+          <Text ta="center" c="dimmed" fz="xs">
+            {profile?.username}
+          </Text>
+        </Stack>
+      </Center>
     </Paper>
   );
 };

src/components/Profile.tsx

@@ -1,9 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import { Center, Group, Paper, RingProgress, Stack, Text } from '@mantine/core';
+import {
+  Center,
+  Group,
+  Paper,
+  PaperProps,
+  RingProgress,
+  RingProgressProps,
+  Stack,
+  Text
+} from '@mantine/core';
 import { Notification } from '@jupyterlab/apputils';
 import { getStatistics } from '../services/leetcode';
 import { LeetCodeStatistics } from '../types/leetcode';
 import DifficultyStatistics from './DifficultyStatistics';
+import { IconCheck } from '@tabler/icons-react';
+import { StatusColors } from './QuestionItem';
 
 export const DifficultyColors: Record<string, string> = {
   easy: '#1CBBBA',
@@ -12,58 +23,72 @@ export const DifficultyColors: Record<string, string> = {
 };
 
 const Statistics: React.FC<{
-  username: string;
-}> = ({ username }) => {
+  username?: string;
+  paperProps: PaperProps;
+}> = ({ username, paperProps }) => {
   const [statistics, setStatistics] = useState<LeetCodeStatistics | null>(null);
-  const [all, setAll] = useState<Map<string, number> | null>(null);
-  const [accepted, setAccepted] = useState<Map<string, number> | null>(null);
-  const [__beats, setBeats] = useState<Map<string, number> | null>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const [difficultySections, setDifficultySections] = useState<
+    RingProgressProps['sections'] | null
+  >(null);
+  const [beats, setBeats] = useState<number | null>(null);
 
   useEffect(() => {
+    if (!username) {
+      return;
+    }
     getStatistics(username)
-      .then(d => {
-        setStatistics(d);
-      })
+      .then(d => setStatistics(d))
       .catch(e => Notification.error(e.message, { autoClose: 3000 }));
-  }, []);
+  }, [username]);
 
-  useEffect(() => {
+  const getAllQuestions = () => {
     if (!statistics?.userSessionProgress) {
       return;
     }
 
     const { userSessionProgress: sp } = statistics;
-    setAll(
-      new Map(
-        sp.allQuestionsCount.map(o => [o.difficulty.toLowerCase(), o.count])
-      )
+    return new Map(
+      sp.allQuestionsCount.map(o => [o.difficulty.toLowerCase(), o.count])
     );
-  }, [statistics?.userSessionProgress]);
+  };
 
-  useEffect(() => {
+  const getAcceptedQuestions = () => {
     const up =
       statistics?.userProfileUserQuestionProgressV2
         .userProfileUserQuestionProgressV2;
     if (!up) {
       return;
     }
 
-    setAccepted(
-      new Map(
-        up.numAcceptedQuestions.map(o => [o.difficulty.toLowerCase(), o.count])
-      )
+    return new Map(
+      up.numAcceptedQuestions.map(o => [o.difficulty.toLowerCase(), o.count])
     );
+  };
 
-    const b = new Map(
+  const getBeats = () => {
+    const up =
+      statistics?.userProfileUserQuestionProgressV2
+        .userProfileUserQuestionProgressV2;
+    if (!up) {
+      return;
+    }
+    return new Map(
       up.userSessionBeatsPercentage.map(o => [
         o.difficulty.toLowerCase(),
         o.percentage
       ])
     );
-    setBeats(b);
-  }, [statistics?.userProfileUserQuestionProgressV2]);
+  };
+
+  const all = getAllQuestions();
+  const accepted = getAcceptedQuestions();
+  const totalBeats =
+    statistics?.userProfileUserQuestionProgressV2
+      .userProfileUserQuestionProgressV2.totalQuestionBeatsPercentage ?? 0;
+  const difficultyBeats = getBeats();
 
-  const getSections = () => {
+  const getProgressSections = () => {
     if (!all || !accepted) {
       return [];
     }
@@ -81,31 +106,82 @@ const Statistics: React.FC<{
   const getTotalCount = () => all?.get('all') || 0;
 
   return (
-    <Paper
-      shadow="md"
-      radius="md"
-      withBorder
-      p="sm"
-      bg="var(--mantine-color-body)"
-    >
+    <Paper {...paperProps}>
       <Group>
         <RingProgress
           size={120}
           thickness={8}
           roundCaps
-          sections={getSections()}
+          sections={
+            isHovering && difficultySections
+              ? difficultySections
+              : getProgressSections()
+          }
           label={
             <Center>
-              <Text fw={500} fz="md">
-                {getTotalAc()}
-              </Text>
-              <Text fz="sm">/{getTotalCount()}</Text>
+              <Stack gap={0} align="center">
+                {isHovering ? (
+                  <>
+                    <Text fz="xs">Beats</Text>
+                    <Group gap={0}>
+                      <Text fw="bolder" fz="lg">
+                        {Math.floor(beats ?? totalBeats)}
+                      </Text>
+                      <Text fz="sm">
+                        .{(beats ?? totalBeats).toFixed(2).split('.')[1]}%
+                      </Text>
+                    </Group>
+                  </>
+                ) : (
+                  <>
+                    <Group gap={0}>
+                      <Text fw="bolder" fz="lg">
+                        {getTotalAc()}
+                      </Text>
+                      <Text fz="sm">/{getTotalCount()}</Text>
+                    </Group>
+                    <Group gap={0}>
+                      <IconCheck
+                        size={12}
+                        stroke={1.5}
+                        color={StatusColors['SOLVED']}
+                      />
+                      <Text fz="xs">Solved</Text>
+                    </Group>
+                  </>
+                )}
+              </Stack>
             </Center>
           }
+          onMouseOver={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
         />
-        <Stack>
+        <Stack gap="xs" w="5em">
           {Object.entries(DifficultyColors).map(([d, c]) => (
-            <DifficultyStatistics key={d} text={d} color={c} />
+            <DifficultyStatistics
+              key={d}
+              text={d}
+              color={c}
+              solved={accepted?.get(d) ?? 0}
+              total={all?.get(d) ?? 0}
+              onHover={() => {
+                setIsHovering(true);
+                setBeats(difficultyBeats?.get(d) ?? 0);
+                setDifficultySections([
+                  {
+                    value: Math.round(
+                      ((accepted?.get(d) ?? 0) / (all?.get(d) ?? 0)) * 100
+                    ),
+                    color: c
+                  }
+                ]);
+              }}
+              onLeave={() => {
+                setIsHovering(false);
+                setBeats(null);
+                setDifficultySections(null);
+              }}
+            />
           ))}
         </Stack>
       </Group>

src/components/Statistics.tsx

@@ -8,7 +8,7 @@ import {
   MantineThemeOverride
 } from '@mantine/core';
 import JupyterMainArea from './components/JupyterMainArea';
-import LeetCodeNotebookToolbar from './components/LeetCodeNotebookToolbar';
+import NotebookToolbar from './components/NotebookToolbar';
 
 export class JupyterMainWidget extends ReactWidget {
   docManager: IDocumentManager;
@@ -46,7 +46,7 @@ export class LeetCodeToolbarWidget extends ReactWidget {
   render(): JSX.Element {
     return (
       <StrictMode>
-        <LeetCodeNotebookToolbar notebook={this.notebook} />
+        <NotebookToolbar notebook={this.notebook} />
       </StrictMode>
     );
   }