# Гант. Тестирование пакетов Из прошлого анализа мы выделили пять пакетов, которые соответствуют нашим требованиям. Эти пакеты представлены в таблице ниже. Так же, к свойствам пакеты добавлена колонка "Канбан". | Пакет | 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` достаточно сильно кастомизируемая + всё работает "из коробки"