gantt-lib

Drag task bars to move or resize. Dependency links, cascade shifting, and expired task highlighting included.

npm install gantt-libGantt AccordionFlow line1000-row stress testFlow line 25×40Finance 1000 rowsPlan-fact 1000 rows

Construction Project

Поиск:Введите начало слова
Фильтры:
Критический путь:
Масштаб:

На таймлайне добавлены вертикальные маркеры дат. Наведите на кружок у линии, чтобы увидеть название контрольной точки.

№
Имя
Начало
Окончание
Дн. (р)
%
1
11д
100
1.1
2д
100
1.2
4д
100
1.1[ОН] 1.1. Геодезическая разбивка
1.3
4д
100
1.1+2[НН] 1.1. Геодезическая разбивка
1.4
4д
100
1.2+1[ОН] 1.2. Ограждение площадки
1.5
4д
100
1.3[ОН] 1.3. Временные дороги
2
12д
100
2.1
5д
100
1+1[ОН] 1. Подготовительные работы
2.2
5д
100
2.1+1[НН] 2.1. Разработка котлована
2.3
3д
100
2.1[ОН] 2.1. Разработка котлована
2.4
3д
100
2.3[ОН] 2.3. Зачистка дна котлована
2.5
1д
100
2.4[ОН] 2.4. Песчаная подушка
3
16д
85%
3.1
5д
100
2+1[ОН] 2. Земляные работы
3.2
3д
100
3.1+2[НН] 3.1. Опалубка фундамента
3.3
1д
100
3.1+1[ОН] 3.1. Опалубка фундамента
3.4
6д
100
3.2[ОО] 3.2. Армирование подошвы
3.5
5д
80%
3.4-1[ОН] 3.4. Бетонирование фундамента
3.6
4д
60%
3.5[ОН] 3.5. Уход за бетоном
3.7
2д
40%
3.6[ОН] 3.6. Гидроизоляция
4
25д
42%
4.1
5д
80%
3+1[ОН] 3. Фундамент
4.2
6д
70%
4.1+5[НН] 4.1. Монтаж колонн 1 этажа
4.3
6д
55%
4.2-2[ОО] 4.2. Монтаж балок перекрытия
4.4
8д
35%
4.3+5[НН] 4.3. Монтаж плит перекрытия
Январь 2026
Февраль 2026
Март 2026
Апрель 2026
Май 2026
Июнь 2026
Июль 2026
Август 2026
Сентябрь 2026
Октябрь 2026
Ноябрь 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
+2+1+1+1+1+2+1-1+1+5-2+5+5+13+27
5 работ100%
2–16 фев
Подготовительные работы
2–3 фев
2 д100%Геодезическая разбивка
4 д100%
4–9 фев
Ограждение площадки
4 д100%
4–9 фев
Временные дороги
4 д100%
11–16 фев
Подключение временных коммуникаций
4 д100%
10–13 фев
Установка строительного городка
5 работ100%
18 фев–5 мар
Земляные работы
5 д100%
18–24 фев
Разработка котлована
5 д100%
19–25 фев
Вывоз грунта
3 д100%
25–27 фев
Зачистка дна котлована
3 д100%
2–4 мар
Песчаная подушка
5 мар
1 д100%Уплотнение основания
7 работ85%
6–27 мар
Фундамент
5 д100%
10–14 мар
Опалубка фундамента
3 д100%
12–14 мар
Армирование подошвы
17 мар
1 д100%Бетонная подготовка
6 д100%
6–14 мар
Бетонирование фундамента
5 д80%
14–19 мар
Уход за бетоном
4 д60%
20–25 мар
Гидроизоляция
26–27 мар
2 д40%Обратная засыпка
6 работ42%
31 мар–5 мая
Каркас здания
5 д80%
31 мар–6 апр
Монтаж колонн 1 этажа
6 д70%
7–14 апр
Монтаж балок перекрытия
6 д55%
3–10 апр
Монтаж плит перекрытия
8 д35%
10–21 апр
Монтаж колонн 2 этажа

Gantt Accordion · Работы по этажам

Четыре составные работы на трёхмесячном графике. Наведите курсор на полосу для просмотра этажей, нажмите для раскрытия и перетащите работу за правый край графика — шкала продлится автоматически. Связи со скрытыми этажами показаны пунктиром.

№
Имя
%
1
55%
2
55%
3
55%
4
55%
5
-
Сентябрь 2026
Октябрь 2026
Ноябрь 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Ламинат · 10 этажей
Отделка стен · 10 этажей
Покраска · 10 этажей
Светильники · 10 этажей
4 д
Двери

Composite segments · отсечки в родителе

Репродукция скриншота: родитель 112 д, дети по 7 д с паузами в три недели.

