Диаграмма процесса

В отличие от контрола типа Индикатор выполнения, отображающего прогресс выполнения процесса (например, состояние загрузки файла), контрол типа Диаграмма процесса позволяет получить наглядную информацию по состоянию выполнения некоторого процесса в разрезе нескольких категорий. Например, состояние выполнения плана по категориям "Выполнено", "Не выполнено", "В работе". Для наглядности категории окрашены в разные цвета.

Документация API Спецификация Axure

Количество секторов на диаграмме

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

<!-- WML -->
<Controls.progress:StateIndicator
   data="{{_data}}"
   scale="{{5}}"/>

Отображение нескольких категорий на одной диаграмме

В опции data задается массив категорий диаграммы. Используется, если для диаграммы нужно установить несколько категорий. Количество элементов массива задает количество категорий диаграммы. Для каждой категории можно установить свойства:

• value — размер в процентах.
• className — имя css-класса, который будет применен к секторам данной категории; если className не указывать, будут применяться классы по умолчанию.
• title — текстовое примечание к категории.

<!-- WML -->
<Controls.progress:StateIndicator
   data="{{_data}}"/>

// TypeScript
protected _data: object;

protected _beforeMount(): void {
   this._data = [
      {value: 10, className: '', title: 'Положительно'},
      {value: 30, className: '', title: 'В работе'},
      {value: 50, className: '', title: 'Отрицательно'}
   ];
}

Размер секторов диаграммы

В опции sectorSize задается визуальный размер секторов диаграммы. По умолчанию "m".

<!-- WML -->
<Controls.progress:StateIndicator
   data="{{_data}}"
   scale="{{10}}"
   sectorSize="s"/>

События диаграммы

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

<!-- WML -->
<div>
   <Controls.popup:Infobox name="IBOpener" />
   <Controls.progress:StateIndicator
      data="{{_data}}"
      on:itemEnter="_mouseEnterHandler()" />
</div>

// TypeScript
protected _mouseEnterHandler(e?: any, _item?: HTMLElement): void {
   const config = {
      target: _item,
      targetSide: 'top',
      alignment: 'start',
      showDelay: 1000,
      template: popupTemplate,
      templateOptions: {data: this._dataWithUser}
   };
   this._children.IBOpener.open(config);
}