Экран пустого состояния
Начиная с версии 8.0, библиотека включает функцию для отображения пустого экрана (также известного как "пустое состояние") с использованием элемента-заполнителя в гриде, когда данные в диаграмме Ганта не загружены.
По умолчанию этот элемент-заполнитель скрыт. Чтобы сделать его видимым, вы можете включить конфигурацию show_empty_state:
gantt.config.show_empty_state = true;
Related sample: Show empty state screen
Объект EmptyStateElement
Функция "пустого состояния" предоставляет различные методы API, доступные через расширение emptyStateElement.
Эта функция не ограничивается ситуациями, когда задачи не загружены в диаграмму Ганта. Она также может отображаться, когда задачи загружены, но отфильтрованы, и на странице не остается видимых задач. Для обработки этого сценария можно использовать метод isEnabled():
gantt.ext.emptyStateElement.isEnabled = function (){
return !gantt.getVisibleTaskCount().length;
}
Если вы предпочитаете показывать "пустое состояние" в области временной шкалы вместо грида, вы можете использовать метод getContainer():
gantt.ext.emptyStateElement.getContainer = function() {
return gantt.$task_data.closest(".gantt_layout_content");
};
Для настройки содержимого, отображаемого в "пустом состоянии", можно применить метод renderContent():
gantt.ext.emptyStateElement.renderContent = function (container) {
const placeholderTextElement = `<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>`;
const placeholderImageElement = "<div class='gantt_empty_state_image'></div>";
const placeholderContainer = `<div class='gantt_empty_state'>
${placeholderImageElement}${placeholderTextElement}</div>`;
container.innerHTML = placeholderContainer;
}