Skip to content

Commit

Permalink
feat: activity chart now shows full year (#8690)
Browse files Browse the repository at this point in the history
Previously when there was no data, the activity chart showed as really
small. Now I am populating the start date and end date to draw out full
chart.


![image](https://github.com/user-attachments/assets/a051ad2e-6d62-4fa9-8cd0-7b5776f361d1)
  • Loading branch information
sjaanus authored Nov 7, 2024
1 parent d6c03fd commit 73c608c
Showing 1 changed file with 33 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,31 @@ const TitleContainer = styled('h4')({

type Output = { date: string; count: number; level: number };

export function transformData(inputData: ProjectActivitySchema): Output[] {
const ensureFullYearData = (data: Output[]): Output[] => {
const today = new Date();
const oneYearBack = new Date();
oneYearBack.setFullYear(today.getFullYear() - 1);

const formattedToday = today.toISOString().split('T')[0];
const formattedOneYearBack = oneYearBack.toISOString().split('T')[0];

const hasToday = data.some((item) => item.date === formattedToday);
const hasOneYearBack = data.some(
(item) => item.date === formattedOneYearBack,
);

if (!hasOneYearBack) {
data.unshift({ count: 0, date: formattedOneYearBack, level: 0 });
}

if (!hasToday) {
data.push({ count: 0, date: formattedToday, level: 0 });
}

return data;
};

const transformData = (inputData: ProjectActivitySchema): Output[] => {
const countArray = inputData.map((item) => item.count);

// Step 2: Get all counts, sort them, and find the cut-off values for percentiles
Expand All @@ -46,14 +70,12 @@ export function transformData(inputData: ProjectActivitySchema): Output[] {
};

// Step 4: Convert the map back to an array and assign levels
return inputData
.map(({ date, count }) => ({
date,
count,
level: calculateLevel(count),
}))
.reverse();
}
return inputData.map(({ date, count }) => ({
date,
count,
level: calculateLevel(count),
}));
};

export const ProjectActivity = () => {
const projectId = useRequiredPathParam('projectId');
Expand All @@ -65,6 +87,7 @@ export const ProjectActivity = () => {
};

const levelledData = transformData(data.activityCountByDate);
const fullData = ensureFullYearData(levelledData);

return (
<>
Expand All @@ -73,7 +96,7 @@ export const ProjectActivity = () => {
<TitleContainer>Activity in project</TitleContainer>
<ActivityCalendar
theme={explicitTheme}
data={levelledData}
data={fullData}
maxLevel={4}
showWeekdayLabels={true}
renderBlock={(block, activity) => (
Expand Down

0 comments on commit 73c608c

Please sign in to comment.