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