Использование свойств DHTMLX Gantt в Angular Gantt

Эта страница документирует публичную поверхность обёртки @dhtmlx/trial-angular-gantt и @dhx/angular-gantt.

Доступные входные параметры

Вводной параметр	Тип	Описание
tasks	any[]	Коллекция задач, отображаемая в диаграмме/грид. Обязателен.
links	any[]	Коллекция зависимостей. Обязательна.
resources	any[] | null	Набор данных ресурсов для раскладки ресурсов и методов API ресурсов.
resourceAssignments	any[] | null	Набор данных назначений ресурсов.
baselines	any[] | null	Набор данных базовых линий.
config	Partial<GanttConfigOptions> | null	Сливается в gantt.config.
templates	AngularGanttTemplates | null	Сливается в gantt.templates; функции-шаблоны могут возвращать дескрипторы Angular-шаблонов.
plugins	Record<string, any> | null	Карта активации плагинов (например: critical_path, auto_scheduling).
calendars	Calendar[] | null	Определения рабочих календарей, синхронизируемые по id.
markers	Marker[] | null	Вертикальные маркеры временной шкалы, синхронизируемые по id.
locale	string | null	Имя локали, передаваемое в gantt.i18n.setLocale(...).
theme	string | null	Имя темы, передаваемое в gantt.setSkin(...) при доступности.
data	AngularGanttDataConfig | null	Коллекции/транспорт: колбэки load, save, batchSave.
events	AngularGanttEvents | null	Карта имен событий к обработчикам для событий Gantt.
customLightbox	CustomLightboxConfig | null	Заменяет встроенный lightbox на компонент Angular.
groupTasks	any	Конфигурация группировки, передаваемая в gantt.groupBy(...); используйте false для отключения.
filter	TaskFilter	Функция, используемая для фильтрации задач Gantt.
resourceFilter	ResourceFilter	Предикат для фильтрации строк в настройенном хранилище ресурсов.
htmlTemplatePolicy	HtmlTemplatePolicy	Контролирует, как значения строк, возвращаемые функциями-шаблона, рендерятся. "basic-sanitize" (по умолчанию) позволяет безопасно форматировать возвращаемый HTML: сохраняются безопасное форматирование, классы, ограниченные встроенные стили, data-* атрибуты и img, а скрипты, обработчики событий и опасные URL удаляются. "escape" рендерит строку как текст; "unsafe-html" рендерит исходную строку (поведение до v10); пользовательский санитайзер (mode: "sanitize" с функцией sanitize(html)) позволяет подключать библиотеки вроде DOMPurify. Для пост-template контроля оборачивайте отдельные функции шаблонов в экспортируемый помощник allowRawHTML(). Migration notes.

Выводы и доступ к экземпляру

(ready)

Обёртка эмитирует ready один раз после инициализации и начальной синхронизации.

Форма полезной нагрузки события:

{ instance: GanttStatic }

<dhx-gantt [tasks]="tasks" [links]="links" (ready)="onReady($event)"></dhx-gantt>

instance через @ViewChild

Используйте @ViewChild(DhxGanttComponent) когда нужен прямой императивный доступ.

@ViewChild(DhxGanttComponent) ganttCmp?: DhxGanttComponent;

showToday(): void {
  this.ganttCmp?.instance?.showDate(new Date());
}

Коллекции данных и синхронизация

Используйте эти входы, когда источником правды является состояние Angular или RxJS‑хранилище:

• tasks, links
• дополнительные продвинутые хранилища: resources, resourceAssignments, baselines

<dhx-gantt
  [tasks]="tasks"
  [links]="links"
  [resources]="resources"
  [resourceAssignments]="resourceAssignments"
  [baselines]="baselines">
</dhx-gantt>

Краткое описание поведения синхронизации:

