В предыдущей статье, посвященной одному из наиболее популярных Agile подходов, я рассказал вам о японском методе управления проектами "Kanban". Сегодня я хочу переместиться из дальнего востока на такой же дальний запад. И в этой публикации вы узнаете о "Диаграмме Ганта", ее истории, применении и современных реализациях. Давайте разбираться.

Предыстория 

Первый прототип так называемой "Диаграммы Ганта" был изобретен, как ни странно, польским инженером Каролем Адамецким еще в 1896 году. Он разработал принципиально новый подход для визуализации и анализа взаимосвязанных процессов на производстве (сталеварение) и успешно применял его на практике. Своему изобретению он позже дал название «гармонограмма».

Поскольку Адамецкий публиковался только на русском и польском языках, его наработки не получили широкой известности в англоязычных странах. Но в 1910 году американский инженер Генри Гант представил собственный аналог подобной системы в Соединённых Штатах. Он применял свое изобретение для учета времени, которое заводские рабочие затрачивали на выполнение той или иной задачи. 

Впоследствии эти две системы были объединены в то, что сейчас мы называем "Диаграммой Ганта".

Применение

Итак, давайте сначала разберемся для каких именно задач вам может быть полезна Диаграмма Ганта. Если обобщить, то подобная система способна решить сразу несколько вопросов, связанных с управлением проектами. 

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

Кроме того, Диаграмма Ганта помогает определить вехи – самые важные события проекта. А благодаря развитию программного обеспечения, диаграмма Адамецкого-Ганта позволяет отслеживать прогресс задач, связывать зависимые задачи, управлять ресурсами и затратами, а также налаживать сотрудничество между членами команды. Но так было не всегда.

Развитие 

Долгое время подобные диаграммы чертили на бумаге вручную. Это приводило к тому, что при изменении графика приходилось переделывать всю диаграмму целиком. 

Позже, для обозначения столбцов диаграммы, менеджеры проектов начали использовать бумажные ленты и специальные прямоугольники. Такой подход значительно ускорил процесс анализа, поскольку ключевые элементы можно было свободно перемещать, а не перерисовывать диаграммы заново.

В современной управленческой среде никто уже не пользуется ручными чертежами для подобного анализа (но это не точно). Если спросить у дяди Гугла о цифровых аналогах Диаграммы Ганта, то браузер выдаст вам десятки готовых приложений, как платных так и бесплатных, которые с лихвой покроют запросы среднестатистического менеджера проектов. 

Но как же быть, если перед вами стоит задача реализовать подобную систему в собственном приложении? Ответ простой – нужно искать не статическое приложение, а гибкий виджет, который можно использовать как самостоятельно, так и в качестве подключаемого модуля. 

Об одном из таких виджетов я и хочу поговорить в этой статье. А речь пойдет о JavaScript Gantt Chart от команды Webix. Давайте разберемся что это такое и в чем его преимущество.

Что представляет собой Webix Gantt Chart

Webix Gantt – это комплексное JavaScript решение для управления проектами по методологии Agile. Если коротко, то функционал виджета позволяет работать с проектами любой сложности, планировать задачи и отслеживать их выполнение, отмечать важные вехи рабочего процесса, управлять ресурсами и многое другое. По сути, весь этот функционал вы можете найти в подавляющем большинстве приложений подобного типа.

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

Теперь давайте подробнее остановимся на преимуществах виджета Gantt Chart и его конфигурациях. 

Преимущества

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

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

В обоих случаях вам приходится ограничивать себя тем функционалом, который изначально был заложен разработчиками соответствующих продуктов. Обратная сторона медали – это если из 100 предложенных фич вы планируете использовать только 10. В таком случае у вас нет возможности сбросить "лишний балласт". А это, в свою очередь, негативно отразится на производительности.

А теперь давайте посмотрим, какие плюшки предлагает нам аналогичное решение от команды Webix. Исходя из того, что Gantt Chart – это web приложение, написанное на JavaScript и CSS, вы можете:

• использовать виджет как отдельное приложение, либо интегрировать его в качестве стороннего модуля (в том числе под React, Angular и другие фреймворки)

• гибко настраивать компонент, добавляя только те фичи, которые нужны непосредственно для вашего проекта

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

• использовать готовый бэкенд на Node.js и Go, либо подключить собственный.

Если вы не видите явных плюсов во всем том что я перечислил выше, и гибкость настроек для вас не в приоритете, тогда вам следует подыскать другой инструмент. Как вариант, можете присмотреться к такому такому сервису как GanttPro.

А для тех кто мыслит нестандартно и не привык ограничивать себя определенными шаблонами, я расскажу подробнее как запустить, настроить, кастомизировать и локализовать виджет Gantt Chart.

Как создать виджет с базовым функционалом

Начнем с того, что Gantt Chart –– это продвинутое расширение библиотеки Webix. Чтобы использовать виджет, вам необходимо сначала подключить ресурсы библиотеки, а затем уже соответствующие .js и .css файлы самого виджета.

