saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes to contribution charts

Browse Source
This commit is contained in:
austinkelsay 2024-12-06 13:04:21 -06:00
parent 3ae85d5e7d
commit 003eecb551
No known key found for this signature in database
GPG Key ID: 44CB4EC6D9F2FA02
4 changed files with 153 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/charts/ActivityContributionChart.js
View File

@ -13,12 +13,12 @@ const ActivityContributionChart = ({ session }) => {
const activityData = {}; const activityData = {};
const allActivities = []; const allActivities = [];
// ... existing course activities processing ... // Process course activities
session.user.userCourses.forEach(courseProgress => { session.user.userCourses.forEach(courseProgress => {
if (courseProgress.started) { if (courseProgress.started) {
const startDate = new Date(courseProgress.startedAt); const startDate = new Date(courseProgress.startedAt);
startDate.setFullYear(new Date().getFullYear()); const date = new Date(startDate.getTime() - startDate.getTimezoneOffset() * 60000)
const date = startDate.toISOString().split('T')[0]; .toISOString().split('T')[0];
activityData[date] = (activityData[date] || 0) + 1; activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({ allActivities.push({
type: 'course_started', type: 'course_started',
@ -26,14 +26,48 @@ const ActivityContributionChart = ({ session }) => {
date: date date: date
}); });
} }
// ... rest of the course processing ... if (courseProgress.completed) {
const completeDate = new Date(courseProgress.completedAt);
const date = new Date(completeDate.getTime() - completeDate.getTimezoneOffset() * 60000)
.toISOString().split('T')[0];
activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({
type: 'course_completed',
name: courseProgress.course?.name,
date: date
});
}
}); });
// ... existing lesson activities processing ... // Process lesson activities
session.user.userLessons?.forEach(lessonProgress => { session.user.userLessons?.forEach(lessonProgress => {
// ... lesson processing ... if (lessonProgress.opened) {
const openDate = new Date(lessonProgress.openedAt);
const date = new Date(openDate.getTime() - openDate.getTimezoneOffset() * 60000)
.toISOString().split('T')[0];
activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({
type: 'lesson_started',
name: lessonProgress.lesson?.name,
date: date
});
}
if (lessonProgress.completed) {
const completeDate = new Date(lessonProgress.completedAt);
const date = new Date(completeDate.getTime() - completeDate.getTimezoneOffset() * 60000)
.toISOString().split('T')[0];
activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({
type: 'lesson_completed',
name: lessonProgress.lesson?.name,
date: date
});
}
}); });
console.log('All Learning Activities:', allActivities);
console.log('Activities by Date:', activityData);
setContributionData(activityData); setContributionData(activityData);
setTotalActivities(Object.values(activityData).reduce((a, b) => a + b, 0)); setTotalActivities(Object.values(activityData).reduce((a, b) => a + b, 0));
@ -47,30 +81,52 @@ const ActivityContributionChart = ({ session }) => {
const getColor = useCallback((count) => { const getColor = useCallback((count) => {
if (count === 0) return 'bg-gray-100'; if (count === 0) return 'bg-gray-100';
if (count === 1) return 'bg-purple-300'; if (count < 3) return 'bg-green-300';
if (count === 2) return 'bg-purple-400'; if (count < 6) return 'bg-green-400';
if (count === 3) return 'bg-purple-600'; if (count < 12) return 'bg-green-600';
return 'bg-purple-700'; return 'bg-green-700';
}, []); }, []);
const generateCalendar = useCallback(() => { const generateCalendar = useCallback(() => {
const today = new Date(); const today = new Date();
const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); today.setHours(23, 59, 59, 999);
const calendar = [];
// Create 7 rows for days of the week // Calculate the start date (52 weeks + remaining days to today)
const oneYearAgo = new Date(today);
oneYearAgo.setDate(today.getDate() - 364);
// Start from the first Sunday before or on oneYearAgo
const startDate = new Date(oneYearAgo);
startDate.setDate(startDate.getDate() - startDate.getDay());
const calendar = [];
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
calendar[i] = []; calendar[i] = [];
} }
// Fill in the dates // Fill in the dates by week columns
for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) { let currentDate = new Date(startDate);
const dateString = d.toISOString().split('T')[0]; while (currentDate <= today) {
const weekDay = currentDate.getDay();
// Use local timezone date string instead of ISO string
const dateString = currentDate.toLocaleDateString('en-CA'); // YYYY-MM-DD format
const activityCount = contributionData[dateString] || 0; const activityCount = contributionData[dateString] || 0;
calendar[d.getDay()].push({
date: new Date(d), // Debug log
if (activityCount > 0) {
console.log('Found activity:', {
date: currentDate.toDateString(),
dateString,
activityCount
});
}
calendar[weekDay].push({
date: new Date(currentDate),
count: activityCount count: activityCount
}); });
currentDate.setDate(currentDate.getDate() + 1);
} }
return calendar; return calendar;
@ -78,22 +134,33 @@ const ActivityContributionChart = ({ session }) => {
const getMonthLabels = useCallback(() => { const getMonthLabels = useCallback(() => {
const today = new Date(); const today = new Date();
const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); today.setHours(23, 59, 59, 999);
// Calculate exactly 52 weeks back
const oneYearAgo = new Date(today);
oneYearAgo.setDate(today.getDate() - 364);
// Start from the first Sunday
const startDate = new Date(oneYearAgo);
startDate.setDate(startDate.getDate() - startDate.getDay());
const months = []; const months = [];
let currentMonth = -1; let currentMonth = -1;
const calendar = generateCalendar(); const calendar = generateCalendar();
for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) { let currentDate = new Date(startDate);
const month = d.getMonth(); while (currentDate <= today) {
const month = currentDate.getMonth();
if (month !== currentMonth) { if (month !== currentMonth) {
months.push({ months.push({
name: d.toLocaleString('default', { month: 'short' }), name: currentDate.toLocaleString('default', { month: 'short' }),
index: calendar[0].findIndex( index: calendar[0].findIndex(
(_, weekIndex) => calendar[0][weekIndex]?.date.getMonth() === month (_, weekIndex) => calendar[0][weekIndex]?.date.getMonth() === month
) )
}); });
currentMonth = month; currentMonth = month;
} }
currentDate.setDate(currentDate.getDate() + 1);
} }
return months; return months;
}, [generateCalendar]); }, [generateCalendar]);
@ -108,7 +175,7 @@ const ActivityContributionChart = ({ session }) => {
{totalActivities} learning activities in the last year {totalActivities} learning activities in the last year
</h4> </h4>
<i className="pi pi-question-circle text-lg cursor-pointer text-gray-400 hover:text-gray-200" <i className="pi pi-question-circle text-lg cursor-pointer text-gray-400 hover:text-gray-200"
data-pr-tooltip="Total number of learning activities (starting/completing courses and lessons)" /> data-pr-tooltip="Total number of learning activities on the platform" />
<Tooltip target=".pi-question-circle" position="top" /> <Tooltip target=".pi-question-circle" position="top" />
</div> </div>
<div className="flex"> <div className="flex">
@ -160,10 +227,10 @@ const ActivityContributionChart = ({ session }) => {
<span className="mr-2">Less</span> <span className="mr-2">Less</span>
<div className="flex gap-[3px]"> <div className="flex gap-[3px]">
<div className="w-[13px] h-[13px] bg-gray-100 rounded-[2px]"></div> <div className="w-[13px] h-[13px] bg-gray-100 rounded-[2px]"></div>
<div className="w-[13px] h-[13px] bg-purple-300 rounded-[2px]"></div> <div className="w-[13px] h-[13px] bg-green-300 rounded-[2px]"></div>
<div className="w-[13px] h-[13px] bg-purple-400 rounded-[2px]"></div> <div className="w-[13px] h-[13px] bg-green-400 rounded-[2px]"></div>
<div className="w-[13px] h-[13px] bg-purple-600 rounded-[2px]"></div> <div className="w-[13px] h-[13px] bg-green-600 rounded-[2px]"></div>
<div className="w-[13px] h-[13px] bg-purple-700 rounded-[2px]"></div> <div className="w-[13px] h-[13px] bg-green-700 rounded-[2px]"></div>
</div> </div>
<span className="ml-2">More</span> <span className="ml-2">More</span>
</div> </div>

49
src/components/charts/CombinedContributionChart.js
View File

@ -17,8 +17,8 @@ const CombinedContributionChart = ({ username, session }) => {
session.user.userCourses.forEach(courseProgress => { session.user.userCourses.forEach(courseProgress => {
if (courseProgress.started) { if (courseProgress.started) {
const startDate = new Date(courseProgress.startedAt); const startDate = new Date(courseProgress.startedAt);
startDate.setFullYear(new Date().getFullYear()); const date = new Date(startDate.getTime() - startDate.getTimezoneOffset() * 60000)
const date = startDate.toISOString().split('T')[0]; .toLocaleDateString('en-CA');
activityData[date] = (activityData[date] || 0) + 1; activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({ allActivities.push({
type: 'course_started', type: 'course_started',
@ -28,8 +28,8 @@ const CombinedContributionChart = ({ username, session }) => {
} }
if (courseProgress.completed) { if (courseProgress.completed) {
const completeDate = new Date(courseProgress.completedAt); const completeDate = new Date(courseProgress.completedAt);
completeDate.setFullYear(new Date().getFullYear()); const date = new Date(completeDate.getTime() - completeDate.getTimezoneOffset() * 60000)
const date = completeDate.toISOString().split('T')[0]; .toLocaleDateString('en-CA');
activityData[date] = (activityData[date] || 0) + 1; activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({ allActivities.push({
type: 'course_completed', type: 'course_completed',
@ -43,8 +43,8 @@ const CombinedContributionChart = ({ username, session }) => {
session.user.userLessons?.forEach(lessonProgress => { session.user.userLessons?.forEach(lessonProgress => {
if (lessonProgress.opened) { if (lessonProgress.opened) {
const openDate = new Date(lessonProgress.openedAt); const openDate = new Date(lessonProgress.openedAt);
openDate.setFullYear(new Date().getFullYear()); const date = new Date(openDate.getTime() - openDate.getTimezoneOffset() * 60000)
const date = openDate.toISOString().split('T')[0]; .toLocaleDateString('en-CA');
activityData[date] = (activityData[date] || 0) + 1; activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({ allActivities.push({
type: 'lesson_started', type: 'lesson_started',
@ -54,8 +54,8 @@ const CombinedContributionChart = ({ username, session }) => {
} }
if (lessonProgress.completed) { if (lessonProgress.completed) {
const completeDate = new Date(lessonProgress.completedAt); const completeDate = new Date(lessonProgress.completedAt);
completeDate.setFullYear(new Date().getFullYear()); const date = new Date(completeDate.getTime() - completeDate.getTimezoneOffset() * 60000)
const date = completeDate.toISOString().split('T')[0]; .toLocaleDateString('en-CA');
activityData[date] = (activityData[date] || 0) + 1; activityData[date] = (activityData[date] || 0) + 1;
allActivities.push({ allActivities.push({
type: 'lesson_completed', type: 'lesson_completed',
@ -116,26 +116,39 @@ const CombinedContributionChart = ({ username, session }) => {
const generateCalendar = useCallback(() => { const generateCalendar = useCallback(() => {
const today = new Date(); const today = new Date();
const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); today.setHours(23, 59, 59, 999);
const calendar = [];
// Create 7 rows for days of the week // Calculate the start date (52 weeks + remaining days to today)
const oneYearAgo = new Date(today);
oneYearAgo.setDate(today.getDate() - 364); // 52 weeks * 7 days = 364 days
// Start from the first Sunday before or on oneYearAgo
const startDate = new Date(oneYearAgo);
startDate.setDate(startDate.getDate() - startDate.getDay());
const calendar = [];
// Create 7 rows for days of the week (Sunday to Saturday)
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
calendar[i] = []; calendar[i] = [];
} }
// Fill in the dates // Fill in the dates by week columns
for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) { let currentDate = new Date(startDate);
const dateString = d.toISOString().split('T')[0]; while (currentDate <= today) {
const weekDay = currentDate.getDay();
const dateString = currentDate.toLocaleDateString('en-CA');
const githubCount = data?.contributionData[dateString] || 0; const githubCount = data?.contributionData[dateString] || 0;
const activityCount = (contributionData[dateString] || 0) - (data?.contributionData[dateString] || 0); const activityCount = (contributionData[dateString] || 0) - (data?.contributionData[dateString] || 0);
const totalCount = githubCount + activityCount; const totalCount = githubCount + activityCount;
calendar[d.getDay()].push({
date: new Date(d), calendar[weekDay].push({
date: new Date(currentDate),
count: totalCount, count: totalCount,
githubCount, githubCount,
activityCount activityCount
}); });
currentDate.setDate(currentDate.getDate() + 1);
} }
return calendar; return calendar;
@ -146,7 +159,9 @@ const CombinedContributionChart = ({ username, session }) => {
const getMonthLabels = useCallback(() => { const getMonthLabels = useCallback(() => {
const today = new Date(); const today = new Date();
const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); const oneYearAgo = new Date(today);
oneYearAgo.setFullYear(today.getFullYear() - 1);
oneYearAgo.setDate(today.getDate() + 1);
const months = []; const months = [];
let currentMonth = -1; let currentMonth = -1;

16
src/components/profile/progress/UserProgress.js
View File

@ -4,7 +4,16 @@ import { Accordion, AccordionTab } from 'primereact/accordion';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
const allTasks = [ const allTasks = [
{ status: 'Create Account', completed: true, tier: 'Pleb', courseId: null }, {
status: 'Connect GitHub',
completed: false,
tier: 'Pleb',
courseId: null,
subTasks: [
{ status: 'Create First GitHub Repo', completed: false },
{ status: 'Push Commit', completed: false }
]
},
{ {
status: 'PlebDevs Starter', status: 'PlebDevs Starter',
completed: false, completed: false,
@ -32,7 +41,7 @@ const allTasks = [
tier: 'Plebdev', tier: 'Plebdev',
courseId: 'f6825391-831c-44da-904a-9ac3d149b7be', courseId: 'f6825391-831c-44da-904a-9ac3d149b7be',
subTasks: [ subTasks: [
{status: 'Complete the course', completed: false}, { status: 'Complete the course', completed: false },
{ status: 'Submit Link to completed project', completed: false }, { status: 'Submit Link to completed project', completed: false },
] ]
}, },
@ -115,7 +124,7 @@ const UserProgress = () => {
return ( return (
<div className="bg-gray-800 rounded-3xl p-6 w-[500px] max-mob:w-full max-tab:w-full mx-auto my-8"> <div className="bg-gray-800 rounded-3xl p-6 w-[500px] max-mob:w-full max-tab:w-full mx-auto my-8">
<h1 className="text-3xl font-bold text-white mb-2">Dev Journey (coming soon)</h1> <h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1>
<p className="text-gray-400 mb-4">Track your progress from Pleb to Plebdev</p> <p className="text-gray-400 mb-4">Track your progress from Pleb to Plebdev</p>
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
@ -135,6 +144,7 @@ const UserProgress = () => {
<ul className="space-y-4 mb-6"> <ul className="space-y-4 mb-6">
{tasks.map((task, index) => ( {tasks.map((task, index) => (
console.log(task),
<li key={index}> <li key={index}>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center">

5
src/hooks/githubQueries/useFetchGithubCommits.js
View File

@ -5,8 +5,9 @@ export function useFetchGithubCommits(username, onCommitReceived) {
return useQuery({ return useQuery({
queryKey: ['githubCommits', username], queryKey: ['githubCommits', username],
queryFn: async () => { queryFn: async () => {
const oneYearAgo = new Date(); const today = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1); const oneYearAgo = new Date(today);
oneYearAgo.setDate(today.getDate() - 364); // Exactly 52 weeks
const commits = []; const commits = [];
const contributionData = {}; const contributionData = {};