Skip to content
This repository has been archived by the owner on Aug 3, 2024. It is now read-only.

Commit

Permalink
code cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
sametcn99 committed Feb 2, 2024
1 parent 45d67d2 commit 0287675
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 369 deletions.
99 changes: 99 additions & 0 deletions components/stats/ChartCardWrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
"use client";
import "@/app/globals.css";
import { PieChart } from "@mui/x-charts/PieChart";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Box,
Card,
Flex,
Heading,
ScrollArea,
Table,
Text,
} from "@radix-ui/themes";
import { ReactNode, useState } from "react";
import FilterChart from "./FilterChart";

export default function ChartCardWrapper({
data,
title,
}: {
data: Object;
title: string;
}) {
const [length, setLength] = useState(
Object.entries(data).length > 5 ? 5 : Object.entries(data).length,
);
if (Object.entries(data).length === 0) return null;
return (
<Card>
<Heading className="ml-3">
<Flex gap="4">
<Text>
{title} Top {length}
</Text>
<FilterChart
maxLength={Object.entries(data).length}
length={length}
setLength={setLength}
/>
</Flex>
</Heading>
<Box className="h-[20rem] w-full rounded-2xl bg-gray-400 p-2">
{Object.keys(data).length > 0 && (
<PieChart
sx={{
color: "green",
WebkitTextStrokeColor: "white",
fontWeight: "bold",
}}
series={[
{
data: Object.entries(data) // Convert object to array of [key, value] pairs
.slice(0, length) // Slice the first 'length' elements
.map(([name, count], index) => ({
// Map to the desired structure
id: index.toString(),
value: Number(count),
label: name,
})),
},
]}
/>
)}
</Box>
{Object.entries(data).length > 5 && (
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>See All Languages</AccordionTrigger>
<AccordionContent>
<Table.Root>
<ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Language</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Count</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{Object.entries(data).map(([name, count]) => (
<Table.Row key={name} className="hover:bg-black/30">
<Table.Cell>{name}</Table.Cell>
<Table.Cell>{count as ReactNode}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</ScrollArea>
</Table.Root>
</AccordionContent>
</AccordionItem>
</Accordion>
)}
</Card>
);
}
2 changes: 1 addition & 1 deletion components/stats/Charts/CreationDate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function CreationDate() {
category: year,
value: count,
}));
if (Object.keys(creationStats).length === 0) return null;
if (Object.entries(creationStats).length === 0) return null;
return (
<>
<Card>
Expand Down
2 changes: 1 addition & 1 deletion components/stats/Charts/GistCreationDate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function GistCreationDate() {
value: count,
}));

if (Object.keys(gistCreationStats).length === 0) return null;
if (Object.entries(gistCreationStats).length === 0) return null;
return (
<>
<Card>
Expand Down
92 changes: 4 additions & 88 deletions components/stats/Charts/Languages.tsx
Original file line number Diff line number Diff line change
@@ -1,96 +1,12 @@
"use client";
import "@/app/globals.css";
import { PieChart } from "@mui/x-charts/PieChart";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Box,
Card,
Flex,
Heading,
ScrollArea,
Table,
Text,
} from "@radix-ui/themes";
import { useContext, useState } from "react";
import FilterChart from "../FilterChart";
import { useContext } from "react";
import { StatsContext } from "@/app/context/StatsContext";
import ChartCardWrapper from "../ChartCardWrapper";

