Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

feat: activity chart now shows full year (#8690)

Browse Source 
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)
This commit is contained in:
Jaanus Sellin 2024-11-07 14:57:16 +02:00 committed by GitHub
parent d6c03fdbfa
commit 73c608c578
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/component/project/Project/ProjectStatus/ProjectActivity.tsx
View File

@ -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
@ -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');
@ -65,6 +87,7 @@ export const ProjectActivity = () => {
};
const levelledData = transformData(data.activityCountByDate);
const fullData = ensureFullYearData(levelledData);
return (
<>
@ -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) => (