chore: update filter range

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
@@ -10,7 +10,7 @@ import { GanttSidebar } from "../sidebar";
 // import { BiWeekChartView } from "./bi-week";
 import { MonthChartView } from "./month";
 // import { QuarterChartView } from "./quarter";
-// import { YearChartView } from "./year";
+import { YearChartView } from "./year";
 // views
 import {
   // generateHourChart,
@@ -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) =>
-    blocks && blocks.length > 0
-      ? blocks.map((block: any) => ({
-          ...block,
-          position: getMonthChartItemPositionWidthInMonth(view, block),
-        }))
-      : [];
+  const renderBlockStructure = useCallback(
+    (view: any, blocks: IGanttBlock[] | null): IGanttBlock[] =>
+      blocks && blocks.length > 0
+        ? blocks.map((block: any) => ({
+            ...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
 
@@ -105,8 +114,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     if (selectedCurrentView === "month")
       currentRender = generateMonthChart(selectedCurrentViewData, side);
     // if (view === "quarter") currentRender = generateQuarterChart(selectedCurrentViewData, side);
-    // if (selectedCurrentView === "year")
-    //   currentRender = generateYearChart(selectedCurrentViewData, side);
+    if (selectedCurrentView === "year")
+      currentRender = generateYearChart(selectedCurrentViewData, side);
 
     // updating the prevData, currentData and nextData
     if (currentRender.payload.length > 0) {
@@ -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")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
+    if (currentView === "year")
+      daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
 
     scrollWidth =
       daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);
@@ -316,7 +325,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           {/* {currentView && currentView === "bi_week" && <BiWeekChartView />} */}
           {currentView && currentView === "month" && <MonthChartView />}
           {/* {currentView && currentView === "quarter" && <QuarterChartView />} */}
-          {/* {currentView && currentView === "year" && <YearChartView />} */}
+          {currentView && currentView === "year" && <YearChartView />}
 
           {/* blocks */}
           {currentView && currentViewData && (

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

@@ -1,43 +1,73 @@
 import { FC } from "react";
 // context
 import { useChart } from "../hooks";
+import { IYearBlock } from "../views";
 
 export const YearChartView: FC<any> = () => {
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+  const { currentViewData, renderView } = useChart();
+
+  const yearBlocks: IYearBlock[] = renderView;
+
+  console.log("yearBlocks", yearBlocks);
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-200">
-        {renderView &&
-          renderView.length > 0 &&
-          renderView.map((_itemRoot: any, _idxRoot: any) => (
-            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
-                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
-                  {_itemRoot?.title}
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100/50">
+        {yearBlocks &&
+          yearBlocks.length > 0 &&
+          yearBlocks.map((block, _idxRoot) => (
+            <div key={`year-${block.year}-${block.month}`} className="relative flex flex-col">
+              <div className="h-[60px] w-full">
+                <div className="relative h-[30px]">
+                  <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
+                    {block?.title}
+                  </div>
+                </div>
+                <div className="flex w-full h-[30px]">
+                  {block?.children &&
+                    block.children.length > 0 &&
+                    block.children.map((monthWeek, _idx: any) => (
+                      <div
+                        key={`sub-title-${_idxRoot}-${_idx}`}
+                        className="flex-shrink-0 border-b py-1 text-center capitalize border-custom-border-200"
+                        style={{ width: `${currentViewData?.data.width}px` }}
+                      >
+                        <div className="text-xs">
+                          <span
+                            className={
+                              monthWeek.today
+                                ? "bg-custom-primary-100 text-white px-1 rounded-full"
+                                : "text-custom-text-200"
+                            }
+                          >
+                            {monthWeek.date.getDate()}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-200">
-                {_itemRoot.children &&
-                  _itemRoot.children.length > 0 &&
-                  _itemRoot.children.map((_item: any, _idx: any) => (
+              <div className="flex h-full w-full divide-x divide-custom-border-100/50">
+                {block.children &&
+                  block.children.length > 0 &&
+                  block.children.map((monthWeek, _idx) => (
                     <div
-                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      key={`column-${_idxRoot}-${_idx}`}
                       className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
                       style={{ width: `${currentViewData?.data.width}px` }}
                     >
-                      <div
-                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-200`
+                      <div className="relative h-full w-full flex-1 flex justify-center">
+                        {/* <div
+                        className={`relative h-full w-full flex-1 flex justify-center ${
+                          ["sat", "sun"].includes(monthWeek?.dayData?.shortTitle || "")
+                            ? `bg-custom-background-90`
+                            : ``
                         }`}
-                      >
-                        <div>{_item.title}</div>
-                      </div>
-                      <div className={`relative h-full w-full flex-1 flex justify-center`}>
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                      > */}
+                        {/* {monthDay?.today && (
+                        <div className="absolute top-0 bottom-0 w-[1px] bg-red-500" />
+                      )} */}
                       </div>
                     </div>
                   ))}

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

@@ -24,7 +24,7 @@ const chartReducer = (
   }
 };
 
-const initialView = "month";
+const initialView = "year";
 
 export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useState<ChartContextData>({

web/components/gantt-chart/data/index.ts

@@ -123,17 +123,17 @@ export const allViewsWithData: ChartDataType[] = [
   //     width: 100, // it will preview week starting dates all months data and there is 3 months limitation for preview ex: title (2, 9, 16, 23, 30)
   //   },
   // },
-  // {
-  //   key: "year",
-  //   title: "Year",
-  //   data: {
-  //     startDate: new Date(),
-  //     currentDate: new Date(),
-  //     endDate: new Date(),
-  //     approxFilterRange: 10,
-  //     width: 80, // it will preview week starting dates all months data and there is no limitation for preview ex: title (2, 9, 16, 23, 30)
-  //   },
-  // },
+  {
+    key: "year",
+    title: "Year",
+    data: {
+      startDate: new Date(),
+      currentDate: new Date(),
+      endDate: new Date(),
+      approxFilterRange: 6,
+      width: 55, // it will preview week starting dates all months data and there is no limitation for preview ex: title (2, 9, 16, 23, 30)
+    },
+  },
 ];
 
 export const currentViewDataWithView = (view: string = "month") => {

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

@@ -1,11 +1,37 @@
 // types
-import { ChartDataType } from "../types";
+import { ChartDataType, IGanttBlock } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
 import { getDatesBetweenTwoDates, getWeeksByMonthAndYear } from "./helpers";
 
-const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number) => {
+interface IYearChild {
+  active: boolean;
+  date: Date;
+  day: number;
+  dayData: {
+    key: number;
+    shortTitle: string;
+    title: string;
+  };
+  title: string;
+  today: boolean;
+  weekNumber: number;
+}
+export interface IYearBlock {
+  children: IYearChild[];
+  month: number;
+  monthData: {
+    key: number;
+    shortTitle: string;
+    title: string;
+  };
+  title: string;
+  year: number;
+}
+[];
+
+const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number): IYearBlock => {
   const currentMonth: number = month;
   const currentYear: number = year;
   const today = new Date();
@@ -112,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 positionWeeksDifference: number = Math.abs(
+    Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24 * 7))
+  );
+  scrollPosition = positionWeeksDifference * chartData.data.width;
+
+  let 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 * 7))
+  );
+  scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1;
+  // width code ends
+
+  return { marginLeft: scrollPosition, width: scrollWidth };
+};