stars per repo feature

components/stats/CreationDate.tsx

@@ -53,7 +53,10 @@ export default function CreationDate({ statsData }: Props) {
                       {statsData
                         .sort((a, b) => Number(b.value) - Number(a.value))
                         .map((data) => (
-                          <Table.Row key={data.value}>
+                          <Table.Row
+                            key={data.value}
+                            className="hover:bg-black hover:bg-opacity-20"
+                          >
                             <Table.Cell>{data.category}</Table.Cell>
                             <Table.Cell>{data.value}</Table.Cell>
                           </Table.Row>

components/stats/GistCreationDate.tsx

@@ -52,7 +52,10 @@ export default function GistCreationDate({ statsData }: Props) {
                       {statsData
                         .sort((a, b) => Number(b.value) - Number(a.value))
                         .map((data) => (
-                          <Table.Row key={data.value}>
+                          <Table.Row
+                            key={data.value}
+                            className="hover:bg-black hover:bg-opacity-20"
+                          >
                             <Table.Cell>{data.category}</Table.Cell>
                             <Table.Cell>{data.value}</Table.Cell>
                           </Table.Row>

components/stats/Languages.tsx

@@ -87,7 +87,10 @@ export default function Languages({
                   </Table.Header>
                   <Table.Body>
                     {sortedLanguageData.map((data) => (
-                      <Table.Row key={data.name}>
+                      <Table.Row
+                        key={data.name}
+                        className="hover:bg-black hover:bg-opacity-20"
+                      >
                         <Table.Cell>{data.name}</Table.Cell>
                         <Table.Cell>{data.count}</Table.Cell>
                       </Table.Row>

components/stats/Licenses.tsx

@@ -99,7 +99,10 @@ export default function Licenses({ licenses, count }: LicensesProps) {
                     {Object.entries(licenses)
                       .sort((a, b) => (b[1] as number) - (a[1] as number))
                       .map(([topic, count]) => (
-                        <Table.Row key={topic}>
+                        <Table.Row
+                          key={topic}
+                          className="hover:bg-black hover:bg-opacity-20"
+                        >
                           <Table.Cell>{topic}</Table.Cell>
                           <Table.Cell>{String(count)}</Table.Cell>
                         </Table.Row>

components/stats/StarsPerRepo.tsx

@@ -0,0 +1,82 @@
+"use client";
+import { Box, Card, Flex, Heading, Text } from "@radix-ui/themes";
+import { useState } from "react";
+import FilterChart from "./FilterChart";
+import { PieChart } from "@mui/x-charts/PieChart";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { ScrollArea, Table } from "@radix-ui/themes";
+export default function StarsPerRepo({
+  starsPerRepo,
+}: {
+  starsPerRepo: { [key: string]: number };
+}) {
+  const [length, setLength] = useState(
+    Object.keys(starsPerRepo).length > 5 ? 5 : Object.keys(starsPerRepo).length,
+  );
+  return (
+    <Card>
+      <Heading className="ml-3">
+        <Flex gap="4">
+          <Text>Stars Per Repo | Top {length}</Text>
+          <FilterChart
+            maxLength={Object.entries(starsPerRepo).length}
+            length={length}
+            setLength={setLength}
+          />
+        </Flex>
+      </Heading>
+      <Box className="h-[20rem] w-full rounded-2xl bg-gray-400 p-2">
+        <PieChart
+          sx={{
+            color: "green",
+            WebkitTextStrokeColor: "white",
+            fontWeight: "bold",
+          }}
+          series={[
+            {
+              data: Object.entries(starsPerRepo)
+                .slice(0, length)
+                .map(([key, value]) => ({
+                  label: key,
+                  value: value as number,
+                })),
+            },
+          ]}
+        />
+      </Box>
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>See All</AccordionTrigger>
+          <AccordionContent>
+            <Table.Root>
+              <ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
+                <Table.Header>
+                  <Table.Row>
+                    <Table.ColumnHeaderCell>Repository</Table.ColumnHeaderCell>
+                    <Table.ColumnHeaderCell>Stars</Table.ColumnHeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {Object.entries(starsPerRepo).map(([key, value]) => (
+                    <Table.Row
+                      key={key}
+                      className="hover:bg-black hover:bg-opacity-20"
+                    >
+                      <Table.Cell>{key}</Table.Cell>
+                      <Table.Cell>{value}</Table.Cell>
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </ScrollArea>
+            </Table.Root>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Card>
+  );
+}

components/stats/Stats.tsx

@@ -13,6 +13,7 @@ import {
   findOldestRepo,
   findRepoWithLongestUpdatePeriod,
   getCreationStatsByYear,
+  getStarsPerRepo,
 } from "@/lib/utils/stats";
 import { useContext } from "react";
 import Repository from "../repositories/Repository";
@@ -26,6 +27,7 @@ import CreationDate from "./CreationDate";
 import GistCreationDate from "./GistCreationDate";
 import DownloadData from "./DownloadData";
 import StatTable from "./StatTable";
+import StarsPerRepo from "./StarsPerRepo";
 
 export default function Stats() {
   const { repos, loading, gists } = useContext(GithubContext);
@@ -54,6 +56,7 @@ export default function Stats() {
       value: count,
     }),
   );
+  const starsPerRepo = getStarsPerRepo(repos);
   return (
     <Card>
       <Flex gap="4" direction="column">
@@ -74,6 +77,7 @@ export default function Stats() {
               totalStars={totalStars}
               averageStarsPerRepo={averageStarsPerRepo}
             />
+            {starsPerRepo && <StarsPerRepo starsPerRepo={starsPerRepo} />}
             {language.length > 0 && (
               <Languages language={language} count={count} />
             )}
@@ -93,7 +97,6 @@ export default function Stats() {
                 <Repository repo={mostStarredRepo} />
               </Box>
             )}
-
             {oldestRepo && (
               <Box>
                 <Heading size="4" className="ml-2">
@@ -118,6 +121,7 @@ export default function Stats() {
                 <Repository repo={updatePeriod} />
               </Box>
             )}
+
             <DownloadData />
           </>
         )}

lib/utils/stats.ts

@@ -182,3 +182,26 @@ export const getCreationStatsByYear = (repos: GitHubRepo[]) => {
 
   return stats;
 };
+
+export function getStarsPerRepo(repos: GitHubRepo[]) {
+  interface StarsPerRepo {
+    [key: string]: number;
+  }
+
+  const starsPerRepo: StarsPerRepo = {};
+
+  repos.forEach((repo) => {
+    if (repo.stargazers_count > 0) {
+      starsPerRepo[repo.name] = repo.stargazers_count;
+    }
+  });
+
+  const sortedStarsPerRepo = Object.entries(starsPerRepo)
+    .sort((a, b) => b[1] - a[1])
+    .reduce((acc, [name, stars]) => {
+      acc[name] = stars;
+      return acc;
+    }, {} as StarsPerRepo);
+
+  return sortedStarsPerRepo;
+}