Skip to content

Commit

Permalink
Add Charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@devXprite
devXprite committed Mar 30, 2024
1 parent 456beee commit 598432b
Show file tree
Hide file tree
Showing 12 changed files with 187 additions and 27 deletions.
76 changes: 76 additions & 0 deletions app/[username]/Charts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
'use client';

import GridContainer from '@/components/GridContainer';
import { Doughnut } from 'react-chartjs-2';

const Charts = ({ commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages }) => {
return (
<GridContainer name="Charts" className={'grid-cols-2 gap-0 gap-y-6 md:grid-cols-4 md:gap-8 '}>
<div className="">
<Doughnut
title="Commits per Repo"
options={{ plugins: { title: { text: 'Commits per Repo' } } }}
data={{
labels: Object.keys(commitsPerRepo),
datasets: [
{
label: 'Commits',
data: Object.values(commitsPerRepo),
},
],
}}
/>
</div>

<div className="">
<Doughnut
title="Stars per Repo"
options={{ plugins: { title: { text: 'Stars per Repo' } } }}
data={{
labels: Object.keys(starsPerRepo),
datasets: [
{
label: 'Stars',
data: Object.values(starsPerRepo),
},
],
}}
/>
</div>

<div className="">
<Doughnut
title="Repos Per Language"
options={{ plugins: { title: { text: 'Repos Per Language' } } }}
data={{
labels: Object.keys(reposPerLanguages),
datasets: [
{
label: 'Repo',
data: Object.values(reposPerLanguages),
},
],
}}
/>
</div>

<div className="">
<Doughnut
title="Stars Per Language"
options={{ plugins: { title: { text: 'Stars Per Language' } } }}
data={{
labels: Object.keys(starsPerLanguages),
datasets: [
{
label: 'Stars',
data: Object.values(starsPerLanguages),
},
],
}}
/>
</div>
</GridContainer>
);
};

