Skip to content

Commit

Permalink
Add Follow Up
Browse files Browse the repository at this point in the history
  • Loading branch information
@devxprite
devxprite committed Mar 31, 2024
1 parent b9eb3c5 commit 2e9f2ae
Show file tree
Hide file tree
Showing 9 changed files with 329 additions and 28 deletions.
70 changes: 61 additions & 9 deletions app/[username]/ActivityGraph.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,31 @@
'use client';

import GridContainer from '@/components/GridContainer';
import { Bar } from 'react-chartjs-2';
import { Bar, Line } from 'react-chartjs-2';

const graphConfig = {
backgroundColor: 'rgba(256, 256, 256, 0.3)',
borderColor: 'rgba(256, 256, 256, 0.6)',
hoverBackgroundColor: 'rgba(256, 256, 256, 0.8)',
borderWidth: 1,
borderColor: 'rgba(256, 256, 256, 0.6)',
borderWidth: 2,
label: 'Commits',
tension: 0.3,
fill: true,
backgroundColor: 'rgba(256, 256, 256, 0.1)',
backgroundColor: context => {
const ctx = context.chart.ctx;
const gradient = ctx.createLinearGradient(0, 0, 0, 250);
gradient.addColorStop(0, 'rgba(256, 256, 256,0.4)');
gradient.addColorStop(1, 'rgba(256, 256, 256,0)');
return gradient;
},
};

const graphOptions = {
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
};

const ActivityGraph = ({ activity }) => {
Expand All @@ -26,16 +43,28 @@ const ActivityGraph = ({ activity }) => {
return acc;
}, []);

// last 30 days
const lastMonthActivity = activity.slice(-30).reduce((acc, curr) => {
const day = new Date(curr.date).toLocaleString('default', { month: 'short', day: '2-digit' });
if (!acc[day]) acc[day] = 0;
acc[day] += curr.contributionCount;
return acc;
}, []);

