Содержание
React был первоначально выпущен Facebook в 2013 году и с тех пор приобрел значительную популярность. Опрос разработчиков, проведенный Stack Overflow, подтверждает, что React стала одной из самых любимых, востребованных и самых востребованных технологий в 2016 году. Эта тенденция довольно стабильна и ее нельзя игнорировать. Чем больше у вас тузов в рукаве, тем больше у вас шансов остаться на плаву. Это правило работает и для разработчиков React. Вот почему мы решили взглянуть на пять компонентов React, которые вы можете использовать для создания онлайн-приложений для диаграмм Ганта. Они имеют разный уровень функциональности, поэтому могут использоваться для разных типов проектов.
5. Ext Gantt
Компания Бринтум хорошо известен своими высококачественными плагинами для платформы Ext JS. Ext Gantt, продвинутая диаграмма Ганта, разработанная этой компанией, может использоваться как компонент React. Давайте посмотрим, что он может предложить, чтобы решить, стоит ли оно вашего внимания. Поддержка перетаскивания может значительно упростить работу с приложением на основе этого компонента. Вы можете отфильтровать доступные задачи по любому условию и изменить масштаб. Как и в большинстве других компонентов, вы можете использовать функцию расчета критического пути. Преимущества и задержки могут привнести некоторую гибкость в процесс управления проектом. Ext Gantt поддерживает различные типы зависимостей между задачами (FF / FS / SF / SS). Он может быть интегрирован с популярными серверными технологиями, такими как PHP, Java, ASP.NET и т. Д. В случае необходимости вы можете легко создать собственное контекстное меню и локализовать свое приложение. Ext Gantt — довольно продвинутый инструмент с десятками удобных функций. Но у него есть и свои слабые стороны. Документация, предоставленная Bryntum, не очень подробная. Он предназначен для продвинутых разработчиков, которые имеют общее представление о том, как все работает.
4. Реагировать Диаграмма Ганта с D3.js
D3.js это хорошо известная библиотека JavaScript, которую вы можете использовать для визуализации практически любого типа данных. Итак, почему бы не использовать его для создания диаграммы Ганта? Если вас интересует тот же вопрос, вы можете проверить эту короткую статью, написанную Яни Илиевым. В нем описаны принципы использования библиотеки D3.js для создания повторно используемого компонента React для разработки приложений диаграмм Ганта.
3. ReactGantt
В том случае, если вас не интересует множество функций и вы планируете создать минималистское приложение для визуализации рабочего процесса в форме диаграммы Ганта, вы можете взглянуть на ReactGantt. Это компонент с открытым исходным кодом, который распространяется под лицензиями MIT или GPL версии 3. Его можно легко установить с помощью менеджера пакетов npm. Вы можете указать даты для левой и правой границ таблицы. Также возможно включить или отключить границы, изменить цвет полос, отобразить процент выполнения задачи и показать подсказку с информацией о задаче, когда пользователь наводит курсор на панель. Задачи, отображаемые в сетке графика, могут быть сгруппированы. Как видите, ReactGantt не предоставляет вам расширенных функций, таких как, например, расчет критического пути. Его цель — отобразить несколько горизонтальных полос календарной сетки и отметить процент выполнения для каждого из них. Если вы планируете создать приложение для работы с большими и сложными проектами, состоящими из сотен задач, ReactGantt не будет лучшим выбором. Но если вы ищете инструмент, который можно установить и использовать как можно быстрее для визуализации прогресса небольшого проекта из десятка задач, он может быть именно тем, что вам нужно.
2. dhtmlxGantt
dhtmlxGantt предоставляет вам расширенные функциональные возможности по сравнению с предыдущим примером. Этот компонент JavaScript позволяет создавать полнофункциональные приложения-диаграммы Ганта для кросс-браузерных веб-приложений с пользовательским интерфейсом, ориентированным на перетаскивание. Оболочка, предоставленная разработчиками, позволяет использовать эту диаграмму Ганта в вашем приложении React. Вы можете посетить эта страница GitHub чтобы получить демо и проверить страницу документации, которая описывает, как все работает. Вы можете добавить dhtmlxGantt в свой проект через npm, а затем настроить его в соответствии с вашими потребностями. Существует возможность изменять процент выполнения задачи и создавать различные типы связей между задачами с помощью курсора мыши. Помимо этих функций, которые могут быть описаны как довольно тривиальные для такого рода программного обеспечения, dhtmlxGantt может предложить еще кое-что. Расчет критического пути будет полезен в том случае, если вы хотите быть полностью уверены, что сможете завершить проект вовремя. Вы можете использовать различные типы пользовательских элементов, таких как базовые сроки или крайние сроки. Автопланирование может помочь избежать необходимости выполнять рутинную работу вручную. Обратное планирование, поддержка сенсорных устройств, экспорт / импорт из MS Project, сортировка, фильтрация, динамическая загрузка, поддержка специальных возможностей — сложно описать все доступные функции в одном абзаце. dhtmlxGantt предоставляет вам все функциональные возможности, необходимые для создания полнофункциональных приложений для онлайн-управления проектами.
1. Реагировать-Google-диаграммы
React-google-charts — это оболочка, которая позволяет вам использовать Google Gantt Chart в вашем проекте. Этот график отображается с использованием SVG и позволяет отображать дату начала и окончания задачи, а также ее продолжительность. Когда вы наводите указатель мыши на данные, на экране появляется подсказка с дополнительной информацией. Вы можете показать, какие зависимости есть в каждой задаче, используя стрелки с настраиваемым стилем или использовать режим без отображаемых зависимостей. Подобные задачи могут быть сгруппированы вместе. Функция критического пути позволяет определить задачи, которые больше всего влияют на общее время проекта. Вы можете стилизовать диаграмму и настроить ее внешний вид. Диаграмма Google Gantt предоставляет вам все, что вам может понадобиться для создания легкой, аккуратной и красивой диаграммы. Документация довольно подробная. Нет необходимости тратить много времени, чтобы узнать, как все работает, прежде чем вы сможете создать собственное приложение для диаграммы Ганта.
Выводы
Очевидно, что Реакт здесь, чтобы остаться. Он приобретает все большую популярность с каждым днем. В результате крупные и известные компании-разработчики программного обеспечения, а также независимые разработчики предоставляют разработчикам возможность использовать свои компоненты Gantt как часть приложений React, чтобы оставаться в моде. Результат превосходит все ожидания. Нет необходимости мириться с недостатками единственного доступного решения. Ассортимент доступных компонентов настолько широк, что вы всегда можете выбрать тот, который вам больше подходит. Хотите создать простое и минималистичное приложение для диаграммы Ганта? ReactGantt здесь для вас. Ищете что-то с расширенными функциями? Проверьте dhtmlxGantt или Ext Gantt.
