Пользовательская документация
Настройки
Шаблоны
Шаблоны визуализаций

Примеры создания шаблонов

Шаблон типа CHART

В данном разделе рассмотрен пошаговый процесс создания шаблона графика

Для создания шаблона сначала необходимо заполнить поля (раздел Создание шаблона):

Программный код поля "Шаблон":

(() => {
    const templateId = "${templateId_s}";  ## templateId
    
    if (this.viewMap[templateId]) {
        this.viewMap[templateId].options = options;
    }
})();

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

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

(() => {
    const templateId = "${templateId_s}";  ## templateId
    
// Создание разделов - горизонтальных вкладок
##horizontal1 Горизонт 1
##horizontal2 Горизонт 2    
 
// Создание подразделов - вертикальных вкладок
 
// Вертикальные вкладки для горизонтальной вкладки "Горизонт 1"
##horizontal1_vertical1 Опция 1
##horizontal1_vertical2 Опция 2
 
// Вертикальные вкладки для горизонтальной вкладки "Горизонт 1"
##horizontal2_vertical1 Опция 1
##horizontal2_vertical2 Опция 2
##horizontal2_vertical3 Опция 3
 
 
    if (this.viewMap[templateId]) {
        this.viewMap[templateId].options = options;
    }
})();

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

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

Для наглядности, определим поля лишь внутри "horizontal1_vertical1" и "horizontal1_vertical3":

(() => {
    const templateId = "${templateId_s}";  ## templateId
    
// Создание разделов - горизонтальных вкладок
##horizontal1 Горизонт 1
##horizontal2 Горизонт 2    
 
// Создание подразделов - вертикальных вкладок
// --Вертикальные вкладки для горизонтальной вкладки "Горизонт 1"
##horizontal1_vertical1 Опция 1
##horizontal1_vertical2 Опция 2
 
// --Вертикальные вкладки для горизонтальной вкладки "Горизонт 1"
##horizontal2_vertical1 Опция 1
##horizontal2_vertical2 Опция 2
##horizontal2_vertical3 Опция 3
 
 
// Создание полей фиксированных типов 
// --Поле логического boolField_b внутри vertical1 внутри horizontal1 
${horizontal1_vertical1_boolField_b}; ## Галочка
 
 
// --Поле строкового типа strField_s внутри vertical3 внутри horizontal1 
${horizontal1_vertical3_strField_s}; ## Поле ввода
 
    if (this.viewMap[templateId]) {
        this.viewMap[templateId].options = options;
    }
})();

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

В предыдущем случае подраздел vertical3 определён неявно, его название не будет отображено, исправим это, явно определив vertical3 до создания _s:

(() => {
    const templateId = "${templateId_s}";  ## templateId
    
// Создание разделов - горизонтальных вкладок
##horizontal1 Горизонт 1
##horizontal2 Горизонт 2    
 
// Создание позразделов - вертикальных вкладок
// --Вертикальные вкладки для горизонтальной вкладки "Горизонт 1"
##horizontal1_vertical1 Опция 1
##horizontal1_vertical2 Опция 2
##horizontal1_vertical3 Опция 3
// --Вертикальные вкладки для горизонтальной вкладки "Горизонт 1"
##horizontal2_vertical1 Опция 1
##horizontal2_vertical2 Опция 2
##horizontal2_vertical3 Опция 3
 
 
// Создание полей фиксированных типов 
// --Поле логического boolField_b внутри vertical1 внутри horizontal1 
${horizontal1_vertical1_boolField_b}; ## Галочка
 
 
// --Поле строкового типа strField_s внутри vertical3 внутри horizontal1 
${horizontal1_vertical3_strField_s}; ## Поле ввода
 
    if (this.viewMap[templateId]) {
        this.viewMap[templateId].options = options;
    }
})();

Теперь можно видеть, что у компонента vertical3 появилось отображаемое название - "Опция 3":

Для добавления компонентов в автоматически сформированное поле "Общие настройки", необходимо воспользоваться следующим синтаксисом:

_vertical2 Опция 1 // подраздел с именем "Опция 1", отображаемый в поле "Общие настройки"
_vertical1 Опция 2 // подраздел с именем "Опция 2", отображаемый в поле "Общие настройки"

То есть, системные названия подразделов начинаются просто с "_", без указания системного названия поля "Общие настройки".

Наконец, наполним шаблон и отобразим график:

(() => {
    const templateId = "${templateId_s}";  ## templateId
 
// Создание разделов - горизонтальных вкладок
##horizontal1 Настройки заголовка
##horizontal2 Настройки цвета    
 
// Создание подразделов - вертикальных вкладок
// --Поля для горизонтальной вкладки "Общие настройки"
## _data Данные
## _legend Настройки легенды
## _query Настройки запроса
 
// --Вертикальные вкладки для горизонтальной вкладки "Настройки заголовка"
##horizontal1_vertical1 Текст
##horizontal1_vertical2 Положение
// --Вертикальные вкладки для горизонтальной вкладки "Настройки цвета"
##horizontal2_vertical1 Заливка
 
 
// Создание полей фиксированных типов 
 
 
// --Компоненты внутри поля "Общие настройки"
// ----Поля результатов запросов внутри _data внутри поля "Общие настройки"
const aliasName = "${_data_aliasName_queryField}"; ## Данные для подписей
const aliasVal = "${_data_aliasVal_queryField}"; ## Данные для значений
// ----Поле логического типа внутри _legend внутри поля "Общие настройки"
const showLegend = #if(${_legend_showLegend_b})"${_legend_showLegend_b}"; #else false; #end ## Отобразить легенду 
// ----Поле строкового типа внутри _query внутри поля "Общие настройки"
const queryName = #if(${_query_queryName_s})"${_query_queryName_s}"; #else ''; #end ## Название запроса
 
 
// --Компоненты внутри поля "Настройки заголовка"
// ----Поле логического showTitle_b внутри vertical1 внутри horizontal1 
const showTitle = #if(${horizontal1_vertical1_showTitle_b})"${horizontal1_vertical1_showTitle_b}"; #else false; #end ## Показывать Заголовок
// ----Поле строкового типа titleText_s внутри vertical1 внутри horizontal1 
const titleText = #if(${horizontal1_vertical1_titleText_s})"${horizontal1_vertical1_titleText_s}"; #else ''; #end ## Заголовок
// ----Поле строкового типа titleText_s внутри vertical1 внутри horizontal1 
const subtitleText = #if(${horizontal1_vertical1_subtitleText_s})"${horizontal1_vertical1_subtitleText_s}";#else ''; #end ## Подзаголовок
// ----Поле выбора alignSel внутри vertical2 внутри horizontal1
##horizontal1_vertical2_alignSel Выравнивание
// ------Поля выборочных опций внутри alignSel внутри vertical2 внутри horizontal1
var alignType = 'center';
#if (${horizontal1_vertical2_alignSel_sel_left}) ## Слева
    alignType = 'left';
#elseif (${horizontal1_vertical2_alignSel_sel_right}) ## Справа
    alignType = 'right';
#elseif (${horizontal1_vertical2_alignSel_sel_center}) ## По центру
    alignType = 'center';
#end
 
 
 
// --Компоненты внутри поля "Настройки Цвета"
// ----Поле логического isFilled_b внутри vertical1 внутри horizontal2 
const isFilled = #if(${horizontal2_vertical1_isFilled_b}) "${horizontal2_vertical1_isFilled_b}"; #else false; #end ## Залить 
// ----Поле цветового типа fillingColor_colorPicker внутри vertical2 внутри horizontal2
var fillingColor = null;
#if (${horizontal2_vertical1_fillingColor_colorPicker}) ## Цвет заливки
    fillingColor = "${horizontal2_vertical1_fillingColor_colorPicker}"; 
#end
 
if (!isFilled) {
    fillingColor = null;
}
 
const dataNames = [];
const dataValues = [];
for (const item of this.response.resultsRaw[queryName]) {
    var dataName = item[aliasName]
    var dataVal = "" + item[aliasVal]
    dataNames.push(dataName)
    dataVal = dataVal.replace(" ", "").replace(" ", "").replace(" ", "");
    dataValues.push({name:dataName, value:dataVal});
}
 
const mySeries = {
    type: 'pie',
    data: dataValues,
    color: fillingColor
};
 
const options = {
    title: {
    show: showTitle,
    text: titleText,
    subtext: subtitleText,
    left: alignType
    },
    legend: {
        show: showLegend,
        orient: 'vertical',
        left: 'left'
    },
    series: [mySeries],
  };
 
    if (this.viewMap[templateId]) {
        this.viewMap[templateId].options = options;
    }
})();

Созданный шаблон выглядит следующим образом:

Палитра шаблоновШаблоны формул