return (
<GridContainer name="Activity Graph" className={'grid-cols-1 gap-x-10 md:grid-cols-2'}>
<div className="">
<Bar
<GridContainer
name="Activity Graph"
className={'grid-cols-1 gap-x-10 md:grid-cols-2 [&>div]:h-60 [&>div]:md:h-72'}
>
<div>
<Line
options={{
plugins: {
title: {
text: 'Monthly Activity (1 year)',
},
},
...graphOptions,
}}
data={{
labels: Object.keys(monthlyActivity),
Expand All @@ -48,10 +77,12 @@ const ActivityGraph = ({ activity }) => {
}}
/>
</div>
<div className="">
<Bar
<div>
<Line
title="Activity Graph"
options={{
...graphOptions,

plugins: {
title: {
text: 'Weekly Activity (1 Year)',
Expand All @@ -69,6 +100,27 @@ const ActivityGraph = ({ activity }) => {
}}
/>
</div>
<div className="col-span-full md:mt-8">
<Line
options={{
...graphOptions,
plugins: {
title: {
text: 'Last 30 days',
},
},
}}
data={{
labels: Object.keys(lastMonthActivity),
datasets: [
{
data: Object.values(lastMonthActivity),
...graphConfig,
},
],
}}
/>
</div>
</GridContainer>
);
};
Expand Down
6 changes: 4 additions & 2 deletions app/[username]/Charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,13 @@ const borderColor = [

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 px-6 '}>
<GridContainer name="Charts" className={'grid-cols-2 gap-0 gap-y-6 px-6 md:grid-cols-4 md:gap-8 '}>
<div className="">
<Doughnut
title="Commits per Repo"
options={{ plugins: { title: { text: 'Commits per Repo' } } }}
options={{
plugins: { title: { text: 'Commits per Repo' } },
}}
data={{
labels: Object.keys(commitsPerRepo),
datasets: [
Expand Down
93 changes: 93 additions & 0 deletions app/[username]/FollowUp.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
'use client';

import GridContainer from '@/components/GridContainer';
import { Bar, Doughnut, Line, Radar } from 'react-chartjs-2';

const backgroundColor = [
'rgba(153, 102, 255, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(201, 203, 207, 0.5)',
'rgba(255, 99, 132, 0.5)',
];

const borderColor = [
'rgba(153, 102, 255, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(201, 203, 207, 0.8)',
'rgba(255, 99, 132, 0.8)',
];

const chartConfig = {
backgroundColor,
borderColor,
};

const FollowUp = ({ follwoup }) => {
const { issues_by_user, pr_by_user, issues_on_user, pr_on_user, login } = follwoup;

return (
<GridContainer name="Follow Up" className={'grid-cols-2 gap-x-10 md:grid-cols-4'}>
<div>
<Doughnut
options={{ plugins: { title: { text: `Issues opened by ${login}` } } }}
data={{
labels: Object.keys(issues_by_user),
datasets: [
{
data: Object.values(issues_by_user),
...chartConfig,
},
],
}}
/>
</div>

<div>
<Doughnut
options={{ plugins: { title: { text: `Pull Requests by ${login}` } } }}
data={{
labels: Object.keys(pr_by_user),
datasets: [
{
data: Object.values(pr_by_user),
...chartConfig,
},
],
}}
/>
</div>

<div>
<Doughnut
options={{ plugins: { title: { text: `Issues opened on ${login}'s repos` } } }}
data={{
labels: Object.keys(issues_on_user),
datasets: [
{
data: Object.values(issues_on_user),
...chartConfig,
},
],
}}
/>
</div>

<div>
<Doughnut
options={{ plugins: { title: { text: `Pull Requests opened on ${login}'s repos` } } }}
data={{
labels: Object.keys(pr_on_user),
datasets: [
{
data: Object.values(pr_on_user),
...chartConfig,
},
],
}}
/>
</div>
</GridContainer>
);
};

export default FollowUp;
39 changes: 39 additions & 0 deletions app/[username]/RecentActivity.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// 'use client';

import GridContainer from '@/components/GridContainer';
import { IoGitPullRequestSharp, IoGitMergeSharp } from 'react-icons/io5';
import { RiGitClosePullRequestLine } from 'react-icons/ri';

const PrIcon = ({ status }) => {
if (status === 'MERGED') {
return (
<div className="rounded bg-purple-500 p-[3px] text-white">
<IoGitMergeSharp />
</div>
);
}

if (status === 'CLOSED') {
return (
<div className="rounded bg-red-500 p-[3px] text-white">
<RiGitClosePullRequestLine />
</div>
);
}

return (
<div className="rounded bg-green-600 p-[3px] text-white">
<IoGitPullRequestSharp />
</div>
);
};

const RecentActivity = ({ activity }) => {
return (
<GridContainer name="Recent Activity" className={'grid-cols-1 md:grid-cols-3'}>

</GridContainer>
);
};

export default RecentActivity;
5 changes: 5 additions & 0 deletions app/[username]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import Charts from './Charts';
import ActivityGraph from './ActivityGraph';
import TopContributions from './TopContributions';
import Languages from './Languages';
import RecentActivity from './RecentActivity';
import FollowUp from './FollowUp';

const page = async ({ params: { username } }) => {
console.log('Username:', username);
Expand All @@ -24,6 +26,7 @@ const page = async ({ params: { username } }) => {
popularRepositories,
userStats,
topContributions,
followUp,
} = await fetchUserData(username);

return (
Expand All @@ -33,13 +36,15 @@ const page = async ({ params: { username } }) => {
<Languages languages={languagesSize} />
<PopularProjects projects={popularRepositories} />
<TopContributions contributions={topContributions} />
<RecentActivity />

<Charts
commitsPerRepo={commitsPerRepo}
reposPerLanguages={reposPerLanguages}
starsPerRepo={starsPerRepo}
starsPerLanguages={starsPerLanguages}
/>
<FollowUp follwoup={followUp} />
<ActivityGraph activity={contributionCalendar} />
<Calendar contributions={contributionCalendar} />
</main>
Expand Down
37 changes: 27 additions & 10 deletions components/ChartInit.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
'use client';

import colors from 'tailwindcss/colors';
import {
Chart as ChartJS,
ArcElement,
CategoryScale,
Tooltip,
Legend,
Colors,
Title,
Filler,
LinearScale,
BarElement,
PointElement,
Expand All @@ -19,6 +18,7 @@ ChartJS.register(
ArcElement,
LineElement,
RadialLinearScale,
Filler,
PointElement,
Tooltip,
Legend,
Expand All @@ -41,16 +41,33 @@ ChartJS.defaults.plugins.legend.labels.usePointStyle = true;

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

ChartJS.defaults.scale.grid.color = 'rgba(256, 256, 256, 0.07)';


// ChartJS.register({
// afterDraw: chart => {
// if (chart.data.datasets[0].data.length === 0) {
// var ctx = chart.chart.ctx;
// ctx.save();
// ctx.textAlign = 'center';
// ctx.textBaseline = 'middle';
// ctx.font = "22px Arial";
// ctx.fillStyle = "gray";
// ctx.fillText('No data available', chart.chart.width / 2, chart.chart.height / 2);
// ctx.restore();
// }
// }
// })

ChartJS.defaults.backgroundColor = [
'rgba(255, 99, 132, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 205, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(201, 203, 207, 0.6)',
'rgba(255, 99, 132, 0.5)',
'rgba(255, 159, 64, 0.5)',
'rgba(255, 205, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(201, 203, 207, 0.5)',
];

const ChartInit = () => {
Expand Down
2 changes: 1 addition & 1 deletion components/GridContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const GridContainer = ({ name, className, children }) => {
<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 bg-gray-800/50 p-3 md:grid-cols-5 md:p-5', className)}>
{children}
{children.length === 0 && (
{children?.length === 0 && (
<div className="col-span-full flex w-full items-center justify-center py-8 md:text-lg">
<p className="text-gray-500">Not enough data.</p>
</div>
Expand Down
Loading

0 comments on commit 2e9f2ae

Please sign in to comment.