<head>
  <!-- Библиотека Webix -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <link rel="stylesheet" href="codebase/webix.css" type="text/css">

  <!-- Виджет Gantt Chart -->
  <script type="text/javascript" src="codebase/gantt.js"></script>
  <link rel="stylesheet" href="codebase/gantt.css" type="text/css">
</head>

После подключения ресурсов вам нужно вызвать конструктор виджета, передав его методу webix.ready( … ). В этом случае код приложения начнет выполняться только после полной загрузки страницы.

<body>
  <script>
    webix.ready(function(){
      /*Конструктор Gantt Chart*/
      webix.ui({
        view:"gantt", 
        url:"your_backend"
      });
    });
  </script>
</body>

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

Еще пару слов о лицензировании. Как и другие комплексные виджеты, Gantt Chart привязан к ядру Webix и распространяется вместе с Pro версией библиотеки. 

Я рекомендую скачать триальную Pro версию со всеми комплексными виджетами, которая бесплатно доступна в течение 30 дней. Это позволит вам на практике ощутить все преимущества и гибкость работы с Диаграммой Ганта и решить, подходит вам этот инструмент или нет.

Конфигурация

Webix Gantt — это своего рода конструктор, который собран из нескольких компонентов ядра библиотеки. У каждого из них есть API, с помощью которого вы можете настраивать внешний вид и поведение тех или иных частей интерфейса. Помимо этого, у виджета есть набор собственных конфигураций. 

И здесь стоит уточнить, что для настройки виджета используется максимально простой и удобный JSON синтаксис. Все что от вас требуется, это прописать необходимые свойства и присвоить им соответствующие значения. Давайте рассмотрим некоторые конфигурации чуть детальнее.

Подключаем бэкенд

Для работы приложения вам понадобятся исходные данные. В реальном примере данные будут храниться на удаленном сервере. При инициализации приложения вам следует указать ссылку на серверный скрипт (свой или один из двух, которые вы можете найти на нашем github). Gantt загрузит данные вашего проекта и будет отправлять все изменения обратно на сервер. 

Для этого предусмотрено свойство url, которому нужно присвоить ссылку на соответствующий бэкенд. Более детально о работе с серверной частью вы можете узнать здесь.

{
  view: "gantt", 
  url: "your_backend" // ссылка на ваш серверный скрипт
}

Связывание задач

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

Связи поддерживаются по умолчанию. Чтобы отключить их, вам необходимо задать свойству links значение false:

{
  view: "gantt", 
  …,
  links: false
}

Критический путь

У любого проекта есть определенные временные рамки. Чтобы вписаться в дедлайн, необходимо своевременно и последовательно выполнить каждую из поставленных задач. 

А для анализа сроков выполнения предусмотрен критический путь. Он позволяет отображать цепочку задач, которые необходимо выполнить вовремя, чтобы уложиться в установленные сроки проекта.

Виджет анализирует только те задачи, между которыми установлена связь "конец-начало". Если сроки выполнения таких задач накладываются или установлены без учета запаса времени (а в реальной жизни бывает всякое), то виджет посчитает их критическими и подсветит красным цветом.

Чтобы показать критический путь, вам необходимо задать свойству criticalPath значение true:

{
  view: "gantt", 
  …,
  criticalPath: true
}

Разделение задач

Помимо связей между разными задачами, вы также можете создавать связанные подзадачи в пределах конкретной задачи. Их части будут отображаться в одном ряду и соединяться между собой пунктирной линией. 

В отличие от обычных задач, подзадачи разделенной задачи не отображаются в дереве и у них не может быть вложенных элементов.

Чтобы включить поддержку разделенных задач, вам необходимо задать свойству split значение true:

{
  view: "gantt", 
  …,
  split: true
}

Работа с ресурсами

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

Чтобы включить поддержку ресурсов, вам необходимо задать свойству resources значение true:

{
  view: "gantt", 
  url: "your_backend",
  resources: true
}

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

Режим просмотра ресурсов

По умолчанию в дереве и чарте отображаются только задачи: проекты, задачи и подзадачи, а также вехи - значимые события проекта. 

Но вы можете переключиться на специальный режим просмотра ресурсов, где будут отображаться только задачи, сгруппированные по ресурсам, которым они (задачи) назначены. 

Также в дереве есть отдельная группа Unassigned, где собраны все задачи, у которых ещё нет назначенных ресурсов.

Чтобы перейти в режим просмотра ресурсов, вам необходимо задать свойству display значение "resources" :

{
  view: "gantt",
  …,
  resources: true, // обязательная строка!
  display: "resources"
}

Диаграмма ресурсов

Помимо режима просмотра, вы можете отображать ресурсы на специальной диаграмме. Она позволяет анализировать загруженность каждого ресурса по часам и задачам на каждый рабочий день. Если лимит ресурса превышен, то он будет подсвечен красным цветом на диаграмме.

Чтобы отобразить диаграмму, вам необходимо включить поддержку ресурсов и задать свойству resourcesDiagram значение true:

{
  view: "gantt",
  url: "your_backend",
  resources: true, // обязательная строка!
  // показываем диаграмму под основным чартом
  resourcesDiagram: true
}

В разделах выше я описал только малую часть всех настроек Gantt Chart. С полным списком конфигураций виджета вы можете ознакомиться в соответствующем разделе документации.

