Разработка виджетов

3 мая 2024 г.Около 11 минwidget

Требования к среде разработки

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

скачать проект для разработки с github;
использовать IDE с поддержкой JavaScript языка и Angular проектов;
иметь доступ к магазину виджетов;
иметь права устанавливать виджеты из магазина;
иметь права настройки виджетов в дашбордах.
Ссылки:

пример кода виджета;

Что такое виджет с точки зрения разработчика

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

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

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

Скопировать среду разработки
Установить зависимости ''npm install''

Разработка виджета

Для создания нового виджета widget-example необходимо в каталоге web-widget-container\src\app\widgets создать папку widget-example.
В созданную папку необходимо добавить следующие файлы: widget.example.ts - код виджета; widget.example.html - шаблон виджета; widget.example.scss - стили виджета.
Для того, чтобы виджет отображался в среде разработки необходимо добавить импорт виджета в файле src/app/widget.include.ts

import WidgetExample from './widgets/widget-example/widget.example';
export const widgetLibrary = new WidgetLibrary([
  {name: 'WidgetExample', package: WidgetExample},

Написать содержание виджета в соответствии с ........ по написанию виджета.
Выполнить команду ''npm run start''. Загрузить в браузере http://localhost:4210/?widget=WidgetExample, где вы можете проверить отображение виджета, исправить возможные ошибки. В среде разработки необходимо <настроить внешний вид> отображения нужных параметров.

Сборка и загрузка в магазин

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

Сборка выполняется командой ''sh build.sh example''. После ее успешного выполнения в папке dist будет размещен код виджета, а в папке build zip архив, готовый для загрузки в магазин.
Перейдите на страницу магазина и создайте виджет, для чего на странице списка виджетов нажмите кнопку Add widget. В диалоге добавления виджета заполните поля названия и описания виджета, так чтобы было понятно его назначение и содержание, и нажмите кнопку Add widget в диалоговом окне.

Совет

Если обновляется версия уже существующего виджета, то шаг 2 следует пропустить.

Добавьте новый релиз виджета. Для этого нужно обновить страницу списка виджетов, найти добавленный виджет и нажать кнопку Releases. На открывшейся странице со списком версий (релизов) виджета нажать кнопку New release.

В открывшемся диалоговом окне укажите файл, полученный на первом шаге инструкции данного раздела и нажмите кнопку Upload.

После загрузки архива вы перейдете на страницу с примером работы виджета. В этот момент релиз еще не является опубликованным и недоступен у других пользователей. Для публикации виджета необходимо указать какие изменения сделаны и нажать на кнопку Public.

Теперь виджет доступен для установки в приложении.

Проверка работы виджета в приложении

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

Войдите в личный кабинет платформы INSPARK и перейдите в раздел WIDGET STORE/ All widgets. В списке виджетов найдите размещенный ввиджет и нажмите кнопку Get widget (Update to N, если было обновление ранее опубликованного виджета). После этого виджет можно размещать на панель виджетов (дашборд).
Перейдите в раздел Dashboard. На странице отобразится список доступных дашбордов. Для проверки работы виджета его необходимо разместить на новом или существующем дашборде. Чтобы создать дашборд, необходимо в правом верхнем углу страницы нажать кнопку + Dashboard. На странице создания дашборда введите название дашборда и рубрику каталога, к которому он будет привязан, после чего нажмите кнопку Add dashboard.
Выберите созданный или уже имеющийся дашборд и на открывшейся странице нажмите кнопку + Widget. На выбора виджета отыщите нужный и на панели справа увидите его изображение.

Нажмите кнопку Next и на следующей странице настройте параметры отображения виджета на дашборде: укажите заголовок виджета; флажок "FLOATING HEADER" указывает, что заголовок будет скрыт, если на него не будет наведен указатель; а также отображаемые в виджете параметры.

При указании параметра сначала выбирается объект из подрубрик рубрики дашборда, а затем - параметр для этого объекта. Также для параметра можно указать заголовок.

После выполнения перечисленных действий проверьте работу созданного виджета в приложении платформы INSPARK.

Ограничения и рекомендации при создании виджетов

При разработке виджетов для INSPARK платформы следует принимать во внимание следующие особенности.

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

Рекомендации по разметке компонента
При размещении элементов html виджета рекомендуется применять классы разметки из _mixins.scss, o_grid, c_grid, c_table и другие.
Правила локализации виджета
Для того чтобы добавить поддержку локали в виджет, необходимо обозначить текст, который будет переводиться.

В HTML шаблоне следует использовать pipe {{ 'text' | translate }}
В TS файле функцию import {_} from '@inspark/widget-common/interface'; _('text')
Для подготовки файлов переводов необходимо запустить команду "sh locale.sh example". В папке с виджетом widget-example появится каталог i18n с двумя файлами ru.json и en.json.

В экземпляр WidgetPackage необходимо добавить строку, включающую файлы переводоа виджетов ` locales: [{code: 'en', file: require('./i18n/en.json')}, {code: 'ru', file: require('./i18n/ru.json')}] '

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

Далее, в коде виджета в классе компонента описать ресурс:

media = {
    img: require('./media/energy.jpg')
  };

Затем описанный ресурс можно использовать в шаблоне:

<img width="100px" height="100px" [src]="media.img"  alt="Электроэнергия">

Классы и структуры

При написания виджетов важно определить природу поведения выводимых данных и их представление. Для этого используются две основные структуры данных enum PARAM_TYPE (тип параметра), ITEM_TYPE (тип элемента):

Тип параметра PARAM_TYPE

В интерфейсах тип параметра представлен в виде 'enum PARAM_TYPE'

export enum PARAM_TYPE {
  'signal' = 1,                // сигнальный параметр (например 0/1, true/false)
  'value' = 2,                 // мгновенное значение параметра
  'increment' = 3,              // параметр, значение которого идет нарастающим итогом
  
  // Типы, необрабатываемые сервисом
  'custom_string' = 11,  // Любой текст
  'custom_archer' = 12,  // Тип https://archer.graphics/ Дает возможность загрузить SVG и JSON 
  'custom_external' = 13, // Загрузка параметров через внешний файл
  'custom_file' = 14, // Загрузка любых файлов
  'custom_json' = 15, // Текст, который будет распарсен как JSON
}

Тип	Применение	Описание
signal	Датчики включения, сигнализация	Сигнальный тип параметра (включен, выключен) принимает значение 0 или 1
value	Датчики значений	Мгновенное значение параметра (температура, влажность, вольтаж)
increment	Любые счетчики	Параметр, значение которого идет нарастающим итогом (потребление воды, энергии, счетчик посетителей)

Тип элемента ITEM_TYPE

Для описания типа элемента следует использовать ''enum ITEM_TYPE''.

export enum ITEM_TYPE {
  'single' = 1,                // Одно значение
  'series' = 2,                // Ряд данных (например график)
  'events' = 3,                // Лента событий (структура с описанием события)
  'sysinfo' = 4,               // Системная информация о состоянии контроллеров    
  'interval' = 5,              // Значение на заданном интервале (min, max, avg и т.д.)
  'table' = 6                  // Таблица значений параметров
} ITEM_TYPE

В зависимости от типа элемента в виджет, в переменную values, будет передан разный набор данных, которые описываются как интерфейсы (см. таблицу).

Тип элемента	Описание	Интерфейс
ITEM_TYPE.single	Единичные значения параметров	ItemSingle
ITEM_TYPE.series	Ряды данных	ItemSeries
ITEM_TYPE.events	Лента событий	EventValues
ITEM_TYPE.sysinfo	Системная информация	SystemInfo
ITEM_TYPE.interval	Значения параметров на заданном интервале	ItemInterval
ITEM_TYPE.table	Таблица значений параметров	ItemTable
ITEM_TYPE.custom	Поле не требующее обработки сервера	ItemCustom

Как мы видим в названиях есть различия между EventValues и другими типами. Это обусловлено тем, что events отличается по формату и способу получения данных от сервиса.

Интерфейсы ItemSingle, ItemSeries, ItemInterval, ItemCustom и ItemTable наследуются от одного интерфейса IWidgetParam и содержат в себе следующие поля:

Поле	Тип	Задается разработчиком	Задается в конфигураторе	Описание
id	number	-	-	Идентификатор параметра в сервисе
device	IWidgetDeviceParam	-	+	Информация об объекте, контроллере, параметре, зоне и состоянии параметра
widgetId	number	-	+	Идентификатор виджета
refName	string	+	-	Уникальный идентификатор параметра в пределах виджета
itemType	ITEM_TYPE	+	-	Тип элемента
title	string	+	-	Заголовок(назначение элемента)
config	ParamConfig	-	+	Настройки параметра
viewConfig	IWidgetParamConfig	-	+	Настройки отображения
borders	Border[]	-	-	Границы значений
dashboardLink	`{ dashname?: string, id: number }`	-	+	Ссылка на дашборд
isEditing	boolean	-	-	Поле редактируется
canEditable	boolean	-	-	Значение можно изменить вручную
icons	`{falsevalue: string; none: string; success: string; warning: string; error: string; }`	-	-	Сет иконок для параметра

ITEM_TYPE описание интерфейсов

Кроме общих полей, представленных выше, каждый интерфейс, в зависимости от типа элемента, содержит свои собственные данные. Ниже представлено их описание.

1. ITEM_TYPE.single

Единичные значения параметров

export interface ItemSingle extends IWidgetParam {
  value: any;
  data: SingleValue;
}

В поле data содержатся следующие данные:
Описание типа SingleValue

Поле	Тип	Описание
locked	boolean
manually	boolean
date	number	Время последнего изменения значения
value	number	Значение параметра
state	ParamState	Состояние значения

Для быстро доступа к значению параметра в виджете в поле value копируется значение из data.value

2. ITEM_TYPE.interval

Значения параметров на заданном интервале
Сам интерфейс выглядит так

export interface ItemInterval extends IWidgetParam {
  value: any;
  data: IntervalValue;
}

Описание типа IntervalValue

Поле	Тип	Описание
percent	number	Значение в процентах для relative и increment
min	number	Минимальное значение на интервале absolute
max	number	Максимальное значение на интервале absolute
date	number	Время последнего изменения значения
value	number	Значение параметра
switchCount	number	Количество переключений за выбранный период
state	ParamState	Состояние значения
beginInterval	number	Дата начала интервала
endInterval	number	Дата окончания интервала

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

Тип	Тип параметра	Описание
absolute	value, increment	Вернет среднее значение на интервале
increment	increment	Вернет сумму всех значений на интервале
signal	signal	Вернет количество переключений

3. ITEM_TYPE.series

Ряды данных

export interface ItemSeries extends IWidgetParam {
  value: any;
  data: SeriesValue;
}

Описание типа SeriesValue

В зависимости от типа графика тип SeriesValue может быть SeriesCandleValue или SeriesLineValue.

export type SeriesValue = Array<SeriesCandleValue | SeriesLineValue>;

Формат данных:

export interface SeriesCandleValue {
  close: number;
  high: number;
  low: number;
  open: number;
  timestmp: number;
}

// Все остальные графики
export interface SeriesLineValue {
  value: number;
  timestmp: number;
}

4. ITEM_TYPE.events

Лента событий
Лента событий это особый тип данных, так как в отличии от остальных типов не использует конкретные параметры на конкретных объектах. Значение содержит только два поля config и data

Поле	Тип	Описание
config	ParamConfigEvents	Настройки, заданные при конфигурировании виджета
data	rowList: Array < EventValue >	Массив данных

Сам интерфейс выглядит так

export interface EventValues {
  data: {
    rowList: Array<EventValue>;
  };
  config: ParamConfigEvents;
}

Ниже в таблице описаны значения для EventValue

Поле	Тип	Описание
shortname	string	Тип возвращаемых событий
serialnumber	string	Список и относительное расположение выдаваемых атрибутов
eventid	number	Список и относительное расположение заголовков выдаваемых атрибутов
name	string	Максимальное количество выдаваемых строк в ленте
timestmp	number	Идентификаторы объектов
msg	string	Идентификаторы объектов

export interface EventValue {
  shortname: string;
  serialnumber: string;
  eventid: number;
  name: string;
  timestmp: number;
  msg: string;
}

Настройки ленты событий ParamConfigEvents

Поле	Тип	Описание
lineType	number	Тип возвращаемых событий
attrList	string[]	Список и относительное расположение выдаваемых атрибутов
titleList	string[]	Список и относительное расположение заголовков выдаваемых атрибутов
size	number	Максимальное количество выдаваемых строк в ленте
objectIds	string[]	Идентификаторы объектов
eventIds	string[]	Идентификаторы событий
commands	string[]	Идентификаторы команд

5. ITEM_TYPE.table

Таблица значений параметров

export interface ItemTable extends IWidgetParam {
  values: TableValues;
}

export type TableValues = Array<Array<ItemSingle>>;

Важная часть данных, необходимых для рендеринга табличных данных находится во ''viewConfig'', который является полем интерфейса IWidgetParam. ''viewConfig'' является типом IWidgetParamConfig

export interface IWidgetParamConfig {
    formatValue?: string;
    view?: string;
    rows?: number;
    cols?: number;
    rowsName?: string[];
    colsName?: string[];
    visibleRow?: boolean;
    visibleCol?: boolean;
}

Описание полей

Поле	Тип	Описание
formatValue	string	Форматирование строки по правилам функции sprintf + возможно указать hh:mm:ss для отображения времени
view	number	Выбранный тип отображения поля (массив вариантов указывается при описании WidgetParam)
rows	number	Количество строк в таблице
cols	number	Количество столбцов в таблице
rowsName	string[]	Заголовки строк в таблице
colsName	string[]	Заголовки столбцов в таблице
visibleRow	boolean	Отображаются ли заголовки строк в таблице
visibleCol	boolean	Отображаются ли заголовки столбцов в таблице

6. ITEM_TYPE.custom

Произвольный тип параметра

export interface ItemCustom extends IWidgetParam {
  value: string;
}

PARAM_TYPE описание интерфейсов

1. PARAM_TYPE.custom_string (текст)

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

Пример:

Описание параметра в виджете:

const PARAMS: WidgetParams = {
 text: {
    title: 'Текст',
    item_type: ITEM_TYPE.custom,
    param_type: PARAM_TYPE.custom_string,
  },
};

В конфигураторе задаем значение: Hello world!

В виджете можно получить значение через: values.text.value

2. PARAM_TYPE.custom_json (json)

Тип параметра, обозначающий, что введенные данные будут распарсены функцией JSON.parse() и будут доступны в виджете как JSON объект.
При редактировании параметра пользователю отображается текстовое поле textarea, а ниже него отображается тот JSON, который будет доступен в виджете. В случае задания неправильного JSON, параметр будет равен пустому объекту {}

Пример:

Описание параметра в виджете:

const PARAMS: WidgetParams = {
 status: {
    title: 'Статусы',
    item_type: ITEM_TYPE.custom,
    param_type: PARAM_TYPE.custom_json,
  },
};

В конфигураторе задаем значение: {"foo":"bar"}

В виджете можно получить значение через: values.status.value.foo

3. PARAM_TYPE.custom_archer

Тип предназначен для работы с Archer файлами.
При экспортировании файлов из редактора Archer файлов создается два файла. SVG - со схемой и JSON с описанием параметров.

В конфигураторе виджетов для управления типом параметра custom_archer будет доступна загрузка двух файлов SVG и JSON. JSON файл после загрузки будет преобразован в список параметров, которые можно будет указать стандартным способом, как если бы это были PARAM_TYPE.value

В виджете данные JSON файла будут доступны в параметры values.archer. А SVG и JSON файл, в values.archer.files (values.archer.files.svg и values.archer.files.json соответственно)

4. PARAM_TYPE.custom_external (расширяемый тип)

Данные тип параметра предназначен для расширения списка параметров, с помощью загружаемого JSON файла. Формат JSON файла должен соответствовать типу входных параметров в виджете (WidgetParams). Это значит, что описание типов в файле JSON должно быть точно такое же, как и в описании параметров виджета. Единственное исключение, составляет описание типов параметра, которые должны быть описаны как строка. Пример показан ниже.

Данные код:

const PARAMS: WidgetParams = {
battery: {
    title: _('Battery'),
    item_type: ITEM_TYPE.single,
    param_type: PARAM_TYPE.value,
    items: {
      charge: {title: _('Charge')},
      temperature: {title: _('Temperature')}
    }
  },
  };

Должен быть преобразован в:

{
"battery": {
    "title": "Battery",
    "item_type": "single",
    "param_type": "value",
    "items": {
      "charge": {"title": "Charge"},
      "temperature": {"title": "Temperature"}
    }
  }
}

При таком описании параметра

const PARAMS: WidgetParams = {
 system: {
    title: 'Система',
    item_type: ITEM_TYPE.custom,
    param_type: PARAM_TYPE.custom_external,
  },
};

и в случае загрузке в него JSON файла, указанного выше

В виджете данные будут доступны по цепочке values.system.battery.charge.value и values.system.battery.temperature.value

5. PARAM_TYPE.custom_file (любой файл)

При использовании этого типа вы можете загрузить любой файл(практически, есть ограничение сервиса) и впоследствии его использовать в виджете

К примеру, при таком описании

const PARAMS: WidgetParams = {
 image: {
    title: 'Изображение',
    item_type: ITEM_TYPE.custom,
    param_type: PARAM_TYPE.custom_file,
  },
};

Файл будет доступен в коде виджета по цепочке values.image.files.file

Типы данных входных параметров в виджете

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

export interface WidgetParam {
    title: string; // Название, которое будет отображено при конфигурировании виджета. Можно локализовать при использовании внутри _('') 
    item_type: ITEM_TYPE; // Тип данных (Описаны выше)
    param_type?: PARAM_TYPE; // Тип параметра (Описаны выше)
    items?: WidgetParamsChildren | WidgetArrayParam[]; // Дочерние элементы
    views?: string[];  // Варианты представлений параметра
    available?: any[]; // Ограничение для генератора случайных чисел
}

Описание полей параметра

Параметр	Описание
title	Заголовок, который будет использован в конфигураторе виджета, для пояснения блока данных
item_type	Тип данных ITEM_TYPE
param_type	Тип параметра PARAM_TYPE
items	Дочерние элементы входного параметра. Может быть либо массивом входных параметров, либо объектом
available	Массив ограничений значений. Используется только в среде разработки. Позволяет задать допустимые значения, например при массиве [0,1] значения параметра будут только 0 или 1
max	Максимальное количество элементов массива (только если текущий объект массив)

Рекомендуется, для описания набора параметров, участвующих в виджете использовать интерфейс InputParameters. Интерфейс InputParameters тесно связана с описание интерфейса WidgetParams. Фактически InputParameters показывает в каком виде данные будут переданы виджету, а WidgetParams говорит сервису, какие данные и в каком виде требуются.

Пример использования:

interface InputParameters {
  signal: {
    config: ParamConfigSingle,
    items: Array<ItemSingle>
  };
}

const PARAMS: WidgetParams = {
  signal: {
    title: _('Список сигнальных значений'),
    item_type: ITEM_TYPE.single,
    items: [{
      param_type: PARAM_TYPE.signal,
      max: 8,
    }]
  }
};

В InputParameters используются структуры данных ParamConfigSingle, ParamConfigInterval, ParamConfigSeries, ParamConfigEvents, ParamConfigCustom, которые описывают атрибуты, при конфигурировании виджета пользователем.

ParamConfigSingle

export interface ParamConfigSingle {
    valueType: number;
}

Параметр	Описание
valueType	Тип VALUE_TYPE

ParamConfigInterval

export interface ParamConfigInterval {
    dailyRange: string;
    stateMap: boolean;
    valueType: number;
    duration: SeriesDuration;
    count: number;
}

Параметр	Описание
dailyRange	Время в течении дня 0:00-24:00
stateMap	Включена ли карта состояний ( Сама карта доступна в item.data.states)
valueType	Тип VALUE_TYPE
duration	'day','week', 'month'
count	Сдвиг назад относительно текущей даты

ParamConfigSeries

export interface ParamConfigSeries {
    duration?: SeriesDuration;
    count?: number;
    charttype?: ChartTypes;
    generator?: boolean;
}

Параметр	Описание
dailyRange	Время в течении дня 0:00-24:00
stateMap	Включена ли карта состояний ( Сама карта доступна в item.data.states)
valueType	Тип VALUE_TYPE
duration	'day','week', 'month'
count	Сдвиг назад относительно текущей даты

ParamConfigEvents

export interface ParamConfigEvents {
    attrList?: string[];
    titleList?: string[];
    size?: number;
    objectIds?: string[];
    eventIds?: string[];
    commands?: string[];
}

Параметр	Описание
attrList	Массив выбранных атрибутов
titleList	Массив названий столбцов
size	Количество записей в журнале
objectIds	Массив объектов
eventIds	Массив событий
commands	Массив команд

ParamConfigCustom

export interface ParamConfigCustom {
    value?: string;
    type?: ParamConfigCustomType;
}
export enum ParamConfigCustomType {
  'string',
}

Параметр	Описание
value	Текстовое значение
type	Тип параметра

Параметры можно описать как массивом так и объектом. Отличия между ними в описании параметра items.
При указании item_type и param_type только в родительском объекте все дочерние элементы его наследуют.

Описание дочернего параметр как массива

Следующие две записи равны

const PARAMS: WidgetParams = {
  signal: {
    item_type: ITEM_TYPE.single,
    param_type: PARAM_TYPE.signal,
    items: [{
      max: 8,
    }]
  }
};

const PARAMS: WidgetParams = {
  signal: {
    items: [{
      item_type: ITEM_TYPE.single,
      param_type: PARAM_TYPE.signal,
      max: 8,
    }]
  }
};

Описание InputParameters должно выглядеть так

interface InputParameters {
  signal: {
    config: ParamConfigSingle,
    items: Array<ItemSingle>
  };
}

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

values.signal = [ItemSingle, ItemSingle, ItemSingle]

Описание дочернего параметра как объекта

interface InputParameters {
battery: {
    charge: ItemSingle
    temperature: ItemSingle
    status: ItemSingle
  };
}

const PARAMS: WidgetParams = {
  battery: {
    title: _('Battery'),
    item_type: ITEM_TYPE.single,
    param_type: PARAM_TYPE.value,
    items: {
      charge: {title: _('Charge')},
      temperature: {title: _('Temperature')},
      status: {title: _('Status'), available: [1, 2, 3, 7, 9]},
    }
  },
}

Виджет получит:

values.battery = { charge: ItemSingle, temperature: ItemSingle, status:temperature: ItemSingle};

WidgetPackage тип данных выходных данных в виджете

Для сборки и правильного функционирования виджета в системе, файл виджета должен вернуть структуру WidgetPackage

const component: WidgetPackage = {
  template: require('./widget.html'),
  component: new Widget(),
  params: PARAMS,
  size: {'sm': {'x': 0, 'y': 0, 'w': 3, 'h': 6}, 'lg': {'x': 0, 'y': 0, 'w': 5, 'h': 7}, 'mobile': {'x': 0, 'y': 0, 'w': 2, 'h': 7}},
  styles: require('./widget.scss'),
  locales: [{code: 'en', file: require('./i18n/en.json')}, {code: 'ru', file: require('./i18n/ru.json')}]
};

export default component;

Свойства	Назначение
template	Содержимое шаблона виджета. Можно использовать функцию require(<путь к файлу шаблона>), либо строку
component	Экземпляр класса виджета
size	Размеры виджета по умолчанию для разных размеров экранов
styles	Стили виджета. Можно использовать функцию require(<путь к файлу стилей>), либо строку
locales	Массив с файлами для локализации виджета
needPicture	Использует ли виджет изображение

Описание классов виджета

1. Класс WidgetComponentContainer

Для правильной подсветки кода в среде разработки используется конструкция WidgetComponentContainer
Шаблон виджета будет передан именно классу-контейнеру.

Описание параметров и методов WidgetComponentContainer, которые можно использовать в шаблоне виджета

Параметр	Назначение
values	Данные от сервиса, представленные согласно описаным параметрам
component	Объект, которые содержит функции и данные вашего виджета, описанного в классе //Widget//
theme	Текущая тема SiteTheme.dark, SiteTheme.light
pictureId	Идентификатор изображения. Можно использовать в шаблоне через pipe <img[src]="pictureId makePictureUrl"/>
CHART_TYPES	Enum Типы графиков
VALUE_TYPE	Enum Типы значений

Методы, которые можно использовать в виджете

Методы	Назначение
openWindow(url)	Открывает модальное окно
urlExport()	Возвращает ссылку на экспорт данных виджета
paramCancel(par:WidgetItem)	Отменяет редактирование параметра
paramEdit(par:WidgetItem)	Переводит параметр в редактируемое состояние
paramSave(par:WidgetItem)	Сохраняет новое значение

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

Методы	Назначение
onInit()	Вызывается при инициализации компонента
onDestroy()	Вызывается при уничтожении компонента
onUpdate(values)	Вызывается при обновлении данных
onResize(width, height)	Вызывается при любом изменении размеров виджета

Параметры, доступные в компоненте виджета

Параметры	Назначение
width	Ширина виджета в пикселях
height	Высота виджета в пикселях

Все переменные, методы из этого класса доступны в виджете через переменную component

widget.my.ts

class Widget extends WidgetComponent {
 
  isCompact: boolean = false;

  toggleCompact() {
    this.isCompact = !this.isCompact; 
  }
}

widget.my.html

<div *ngIf="component.isCompact">Compact</div>

<button (click)="component.toggleCompact()">Toggle compact</button>

3. Класс WidgetComponentContainer

Для удобства разработки и сокращения количества ошибок в среде разработки все структуры соответствуют реальным. Для правильной работы IDE используется функция-декоратор Component, эмулирующая работу функции Component из Angular, а также специальный класс-контейнер class WidgetContainer extends WidgetComponentContainer.

@Component({
  templateUrl: './widget.my.html',
})
class WidgetContainer extends WidgetComponentContainer {
  values: InputParameters;
  component = new Widget();
}