feat(gantt): introduce advanced Gantt chart components and demo page
- Added new components for an advanced Gantt chart, including AdvancedGanttChart, GanttGrid, DraggableTaskBar, and TimelineMarkers. - Implemented a demo page (GanttDemoPage) to showcase the functionality of the new Gantt chart components. - Enhanced project roadmap features with ProjectRoadmapGantt and related components for better project management visualization. - Introduced sample data for testing and demonstration purposes, improving the user experience in the Gantt chart interface. - Updated main routes to include the new Gantt demo page for easy access.
This commit is contained in:
chamikaJ
@@ -0,0 +1,612 @@
|
||||
import React, { useReducer, useMemo, useCallback, useRef, useEffect, useState } from 'react';
|
||||
import {
|
||||
GanttTask,
|
||||
ColumnConfig,
|
||||
TimelineConfig,
|
||||
VirtualScrollConfig,
|
||||
ZoomLevel,
|
||||
GanttState,
|
||||
GanttAction,
|
||||
AdvancedGanttProps,
|
||||
SelectionState,
|
||||
GanttViewState,
|
||||
DragState
|
||||
} from '../../types/advanced-gantt.types';
|
||||
import GanttGrid from './GanttGrid';
|
||||
import DraggableTaskBar from './DraggableTaskBar';
|
||||
import TimelineMarkers, { holidayPresets, workingDayPresets } from './TimelineMarkers';
|
||||
import VirtualScrollContainer, { VirtualTimeline } from './VirtualScrollContainer';
|
||||
import {
|
||||
usePerformanceMonitoring,
|
||||
useTaskCalculations,
|
||||
useDateCalculations,
|
||||
useDebounce,
|
||||
useThrottle
|
||||
} from '../../utils/gantt-performance';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
|
||||
// Default configurations
|
||||
const defaultColumns: ColumnConfig[] = [
|
||||
{
|
||||
field: 'name',
|
||||
title: 'Task Name',
|
||||
width: 250,
|
||||
minWidth: 150,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'text'
|
||||
},
|
||||
{
|
||||
field: 'startDate',
|
||||
title: 'Start Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'endDate',
|
||||
title: 'End Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'duration',
|
||||
title: 'Duration',
|
||||
width: 80,
|
||||
minWidth: 60,
|
||||
resizable: true,
|
||||
sortable: false,
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
field: 'progress',
|
||||
title: 'Progress',
|
||||
width: 100,
|
||||
minWidth: 80,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'number'
|
||||
},
|
||||
];
|
||||
|
||||
const defaultTimelineConfig: TimelineConfig = {
|
||||
topTier: { unit: 'month', format: 'MMM yyyy', height: 30 },
|
||||
bottomTier: { unit: 'day', format: 'dd', height: 25 },
|
||||
showWeekends: true,
|
||||
showNonWorkingDays: true,
|
||||
holidays: holidayPresets.US,
|
||||
workingDays: workingDayPresets.standard,
|
||||
workingHours: { start: 9, end: 17 },
|
||||
dayWidth: 30,
|
||||
};
|
||||
|
||||
const defaultVirtualScrollConfig: VirtualScrollConfig = {
|
||||
enableRowVirtualization: true,
|
||||
enableTimelineVirtualization: true,
|
||||
bufferSize: 10,
|
||||
itemHeight: 40,
|
||||
overscan: 5,
|
||||
};
|
||||
|
||||
const defaultZoomLevels: ZoomLevel[] = [
|
||||
{
|
||||
name: 'Year',
|
||||
dayWidth: 2,
|
||||
scale: 0.1,
|
||||
topTier: { unit: 'year', format: 'yyyy' },
|
||||
bottomTier: { unit: 'month', format: 'MMM' }
|
||||
},
|
||||
{
|
||||
name: 'Month',
|
||||
dayWidth: 8,
|
||||
scale: 0.5,
|
||||
topTier: { unit: 'month', format: 'MMM yyyy' },
|
||||
bottomTier: { unit: 'week', format: 'w' }
|
||||
},
|
||||
{
|
||||
name: 'Week',
|
||||
dayWidth: 25,
|
||||
scale: 1,
|
||||
topTier: { unit: 'week', format: 'MMM dd' },
|
||||
bottomTier: { unit: 'day', format: 'dd' }
|
||||
},
|
||||
{
|
||||
name: 'Day',
|
||||
dayWidth: 50,
|
||||
scale: 2,
|
||||
topTier: { unit: 'day', format: 'MMM dd' },
|
||||
bottomTier: { unit: 'hour', format: 'HH' }
|
||||
},
|
||||
];
|
||||
|
||||
// Gantt state reducer
|
||||
function ganttReducer(state: GanttState, action: GanttAction): GanttState {
|
||||
switch (action.type) {
|
||||
case 'SET_TASKS':
|
||||
return { ...state, tasks: action.payload };
|
||||
|
||||
case 'UPDATE_TASK':
|
||||
return {
|
||||
...state,
|
||||
tasks: state.tasks.map(task =>
|
||||
task.id === action.payload.id
|
||||
? { ...task, ...action.payload.updates }
|
||||
: task
|
||||
),
|
||||
};
|
||||
|
||||
case 'ADD_TASK':
|
||||
return { ...state, tasks: [...state.tasks, action.payload] };
|
||||
|
||||
case 'DELETE_TASK':
|
||||
return {
|
||||
...state,
|
||||
tasks: state.tasks.filter(task => task.id !== action.payload),
|
||||
};
|
||||
|
||||
case 'SET_SELECTION':
|
||||
return {
|
||||
...state,
|
||||
selectionState: { ...state.selectionState, selectedTasks: action.payload },
|
||||
};
|
||||
|
||||
case 'SET_DRAG_STATE':
|
||||
return { ...state, dragState: action.payload };
|
||||
|
||||
case 'SET_ZOOM_LEVEL':
|
||||
const newZoomLevel = Math.max(0, Math.min(state.zoomLevels.length - 1, action.payload));
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, zoomLevel: newZoomLevel },
|
||||
timelineConfig: {
|
||||
...state.timelineConfig,
|
||||
dayWidth: state.zoomLevels[newZoomLevel].dayWidth,
|
||||
topTier: state.zoomLevels[newZoomLevel].topTier,
|
||||
bottomTier: state.zoomLevels[newZoomLevel].bottomTier,
|
||||
},
|
||||
};
|
||||
|
||||
case 'SET_SCROLL_POSITION':
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, scrollPosition: action.payload },
|
||||
};
|
||||
|
||||
case 'SET_SPLITTER_POSITION':
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, splitterPosition: action.payload },
|
||||
};
|
||||
|
||||
case 'TOGGLE_TASK_EXPANSION':
|
||||
return {
|
||||
...state,
|
||||
tasks: state.tasks.map(task =>
|
||||
task.id === action.payload
|
||||
? { ...task, isExpanded: !task.isExpanded }
|
||||
: task
|
||||
),
|
||||
};
|
||||
|
||||
case 'SET_VIEW_STATE':
|
||||
return {
|
||||
...state,
|
||||
viewState: { ...state.viewState, ...action.payload },
|
||||
};
|
||||
|
||||
case 'UPDATE_COLUMN_WIDTH':
|
||||
return {
|
||||
...state,
|
||||
columns: state.columns.map(col =>
|
||||
col.field === action.payload.field
|
||||
? { ...col, width: action.payload.width }
|
||||
: col
|
||||
),
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const AdvancedGanttChart: React.FC<AdvancedGanttProps> = ({
|
||||
tasks: initialTasks,
|
||||
columns = defaultColumns,
|
||||
timelineConfig = {},
|
||||
virtualScrollConfig = {},
|
||||
zoomLevels = defaultZoomLevels,
|
||||
initialViewState = {},
|
||||
initialSelection = [],
|
||||
onTaskUpdate,
|
||||
onTaskCreate,
|
||||
onTaskDelete,
|
||||
onTaskMove,
|
||||
onTaskResize,
|
||||
onProgressChange,
|
||||
onSelectionChange,
|
||||
onColumnResize,
|
||||
onDependencyCreate,
|
||||
onDependencyDelete,
|
||||
className = '',
|
||||
style = {},
|
||||
theme = 'auto',
|
||||
enableDragDrop = true,
|
||||
enableResize = true,
|
||||
enableProgressEdit = true,
|
||||
enableInlineEdit = true,
|
||||
enableVirtualScrolling = true,
|
||||
enableDebouncing = true,
|
||||
debounceDelay = 300,
|
||||
maxVisibleTasks = 1000,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const { startMeasure, endMeasure, metrics } = usePerformanceMonitoring();
|
||||
const { getDaysBetween } = useDateCalculations();
|
||||
|
||||
// Initialize state
|
||||
const initialState: GanttState = {
|
||||
tasks: initialTasks,
|
||||
columns,
|
||||
timelineConfig: { ...defaultTimelineConfig, ...timelineConfig },
|
||||
virtualScrollConfig: { ...defaultVirtualScrollConfig, ...virtualScrollConfig },
|
||||
dragState: null,
|
||||
selectionState: {
|
||||
selectedTasks: initialSelection,
|
||||
selectedRows: [],
|
||||
focusedTask: undefined,
|
||||
},
|
||||
viewState: {
|
||||
zoomLevel: 2, // Week view by default
|
||||
scrollPosition: { x: 0, y: 0 },
|
||||
viewportSize: { width: 0, height: 0 },
|
||||
splitterPosition: 40, // 40% for grid, 60% for timeline
|
||||
showCriticalPath: false,
|
||||
showBaseline: false,
|
||||
showProgress: true,
|
||||
showDependencies: true,
|
||||
autoSchedule: false,
|
||||
readOnly: false,
|
||||
...initialViewState,
|
||||
},
|
||||
zoomLevels,
|
||||
performanceMetrics: {
|
||||
renderTime: 0,
|
||||
taskCount: initialTasks.length,
|
||||
visibleTaskCount: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const [state, dispatch] = useReducer(ganttReducer, initialState);
|
||||
const { taskMap, parentChildMap, totalTasks } = useTaskCalculations(state.tasks);
|
||||
|
||||
// Calculate project timeline bounds
|
||||
const projectBounds = useMemo(() => {
|
||||
if (state.tasks.length === 0) {
|
||||
const today = new Date();
|
||||
return {
|
||||
start: new Date(today.getFullYear(), today.getMonth(), 1),
|
||||
end: new Date(today.getFullYear(), today.getMonth() + 3, 0),
|
||||
};
|
||||
}
|
||||
|
||||
const startDates = state.tasks.map(task => task.startDate);
|
||||
const endDates = state.tasks.map(task => task.endDate);
|
||||
const minStart = new Date(Math.min(...startDates.map(d => d.getTime())));
|
||||
const maxEnd = new Date(Math.max(...endDates.map(d => d.getTime())));
|
||||
|
||||
// Add some padding
|
||||
minStart.setDate(minStart.getDate() - 7);
|
||||
maxEnd.setDate(maxEnd.getDate() + 7);
|
||||
|
||||
return { start: minStart, end: maxEnd };
|
||||
}, [state.tasks]);
|
||||
|
||||
// Debounced event handlers
|
||||
const debouncedTaskUpdate = useDebounce(
|
||||
useCallback((taskId: string, updates: Partial<GanttTask>) => {
|
||||
dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates } });
|
||||
onTaskUpdate?.(taskId, updates);
|
||||
}, [onTaskUpdate]),
|
||||
enableDebouncing ? debounceDelay : 0
|
||||
);
|
||||
|
||||
const debouncedTaskMove = useDebounce(
|
||||
useCallback((taskId: string, newDates: { start: Date; end: Date }) => {
|
||||
dispatch({ type: 'UPDATE_TASK', payload: {
|
||||
id: taskId,
|
||||
updates: { startDate: newDates.start, endDate: newDates.end }
|
||||
}});
|
||||
onTaskMove?.(taskId, newDates);
|
||||
}, [onTaskMove]),
|
||||
enableDebouncing ? debounceDelay : 0
|
||||
);
|
||||
|
||||
const debouncedProgressChange = useDebounce(
|
||||
useCallback((taskId: string, progress: number) => {
|
||||
dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates: { progress } }});
|
||||
onProgressChange?.(taskId, progress);
|
||||
}, [onProgressChange]),
|
||||
enableDebouncing ? debounceDelay : 0
|
||||
);
|
||||
|
||||
// Throttled scroll handler
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((scrollLeft: number, scrollTop: number) => {
|
||||
dispatch({ type: 'SET_SCROLL_POSITION', payload: { x: scrollLeft, y: scrollTop } });
|
||||
}, []),
|
||||
16 // 60fps
|
||||
);
|
||||
|
||||
// Container size observer
|
||||
useEffect(() => {
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const { width, height } = entry.contentRect;
|
||||
setContainerSize({ width, height });
|
||||
dispatch({
|
||||
type: 'SET_VIEW_STATE',
|
||||
payload: { viewportSize: { width, height } }
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Calculate grid and timeline dimensions
|
||||
const gridWidth = useMemo(() => {
|
||||
return Math.floor(containerSize.width * (state.viewState.splitterPosition / 100));
|
||||
}, [containerSize.width, state.viewState.splitterPosition]);
|
||||
|
||||
const timelineWidth = useMemo(() => {
|
||||
return containerSize.width - gridWidth;
|
||||
}, [containerSize.width, gridWidth]);
|
||||
|
||||
// Handle zoom changes
|
||||
const handleZoomChange = useCallback((direction: 'in' | 'out') => {
|
||||
const currentZoom = state.viewState.zoomLevel;
|
||||
const newZoom = direction === 'in'
|
||||
? Math.min(state.zoomLevels.length - 1, currentZoom + 1)
|
||||
: Math.max(0, currentZoom - 1);
|
||||
|
||||
dispatch({ type: 'SET_ZOOM_LEVEL', payload: newZoom });
|
||||
}, [state.viewState.zoomLevel, state.zoomLevels.length]);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => ({
|
||||
background: themeWiseColor('#ffffff', '#1f2937', themeMode),
|
||||
border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
|
||||
timelineBackground: themeWiseColor('#f8f9fa', '#374151', themeMode),
|
||||
}), [themeMode]);
|
||||
|
||||
// Render timeline header
|
||||
const renderTimelineHeader = () => {
|
||||
const currentZoom = state.zoomLevels[state.viewState.zoomLevel];
|
||||
const totalDays = getDaysBetween(projectBounds.start, projectBounds.end);
|
||||
const totalWidth = totalDays * state.timelineConfig.dayWidth;
|
||||
|
||||
return (
|
||||
<div className="timeline-header border-b" style={{
|
||||
height: (currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25),
|
||||
backgroundColor: colors.timelineBackground,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
<VirtualTimeline
|
||||
startDate={projectBounds.start}
|
||||
endDate={projectBounds.end}
|
||||
dayWidth={state.timelineConfig.dayWidth}
|
||||
containerWidth={timelineWidth}
|
||||
containerHeight={(currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25)}
|
||||
onScroll={throttledScrollHandler}
|
||||
>
|
||||
{(date, index, style) => (
|
||||
<div className="timeline-cell flex flex-col border-r text-xs text-center" style={{
|
||||
...style,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
<div className="top-tier border-b px-1 py-1" style={{
|
||||
height: currentZoom.topTier.height || 30,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
{formatDateForUnit(date, currentZoom.topTier.unit)}
|
||||
</div>
|
||||
<div className="bottom-tier px-1 py-1" style={{
|
||||
height: currentZoom.bottomTier.height || 25,
|
||||
}}>
|
||||
{formatDateForUnit(date, currentZoom.bottomTier.unit)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</VirtualTimeline>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render timeline content
|
||||
const renderTimelineContent = () => {
|
||||
const headerHeight = (state.zoomLevels[state.viewState.zoomLevel].topTier.height || 30) +
|
||||
(state.zoomLevels[state.viewState.zoomLevel].bottomTier.height || 25);
|
||||
const contentHeight = containerSize.height - headerHeight;
|
||||
|
||||
return (
|
||||
<div className="timeline-content relative" style={{ height: contentHeight }}>
|
||||
{/* Timeline markers (weekends, holidays, etc.) */}
|
||||
<TimelineMarkers
|
||||
startDate={projectBounds.start}
|
||||
endDate={projectBounds.end}
|
||||
dayWidth={state.timelineConfig.dayWidth}
|
||||
containerHeight={contentHeight}
|
||||
timelineConfig={state.timelineConfig}
|
||||
holidays={state.timelineConfig.holidays}
|
||||
showWeekends={state.timelineConfig.showWeekends}
|
||||
showHolidays={true}
|
||||
showToday={true}
|
||||
/>
|
||||
|
||||
{/* Task bars */}
|
||||
<VirtualScrollContainer
|
||||
items={state.tasks}
|
||||
itemHeight={state.virtualScrollConfig.itemHeight}
|
||||
containerHeight={contentHeight}
|
||||
containerWidth={timelineWidth}
|
||||
overscan={state.virtualScrollConfig.overscan}
|
||||
onScroll={throttledScrollHandler}
|
||||
>
|
||||
{(task, index, style) => (
|
||||
<DraggableTaskBar
|
||||
key={task.id}
|
||||
task={task}
|
||||
timelineStart={projectBounds.start}
|
||||
dayWidth={state.timelineConfig.dayWidth}
|
||||
rowHeight={state.virtualScrollConfig.itemHeight}
|
||||
index={index}
|
||||
onTaskMove={debouncedTaskMove}
|
||||
onTaskResize={debouncedTaskMove}
|
||||
onProgressChange={debouncedProgressChange}
|
||||
enableDragDrop={enableDragDrop}
|
||||
enableResize={enableResize}
|
||||
enableProgressEdit={enableProgressEdit}
|
||||
readOnly={state.viewState.readOnly}
|
||||
/>
|
||||
)}
|
||||
</VirtualScrollContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render toolbar
|
||||
const renderToolbar = () => (
|
||||
<div className="gantt-toolbar flex items-center justify-between p-2 border-b bg-gray-50 dark:bg-gray-800" style={{
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
<div className="toolbar-left flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => handleZoomChange('out')}
|
||||
disabled={state.viewState.zoomLevel === 0}
|
||||
className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Zoom Out
|
||||
</button>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{state.zoomLevels[state.viewState.zoomLevel].name}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleZoomChange('in')}
|
||||
disabled={state.viewState.zoomLevel === state.zoomLevels.length - 1}
|
||||
className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Zoom In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="toolbar-right flex items-center space-x-2 text-xs text-gray-500">
|
||||
<span>Tasks: {state.tasks.length}</span>
|
||||
<span>•</span>
|
||||
<span>Render: {Math.round(metrics.renderTime)}ms</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Performance monitoring
|
||||
useEffect(() => {
|
||||
startMeasure('render');
|
||||
return () => endMeasure('render');
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`advanced-gantt-chart flex flex-col ${className}`}
|
||||
style={{
|
||||
height: '100%',
|
||||
backgroundColor: colors.background,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{/* Toolbar */}
|
||||
{renderToolbar()}
|
||||
|
||||
{/* Main content */}
|
||||
<div className="gantt-content flex flex-1 overflow-hidden">
|
||||
{/* Grid */}
|
||||
<div className="gantt-grid-container" style={{ width: gridWidth }}>
|
||||
<GanttGrid
|
||||
tasks={state.tasks}
|
||||
columns={state.columns}
|
||||
rowHeight={state.virtualScrollConfig.itemHeight}
|
||||
containerHeight={containerSize.height - 50} // Subtract toolbar height
|
||||
selection={state.selectionState}
|
||||
enableInlineEdit={enableInlineEdit}
|
||||
onTaskClick={(task) => {
|
||||
// Handle task selection
|
||||
const newSelection = { ...state.selectionState, selectedTasks: [task.id] };
|
||||
dispatch({ type: 'SET_SELECTION', payload: [task.id] });
|
||||
onSelectionChange?.(newSelection);
|
||||
}}
|
||||
onTaskExpand={(taskId) => {
|
||||
dispatch({ type: 'TOGGLE_TASK_EXPANSION', payload: taskId });
|
||||
}}
|
||||
onColumnResize={(field, width) => {
|
||||
dispatch({ type: 'UPDATE_COLUMN_WIDTH', payload: { field, width } });
|
||||
onColumnResize?.(field, width);
|
||||
}}
|
||||
onTaskUpdate={debouncedTaskUpdate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="gantt-timeline-container border-l" style={{
|
||||
width: timelineWidth,
|
||||
borderColor: colors.border,
|
||||
}}>
|
||||
{renderTimelineHeader()}
|
||||
{renderTimelineContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper function to format dates based on unit
|
||||
function formatDateForUnit(date: Date, unit: string): string {
|
||||
switch (unit) {
|
||||
case 'year':
|
||||
return date.getFullYear().toString();
|
||||
case 'month':
|
||||
return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
|
||||
case 'week':
|
||||
return `W${getWeekNumber(date)}`;
|
||||
case 'day':
|
||||
return date.getDate().toString();
|
||||
case 'hour':
|
||||
return date.getHours().toString().padStart(2, '0');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getWeekNumber(date: Date): number {
|
||||
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
|
||||
const dayNum = d.getUTCDay() || 7;
|
||||
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
|
||||
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
|
||||
return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
|
||||
}
|
||||
|
||||
export default AdvancedGanttChart;
|
||||
@@ -0,0 +1,668 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Button, Space, message, Card } from 'antd';
|
||||
import AdvancedGanttChart from './AdvancedGanttChart';
|
||||
import { GanttTask, ColumnConfig } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { holidayPresets, workingDayPresets } from './TimelineMarkers';
|
||||
|
||||
// Enhanced sample data with more realistic project structure
|
||||
const generateSampleTasks = (): GanttTask[] => {
|
||||
const baseDate = new Date(2024, 11, 1); // December 1, 2024
|
||||
|
||||
return [
|
||||
// Project Phase 1: Planning & Design
|
||||
{
|
||||
id: 'project-1',
|
||||
name: '🚀 Web Platform Development',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 45,
|
||||
type: 'project',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
color: '#1890ff',
|
||||
hasChildren: true,
|
||||
isExpanded: true,
|
||||
level: 0,
|
||||
},
|
||||
{
|
||||
id: 'planning-phase',
|
||||
name: '📋 Planning & Analysis Phase',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2024, 11, 20),
|
||||
progress: 85,
|
||||
type: 'project',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'project-1',
|
||||
color: '#52c41a',
|
||||
hasChildren: true,
|
||||
isExpanded: true,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'requirements-analysis',
|
||||
name: 'Requirements Gathering & Analysis',
|
||||
startDate: new Date(2024, 11, 1),
|
||||
endDate: new Date(2024, 11, 8),
|
||||
progress: 100,
|
||||
type: 'task',
|
||||
status: 'completed',
|
||||
priority: 'high',
|
||||
parent: 'planning-phase',
|
||||
assignee: {
|
||||
id: 'user-1',
|
||||
name: 'Alice Johnson',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Alice+Johnson&background=1890ff&color=fff',
|
||||
},
|
||||
tags: ['research', 'documentation'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'technical-architecture',
|
||||
name: 'Technical Architecture Design',
|
||||
startDate: new Date(2024, 11, 8),
|
||||
endDate: new Date(2024, 11, 18),
|
||||
progress: 75,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'planning-phase',
|
||||
assignee: {
|
||||
id: 'user-2',
|
||||
name: 'Bob Smith',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Bob+Smith&background=52c41a&color=fff',
|
||||
},
|
||||
dependencies: ['requirements-analysis'],
|
||||
tags: ['architecture', 'design'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'ui-ux-design',
|
||||
name: 'UI/UX Design & Prototyping',
|
||||
startDate: new Date(2024, 11, 10),
|
||||
endDate: new Date(2024, 11, 20),
|
||||
progress: 60,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'medium',
|
||||
parent: 'planning-phase',
|
||||
assignee: {
|
||||
id: 'user-3',
|
||||
name: 'Carol Davis',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Carol+Davis&background=faad14&color=fff',
|
||||
},
|
||||
dependencies: ['requirements-analysis'],
|
||||
tags: ['design', 'prototype'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'milestone-planning-complete',
|
||||
name: '🎯 Planning Phase Complete',
|
||||
startDate: new Date(2024, 11, 20),
|
||||
endDate: new Date(2024, 11, 20),
|
||||
progress: 0,
|
||||
type: 'milestone',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'planning-phase',
|
||||
dependencies: ['technical-architecture', 'ui-ux-design'],
|
||||
level: 2,
|
||||
},
|
||||
|
||||
// Development Phase
|
||||
{
|
||||
id: 'development-phase',
|
||||
name: '⚡ Development Phase',
|
||||
startDate: new Date(2024, 11, 21),
|
||||
endDate: new Date(2025, 1, 28),
|
||||
progress: 35,
|
||||
type: 'project',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'project-1',
|
||||
color: '#722ed1',
|
||||
hasChildren: true,
|
||||
isExpanded: true,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'backend-development',
|
||||
name: 'Backend API Development',
|
||||
startDate: new Date(2024, 11, 21),
|
||||
endDate: new Date(2025, 1, 15),
|
||||
progress: 45,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'development-phase',
|
||||
assignee: {
|
||||
id: 'user-4',
|
||||
name: 'David Wilson',
|
||||
avatar: 'https://ui-avatars.com/api/?name=David+Wilson&background=722ed1&color=fff',
|
||||
},
|
||||
dependencies: ['milestone-planning-complete'],
|
||||
tags: ['backend', 'api'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'frontend-development',
|
||||
name: 'Frontend React Application',
|
||||
startDate: new Date(2025, 0, 5),
|
||||
endDate: new Date(2025, 1, 25),
|
||||
progress: 25,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'high',
|
||||
parent: 'development-phase',
|
||||
assignee: {
|
||||
id: 'user-5',
|
||||
name: 'Eva Brown',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Eva+Brown&background=ff7a45&color=fff',
|
||||
},
|
||||
dependencies: ['backend-development'],
|
||||
tags: ['frontend', 'react'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'database-setup',
|
||||
name: 'Database Schema & Migration',
|
||||
startDate: new Date(2024, 11, 21),
|
||||
endDate: new Date(2025, 0, 10),
|
||||
progress: 80,
|
||||
type: 'task',
|
||||
status: 'in-progress',
|
||||
priority: 'medium',
|
||||
parent: 'development-phase',
|
||||
assignee: {
|
||||
id: 'user-6',
|
||||
name: 'Frank Miller',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Frank+Miller&background=13c2c2&color=fff',
|
||||
},
|
||||
dependencies: ['milestone-planning-complete'],
|
||||
tags: ['database', 'migration'],
|
||||
level: 2,
|
||||
},
|
||||
|
||||
// Testing Phase
|
||||
{
|
||||
id: 'testing-phase',
|
||||
name: '🧪 Testing & QA Phase',
|
||||
startDate: new Date(2025, 2, 1),
|
||||
endDate: new Date(2025, 2, 20),
|
||||
progress: 0,
|
||||
type: 'project',
|
||||
status: 'not-started',
|
||||
priority: 'high',
|
||||
parent: 'project-1',
|
||||
color: '#fa8c16',
|
||||
hasChildren: true,
|
||||
isExpanded: false,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'unit-testing',
|
||||
name: 'Unit Testing Implementation',
|
||||
startDate: new Date(2025, 2, 1),
|
||||
endDate: new Date(2025, 2, 10),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'high',
|
||||
parent: 'testing-phase',
|
||||
assignee: {
|
||||
id: 'user-7',
|
||||
name: 'Grace Lee',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Grace+Lee&background=fa8c16&color=fff',
|
||||
},
|
||||
dependencies: ['frontend-development'],
|
||||
tags: ['testing', 'unit'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'integration-testing',
|
||||
name: 'Integration & E2E Testing',
|
||||
startDate: new Date(2025, 2, 8),
|
||||
endDate: new Date(2025, 2, 18),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'high',
|
||||
parent: 'testing-phase',
|
||||
assignee: {
|
||||
id: 'user-8',
|
||||
name: 'Henry Clark',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Henry+Clark&background=eb2f96&color=fff',
|
||||
},
|
||||
dependencies: ['unit-testing'],
|
||||
tags: ['testing', 'integration'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'milestone-beta-ready',
|
||||
name: '🎯 Beta Release Ready',
|
||||
startDate: new Date(2025, 2, 20),
|
||||
endDate: new Date(2025, 2, 20),
|
||||
progress: 0,
|
||||
type: 'milestone',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'testing-phase',
|
||||
dependencies: ['integration-testing'],
|
||||
level: 2,
|
||||
},
|
||||
|
||||
// Deployment Phase
|
||||
{
|
||||
id: 'deployment-phase',
|
||||
name: '🚀 Deployment & Launch',
|
||||
startDate: new Date(2025, 2, 21),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 0,
|
||||
type: 'project',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'project-1',
|
||||
color: '#f5222d',
|
||||
hasChildren: true,
|
||||
isExpanded: false,
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
id: 'production-deployment',
|
||||
name: 'Production Environment Setup',
|
||||
startDate: new Date(2025, 2, 21),
|
||||
endDate: new Date(2025, 2, 25),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'deployment-phase',
|
||||
assignee: {
|
||||
id: 'user-9',
|
||||
name: 'Ivy Taylor',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Ivy+Taylor&background=f5222d&color=fff',
|
||||
},
|
||||
dependencies: ['milestone-beta-ready'],
|
||||
tags: ['deployment', 'production'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'go-live',
|
||||
name: 'Go Live & Monitoring',
|
||||
startDate: new Date(2025, 2, 26),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'deployment-phase',
|
||||
assignee: {
|
||||
id: 'user-10',
|
||||
name: 'Jack Anderson',
|
||||
avatar: 'https://ui-avatars.com/api/?name=Jack+Anderson&background=2f54eb&color=fff',
|
||||
},
|
||||
dependencies: ['production-deployment'],
|
||||
tags: ['launch', 'monitoring'],
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
id: 'milestone-project-complete',
|
||||
name: '🎉 Project Launch Complete',
|
||||
startDate: new Date(2025, 2, 31),
|
||||
endDate: new Date(2025, 2, 31),
|
||||
progress: 0,
|
||||
type: 'milestone',
|
||||
status: 'not-started',
|
||||
priority: 'critical',
|
||||
parent: 'deployment-phase',
|
||||
dependencies: ['go-live'],
|
||||
level: 2,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// Enhanced column configuration
|
||||
const sampleColumns: ColumnConfig[] = [
|
||||
{
|
||||
field: 'name',
|
||||
title: 'Task / Phase Name',
|
||||
width: 300,
|
||||
minWidth: 200,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'text'
|
||||
},
|
||||
{
|
||||
field: 'assignee',
|
||||
title: 'Assignee',
|
||||
width: 150,
|
||||
minWidth: 120,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
field: 'startDate',
|
||||
title: 'Start Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'endDate',
|
||||
title: 'End Date',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'date'
|
||||
},
|
||||
{
|
||||
field: 'duration',
|
||||
title: 'Duration',
|
||||
width: 80,
|
||||
minWidth: 60,
|
||||
resizable: true,
|
||||
sortable: false,
|
||||
fixed: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
field: 'progress',
|
||||
title: 'Progress',
|
||||
width: 120,
|
||||
minWidth: 100,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'number'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: 'Status',
|
||||
width: 100,
|
||||
minWidth: 80,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'select',
|
||||
editorOptions: [
|
||||
{ value: 'not-started', label: 'Not Started' },
|
||||
{ value: 'in-progress', label: 'In Progress' },
|
||||
{ value: 'completed', label: 'Completed' },
|
||||
{ value: 'on-hold', label: 'On Hold' },
|
||||
{ value: 'overdue', label: 'Overdue' },
|
||||
]
|
||||
},
|
||||
{
|
||||
field: 'priority',
|
||||
title: 'Priority',
|
||||
width: 100,
|
||||
minWidth: 80,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
fixed: true,
|
||||
editor: 'select',
|
||||
editorOptions: [
|
||||
{ value: 'low', label: 'Low' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'high', label: 'High' },
|
||||
{ value: 'critical', label: 'Critical' },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const AdvancedGanttDemo: React.FC = () => {
|
||||
const [tasks, setTasks] = useState<GanttTask[]>(generateSampleTasks());
|
||||
const [selectedTasks, setSelectedTasks] = useState<string[]>([]);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
const handleTaskUpdate = (taskId: string, updates: Partial<GanttTask>) => {
|
||||
setTasks(prevTasks =>
|
||||
prevTasks.map(task =>
|
||||
task.id === taskId ? { ...task, ...updates } : task
|
||||
)
|
||||
);
|
||||
message.success(`Task "${tasks.find(t => t.id === taskId)?.name}" updated`);
|
||||
};
|
||||
|
||||
const handleTaskMove = (taskId: string, newDates: { start: Date; end: Date }) => {
|
||||
setTasks(prevTasks =>
|
||||
prevTasks.map(task =>
|
||||
task.id === taskId
|
||||
? { ...task, startDate: newDates.start, endDate: newDates.end }
|
||||
: task
|
||||
)
|
||||
);
|
||||
message.info(`Task moved: ${newDates.start.toLocaleDateString()} - ${newDates.end.toLocaleDateString()}`);
|
||||
};
|
||||
|
||||
const handleProgressChange = (taskId: string, progress: number) => {
|
||||
setTasks(prevTasks =>
|
||||
prevTasks.map(task =>
|
||||
task.id === taskId ? { ...task, progress } : task
|
||||
)
|
||||
);
|
||||
message.info(`Progress updated: ${Math.round(progress)}%`);
|
||||
};
|
||||
|
||||
const handleSelectionChange = (selection: any) => {
|
||||
setSelectedTasks(selection.selectedTasks);
|
||||
};
|
||||
|
||||
const resetToSampleData = () => {
|
||||
setTasks(generateSampleTasks());
|
||||
setSelectedTasks([]);
|
||||
message.info('Gantt chart reset to sample data');
|
||||
};
|
||||
|
||||
const addSampleTask = () => {
|
||||
const newTask: GanttTask = {
|
||||
id: `task-${Date.now()}`,
|
||||
name: `New Task ${tasks.length + 1}`,
|
||||
startDate: new Date(),
|
||||
endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // +7 days
|
||||
progress: 0,
|
||||
type: 'task',
|
||||
status: 'not-started',
|
||||
priority: 'medium',
|
||||
level: 0,
|
||||
};
|
||||
setTasks(prev => [...prev, newTask]);
|
||||
message.success('New task added');
|
||||
};
|
||||
|
||||
const deleteSelectedTasks = () => {
|
||||
if (selectedTasks.length === 0) {
|
||||
message.warning('No tasks selected');
|
||||
return;
|
||||
}
|
||||
|
||||
setTasks(prev => prev.filter(task => !selectedTasks.includes(task.id)));
|
||||
setSelectedTasks([]);
|
||||
message.success(`${selectedTasks.length} task(s) deleted`);
|
||||
};
|
||||
|
||||
const taskStats = useMemo(() => {
|
||||
const total = tasks.length;
|
||||
const completed = tasks.filter(t => t.status === 'completed').length;
|
||||
const inProgress = tasks.filter(t => t.status === 'in-progress').length;
|
||||
const overdue = tasks.filter(t => t.status === 'overdue').length;
|
||||
const avgProgress = tasks.reduce((sum, t) => sum + t.progress, 0) / total;
|
||||
|
||||
return { total, completed, inProgress, overdue, avgProgress };
|
||||
}, [tasks]);
|
||||
|
||||
return (
|
||||
<div className="advanced-gantt-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
🚀 Advanced Gantt Chart Demo
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Professional Gantt chart with draggable tasks, virtual scrolling, holiday markers,
|
||||
and performance optimizations for modern project management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end space-y-2">
|
||||
<Space>
|
||||
<Button
|
||||
onClick={addSampleTask}
|
||||
type="primary"
|
||||
className="dark:border-gray-600"
|
||||
>
|
||||
Add Task
|
||||
</Button>
|
||||
<Button
|
||||
onClick={deleteSelectedTasks}
|
||||
danger
|
||||
disabled={selectedTasks.length === 0}
|
||||
className="dark:border-gray-600"
|
||||
>
|
||||
Delete Selected ({selectedTasks.length})
|
||||
</Button>
|
||||
<Button
|
||||
onClick={resetToSampleData}
|
||||
className="dark:border-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Reset Data
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Statistics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-blue-600 dark:text-blue-400 text-sm font-medium">Total Tasks</div>
|
||||
<div className="text-2xl font-bold text-blue-700 dark:text-blue-300">{taskStats.total}</div>
|
||||
</div>
|
||||
<div className="bg-green-50 dark:bg-green-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-green-600 dark:text-green-400 text-sm font-medium">Completed</div>
|
||||
<div className="text-2xl font-bold text-green-700 dark:text-green-300">{taskStats.completed}</div>
|
||||
</div>
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-yellow-600 dark:text-yellow-400 text-sm font-medium">In Progress</div>
|
||||
<div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{taskStats.inProgress}</div>
|
||||
</div>
|
||||
<div className="bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg p-3">
|
||||
<div className="text-purple-600 dark:text-purple-400 text-sm font-medium">Avg Progress</div>
|
||||
<div className="text-2xl font-bold text-purple-700 dark:text-purple-300">
|
||||
{Math.round(taskStats.avgProgress)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gantt Chart */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm" style={{ height: '70vh' }}>
|
||||
<AdvancedGanttChart
|
||||
tasks={tasks}
|
||||
columns={sampleColumns}
|
||||
timelineConfig={{
|
||||
showWeekends: true,
|
||||
showNonWorkingDays: true,
|
||||
holidays: holidayPresets.US,
|
||||
workingDays: workingDayPresets.standard,
|
||||
dayWidth: 30,
|
||||
}}
|
||||
onTaskUpdate={handleTaskUpdate}
|
||||
onTaskMove={handleTaskMove}
|
||||
onProgressChange={handleProgressChange}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
enableDragDrop={true}
|
||||
enableResize={true}
|
||||
enableProgressEdit={true}
|
||||
enableInlineEdit={true}
|
||||
enableVirtualScrolling={true}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Feature List */}
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
✨ Advanced Features Demonstrated
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Performance & UX</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Virtual scrolling for 1000+ tasks</li>
|
||||
<li>• Smooth 60fps drag & drop</li>
|
||||
<li>• Debounced updates</li>
|
||||
<li>• Memory-optimized rendering</li>
|
||||
<li>• Responsive design</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Gantt Features</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Draggable task bars</li>
|
||||
<li>• Resizable task duration</li>
|
||||
<li>• Progress editing</li>
|
||||
<li>• Multi-level hierarchy</li>
|
||||
<li>• Task dependencies</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Timeline & Markers</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Weekend & holiday markers</li>
|
||||
<li>• Working day indicators</li>
|
||||
<li>• Today line</li>
|
||||
<li>• Multi-tier timeline</li>
|
||||
<li>• Zoom levels (Year/Month/Week/Day)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Grid Features</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Fixed columns layout</li>
|
||||
<li>• Inline editing</li>
|
||||
<li>• Column resizing</li>
|
||||
<li>• Multi-select</li>
|
||||
<li>• Hierarchical tree view</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">UI/UX</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Dark/Light theme support</li>
|
||||
<li>• Tailwind CSS styling</li>
|
||||
<li>• Consistent with Worklenz</li>
|
||||
<li>• Accessibility features</li>
|
||||
<li>• Mobile responsive</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">Architecture</h4>
|
||||
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<li>• Modern React patterns</li>
|
||||
<li>• TypeScript safety</li>
|
||||
<li>• Optimized performance</li>
|
||||
<li>• Enterprise features</li>
|
||||
<li>• Best practices 2025</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancedGanttDemo;
|
||||
@@ -0,0 +1,304 @@
|
||||
import React, { useState, useRef, useCallback, useMemo } from 'react';
|
||||
import { GanttTask, DragState } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import { useDateCalculations } from '../../utils/gantt-performance';
|
||||
|
||||
interface DraggableTaskBarProps {
|
||||
task: GanttTask;
|
||||
timelineStart: Date;
|
||||
dayWidth: number;
|
||||
rowHeight: number;
|
||||
index: number;
|
||||
onTaskMove?: (taskId: string, newDates: { start: Date; end: Date }) => void;
|
||||
onTaskResize?: (taskId: string, newDates: { start: Date; end: Date }) => void;
|
||||
onProgressChange?: (taskId: string, progress: number) => void;
|
||||
onTaskClick?: (task: GanttTask) => void;
|
||||
onTaskDoubleClick?: (task: GanttTask) => void;
|
||||
enableDragDrop?: boolean;
|
||||
enableResize?: boolean;
|
||||
enableProgressEdit?: boolean;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
const DraggableTaskBar: React.FC<DraggableTaskBarProps> = ({
|
||||
task,
|
||||
timelineStart,
|
||||
dayWidth,
|
||||
rowHeight,
|
||||
index,
|
||||
onTaskMove,
|
||||
onTaskResize,
|
||||
onProgressChange,
|
||||
onTaskClick,
|
||||
onTaskDoubleClick,
|
||||
enableDragDrop = true,
|
||||
enableResize = true,
|
||||
enableProgressEdit = true,
|
||||
readOnly = false,
|
||||
}) => {
|
||||
const [dragState, setDragState] = useState<DragState | null>(null);
|
||||
const [hoverState, setHoverState] = useState<string | null>(null);
|
||||
const taskBarRef = useRef<HTMLDivElement>(null);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const { getDaysBetween, addDays } = useDateCalculations();
|
||||
|
||||
// Calculate task position and dimensions
|
||||
const taskPosition = useMemo(() => {
|
||||
const startDays = getDaysBetween(timelineStart, task.startDate);
|
||||
const duration = getDaysBetween(task.startDate, task.endDate);
|
||||
|
||||
return {
|
||||
x: startDays * dayWidth,
|
||||
width: Math.max(dayWidth * 0.5, duration * dayWidth),
|
||||
y: index * rowHeight + 8, // 8px padding
|
||||
height: rowHeight - 16, // 16px total padding
|
||||
};
|
||||
}, [task.startDate, task.endDate, timelineStart, dayWidth, rowHeight, index, getDaysBetween]);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => {
|
||||
const baseColor = task.color || getDefaultTaskColor(task.status);
|
||||
return {
|
||||
background: themeWiseColor(baseColor, adjustColorForDarkMode(baseColor), themeMode),
|
||||
border: themeWiseColor(darkenColor(baseColor, 0.2), lightenColor(baseColor, 0.2), themeMode),
|
||||
progress: themeWiseColor('#52c41a', '#34d399', themeMode),
|
||||
text: themeWiseColor('#ffffff', '#f9fafb', themeMode),
|
||||
hover: themeWiseColor(lightenColor(baseColor, 0.1), darkenColor(baseColor, 0.1), themeMode),
|
||||
};
|
||||
}, [task.color, task.status, themeMode]);
|
||||
|
||||
// Mouse event handlers
|
||||
const handleMouseDown = useCallback((e: React.MouseEvent, dragType: DragState['dragType']) => {
|
||||
if (readOnly || !enableDragDrop) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const rect = taskBarRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
dragType,
|
||||
taskId: task.id,
|
||||
initialPosition: { x: e.clientX, y: e.clientY },
|
||||
currentPosition: { x: e.clientX, y: e.clientY },
|
||||
initialDates: { start: task.startDate, end: task.endDate },
|
||||
initialProgress: task.progress,
|
||||
snapToGrid: true,
|
||||
});
|
||||
|
||||
// Add global mouse event listeners
|
||||
const handleMouseMove = (moveEvent: MouseEvent) => {
|
||||
handleMouseMove_Internal(moveEvent, dragType);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
handleMouseUp_Internal();
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
}, [readOnly, enableDragDrop, task]);
|
||||
|
||||
const handleMouseMove_Internal = useCallback((e: MouseEvent, dragType: DragState['dragType']) => {
|
||||
if (!dragState) return;
|
||||
|
||||
const deltaX = e.clientX - dragState.initialPosition.x;
|
||||
const deltaDays = Math.round(deltaX / dayWidth);
|
||||
|
||||
let newStartDate = task.startDate;
|
||||
let newEndDate = task.endDate;
|
||||
|
||||
switch (dragType) {
|
||||
case 'move':
|
||||
newStartDate = addDays(dragState.initialDates.start, deltaDays);
|
||||
newEndDate = addDays(dragState.initialDates.end, deltaDays);
|
||||
break;
|
||||
|
||||
case 'resize-start':
|
||||
newStartDate = addDays(dragState.initialDates.start, deltaDays);
|
||||
// Ensure minimum duration
|
||||
if (newStartDate >= newEndDate) {
|
||||
newStartDate = addDays(newEndDate, -1);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'resize-end':
|
||||
newEndDate = addDays(dragState.initialDates.end, deltaDays);
|
||||
// Ensure minimum duration
|
||||
if (newEndDate <= newStartDate) {
|
||||
newEndDate = addDays(newStartDate, 1);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'progress':
|
||||
if (enableProgressEdit) {
|
||||
const progressDelta = deltaX / taskPosition.width;
|
||||
const newProgress = Math.max(0, Math.min(100, (dragState.initialProgress || 0) + progressDelta * 100));
|
||||
onProgressChange?.(task.id, newProgress);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Update drag state
|
||||
setDragState(prev => prev ? {
|
||||
...prev,
|
||||
currentPosition: { x: e.clientX, y: e.clientY },
|
||||
} : null);
|
||||
|
||||
// Call appropriate handler
|
||||
if (dragType === 'move') {
|
||||
onTaskMove?.(task.id, { start: newStartDate, end: newEndDate });
|
||||
} else if (dragType.startsWith('resize')) {
|
||||
onTaskResize?.(task.id, { start: newStartDate, end: newEndDate });
|
||||
}
|
||||
}, [dragState, dayWidth, task, taskPosition.width, enableProgressEdit, onTaskMove, onTaskResize, onProgressChange, addDays]);
|
||||
|
||||
const handleMouseUp_Internal = useCallback(() => {
|
||||
setDragState(null);
|
||||
}, []);
|
||||
|
||||
const handleClick = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onTaskClick?.(task);
|
||||
}, [task, onTaskClick]);
|
||||
|
||||
const handleDoubleClick = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onTaskDoubleClick?.(task);
|
||||
}, [task, onTaskDoubleClick]);
|
||||
|
||||
// Render task bar with handles
|
||||
const renderTaskBar = () => {
|
||||
const isSelected = false; // TODO: Get from selection state
|
||||
const isDragging = dragState?.isDragging || false;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={taskBarRef}
|
||||
className={`task-bar relative cursor-pointer select-none transition-all duration-200 ${
|
||||
isDragging ? 'z-10 shadow-lg' : ''
|
||||
} ${isSelected ? 'ring-2 ring-blue-500 ring-opacity-50' : ''}`}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: taskPosition.x,
|
||||
top: taskPosition.y,
|
||||
width: taskPosition.width,
|
||||
height: taskPosition.height,
|
||||
backgroundColor: dragState?.isDragging ? colors.hover : colors.background,
|
||||
border: `1px solid ${colors.border}`,
|
||||
borderRadius: '4px',
|
||||
transform: isDragging ? 'translateY(-2px)' : 'none',
|
||||
boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : '0 1px 3px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
onClick={handleClick}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
onMouseEnter={() => setHoverState('task')}
|
||||
onMouseLeave={() => setHoverState(null)}
|
||||
onMouseDown={(e) => handleMouseDown(e, 'move')}
|
||||
>
|
||||
{/* Progress bar */}
|
||||
<div
|
||||
className="progress-bar absolute inset-0 rounded-l"
|
||||
style={{
|
||||
width: `${task.progress}%`,
|
||||
backgroundColor: colors.progress,
|
||||
opacity: 0.7,
|
||||
borderRadius: '3px 0 0 3px',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Task content */}
|
||||
<div className="task-content relative z-10 h-full flex items-center px-2">
|
||||
<span
|
||||
className="task-name text-xs font-medium truncate"
|
||||
style={{ color: colors.text }}
|
||||
>
|
||||
{task.name}
|
||||
</span>
|
||||
|
||||
{/* Duration display for smaller tasks */}
|
||||
{taskPosition.width < 100 && (
|
||||
<span
|
||||
className="task-duration text-xs ml-auto"
|
||||
style={{ color: colors.text, opacity: 0.8 }}
|
||||
>
|
||||
{getDaysBetween(task.startDate, task.endDate)}d
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Resize handles */}
|
||||
{enableResize && !readOnly && hoverState === 'task' && (
|
||||
<>
|
||||
{/* Left resize handle */}
|
||||
<div
|
||||
className="resize-handle-left absolute left-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
|
||||
onMouseDown={(e) => handleMouseDown(e, 'resize-start')}
|
||||
onMouseEnter={() => setHoverState('resize-start')}
|
||||
/>
|
||||
|
||||
{/* Right resize handle */}
|
||||
<div
|
||||
className="resize-handle-right absolute right-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
|
||||
onMouseDown={(e) => handleMouseDown(e, 'resize-end')}
|
||||
onMouseEnter={() => setHoverState('resize-end')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Progress handle */}
|
||||
{enableProgressEdit && !readOnly && hoverState === 'task' && (
|
||||
<div
|
||||
className="progress-handle absolute top-0 h-full w-1 cursor-ew-resize bg-blue-500 opacity-75"
|
||||
style={{ left: `${task.progress}%` }}
|
||||
onMouseDown={(e) => handleMouseDown(e, 'progress')}
|
||||
onMouseEnter={() => setHoverState('progress')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Task type indicator */}
|
||||
{task.type === 'milestone' && (
|
||||
<div
|
||||
className="milestone-indicator absolute -top-1 -right-1 w-3 h-3 transform rotate-45"
|
||||
style={{ backgroundColor: colors.border }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return renderTaskBar();
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
function getDefaultTaskColor(status: GanttTask['status']): string {
|
||||
switch (status) {
|
||||
case 'completed': return '#52c41a';
|
||||
case 'in-progress': return '#1890ff';
|
||||
case 'overdue': return '#ff4d4f';
|
||||
case 'on-hold': return '#faad14';
|
||||
default: return '#d9d9d9';
|
||||
}
|
||||
}
|
||||
|
||||
function darkenColor(color: string, amount: number): string {
|
||||
// Simple color darkening - in a real app, use a proper color manipulation library
|
||||
return color;
|
||||
}
|
||||
|
||||
function lightenColor(color: string, amount: number): string {
|
||||
// Simple color lightening - in a real app, use a proper color manipulation library
|
||||
return color;
|
||||
}
|
||||
|
||||
function adjustColorForDarkMode(color: string): string {
|
||||
// Adjust color for dark mode - in a real app, use a proper color manipulation library
|
||||
return color;
|
||||
}
|
||||
|
||||
export default DraggableTaskBar;
|
||||
492
worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx
Normal file
492
worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx
Normal file
@@ -0,0 +1,492 @@
|
||||
import React, { useMemo, useRef, useState, useCallback } from 'react';
|
||||
import { GanttTask, ColumnConfig, SelectionState } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
||||
import { CalendarIcon, UserIcon, FlagIcon } from '@heroicons/react/24/solid';
|
||||
|
||||
interface GanttGridProps {
|
||||
tasks: GanttTask[];
|
||||
columns: ColumnConfig[];
|
||||
rowHeight: number;
|
||||
containerHeight: number;
|
||||
selection: SelectionState;
|
||||
enableInlineEdit?: boolean;
|
||||
enableMultiSelect?: boolean;
|
||||
onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
|
||||
onTaskDoubleClick?: (task: GanttTask) => void;
|
||||
onTaskExpand?: (taskId: string) => void;
|
||||
onSelectionChange?: (selection: SelectionState) => void;
|
||||
onColumnResize?: (columnField: string, newWidth: number) => void;
|
||||
onTaskUpdate?: (taskId: string, field: string, value: any) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const GanttGrid: React.FC<GanttGridProps> = ({
|
||||
tasks,
|
||||
columns,
|
||||
rowHeight,
|
||||
containerHeight,
|
||||
selection,
|
||||
enableInlineEdit = true,
|
||||
enableMultiSelect = true,
|
||||
onTaskClick,
|
||||
onTaskDoubleClick,
|
||||
onTaskExpand,
|
||||
onSelectionChange,
|
||||
onColumnResize,
|
||||
onTaskUpdate,
|
||||
className = '',
|
||||
}) => {
|
||||
const [editingCell, setEditingCell] = useState<{ taskId: string; field: string } | null>(null);
|
||||
const [columnWidths, setColumnWidths] = useState<Record<string, number>>(
|
||||
columns.reduce((acc, col) => ({ ...acc, [col.field]: col.width }), {})
|
||||
);
|
||||
const gridRef = useRef<HTMLDivElement>(null);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => ({
|
||||
background: themeWiseColor('#ffffff', '#1f2937', themeMode),
|
||||
alternateRow: themeWiseColor('#f9fafb', '#374151', themeMode),
|
||||
border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
|
||||
text: themeWiseColor('#111827', '#f9fafb', themeMode),
|
||||
textSecondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
|
||||
selected: themeWiseColor('#eff6ff', '#1e3a8a', themeMode),
|
||||
hover: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
|
||||
headerBg: themeWiseColor('#f8f9fa', '#374151', themeMode),
|
||||
}), [themeMode]);
|
||||
|
||||
// Calculate total grid width
|
||||
const totalWidth = useMemo(() => {
|
||||
return columns.reduce((sum, col) => sum + columnWidths[col.field], 0);
|
||||
}, [columns, columnWidths]);
|
||||
|
||||
// Handle column resize
|
||||
const handleColumnResize = useCallback((columnField: string, deltaX: number) => {
|
||||
const column = columns.find(col => col.field === columnField);
|
||||
if (!column) return;
|
||||
|
||||
const currentWidth = columnWidths[columnField];
|
||||
const newWidth = Math.max(column.minWidth || 60, Math.min(column.maxWidth || 400, currentWidth + deltaX));
|
||||
|
||||
setColumnWidths(prev => ({ ...prev, [columnField]: newWidth }));
|
||||
onColumnResize?.(columnField, newWidth);
|
||||
}, [columns, columnWidths, onColumnResize]);
|
||||
|
||||
// Handle task selection
|
||||
const handleTaskSelection = useCallback((task: GanttTask, event: React.MouseEvent) => {
|
||||
const { ctrlKey, shiftKey } = event;
|
||||
let newSelectedTasks = [...selection.selectedTasks];
|
||||
|
||||
if (shiftKey && enableMultiSelect && selection.selectedTasks.length > 0) {
|
||||
// Range selection
|
||||
const lastSelectedIndex = tasks.findIndex(t => t.id === selection.selectedTasks[selection.selectedTasks.length - 1]);
|
||||
const currentIndex = tasks.findIndex(t => t.id === task.id);
|
||||
const [start, end] = [Math.min(lastSelectedIndex, currentIndex), Math.max(lastSelectedIndex, currentIndex)];
|
||||
|
||||
newSelectedTasks = tasks.slice(start, end + 1).map(t => t.id);
|
||||
} else if (ctrlKey && enableMultiSelect) {
|
||||
// Multi selection
|
||||
if (newSelectedTasks.includes(task.id)) {
|
||||
newSelectedTasks = newSelectedTasks.filter(id => id !== task.id);
|
||||
} else {
|
||||
newSelectedTasks.push(task.id);
|
||||
}
|
||||
} else {
|
||||
// Single selection
|
||||
newSelectedTasks = [task.id];
|
||||
}
|
||||
|
||||
onSelectionChange?.({
|
||||
...selection,
|
||||
selectedTasks: newSelectedTasks,
|
||||
focusedTask: task.id,
|
||||
});
|
||||
|
||||
onTaskClick?.(task, event);
|
||||
}, [tasks, selection, enableMultiSelect, onSelectionChange, onTaskClick]);
|
||||
|
||||
// Handle cell editing
|
||||
const handleCellDoubleClick = useCallback((task: GanttTask, column: ColumnConfig) => {
|
||||
if (!enableInlineEdit || !column.editor) return;
|
||||
|
||||
setEditingCell({ taskId: task.id, field: column.field });
|
||||
}, [enableInlineEdit]);
|
||||
|
||||
const handleCellEditComplete = useCallback((value: any) => {
|
||||
if (!editingCell) return;
|
||||
|
||||
onTaskUpdate?.(editingCell.taskId, editingCell.field, value);
|
||||
setEditingCell(null);
|
||||
}, [editingCell, onTaskUpdate]);
|
||||
|
||||
// Render cell content
|
||||
const renderCellContent = useCallback((task: GanttTask, column: ColumnConfig) => {
|
||||
const value = task[column.field as keyof GanttTask];
|
||||
const isEditing = editingCell?.taskId === task.id && editingCell?.field === column.field;
|
||||
|
||||
if (isEditing) {
|
||||
return renderCellEditor(value, column, handleCellEditComplete);
|
||||
}
|
||||
|
||||
if (column.renderer) {
|
||||
return column.renderer(value, task);
|
||||
}
|
||||
|
||||
// Default renderers
|
||||
switch (column.field) {
|
||||
case 'name':
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
{task.hasChildren && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onTaskExpand?.(task.id);
|
||||
}}
|
||||
className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
|
||||
>
|
||||
{task.isExpanded ? (
|
||||
<ChevronDownIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRightIcon className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
className="flex items-center space-x-2"
|
||||
style={{ paddingLeft: `${(task.level || 0) * 16}px` }}
|
||||
>
|
||||
{getTaskTypeIcon(task.type)}
|
||||
<span className="truncate font-medium">{task.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'startDate':
|
||||
case 'endDate':
|
||||
return (
|
||||
<div className="flex items-center space-x-1">
|
||||
<CalendarIcon className="w-3 h-3 text-gray-400" />
|
||||
<span>{(value as Date)?.toLocaleDateString() || '-'}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'assignee':
|
||||
return task.assignee ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{task.assignee.avatar ? (
|
||||
<img
|
||||
src={task.assignee.avatar}
|
||||
alt={task.assignee.name}
|
||||
className="w-6 h-6 rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<UserIcon className="w-6 h-6 text-gray-400" />
|
||||
)}
|
||||
<span className="truncate">{task.assignee.name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">Unassigned</span>
|
||||
);
|
||||
|
||||
case 'progress':
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex-1 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs w-8 text-right">{task.progress}%</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'status':
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
|
||||
{task.status.replace('-', ' ')}
|
||||
</span>
|
||||
);
|
||||
|
||||
case 'priority':
|
||||
return (
|
||||
<div className="flex items-center space-x-1">
|
||||
<FlagIcon className={`w-3 h-3 ${getPriorityColor(task.priority)}`} />
|
||||
<span className="capitalize">{task.priority}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'duration':
|
||||
const duration = task.duration || Math.ceil((task.endDate.getTime() - task.startDate.getTime()) / (1000 * 60 * 60 * 24));
|
||||
return <span>{duration}d</span>;
|
||||
|
||||
default:
|
||||
return <span>{String(value || '')}</span>;
|
||||
}
|
||||
}, [editingCell, onTaskExpand, handleCellEditComplete]);
|
||||
|
||||
// Render header
|
||||
const renderHeader = () => (
|
||||
<div
|
||||
className="grid-header flex border-b sticky top-0 z-10"
|
||||
style={{
|
||||
backgroundColor: colors.headerBg,
|
||||
borderColor: colors.border,
|
||||
height: rowHeight,
|
||||
}}
|
||||
>
|
||||
{columns.map((column, index) => (
|
||||
<div
|
||||
key={column.field}
|
||||
className="column-header flex items-center px-3 py-2 font-medium text-sm border-r relative group"
|
||||
style={{
|
||||
width: columnWidths[column.field],
|
||||
borderColor: colors.border,
|
||||
color: colors.text,
|
||||
}}
|
||||
>
|
||||
<span className="truncate" title={column.title}>
|
||||
{column.title}
|
||||
</span>
|
||||
|
||||
{/* Resize handle */}
|
||||
{column.resizable && (
|
||||
<ResizeHandle
|
||||
onResize={(deltaX) => handleColumnResize(column.field, deltaX)}
|
||||
className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500 opacity-0 group-hover:opacity-100"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Render task rows
|
||||
const renderRows = () => (
|
||||
<div className="grid-body">
|
||||
{tasks.map((task, rowIndex) => {
|
||||
const isSelected = selection.selectedTasks.includes(task.id);
|
||||
const isFocused = selection.focusedTask === task.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`grid-row flex border-b cursor-pointer hover:bg-opacity-75 ${
|
||||
isSelected ? 'bg-blue-50 dark:bg-blue-900 bg-opacity-50' :
|
||||
rowIndex % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-800 bg-opacity-30'
|
||||
}`}
|
||||
style={{
|
||||
height: rowHeight,
|
||||
borderColor: colors.border,
|
||||
backgroundColor: isSelected ? colors.selected :
|
||||
rowIndex % 2 === 0 ? 'transparent' : colors.alternateRow,
|
||||
}}
|
||||
onClick={(e) => handleTaskSelection(task, e)}
|
||||
onDoubleClick={() => onTaskDoubleClick?.(task)}
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<div
|
||||
key={`${task.id}-${column.field}`}
|
||||
className="grid-cell flex items-center px-3 py-1 border-r overflow-hidden"
|
||||
style={{
|
||||
width: columnWidths[column.field],
|
||||
borderColor: colors.border,
|
||||
textAlign: column.align || 'left',
|
||||
}}
|
||||
onDoubleClick={() => handleCellDoubleClick(task, column)}
|
||||
>
|
||||
{renderCellContent(task, column)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={gridRef}
|
||||
className={`gantt-grid border-r ${className}`}
|
||||
style={{
|
||||
width: totalWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.background,
|
||||
borderColor: colors.border,
|
||||
}}
|
||||
>
|
||||
{renderHeader()}
|
||||
<div
|
||||
className="grid-content overflow-auto"
|
||||
style={{ height: containerHeight - rowHeight }}
|
||||
>
|
||||
{renderRows()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Resize handle component
|
||||
interface ResizeHandleProps {
|
||||
onResize: (deltaX: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ResizeHandle: React.FC<ResizeHandleProps> = ({ onResize, className }) => {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const startXRef = useRef<number>(0);
|
||||
|
||||
const handleMouseDown = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
startXRef.current = e.clientX;
|
||||
|
||||
const handleMouseMove = (moveEvent: MouseEvent) => {
|
||||
const deltaX = moveEvent.clientX - startXRef.current;
|
||||
onResize(deltaX);
|
||||
startXRef.current = moveEvent.clientX;
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false);
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
}, [onResize]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`resize-handle ${className} ${isDragging ? 'bg-blue-500' : ''}`}
|
||||
onMouseDown={handleMouseDown}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Cell editor component
|
||||
const renderCellEditor = (value: any, column: ColumnConfig, onComplete: (value: any) => void) => {
|
||||
const [editValue, setEditValue] = useState(value);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
onComplete(editValue);
|
||||
} else if (e.key === 'Escape') {
|
||||
onComplete(value); // Cancel editing
|
||||
}
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
onComplete(editValue);
|
||||
};
|
||||
|
||||
switch (column.editor) {
|
||||
case 'text':
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
|
||||
case 'date':
|
||||
return (
|
||||
<input
|
||||
type="date"
|
||||
value={editValue instanceof Date ? editValue.toISOString().split('T')[0] : editValue}
|
||||
onChange={(e) => setEditValue(new Date(e.target.value))}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
|
||||
case 'number':
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(parseFloat(e.target.value))}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
|
||||
case 'select':
|
||||
return (
|
||||
<select
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
className="w-full px-1 py-0.5 border rounded text-sm"
|
||||
autoFocus
|
||||
>
|
||||
{column.editorOptions?.map((option: any) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
|
||||
default:
|
||||
return <span>{String(value)}</span>;
|
||||
}
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
const getTaskTypeIcon = (type: GanttTask['type']) => {
|
||||
switch (type) {
|
||||
case 'project':
|
||||
return <div className="w-3 h-3 bg-blue-500 rounded-sm" />;
|
||||
case 'milestone':
|
||||
return <div className="w-3 h-3 bg-yellow-500 rotate-45" />;
|
||||
default:
|
||||
return <div className="w-3 h-3 bg-gray-400 rounded-full" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: GanttTask['status']) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
|
||||
case 'in-progress':
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
||||
case 'overdue':
|
||||
return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
|
||||
case 'on-hold':
|
||||
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority: GanttTask['priority']) => {
|
||||
switch (priority) {
|
||||
case 'critical':
|
||||
return 'text-red-600';
|
||||
case 'high':
|
||||
return 'text-orange-500';
|
||||
case 'medium':
|
||||
return 'text-yellow-500';
|
||||
case 'low':
|
||||
return 'text-green-500';
|
||||
default:
|
||||
return 'text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
export default GanttGrid;
|
||||
@@ -0,0 +1,295 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Holiday, TimelineConfig } from '../../types/advanced-gantt.types';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
import { themeWiseColor } from '../../utils/themeWiseColor';
|
||||
import { useDateCalculations } from '../../utils/gantt-performance';
|
||||
|
||||
interface TimelineMarkersProps {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
dayWidth: number;
|
||||
containerHeight: number;
|
||||
timelineConfig: TimelineConfig;
|
||||
holidays?: Holiday[];
|
||||
showWeekends?: boolean;
|
||||
showHolidays?: boolean;
|
||||
showToday?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TimelineMarkers: React.FC<TimelineMarkersProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
dayWidth,
|
||||
containerHeight,
|
||||
timelineConfig,
|
||||
holidays = [],
|
||||
showWeekends = true,
|
||||
showHolidays = true,
|
||||
showToday = true,
|
||||
className = '',
|
||||
}) => {
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const { getDaysBetween, isWeekend, isWorkingDay } = useDateCalculations();
|
||||
|
||||
// Generate all dates in the timeline
|
||||
const timelineDates = useMemo(() => {
|
||||
const dates: Date[] = [];
|
||||
const totalDays = getDaysBetween(startDate, endDate);
|
||||
|
||||
for (let i = 0; i <= totalDays; i++) {
|
||||
const date = new Date(startDate);
|
||||
date.setDate(date.getDate() + i);
|
||||
dates.push(date);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}, [startDate, endDate, getDaysBetween]);
|
||||
|
||||
// Theme-aware colors
|
||||
const colors = useMemo(() => ({
|
||||
weekend: themeWiseColor('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)', themeMode),
|
||||
nonWorkingDay: themeWiseColor('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)', themeMode),
|
||||
holiday: themeWiseColor('rgba(255, 107, 107, 0.1)', 'rgba(255, 107, 107, 0.15)', themeMode),
|
||||
today: themeWiseColor('rgba(24, 144, 255, 0.15)', 'rgba(64, 169, 255, 0.2)', themeMode),
|
||||
todayLine: themeWiseColor('#1890ff', '#40a9ff', themeMode),
|
||||
holidayBorder: themeWiseColor('#ff6b6b', '#ff8787', themeMode),
|
||||
}), [themeMode]);
|
||||
|
||||
// Check if a date is a holiday
|
||||
const isHoliday = (date: Date): Holiday | undefined => {
|
||||
return holidays.find(holiday => {
|
||||
if (holiday.recurring) {
|
||||
return holiday.date.getMonth() === date.getMonth() &&
|
||||
holiday.date.getDate() === date.getDate();
|
||||
}
|
||||
return holiday.date.toDateString() === date.toDateString();
|
||||
});
|
||||
};
|
||||
|
||||
// Check if date is today
|
||||
const isToday = (date: Date): boolean => {
|
||||
const today = new Date();
|
||||
return date.toDateString() === today.toDateString();
|
||||
};
|
||||
|
||||
// Render weekend markers
|
||||
const renderWeekendMarkers = () => {
|
||||
if (!showWeekends) return null;
|
||||
|
||||
return timelineDates.map((date, index) => {
|
||||
if (!isWeekend(date)) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`weekend-${index}`}
|
||||
className="weekend-marker absolute top-0 pointer-events-none"
|
||||
style={{
|
||||
left: index * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.weekend,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Render non-working day markers
|
||||
const renderNonWorkingDayMarkers = () => {
|
||||
return timelineDates.map((date, index) => {
|
||||
if (isWorkingDay(date, timelineConfig.workingDays)) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`non-working-${index}`}
|
||||
className="non-working-day-marker absolute top-0 pointer-events-none"
|
||||
style={{
|
||||
left: index * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.nonWorkingDay,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Render holiday markers
|
||||
const renderHolidayMarkers = () => {
|
||||
if (!showHolidays) return null;
|
||||
|
||||
return timelineDates.map((date, index) => {
|
||||
const holiday = isHoliday(date);
|
||||
if (!holiday) return null;
|
||||
|
||||
const holidayColor = holiday.color || colors.holiday;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`holiday-${index}`}
|
||||
className="holiday-marker absolute top-0 pointer-events-none group"
|
||||
style={{
|
||||
left: index * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: holidayColor,
|
||||
borderLeft: `2px solid ${colors.holidayBorder}`,
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
{/* Holiday tooltip */}
|
||||
<div className="holiday-tooltip absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-50">
|
||||
<div className="font-medium">{holiday.name}</div>
|
||||
<div className="text-xs opacity-75">{date.toLocaleDateString()}</div>
|
||||
<div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
|
||||
</div>
|
||||
|
||||
{/* Holiday icon */}
|
||||
<div className="holiday-icon absolute top-1 left-1 w-3 h-3 rounded-full bg-red-500 opacity-75">
|
||||
<div className="w-full h-full rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Render today marker
|
||||
const renderTodayMarker = () => {
|
||||
if (!showToday) return null;
|
||||
|
||||
const todayIndex = timelineDates.findIndex(date => isToday(date));
|
||||
if (todayIndex === -1) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="today-marker absolute top-0 pointer-events-none"
|
||||
style={{
|
||||
left: todayIndex * dayWidth,
|
||||
width: dayWidth,
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.today,
|
||||
zIndex: 3,
|
||||
}}
|
||||
>
|
||||
{/* Today line */}
|
||||
<div
|
||||
className="today-line absolute top-0 left-1/2 transform -translate-x-1/2"
|
||||
style={{
|
||||
width: '2px',
|
||||
height: containerHeight,
|
||||
backgroundColor: colors.todayLine,
|
||||
zIndex: 4,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Today label */}
|
||||
<div className="today-label absolute top-2 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-xs px-2 py-1 rounded shadow-sm">
|
||||
Today
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render time period markers (quarters, months, etc.)
|
||||
const renderTimePeriodMarkers = () => {
|
||||
const markers: React.ReactNode[] = [];
|
||||
const currentDate = new Date(startDate);
|
||||
currentDate.setDate(1); // Start of month
|
||||
|
||||
while (currentDate <= endDate) {
|
||||
const daysSinceStart = getDaysBetween(startDate, currentDate);
|
||||
const isQuarterStart = currentDate.getMonth() % 3 === 0 && currentDate.getDate() === 1;
|
||||
const isYearStart = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
|
||||
|
||||
if (isYearStart) {
|
||||
markers.push(
|
||||
<div
|
||||
key={`year-${currentDate.getTime()}`}
|
||||
className="year-marker absolute top-0 border-l-2 border-blue-600 dark:border-blue-400"
|
||||
style={{
|
||||
left: daysSinceStart * dayWidth,
|
||||
height: containerHeight,
|
||||
zIndex: 5,
|
||||
}}
|
||||
>
|
||||
<div className="year-label absolute top-2 left-1 bg-blue-600 dark:bg-blue-400 text-white text-xs px-1 py-0.5 rounded">
|
||||
{currentDate.getFullYear()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (isQuarterStart) {
|
||||
markers.push(
|
||||
<div
|
||||
key={`quarter-${currentDate.getTime()}`}
|
||||
className="quarter-marker absolute top-0 border-l border-green-500 dark:border-green-400 opacity-60"
|
||||
style={{
|
||||
left: daysSinceStart * dayWidth,
|
||||
height: containerHeight,
|
||||
zIndex: 4,
|
||||
}}
|
||||
>
|
||||
<div className="quarter-label absolute top-2 left-1 bg-green-500 dark:bg-green-400 text-white text-xs px-1 py-0.5 rounded">
|
||||
Q{Math.floor(currentDate.getMonth() / 3) + 1}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Move to next month
|
||||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||||
}
|
||||
|
||||
return markers;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`timeline-markers absolute inset-0 ${className}`}>
|
||||
{renderNonWorkingDayMarkers()}
|
||||
{renderWeekendMarkers()}
|
||||
{renderHolidayMarkers()}
|
||||
{renderTodayMarker()}
|
||||
{renderTimePeriodMarkers()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Holiday presets for common countries
|
||||
export const holidayPresets = {
|
||||
US: [
|
||||
{ date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 0, 15), name: "Martin Luther King Jr. Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 1, 19), name: "Presidents' Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 4, 27), name: "Memorial Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 5, 19), name: "Juneteenth", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 6, 4), name: "Independence Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 8, 2), name: "Labor Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 9, 14), name: "Columbus Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 10, 11), name: "Veterans Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 10, 28), name: "Thanksgiving", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 11, 25), name: "Christmas Day", type: 'national' as const, recurring: true },
|
||||
],
|
||||
|
||||
UK: [
|
||||
{ date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 2, 29), name: "Good Friday", type: 'religious' as const, recurring: false },
|
||||
{ date: new Date(2024, 3, 1), name: "Easter Monday", type: 'religious' as const, recurring: false },
|
||||
{ date: new Date(2024, 4, 6), name: "Early May Bank Holiday", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 4, 27), name: "Spring Bank Holiday", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 7, 26), name: "Summer Bank Holiday", type: 'national' as const, recurring: true },
|
||||
{ date: new Date(2024, 11, 25), name: "Christmas Day", type: 'religious' as const, recurring: true },
|
||||
{ date: new Date(2024, 11, 26), name: "Boxing Day", type: 'national' as const, recurring: true },
|
||||
],
|
||||
};
|
||||
|
||||
// Working day presets
|
||||
export const workingDayPresets = {
|
||||
standard: [1, 2, 3, 4, 5], // Monday to Friday
|
||||
middle_east: [0, 1, 2, 3, 4], // Sunday to Thursday
|
||||
six_day: [1, 2, 3, 4, 5, 6], // Monday to Saturday
|
||||
four_day: [1, 2, 3, 4], // Monday to Thursday
|
||||
};
|
||||
|
||||
export default TimelineMarkers;
|
||||
@@ -0,0 +1,372 @@
|
||||
import React, { useRef, useEffect, useState, useCallback, ReactNode } from 'react';
|
||||
import { useThrottle, usePerformanceMonitoring } from '../../utils/gantt-performance';
|
||||
import { useAppSelector } from '../../hooks/useAppSelector';
|
||||
|
||||
interface VirtualScrollContainerProps {
|
||||
items: any[];
|
||||
itemHeight: number;
|
||||
containerHeight: number;
|
||||
containerWidth?: number;
|
||||
overscan?: number;
|
||||
horizontal?: boolean;
|
||||
children: (item: any, index: number, style: React.CSSProperties) => ReactNode;
|
||||
onScroll?: (scrollLeft: number, scrollTop: number) => void;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const VirtualScrollContainer: React.FC<VirtualScrollContainerProps> = ({
|
||||
items,
|
||||
itemHeight,
|
||||
containerHeight,
|
||||
containerWidth = 0,
|
||||
overscan = 5,
|
||||
horizontal = false,
|
||||
children,
|
||||
onScroll,
|
||||
className = '',
|
||||
style = {},
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [scrollLeft, setScrollLeft] = useState(0);
|
||||
const { startMeasure, endMeasure, recordMetric } = usePerformanceMonitoring();
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
// Calculate visible range
|
||||
const totalHeight = items.length * itemHeight;
|
||||
const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
|
||||
const endIndex = Math.min(
|
||||
items.length - 1,
|
||||
Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
|
||||
);
|
||||
const visibleItems = items.slice(startIndex, endIndex + 1);
|
||||
const offsetY = startIndex * itemHeight;
|
||||
|
||||
// Throttled scroll handler
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((event: Event) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const newScrollTop = target.scrollTop;
|
||||
const newScrollLeft = target.scrollLeft;
|
||||
|
||||
setScrollTop(newScrollTop);
|
||||
setScrollLeft(newScrollLeft);
|
||||
onScroll?.(newScrollLeft, newScrollTop);
|
||||
}, [onScroll]),
|
||||
16 // ~60fps
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener('scroll', throttledScrollHandler, { passive: true });
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('scroll', throttledScrollHandler);
|
||||
};
|
||||
}, [throttledScrollHandler]);
|
||||
|
||||
// Performance monitoring
|
||||
useEffect(() => {
|
||||
startMeasure('virtualScroll');
|
||||
recordMetric('visibleTaskCount', visibleItems.length);
|
||||
recordMetric('taskCount', items.length);
|
||||
endMeasure('virtualScroll');
|
||||
}, [visibleItems.length, items.length, startMeasure, endMeasure, recordMetric]);
|
||||
|
||||
const renderVisibleItems = () => {
|
||||
return visibleItems.map((item, virtualIndex) => {
|
||||
const actualIndex = startIndex + virtualIndex;
|
||||
const itemStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
top: horizontal ? 0 : actualIndex * itemHeight,
|
||||
left: horizontal ? actualIndex * itemHeight : 0,
|
||||
height: horizontal ? '100%' : itemHeight,
|
||||
width: horizontal ? itemHeight : '100%',
|
||||
transform: horizontal ? 'none' : `translateY(${offsetY}px)`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={item.id || actualIndex} style={itemStyle}>
|
||||
{children(item, actualIndex, itemStyle)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`virtual-scroll-container overflow-auto ${className}`}
|
||||
style={{
|
||||
height: containerHeight,
|
||||
width: containerWidth || '100%',
|
||||
position: 'relative',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{/* Spacer to maintain scroll height */}
|
||||
<div
|
||||
className="virtual-scroll-spacer"
|
||||
style={{
|
||||
height: horizontal ? '100%' : totalHeight,
|
||||
width: horizontal ? totalHeight : '100%',
|
||||
position: 'relative',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{/* Visible items container */}
|
||||
<div
|
||||
className="virtual-scroll-content"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
>
|
||||
{renderVisibleItems()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Grid virtual scrolling component for both rows and columns
|
||||
interface VirtualGridProps {
|
||||
data: any[][];
|
||||
rowHeight: number;
|
||||
columnWidth: number | number[];
|
||||
containerHeight: number;
|
||||
containerWidth: number;
|
||||
overscan?: number;
|
||||
children: (item: any, rowIndex: number, colIndex: number, style: React.CSSProperties) => ReactNode;
|
||||
onScroll?: (scrollLeft: number, scrollTop: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const VirtualGrid: React.FC<VirtualGridProps> = ({
|
||||
data,
|
||||
rowHeight,
|
||||
columnWidth,
|
||||
containerHeight,
|
||||
containerWidth,
|
||||
overscan = 3,
|
||||
children,
|
||||
onScroll,
|
||||
className = '',
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [scrollLeft, setScrollLeft] = useState(0);
|
||||
|
||||
const rowCount = data.length;
|
||||
const colCount = data[0]?.length || 0;
|
||||
|
||||
// Calculate column positions for variable width columns
|
||||
const columnWidths = Array.isArray(columnWidth) ? columnWidth : new Array(colCount).fill(columnWidth);
|
||||
const columnPositions = columnWidths.reduce((acc, width, index) => {
|
||||
acc[index] = index === 0 ? 0 : acc[index - 1] + columnWidths[index - 1];
|
||||
return acc;
|
||||
}, {} as Record<number, number>);
|
||||
|
||||
const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);
|
||||
const totalHeight = rowCount * rowHeight;
|
||||
|
||||
// Calculate visible ranges
|
||||
const startRowIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
|
||||
const endRowIndex = Math.min(rowCount - 1, Math.ceil((scrollTop + containerHeight) / rowHeight) + overscan);
|
||||
|
||||
const startColIndex = Math.max(0, findColumnIndex(scrollLeft) - overscan);
|
||||
const endColIndex = Math.min(colCount - 1, findColumnIndex(scrollLeft + containerWidth) + overscan);
|
||||
|
||||
function findColumnIndex(position: number): number {
|
||||
for (let i = 0; i < colCount; i++) {
|
||||
if (columnPositions[i] <= position && position < columnPositions[i] + columnWidths[i]) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return colCount - 1;
|
||||
}
|
||||
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((event: Event) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const newScrollTop = target.scrollTop;
|
||||
const newScrollLeft = target.scrollLeft;
|
||||
|
||||
setScrollTop(newScrollTop);
|
||||
setScrollLeft(newScrollLeft);
|
||||
onScroll?.(newScrollLeft, newScrollTop);
|
||||
}, [onScroll]),
|
||||
16
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener('scroll', throttledScrollHandler, { passive: true });
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('scroll', throttledScrollHandler);
|
||||
};
|
||||
}, [throttledScrollHandler]);
|
||||
|
||||
const renderVisibleCells = () => {
|
||||
const cells: ReactNode[] = [];
|
||||
|
||||
for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
|
||||
for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
|
||||
const item = data[rowIndex]?.[colIndex];
|
||||
if (!item) continue;
|
||||
|
||||
const cellStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
top: rowIndex * rowHeight,
|
||||
left: columnPositions[colIndex],
|
||||
height: rowHeight,
|
||||
width: columnWidths[colIndex],
|
||||
};
|
||||
|
||||
cells.push(
|
||||
<div key={`${rowIndex}-${colIndex}`} style={cellStyle}>
|
||||
{children(item, rowIndex, colIndex, cellStyle)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return cells;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`virtual-grid overflow-auto ${className}`}
|
||||
style={{
|
||||
height: containerHeight,
|
||||
width: containerWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: totalHeight,
|
||||
width: totalWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{renderVisibleCells()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Timeline virtual scrolling component
|
||||
interface VirtualTimelineProps {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
dayWidth: number;
|
||||
containerWidth: number;
|
||||
containerHeight: number;
|
||||
overscan?: number;
|
||||
children: (date: Date, index: number, style: React.CSSProperties) => ReactNode;
|
||||
onScroll?: (scrollLeft: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const VirtualTimeline: React.FC<VirtualTimelineProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
dayWidth,
|
||||
containerWidth,
|
||||
containerHeight,
|
||||
overscan = 10,
|
||||
children,
|
||||
onScroll,
|
||||
className = '',
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [scrollLeft, setScrollLeft] = useState(0);
|
||||
|
||||
const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
|
||||
const totalWidth = totalDays * dayWidth;
|
||||
|
||||
const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
|
||||
const endDayIndex = Math.min(totalDays - 1, Math.ceil((scrollLeft + containerWidth) / dayWidth) + overscan);
|
||||
|
||||
const throttledScrollHandler = useThrottle(
|
||||
useCallback((event: Event) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const newScrollLeft = target.scrollLeft;
|
||||
setScrollLeft(newScrollLeft);
|
||||
onScroll?.(newScrollLeft);
|
||||
}, [onScroll]),
|
||||
16
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener('scroll', throttledScrollHandler, { passive: true });
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('scroll', throttledScrollHandler);
|
||||
};
|
||||
}, [throttledScrollHandler]);
|
||||
|
||||
const renderVisibleDays = () => {
|
||||
const days: ReactNode[] = [];
|
||||
|
||||
for (let dayIndex = startDayIndex; dayIndex <= endDayIndex; dayIndex++) {
|
||||
const date = new Date(startDate);
|
||||
date.setDate(date.getDate() + dayIndex);
|
||||
|
||||
const dayStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
left: dayIndex * dayWidth,
|
||||
top: 0,
|
||||
width: dayWidth,
|
||||
height: '100%',
|
||||
};
|
||||
|
||||
days.push(
|
||||
<div key={dayIndex} style={dayStyle}>
|
||||
{children(date, dayIndex, dayStyle)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return days;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`virtual-timeline overflow-x-auto ${className}`}
|
||||
style={{
|
||||
height: containerHeight,
|
||||
width: containerWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
width: totalWidth,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{renderVisibleDays()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VirtualScrollContainer;
|
||||
17
worklenz-frontend/src/components/advanced-gantt/index.ts
Normal file
17
worklenz-frontend/src/components/advanced-gantt/index.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// Main Components
|
||||
export { default as AdvancedGanttChart } from './AdvancedGanttChart';
|
||||
export { default as AdvancedGanttDemo } from './AdvancedGanttDemo';
|
||||
|
||||
// Core Components
|
||||
export { default as GanttGrid } from './GanttGrid';
|
||||
export { default as DraggableTaskBar } from './DraggableTaskBar';
|
||||
export { default as TimelineMarkers, holidayPresets, workingDayPresets } from './TimelineMarkers';
|
||||
|
||||
// Utility Components
|
||||
export { default as VirtualScrollContainer, VirtualGrid, VirtualTimeline } from './VirtualScrollContainer';
|
||||
|
||||
// Types
|
||||
export * from '../../types/advanced-gantt.types';
|
||||
|
||||
// Performance Utilities
|
||||
export * from '../../utils/gantt-performance';
|
||||
Reference in New Issue
Block a user