Кастомизация

Помимо манипуляций с базовыми настройками, у вас есть возможность кастомизировать практически любую часть интерфейса и его поведение. Но для этого вам нужно будет разобраться что происходит под капотом виджета. 

Архитектура виджета построена как SPA приложение на основе MV* фреймворка Webix Jet, в котором интерфейс (View) отделен от бизнес логики (Model). Каждый элемент интерфейса — это отдельный компонент библиотеки Webix (tree, datatable, toolbar и прочие).

Значимые части интерфейса (дерево задач, чарт и другие ), которые состоят из компонентов, хранятся в отдельных классах (модулях), наследуемых от класса JetView. А бизнес логика, она же модель, также хранится отдельно в виде модулей, которые в контексте фреймворка можно назвать сервисами. 

Чтобы кастомизировать интерфейс и логику приложения, вам необходимо всего лишь получить докторскую степень в программировании и после этого немного покопаться в его коде :). Ну а для этого желательно знать хотя бы ключевые аспекты работы с фреймворком Webix Jet. Базовые принципы работы с фреймворком можно найти в статье “Фреймворк Webix Jet глазами новичка”, или же обратиться к документации за более детальной информацией.

Как кастомизировать интерфейс

А теперь давайте перейдем к самой кастомизации. Как я уже упоминал выше, каждый элемент интерфейса — это отдельный компонент библиотеки, а каждая значимая часть интерфейса — это класс, который состоит из этих компонентов. Вы можете легко менять, настраивать, добавлять или же вовсе убрать лишнюю часть интерфейса.

Допустим, вам нужно добавить дополнительный столбец с данными в дерево задач. Для начала необходимо создать новый класс CustomTree, наследуя его от класса, который хранит настройки интерфейса дерева задач (gantt.views.tree). 

За внешний вид модуля отвечает метод config(), который должен быть у всех не абстрактных классов виджета. Чтобы поменять что-то в интерфейсе модуля, обычно надо переопределить либо метод config(), либо init(). Общее правило работает так: если вы уверены, что изменение в ui ничего не сломает во внутренней логике - меняйте config(). Если сомневаетесь - используйте init(). А поскольку вам надо добавить новый столбец в дерево задач, то лучше отдать предпочтение методу config().

Этот метод жизненного цикла наследуется от базового класса JetView и отвечает за настройки той части интерфейса, которую вы хотите изменить.

Внутри метода config() вам следует получить объект конфигураций нового класса, который соответствует конфигурациям компонента treetable. После этого необходимо добавить шаблон нового столбца в объект свойства columns компонента и вернуть новые настройки. В коде это будет выглядеть следующим образом:

class CustomTree extends gantt.views.tree {
    config() {
      const ui = super.config(); // получаем объект конфигураций дерева задач
	// добавляем шаблон дополнительного столбца
      ui.columns.splice(3, 0, {
        id: "progress",
        header: "%",
        template: "#progress#%",
        width: 50,
      });
	// возвращаем обновленные настройки
      return ui;
    }
 }

Затем, вам надо заменить класс от которого вы наследовались, на тот который вы создали. Сделать это можно с помощью свойства override в конструкторе виджета:

{
    view: "gantt",
    url: "https://docs.webix.com/gantt-backend/",
    override: new Map([[gantt.views.tree, CustomTree]])
}

Вот таким образом вы можете менять интерфейс виджета. 

Локализация виджета 

Простота локализации — это один из приятных бонусов виджета Gantt. По умолчанию все лейблы интерфейса отображаются на английском языке. Но вы с легкостью можете добавить собственные переводы и переключаться между ним при необходимости.

Чтобы указать лейблы на том или ином языке, вам следует создать отдельную локаль и прописать там необходимые переводы.

gantt.locales.ua = {
  "Add task": "Добавити завдання",
  "Add project": "Добавити проект",
  …
};

Когда локаль с кастомными переводами готова, ее следует применить для всего приложения. А за это отвечает свойство locale, в объекте которого вы можете указать нужную локаль по умолчанию.

{
  id: "gantt_id",
  view: "gantt",
  url: "your_backend",
  locale: {
    lang: "ua"
  }
}

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

Для этого нужно получить доступ к специальному сервису locale через метод getService(), а затем вызвать для этого сервиса метод setLang(), передав название нужной локали в качестве параметра. Здесь я хочу уточнить, что мы пока говорим о методах фреймворка Jet.

const locale = $$("gantt_id").getService("locale");
locale.setLang(/* ваша локаль */); // ua, en, ru, custom_one

Стоит учитывать, что виджет распространяется только с английской локалью по умолчанию. Но у библиотеки есть специальная площадка, где пользователи могут разместить свои локали. С этими переводами можно ознакомиться на странице webix-hub.

Заключение

В этой статье я познакомил вас с виджетом Webix Gantt и его особенностями. Как вы видите, это весьма функциональный и очень гибкий в плане настройки и кастомизации компонент. Помимо прочего, вы можете интегрировать его под любой удобный вам фреймворк или библиотеку. Более детальную информацию о возможностях и настройке виджета вы можете найти в его документации.