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; startDate: Date;
endDate: Date; endDate: Date;
data: DateValue[]; data: DateValue[];
className?: string;
goal: number;
} }
function GitHubCalendarHeatmap({ function GitHubCalendarHeatmap({
startDate, startDate,
endDate, endDate,
data, data,
className,
goal
}: Props) { }: Props) {
const numDays = dFns.differenceInDays(endDate, startDate); 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 const totalHeight = 8 * (squareSize + padding) + weekTotalPadding; // Added an extra row for week total
// Goal times for the daily and weekly squares // Goal times for the daily and weekly squares
const dayGoalTime = 8; const dayGoalTime = goal;
const weekGoalTime = 5 * dayGoalTime; const weekGoalTime = 5 * dayGoalTime;
const getColorForValue = (value: number, goalTime: number): string => { const getColorForValue = (value: number, goalTime: number): string => {
@ -53,9 +57,9 @@ function GitHubCalendarHeatmap({
}; };
const getWeekTotal = (weekIndex: number): number => { 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); .reduce((total, {count}) => total + count, 0);
}; };
@ -74,12 +78,12 @@ function GitHubCalendarHeatmap({
}); });
return ( return (
<svg width={totalWidth} height={totalHeight}> <svg width="100%" height="100%" viewBox={`0 0 ${totalWidth} ${totalHeight}`} className={className}>
{dateValues.map(({ {dateValues.map(({
date, date,
count count
}) => { }) => {
const weekIndex = dFns.differenceInCalendarWeeks(date, startDate, { weekStartsOn: 1 }); const weekIndex = dFns.differenceInCalendarWeeks(date, startDate, {weekStartsOn: 1});
const dayOfWeek = (date.getDay() + 6) % 7; const dayOfWeek = (date.getDay() + 6) % 7;
const x = weekIndex * (squareSize + padding); 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"> return <Card className="col-span-1">
<Tooltip id="calendar-tooltip"/> <Tooltip id="calendar-tooltip"/>
<Title>Overview</Title> <Title>Semester Overview</Title>
<HeatMap startDate={initialDate} endDate={endDate} data={calendarData}/> <div className="m-2">
<HeatMap startDate={initialDate} endDate={endDate} data={calendarData} goal={goal}/>
</div>
</Card> </Card>
} }