Функциональные возможности компонента Gant

Свойство GraphSettings компонента Gant содержит набор вложенных свойств, с помощью которых можно управлять функциональными возможностями компонента, наиболее востребованными у конечных пользователей разрабатываемого приложения. Например, это свойство позволяет пользователю обрабатывать данные в области компонента Gant следующим образом:

• группировать;
• сортировать;
• фильтровать;
• редактировать;
• отображать статистику.

Свойство Pallete компонента Gant содержит набор вложенных свойств, с помощью которых можно управлять отображением индикаторов хода выполнения работ на диаграмме Ганта в области компонента.

Группировка данных

Данные в таблице можно группировать по следующим столбцам:

• идентификатор структурной декомпозиции работ (Work Breakdown Structure, WBS), wbsId;
• идентификатор родительской работы, parentId;
• wbsId и parentId одновременно;
• произвольный набор столбцов.

Для отображения кнопки группировки в интерфейсе приложения используется свойство groupingVisible компонента Gant, как показано в следующем примере:

 'groupingVisible': true,

Если свойства компонента Gant, относящиеся к группировке данных, не указаны, компонент группирует данные по умолчанию со следующими параметрами:

 currentGrouping:  {
      WBS: false,     // идентификатор структурной декомпозиции работ
      parentId: true, // идентификатор родительской работы
      columns: [],    // произвольный набор столбцов
    }, 

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

groupingDisplayColumnId: 'c01', 
 

Следующий пример демонстрирует использование свойства groupingColumnValue для форматирования значений в группирующей строке при группировке по произвольному набору столбцов:

groupingColumnValue: (groupingColumnName, groupValue, options) =>
        `${groupingColumnName}: ${options.formattedValue}`,

Сортировка данных

Данные в таблице можно сортировать по типу внутри родительской строки.

Для отображения значка сортировки в столбце таблицы в интерфейсе приложения используется свойство sortEnabled компонента Gant, как показано в следующем примере:

 'sortEnabled': true,

Для настройки сортировки используется свойство sortOptions компонента Gant, как показано в следующем примере:

sortOptions = {
    columnId: 'c2',           // идентификатор столбца
    columnType: 'string',     // тип данных в столбце
    direction: 1,             // направление сортировки (1 — по возрастанию, -1 — по убыванию)
  },

Даже если значок сортировки в столбце таблицы не отображается, данные в таблице сортируются по умолчанию согласно параметрам, указанным в sortOptions. Если свойство sortOptions не передано, данные не сортируются.

Фильтрация данных

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

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

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

Компонент Gant поддерживает следующие виды фильтрации данных:

• Серверная. В коде бэкенд-сервиса разрабатываемого приложения должен быть реализован метод GetFilterState. Кроме того, для работы фильтров необходимо передать компоненту Gant свойство filterOperations:

  filterOperations: {}

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

  Тип данных	Тип операции
  number	Между; > (больше); < (меньше); = (равно); Пустые значения (флажок)
  percentage	Между; > (больше); < (меньше); = (равно); Пустые значения (флажок)
  string	Содержит; Равно (полностью совпадает); Начинается с; Заканчивается на; Пустые значения (флажок)
  date	Между; > (больше); < (меньше); = (равно); Пустые значения (флажок)
  boolean	Да; Нет; Пустые значения (флажок)
  indicator	Множественный выбор из списка значений, которые может принимать индикатор хода выполнения работ; Пустые значения (флажок)
  enumeration	Выбор значения из ограниченного набора; Пустые значения (флажок)

• Клиентская. Клиентские фильтры применяются к данным после их фильтрации на сервере. Для управления фильтрацией на клиенте используются следующие свойства:

  clientFilters: [
       ({ match, node, primarySelectedRows }) => {
         const primaryId = node.structure[StructureColumns.primaryId];
         const result = match && primarySelectedRows.has(primaryId);
         return result;
       },
     ],

Редактирование данных

Данные в таблице и календарной сетке можно редактировать по аналогии с редактированием данных в таблице Excel. Редактирование данных возможно только для части ячеек. Запрещенные для редактирования ячейки отображаются в серой рамке.

Компонент Gant не поддерживает добавление и удаление строк. Добавление и удаление строк реализуется на стороне разрабатываемого приложения. Компонент Gant получает уведомление об изменении данных в базе данных и обновляет отображаемые данные.

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

Каждая работа на диаграмме Ганта характеризуется версией, значение которой 1 при создании работы. При каждом редактировании работы версия инкрементируется на 1. Если клиентский сервис запрашивает работу, которая удалена, бэкенд-сервис возвращает в качестве идентификатора этой работы значение -1.

Для включения возможности редактирования используются следующие свойства компонента Gant:

'clipboard': true,
'editable:': true,         // редактирование в таблице
'calendarEditable': true,  // редактирование в календарной сетке

Для реализации функции редактирования в свойстве endpointData, вложенном в свойство GraphSettings, должны быть описаны следующие методы:

• editTransaction: описывает способ отправки данных бэкенд-сервису об изменении данных;
• editTransactionUpdate: в качестве параметра принимает метод, который необходимо вызвать в editTransaction после получения ответа от бэкенд-сервиса.

