Плитка - это отдельная информационная панель, на которой данные могут быть представлены в виде круговой диаграммы, гистограммы, графика или индикатора. В системе существует 4 соответствующих типа плиток. При формировании дашборда настроенные плитки размещаются в ячейках холста.
Список настроенных плиток отображается на форме Справочники - Дашборды - Плитки. Здесь же можно удалять, корректировать плитки, и создавать новые.
Копировать - создает новую плитку, полную копию выделенной. При сохранении такой плитки без изменения уникальных свойств, например, кода, программа выдаст ошибку.
Редактировать - открывает выделенную плитку на редактирование.
Удалить - удаляет выделенную плитку.
+Индикатор/ +Гистограмма/ +Круговая диаграмма/ +График - открывает пустую форму новой плитки соответствующего типа для заполнения и настройки.
Рис. 1 Список плиток
Настройка плиток
Типы плитки отличаются настройками отображения данных, остальные параметры настраиваются одинаково (рис.2).
В шапке формы плитки указывают:
Код - идентификатор, уникальный в рамках типа плитки. Код может использоваться для выполнения каких-либо действий относительно данной плитки, например в Планировщике.
Наименование - название плитки, обычно позволяющее понять, какие данные она представляет.
Интервал обновления, с - интервал пересчета данных плитки, указанный в секундах.
Превью плитки отображается на вкладке Настройки и только после того, как определены показатели и заполнен код для расчета этих показателей на вкладке Скрипт. Вкладка представляет собой редактор с поддержкой языка lsFusion, где нужно написать действие на языке lsFusion, которое вычисляет данные для отображения на плитке. Специальные переменные, которые используются для показателей каждого вида плитки приведены в описании настроек видов плиток ниже в статье.
На вкладке Примечание можно делать любые текстовые заметки, необходимые пояснения и т.п. , на вкладке Данные отображаются значения переменных, которые используются для отображения данных на плитке. Чтобы видеть, как настройки плитки влияют на ее отображение используют кнопку Пересчитать, которая запускает принудительное выполнение скрипта и обновление превью плитки.
Рис. 2 Настройка плиток
Настройки отображения Круговой диаграммы
Данные на плитке представлены в виде круговой диаграммы, вид которой настраивается на вкладке Настройки. Слева отображается, как будет выглядеть плитка.
Заголовок - заголовок круговой диаграммы, он отображается на диаграмме.
Низ/Лево/Право/Верх - здесь можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей.
Скрыть легенду - если флажок установлен, легенда круговой диаграммы не отображается.
Ориентация - положение легенды. Можно установить
- Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
- Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).
Заголовок (в блоке Легенда) - название легенды.
Положение заголовка - положение заголовка относительно самой легенды.
Рис. 3 Настройка круговой диаграммы
Скрипт
Для круговой диаграммы используется переменная valuePie(STRING ... ), в которой параметр приводится к формату STRING, а значение переменной является числом. С помощью кода на языке lsFusion нужно указать, как система должна вычислять значение переменной. Сколько вариантов значения переменной вычислит система, столько будет секторов на круговой диаграмме, а величина сектора зависит от значения переменной.
Пример
На рис. 4 приведен пример кода, который отображает в виде круговой диаграммы количество заказов по статусам (status). В диаграмме отображается столько секторов, сколько статусов система найдет в активных заказах. На рис. 3 отображена диаграмма по скрипту рис. 4 с четырьмя секторами, значит в системе на момент построения диаграммы были заказы в 4 разных статусах. Размер каждого сектора зависит от количества заказов в каждом статусе.
Рис. 4 Скрипт для круговой диаграммы
Настройки отображения Графика
Данные на плитке представлены в виде графика(ов), вид которого настраивается на вкладках Настройки (рис.5) и Показатели (рис. 6). Слева отображается, как будет выглядеть плитка. Если настроен один показатель, то на плитке будет отображаться один график, если показателей несколько, то для каждого показателя будет отдельный график, но все графики располагаются в одной системе координат (рис. 5).
Вкладка Настройки
Заголовок (блок Общие) - название графика, отображается на графике.
Горизонтальная - график будет отображаться горизонтально.
Низ/Лево/Право/Верх - здесь можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей.
Скрыть легенду - если флажок установлен, легенда не отображается.
Ориентация - положение легенды. Можно установить
- Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
- Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).
Заголовок (в блоке Легенда) - название легенды.
Положение заголовка - положение заголовка относительно самой легенды.
Рис. 5 Настройки отображения графика
Вкладка Показатели
Для каждого показателя строится свой график. Количество показателей неограниченно. Для показателей указывают следующие параметры:
Код - уникальный идентификатор показателя, он используется в коде на вкладке Скрипт, который вычисляет значения показателя для построения графика.
Наименование - название показателя, отображается в легенде.
Отображать ключ - на графике отображается ключ показателя, т.е. то, относительно чего строится график, обычно, это значение точки графика по оси Х (в примере на рис. 5 это будет день недели).
Отображать значение - на графике отображается значение показателя по каждому ключу, т.е. значение по оси Y (в примере на рис. 5 это будет размер выручки).
Цвет - если не нравится цвет по умолчанию, его можно изменить, установив подходящий цвет в формате RGB, HEX, HSL или используя инструмент "пипетка".
Рис. 6 Настройка цвета
Непрозрачность - прозрачность линии графика. Чтобы настроить нужно установить число от 0 до 1, чем меньше число, тем прозрачнее линия графика. Если не указывать, то значение по умолчанию =1.
Линии/Маркеры/Текст - отображаемые элементы графика. Если флажок установлен, элемент отображается, если снят, то не отображается:
Линии- линия графика.
Маркеры - точки просчитанных значений, по которым строится график.
Текст - надписи значения и ключа
Рис. 7 Настройка отображения показателей графика
Скрипт
Для построения графика можно использовать 2 переменные:
- valueScatter('код параметра', STRING ключ параметрa)
код параметра - код, указанный на вкладке Параметры
ключ параметра - это может быть явно указанное значение или переменная из данных в системе, приведенная к типу STRING, например, дата или магазин/склад.
обязательная переменная. Это значение параметра графика, т.е. переменная, для которой с помощью кода на языке lsFusion нужно указать, как система должна вычислять значение по каждому ключу графика. Значение переменной является числом, значение же ключа параметра должно быть приведено к типу STRING. По умолчанию на графике значение переменной отображается по возрастанию значений ключа. Если ключ буквенный, то значения идут по алфавиту, если числовой, значения ключа упорядочены также по принципу алфавита, например порядок по возрастанию чисел 2,5,10,15,6 будет:10, 15, 2,5,6. Поэтому в случаях, когда фактический порядок значений ключа по возрастанию противоречит описанному, например, ключом являются дни недели или месяцы, то для указания правильного порядка ключей на графике используется параметр orderScatter. - orderScatter('код параметра', STRING ключ параметрa) - переменная, которая определяет порядок отображения параметра в графике. Код параметра и ключ параметрa должны соответствовать тем, которые указаны для переменной valueScatter, для которой определяется порядок.
Рис. 8 Скрипт для построения графиков выручки за текущую и предыдущую неделю
Настройки отображения Гистограммы
Данные на плитке представлены в виде одного из 4-х типов гистограммы, вид которой настраивается на вкладках Настройки (рис.9) и Показатели (рис. 11). Слева отображается как будет выглядеть плитка. Чтобы было изображение, должен быть заполнен код расчета показателей на вкладке Скрипт.
Вкладка Настройки
Заголовок (блок Общие) - название гистограммы, отображается на гистограмме.
Режим - режим построения гистограммы:
group - столбцы значений располагаются рядом друг с другом
relative - последующие столбцы строятся вниз от верхнего значения первого столбца.
stack - следующий столбец значения надстраивается над предыдущим.
overlay - следующий столбец значения отображается поверх предыдущего.
Нормирование - при больших колебаниях в показателях, чтобы не было ситуации, когда один столбик очень большой, а второй очень маленький, можно применять нормирование по процентам или долям. Это преобразование данных, чтобы привести их к одному масштабу или диапазону.
Радиус закруглений - радиус закругления верхних углов столбцов гистограммы.
Горизонтальная - график будет отображаться горизонтально.
Низ/Лево/Право/Верх - здесь можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей.
Скрыть легенду - если флажок установлен, легенда не отображается.
Ориентация - положение легенды. Можно установить
- Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
- Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).
Заголовок (в блоке Легенда) - название легенды.
Положение заголовка - положение заголовка относительно самой легенды.
Рис. 9 Настройка отображения гистограммы
Вкладка Показатели
Для каждого показателя по каждому найденному ключу строится свой столбец. Количество показателей неограниченно. Для показателей указывают следующие параметры:
Код - уникальный идентификатор показателя, который используется в коде на вкладке Скрипт для вычисления значения показателя.
Наименование - название показателя, отображается в легенде.
Отображать ключ - на столбце гистограммы отображается ключ показателя (в примере на рис. 9 это будет дата).
Отображать значение - на столбце гистограммы отображается значение показателя по каждому ключу ( в примере на рис. 9 это будет количество заказов)
Цвет - если не нравится цвет по умолчанию, его можно изменить, установив подходящий цвет в формате RGB, HEX, HSL или используя инструмент "пипетка".
Рис. 10 Настройка цвета
Непрозрачность - прозрачность линии графика. Чтобы настроить нужно установить число от 0 до 1, чем меньше число, тем прозрачнее столбец.
Рис. 11 Настройка отображения показателей гистограммы
Скрипт
Для построения гистограммы используется одна переменная:
valueBar('код показателя',STRING ключ параметра)
код параметра - код, указанный на вкладке Параметры
ключ параметра - это может быть явно указанное значение или переменная из данных в системе, приведенная к типу STRING, например, дата или магазин/склад
Для каждого показателя из настроенных на вкладке Параметры нужно написать скрипт на языке lsFusion для расчета переменной valueBar. На гистограмме отобразится столько столбцов (групп столбцов, если параметров гистограммы несколько), сколько ключей будет указано/вычислено системой.
Рис. 12 Пример скрипта для построения гистограммы, отображающей отгруженные заказы и общее количество заказов по дате
Настройки отображения Индикатора
На плитке отображается значение показателя в виде числа. Отображение индикатора регулируется на вкладке Настройки (рис. 14). Слева отображается как будет выглядеть плитка. Чтобы было изображение, должен быть заполнен код расчета показателя на вкладке Скрипт.
Заголовок (блок Общие) - название индикатора, отображается на плитке индикатора.
Блок Значение - управление отображением значения индикатора:
Формат - при необходимости в этом поле можно указать маску, в соответствии с которой будет отображаться числовое значение параметра. Важно: используется формат d3.
Префикс - здесь можно внести символы, которые будут отображаться перед значением параметра.
Суффикс - здесь можно внести символы, которые будут отображаться после значения параметра.
Блок Отклонение - управление отображением значения отклонения индикатора от целевого значения:
Позиция - по умолчанию отклонение отображается ниже индикатора. Но можно установить другое положение: Право, Лево, Низ, Верх.
Префикс - здесь можно внести символы, которые будут отображаться перед значением отклонения.
Суффикс - здесь можно внести символы, которые будут отображаться после значения отклонения.
Формат - при необходимости в этом поле можно указать маску, в соответствии с которой будет отображаться числовое значение отклонения. Важно: используется формат d3.
Блок Режим - здесь настраивают, какие элементы будут отображаться: Значение, Шкала и Отклонение. Отображаются те элементы, для которых установлен флажок.
Блок Шкала - управление отображением шкалы значений:
Плоская - по умолчанию шкала имеет дугообразную форму (рис. 11), если отметить признак флажком, то шкала будет прямой формы.
Рис. 13 Плоская шкала
Цвет шкалы/фона/границ - цвет элементов можно изменить, указав подходящий цвет в формате RGB, HEX, HSL или используя инструмент "пипетка".
Толщина границ - можно изменить толщину границ шкалы, указав подходящее значение в пикселях.
Формат - формат отображения значений делений на шкале, при необходимости в этом поле можно указать маску, в соответствии с которой они будут отображаться.
Префикс - здесь можно внести символы, которые будут отображаться перед значением делений шкалы.
Суффикс - здесь можно внести символы, которые будут отображаться после значений делений шкалы.
Блок Поля - можно задавать подходящую величину (в пикселях) отступов от соответствующего края плитки. Если поля оставить пустыми, будет применятся отступ по умолчанию: 80 пикселей.
Блок Легенда
Скрыть легенду - если флажок установлен, легенда не отображается.
Ориентация - положение легенды. Можно установить
- Вертикальную ориентацию(располагается в правом верхнем углу по направлению сверху вниз) или
- Горизонтальную ориентацию(располагается в левом нижнем углу слева направо).
Заголовок (в блоке Легенда) - название легенды.
Положение заголовка - положение заголовка относительно самой легенды.
Рис. 14 Настройка отображения индикатора
На вкладке Данные (рис. 15) для индикатора отображаются максимальное (max) , минимальное (min), текущее (Значение) и Целевое значение.
Как вычисляется текущее значение индикатора определяется кодом на языке lsFusion на вкладке Скрипт.
Минимальное, максимальное и целевое значения могут быть заданы статично на вкладке Данные или вычисляться в соответствии с кодом на языке lsFusion на вкладке Скрипт.
Рис. 15 Данные индикатора
Скрипт
На вкладке Скрипт на языке lsFusion необходимо написать код для расчета показателей индикатора по следующим переменным:
- indicatorReference() - определяет целевое значение индикатора. Относительно этого показателя рассчитывается отклонение текущего показателя. Не обязательная переменная. Целевое значение может быть задано статично на вкладке Данные.
- indicatorValue() - определяет текущее значение индикатора. Обязательная переменная, для которой должен быть задан скрипт расчета.
- indicatorMaxValue() - определяет максимально допустимое значение индикатора. Не обязательная переменная. Максимальное значение может быть задано статично на вкладке Данные.
- indicatorMinValue() - определяет минимально допустимое значение индикатора. Не обязательная переменная. Минимальное значение может быть задано статично на вкладке Данные.
Рис. 16 Пример скрипта расчета показателей для индикатора
Overview
Content Tools