Розробка Gantt-діаграм для управління проектами на сайті
Планування проекту без візуалізації задач на часовій шкалі — прямий шлях до зриву дедлайнів. Команди витрачають години на узгодження термінів, а перевантаження ресурсів залишається непоміченим до останнього моменту. Розробники часто стикаються з N+1 запитами при завантаженні задач або з hydration mismatch у Next.js. Ми вирішуємо це за допомогою BFF та Suspense, забезпечуючи плавне завантаження діаграми без блокування потоку.
Ми розробляємо інтерактивні Gantt-діаграми для сайтів, які показують залежності, прогрес та завантаження команди. Наші інженери мають 10+ років досвіду в розробці UI-компонентів і гарантують інтеграцію з будь-яким стеком (React, Vue, Angular, чистий JS).
Gantt-діаграма відображає задачі проекту на часовій шкалі: початок/кінець, залежності між задачами, прогрес виконання, перевантаженість ресурсів. Кастомне рішення дає повний контроль над дизайном та продуктивністю — наприклад, рендеринг 10 000 задач без лагів. Економія бюджету на підтримку таких діаграм досягає 40% порівняно з впровадженням важковагових BIM-систем. Вартість розробки окупається за рахунок гнучкості та відсутності зайвих функцій.
Чому кастомний Gantt вигідніший за готову бібліотеку?
Готові бібліотеки (DHTMLX Gantt, Bryntum Gantt) хороші для типових сценаріїв, але часто мають зайву вагу та обмежені можливості кастомізації. Кастомна розробка на D3.js або React дає:
- оптимізацію під Core Web Vitals (LCP < 2.5 с);
- будь-які візуальні ефекти (анімації, теми);
- інтеграцію з існуючою системою авторизації та сховищем.
Нещодавно ми виконали проект для будівельної компанії: потрібен був Gantt з ресурсним плануванням та критичним шляхом. Готова бібліотека не дозволяла налаштувати унікальні кольори для кожного підрядника, а кастомний SVG-компонент вписався в дизайн-систему за 3 тижні. Таке рішення скоротило час узгодження на 30%.
Як вибрати відповідну бібліотеку Gantt?
Вибір бібліотеки залежить від складності задач. Для простих проектів з 50–100 задачами підійде gantt-task-react — open-source компонент з базовим drag-and-drop. Якщо потрібне відображення залежностей та критичного шляху, краще використовувати DHTMLX Gantt. Для унікальних дизайнів та високої продуктивності (10 000+ задач) — кастомний SVG-компонент на D3.js. У таблиці нижче — рекомендації:
| Тип задач | Рекомендоване рішення | Термін |
|---|---|---|
| До 50 задач, проста верстка | gantt-task-react | 3–5 днів |
| 50–500 задач, залежності | DHTMLX Gantt | 1–2 тижні |
| 500+ задач, нестандартний UI | Кастомний SVG/D3 | від 2 тижнів |
Повний список параметрів налаштування
-
viewMode: Day, Week, Month -
onDateChange: обробник зміни дат -
onProgressChange: обробник зміни прогресу -
TooltipContent: кастомний тултип -
listCellWidth: ширина колонки з назвами задач -
ganttHeight: висота діаграми -
todayColor: колір підсвітки поточного дня
Gantt-діаграма дозволяє бачити критичний шлях, виявляти перевантаження ресурсів та коригувати терміни в реальному часі. Drag-and-drop спрощує перепланування, а прогрес-бари показують відставання. Інтеграція з CRM та трекерами задач автоматизує оновлення даних.
Що входить в роботу під ключ
| Етап | Результат |
|---|---|
| Аналітика | Збір вимог, вибір бібліотеки або архітектури |
| Проектування | Прототип взаємодії, специфікація API |
| Реалізація | Верстка компонента, інтеграція з бекендом |
| Drag-and-drop | Налаштування переміщення задач, оновлення дат |
| Тестування | Unit-тести, E2E-тести (Cypress), перевірка продуктивності |
| Деплой | Публікація на Vercel/вивантаження в CMS |
Як ми це робимо: стек та приклади
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="uk"
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-компонента
-
Встановлення залежностей. Для gantt-task-react:
npm install gantt-task-react date-fns. Для D3:npm install d3-scale d3-time. - Створення компонента. Визначте інтерфейс задачі та передайте масив задач у Gantt.
-
Налаштування обробників. Реалізуйте
onDateChangeтаonProgressChangeдля синхронізації з бекендом. - Додавання tooltip. Використовуйте вбудований TooltipContent або кастомний.
- Тестування. Перевірте рендеринг при 1000+ задачах, виміряйте LCP.
Терміни
| Тип Gantt | Термін |
|---|---|
| gantt-task-react з кастомним tooltip | 3–5 днів |
| Кастомний SVG Gantt з drag-drop та залежностями | 2–3 тижні |
| Повноцінний Gantt з ресурсами та критичним шляхом | від 4 тижнів |
Отримайте консультацію по вашому проекту — оцінимо складність та запропонуємо оптимальне рішення. Замовте розробку Gantt-діаграми та переконайтеся: кастомний компонент окупається за рахунок скорочення часу на узгодження на 30%. Зв'яжіться з нами для детальної оцінки вашого проекту.