Плитки

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

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

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

Редактировать - открывает выделенную плитку на редактирование.

Удалить - удаляет выделенную плитку.

+Индикатор/ +Гистограмма/ +Круговая диаграмма/ +График - открывает пустую форму новой плитки соответствующего типа для заполнения и настройки.

Рис. 1 Список плиток

Настройка плиток

Типы плитки отличаются настройками отображения данных, остальные параметры настраиваются одинаково (рис.2). 

В шапке формы плитки указывают:

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

Наименование - название плитки, обычно позволяющее понять, какие данные она представляет.

Интервал обновления, с - интервал пересчета данных плитки, указанный в секундах. 

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

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

Рис. 2 Настройка плиток

Настройки отображения Круговой диаграммы

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

Заголовок - заголовок круговой диаграммы, он отображается на диаграмме.

Низ/Лево/Право/Верх - здесь можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей. 

Скрыть легенду - если флажок установлен, легенда круговой диаграммы не отображается.

Ориентация - положение легенды. Можно установить

• Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
• Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).

Заголовок (в блоке Легенда)  - название легенды.

Положение заголовка - положение заголовка относительно самой легенды.

Рис. 3 Настройка круговой диаграммы

Скрипт

Для круговой диаграммы используется переменная valuePie(STRING ... ), в которой параметр приводится к формату STRING, а значение переменной является числом. С помощью кода на языке lsFusion нужно указать, как система должна вычислять значение переменной. Сколько вариантов значения переменной вычислит система, столько будет секторов на круговой диаграмме, а величина сектора зависит от значения переменной. 

Пример
На рис. 4  приведен пример кода, который отображает в виде круговой диаграммы количество заказов по статусам (status). В диаграмме отображается столько секторов, сколько статусов система найдет в активных заказах. На рис. 3  отображена диаграмма по скрипту рис. 4 с четырьмя секторами, значит в системе на момент построения диаграммы были заказы в 4 разных статусах. Размер каждого сектора зависит от количества заказов в каждом статусе. 

Рис. 4 Скрипт для круговой диаграммы

Настройки отображения Графика

Данные на плитке представлены в виде графика(ов), вид которого настраивается на вкладках Настройки (рис.5) и Показатели (рис. 7). Слева отображается, как будет выглядеть плитка. Если настроен один показатель, то на плитке будет отображаться один график, если показателей несколько, то для каждого показателя будет отдельный график, но все графики располагаются в одной системе координат (рис. 5). 

Вкладка Настройки

Заголовок (блок Общие) - название графика, отображается на графике.

Горизонтальная - график будет отображаться горизонтально.

Низ/Лево/Право/Верх - здесь можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей. 

Скрыть легенду - если флажок установлен, легенда не отображается.

Ориентация - положение легенды. Можно установить

• Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
• Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).

Заголовок (в блоке Легенда)  - название легенды.

Положение заголовка - положение заголовка относительно самой легенды.

Рис. 5 Настройки отображения графика

Вкладка Показатели

Для каждого показателя строится свой график. Количество показателей неограниченно.  Для показателей указывают следующие параметры:

Код - уникальный идентификатор показателя, он используется в коде на вкладке Скрипт, который вычисляет значения показателя для построения графика. 

Наименование - название показателя, отображается в легенде. 

Отображать ключ - на графике отображается ключ показателя, т.е. значение по оси Х (в примере на рис. 6 это будет месяц).

Отображать значение - на графике отображается значение показателя по каждому ключу, т.е. значение по оси Y (в примере на рис. 6 это будет количество чеков).

Цвет - если не нравится цвет по умолчанию, его можно изменить, установив подходящий цвет в формате RGB, HEX, HSL или используя инструмент "пипетка".

      

Непрозрачность - прозрачность линии графика. Чтобы настроить нужно установить число от 0 до 1, чем меньше число, тем прозрачнее линия графика. Если не указывать, то значение по умолчанию =1.

Линии/Маркеры/Текст - отображаемые элементы графика. Если флажок установлен, элемент отображается, если снят, то не отображается:

Линии- линия графика.

Маркеры - точки просчитанных значений, по которым строится график. 

Текст - надписи значения и ключа 

Рис. 7 Настройка отображения показателей графика

Скрипт 

Для построения графика можно использовать 2 переменные:

• valueScatter('код параметра', STRING ключ параметрa) -  это значение параметра графика, т.е. переменная, для которой с помощью кода на языке lsFusion нужно указать, как система должна вычислять значение по каждому ключу графика. Значение переменной является числом, значение же ключа параметра должно быть приведено к типу STRING. По умолчанию на графике значение переменной отображается по возрастанию значений ключа. Если ключ буквенный, то значения идут по алфавиту, если числовой, значения ключа упорядочены также по принципу алфавита, например порядок по возрастанию чисел 2,5,10,15,6 будет:10, 15, 2,5,6. Поэтому в случаях, когда фактический порядок значений ключа по возрастанию противоречит описанному, например, ключом являются дни недели или месяцы, то для указания правильного порядка ключей на графике используется параметр orderScatter      
• orderScatter('week', '1')

