Настройка Gantt

Так как Gantt - это приложение на базе Webix Jet, оно состоит из отдельных Webix компонентов. Эти компоненты можно переопределить или же работать с отдельными настройками чата.

Базовая конфигурация

Чтобы настроить общую конфигурацию виджета, используйте следующие свойства:

  • url (string) - URL для загрузки данных
  • links (boolean) - позволяет отключить связи между задачами
  • preciseTimeUnit (boolean) - позволяет указать точность позиции и ширины задачи
  • markers (array, boolean) - массив объектов маркеров. У каждого элемента есть следующие поля:
    • text (string) - текст маркера
    • css (string) - название CSS класса
    • start_date (object) (object) - время маркера. Чтобы указать маркер текущего времени, используйте now:true.
  • scales (array) - массив с объектами шкал. У каждого объекта есть следующие поля:
    • unit (string) - юнит шкалы ("hour", "week", "month", "year")
    • step (number) - количество юнитов на ячейку
    • format (string, function) - формат ячеек шкалы. Если это функция, она должна возвращать отформатированную дату. Если это строка, она должна быть в следующем формате: "%Y-%F-%d".
  • display (string) - определяет текущий режим Gantt. Требует включённую поддержку ресурсов (resources: true)
  • isHoliday (function) - проверяет, является ли день выходным
  • resources (boolean) - позволяет загружать ресурсы и работать с ними
  • treeWidth - определяет ширину деревьев в Gantt
  • resourcesDiagram (boolean) - позволяет отображать диаграмму ресурсов. Требует включённую поддержку ресурсов (resources: true)
  • projects (boolean) - конвертирует все задачи с подзадачами в проекты
  • excludeHolidays (boolean) - позволяет включать только рабочие дни в продолжительность задач
  • criticalPath (boolean) - позволяет отображать критический путь
  • split (boolean) - позволяет создавать разделённые задачи
  • scaleStart (object) - начальная дата на шкале. Если значение не указано, свойство возьмёт самое низкое значение start_date в данных
  • scaleEnd (object) - конечная дата на шкале. Если значение не указано, свойство возьмёт самое высокое значение end_date в данных
  • scaleCellWidth (number) - ширина ячейки на шкале дней. По умолчанию 200 px
  • locale (string, object) - название текущего языка или объект с языковыми настройками
  • readonly (boolean) - переключает Gantt в режим read-only. По умолчанию false
  • compact (boolean) - компактный режим. По умолчанию false
  • compactWidth (number) - ширина виджета, при которой он переключается в компактный режим автоматически. По умолчанию 650
  • override - Map с изменёнными внутренними классами и сервисами. Используется при кастомизации.
webix.ui({
  view: "gantt",
  scales: [
    {
      unit: "month",
      format: "%F, %Y",
    },
    { unit: "day", format: "%d" },
    // другие шкалы
  ],
  url: "https://docs.webix.com/gantt-backend/"
});

Related sample:  Gantt: Multiple Scales

Обратите внимание, что если вы не определите свойства scaleStart/scaleEnd, их значениями будут текущая дата и дата спустя месяц соответственно.

Как задать шкалу динамически

Чтобы задать шкалу динамически, вызовите метод setScales() у сервиса Local. Метод принимает следующие параметры:

  • scaleStart (object) - начальная дата шкалы;
  • scaleEnd (object) - конечная дата шкалы;
  • precise (boolean) - флаг для округления позиции и ширины задачи до ближайшего меньшего юнита;
  • width (number) - ширина самого маленького юнита;
  • height (number) - высота ячейки шкалы;
  • scales (array) - массив шкал;
$$("gantt")
  .getService("local")
  .setScales(
    start,
    end,
    true,
    60,
    100,
    [{unit: "day", step: 1, format: "%d"}]
  );

Реактивные свойства

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

  • display (string) - хранит текущий режим Gantt ("resources" или "tasks")
  • criticalPath (boolean) - хранит текущий статус критического пути
  • resourcesDiagram (boolean) - хранит текущий статус диаграммы ресурсов
  • sort (object, array) - хранит статус сортировки. У каждого объекта есть следующие поля:
    • id - ID столбца для сортировки ("text" для столбца "Title" и "start_date" для столбца "Start date")
    • dir - направление сортировки ("asc" или "desc").
  • edit (boolean) - показывает, открыта ли правая панель
  • treeWidth (number) - хранит значение ширины деревьев
  • top (number) - количество прокрученных вертикально пикселей
  • left (number) - количество прокрученных горизонтально пикселей
  • selected (string) - ID выбранной задачи
  • readonly (boolean) - отображает текущее состояние режима read-only.

Получить текущее состояние компонента можно с помощью метода getState():

webix.ui({
    view:"gantt", 
    id:"myGantt",
    url: "https://docs.webix.com/gantt-backend/"
});
 
const state = $$("myGantt").getState();
/*
{ 
  display: "resources",
  top: 60, left: 250,
  selected: 1.2, edit: true,
  readonly: false, criticalPath: true,
  resourcesDiagram: false, treeWidth: 400,
  sort: {id: "text", dir: "desc"}
}
*/

Отслеживание изменений реактивных свойств

Следить за изменениями реактивных свойств можно с помощью обработчика $observe:

webix.ui({
  view:"gantt",
  on: {
    onInit: app => {
      const state = app.getState();
 
      // Создаём сообщение с ID выбранной задачи
      state.$observe("selected", v => {
        webix.message(`ID of the selected task is: ${v}`);
      });
    },
  }
});

Related sample:  Gantt: Listening to States

В примере выше, текущий state доступен через экземпляр JetApp, который, в свою очередь, доступен в обработчике onInit.

Наверх