• обновления задач/ссылок выполняются по diff-изменениям для обычных изменений,
• обёртка может перейти к сбросу/перепарсированию, когда diff небезопасен/неэффективен,
• хранилища ресурсов/назначений/базовых линий обновляются через хранилища данных Gantt.

Используйте Основы связывания данных и управления состоянием для рассмотрения компромиссов моделей.

Конфигурация, Шаблоны, Плагины, Тема, Локализация

Используйте эти входы для декларативной настройки диаграммы вместо императивных вызовов instance.

config = {
  scales: [
    { unit: 'year', step: 1, format: '%Y' },
    { unit: 'month', step: 1, format: '%F, %Y' },
    { unit: 'day', step: 1, format: '%d %M' },
  ],
  columns: [
    { name: 'text', tree: true, width: '*' },
    { name: 'start_date', align: 'center' },
    { name: 'duration', align: 'center' },
    { name: 'add', width: 44 },
  ],
};

templates = {
  task_text: (_start: Date, _end: Date, task: any) => `#${task.id}: ${task.text}`,
};

<dhx-gantt
  [config]="config"
  [templates]="templates"
  [plugins]="{ auto_scheduling: true }"
  [locale]="locale"
  [theme]="theme">
</dhx-gantt>

Поведение динамического обновления

• locale, theme, config, templates и plugins можно обновлять после инициализации.
• Если форма config.layout изменится (это не просто вложенные значения), обёртка может заново инициализировать макет Gantt.
• Сохраняйте стабильность идентичности объектов, когда изменений нет, чтобы избежать ненужного повторного применения.

Ввод events

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

import type { AngularGanttEvents } from '@dhtmlx/trial-angular-gantt';

events: AngularGanttEvents = {
  onTaskCreated: (task) => {
    console.log('создано', task);
    return true;
  },
  onAfterTaskUpdate: (id, task) => {
    console.log('обновлено', id, task);
  },
  onBeforeLightbox: (taskId) => {
    console.log('перед lightbox', taskId);
    return true;
  },
};

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

Передача данных: load, save, batchSave

Форма входа data:

interface AngularGanttDataConfig {
  load?: string | ((gantt: any) => any | Promise<any>);
  save?: string | ((entity: string, action: string, data: any, id: string | number) => any);
  batchSave?: (changes: BatchChanges) => void;
}

load

• URL-строка -> обёртка вызывает gantt.load(url).
• Функция -> обёртка вызывает её с инстансом gantt и парсит возвращаемый синхронный/асинхронный набор данных.

dataConfig = {
  load: async (gantt) => {
    const response = await fetch('/api/gantt');
    const dataset = await response.json();
    return dataset;
  },
};

load предназначен для первоначальной загрузки. Обёртка применяет его один раз за жизненный цикл компонента.

save

Колбэк на изменение или транспорт (подключён через gantt.createDataProcessor(save)).

dataConfig = {
  save: (entity, action, data, id) => {
    console.log(entity, action, data, id);
  },
};

batchSave

Группированный колбэк для изменений большого объёма (автоматическое планирование, массовые правки, цепные обновления).

import type { BatchChanges } from '@dhtmlx/trial-angular-gantt';

dataConfig = {
  batchSave: (changes: BatchChanges) => {
    if (changes.tasks?.length) {
      console.log('task changes', changes.tasks);
    }
  },
};

Краткое описание поведения очереди:

• краткосрочная пакетная обработка (небольшое окно дребезга),
• объединение create + update в одну запись create с последней нагрузкой,
• удаление пар create + delete,
• удаление внутреннего !nativeeditor_status из полезной нагрузки.

Ввод customLightbox

Используйте customLightbox для замены встроенного lightbox Gantt на компонент Angular.

import type { CustomLightboxConfig } from '@dhtmlx/trial-angular-gantt';

customLightbox: CustomLightboxConfig = {
  component: TaskEditorComponent,
  onSave: ({ id, task }) => console.log('saved', id, task),
  onCancel: () => console.log('cancel'),
  onDelete: (id) => console.log('delete', id),
};

