diff --git a/src/App.tsx b/src/App.tsx index bc6fc4de..4db826ec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -66,7 +66,11 @@ function App() { isLoading={false} onTileClick={handleTileClick} onFilterData={handleFilterData} - config={{ zoom: 0, maxRecordsPerPage: maxRecordsPerPage, showThemeToggle: true }} + config={{ + zoom: 0, + maxRecordsPerPage: maxRecordsPerPage, + showThemeToggle: true + }} onItemClick={(data) => console.log("clicked: ", data)} /> ) : ( diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 04199ecf..3b3db9c1 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -12,6 +12,7 @@ import { StyledOuterWrapper, StyledInnerWrapper, StyledEmptyBoxWrapper } from ". const initialTooltipData: TooltipData = { coords: { x: 0, y: 0 }, resourceIndex: 0, + project: undefined, disposition: { taken: { hours: 0, minutes: 0 }, free: { hours: 0, minutes: 0 }, @@ -33,7 +34,7 @@ export const Calendar: FC = ({ const { zoom, startDate, - config: { includeTakenHoursOnWeekendsInDayView, showTooltip, showThemeToggle } + config: { includeTakenHoursOnWeekendsInDayView, showTooltip, showThemeToggle, customTooltip } } = useCalendar(); const gridRef = useRef(null); const { @@ -62,7 +63,8 @@ export const Calendar: FC = ({ const { coords: { x, y }, resourceIndex, - disposition + disposition, + project } = getTooltipData( startDate, tooltipCoords, @@ -71,7 +73,7 @@ export const Calendar: FC = ({ zoom, includeTakenHoursOnWeekendsInDayView ); - setTooltipData({ coords: { x, y }, resourceIndex, disposition }); + setTooltipData({ coords: { x, y }, resourceIndex, disposition, project }); setIsVisible(true); }, 300 @@ -157,7 +159,7 @@ export const Calendar: FC = ({ )} {showTooltip && isVisible && tooltipData?.resourceIndex > -1 && ( - + )} diff --git a/src/components/Scheduler/Scheduler.tsx b/src/components/Scheduler/Scheduler.tsx index 1f4fc9c9..3d0913a8 100644 --- a/src/components/Scheduler/Scheduler.tsx +++ b/src/components/Scheduler/Scheduler.tsx @@ -28,6 +28,7 @@ const Scheduler = ({ includeTakenHoursOnWeekendsInDayView: false, showTooltip: true, translations: undefined, + customTooltip: undefined, ...config }), [config] diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index af9089f6..54eaa6ca 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -14,10 +14,9 @@ import { } from "./styles"; import { TooltipProps } from "./types"; -const Tooltip: FC = ({ tooltipData, zoom }) => { +const Tooltip: FC = ({ tooltipData, zoom, customTooltip }) => { const { taken, free, over } = useLanguage(); - - const { coords, disposition } = tooltipData; + const { coords, disposition, project } = tooltipData; const tooltipRef = useRef(null); let width = weekWidth; switch (zoom) { @@ -51,31 +50,35 @@ const Tooltip: FC = ({ tooltipData, zoom }) => { tooltipRef.current.style.top = `${coords.y + 8}px`; // disposition.overtime affects tooltip's width, thus it's needed to recalculate it's coords whenever overtime changes - }, [coords.x, width, disposition.overtime, coords.y, zoom]); + }, [coords.x, width, disposition.overtime, coords.y, zoom, project]); return ( - - - - - {`${taken}: ${disposition.taken.hours}h ${disposition.taken.minutes}m`} - {(disposition.overtime.hours > 0 || disposition.overtime.minutes > 0) && ( - <> -  {"-"}  - {`${disposition.overtime.hours}h ${disposition.overtime.minutes}m ${over}`} - - )} - - - - - - {`${free}: ${disposition.free.hours}h ${disposition.free.minutes}m`} - - - + {customTooltip ? ( + customTooltip(tooltipData) + ) : ( + + + + + {`${taken}: ${disposition.taken.hours}h ${disposition.taken.minutes}m`} + {(disposition.overtime.hours > 0 || disposition.overtime.minutes > 0) && ( + <> +  {"-"}  + {`${disposition.overtime.hours}h ${disposition.overtime.minutes}m ${over}`} + + )} + + + + + + {`${free}: ${disposition.free.hours}h ${disposition.free.minutes}m`} + + + + )} diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts index 2d5caf34..5b7d4a63 100644 --- a/src/components/Tooltip/types.ts +++ b/src/components/Tooltip/types.ts @@ -1,6 +1,7 @@ -import { TooltipData } from "@/types/global"; +import { CustomTooltipFunction, TooltipData } from "@/types/global"; export type TooltipProps = { tooltipData: TooltipData; zoom: number; + customTooltip?: CustomTooltipFunction; }; diff --git a/src/types/global.ts b/src/types/global.ts index fd94bf5f..552d01e8 100644 --- a/src/types/global.ts +++ b/src/types/global.ts @@ -51,8 +51,11 @@ export type Config = { */ defaultTheme?: "light" | "dark"; theme?: Theme; + customTooltip?: CustomTooltipFunction; }; +export type CustomTooltipFunction = (tooltipData: TooltipData) => JSX.Element | string; + export type Theme = { light?: Partial>; dark?: Partial>; @@ -192,4 +195,5 @@ export type TooltipData = { coords: Coords; resourceIndex: number; disposition: OccupancyData; + project?: SchedulerProjectData; }; diff --git a/src/utils/getTooltipData.ts b/src/utils/getTooltipData.ts index af912919..85338ea7 100644 --- a/src/utils/getTooltipData.ts +++ b/src/utils/getTooltipData.ts @@ -40,6 +40,8 @@ export const getTooltipData = ( const sumOfRows = array.slice(0, index + 1).reduce((acc, cur) => acc + cur, 0); return sumOfRows >= rowPosition; }); + const rowPositionForPerson = + rowPosition - rowsPerPerson.slice(0, resourceIndex).reduce((acc, cur) => acc + cur, 0) - 1; const xPos = zoom === 2 ? (column + 1) * currBoxWidth : column * currBoxWidth; const yPos = (rowPosition - 1) * boxHeight + boxHeight; @@ -50,5 +52,21 @@ export const getTooltipData = ( zoom, includeTakenHoursOnWeekendsInDayView ); - return { coords: { x: xPos, y: yPos }, resourceIndex, disposition }; + const project = resourcesData[resourceIndex][rowPositionForPerson].find((item) => { + if (zoom === 1) { + return dayjs(focusedDate).isBetween(item.startDate, item.endDate, "day", "[]"); + } else if (zoom === 2) { + return dayjs(focusedDate).isBetween(item.startDate, item.endDate, "hour", "[]"); + } else { + return ( + dayjs(item.startDate).isBetween( + dayjs(focusedDate), + dayjs(focusedDate).add(6, "days"), + "day", + "[]" + ) || dayjs(focusedDate).isBetween(dayjs(item.startDate), dayjs(item.endDate), "day", "[]") + ); + } + }); + return { coords: { x: xPos, y: yPos }, resourceIndex, disposition, project }; };