mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-09 00:18:00 +01:00
feat: activity chart now shows full year (#8690)
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:
parent
d6c03fdbfa
commit
73c608c578
@ -19,7 +19,31 @@ const TitleContainer = styled('h4')({
|
|||||||
|
|
||||||
type Output = { date: string; count: number; level: number };
|
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);
|
const countArray = inputData.map((item) => item.count);
|
||||||
|
|
||||||
// Step 2: Get all counts, sort them, and find the cut-off values for percentiles
|
// 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
|
// Step 4: Convert the map back to an array and assign levels
|
||||||
return inputData
|
return inputData.map(({ date, count }) => ({
|
||||||
.map(({ date, count }) => ({
|
date,
|
||||||
date,
|
count,
|
||||||
count,
|
level: calculateLevel(count),
|
||||||
level: calculateLevel(count),
|
}));
|
||||||
}))
|
};
|
||||||
.reverse();
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ProjectActivity = () => {
|
export const ProjectActivity = () => {
|
||||||
const projectId = useRequiredPathParam('projectId');
|
const projectId = useRequiredPathParam('projectId');
|
||||||
@ -65,6 +87,7 @@ export const ProjectActivity = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const levelledData = transformData(data.activityCountByDate);
|
const levelledData = transformData(data.activityCountByDate);
|
||||||
|
const fullData = ensureFullYearData(levelledData);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -73,7 +96,7 @@ export const ProjectActivity = () => {
|
|||||||
<TitleContainer>Activity in project</TitleContainer>
|
<TitleContainer>Activity in project</TitleContainer>
|
||||||
<ActivityCalendar
|
<ActivityCalendar
|
||||||
theme={explicitTheme}
|
theme={explicitTheme}
|
||||||
data={levelledData}
|
data={fullData}
|
||||||
maxLevel={4}
|
maxLevel={4}
|
||||||
showWeekdayLabels={true}
|
showWeekdayLabels={true}
|
||||||
renderBlock={(block, activity) => (
|
renderBlock={(block, activity) => (
|
||||||
|
Loading…
Reference in New Issue
Block a user