Экземпляр пользовательского компонента получает от обёртки следующие входы:

• data ({ id, task })
• onSave(updatedTask)
• onCancel()
• onDelete()

Шаблоны и Angular-компоненты

Функции-шаблонов могут возвращать обычные строки/HTML (нативное поведение Gantt) или дескрипторы Angular-компонентов, создаваемые через templateComponent(...).

import { templateComponent } from '@dhtmlx/trial-angular-gantt';

templates = {
  task_text: (_start: Date, _end: Date, task: any) =>
    templateComponent(TaskBadgeTemplateComponent, { task }),
};

config = {
  columns: [
    {
      name: 'status',
      label: templateComponent(HeaderFilterComponent, {
        currentFilter: this.currentFilter,
      }),
      template: (task: any) => templateComponent(StatusCellComponent, { task }),
    },
  ],
};

Используйте это для заголовков/ячейек грид, текста задачи, шкал и других поверхностей, поддерживающих шаблоны в Gantt.

Группировка, ресурсы, фильтры, календари, маркеры

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

<dhx-gantt
  [tasks]="tasks"
  [links]="links"
  [resources]="resources"
  [resourceAssignments]="resourceAssignments"
  [groupTasks]="groupConfig"
  [filter]="taskFilter"
  [resourceFilter]="resourceFilter"
  [calendars]="calendars"
  [markers]="markers"
  [config]="config">
</dhx-gantt>

Заметки:

• filter принимает функцию (task: any) => boolean или null. При установке отображаются только задачи, для которых функция возвращает true. Установите null, чтобы показать все задачи.
• resourceFilter работает против datastore ресурсов, сконфигурированного через config.resource_store.
• groupTasks можно включать/выключать с помощью false или объекта конфигурации группировки.
• calendars и markers синхронизируются по id, поэтому держите IDs стабильными.

Фильтрация задач

Используйте вход filter, чтобы управлять видимостью задач. Обёртка под капотом добавляет слушатель onBeforeTaskDisplay и повторно перерисовывает при изменении ссылки на фильтр.

import type { TaskFilter } from '@dhtmlx/trial-angular-gantt';

taskFilter: TaskFilter = null;

showCompleted(): void {
  this.taskFilter = (task) => !!task.completed;
}

resetFilter(): void {
  this.taskFilter = null;
}

<dhx-gantt
  [tasks]="tasks"
  [links]="links"
  [filter]="taskFilter">
</dhx-gantt>

Держите стабильную ссылку, когда логика фильтра не изменилась — обёртка сравнивает по идентичности и повторно рендерит только при изменении ссылки.

Экспортируемые типы и помощники

Полезные публичные экспортируемые элементы из пакета-обёртки:

• DhxGanttComponent
• DhxGanttModule
• templateComponent(...)
• isAngularTemplateRenderable(...)
• AngularGanttDataConfig
• AngularGanttEvents
• BatchChanges, DataCallbackChange
• SerializedTask, SerializedLink
• TaskFilter
• ResourceFilter
• GanttStatic
• CustomLightboxConfig
• Calendar, Marker

SerializedTask vs Task

Обёртка экспортирует два типа, связанных с задачами:

• SerializedTask — использовать для данных, которыми вы владеете: хранение состояния, ответы API, исходные литералы, полезные нагрузки batchSave. Даты могут быть объектами Date или строками, совпадающими с date_format.
• Task (перепроецирован из @dhx/gantt) — для данных, которыми владеет Gantt: внутри обработчиков событий, после того как Gantt распарсит. Даты — объекты Date. Имеет системные свойства с префиксом $. SerializedLink — аналогичная сторона ссылок по отношению к SerializedTask.

Продолжайте с

• Angular Gantt Overview
• Основы связывания данных и управления состоянием
• Учебник по управлению состоянием с RxJS
• dhtmlxGantt с Angular (низкоуровневая интеграция)