Следующий пример демонстрирует код этих методов для редактирования данных:

editTransaction: ({ values, requestId }) => {
          console.log('Транзакция отправлена с данными' + { values, requestId });
        },
        onEditTransactionUpdate: callback => {
          console.log('После получения ответа будет выполнен колбек' + callback);
        },

Поскольку редактировать данные могут несколько пользователей одновременно, то в компоненте Gant предусмотрен метод subscribe для подписки на уведомления от бэкенд-сервиса. Уведомление содержит идентификатор работы и версию работы. При получении такого уведомления компонент Gant запрашивает структурные столбцы по изменившимся строкам, а также признак того, удовлетворяют ли эти структурные столбцы условиям текущего фильтра. На основании полученных данных компонент Gant меняет положение структурных столбцов в дереве и, если эти столбцы попадают на экран при текущем положении полосы прокрутки, запрашивает для них столбцы, которые отображаются на экране. Этот алгоритм аналогичен алгоритму загрузки данных в компонент Gant.

Свойство cellActions, вложенное в свойства headers и repeatedCalendarHeaders, используется для описания разрешения на редактирование данных в ячейке данных в таблице и данных в календарной сетке соответственно. Следующий пример демонстрирует использование этого свойства:

cellActions: {
      edit: {
        mask: 1,
      },
    },

Компонент Gant имеет столбец permissions, в котором для каждой строки указано разрешение на редактирование. Правило, определяющее возможность редактирования данных в каждой ячейке, следующее:

(item.permissions & column.cellActions.edit.mask) ===  column.cellActions.edit.mask

Пример использования четырех вариантов значений маски cellActions.edit.mask и двух значений разрешения item.permissions и результат побитового сложения этих значений показан в следующей таблице.

Значение маски десятичное / двоичное		1 / 0001	2 / 0010	4 / 0100	8 / 1000
значение item.permissions	15 / 1111	true	true	true	true
значение item.permissions	0 / 0000	false	false	false	false

Свойство permissionMessages используется для отображения причины запрета редактирования данных в ячейке. Следующий пример иллюстрирует использование этого свойства:

permissionMessages: {
      0: 'Редактирование запрещено',
}

Отображение статистики

Под областью таблицы по умолчанию отображаются следующие данные статистики:

• Выбрано работ: количество отмеченных флажком в таблице строк;
• Всего работ: количество строк в таблице;
• Отфильтровано: количество строк в таблице, к которым применен фильтр.

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

Свойство customStatistics позволяет настроить отображение дополнительных статистических данных в разрабатываемом приложении. С помощью этого свойства можно настроить название статистического показателя и алгоритм расчета.

Отображение индикаторов хода выполнения работ на диаграмме Ганта

Отображение в области компонента Gant индикаторов хода выполнения работ возможно при выполнении следующих условий:

• в списке столбцов GraphSettings.headers должны быть столбцы типа indicator,
• метод getData должен возвращать данные для этих столбцов.

Для отображения индикаторов хода выполнения работ в таблице и на диаграмме Ганта используются свойства colors, indicators, indicatorsEnum, вложенные в свойство Palette. Следующий пример иллюстрирует использование этих свойств. В примере перечислены все доступные формы и цвета индикаторов хода выполнения работ.

Pallete={{
            colors: {
  black: {
    title: 'Черный',
    hexCode: '#000000',
  },
  blue: {
    title: 'Синий',
    hexCode: '#5C90F5',
  },
  red: {
    title: 'Красный',
    hexCode: '#F55C5C',
  },
  green: {
    title: 'Зеленый',
    hexCode: '#417971',
  },
  yellow: {
    title: 'Желтый',
    hexCode: '#DAB920',
  },
},
            indicators: {
c1: {
      title: 'title',
      shapeId: ‘circle’,
      rules: {
        ir001: {
          title: 'test',
          colorId: ’yellow’,
          order: 0,
        },
        ir002: {
          title: 'test',
          colorId: ’green’,
          order: 0,
        },
        ir003: {
          title: 'test',
          colorId: ’red’,
          order: 0,
        },
      },
    },
c2: {
      title: 'title',
      shapeId: ‘triangle’,
      rules: {
        ir001: {
          title: 'test',
          colorId: ’yellow’,
          order: 0,
        },
        ir002: {
          title: 'test',
          colorId: ’green’,
          order: 0,
        },
        ir003: {
          title: 'test',
          colorId: ’red’,
          order: 0,
        },
      },
    },
},
            indicatorsEnum: {
  circle: {
    contentSvg: `<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 11C10 13.7614 7.76142 16 5 16C2.23858 16 0 13.7614 0 11L0 0L10 0L10 11Z" />
    </svg>`,
  },
  triangle: {
    contentSvg: `<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.85267 0.677861C3.99059 0.272548 4.37123 0 4.79936 0H9.75C10.1944 0 10.5856 0.293333 10.71 
    0.72L13.6267 10.72C13.8133 11.36 13.3333 12 12.6667 12H1.39659C0.711404 12 0.22917 11.3265 0.449894 
    10.6779L3.85267 0.677861Z" />
    </svg>`,
  },
},
}}