№
Имя
%
1
49%
Сентябрь 2026
Октябрь 2026
Ноябрь 2026
Декабрь 2026
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Коробка дома
№
Имя
%
1
49%
Сентябрь 2026
Октябрь 2026
Ноябрь 2026
Декабрь 2026
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Коробка дома

Flow line · работы этажа в одной строке

Каждая строка — этаж, каждый брусок — работа (task.activities). Полосы двигаются и растягиваются с привязкой к дням. Связи встык показаны толстыми сцепками с закруглёнными концами, зазоры и пересечения — стрелками. Сцепки не перехватывают мышь. Последовательные работы делят одну дорожку, параллельные разводятся вниз, строка растёт сама. Ось — дни от начала проекта; маркер Д 18.

№
Имя
1
2
3
4
5
6
7
8
9
10
11
12
Февраль 2026
Март 2026
Апрель 2026
Май 2026
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери

Те же этажи, но работы заходят друг на друга на день — строки расширяются до 2–3 дорожек.

№
Имя
1
2
3
4
5
6
7
8
9
10
11
12
Февраль 2026
Март 2026
Апрель 2026
Май 2026
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери
Стяжка
Грунт
Обои
Двери

Additional Columns

Custom columns: Assignee (text) и Priority (select) — добавлены через additionalColumns проп. Переключатели ниже скрывают системные и кастомные колонки через hiddenTaskListColumns. Задачи Design API и Write tests помечены как closed для демонстрации getTaskListRowClassName.

№
Имя
Assignee
Priority
Начало
Окончание
Дн. (р)
%
1
Alice
high
6д
-
2
Bob
high
11д
-
3
Charlie
medium
7д
-
4
Alice
low
5д
-
5
—
medium
2д
-
Март 2026
Апрель 2026
Май 2026
Июнь 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
6 д
27 мар–3 апр
Design API
11 д
1–15 апр
Backend impl
7 д
10–20 апр
Frontend impl
5 д
18–25 апр
Write tests
2 д
25–28 апр
Deploy

Table Matrix Financial Plan

Слева обычный TaskList с иерархией фаз и статей, справа произвольная матрица ячеек. В этом примере строки в режиме table-matrix автоматически ужимаются по контенту: где есть только сумма, строка ниже, где появляется вторая строка, высота увеличивается ровно под содержимое.

Корневые строки показывают агрегат по фазе, дочерние строки раскрывают детализацию по статьям.
№
Имя
Ответственный
Бюджет
Оплачено
1
Контур 0
2 750 000
920 000
1.1
Генподряд
1 550 000
620 000
1.2
Субподряд
1 200 000
300 000
2
Монолит
10 180 000
1 310 000
2.1
Монолит
4 860 000
1 310 000
2.1.1
Монолит
1 740 000
510 000
2.1.1.1
Монолит
940 000
310 000
2.1.1.2
Монолит
800 000
200 000
2.1.2
Монолит
3 120 000
800 000
2.1.2.1
Монолит
1 250 000
420 000
2.1.2.2
Монолит
1 870 000
380 000
2.2
Монолит
5 320 000
0
2.2.1
Монолит
2 060 000
0
2.2.2
Монолит
3 260 000
0
3
MEP
3 180 000
540 000
3.1
Субподряд
3 180 000
540 000
4
Финиш
2 400 000
0
4.1
Финиш
2 400 000
0
4.1.1
Финиш
1 320 000
0
4.1.1.1
Финиш
1 320 000
0
4.1.2
Финиш
1 080 000
0
5
Все контуры
18 510 000
2 770 000
Апрель 2026
Май 2026
Июнь 2026
30-05
06-12
13-19
20-26
27-03
04-10
11-17
18-24
25-31
01-07
08-14
15-21
22-28
950 00035% бюджета
600 00022% бюджета
350 000
250 000
350 000
250 000
950 00061% бюджета
600 00039% бюджета
350 00029% бюджета
250 00021% бюджета
350 00029% бюджета
250 00021% бюджета
640 000
1 000 720 0009830% бюджета
390 000
440 000
1 240 000
1 450 000
1 550 000
1 050 000
1 220 000
940 000
640 000
1 000 720 00020591% бюджета
390 000
440 000
820 000
690 000
620 000
640 00037% бюджета
720 00041% бюджета
380 00022% бюджета
640 00068% бюджета
300 00032% бюджета
420 00053% бюджета
380 00048% бюджета
1 000 000 00032051% бюджета
10 000
440 000
820 00026% бюджета
690 00022% бюджета
620 00020% бюджета
1 000 000 00080000% бюджета
10 000
400 00032% бюджета
300 00024% бюджета
440 00024% бюджета
420 00022% бюджета
390 00021% бюджета
620 00033% бюджета
420 000
760 000
930 000
1 050 00020% бюджета
1 220 00023% бюджета
940 00018% бюджета
420 00020% бюджета
560 00027% бюджета
520 00025% бюджета
560 00027% бюджета
200 000
410 000
490 000
1 220 00037% бюджета
940 00029% бюджета
280 000
490 000
760 00024% бюджета
940 00030% бюджета
710 00022% бюджета
280 000
490 000
760 00024% бюджета
940 00030% бюджета
710 00022% бюджета
460 00019% бюджета
850 00035% бюджета
1 090 00045% бюджета
460 00019% бюджета
850 00035% бюджета
1 090 00045% бюджета
460 00035% бюджета
520 00039% бюджета
340 00026% бюджета
460 00035% бюджета
520 00039% бюджета
340 00026% бюджета
330 00031% бюджета
750 00069% бюджета
950 000
1 240 000
1 001 070 0005408% бюджета
640 000
440 000
1 590 000
1 700 000
1 830 000
1 540 000
1 980 000
2 340 000
1 560 000
1 090 000

