# Гант

## npm
npm видит чуть больше 70 пакетов


### Анализ основных ребят из npm (15 штук):

*тут нет форков и откровенно пустых пакетов/пакетов без документации/дублей*

- 🟡 Жёлтым отмечены популярные для форков проекты (больше кружочков - больше форков)
- 🟢 Зелёным - те,которые нравятся мне
- 🔴 Красным - те, что точно вычеркнем
- 💰 платные

| Оценка | Название + Ссылка | Объём | Дата последнего обновления | Качество документации | Подходит ли она нам | Особенности |
| ------ | ----------------- | ----- | --------------------- | --------------------- | ------------------- | ----------- |
|🟡🟡|[frappe-gantt-react](https://www.npmjs.com/package/frappe-gantt-react) | 553 kB | 4 года назад | Есть маленький сайтик с демо и документация в гите оцениваю, как 5/10 | **Скорее нет**. Подходит только если у нас не строгий дизайн и то, что написано на "*червячках*" может быть выведено в попапе, тогда подходит (кастомизируется только попап) + нет кастомизации языка календаря. В демо нет менюшки для задач| Достаточно популярная (200 скачиваний в неделю) + на неё есть много wrapper-ов (как минимум два на данный момент в npm видела) |
|🔴💰|[gantt-schedule-timeline-calendar](https://www.npmjs.com/package/@leogle/gantt-schedule) | 5.3 Мб| 6 месяцев назад | Высокое, но, на мой вкус, мало примеров| **Нет**. Слишком дорого и слишком много лишнего | самая качественная по мнению npm-а. Решает очень широкий спектр проблем. Платная. Дорогая |
|🟡🟡🟡🟢 |[gantt-chart-react](https://www.npmjs.com/package/gantt-chart-react) aka [gantt-task-react](https://www.npmjs.com/package/gantt-task-react)| 692 kB | 4 месяца назад (создана около двух лет назад)| Нет сайта, но много достаточно понятных таблиц с типами. Кастомизируется не всё, но хоть как-то | **Неплохо**. Более менее похожа на наш дизайн (менюшка сбоку), судя по количеству форков, достаточно гибкая и читаемая. Можно как раз под себя и пересобрать | Самая поддерживаемая по мнению npm. Минималистичная. Есть дубли в npm (очень много), значит популярна (до 2000 скачиваний в неделю). |
|🟡🟢| [ibm-gantt-chart](https://www.npmjs.com/package/ibm-gantt-chart), aka [ibm-gantt-chart-react](https://www.npmjs.com/package/ibm-gantt-chart-react)| 20.9 MB | год назад, поддержка низкая |Документация лежит в отдельной [ссылке](https://ibm.github.io/gantt-chart/packages/ibm-gantt-chart-docs/storybook/?path=/story/storybook-examples--row-layout). Если она соответствует действительности, то это не такая уж плохая документация, но прмеров откровенно мало. Однако, есть пример с большой производительностью | **Не очень, но м.б**, документация мне не нравится |npm её отмечает как одну из самых сбалансированных либ, 400 скачиваний в неделю, т.е. популярна |
|💰🔴|[gantt-react](https://www.npmjs.com/package/gantt-react)| | | | **НЕТ** | Переоценена, платная, видно, что собрано на одном из бесплатных решений |
|🔴|[@j.k.bi/react-gantt](https://www.npmjs.com/package/@j.k.bi/react-gantt) | 86.3 kB | год назад | Поддержка плохая, популярность нулевая| **Нет** | Милый проектик, но без развития|
| 💰🔴 |[ej2-react-gantt](https://www.npmjs.com/package/@syncfusion/ej2-react-gantt)|1.89 MB | 7 дней назад| **Не нашла в открытом доступе** | **Нет**, дорогая, очень не russian-friendly | Платный, но красивый, 2к скачиваний в неделю. Выглядит удобно|
|🔴|[react-gantt](https://www.npmjs.com/package/react-gantt)|54.2 kB| 4 года назад...| Не самая худшая, на таблицах|Нет, очень давняя поддержка| 150 скачиваний в неделю, очень минималистичная, даже слишком|
|🔴|[react-gantt-chart](https://www.npmjs.com/package/react-gantt-chart)|210 kB|8 месяцев назад|Она есть, она не так уж плоха, лучше, чем [ibm-gantt-chart](https://www.npmjs.com/package/ibm-gantt-chart)|**Нет**, дизайн убогий. Но **можно использовать, как пример** форка [gantt-task-react](https://www.npmjs.com/package/gantt-task-react)|Что-то уникальное, 100 скачиваний в неделю. Является форком [gantt-task-react](https://www.npmjs.com/package/gantt-task-react), но достаточно продвинутым, чтобы быть отмеченным, как уникальный продукт|
|🟢|[react-gantt-elastic](https://www.npmjs.com/package/react-gantt-elastic)|251 kB| три года назад| Хорошая документация, нравится демо, но, возможно, не совсем наш случай| **Не очень, но м.б**, но и не так уж плохо| 10 скачиваний в неделю, но красивенько|
|🔴|[ng-gantt-chart-custom](https://www.npmjs.com/package/ng-gantt-chart-custom)| 1.03 MB | несколько часов назад | Есть, но не идеальная|**Нет**, ибо **свелт** | симпотичная, плотная, 200 скачиваний в неделю, развивается |
|🔴🟡|[r-gantt-chart](https://www.npmjs.com/package/r-gantt-chart)||4 года назад| мало| **Нет**|чудо от товарищей-китайцев|
|🔴|[pimpos-react-native-gantt-chart](https://www.npmjs.com/package/pimpos-react-native-gantt-chart)|10.4 kB| 9 месяцев назад| есть, но мало| **НЕТ**|react-native, нет дэмки|
|🔴💰|[smart-webcomponents-react](https://www.npmjs.com/package/smart-webcomponents-react)|**69.5 MB**|2 месяца назад|Хорошая|**нет** | самое приятное и дешёвое, что я на данный момент видела из платного (400\$). Библиотека из огромной кучи компонент, не только Гант|
|🔴|[react-d3gantt](https://www.npmjs.com/package/react-d3gantt)|271 kB|4 года назад|Примерно нет, но и не нужна|**Нет**, конечно, но код потырить можно|Воспринивать, как пример того, что модно сделать с Гантом на d3|

:::success
### Итог:
- Из всего представленного в npm мне нравится вариант **сделать форк** [**gantt-task-react**](https://www.npmjs.com/package/gantt-task-react)
- Альтернативные варианты: [ibm-gantt-chart](https://www.npmjs.com/package/ibm-gantt-chart) и [ng-gantt-chart-custom](https://www.npmjs.com/package/ng-gantt-chart-custom)
- Из платных вариантов пока ничего не нравится: или слишком дорого, или слишком всё и сразу
:::

## Варианты из других источников:
1. [AnyGantt - JS Gantt charts](https://www.anychart.com/products/anygantt/overview/) - кажется тут прям значительно больше функционала, чем нам надо, но достаточно дёшево
2. [Highcharts](https://www.highcharts.com/demo/gantt) - согласна с описанием "чуть пострашнее" и чуть подороже
3. Frappe рассмотрен в части npm
4. [Webix](https://webix.com) - дорогой и огромный, лучше уж тогда [smart-webcomponents-react](https://www.npmjs.com/package/smart-webcomponents-react)

:::success
### Итог:
- Варианты с open-сорса звучат чуть-чуть приятнее + нет проблем с оплатой
:::
## Гант под чистый js


> npm очень любит панд, если вам был интересно

Тут пропускала то, что по тэгам касалось только других фреемворков (vue, angular) + то, что уже видела + то, что заведомо пустое и совсем без документации

| Оценка | Название + Ссылка | Объём | Дата последнего обновления | Качество документации | Подходит ли она нам | Особенности |
| ------ | ----------------- | ----- | --------------------- | --------------------- | ------------------- | ----------- |
|🔴|[Gantt-elastic](https://www.npmjs.com/package/gantt-group)|9.56 MB|9 дней назад|Есть даже сайтик отдельный, но... он показывает примеры **только на vue** |**Нет**|Есть версия для реакта, она была в обзоре выше, но поддерживаемость у этого варианта выше|
|🟡🟢🟢|[dhtmlxGantt](https://www.npmjs.com/package/dhtmlx-gantt)|5.18 MB|25 дней назад|Есть документация с кучей примеров|**Да**|Есть примеры, где не тупит на больших данных. Кажется, есть платная версия. В либе учтены локализации. Всё ещё не нашла, как рендерить компонент задачи, но это, возможно, временно|
|💰|[fusioncharts](https://www.npmjs.com/package/fusioncharts)|||||Не уверена в его релевантности, но сохраню|
|🔴|[js-gantt-chart](https://www.npmjs.com/package/js-gantt-chart)|382 kB|3 года назад|Не больше, чем родительский пакет|**Нет**|Основан на frappe-gant|
|🔴💰|[ej2-gantt](https://www.npmjs.com/package/@syncfusion/ej2-gantt)|20.5 MB|несколько часов назад||**Нет**, очень дорогой|Полная версия платного инструмента, рассмотренного ранее|
|🔴|[4d-gantt-chart](https://www.npmjs.com/package/4d-gantt-chart)|6.1 MB|2 месяца назад|Не обнаружена|**Нет**, ужасный дизайн||
|🟢|[gantt](https://www.npmjs.com/package/gantt)|248 kB|год назад|Есть, достаточно понятная| **Маловероятно**, ибо текст внутри червей всё ещё не вписать, но оставлю зелёную пометку, т.к. инструмент хороший|Товарищи на канвасе, 90 скачиваний в неделю|
|🔴💰|[smart-webcomponents](https://www.npmjs.com/package/smart-webcomponents)||||Нет|Версия smart webcomponents не на реакт|
|🟢|[ts-gantt](https://www.npmjs.com/package/ts-gantt)|331 kB|месяц назад|Она есть, но она маленькая, т.к. проект маленький|**Маловероятно**, слишком туго с поддержкой и всё ещё не вижу надписей в теле червей, зелёный - за уникальность и старание|точно есть локализация, 31 скачивание в неделю|
|🔴|[d3-gantt-chart](https://www.npmjs.com/package/d3-gantt-chart)||5 лет назад|Почти остуствует|**Нет**|Можно использовать как базу, если делать на d3|
|🔴|[<gantt-chart\>](https://www.npmjs.com/package/@nextbitlabs/gantt-chart)|67 kB|3 года назад|Почти нет|**Нет**, мало функционала|Кто знал, что на девятой странице поиска можно найти что-то новое|
|🔴|[chartjs-plugin-gantt](https://www.npmjs.com/package/chartjs-plugin-gantt)|133 kB|3 года назад|Что-то есть, но мало, хотя и функционала мало|**Нет**, очень мало функционала|База|

// Интересная альтернатива (?) d3 https://www.npmjs.com/package/markgojs

:::success
### Итог (за 29.11.22 и обработку npm-а):
Вариант 1. **сделать форк** [**gantt-task-react**](https://www.npmjs.com/package/gantt-task-react)
Вариант 2. юзать [dhtmlxGantt](https://www.npmjs.com/package/dhtmlx-gantt)

Альтернативные варианты: [ibm-gantt-chart](https://www.npmjs.com/package/ibm-gantt-chart) и [ng-gantt-chart-custom](https://www.npmjs.com/package/ng-gantt-chart-custom) - маловероятны
:::

## Альтернативные подходы

- компоненты с большими таблицами
- d3 js и его аналоги

## Список требований

1. Отображение в виде задача-подзадача
2. Группировки. например по исполнителям, командам, заказчикм (произвольно)
3. Редактирвоание сроков и после редактирвоания обновляется задача на диаграмме
3.1. можно мышкой таскать задачу
4. Ввод новой задачи/подзадачи
5. Отображение связей (одну задачу можно делать только после окончания другой)
6. Процент выполнения задания
7. Инструмент должен вытягивать до 1 тыс задач
8. Можно ли при вводе задания нового открыть карточку для ввода всех необходимых полей

> Комментарии
> - если у нас есть способ отображать задача-подзадача вложенностью 2, то мы можем и задавать группировку просто отправляя правильную последовательность данных
> - ввод новой подзадачи всегда возможен, вопрос в том, можем ли мы добавить дейчтвие на клик по ней

### Таблица по требованиям

| Пакет | Score | RU time* | Подзадачи | Вложенность >= 2, группировки | Изменение сроков мышкой | Стрелочки | Процент выполнения | Масштабируемость | Можно ли отследить клик на задачу | Редактирование тела червя |
|-------|-------|---------|-----------|-------------------------------|----------------------------|-----------|-------------------|------------------|-----------------------------------|---------------------------|
|🟡🟡 [frappe-gantt-react](https://www.npmjs.com/package/frappe-gantt-react)|3 ± 1|--|--|--|+|+|+|==?==|--|--|
|🔴💰900$ [gantt-schedule-timeline-calendar](https://www.npmjs.com/package/@leogle/gantt-schedule) - можно тыкать локально, блочит по портам|**8 ± 1**|+|+|+|+|+|+|+!|==на червя, возможно, больше==|+ можно описание и картинку точно|
|🟡🟡🟡🟢 [gantt-task-react](https://www.npmjs.com/package/gantt-task-react)|7|+|+|--|+|+|+|+|+|форком|
|🟡🟢 [ibm-gantt-chart](https://www.npmjs.com/package/ibm-gantt-chart), aka [ibm-gantt-chart-react](https://www.npmjs.com/package/ibm-gantt-chart-react)|4 ± 2|--|+|+|- только перетаскивание|+|==--==|+|==?==|--|
|💰🔴 2500$/год [ej2-react-gantt](https://www.npmjs.com/package/@syncfusion/ej2-react-gantt)|6 ± 1|--|+|+|+|+|+|+|==+==|--|
|🟢 [react-gantt-elastic](https://www.npmjs.com/package/react-gantt-elastic) - база `gantt-schedule-timeline-calendar`|5 ± 1|+|+|+|==+== потенциально есть, примера нет|--|+|**--**|+|--|
|💰 400$ [smart-webcomponents-react](https://www.npmjs.com/package/smart-webcomponents-react)|**8**|+|+|+|+!|+!|+|+|+|--|
|🟡🟢🟢 [dhtmlxGantt](https://www.npmjs.com/package/dhtmlx-gantt)|**9**|+|+|+|+|!+|+|+|+|+, хорошее|
|💰[fusioncharts](https://www.npmjs.com/package/fusioncharts)|1 ± 1|--|--|--|--|+? не стрелочные|+|==?==|--|--|
|🟢 [gantt](https://www.npmjs.com/package/gantt)|2 ± 1|--|--|--|--|+|+|==?==|--|--|
|🟢 [ts-gantt](https://www.npmjs.com/package/ts-gantt)|6 ± 1|+|+|+|+!|--|+|+|==?==|--|
|💰 [AnyGantt - JS Gantt charts](https://www.anychart.com/products/anygantt/overview/)|**8**|+|+|+|+|+|+|+|+|--|
|💰 [Highcharts](https://www.highcharts.com/demo/gantt)|3 ± 4|--|+|==--==|--|+|+|==--==|==--==|==--==|
|💰 [Webix](https://webix.com)|**7 ± 1**|+|+|+|+|+|+|==?==|+|--|

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

## Нужно ли нам платить за это решение, если да, то как?

Есть проект dhtmlxGantt (https://github.com/DHTMLX/gantt), подходит нам по всем требованиям, примеров много, всё хорошо. Проблема одна - я не могу понять, на сколько он платный. Обычно, когда локально разворачивала платные пакеты, они открывались только на стандартных портах (8000, 8080 и 3000). На остальные ругались и просили платить. А тут и пакет, вроде, в npm, и ключа никакого никуда не просит. Локально на экзотических портах разворачивается, работает

[Сайт](https://dhtmlx.com/docs/products/dhtmlxGantt/), вроде, красноречиво говорит "я стою 700$ минимум". С другой стороны, репозиторий ни гите и дока говорит, что есть некая "[стандартная версия](https://docs.dhtmlx.com/gantt/desktop__editions_comparison.html)", которая включает в себя достаточно много функционала.

## Что такое dhtml, как работает выбранное решение?

[DHTML](https://www.geeksforgeeks.org/dhtml-introduction/)
> But in true ways, **there is noting that as dynamic in DHTML**, there is only the enclosing of different technologies like CSS, HTML, JS, DOM, and different sets of static languages which make it as dynamic.