---
# System prepended metadata

title: Гант. Тестирование пакетов

---

# Гант. Тестирование пакетов

Из прошлого анализа мы выделили пять пакетов, которые соответствуют нашим требованиям. Эти пакеты представлены в таблице ниже. Так же, к свойствам пакеты добавлена колонка "Канбан".

| Пакет | Score | Канбан | RU time |  Подзадачи | Вложенность >= 2, группировки | Изменение сроков мышкой | Стрелочки | Процент выполнения | Масштабируемость | Можно ли отследить клик на задачу | Редактирование тела червя |
|-------|-------|--------|---------|-----------|-------------------------------|----------------------------|-----------|-------------------|------------------|-----------------------------------|---------------------------|
|💰900$ [gantt-schedule-timeline-calendar](https://www.npmjs.com/package/@leogle/gantt-schedule) - можно тыкать локально, блочит по портам|**8 ± 1**|--|+|+|+|+|+|+|+!|==на червя, возможно, больше==|+ можно описание и картинку точно|
|💰 400$ [smart-webcomponents-react](https://www.npmjs.com/package/smart-webcomponents-react)|**8**|в комплекте|+|+|+|+!|+!|+|+|+|--|
|🟡 [dhtmlxGantt](https://www.npmjs.com/package/dhtmlx-gantt)|**9**| отдельно|+|+|+|+|!+|+|+|+|+, хорошее|
|💰 [AnyGantt - JS Gantt charts](https://www.anychart.com/products/anygantt/overview/)|**8**|--|+|+|+|+|+|+|+|+|--|
|💰 [Webix](https://webix.com)|**7 ± 1**| отдельно|+|+|+|+|+|+|==?==|+|--|

Далее я попробую на примере простого проекта запустить все эти пакеты и попытаться отрисовать диаграмму Ганта с максимальным количеством представленных требований.

## Критерии

1. Качество документации
2. Стилизация под макет
3. Удобство интеграции в проект
4. Что получилось

Что в итоге делала?
- Установка
- Локализация
- Вложенные колонки
- Стрелочки
- Работа с событиями

Не дольше 1.5 часа на пакет, чтобы уложиться в сроки

## Gantt-schedule-tilemine-calendar, 900$
- js, install with npm
- не самая красивая документация, но базовые вещи делаются легко
- неоправдано дорогая
- Даёт лёгкую возможность редактировать "тело червя"
- Пыталась подвезти стрелочки, не получилось сделать быстро
![](https://i.imgur.com/ynYydot.png)


## Smart-webcomponents, 400$
- react (install with npm)
- Простая установка, доступная [документация](https://www.htmlelements.com/react/demos/gantt/overview/)
- С этим инструментом быстро и удобно работать

![](https://i.imgur.com/kmIJpMp.png)


## DhtmlxGantt 700$/free*
\* см. предыдущий отчёт 
- react, js
Общий комментарий:
- легко запускается
- Дока запутанная, сам код найти достаточно сложно, хотя примеров много
- Варианты, которые нашла (поиск занял очень много времени)
- https://snippet.dhtmlx.com/eq70o558?text=gantt
- https://github.com/DHTMLX/react-gantt-demo
- https://github.com/web-widgets/react-gantt-demos

Из-за того, что нет централизованного места с документацией, становится очень неудобно разрабатывать

![](https://i.imgur.com/q4vGJgp.png)


## AnyGantt - 50$
- js
- Запусается локально
- Внятная [документация](https://docs.anychart.com/Gantt_Chart/Events)
- Не 100% кастомизируемая, но предельно простая в использовании
- Не очень-то ребактируемая шапка таблицы
- Не очень красиывй

![](https://i.imgur.com/mJeC3Q0.png)

## Webix
- js
- документация понятная, но её не очень много
- не смогла завести локально

## Выводы

Мне понравилось работать с `AnyGantt` и `SmartWebComponents`. Библиотеки платные, но не столь дорогие, как их конкуренты. Главным плюсом этих решений является качественная документация.

`AnyGantt` значительно более простая по врешнему виду, а `SmartWebComponents` достаточно сильно кастомизируемая + всё работает "из коробки"