Настройка 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)
resourceCalendars - позволяет задавать отдельные рабочие календари для ресурсов
projects (boolean) - конвертирует все задачи с подзадачами в проекты
excludeHolidays (boolean) - позволяет включать только рабочие дни в продолжительность задач
criticalPath (boolean) - позволяет отображать критический путь
split (boolean) - позволяет создавать разделённые задачи
scaleStart (object) - начальная дата на шкале. Если значение не указано, свойство возьмёт самое низкое значение start_date в данных
scaleEnd (object) - конечная дата на шкале. Если значение не указано, свойство возьмёт самое высокое значение end_date в данных
scaleCellWidth (number) - ширина ячейки на шкале дней. По умолчанию 200 px
locale (string, object) - название текущего языка или объект с языковыми настройками
serverUTC (boolean) - позволяет загружать и сохранять даты в формате UTC
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}`);
      });
    },
  }
});

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

Наверх