diff --git a/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx b/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx index 6ae5197..9053fd5 100644 --- a/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx +++ b/plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx @@ -184,6 +184,19 @@ const getTimelineTicks = (startDate: Date, endDate: Date, dayWidth: number, step }); }; +const getTimelineGridLines = (startDate: Date, endDate: Date, dayWidth: number) => { + const days = getDaysBetween(startDate, endDate); + + return Array.from({ length: days + 1 }, (_, index) => { + const date = addDays(startDate, index); + return { + id: date.toISOString(), + isMonthStart: date.getDate() === 1, + left: index * dayWidth, + }; + }); +}; + const getShortDateLabel = (date: Date, locale: string) => new Intl.DateTimeFormat(locale || "ru-RU", { day: "numeric", @@ -204,10 +217,11 @@ const isOverdueItem = (item: TGanttTimelinePreviewItem, today: Date) => { const matchesStatusFilters = (item: TGanttTimelinePreviewItem, activeStatusFilters: TGanttPreviewStatusFilter[]) => { if (activeStatusFilters.length === 0) return true; - if (!item.state_group) return false; + const stateGroup = item.state_group; + if (!stateGroup) return false; return activeStatusFilters.some((filterKey) => - GANTT_STATUS_FILTER_OPTIONS.find((option) => option.key === filterKey)?.groups.includes(item.state_group) + GANTT_STATUS_FILTER_OPTIONS.find((option) => option.key === filterKey)?.groups.includes(stateGroup) ); }; @@ -304,6 +318,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) { return { blocks, canvasWidth, + gridLines: getTimelineGridLines(startDate, endDate, settings.dayWidth), ticks: getTimelineTicks(startDate, endDate, settings.dayWidth, settings.tickStepDays, locale), todayLabel: getShortDateLabel(today, locale), timelineWidth, @@ -517,9 +532,18 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) { >