export default function Languages({}: {}) {
const statsContext = useContext(StatsContext);
const languages = statsContext?.languages ?? {};
const count = Object.values(languages);
const [length, setLength] = useState(
Object.keys(languages).length > 5 ? 5 : Object.keys(languages).length,
);
if (Object.keys(languages).length === 0) return null;
return (
<Card>
<Heading className="ml-3">
<Flex gap="4">
<Text>Top {length} Languages</Text>
<FilterChart
maxLength={Object.keys(languages).length}
length={length}
setLength={setLength}
/>
</Flex>
</Heading>
<Box className="h-[20rem] w-full rounded-2xl bg-gray-400 p-2">
{Object.keys(languages).length > 0 && (
<PieChart
sx={{
color: "green",
WebkitTextStrokeColor: "white",
fontWeight: "bold",
}}
series={[
{
data: Object.entries(languages) // Convert object to array of [key, value] pairs
.sort((a, b) => b[1] - a[1]) // Sort by count in descending order
.slice(0, length) // Slice the first 'length' elements
.map(([name, count], index) => ({
// Map to the desired structure
id: index.toString(),
value: Number(count),
label: name,
})),
},
]}
/>
)}
</Box>
{Object.keys(languages).length > 5 && (
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>See All Languages</AccordionTrigger>
<AccordionContent>
<Table.Root>
<ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Language</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Count</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{Object.entries(languages).map(([name, count]) => (
<Table.Row key={name} className="hover:bg-black/30">
<Table.Cell>{name}</Table.Cell>
<Table.Cell>{count}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</ScrollArea>
</Table.Root>
</AccordionContent>
</AccordionItem>
</Accordion>
)}
</Card>
);
if (Object.entries(languages).length === 0) return null;
return <ChartCardWrapper data={languages} title="Languages" />;
}
111 changes: 5 additions & 106 deletions components/stats/Charts/Licenses.tsx
Original file line number Diff line number Diff line change
@@ -1,113 +1,12 @@
"use client";
import "@/app/globals.css";
import { PieChart } from "@mui/x-charts/PieChart";
import { BarChart } from "@mui/x-charts/BarChart";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Box,
Card,
Flex,
Heading,
ScrollArea,
Table,
Text,
} from "@radix-ui/themes";
import FilterChart from "../FilterChart";
import { useContext, useState } from "react";
import { useContext } from "react";
import { StatsContext } from "@/app/context/StatsContext";
import ChartCardWrapper from "../ChartCardWrapper";

export default function Licenses() {
const statContext = useContext(StatsContext);
const licenses = statContext?.licenses ?? {}; // Provide an empty object as default
const count = Object.values(licenses);
const [length, setLength] = useState(
Object.keys(licenses).length > 5 ? 5 : Object.keys(licenses).length,
);
if (Object.keys(licenses).length === 0) return null;
return (
<Card>
<Heading className="ml-3">
<Flex gap="4">
<Text>Top {length} Licenses</Text>
<FilterChart
maxLength={Object.keys(licenses).length}
length={length}
setLength={setLength}
/>
</Flex>
</Heading>
<Box className="block h-[20rem] w-full rounded-2xl bg-gray-400 md:hidden">
<PieChart
sx={{
color: "green",
WebkitTextStrokeColor: "white",
fontWeight: "bold",
}}
series={[
{
data: Object.keys(licenses)
.slice(0, length)
.map((lang, index) => ({
id: index.toString(),
value: count[index],
label: lang,
})) as {
id: string;
value: number;
label: string;
}[],
},
]}
/>
</Box>
<Box className="hidden h-[20rem] w-full rounded-2xl bg-gray-400 md:block">
<BarChart
xAxis={[
{
id: "barCategories",
data: Object.keys(licenses).slice(0, length),
scaleType: "band",
},
]}
series={[
{
data: Object.values(licenses).slice(0, length) as number[],
},
]}
/>
</Box>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>See All Licenses</AccordionTrigger>
<AccordionContent>
<Table.Root>
<ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>License</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Count</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{Object.entries(licenses)
.sort((a, b) => (b[1] as number) - (a[1] as number))
.map(([topic, count]) => (
<Table.Row key={topic} className="hover:bg-black/30">
<Table.Cell>{topic}</Table.Cell>
<Table.Cell>{String(count)}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</ScrollArea>
</Table.Root>
</AccordionContent>
</AccordionItem>
</Accordion>
</Card>
);
const licenses = statContext?.licenses ?? {};
if (Object.entries(licenses).length === 0) return null;
return <ChartCardWrapper data={licenses} title="Licenses" />;
}
Loading

1 comment on commit 0287675

@vercel
Copy link

@vercel vercel bot commented on 0287675 Feb 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.