Настройки виджета

В этой статье

Настройки виджета

Пример добавления конфигурации настроек данных

Настройка виджета производится через панель настроек. Разработчики могут конфигурировать эту панель, определяя набор полей различных типов для удобной настройки параметров виджета.

Панель конфигурируется методами createPanelDescription (метод возвращает конфигурацию панели настроек виджета) и fillSettings (создаёт поля в объекте настроек и заполняет их значениями по умолчанию) класса, реализующего интерфейс IDefinition.

public createPanelDescription(context: IWidgetsContext, settings: WidgetSettings): IPanelDescription<WidgetSettings> {
  return {
    dataRecords: [],
    displayRecords: [],
    groupSetDescriptions: {}
  }
}

где:

dataRecords — содержит конфигурацию настроек данных виджета, которая доступна на вкладке настройки работы с данными

groupSetDescriptions — позволяет конфигурировать настройки мер и разрезов

Пример добавления конфигурации настроек данных

В качестве примера сконфигурируем настройку добавления заголовка. Для этого объявим класс Definition и реализуем интерфейс IDefinition.

import {
  EControlType,
  type IDefinition,
  type IGroupSettings,
  type IPanelDescription,
  type IWidgetsContext,
} from "@infomaximum/widget-sdk";

export interface WidgetSettings extends IBaseWidgetSettings {
  header: string;
}

export class Definition implements IDefinition<WidgetSettings, IGroupSettings> {
  public createPanelDescription(
    context: IWidgetsContext,
    settings: WidgetSettings
  ): IPanelDescription<WidgetSettings> {
    return {
      dataRecords: [
        {
          key: "header",
          accessor: "header",
          type: EControlType.input,
          props: { isBordered: false, placeholder: "Введите заголовок" },
        },
        { type: "divider" },
      ],
    };
  }

  public fillSettings(
    settings: Partial<WidgetSettings>,
    context: IWidgetsContext
  ) {
    settings.header ??= "";
  }
}

Панель настроек содержит поле для ввода заголовка (тип поля input) и разделитель (тип поля divider). Разделитель позволяет визуально отделить поля друг от друга.

Поля конфигурации:

key — уникальный идентификатор поля
accessor — ключ в объекте настроек виджета, по которому можно получать значения данного поля
type — тип контрола (EControlType.input). В данном случае поле для ввода текста с типом input
props — дополнительные свойства, такие как isBordered (граница поля) и placeholder
title — заголовок поля
description — рекурсивное определение конфигурации
shouldDisplay — функция-предикат, которая определяет, должен ли компонент отображаться на основе определенных условий или значений (например, учитывая значение другой настройки)

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

В результате получим поле, в котором можно указать заголовок для виджета.

Значение этого поля можно получить из объекта settings по ключу, который является значением поля accessor.

Для возможности выбора разрезов и мер конфигурацию необходимо объявлять в секции groupSetDescriptions. Добавим возможность выбора разрезов и мер:

import {
  EControlType,
  EWidgetIndicatorType,
  type IBaseWidgetSettings,
  type IDefinition,
  type IGroupSettings,
  type IPanelDescription,
  type IWidgetDimension,
  type IWidgetDimensionHierarchy,
  type IWidgetMeasure,
  type IWidgetsContext,
} from "@infomaximum/widget-sdk";

export interface WidgetSettings extends IBaseWidgetSettings {
  header: string;
  dimensions: (IWidgetDimension | IWidgetDimensionHierarchy)[];
  measures: IWidgetMeasure[];
}

export class Definition implements IDefinition<WidgetSettings, IGroupSettings> {
  public createPanelDescription(
    context: IWidgetsContext,
    settings: WidgetSettings
  ): IPanelDescription<WidgetSettings> {
    return {
      dataRecords: [
        {
          key: "header",
          accessor: "header",
          type: EControlType.input,
          props: { isBordered: false, placeholder: "Введите заголовок" },
        },
        { type: "divider" },
      ],

      groupSetDescriptions: {
        dimensions: {
          accessor: "dimensions",
          title: "Разрезы",
          maxCount: Infinity,
          addButtons: [
            {
              title: "Добавить разрез",
              indicatorType: EWidgetIndicatorType.DIMENSION,
            },
          ],
        },
        measures: {
          accessor: "measures",
          title: "Меры",
          maxCount: Infinity,
          addButtons: [
            {
              title: "Добавить меру",
              indicatorType: EWidgetIndicatorType.MEASURE,
            },
          ],
        },
      },
    };
  }

  public fillSettings(
    settings: Partial<WidgetSettings>,
    context: IWidgetsContext
  ) {
    settings.header ??= "";
    settings.dimensions ??= [];
    settings.measures ??= [];
  }
}

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

Была ли статья полезна?

Да

Нет

Определение виджета

Компоненты настроек

.css-wsrjzs{display:inline;margin-right:12px;}@media screen and (max-width: 691px){.css-wsrjzs{display:inline-block;margin-right:0;}}Настройки виджета

Пример добавления конфигурации настроек данных

Настройки виджета