DHTMLX Ганта 8.0:

Управление проектами — один из самых сложных аспектов ведения бизнеса в современном технологическом мире. В течение многих лет DHTMLX Gantt был надежным инструментом для создания бизнес-веб-приложений на основе многофункциональных диаграмм Ганта. Теперь пришло время вывести наш флагманский продукт на новый уровень, обновив его до версии 8.0.

Но самые важные улучшения этого обновления качества жизни вы найдете в Gantt API. Они предназначены для облегчения вашего опыта кодирования с помощью нашего компонента диаграммы Ганта JavaScript и помогают вам максимально использовать его в веб-проектах.

Прежде всего, мы упростили процесс обработки ресурсов проекта и связанных с ними заданий с помощью нескольких улучшений API. Мы надеемся, что вам пригодятся обновления алгоритмов автоматического планирования, временных ограничений, критического пути, резервного времени и группировки задач. Также есть несколько изменений для более эффективной работы с раздельными и сводными задачами. Кроме того, вы можете найти другие полезные вещи, такие как экран «пустого состояния» для Ганта, фоновая сетка в пустой временной шкале Ганта, встроенный API экспорта, подтверждение удаления задач со стороны сервера, новый способ добавления настраиваемый HTML-контент в ячейках временной шкалы и многое другое.

С визуальной точки зрения вы, безусловно, оцените новый дизайн образцов Ганта.

В этом сообщении блога мы представляем подробный обзор этого крупного обновления.

Новый дизайн для образцов Ганта

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

Теперь вы можете быстро найти ссылки на методы, свойства и события, используемые в конкретном образце, на вкладке Справочник по API. Вы также можете просмотреть исходный код, просто переключившись на вкладку Исходный код без необходимости открывать его в новом окне браузера. Если вы хотите поделиться определенным образцом со своей командой, вы можете просто скопировать ссылку на образец на вкладке «Поделиться». Чтобы открыть образец на новой странице, просто нажмите кнопку «Открыть образец».

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

Упрощенная конфигурация управления ресурсами

Управление ресурсами, вероятно, является одной из самых востребованных функций нашего компонента Ганта, и мы придумали ряд идей о том, как оптимизировать ваш опыт кодирования с его помощью в версии 8.0.

Прежде всего, мы ввели возможность загрузки ресурсов и назначений ресурсов вместе с задачами и зависимостями между ними. Это можно сделать с помощью методов gantt.parse или gantt.load:

gantt.parse({
    tasks: [
        ...,
        {
            id: 5,
            text: "Interior office",
            type: "task",
            start_date: "03-04-2024 00:00",
            duration: 7,
            parent: "2",
            owner: [
            {
                    resource_id: "6",
                    value: 3,
                    start_date: "03-04-2024 00:00",
                    end_date: "05-04-2024 00:00",
            }]
        },
        ...
    ],
    links: [],
    resources: [
        {id: 6, text: "John", unit: "hours/day" },
        {id: 7, text: "Mike", unit: "hours/day" },
        {id: 8, text: "Anna", unit: "hours/day" },
        {id: 9, text: "Bill", unit: "hours/day" },
        {id: 10, text: "Floe", unit: "hours/day" }
    ]
});

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

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

gantt.config.resources = {
    dataprocessor_assignments: true,
    dataprocessor_resources: true,
};
gantt.createDataProcessor(function(entity, action, data, id){
       switch (entity) {
             case "task":
                    break;
             case "link":
                    break;
             case "resource":
                    break;
             case "assignment":
   
                   break;
             }
});

Также можно зафиксировать изменения, связанные с ресурсами, в обработчике, переключившись в режим пользовательской маршрутизации в dataProcessor или используя объявление функции.

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

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

Здесь следует отметить, что хранилище данных для ресурсов теперь создается автоматически при инициализации диаграммы Ганта. Чтобы внести дополнительные изменения в хранилище ресурсов, следует применить новую опцию gantt.config.resources:

gantt.config.resources = {
    resource_store: {
        type: "treeDataStore",
        fetchTasks: true,
        initItem: function(item) {
            item.parent = item.parent || gantt.config.root_id;
            item[gantt.config.resource_property] = item.parent;
            item.open = true;
            return item;
        }
    },
}

Но в то же время по-прежнему можно создать хранилище данных ресурсов вручную и использовать его по умолчанию.

Начиная с версии 8.0 у вас есть возможность сделать назначения ресурсов редактируемыми на диаграмме ресурсов с помощью следующей конфигурации:

gantt.config.resources = {
    editable_resource_diagram: true
};

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

Подробнее об этих важных дополнениях к нашему JavaScript Gantt можно прочитать в документации.

Сохранение древовидной структуры при группировке задач (PRO)

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

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

gantt.groupBy({
     groups: groups,
     relation_property: gantt.config.resource_property,
     group_id: "group_id",
     group_text: "text",
     delimiter: ", ",
     default_group_label: "No Material",
     save_tree_structure: true
});

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

Обратите внимание, что эта функция доступна только в PRO-версии DHTMLX Gantt.

