github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: block position generate function

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-04 18:40:12 +05:30
parent 0a664be3de
commit a6d904593e
2 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/components/gantt-chart/chart/index.tsx
View File

@ -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) =>
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
@ -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);

42
web/components/gantt-chart/views/year-view.ts
View File

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