Настройка отображения мини-виджета счетчика для дашборда

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

Установка признака "счетчик" для виджета

Для установки признака "счетчик", в поле meta укажите значение counter для поля типа виджета - type.

// TypeScript
{
   ...
   "meta": {
      "type": "counter"
   },
   ...
}

Настройка заголовка

Заголовок располагается в верхней части виджета, отображается средствами платформы. Текст заголовка указывается в поле info.title.

// TypeScript
{
   ...
   "info": {
      "title": "Заголовок"
   },
   ...
}

Для настройки заголовка в поле meta задайте getTitleCallback: string - путь до функции, которая вернет заголовок виджета. Принимает на вход загруженные данные виджета. Возвращает заголовок виджета типа string. Применяется в случае, когда заголовок виджета зависит от его настроек.

// TypeScript
{
   ...
   "meta": {
      "getTitleCallback": "HowEasy/callbacks/getTitleCallback"
   },
   ...
}

Настройка обработки клика по виджету

Для настройки обработчика клика по виджету счетчика в поле meta задайте clickCallback: string - путь до функции, которая будет вызвана при клике на виджет.

// TypeScript
{
    ...
    "meta": {
      "clickCallback": "CounterWidget/callbacks/clickCallback"
    },
    ...
}

Принимает на вход:

• options - опции виджета счетчика,
• opener - открывающий контрол.

Настройка иконки

Иконка виджета располагается в верхней части виджета и отображается средствами платформы. Иконка указывается в поле info.icon.

Базовые свойства виджета

Виджет счетчика имеет одно базовое свойство color. Подробнее про свойство читайте в статье.

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

Загрузка данных для счетчика

Подробнее о загрузке данных для виджета читайте в статье "Загрузка данных для виджета дашборда"

Для того, чтобы загруженные вами данные использовались в качестве счетчика, настройте загрузчик с идентификатором counter и типом custom. Значение должно соответствовать интерфейсу ICounterConfig из библиотеки Dashboard/interface.

interface ICounterConfig {
    value: string;
    subValue?: string;
    percent?: number;
    valueTitle?: string;
    percentTitle?: string;
}

• value - значение счетчика.
• subValue - дополнительный текст после значения счетчика.
• percent - процент.
• valueTitle - текст, отображающийся при наведении на значение счетчика.
• percentTitle - текст, отображающийся при наведении на процент счетчика.

// TypeScript
import {SbisService} from 'Types/source';
import {ICounterConfig} from 'Dashboard/interface';

function sourceConfigGetter(): object {
    const config = {
        type: 'custom',
        loadDataMethod(): Promise<ICounterConfig> {
            return Promise.resolve({
                value: '1 999',
                subValue: '.00',
                percent: 120,
                valueTitle: '1 999';
                percentTitle: '120%';
            });
        }
    };
    return {
        counter: config
    };
}
export default sourceConfigGetter;