Привет, Хабр! Меня зовут Илья Кербатов, я старший консультант в компании «ДАР» в ГК «КОРУС Консалтинг». В этой статье разберу практический кейс, который показывает, как искусственный интеллект помогает экономить время и расширять возможности разработчика BI. Речь пойдет об оптимизации дашборда Qlik Sense с применением расширения ShowHTMLfromMeasure.
Еще пару лет назад решение такой задачи потребовало бы привлечения отдельного фронтенд-разработчика. Возможности ИИ быстро расширяются по мере развития моделей, и сейчас он отлично справляется с созданием и поддержкой кода.
Постановка задачи
В проекте, где мы разрабатываем BI-систему на базе Qlik Sense, у нас есть KPI-панель с шестью показателями: Net Income, Активы нетто, ROE, NIM, C/I и NPL. По каждому показателю выводятся план, факт, отклонение с цветовой индикацией и единицы измерения. Время загрузки панели составляло от 4 до 10 секунд при каждом открытии главного листа. При этом сложных расчетов на листе нет, данные в модели уже предрассчитаны.
Исходная структура панели
Стандартная сетка Qlik Sense не позволяет точно позиционировать элементы. Поэтому был использован Layout container из пакета Qlik Dashboard bundle.
В контейнер были вложены десятки мелких объектов типа «Текст и изображение» и «Ключевые показатели эффективности». Каждое значение, заголовок и отклонение размещались как отдельный объект. Цветовая индикация настраивалась через параметры цвета объектов KPI.
Подход давал нужный внешний вид, но создавал избыточную разметку. Это известная особенность платформы. Рендеринг объектов Qlik Sense выполняет браузер пользователя, и каждый объект несет небольшие накладные расходы. По материалам Vizlib по оптимизации Qlik Sense, даже множество мелких объектов на листе заметно замедляет начальную загрузку. Общий принцип описан и в материале web.dev про размер DOM: чем больше и глубже разметка, тем медленнее работает страница.
В нашем случае элемент div класса qv-object-content-container содержал 268606 символов на одну панель.
Решение
Мы решили отрисовать панель на HTML без избыточной разметки и собрать ее одним объектом. Готовый HTML код с разметкой и стилями сгенерировали моделью Claude Opus 4.7 по скриншоту KPI-панели. Финальный вариант получился уже с третьей попытки.
У заказчика уже было установлено расширение ShowHTMLfromMeasure от автора Fatih Dalgic. Оно берет значение меры и вставляет его в DOM как HTML-код.
Код от ИИ был вставлен в меру ShowHTMLfromMeasure как текст. Жестко заданные числовые значения, которые модель прописала по скриншоту, были заменены на формулы Qlik Sense через $() выражения прямо в тексте. Сложных расчетов формулы не содержали, значения уже хранились в модели данных почти в готовом виде.
Если коротко, подход можно повторить в четыре шага:
1. Сделать скриншот нужного объекта.
2. Попросить модель отрисовать его кодом HTML со встроенными стилями CSS без классов.
3. Вставить полученный код в ShowHTMLfromMeasure как значение меры.
4. Заменить все статичные числа на формулы Qlik Sense через $() выражения, чтобы данные оставались живыми и обновлялись из модели.
Результат
Размер элемента qv-object-content-container сократился с 268606 до 6882 символов. Размер DOM сократился с 1605 до 734 объектов. Загрузка панели стала моментальной.
Из функционала потерялась выгрузка значений в xlsx по щелчку правой кнопкой мыши по объекту. Заказчик решил, что для сводной KPI-панели это некритично, и приоритет у скорости загрузки.
Когда способ не подходит
У подхода есть четкая граница применения. HTML-объект статичен и не участвует в ассоциативной модели, как обычный объект Qlik Sense. Поэтому объекты с нативной интерактивностью лучше оставить стандартными. Это касается таблиц с выборками, элементов с детализацией, всплывающих подсказок и встроенного экспорта. Метод лучше всего работает именно на неинтерактивных элементах, где важны только внешний вид и скорость.
Выводы
Способ подходит для ускорения любых неинтерактивных объектов на дашборде. Дополнительно он дает более тонкую настройку внешнего вида и размеров, так как работа идет напрямую с HTML и CSS. Применять его стоит там, где стандартные объекты создают избыточную разметку и тормозят загрузку листа.
Освоить подход достаточно просто. При отсутствии фронтенд-разработчика HTML-код можно получить от модели по скриншоту панели. На мой взгляд, это и есть главный вывод кейса. Умение грамотно ставить задачу ИИ и проверять его результат постепенно становится таким же рабочим инструментом инженера, как знание SQL или скриптов загрузки данных.