Разработка Gantt-диаграмм для управления проектами на сайте

• viewMode: Day, Week, Month
• onDateChange: обработчик изменения дат
• onProgressChange: обработчик изменения прогресса
• TooltipContent: кастомный тултип
• listCellWidth: ширина колонки с названиями задач
• ganttHeight: высота диаграммы
• todayColor: цвет подсветки текущего дня

Gantt-диаграмма позволяет видеть критический путь, выявлять перегрузки ресурсов и корректировать сроки в реальном времени. Drag-and-drop упрощает перепланирование, а прогресс-бары показывают отставание. Интеграция с CRM и трекерами задач автоматизирует обновление данных.

Что входит в работу под ключ

Как мы это делаем: стек и примеры

gantt-task-react (open-source)

npm install gantt-task-react 

import { Gantt, Task, ViewMode } from 'gantt-task-react'; import 'gantt-task-react/dist/index.css'; interface ProjectTask { id: string; name: string; start: Date; end: Date; progress: number; type: 'task' | 'milestone' | 'project'; dependencies?: string[]; assignee?: string; } function ProjectGantt({ tasks, onTaskChange }: { tasks: ProjectTask[]; onTaskChange: (task: Task) => void; }) { const [view, setView] = useState<ViewMode>(ViewMode.Week); const ganttTasks: Task[] = tasks.map(t => ({ id: t.id, name: t.name, start: t.start, end: t.end, progress: t.progress, type: t.type, dependencies: t.dependencies ?? [], styles: { progressColor: t.progress >= 100 ? '#22c55e' : '#3b82f6', progressSelectedColor: '#1d4ed8' } })); return ( <div> <div className="gantt-toolbar"> <button onClick={() => setView(ViewMode.Day)}>День</button> <button onClick={() => setView(ViewMode.Week)}>Неделя</button> <button onClick={() => setView(ViewMode.Month)}>Месяц</button> </div> <Gantt tasks={ganttTasks} viewMode={view} onDateChange={onTaskChange} onProgressChange={onTaskChange} locale="ru" listCellWidth="200px" ganttHeight={400} todayColor="rgba(59, 130, 246, 0.1)" TooltipContent={({ task }) => ( <div className="gantt-tooltip"> <strong>{task.name}</strong> <p>Начало: {format(task.start, 'dd.MM.yyyy')}</p> <p>Конец: {format(task.end, 'dd.MM.yyyy')}</p> <p>Прогресс: {task.progress}%</p> </div> )} /> </div> ); } 

Кастомный Gantt на SVG + D3

Для специфических требований (особый стиль, нестандартные ячейки) создаём компонент на D3.js. Ниже пример прототипа:

import { scaleTime } from 'd3-scale'; import { timeDay, timeWeek } from 'd3-time'; function CustomGantt({ tasks, startDate, endDate, width = 900 }) { const timelineWidth = width - 200; // 200px на названия задач const rowHeight = 40; const height = tasks.length * rowHeight + 60; const xScale = scaleTime() .domain([startDate, endDate]) .range([0, timelineWidth]); return ( <svg width={width} height={height}> {/* Временны́е метки */} {timeWeek.range(startDate, endDate).map(week => ( <g key={week.toISOString()}> <line x1={xScale(week) + 200} y1={0} x2={xScale(week) + 200} y2={height} stroke="#e5e7eb" strokeWidth={1} /> <text x={xScale(week) + 204} y={15} fontSize={11} fill="#6b7280" > {format(week, 'dd MMM')} </text> </g> ))} {/* Задачи */} {tasks.map((task, i) => { const x = xScale(task.start) + 200; const width = xScale(task.end) - xScale(task.start); const y = i * rowHeight + 25; return ( <g key={task.id}> {/* Название */} <text x={4} y={y + 14} fontSize={13} fill="#374151" style={{ cursor: 'pointer' }}> {task.name.length > 22 ? task.name.slice(0, 22) + '…' : task.name} </text> {/* Бар задачи */} <rect x={x} y={y} width={width} height={24} rx={4} fill="#93c5fd" /> {/* Прогресс */} <rect x={x} y={y} width={width * (task.progress / 100)} height={24} rx={4} fill="#3b82f6" /> {/* Процент */} {width > 40 && ( <text x={x + width / 2} y={y + 16} textAnchor="middle" fontSize={11} fill="white"> {task.progress}% </text> )} </g> ); })} </svg> ); } 

Drag-and-drop для изменения дат

При использовании DHTMLX Gantt drag-drop встроен. Для кастомного SVG — d3-drag или @dnd-kit. Наш опыт показывает: лучше использовать @dnd-kit — он стабильнее работает с React 18.

Пошаговая инструкция по интеграции Gantt-компонента

1. Установка зависимостей. Для gantt-task-react: npm install gantt-task-react date-fns. Для D3: npm install d3-scale d3-time.
2. Создание компонента. Определите интерфейс задачи и передайте массив задач в Gantt.
3. Настройка обработчиков. Реализуйте onDateChange и onProgressChange для синхронизации с бэкендом.
4. Добавление tooltip. Используйте встроенный TooltipContent или кастомный.
5. Тестирование. Проверьте рендеринг при 1000+ задач, измерьте LCP.

Сроки

Получите консультацию по вашему проекту — оценим сложность и предложим оптимальное решение. Закажите разработку Gantt-диаграммы и убедитесь: кастомный компонент окупается за счёт сокращения времени на согласование на 30%. Свяжитесь с нами для детальной оценки вашего проекта.