В начале октября 2020 года команда Webix выпустила восьмую версию библиотеки пользовательского интерфейса Webix, которая включает два новых сложных виджета. Первый из них - Scheduler, о котором мы подробно рассказывали в предыдущей статье.

Второй виджет - это JavaScript-диаграмма Ганта, о которой мы подробно поговорим в этой статье.

Обзор виджета Webix Gantt

На этот раз Webix представил нам еще один виджет для управления ресурсами, проектами и планирования задач.

В настоящее время в Webix есть три виджета для систем управления проектами (Канбан, Гантт и Планировщик)

Гантта традиционно используется для систем планирования и управления проектами, основанных на методологии водопада. Самым известным решением в этой области является MS Project. Диаграммы Ганта всегда поражают своей визуальной простотой и лаконичной визуализацией связей между задачами. Неоспоримыми преимуществами диаграммы Ганта являются:

  • Расположение задач прямо на календарной сетке.
  • Визуализация распределения рабочего времени.
  • Простое управление ресурсами.
  • Быстрый поиск «узких мест».
  • Простая оптимизация проекта за счет наглядности.

Webix Gantt: системные характеристики

Внутренний уровень

Webix Gantt поставляется с серверной частью NodeJS.

Внешний интерфейс

Пользовательский интерфейс на основе Webix Jet

5 скинов: Материал, Мини, Плоский, Компактный, Контрастный

Поддержка перетаскивания

Документация, Справочник по API, Каталог примеров программирования.

Общее впечатление

В этом обзоре мы начнем с конца и дадим общий итог. Этот продукт сильно отличается от других сложных виджетов Webix. Первое, что бросается в глаза, - это скромный функционал. Это решение не претендует на роль готового приложения, а скорее является платформой для разработки вашего проекта и систем управления ресурсами на основе ядра диаграммы Ганта.

Если вы разрабатываете аналогичное решение и ищете готовую реализацию диаграммы Ганта, то Webix Gantt - именно то, что вам нужно. Это очень честный продукт, который не пытается казаться чем-то большим, чем просто диаграмма Ганта. У вас будет MVP концепции Ганта с отличной документацией и готовым бэкендом, и все это предназначено для интеграции в ваше приложение.

Традиционно Webix позволяет выполнять любые настройки и модификации. Технология Webix Jet упрощает обновление уровня пользовательского интерфейса в соответствии с потребностями вашего рабочего процесса.

Webix Gantt: обзор функций

Базовый пример диаграммы Ганта демонстрирует, как создавать и редактировать список задач.

Левая панель содержит иерархический список задач. У каждой задачи отображается имя и дата начала.

Вы можете сразу создавать вложенные задачи или задачи корневого уровня.

На правой панели отображается сама диаграмма Ганта. Благодаря поддержке перетаскивания пользователь может:

  • установить связи между разными задачами
  • переместить задачу в сетке календаря
  • изменить продолжительность задач.

Когда вы нажимаете на задачу, открывается другая панель, где вы можете редактировать свойства задачи:

  • название
  • Дата начала
  • срок действия
  • продолжительность
  • ход исполнения
  • связанные задачи
  • Детали

Локализация Webix по диаграмме Ганта

Все виджеты Webix поддерживают локализацию. Разработчики могут найти готовый пример локализации для Gantt.

Использование пользовательских шкал времени

Еще один хороший пример использования пользовательских шкал времени для упрощения отслеживания задач. Например, используя календарную сетку с размером одной недели, месяца или года.

Режим только для чтения

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

Компактный режим

Образец в компактном режиме Ганта будет востребован при использовании Ганта на экранах с малой диагональю.

Заключение

Webix Gant Chart - самый молодой продукт в линейке Webix, и он, вероятно, превратится в независимое приложение для конечных пользователей. Но уже на этом этапе разработки пользователи Webix могут получить удобную и красивую диаграмму Ганта для разработки на ее основе своего проекта и приложения для управления ресурсами.