Настройки отображения Гистограммы

Данные на плитке представлены в виде одного из 4-х видов гистограммы, вид которой настраивается на вкладках Настройки (рис.8) и Показатели (рис. 9). Слева отображается как будет выглядеть плитка. Чтобы было изображение, должен быть заполнен код расчета показателей на вкладке Скрипт. По кнопке Пересчитать принудительно выполняется скрипт и обновляется превью плитки.

Вкладка Настройки

Заголовок (блок Общие) - название гистограммы, отображается на гистограмме.

Режим - режим построения гистограммы:

group - столбцы значений  располагаются рядом друг с другом

relative - последующие столбцы строятся вниз от верхнего значения первого столбца. 

stack - следующий столбец значения надстраивается над предыдущим. 

overlay - следующий столбец значения отображается поверх предыдущего.

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

Радиус закруглений - радиус закругления верхних углов столбцов гистограммы.

Горизонтальная - график будет отображаться горизонтально.

Низ/Лево/Право/Верх - здесь можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей. 

Скрыть легенду - если флажок установлен, легенда не отображается.

Ориентация - положение легенды. Можно установить

• Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
• Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).

Заголовок (в блоке Легенда)  - название легенды.

Положение заголовка - положение заголовка относительно самой легенды.

Рис. 8 Настройка отображения гистограммы

Вкладка Показатели

Для каждого показателя строится свой столбец. Количество показателей неограниченно.  Для показателей указывают следующие параметры:

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

Наименование - название показателя, отображается в легенде 

Отображать ключ - на столбце гистограммы отображается ключ показателя (в примере на рис. 8 это будет дата)

Отображать значение - на столбце гистограммы отображается значение показателя по каждому ключу ( в примере на рис. 8 это будет количество заказов)

Цвет - если не нравится цвет по умолчанию, его можно изменить, установив подходящий цвет в формате RGB, HEX, HSL или используя инструмент "пипетка".

      

Непрозрачность - прозрачность линии графика. Чтобы настроить нужно установить число от 0 до 1, чем меньше число, тем прозрачнее столбец.

Рис. 9 Настройка отображения показателей гистограммы

Настройки отображения Индикатора

На плитке отображается значение показателя в виде числа.  Отображение индикатора регулируется на вкладке Настройки (рис. 10). Слева отображается как будет выглядеть плитка. Чтобы было изображение, должен быть заполнен код расчета показателя на вкладке Скрипт. По кнопке Пересчитать принудительно выполняется скрипт и обновляется превью плитки.

Заголовок (блок Общие) - название индикатора, отображается на плитке индикатора.

Блок Значение - управление отображением значения индикатора:

Формат - при необходимости в этом поле можно указать маску, в соответствии с которой будет отображаться числовое значение параметра.

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

Суффикс - здесь можно внести символы, которые будут отображаться после значения параметра.

Блок Отклонение - управление отображением значения отклонения индикатора от целевого значения:

Позиция - по умолчанию отклонение отображается ниже индикатора. Но можно установить другое положение: Право, Лево, Низ, Верх. 

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

Суффикс - здесь можно внести символы, которые будут отображаться после значения отклонения.

Формат - при необходимости в этом поле можно указать маску, в соответствии с которой будет отображаться числовое значение отклонения.

Блок Режим - здесь настраивают, какие элементы будут отображаться: Значение, Шкала и Отклонение. Отображаются те элементы, для которых установлен флажок. 

Блок Шкала - управление отображением шкалы значений:

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

Цвет шкалы/фона/границ - цвет элементов можно изменить, указав подходящий цвет в формате RGB, HEX, HSL или используя инструмент "пипетка".

Толщина границ - можно изменить толщину границ шкалы, указав подходящее значение в пикселях.

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

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

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

Блок Поля - можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей.

Блок Легенда 

Скрыть легенду - если флажок установлен, легенда не отображается.

Ориентация - положение легенды. Можно установить

• Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
• Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).

Заголовок (в блоке Легенда)  - название легенды.

Положение заголовка - положение заголовка относительно самой легенды.

Рис. 10  Настройка отображения индикатора

На вкладке Данные (рис. 11) для индикатора отображаются максимальное (max) , минимальное (min), текущее (Значение)  и Целевое значение.  

Как вычисляется текущее значение индикатора определяется кодом на языке lsFusion на вкладке Скрипт. 

Минимальное, максимальное и целевое значения могут быть заданы статично на вкладке Данные или вычисляться в соответствии с кодом на языке lsFusion на вкладке Скрипт.

Рис. 11 Данные индикатора