chore: block position generate function

web/components/gantt-chart/chart/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 // icons
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 // components
@@ -24,6 +24,7 @@ import {
   getNumberOfDaysBetweenTwoDatesInQuarter,
   getNumberOfDaysBetweenTwoDatesInYear,
   getMonthChartItemPositionWidthInMonth,
+  getYearChartItemPositionWidthInYear,
 } from "../views";
 // types
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
@@ -70,18 +71,26 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
     useChart();
 
-  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
+  const renderBlockStructure = useCallback(
+    (view: any, blocks: IGanttBlock[] | null): IGanttBlock[] =>
       blocks && blocks.length > 0
         ? blocks.map((block: any) => ({
             ...block,
-          position: getMonthChartItemPositionWidthInMonth(view, block),
+            position:
+              currentView === "month"
+                ? getMonthChartItemPositionWidthInMonth(view, block)
+                : currentView === "year"
+                ? getYearChartItemPositionWidthInYear(view, block)
+                : { marginLeft: 0, width: 0 },
           }))
-      : [];
+        : [],
+    [currentView]
+  );
 
   useEffect(() => {
     if (currentViewData && blocks)
       setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
-  }, [currentViewData, blocks]);
+  }, [blocks, currentViewData, renderBlockStructure]);
 
   // blocks state management ends
 
@@ -186,8 +195,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
     // if (currentView === "quarter")
     //   daysDifference = getNumberOfDaysBetweenTwoDatesInQuarter(currentState.data.startDate, date);
-    // if (currentView === "year")
+    if (currentView === "year")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
+      daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
 
     scrollWidth =
       daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);

web/components/gantt-chart/views/year-view.ts

@@ -1,5 +1,5 @@
 // types
-import { ChartDataType } from "../types";
+import { ChartDataType, IGanttBlock } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
@@ -138,3 +138,43 @@ export const getNumberOfDaysBetweenTwoDatesInYear = (startDate: Date, endDate: D
 
   return weeksDifference;
 };
+
+// calc item scroll position and width
+export const getYearChartItemPositionWidthInYear = (
+  chartData: ChartDataType,
+  itemData: IGanttBlock
+) => {
+  let scrollPosition: number = 0;
+  let scrollWidth: number = 0;
+
+  const { startDate } = chartData.data;
+  const { start_date: itemStartDate, target_date: itemTargetDate } = itemData;
+
+  startDate.setHours(0, 0, 0, 0);
+  itemStartDate.setHours(0, 0, 0, 0);
+  itemTargetDate.setHours(0, 0, 0, 0);
+
+  // position code starts
+  const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime();
+  const positionDaysDifference: number = Math.abs(
+    Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24))
+  );
+  scrollPosition = positionDaysDifference * chartData.data.width;
+
+  var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
+  diffMonths -= startDate.getMonth();
+  diffMonths += itemStartDate.getMonth();
+
+  scrollPosition = scrollPosition + diffMonths;
+  // position code ends
+
+  // width code starts
+  const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime();
+  const widthDaysDifference: number = Math.abs(
+    Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24))
+  );
+  scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1;
+  // width code ends
+
+  return { marginLeft: scrollPosition, width: scrollWidth };
+};