[timeline] fix display of unit above

src/KonvaTimeline/yearly-scenario.stories.tsx

@@ -27,6 +27,22 @@ const yearlyStoryData = generateStoryData({
 export const YearlyReport: Story = {
   args: {
     ...yearlyStoryData,
-    resolution: "1day",
+    resolution: "30min",
+    columnWidth: 120,
+    range: {
+      start: 1698357600000,
+      end: 1698966000000,
+    },
+    tasks: [
+      {
+        id: "1",
+        label: "1Novembre",
+        resourceId: "1",
+        time: {
+          start: 1698793200000,
+          end: 1700434800000,
+        },
+      },
+    ],
   },
 };

src/grid/CellGroup/index.tsx

@@ -7,11 +7,11 @@ import { displayAboveInterval } from "../../utils/time-resolution";
 
 interface GridCellGroupProps {
   column: Interval;
-  height: number;
   index: number;
+  dayInfo?: { thisMonth?: number; untilNow?: number; backHour: boolean; forNowHour: boolean }[];
 }
 
-const GridCellGroup = ({ column, height, index }: GridCellGroupProps) => {
+const GridCellGroup = ({ column, index, dayInfo }: GridCellGroupProps) => {
   const {
     columnWidth,
     resolution: { sizeInUnits, unit, unitAbove },
@@ -21,24 +21,54 @@ const GridCellGroup = ({ column, height, index }: GridCellGroupProps) => {
 
   const cellLabel = useMemo(() => displayAboveInterval(column, unitAbove), [column, unitAbove]);
 
-  const points = useMemo(() => [0, 0, 0, height], [height]);
+  const points = useMemo(() => [0, 0, 0, rowHeight], [rowHeight]);
 
-  const unitAboveInUnitBelow = useMemo(
-    () => Duration.fromObject({ [unitAbove]: 1 }).as(unit) / sizeInUnits,
-    [sizeInUnits, unit, unitAbove]
-  );
+  const unitAboveInUnitBelow = useMemo(() => {
+    if (unitAbove === "month") {
+      return Duration.fromObject({ ["day"]: dayInfo![index].thisMonth }).as("week") / sizeInUnits;
+    }
+    return Duration.fromObject({ [unitAbove]: 1 }).as(unit) / sizeInUnits;
+  }, [sizeInUnits, dayInfo, index, unitAbove, unit]);
+
+  const unitAboveSpanInPx = useMemo(() => {
+    return unitAboveInUnitBelow * columnWidth;
+  }, [columnWidth, unitAboveInUnitBelow]);
 
-  const unitAboveSpanInPx = useMemo(() => unitAboveInUnitBelow * columnWidth, [columnWidth, unitAboveInUnitBelow]);
+  const xPos = useMemo(() => {
+    if (unitAbove === "month") {
+      const pxUntil =
+        index !== 0 ? Duration.fromObject({ ["day"]: dayInfo![index - 1].untilNow }).as("week") / sizeInUnits : 0;
+      const a = pxUntil * columnWidth;
+      return a + unitAboveSpanInPx;
+    }
+    if (unitAbove === "day" && dayInfo![index].forNowHour) {
+      return index * unitAboveSpanInPx + columnWidth / sizeInUnits;
+    }
 
-  const xPos = useMemo(() => index * unitAboveSpanInPx, [index, unitAboveSpanInPx]);
+    return index * unitAboveSpanInPx;
+  }, [index, unitAboveSpanInPx, columnWidth, sizeInUnits, dayInfo, unitAbove]);
 
   const yPos = useMemo(() => rowHeight * 0.3, [rowHeight]);
 
+  const xPosLabel = useMemo(() => {
+    if (unitAbove === "month") {
+      return xPos - unitAboveSpanInPx;
+    }
+    return index * unitAboveSpanInPx;
+  }, [xPos, unitAboveSpanInPx, unitAbove, index]);
+
   return (
     <KonvaGroup key={`timeslot-${index}`}>
       <KonvaLine x={xPos} y={0} points={points} stroke="gray" strokeWidth={1} />
       <KonvaRect fill="transparent" x={xPos} y={yPos - 10} height={15} width={unitAboveSpanInPx} />
-      <KonvaText align="center" fill={themeColor} x={xPos} y={yPos - 8} text={cellLabel} width={unitAboveSpanInPx} />
+      <KonvaText
+        align="center"
+        fill={themeColor}
+        x={xPosLabel}
+        y={yPos - 8}
+        text={cellLabel}
+        width={unitAboveSpanInPx}
+      />
     </KonvaGroup>
   );
 };

src/grid/Cells/index.tsx

@@ -2,6 +2,7 @@ import React, { memo } from "react";
 
 import { KonvaGroup } from "../../@konva";
 import { useTimelineContext } from "../../timeline/TimelineContext";
+import { daysInMonth, getMonth, getStartMonthsDay, getYear } from "../../utils/time-resolution";
 import GridCell from "../Cell";
 import GridCellGroup from "../CellGroup";
 
@@ -10,12 +11,36 @@ interface GridCellsProps {
 }
 
 const GridCells = ({ height }: GridCellsProps) => {
-  const { aboveTimeBlocks, visibleTimeBlocks } = useTimelineContext();
+  const {
+    interval,
+    aboveTimeBlocks,
+    visibleTimeBlocks,
+    resolution: { unitAbove },
+  } = useTimelineContext();
+  const dayInfo: { thisMonth?: number; untilNow?: number; backHour: boolean; forNowHour: boolean }[] = [];
+  if (unitAbove === "month" || unitAbove === "day") {
+    aboveTimeBlocks.forEach((column, index) => {
+      const hrs = column.end!.diff(column.start!, "hour").hours;
+      const month = getMonth(column);
+      const year = getYear(column);
+      const currentMonthDays = daysInMonth(Number(month), Number(year));
+      const bchour = hrs > 24 ? true : false;
+      if (index === 0) {
+        const startDay = getStartMonthsDay(interval.start!);
+        const daysToMonthEnd = currentMonthDays - Number(startDay) + 1;
+        dayInfo.push({ thisMonth: daysToMonthEnd, untilNow: daysToMonthEnd, backHour: bchour, forNowHour: false });
+        return;
+      }
+      const forNowHour = dayInfo[index - 1].forNowHour ? true : dayInfo[index - 1].backHour ? true : false;
+      const n = dayInfo[index - 1].untilNow! + currentMonthDays;
+      dayInfo.push({ thisMonth: currentMonthDays, untilNow: n, backHour: bchour, forNowHour: forNowHour });
+    });
+  }
 
   return (
     <KonvaGroup>
       {aboveTimeBlocks.map((column, index) => (
-        <GridCellGroup key={`cell-group-${index}`} column={column} height={height} index={index} />
+        <GridCellGroup key={`cell-group-${index}`} column={column} index={index} dayInfo={dayInfo} />
       ))}
       {visibleTimeBlocks.map((column, index) => (
         <GridCell key={`cell-${index}`} column={column} height={height} index={index} />

src/timeline/TimelineContext.tsx

@@ -4,7 +4,7 @@ import { DateTime, Interval } from "luxon";
 import { addHeaderResource } from "../resources/utils/resources";
 import { filterTasks, TaskData, validateTasks } from "../tasks/utils/tasks";
 import { DEFAULT_GRID_COLUMN_WIDTH, DEFAULT_GRID_ROW_HEIGHT, MINIMUM_GRID_ROW_HEIGHT } from "../utils/dimensions";
-import { logDebug, logWarn } from "../utils/logger";
+import { logDebug, logError, logWarn } from "../utils/logger";
 import { getValidRangeTime, getValidTime, InternalTimeRange, isValidRangeTime } from "../utils/time";
 import { getIntervalFromInternalTimeRange } from "../utils/time";
 import { getResolutionData, Resolution, ResolutionData } from "../utils/time-resolution";
@@ -206,7 +206,25 @@ export const TimelineProvider = ({
     [interval, resolution]
   );
 
-  const aboveTimeBlocks = useMemo(() => interval.splitBy({ [resolution.unitAbove]: 1 }), [interval, resolution]);
+  const aboveTimeBlocks = useMemo(() => {
+    const { unitAbove } = resolution;
+    const blocks: Interval[] = [];
+    const intervalStart = interval.start!;
+    const intervalEnd = interval.end!;
+
+    let blockStart = intervalStart;
+    while (blockStart < intervalEnd) {
+      let blockEnd = blockStart.endOf(unitAbove);
+      if (blockEnd > intervalEnd) {
+        blockEnd = intervalEnd;
+      }
+
+      logError("Adding Block", `${blockStart.toFormat("dd/MM/yy HH:mm")} > ${blockEnd.toFormat("dd/MM/yy HH:mm")}`);
+      blocks.push(Interval.fromDateTimes(blockStart, blockEnd));
+      blockStart = blockEnd.startOf(unitAbove).plus({ [unitAbove]: 1 });
+    }
+    return blocks;
+  }, [interval, resolution]);
 
   const columnWidth = useMemo(() => {
     logDebug("TimelineProvider", "Calculating columnWidth...");

src/utils/time-resolution.ts

@@ -1,4 +1,4 @@
-import { Interval } from "luxon";
+import { DateTime, Interval } from "luxon";
 
 import { DEFAULT_GRID_COLUMN_WIDTH } from "./dimensions";
 
@@ -148,16 +148,45 @@ export const displayAboveInterval = (interval: Interval, unit: Scale): string =>
     case "hour":
       return start.toFormat("dd/MM/yy HH:mm");
     case "day":
-      return start.toFormat("ccc dd MMM yyyy");
+      return start.toFormat("ccc dd yyyy");
     case "week":
       return `${start.toFormat("MMM yyyy")} CW ${start.toFormat("WW")}`;
     case "month":
-      return start.toFormat("yyyy");
+      return start.toFormat("MMM yyyy");
     default:
       return "N/A";
   }
 };
 
+export const getMonth = (interval: Interval): string => {
+  const { start } = interval;
+  if (!start) {
+    return "-";
+  }
+
+  return start.toFormat("M");
+};
+export const getYear = (interval: Interval): string => {
+  const { start } = interval;
+  if (!start) {
+    return "-";
+  }
+
+  return start.toFormat("yyyy");
+};
+
+export const getStartMonthsDay = (start: DateTime): string => {
+  if (!start) {
+    return "-";
+  }
+
+  return start.toFormat("d");
+};
+
+export const daysInMonth = (month: number, year: number) => {
+  return new Date(year, month, 0).getDate();
+};
+
 /**
  * Util to display an interval in a human readable format
  * @param interval the interval to display

src/utils/time.ts

@@ -71,7 +71,11 @@ export const getIntervalFromInternalTimeRange = (
   timezone: string | undefined
 ): Interval => {
   const tz = timezone || "system";
-  const startDateTime = DateTime.fromMillis(start, { zone: tz }).startOf(resolution.unitAbove);
-  const endDateTime = DateTime.fromMillis(end, { zone: tz }).endOf(resolution.unitAbove);
+  const startDateTime = DateTime.fromMillis(start, { zone: tz }).startOf(
+    resolution.unitAbove !== "month" ? resolution.unitAbove : resolution.unit
+  );
+  const endDateTime = DateTime.fromMillis(end, { zone: tz }).endOf(
+    resolution.unitAbove !== "month" ? resolution.unitAbove : resolution.unit
+  );
   return Interval.fromDateTimes(startDateTime, endDateTime);
 };