Improve tooltips, fix per day calculation
All checks were successful
Build and Publish Docker Container / build (push) Successful in 2m45s

This commit is contained in:
Joshua Coles 2023-12-20 22:49:38 +00:00
parent eb87f44b76
commit 69b5476b4a
3 changed files with 25 additions and 4 deletions

19
package-lock.json generated
View File

@ -12,10 +12,12 @@
"@tremor/react": "^3.12.0", "@tremor/react": "^3.12.0",
"@types/ramda": "^0.29.9", "@types/ramda": "^0.29.9",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"heat-calendar": "^1.0.7",
"next": "14.0.4", "next": "14.0.4",
"ramda": "^0.29.1", "ramda": "^0.29.1",
"react": "^18", "react": "^18",
"react-calendar-heatmap": "^1.9.0", "react-calendar-heatmap": "^1.9.0",
"react-date-heatmap": "^1.0.4",
"react-dom": "^18", "react-dom": "^18",
"react-tooltip": "^5.25.0", "react-tooltip": "^5.25.0",
"reaviz": "^15.2.1", "reaviz": "^15.2.1",
@ -3280,6 +3282,15 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/heat-calendar": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/heat-calendar/-/heat-calendar-1.0.7.tgz",
"integrity": "sha512-K99EwrxqmH+Va00PkVxHFl7mefBjHN1qi38HlY7bEIrPDY0Gs03AjhDhSJiRZA/HRNpQBsASHSKlhwRrO1ZV1Q==",
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
"node_modules/hex-rgb": { "node_modules/hex-rgb": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz", "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz",
@ -4794,6 +4805,14 @@
"react": ">= 16.8.0" "react": ">= 16.8.0"
} }
}, },
"node_modules/react-date-heatmap": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/react-date-heatmap/-/react-date-heatmap-1.0.4.tgz",
"integrity": "sha512-pyH1F6uNROUDSXnKikNTp9LZZzrDi31+wlgujkLwjahi9KmqasHj3RwKvfjL+O6YlTZMlGJ/J8vRsidzNW4+Lg==",
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-day-picker": { "node_modules/react-day-picker": {
"version": "8.9.1", "version": "8.9.1",
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.9.1.tgz", "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.9.1.tgz",

View File

@ -13,10 +13,12 @@
"@tremor/react": "^3.12.0", "@tremor/react": "^3.12.0",
"@types/ramda": "^0.29.9", "@types/ramda": "^0.29.9",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"heat-calendar": "^1.0.7",
"next": "14.0.4", "next": "14.0.4",
"ramda": "^0.29.1", "ramda": "^0.29.1",
"react": "^18", "react": "^18",
"react-calendar-heatmap": "^1.9.0", "react-calendar-heatmap": "^1.9.0",
"react-date-heatmap": "^1.0.4",
"react-dom": "^18", "react-dom": "^18",
"react-tooltip": "^5.25.0", "react-tooltip": "^5.25.0",
"reaviz": "^15.2.1", "reaviz": "^15.2.1",

View File

@ -51,7 +51,7 @@ function useCalendarData() {
// Group by day, sum up seconds // Group by day, sum up seconds
const grouped = R.groupBy((entry) => { const grouped = R.groupBy((entry) => {
return dFns.formatISO(dFns.parseISO(entry.raw_json.start)); return dFns.formatISO(dFns.startOfDay(dFns.parseISO(entry.raw_json.start)));
}, timeEntries); }, timeEntries);
const summed = R.mapObjIndexed((entries) => { const summed = R.mapObjIndexed((entries) => {
@ -81,10 +81,10 @@ export function CalendarOverviewCard() {
values={data} values={data}
classForValue={value => `color-github-${computeCompletionShade(value?.count ?? 0)}`} classForValue={value => `color-github-${computeCompletionShade(value?.count ?? 0)}`}
tooltipDataAttrs={(value: any) => { tooltipDataAttrs={(value: any) => {
return value.count ? { return {
'data-tooltip-id': `calendar-tooltip`, 'data-tooltip-id': `calendar-tooltip`,
'data-tooltip-content': `${value.count.toFixed(2)} hours` 'data-tooltip-content': value.count ?`${dFns.format(value.date, 'EEE do: ')} ${value.count.toFixed(2)} hours` : `No time logged`
} : undefined; }
}} }}
/> />
</Card> </Card>