export default Charts;
6 changes: 3 additions & 3 deletions app/[username]/Languages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ const Languages = ({ languages }) => {
return (
<GridContainer name="Most Used Languages" className={'md:grid-cols-4'}>
{languages.map(({ name, size }) => (
<div key={name} className="box group flex items-center justify-around gap-6 p-3">
<div key={name} className="box group flex items-center justify-around gap-4 p-3">
<LanguageIcon
name={name}
className="size-10 transition-all duration-300 group-hover:grayscale-0 group-hover:rotate-y-180"
className="size-8 md:size-10 transition-all duration-300 group-hover:grayscale-0 group-hover:rotate-y-180"
/>
<div>
<p className="font-[Electrolize] text-xl font-bold">
<p className="font-[Electrolize] text-lg md:text-xl font-bold">
<CountUp start={0} end={size} decimals={2} />
<span className="ml-1 text-lg">%</span>
</p>
Expand Down
12 changes: 6 additions & 6 deletions app/[username]/PopularProjects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const PopularProjects = ({ projects }) => {
</h3>
<p className="mb-3 mt-2 line-clamp-3 text-sm font-medium text-gray-400">{project.description}</p>

<div className="mt-auto flex items-center gap-5 text-sm font-medium">
<div className="mt-auto flex items-center justify-between md:justify-start gap-4 text-sm font-medium">
{/* Language */}
<p className="flex items-center gap-2 text-gray-300">
<span
Expand All @@ -29,16 +29,16 @@ const PopularProjects = ({ projects }) => {
<span>{project.primaryLanguage.name}</span>
</p>
<p className="flex items-center gap-1">
<FaRegStar className="text-base" /> {project.stargazerCount}
<FaRegStar /> {project.stargazerCount}
</p>
<p className="flex items-center gap-1">
<GoRepoForked className="text-base" /> {project.forkCount}
<GoRepoForked /> {project.forkCount}
</p>
<p className="flex items-center gap-1">
<GoIssueOpened className="text-base" /> {project.issues.totalCount}
<p className="hidden md:flex items-center gap-1">
<GoIssueOpened /> {project.issues.totalCount}
</p>
<p className="flex items-center gap-1">
<FaCodePullRequest className="text-base" /> {project.pullRequests.totalCount}
<FaCodePullRequest /> {project.pullRequests.totalCount}
</p>
</div>
</div>
Expand Down
27 changes: 17 additions & 10 deletions app/[username]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,33 @@ import fetchCalendar from '@/utils/fetchCalendar';
import fetchUserInfo from '@/utils/fetchUserInfo';
import fetchAdditionalData from '@/utils/fetchAdditionalData';
import fetchPopularProjects from '@/utils/fetchPopularProjects';

import Charts from './Charts';

const page = async ({ params: { username } }) => {
console.log('Username:', username);

const userInfo = await fetchUserInfo(username);
const userStats = await fetchStats(username);
const userCalendar = await fetchCalendar(username);
const popularProjects = await fetchPopularProjects(username);
const {languages} = await fetchAdditionalData(username);


// const userStats = await fetchStats(username);
// const userCalendar = await fetchCalendar(username);
// const popularProjects = await fetchPopularProjects(username);
// const { languages, commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages } =
// await fetchAdditionalData(username);

return (
<main className="mx-auto max-w-screen-xl space-y-8 px-2 pb-10 pt-16 md:space-y-16">
<main className="mx-auto max-w-screen-xl space-y-8 px-3 pb-10 pt-16 md:space-y-16">
<UserInfo {...userInfo} />
<Stats {...userStats} />
{/* <Stats {...userStats} />
<Languages languages={languages} />
<PopularProjects projects={popularProjects} />
<Calendar contributions={userCalendar} />
<Charts
commitsPerRepo={commitsPerRepo}
reposPerLanguages={reposPerLanguages}
starsPerRepo={starsPerRepo}
starsPerLanguages={starsPerLanguages}
/>
<Calendar contributions={userCalendar} /> */}
</main>
);
};
Expand Down
2 changes: 1 addition & 1 deletion app/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
@apply cursor-pointer rounded border border-gray-600 select-none bg-gray-700/25 px-3 py-2 text-center shadow-md shadow-gray-900 transition-all duration-300;

&:hover {
@apply scale-105 border-2 border-gray-300 bg-gray-700 shadow-lg shadow-gray-950;
@apply md:scale-105 border-2 border-gray-300 bg-gray-700 shadow-lg shadow-gray-950;
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions app/layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import GithubCorner from '@/components/GithubCorner';
import './globals.scss';
import ParticlesJs from '@/components/ParticlesJs';
import ChartInit from '@/components/ChartInit';

export const metadata = {
title: 'Create Next App',
Expand All @@ -11,6 +12,7 @@ export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ChartInit />
<ParticlesJs />
<GithubCorner />
{children}
Expand Down
33 changes: 33 additions & 0 deletions components/ChartInit.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
'use client';

import colors from 'tailwindcss/colors';
import { Chart as ChartJS, ArcElement, Tooltip, Legend, Colors, Title } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend, Title, Colors);

ChartJS.defaults.plugins.colors.forceOverride = true;

ChartJS.defaults.plugins.legend.position = 'bottom';
ChartJS.defaults.plugins.legend.align = 'center';
ChartJS.defaults.plugins.legend.display = false;

ChartJS.defaults.plugins.legend.labels.color = 'white';

ChartJS.defaults.plugins.legend.labels.pointStyle = 'rect';
ChartJS.defaults.plugins.legend.labels.usePointStyle = true;

ChartJS.defaults.plugins.title.display = true;
ChartJS.defaults.plugins.title.color = 'white';
// ChartJS.defaults.plugins.title.padding = { top: 10, bottom: 30 };


// shuffle colors
let bgColors = Object.values(colors.zinc);
bgColors = bgColors.sort(() => Math.random() - 0.5);

// ChartJS.defaults.backgroundColor = bgColors;

const ChartInit = () => {
return <div></div>;
};

export default ChartInit;
2 changes: 1 addition & 1 deletion components/GridContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const GridContainer = ({ name, className, children }) => {
return (
<section className="rounded-md border border-gray-700 bg-gray-900 shadow-lg shadow-black">
<h3 className="bg-gray-800 px-5 py-3 text-xl font-semibold text-gray-200">{name}</h3>
<div className={twMerge('grid grid-cols-2 gap-4 p-5 md:grid-cols-5 bg-gray-800/50', className)}>{children}</div>
<div className={twMerge('grid grid-cols-2 gap-4 p-3 md:p-5 md:grid-cols-5 bg-gray-800/50', className)}>{children}</div>
</section>
);
};
Expand Down
1 change: 0 additions & 1 deletion components/ParticlesJs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ const config = {
};

const ParticlesJs = () => {

const onLoad = () => {
window.particlesJS('particles-js', config);
};
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@
"@octokit/graphql": "^8.0.1",
"@tippyjs/react": "^4.2.6",
"axios": "^1.6.8",
"chart.js": "^4.0.0",
"next": "14.1.4",
"react": "^18",
"react-chartjs-2": "^5.0.0",
"react-countup": "^6.5.3",
"react-dom": "^18",
"react-icons": "^5.0.1",
Expand All @@ -27,4 +29,4 @@
"prettier-plugin-tailwindcss": "^0.5.12",
"tailwindcss": "^3.3.0"
}
}
}
27 changes: 27 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 18 additions & 4 deletions utils/fetchAdditionalData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const getLanguagesData = repos => {

const getCommitsPerRepo = repos => {
const reposObj = {};
repos.forEach(repo => {
repos.slice(0, 10).forEach(repo => {
const commits = repo.defaultBranchRef.target.history.totalCount;
reposObj[repo.name] = commits;
});
Expand All @@ -35,7 +35,7 @@ const getCommitsPerRepo = repos => {

const getStarsPerRepo = repos => {
const reposObj = {};
repos.forEach(repo => (reposObj[repo.name] = repo.stargazerCount));
repos.slice(0, 10).forEach(repo => (reposObj[repo.name] = repo.stargazerCount));
return reposObj;
};

Expand All @@ -52,14 +52,27 @@ const getReposPerLanguages = repos => {
return languages;
};

const getStarsPerLanguages = repos => {
const languages = {};

repos.forEach(repo => {
repo.languages.edges.forEach(({ node: { name } }) => {
if (languages[name]) languages[name] += repo.stargazerCount;
else languages[name] = repo.stargazerCount;
});
});

return languages;
};

const fetchAdditionalData = async login => {
const query = `
query ($username: String!) {
user(login: $username) {
repositories(
ownerAffiliations: OWNER
isFork: false
first: 10
first: 20
orderBy: {field: STARGAZERS, direction: DESC}
) {
nodes {
Expand Down Expand Up @@ -95,8 +108,9 @@ const fetchAdditionalData = async login => {
const commitsPerRepo = getCommitsPerRepo(repositories);
const starsPerRepo = getStarsPerRepo(repositories);
const reposPerLanguages = getReposPerLanguages(repositories);
const starsPerLanguages = getStarsPerLanguages(repositories);

return { languages, commitsPerRepo, starsPerRepo, reposPerLanguages };
return { languages, commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages };
};

export default fetchAdditionalData;

0 comments on commit 598432b

Please sign in to comment.