Plan-Fact Daily Input

Верхняя подстрока дня — план, нижняя — факт. Плановые дни подсвечены по датам задачи, но значения можно вводить в любую видимую дату.

План: 675Факт: 40,5
№
Имя
Участок
Ед.
План
Факт
1
Монолит
м3
90
37
2
Монолит
т
15
3,5
3
Фасад
м2
400
—
4
MEP
4.1
MEP
п.м.
120
—
4.2
ЭОМ
точки
50
—
Май 2026
1
18
16

Resource Planner Mode

Ресурсный график строительства: сдвигайте работы по срокам, растягивайте границы и проверяйте накладки по бригадам и технике. В этом примере переназначение между ресурсами заблокировано, чтобы корректировать только даты.

#НазваниеНазначения
Люди7
113дн.3
213дн.3
39дн.2
417дн.2
59дн.2
67дн.2
7-
Оборудование1
811дн.3
Материалы1
94дн.1
Апрель 2026
Май 2026
Июнь 2026
Июль 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
3Планировка участка
Корпус А
6Котлован под фундамент
Секция 1
4Обратная засыпка
Ось 3-5
3Подбетонка
Фундаментная плита
4Заливка плиты
Захватка 1
6Колонны первого этажа
Корпус А
4Армирование плиты
Нижняя сетка
5Выпуски под стены
Лестничный узел
9Кладка наружных стен
1 этаж
8Перегородки
Секция Б
4Контур заземления
Фундамент
5Закладные под кабели
Техпомещения
2Гильзы в фундаменте
Ввод воды
5Выпуски канализации
Корпус А
3Подача арматуры
Плита
5Перестановка опалубки
Колонны
3Разгрузка блоков
Склад 2
4Образец штукатурки
Квартира 12

Критический путь без связей

Ни у одной работы нет зависимостей — цепочка шагов 1–3 и параллельные ветки накиданы просто датами. Критической становится только работа, которая заканчивается последней (здесь — «Поздняя короткая работа» и веха финиша с тем же днём окончания). Попробуйте: перетащите «Позднюю короткую работу» левее — подсветка переедет на новый максимальный финиш (шаг 3 цепочки).

Критический путь:
№
Имя
Начало
Окончание
Дн.
%
1
5д
100
2
5д
60%
3
5д
-
4
10д
40%
5
3д
100
6
7д
-
7
◆
-
Февраль 2026
Март 2026
Апрель 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
5 д100%
2–6 фев
Цепочка: шаг 1
5 д60%
9–13 фев
Цепочка: шаг 2
5 д
16–20 фев
Цепочка: шаг 3
10 д40%
2–11 фев
Параллельная ветка A (длинная)
3 д100%
4–6 фев
Параллельная ветка B (короткая)
7 д
17–23 фев
Поздняя короткая работа
23 фев
Веха финиша проекта

Streaming generation skeleton

The library renders placeholders inside the same task-list and timeline surfaces. Skeleton rows stay below partial tasks while more rows arrive.

Empty project

№
Имя
Начало
Окончание
Дн. (р)
%
Октябрь 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Partial streamed result

№
Имя
Начало
Окончание
Дн. (р)
%
1
15д
-
1.1
4д
-
1.2
5д
-
1.1[ОН] 1.1. Подготовка площадки
1.3
6д
-
1.2[ОН] 1.2. Разработка котлована
Февраль 2026
Март 2026
Апрель 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
3 работы
2–20 фев
Фундамент
4 д
2–5 фев
Подготовка площадки
5 д
6–12 фев
Разработка котлована
6 д
13–20 фев
Бетонирование фундаментной плиты