joshuacoles/revision-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sizing of the heatmap and make goal configurable

Browse Source
This commit is contained in:
Joshua Coles 2024-02-25 19:57:46 +00:00
parent f2dd382cf3
commit ec91f6df42
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/HeatMap.tsx
View File

@ -10,12 +10,16 @@ interface Props {
startDate: Date;
endDate: Date;
data: DateValue[];
className?: string;
goal: number;
}
function GitHubCalendarHeatmap({
startDate,
endDate,
data,
className,
goal
}: Props) {
const numDays = dFns.differenceInDays(endDate, startDate);
@ -30,7 +34,7 @@ function GitHubCalendarHeatmap({
const totalHeight = 8 * (squareSize + padding) + weekTotalPadding; // Added an extra row for week total
// Goal times for the daily and weekly squares
const dayGoalTime = 8;
const dayGoalTime = goal;
const weekGoalTime = 5 * dayGoalTime;
const getColorForValue = (value: number, goalTime: number): string => {
@ -53,9 +57,9 @@ function GitHubCalendarHeatmap({
};
const getWeekTotal = (weekIndex: number): number => {
const weekStart = dFns.addWeeks(dFns.startOfWeek(startDate, { weekStartsOn: 1 }), weekIndex);
const weekStart = dFns.addWeeks(dFns.startOfWeek(startDate, {weekStartsOn: 1}), weekIndex);
return data.filter(dv => dFns.isSameWeek(dv.date, weekStart, { weekStartsOn: 1 }))
return data.filter(dv => dFns.isSameWeek(dv.date, weekStart, {weekStartsOn: 1}))
.reduce((total, {count}) => total + count, 0);
};
@ -74,12 +78,12 @@ function GitHubCalendarHeatmap({
});
return (
<svg width={totalWidth} height={totalHeight}>
<svg width="100%" height="100%" viewBox={`0 0 ${totalWidth} ${totalHeight}`} className={className}>
{dateValues.map(({
date,
count
}) => {
const weekIndex = dFns.differenceInCalendarWeeks(date, startDate, { weekStartsOn: 1 });
const weekIndex = dFns.differenceInCalendarWeeks(date, startDate, {weekStartsOn: 1});
const dayOfWeek = (date.getDay() + 6) % 7;
const x = weekIndex * (squareSize + padding);

6
src/components/cards/calendarOverviewCard.tsx
View File

@ -56,7 +56,9 @@ export function CalendarOverviewCard({
return <Card className="col-span-1">
<Tooltip id="calendar-tooltip"/>
<Title>Overview</Title>
<HeatMap startDate={initialDate} endDate={endDate} data={calendarData}/>
<Title>Semester Overview</Title>
<div className="m-2">
<HeatMap startDate={initialDate} endDate={endDate} data={calendarData} goal={goal}/>
</div>
</Card>
}