feat: allow custom tooltip render method, and provide the project info that is being hovered over

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)}
         />
       ) : (

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<CalendarProps> = ({
   const {
     zoom,
     startDate,
-    config: { includeTakenHoursOnWeekendsInDayView, showTooltip, showThemeToggle }
+    config: { includeTakenHoursOnWeekendsInDayView, showTooltip, showThemeToggle, customTooltip }
   } = useCalendar();
   const gridRef = useRef<HTMLDivElement>(null);
   const {
@@ -62,7 +63,8 @@ export const Calendar: FC<CalendarProps> = ({
         const {
           coords: { x, y },
           resourceIndex,
-          disposition
+          disposition,
+          project
         } = getTooltipData(
           startDate,
           tooltipCoords,
@@ -71,7 +73,7 @@ export const Calendar: FC<CalendarProps> = ({
           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<CalendarProps> = ({
           </StyledEmptyBoxWrapper>
         )}
         {showTooltip && isVisible && tooltipData?.resourceIndex > -1 && (
-          <Tooltip tooltipData={tooltipData} zoom={zoom} />
+          <Tooltip tooltipData={tooltipData} zoom={zoom} customTooltip={customTooltip} />
         )}
       </StyledInnerWrapper>
     </StyledOuterWrapper>

src/components/Scheduler/Scheduler.tsx

@@ -28,6 +28,7 @@ const Scheduler = ({
       includeTakenHoursOnWeekendsInDayView: false,
       showTooltip: true,
       translations: undefined,
+      customTooltip: undefined,
       ...config
     }),
     [config]

src/components/Tooltip/Tooltip.tsx

@@ -14,10 +14,9 @@ import {
 } from "./styles";
 import { TooltipProps } from "./types";
 
-const Tooltip: FC<TooltipProps> = ({ tooltipData, zoom }) => {
+const Tooltip: FC<TooltipProps> = ({ tooltipData, zoom, customTooltip }) => {
   const { taken, free, over } = useLanguage();
-
-  const { coords, disposition } = tooltipData;
+  const { coords, disposition, project } = tooltipData;
   const tooltipRef = useRef<HTMLDivElement>(null);
   let width = weekWidth;
   switch (zoom) {
@@ -51,31 +50,35 @@ const Tooltip: FC<TooltipProps> = ({ 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 (
     <StyledTooltipWrapper ref={tooltipRef}>
       <StyledTooltipContent>
-        <StyledContentWrapper>
-          <StyledInnerWrapper>
-            <Icon iconName="calendarWarning" height="14" />
-            <StyledTextWrapper>
-              <StyledText>{`${taken}: ${disposition.taken.hours}h ${disposition.taken.minutes}m`}</StyledText>
-              {(disposition.overtime.hours > 0 || disposition.overtime.minutes > 0) && (
-                <>
-                  &nbsp;{"-"}&nbsp;
-                  <StyledOvertimeWarning>{`${disposition.overtime.hours}h ${disposition.overtime.minutes}m ${over}`}</StyledOvertimeWarning>
-                </>
-              )}
-            </StyledTextWrapper>
-          </StyledInnerWrapper>
-          <StyledInnerWrapper>
-            <Icon iconName="calendarFree" height="14" />
-            <StyledTextWrapper>
-              <StyledText>{`${free}: ${disposition.free.hours}h ${disposition.free.minutes}m`}</StyledText>
-            </StyledTextWrapper>
-          </StyledInnerWrapper>
-        </StyledContentWrapper>
+        {customTooltip ? (
+          customTooltip(tooltipData)
+        ) : (
+          <StyledContentWrapper>
+            <StyledInnerWrapper>
+              <Icon iconName="calendarWarning" height="14" />
+              <StyledTextWrapper>
+                <StyledText>{`${taken}: ${disposition.taken.hours}h ${disposition.taken.minutes}m`}</StyledText>
+                {(disposition.overtime.hours > 0 || disposition.overtime.minutes > 0) && (
+                  <>
+                    &nbsp;{"-"}&nbsp;
+                    <StyledOvertimeWarning>{`${disposition.overtime.hours}h ${disposition.overtime.minutes}m ${over}`}</StyledOvertimeWarning>
+                  </>
+                )}
+              </StyledTextWrapper>
+            </StyledInnerWrapper>
+            <StyledInnerWrapper>
+              <Icon iconName="calendarFree" height="14" />
+              <StyledTextWrapper>
+                <StyledText>{`${free}: ${disposition.free.hours}h ${disposition.free.minutes}m`}</StyledText>
+              </StyledTextWrapper>
+            </StyledInnerWrapper>
+          </StyledContentWrapper>
+        )}
       </StyledTooltipContent>
       <StyledTooltipBeak />
     </StyledTooltipWrapper>

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;
 };

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<Record<ColorType, string>>;
   dark?: Partial<Record<ColorType, string>>;
@@ -192,4 +195,5 @@ export type TooltipData = {
   coords: Coords;
   resourceIndex: number;
   disposition: OccupancyData;
+  project?: SchedulerProjectData;
 };

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 };
 };