Чтобы отобразить ключевые показатели (KPI), которые пользователь смотрит первым делом, используют контрольные значения в виджетах. Контрольные значения - это уникальные и базовые элементы анализа и мониторинга. Они часто используются как в шапках панели, так и в центре виджета.
Примеры отображения KPI
В HTML-виджетах
В линейной диаграмме (SmartNumber with trendline)
В круговых диаграммах и датчиках, где сам виджет тоже отображает план-факт
В пирамиде и круговой диаграмме
Варианты реализации в системе
Виджет HTML
Кейс: Необходимо вывести контрольные значения - плановое, фактическое и процент отклонения от плана.
Для начала добавляем источник данных - OLAP-представление с показателями для определенного элемента размерности. Так будет выглядеть источник данных в нашем примере:
Добавляем виджет “HTML” и в свойствах виджета, в разделе “Содержание” прописываем HTML-код со ссылками на значения показателей (мер) из источника “HTML”:
HTML-код
<div class="inner">
<div class="title">Бюджет городов <span class="textalign">(рублей)</span>
</div>
<div class="inner1">
<div class="inner2">
<div class="inner3">
<div>План</div>
<div>Факт</div>
</div>
<div>% перерасхода</div>
</div>
<div class="inner2">
<div class="inner3">
<div>
<span class="colortext">
<tpl for="HTML">
<tr>
<td>{value_0}</td>
<td>{value_1}</td>
</tr>
</tpl>
</span>
</div>
</div>
<div>
<span class="colortext">
<tpl for="HTML">
<tpl if="[values.getValue(2, false)]<=0"><span style="color: #54A2AE;"><tpl else><span style="color: #E36378;"></tpl>{value_2}
</tpl>
</span>
</div>
</div>
</div>
</div>
Примечание: в коде прописано условие выделения показателя перерасхода:
красным цветом, если число положительное, и зеленым - если 0 или отрицательное. В данным случае неположительное значение для показателя является целевым.
С версии AlphaBI 5.2 HTML-виджет содержит кнопку вызова справки с шаблонами поддерживаемых подстановок и функций с возможностью копирования непосредственно из справки:
Для внешнего оформления виджета используется раздел “CSS”, в данном примере используется следующий код:
CSS-код
{{id}} .title {
display: block;
font-size: 17px;
height: 50px;
font-weight: bold;
font-family: 'Verdana';
text-align: left;
background: #fafbfd;
color: #456592;
line-height: 1.5;
padding: 5px 10px 5px 10px;
}
{{id}} .inner {
display: flex;
flex-direction: column;
height:100%;
border: 1px solid #456592;
user-select: none;
}
{{id}} .inner1 {
display: flex;
height:100%;
flex: 1;
}
{{id}} .inner2 {
display: flex;
flex-direction: column;
justify-content: space-around;
flex-wrap: nowrap;
height:100%;
background: #fafbfd;
font-family: 'Verdana';
color: #456592;
font-size: 16px;
line-height: 2;
padding: 5px 10px 5px 10px;
flex: 1;
}
{{id}} .inner3 {
display: flex;
flex-direction: column;
justify-content: space-around;
flex-wrap: nowrap;
height:100%;
background: #fafbfd;
font-family: 'Verdana';
color: #456592;
font-size: 16px;
line-height: 1.5;
flex: 0.5;
}
{{id}} .textalign {
font-size: 12px;
}
{{id}} .colortext {
font-weight: bold;
}
В результате получаем визуально оформленный виджет с ключевыми показателями:
Блок “Выполнить код” в виджетах Диаграмм
Кейс: Необходимо вывести любое контрольное значение источника данных и расположить в центре линейной диаграммы. Такие контрольные значения еще называют SmartNumber with trendline.
Добавляем виджет “Столбчатая диаграмма” или “Линейная диаграмма” и источник данных для него. Для контрольного значения мы можем использовать тот же источник данных или добавить новый, ссылка на источник будет указана в настройках виджета. В нашем примере будет дополнительный источник.
Переходим в свойства виджета и настраиваем событие “При инициализации виджета”:
Из группы “Элемент” перетаскиваем blockly “Выполнить код” и вставляем запрос следующего вида:
JS-код
const dataSource = $widget.getDataSource('Второй_источник');
$widget.down('#chart').on('beforecreatechart',
function (chart, config) {
if (chart && dataSource && dataSource.lastData) {
const cfg = {};
// Жирный текст
cfg.bold = false;
// Цвет текста
cfg.color = '#456592';
//Размер текста (в пт)
cfg.size = 60;
// Значение текста
cfg.text = dataSource.lastData.rows[0]["@value_0"];
var fontStyle = cfg.bold ? 'bold ' + cfg.size + 'pt arial' : cfg.size + 'pt arial';
// Позиция по x
cfg.x = (chart.getWidth() / 2) - (getTextWidth(cfg.text, fontStyle) / 3);
// Позиция по y
cfg.y = (chart.getHeight() / 8);
config.allLabels = [];
config.allLabels.push(cfg);
}
});
function getTextWidth(text, font) {
// re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
$widget.updateChart();
, где:
- ‘Второй источник’ - название источника данных
- [0][‘value_0’] - индекс строки и столбца источника данных.
Вместо индексов могут использоваться коды мер, доступные варианты подстановок перечислены в справке к содержимому HTML-виджета.
Дополнительно настраиваем оси и серии. Результат будет выглядеть так:
Шаблон в настройках виджетов “Круговая диаграмма” и “Пирамида”
Кейс: Необходимо вывести контрольное значение в центре Круговой диаграммы.
Добавляем виджет Круговая диаграмма, переходим в раздел Заголовки, с помощью кнопки 
настраиваем вывод контрольного значения - в поле «Текст» прописываем текст заголовка или шаблон в формате [[total]] или [[total_fixed]] для вывода итогового значения источника данных диаграммы.
При необходимости заполняем остальные параметры:
- «Цвет» - выбор цвета из палитры для заголовка
- «Размер» - изменение размера заголовка
- «Y» - определение расположения заголовка по оси Y
- «Ж» - установление жирного шрифта для заголовка
Аналогично настраивается формат контрольного числа для виджета “Пирамида”:
При необходимости настраиваем отображение и стили других элементов диаграммы. Для круговой диаграммы в разделе “Объем” увеличиваем внутренний радиус так, чтобы контрольное число поместилось во внутренний круг. В результате в диаграммах отобразится итоговое значение источника данных:
Шаблон заголовка и раскрашивание круговой диаграммы
Кейс: отобразить текущий прогресс и процент достижения цели.
В источнике данных выведена информация о плановых и фактических значениях показателей, % достижения плана, а также остаток для достижения цели:
Как мы настроили источник
- Вывели на ось строк переменную “Город” с типом значения “Элемент иерархии”, в область значений - меры плана и факта.
- Добавили в иерархию “Город” расчетный элемент “Осталось”, показывающий разницу между планом и фактом для выбранного элемента иерархии.
- Добавили расчетный элемент - меру “Выполнение плана”, в которой рассчитали процент выполнения плана. План не рассчитывается только для расчетного элемента “Осталось”. Вывели меру в область значений.
- В переменной “Город” выбрали нужный город для соответствующего виджета.
Выводим виджет “Круговая диаграмма” на аналитическую панель, добавляем источник данных и переходим в свойства виджета. Настраиваем цвета - здесь важно показать более ярким цветом текущий прогресс, поэтому он будет в первой строке. Серый цвет будет показывать, сколько осталось до цели:
Отключаем легенду, переходим в раздел Надписи и в шаблоне ссылаемся на столбец “Выполнение плана”, настраиваем размер и цвет текста. Чтобы значение было максимально в центре, значение радиуса для отступа должно быть большим и отрицательным:
В подсказку можно вывести текущее значение показателя:
В справке к шаблону подсказки можно посмотреть доступные варианты подстановок
С версии AlphaBI 5.2 реализован HTML-редактор подсказок. Например, в подсказку можно добавить показатели с заголовком, таблицу, контент через iframe и даже другой дашборд системы с передачей параметров.
В центр виджета также выводим дополнительную информацию, необходимую для анализа:
Меняя значение внутреннего радиуса, управляем толщиной линии прогресса:
В результате получаем круговую диаграмму, динамически отображающую прогресс достижения цели. Контрольное число показывает процент выполнения плана, в подсказке - фактическое значение. Для сравнения приводим разные проценты выполнения показателя:
Виджет Датчик
Кейс: необходимо вывести текущий % достижения цели.
В источнике данных имеется информация о плановом и текущем значении показателя, а также проценте выполнения плана:
Для визуализации данных источника выводим на панель виджет “Датчик”, в свойствах настраиваем ориентиры для шкалы значений, где:
- текущее значение - положение стрелки и заполненная часть сектора
- минимальное значение - начало шкалы значений
- максимальное значение - конец шкалы значений
- целевое значение - линия достижения цели
Выводим промежуточные значения на шкалу
и задаем цветовую палитру. Так как цель может быть достигнута более чем на 100%, задаем конечный угол 0 градусов, таким образом целевые значения будут отображены в левой части шкалы, а значения сверх цели - в правой.
В разделе “Надписи” выводим текущий % достижения цели и настраиваем его положение на виджете:
В справке к шаблону можно посмотреть доступные варианты подстановок
В подсказку можно вывести текущее значение показателя.
В результате получаем отображение контрольного значения (% достижения цели), текущее состояние процесса достижения цели на виджете. Для сравнения приводим примеры с невыполненной и перевыполненной целью:
