From bb8a8553b720c67cd05d57e1ede05dc43288c514 Mon Sep 17 00:00:00 2001 From: Topvennie Date: Tue, 16 Jul 2024 20:35:40 +0200 Subject: [PATCH] vinvoor: center graphs in the overview --- vinvoor/src/overview/Overview.tsx | 59 ++++++++++++++++++++---- vinvoor/src/overview/heatmap/Heatmap.tsx | 49 ++++++++++++++------ vinvoor/src/overview/heatmap/heatmap.css | 4 +- vinvoor/src/overview/heatmap/utils.ts | 2 +- vinvoor/src/overview/streak/Streak.tsx | 4 -- 5 files changed, 88 insertions(+), 30 deletions(-) diff --git a/vinvoor/src/overview/Overview.tsx b/vinvoor/src/overview/Overview.tsx index dbe0b10..37f5d01 100644 --- a/vinvoor/src/overview/Overview.tsx +++ b/vinvoor/src/overview/Overview.tsx @@ -1,6 +1,6 @@ import { Box, Paper, Switch, Typography } from "@mui/material"; import Grid from "@mui/material/Grid"; -import { createContext, useState } from "react"; +import { createContext, useEffect, useRef, useState } from "react"; import { BrowserView } from "react-device-detect"; import { Tooltip } from "react-tooltip"; import { LoadingSkeleton } from "../components/LoadingSkeleton"; @@ -26,35 +26,64 @@ export const Overview = () => { setScans, convertScanJSON ); - const [checked, setChecked] = useState(false); + const [checked, setChecked] = useState(true); + const daysRef = useRef(null); + const heatmapSwitchRef = useRef(null); + const [heatmapSwitchHeight, setHeatmapSwitchHeight] = useState(0); + const [paperHeight, setPaperHeight] = useState(0); const handleChange = (event: React.ChangeEvent) => { setChecked(event.target.checked); }; + useEffect(() => { + if (daysRef.current) { + setPaperHeight(daysRef.current.clientHeight); + } + + if (heatmapSwitchRef.current) { + setHeatmapSwitchHeight(heatmapSwitchRef.current.clientHeight); + } + }); + return ( - + - - + + Months { - - + + @@ -86,3 +122,6 @@ export const Overview = () => { ); }; + +// Current height of the heatmap is calculated using ref's and calculus +// TODO: Change it as it us very very very very very very ugly ^^ diff --git a/vinvoor/src/overview/heatmap/Heatmap.tsx b/vinvoor/src/overview/heatmap/Heatmap.tsx index b41a8bb..0189a5f 100644 --- a/vinvoor/src/overview/heatmap/Heatmap.tsx +++ b/vinvoor/src/overview/heatmap/Heatmap.tsx @@ -1,3 +1,4 @@ +import { Box } from "@mui/material"; import { FC, useContext } from "react"; import { MILLISECONDS_IN_ONE_DAY, shiftDate } from "../../util/util"; import { ScanContext } from "../Overview"; @@ -32,6 +33,7 @@ interface HeatmapProps { startDate: Date; endDate: Date; variant: HeatmapVariant; + maxHeight: number; } const getAllValues = ( @@ -64,7 +66,9 @@ const getAllValues = ( ); } else { return Array.from( - { length: getColumnCount(startDate, endDate, HeatmapVariant.DAYS) }, + { + length: getColumnCount(startDate, endDate, HeatmapVariant.DAYS), + }, (_, i) => { const start = shiftDate(startDate, i * DAYS_IN_WEEK); const count = Array.from({ @@ -83,17 +87,26 @@ const getAllValues = ( } }; -const getWeeksInMonth = (values: HeatmapItem[]): { [key: number]: number } => { +const getWeeksInMonth = ( + values: HeatmapItem[], + startDate: Date +): { [key: number]: number } => { const startYear = values[0].date.getFullYear(); return values.reduce( (acc, value) => { const index = (value.date.getFullYear() - startYear) * 12 + - value.date.getMonth(); + value.date.getMonth() - + startDate.getMonth(); acc[index] = (acc[index] || 0) + 1; return acc; }, - { 0: getEmpty(values[0].date, HeatmapVariant.MONTHS) } as { + { + [startDate.getMonth()]: getEmpty( + values[0].date, + HeatmapVariant.MONTHS + ), + } as { [key: number]: number; } ); @@ -132,7 +145,12 @@ const getTooltipDataAttrsForMonths = (value: HeatmapItem) => value.count !== 1 ? "s" : "" } on the week of ${dateTimeFormat.format(value.date)}`; -export const Heatmap: FC = ({ startDate, endDate, variant }) => { +export const Heatmap: FC = ({ + startDate, + endDate, + variant, + maxHeight, +}) => { const { scans } = useContext(ScanContext); const days = scans.map((scan) => scan.scanTime); @@ -147,7 +165,10 @@ export const Heatmap: FC = ({ startDate, endDate, variant }) => { )}`; const weeksInMonth = - variant === HeatmapVariant.MONTHS ? getWeeksInMonth(values) : {}; // Amount of weeks in each month + variant === HeatmapVariant.MONTHS + ? getWeeksInMonth(values, startDate) + : {}; // Amount of weeks in each month + const columns = getColumnCount(startDate, endDate, variant); // Amount of columns of squares const emptyStart = getEmpty(startDate, variant); // Amount of empty squares at the start const emptyEnd = getEmpty(endDate, variant); // Amount of empty squares at the end @@ -216,7 +237,7 @@ export const Heatmap: FC = ({ startDate, endDate, variant }) => { return ( - {MONTH_LABELS[column]} + {MONTH_LABELS[startDate.getMonth() + column]} ); }); @@ -224,11 +245,13 @@ export const Heatmap: FC = ({ startDate, endDate, variant }) => { }; return ( - - - {renderMonthLabels()} - - {renderColumns()} - + + + + {renderMonthLabels()} + + {renderColumns()} + + ); }; diff --git a/vinvoor/src/overview/heatmap/heatmap.css b/vinvoor/src/overview/heatmap/heatmap.css index 375039c..231fe10 100644 --- a/vinvoor/src/overview/heatmap/heatmap.css +++ b/vinvoor/src/overview/heatmap/heatmap.css @@ -4,8 +4,8 @@ } .heatmap rect:hover { - stroke: #555; stroke-width: 1px; + stroke-opacity: 0; } /* @@ -42,7 +42,7 @@ .heatmap .color-5 { fill: #ba5f02; stroke-width: 1px; - stroke: #ba5f02; + stroke: #934b01; } /* diff --git a/vinvoor/src/overview/heatmap/utils.ts b/vinvoor/src/overview/heatmap/utils.ts index 388dc00..efe2d1a 100644 --- a/vinvoor/src/overview/heatmap/utils.ts +++ b/vinvoor/src/overview/heatmap/utils.ts @@ -96,6 +96,6 @@ export const getColumnCount = ( // Local functions const GUTTERSIZE = 5; -const MONTH_LABEL_GUTTER_SIZE = 4; +const MONTH_LABEL_GUTTER_SIZE = 8; const getSquareSize = () => SQUARE_SIZE + GUTTERSIZE; diff --git a/vinvoor/src/overview/streak/Streak.tsx b/vinvoor/src/overview/streak/Streak.tsx index 26275c5..e2dffeb 100644 --- a/vinvoor/src/overview/streak/Streak.tsx +++ b/vinvoor/src/overview/streak/Streak.tsx @@ -19,10 +19,6 @@ const isWeekendBetween = (date1: Date, date2: Date) => { }; const isStreakDay = (date1: Date, date2: Date) => { - console.log(date1, date2); - console.log(shiftDate(date2, 1)); - console.log(isTheSameDay(date1, shiftDate(date2, 1))); - if (isTheSameDay(date1, shiftDate(date2, 1))) return true; if (date1.getDay() === 5 && [1, 6, 7].includes(date2.getDay()))