Пустой экран состояния для Ганта

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

Чтобы решить эту проблему, мы представили новую встроенную функцию «Пустой экран» в Гантте. Он полностью настраивается и может отображаться либо в сетке, либо в части временной шкалы диаграммы. Основная цель пустого экрана состояния — предложить конечным пользователям начать планировать свою деятельность, когда в диаграмму Ганта не загружены данные. В коде эта функция активируется через конфигурацию show_empty_state.

gantt.config.show_empty_state = true;

Кроме того, объект ext в Gantt API теперь также включает расширение emptyStateElement с набором методов, связанных с «пустым состоянием». Например, используя метод getContainer(), вы можете показать «пустое состояние» на временной шкале Ганта без каких-либо задач вместо сетки, т.е. изменить контейнер, к которому будет применяться «пустое состояние»:

gantt.ext.emptyStateElement.getContainer = function() {
      return gantt.$task_data.closest(".gantt_layout_content");
};

Также есть возможность изменить содержимое, отображаемое в сообщении «пустое состояние», с помощью метода renderContent():

gantt.ext.emptyStateElement.renderContent = function(container) {
       return `<div class='gantt_empty_state'>
           <div class='gantt_empty_state_image'></div>
           <div class='gantt_empty_state_text'>
                <div class='gantt_empty_state_text_link'     data-empty-state-create-task>${gantt.locale.labels.empty_state_text_link}</div>
           <div class='gantt_empty_state_text_description'>${gantt.locale.labels.empty_state_text_description}</div>
      </div>
</div>`;
};

Чтобы ознакомиться с другими новыми методами, представленными в расширении emptyStateElement, посетите эту страницу документации.

Фоновая сетка на пустой временной шкале Ганта

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

Чтобы добавить фоновую сетку на временную шкалу, вам потребуется следующая настройка:

gantt.config.timeline_placeholder = true;

При необходимости вы также можете выделить определенные столбцы и ячейки в фоновой сетке с помощью шаблона timeline_cell_class:

gantt.templates.timeline_cell_class = function (task, date) {
   if (!gantt.isWorkTime({ date: date, task: task })) {
       return "weekend";
   }
};

Что касается фоновых строк, то в шаблон будет добавлен временный объект задачи, как описано в документации.

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

Новый способ включения экспорта Ганта

Экспорт — важная функция DHTMLX Gantt. Ранее вы могли начать использовать его, включив экспортный файл api.js на HTML-страницу или поместив его в папку конфигурации и импортировав (при использовании JS-фреймворков и Node.js). В версии 8.0 мы предоставляем более удобный способ включения этой функции. Теперь вы можете настроить его для работы с методом plugins():

gantt.plugins({
   export_api: true
})

Узнайте больше об этой новинке в Миграционных заметках.

Наследование ограничений из проектов (PRO)

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

Новая версия библиотеки DHTMLX Gantt устраняет это неудобство, предлагая возможность наследовать ограничения задач проектного типа (или просто проектов) в их дочерних задачах. Это означает, что вам просто нужно установить желаемый тип ограничения для родительского проекта, который будет автоматически применяться к его дочерним элементам. При этом, если какая-либо из дочерних задач уже имеет собственное ограничение, оно не будет заменено ограничением родительской задачи.

Внутри эта функция включается путем изменения значения недавно добавленного свойства gantt.config.auto_scheduling_project_constraint с false (значение по умолчанию) на true.

gantt.config.auto_scheduling_project_constraint = true;

gantt.config.auto_scheduling_use_progress = true;
gantt.init("gantt_here");

gantt.templates.task_class = function(start, end, task) {
    if(task.$rendered_at) {
           if(gantt.calculateTaskLevel(gantt.getTask(task.$rendered_at)) === 1) {
                   return "phase-level-split-task"; // or "phase-level-rollup";
           }
    }
    return " ";
};

gantt.attachEvent("onBeforeSplitTaskDisplay", function (id, task, parent) {
       if (task.progress === 1) {
           return false;
       }
       return true;
});

const dp = gantt.createDataProcessor({
    url: "/gantt/backend/data",
    mode: "REST",
    deleteAfterConfirmation: true
});

const dp = new gantt.dataProcessor("/api");
dp.init(gantt);
dp.setTransactionMode("REST");
dp.deleteAfterConfirmation = true;

gantt.templates.timeline_cell_content = function (task, date) {
   if (17 <= task.id && task.id <= 20){
       const demoValue = randomValueForDate(date, 7)
       var value2 = Math.round(demoValue + demoValue * 0.15);
       return `<div class='cost'>${randomValueForDate(date, 7)}</div>
       <div class='cost'>${value2}</div>`;
   }
   return "";
};

.cost{
  position:absolute;
  z-index: 5;
  pointer-events: none;
}

var task = gantt.getTaskBy(function(task){
   return task.text == "Project #2";
});
console.log(task);

gantt.getTaskBy("progress", 1, { task: true, project: true, milestone: true })

gantt.getTaskBy("progress", 1, { project: true})