Виджет на HTML: KPI + фото сотрудников

Примеры и гайды
1

Пример

Виджеты AW BI

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

В данном случае мы будем использовать HTML виджет для реализации отображения топа по выполнению плана продаж, включая аватарки работников.

image
image698×105 29.7 KB

Виджет KPI с аватарками

Создание виджета

Данные для виджета

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

image
image1513×336 21.4 KB

  • Важно! Именование фотографий должно совпадать с названиями фотографий, которые будут загружаться в виджет
Пример названий для фото

image

image
image747×231 11.9 KB

Формирование

В виджете мы отобразим фотографию сотрудника, ФИО сотрудника, надпись “Лучший сотрудник” и процент выполнения плана. Перейдем к созданию виджета:

  1. Выбираем тип виджета - HTML
  2. В “Группы” виджета добавляем поле с ФИО работника [worker]
  3. Создадим расчетный агрегат для вычисления процента выполнения плана [result]:
    AVG([fact]/[plan]*100)
  4. Расчетный агрегат перенесем в “Столбцы” виджета
  5. Добавляем поле [photo], которое содержит именование фотографии, в “Столбцы виджета”, добавим к нему промежуточную формулу:
    ANY([photo])
  6. Вставляем следующий код в части html, css, js кода виджета:
html 
<article class="widget-card">
  <div class="image-container">
    <img id="image-preview" class="image-preview">
  </div>
  <div class="header-container">
    <div class="title">⭐Лучший результат</div>
    <div class="sub-header" id="image-fio"></div>
    <div class="metrics">
      <div>Выполнение плана:&nbsp;</div>
      <div class="metric" id="metric_1"></div><div class="metric">%</div>
    </div>
  </div>
</article>
css 
.widget-card {
    font-family: sans-serif;
    border: 1px solid #FCD069;
    border-radius: 16px;
    width: 99%;
    height: 120px;
    display: flex;
    flex-direction: row;
    padding-inline: 10px;
    padding-block: 20px;
    background-color: #FFFAF0;
}

.header-container {
    line-height: 22px; 
    padding-left: 15px;
}

.metrics {
    display: flex;
    flex-direction: row;
}

.metric {
    font-weight: 700;
    color: green;
}

.title {
    color: #7A8492;
    font-size: 14px;
    font-weight: 400;
}

.sub-header {
    font-size: 17px;
    font-weight: 700;
}

.image-container {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: left;
    justify-content: left;
    padding-left: 10px;
}

.image-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 100px;
}
js 
function setImage(element, valueIndex, fieldName) {
    const fieldData = window.DATA.data[valueIndex];
    const imageUrl = fieldData?.[fieldName]?.agg_value;
    
    if (element.tagName === 'IMG') {
        element.src = imageUrl+'.png' || '';
        element.alt = fieldData?.name?.value || '';
    } else {
        element.innerHTML = imageUrl 
            ? `<img src="${imageUrl}" alt="${fieldData?.worker?.value || ''}">`
            : 'Изображение не найдено';
    }
}

function setTitle(element, valueIndex, fieldName) {
    const fieldData = window.DATA.data[valueIndex];
    const title = fieldData?.[fieldName]?.display_value;
    element.innerHTML = title || 'Без названия';
}

function render() {
    if (!window.DATA?.data?.length) {
        console.warn('Данные не загружены');
        return;
    }

    const imageElement = document.getElementById('image-preview');
    const titleElement = document.getElementById('image-fio');
    const metric1Element = document.getElementById('metric_1');
    
    setImage(imageElement, 0, 'photo');
    setTitle(titleElement, 0, 'worker');
    setTitle(metric1Element, 0, 'result');
}

document.addEventListener('DOMContentLoaded', render);
window.addEventListener('dataUpdated', render);
  1. На вкладке js мы должны сверить показатели
    image
    image569×714 84.6 KB
  • 1 и 3 должны совпадать с алиасом столбца с ФИО сотрудника
  • 2 должно совпадать с алиасом столбца с именованиями фото
  • 4 должно совпадать с алиасом расчетного агрегата процента выполнения плана
  1. Загрузим файлы в виджет:
  • Нажимаем на Файлы на нижней панели редактора виджета
  • Нажимаем на кнопку Загрузить файл и выбираем все нужные аватарки
  • Закрываем окно загрузки фото
Подсказка

image
image775×868 40.6 KB

image
image498×765 36.7 KB

  1. В расчетном агрегате [result] нужно установить фильтрацию Топ 1
Подсказка

image

  1. Нажимаем выполнить и опубликовать.
Подсказка

image
image784×67 2.92 KB

Таким образом, мы создали виджет с топом по сотрудникам.

image
image1841×993 94 KB

Использование виджета

Помимо вывода сотрудника с лучшим результатом мы также можем создать виджет с выводом худшего результата. Он настраивается также, как и виджет с лучшим результатом, но вместо фильтрации Топ используется Антитоп. На примере показан вариант с 2 виджетами топа и антитопа, а также добавлен фильтр по городу.

image
image710×243 17.1 KB

При фильтрации по определенному набору городов мы можем вывести соответствующие топы.

image
image715×235 17.6 KB

В зависимости от количества различных показателей мы можем также продолжать фильтровать данные, например, добавив Регионы, Даты продаж и прочее.

Примеры приведенных виджетов вы сможете найти на aw-demo.ru:

  1. Лучший результат
  2. Худший результат
  3. ИП с двумя виджетами и фильтром

Аватарки менеджеров взяты с сайта: https://icon-icons.com/