[timeline] fix display of unit above

src/KonvaTimeline/yearly-scenario.stories.tsx

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

src/grid/Cell/index.tsx

@@ -9,9 +9,13 @@ interface GridCellProps {
   column: Interval;
   height: number;
   index: number;
+  hourInfo: {
+    backHour?: boolean;
+    nextHour?: boolean;
+  };
 }
 
-const GridCell = ({ column, height, index }: GridCellProps) => {
+const GridCell = ({ column, height, index, hourInfo: visibleDayInfo }: GridCellProps) => {
   const {
     blocksOffset,
     columnWidth,
@@ -22,7 +26,25 @@ const GridCell = ({ column, height, index }: GridCellProps) => {
 
   const cellLabel = useMemo(() => displayInterval(column, resolutionUnit), [column, resolutionUnit]);
 
-  const xPos = useMemo(() => columnWidth * (index + blocksOffset), [blocksOffset, columnWidth, index]);
+  const xPos = useMemo(() => {
+    if (resolutionUnit === "day") {
+      if (visibleDayInfo.backHour) {
+        return columnWidth * (index + blocksOffset) + columnWidth / 24;
+      }
+      if (visibleDayInfo.nextHour) {
+        return columnWidth * (index + blocksOffset) - columnWidth / 24;
+      }
+    }
+    if (resolutionUnit === "week") {
+      if (visibleDayInfo.backHour) {
+        return columnWidth * (index + blocksOffset) + columnWidth / 168;
+      }
+      if (visibleDayInfo.nextHour) {
+        return columnWidth * (index + blocksOffset) - columnWidth / 168;
+      }
+    }
+    return columnWidth * (index + blocksOffset);
+  }, [blocksOffset, columnWidth, index, visibleDayInfo, resolutionUnit]);
 
   const yPos = useMemo(() => rowHeight * 0.8, [rowHeight]);
 

src/grid/CellGroup/index.tsx

@@ -7,11 +7,18 @@ import { displayAboveInterval } from "../../utils/time-resolution";
 
 interface GridCellGroupProps {
   column: Interval;
-  height: number;
   index: number;
+  dayInfo?: {
+    thisMonth?: number;
+    untilNow?: number;
+  }[];
+  hourInfo?: {
+    backHour?: boolean;
+    nextHour?: boolean;
+  };
 }
 
-const GridCellGroup = ({ column, height, index }: GridCellGroupProps) => {
+const GridCellGroup = ({ column, index, dayInfo, hourInfo }: GridCellGroupProps) => {
   const {
     columnWidth,
     resolution: { sizeInUnits, unit, unitAbove },
@@ -21,24 +28,74 @@ 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;
+      if (hourInfo!.backHour) {
+        const hourInMonthPx = columnWidth / 168;
+        return pxUntil * columnWidth + unitAboveSpanInPx + hourInMonthPx;
+      }
+      if (hourInfo!.nextHour) {
+        const hourInMonthPx = columnWidth / 168;
+        return pxUntil * columnWidth + unitAboveSpanInPx - hourInMonthPx;
+      }
+      return pxUntil * columnWidth + unitAboveSpanInPx;
+    }
+    if (unitAbove === "day") {
+      if (hourInfo!.backHour) {
+        return index * unitAboveSpanInPx + columnWidth / sizeInUnits;
+      }
+      if (hourInfo!.nextHour) {
+        return index * unitAboveSpanInPx - columnWidth / sizeInUnits;
+      }
+    }
+    if (unitAbove === "week") {
+      if (hourInfo!.backHour) {
+        return index * unitAboveSpanInPx + columnWidth / 24;
+      }
+      if (hourInfo!.nextHour) {
+        return index * unitAboveSpanInPx - columnWidth / 24;
+      }
+    }
 
-  const xPos = useMemo(() => index * unitAboveSpanInPx, [index, unitAboveSpanInPx]);
+    return index * unitAboveSpanInPx;
+  }, [index, unitAboveSpanInPx, columnWidth, sizeInUnits, dayInfo, unitAbove, hourInfo]);
 
   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

@@ -1,24 +1,50 @@
-import React, { memo } from "react";
+import React, { memo, useMemo } from "react";
 
 import { KonvaGroup } from "../../@konva";
 import { useTimelineContext } from "../../timeline/TimelineContext";
 import GridCell from "../Cell";
 import GridCellGroup from "../CellGroup";
 
+import { dayDetail, timeBlockTz } from "./utils";
+
 interface GridCellsProps {
   height: number;
 }
 
 const GridCells = ({ height }: GridCellsProps) => {
-  const { aboveTimeBlocks, visibleTimeBlocks } = useTimelineContext();
+  const {
+    interval,
+    aboveTimeBlocks,
+    visibleTimeBlocks,
+    resolution: { unitAbove },
+  } = useTimelineContext();
+  const tz = useMemo(() => interval.start!.toISO()!.slice(-6), [interval]);
 
+  const dayInfo = useMemo(
+    () => dayDetail(unitAbove, aboveTimeBlocks, interval),
+    [unitAbove, aboveTimeBlocks, interval]
+  );
+  const aboveHourInfo = useMemo(() => timeBlockTz(aboveTimeBlocks, tz), [tz, aboveTimeBlocks]);
+  const visibileHourInfo = useMemo(() => timeBlockTz(visibleTimeBlocks, tz), [tz, visibleTimeBlocks]);
   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}
+          hourInfo={aboveHourInfo[index]}
+        />
       ))}
       {visibleTimeBlocks.map((column, index) => (
-        <GridCell key={`cell-${index}`} column={column} height={height} index={index} />
+        <GridCell
+          key={`cell-${index}`}
+          column={column}
+          height={height}
+          index={index}
+          hourInfo={visibileHourInfo[index]}
+        />
       ))}
     </KonvaGroup>
   );

src/grid/Cells/utils.ts

@@ -0,0 +1,68 @@
+import { Interval } from "luxon";
+
+import { daysInMonth, getMonth, getStartMonthsDay, getYear, Scale } from "../../utils/time-resolution";
+
+interface VisibleHourInfoProps {
+  backHour?: boolean;
+  nextHour?: boolean;
+}
+
+interface DayDetailProps {
+  thisMonth?: number;
+  untilNow?: number;
+}
+
+export const timeBlockTz = (timeBlock: Interval[], initialTz?: string) => {
+  const dayInfoArray: VisibleHourInfoProps[] = [];
+  timeBlock.forEach((column) => {
+    const tzStart = column.start!.toISO()?.slice(-6);
+
+    if (initialTz !== tzStart) {
+      if (Number(initialTz?.slice(1, 3)) - Number(tzStart!.slice(1, 3)) > 0) {
+        dayInfoArray.push({
+          backHour: true,
+          nextHour: false,
+        });
+        return;
+      }
+      dayInfoArray.push({
+        backHour: false,
+        nextHour: true,
+      });
+    }
+    dayInfoArray.push({
+      backHour: false,
+      nextHour: false,
+    });
+    return;
+  });
+  return dayInfoArray;
+};
+
+export const dayDetail = (unitAbove: Scale, aboveTimeBlocks: Interval[], interval: Interval) => {
+  if (unitAbove === "month") {
+    const dayInfo: DayDetailProps[] = [];
+    aboveTimeBlocks.forEach((column, index) => {
+      const month = getMonth(column);
+      const year = getYear(column);
+      const currentMonthDays = daysInMonth(Number(month), Number(year));
+      if (index === 0) {
+        const startDay = getStartMonthsDay(interval.start!);
+        const daysToMonthEnd = currentMonthDays - Number(startDay) + 1;
+        dayInfo.push({
+          thisMonth: daysToMonthEnd,
+          untilNow: daysToMonthEnd,
+        });
+        return;
+      }
+      const n = dayInfo[index - 1].untilNow! + currentMonthDays;
+
+      dayInfo.push({
+        thisMonth: currentMonthDays,
+        untilNow: n,
+      });
+    });
+    return dayInfo;
+  }
+  return [];
+};

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";
@@ -105,7 +105,7 @@ export const TimelineProvider = ({
   columnWidth: externalColumnWidth,
   debug = false,
   displayTasksLabel = false,
-  dragResolution: externalDragResolution,
+  dragResolution: externalDragResolution = "1min",
   enableDrag = true,
   enableResize = true,
   headerLabel,
@@ -116,7 +116,7 @@ export const TimelineProvider = ({
   onTaskChange,
   tasks: externalTasks = [],
   range: externalRange,
-  resolution: externalResolution = "1min",
+  resolution: externalResolution = "1hrs",
   resources: externalResources,
   rowHeight: externalRowHeight,
   timezone: externalTimezone,
@@ -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...");