Custom data visualization widgets for BI systems

Full Text

ВВЕДЕНИЕ

Цифровая трансформация систем управления организациями выступает одним из ключевых факторов повышения эффективности в рамках реализации федерального проекта «Производительность труда» [3]. Согласно официальным данным Министерства экономического развития Российской Федерации, с 2026 года в мероприятия указанного проекта включается более 10 тысяч образовательных организаций, что составляет свыше 12 % от общего количества учреждений отрасли. При этом к 2030 году мероприятиями по повышению производительности труда планируется охватить все образовательные организации страны.

Ключевым условием достижения целевых показателей производительности труда в образовательной сфере является переход к управлению, основанному на данных [1; 4]. Как отмечается в программных документах, резервы эффективности находятся в перенастройке рабочих процессов, внедрении цифровых решений и устранении избыточной отчётности. Именно оперативный мониторинг ключевых показателей эффективности (KPI) позволяет руководству образовательных организаций своевременно выявлять «узкие места», анализировать динамику процессов и принимать обоснованные управленческие решения [6–8].

Для решения поставленной задачи применяются современные системы бизнес-аналитики (BI), предоставляющие необходимую технологическую основу для визуализации процессов [2; 5; 6]. Современные BI-платформы обладают встроенными механизмами подключения пользовательских модулей (например, JavaScript-виджетов), что позволяет расширять стандартный набор визуализаций под специфические отраслевые задачи. Именно такая архитектурная гибкость делает BI-системы предпочтительным инструментом для реализации комплексного анализа данных в организациях, в том числе в рамках повышения производительности труда.

В практике эксплуатации систем бизнес-аналитики (BI) сложился определённый набор стандартных визуализаций (линейчатые диаграммы, круговые диаграммы, гистограммы). Однако для специфических управленческих задач, требующих одновременного отображения трёх и более связанных величин, возможностей указанных стандартных средств оказывается недостаточно. Лицу, принимающему решение, для комплексной оценки ситуации необходимо видеть в рамках одной диаграммы не только плановые и фактические значения показателя, но и его структурную характеристику (например, долю ключевого сегмента). В то время как стандартные средства BI-систем позволяют отобразить либо сравнение двух величин (план-факт), либо структуру одной величины, одновременное представление обеих характеристик в рамках единой визуальной формы требует применения новых, специализированных средств визуализации. Разработка и адаптация таких средств становятся необходимым условием для оперативного анализа и эффективного управления в условиях реализации задач по повышению производительности труда.

Актуальность настоящего исследования обусловлена необходимостью перехода организаций к управлению на основе данных (data-driven management), ключевым элементом которого является оперативный мониторинг KPI с использованием дашбордов.

Новизна работы заключается в разработке и адаптации набора кастомных JS-виджетов для платформы Visiology, обеспечивающих визуализацию трёх связанных величин (план, факт, структурная доля) на одной диаграмме. В отличие от существующих подходов, предложенные виджеты реализуют метод «узкой полосы» с эмпирически обоснованным соотношением 65/35 для распределения пространства между полосами и текстом, а также алгоритм вертикального центрирования серий с фиксированным отступом.

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

Для достижения поставленной цели решаются следующие задачи:

– определение функциональных и нефункциональных требований к кастомным виджетам для отображения трёх связанных величин;

– разработка кастомных JS-виджетов для платформы Visiology;

– апробация разработанных виджетов на примере ФГБОУ ВО «Югорский государственный университет» с интеграцией в дашборд управления образовательной деятельностью.

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

РЕЗУЛЬТАТЫ И ОБСУЖДЕНИЕ

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

Метрика уровня L₁ – показатель, описываемый одной числовой величиной (например, общая численность контингента, средний балл успеваемости, доля преподавателей с учёной степенью). Для визуализации L₁-метрик стандартные BI-средства предлагают KPI-индикаторы, спидометры, плитки с числами – этого достаточно для оперативного мониторинга.

Метрика уровня L₂ – показатель, требующий сравнения двух величин, (например, план и факт приёма, текущее и прошлогоднее значение, бюджет и фактическое исполнение). Для визуализации L₂-метрик наиболее адекватным инструментом является группированная столбчатая диаграмма или линейчатая диаграмма с двумя рядами. Данный тип диаграмм позволяет разместить два столбца рядом для каждой категории, что обеспечивает наглядное сравнение.

Метрика уровня L₃ – комплексный показатель, включающий одновременно три связанные величины: плановое значение, фактическое значение и структурную долю внутри фактического или планового значения. Примером данного уровня служит анализ контингента: план приёма, факт приёма, доля очников среди зачисленных в образовательной деятельности университета.

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

Гистограмма успешно решает задачи визуализации метрик уровней L₁ и L₂. Для L₁ она обеспечивает отображение величины по категориям, для уровня L₂ – сравнение двух величин с использованием группировки, когда два столбца размещаются рядом.

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

Таким образом, существующий разрыв между потребностью в анализе L₃-метрик и возможностями стандартных BI-визуализаций требует разработки специализированных решений. Именно эту задачу решают предлагаемые в данной работе кастомные виджеты, в частности метод «узкой полосы», который позволяет разместить три величины в рамках одной строки, сохраняя наглядность и скорость восприятия.

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

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

В результате сформулированы следующие требования к адаптируемым виджетам:

1. Информативность. Виджет должен обеспечивать одновременное отображение трёх метрик (левой, правой и узкой величин) без потери читаемости.
2. Масштабируемость. Время рендеринга виджета не должно превышать 500 миллисекунд для 100 строк данных. Как свидетельствуют исследования восприятия задержек в пользовательских интерфейсах, задержка до 100 миллисекунд воспринимается пользователем как мгновенная, в интервале 100–300 миллисекунд – как заметная, а при превышении 300 миллисекунд – как «зависание» системы.
3. Интерактивность. Клик по строке виджета должен инициировать фильтрацию всего дашборда по выбранной категории. Данное требование опирается на принцип «связанных видов», который признаётся одним из ключевых в области интерактивной визуализации данных.
4. Гибкость. Разработчик дашборда должен иметь возможность настраивать визуальное представление виджета без внесения изменений в программный код. Анализ типовых сценариев использования выявил необходимость в настройке цветовой схемы, форматов отображения чисел, единиц измерения, высоты полос и величины отступов.
5. Универсальность. Виджет должен быть применим в любой предметной области, где требуется анализ типа «план-факт» с одновременным учётом структурной характеристики, без необходимости модификации программного кода. Универсальность достигается за счёт работы с безразмерными величинами без привязки к отраслевой логике.

В соответствии с данными требованиями и предложенной классификацией метрик авторами разработано пять кастомных виджетов для платформы Visiology. Реализация всех виджетов выполнена на языке JavaScript с использованием API visApi и метода TextRender() для рендеринга.

Компонент пользовательского интерфейса «KPI для числа»

Предназначен для отображения одной числовой метрики с возможностью сравнения с целевым значением и отображения динамики (рисунок 1). Применяется для мониторинга таких показателей, как общий контингент, объём финансирования, количество ППС.

 

Рисунок 1. Виджет «KPI для числа»

 

Для апробации разработанных виджетов использовались тестовые данные, аналогичные по структуре реальным показателям деятельности Югорского государственного университета (контингент обучающихся, плановые и фактические значения приёма, распределение по формам обучения, численность профессорско-преподавательского состава). Все числовые значения, отображаемые в виджетах на рисунках 1–9, являются демонстрационными и приведены исключительно для иллюстрации работы виджетов.

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

Все настраиваемые параметры виджета (цвет, размер шрифта, единицы измерения, количество десятичных знаков) вынесены в интерфейс параметров платформы Visiology (рисунок 2).

 

Рисунок 2. Листинг обработки данных для виджета «KPI для числа»

 

Компонент пользовательского интерфейса «KPI с процентной шкалой»

Предназначен для компактного отображения ключевого числового показателя в сочетании с относительной величиной – процентом выполнения, долей или динамикой. Ключевой особенностью виджета является реализованная логика обработки процентного значения. В отличие от многих стандартных KPI-виджетов, которые либо игнорируют отрицательные значения, либо отображают их некорректно, предложенное решение обеспечивает полноценную визуализацию как положительной, так и отрицательной динамики с автоматической цветовой индикацией (рисунок 3). При отрицательном проценте цвет шкалы автоматически переключается на красный, а ширина заполнения вычисляется по абсолютной величине, тогда как в текстовой подписи сохраняется знак «минус». При превышении процентным значением 100 % ширина шкалы ограничивается 100 % – это предотвращает визуальные искажения, вызванные выбросами данных, при этом фактическое значение перевыполнения остаётся видимым в текстовой подписи.

 

Рисунок 3. Виджет «KPI с процентной шкалой»

 

Ширина шкалы определяется по формуле:

$W=min\left(\mathrm{100,}\max \right(\mathrm{0,}{F}_P\left)\right),$где $F_P=\left\{\begin{array}{c}\left|P\right|, если P <0\\ \mathrm{100,} если P>0\\ P, иначе \end{array}\right.$

где P – исходное процентное значение.

Реализация описанной логики представлена на рисунке 4.

 

Рисунок 4. Листинг кода виджета «KPI с процентной шкалой»

 

Компонент пользовательского интерфейса «Сравнительная диаграмма с узкой полосой»

Предназначен для одновременного сравнения двух показателей с отображением структурной доли целевой подгруппы внутри одного из них. Ключевая идея виджета заключается в реализации метода «узкой полосы», который решает проблему отображения трёх связанных величин на одной диаграмме. На примере (рисунок 5) левая полоса показывает средний балл успеваемости обучающихся по высшей школе. Правая полоса отображает общее число выпускников соответствующей школы. Узкая полоса, расположенная внутри правой полосы, представляет количество выпускников, получивших диплом с отличием (красный диплом). Цвета левой, правой и узкой полос настраиваются через соответствующие параметры виджета.

 

Рисунок 5. Виджет «Сравнительная диаграмма с узкой полосой»

 

В процессе тестирования виджета на данных Югорского государственного университета было эмпирически обосновано распределение ширины области виджета в пропорции 65 % под полосы и 35 % под текстовые подписи. Данное соотношение обеспечивает оптимальный баланс между наглядностью графического представления и полнотой текстовой информации (рисунок 6).

 

Рисунок 6. Листинг кода по расчёту полос и рендера

 

Центрирование узкой полосы по вертикали реализовано с помощью CSS-правил top: 50%; transform: translateY(-50%). Данный подход обеспечивает корректное отображение узкой полосы независимо от высоты основной полосы. Расчёт ширины полос для каждой категории выполняется по формулам, предусматривающим нормирование относительно максимальных значений по всем категориям. Например, если в одной высшей школе 50 выпускников, а в другой – 100, то вторая полоса будет в два раза длиннее. Такое нормирование позволяет корректно сравнивать данные даже тогда, когда показатели разных категорий сильно отличаются по величине.

При клике на любую область строки виджета срабатывает механизм двусторонней фильтрации. Он реализован через API visApi.sendFilter(), в рамках которого значение категории передаётся в глобальные фильтры BI-системы.

Компонент пользовательского интерфейса «Диаграмма с меткой»

Предназначен для визуального контроля достижения плановых показателей или целевых нормативов путём сопоставления фактического значения с заданным эталоном (рисунок 7).

 

Рисунок 7. Виджет «Диаграмма с меткой»

 

Типовым примером использования служит анализ сохранности контингента обучающихся. Базовая полоса отображает исходную численность студентов на начало учебного года (например, на 1 сентября). Вертикальная метка (маркер) позиционируется на уровне, соответствующем текущей численности студентов на момент анализа (например, после зимней сессии или при переходе на следующий курс). Такое визуальное решение позволяет быстро оценить, насколько фактическая сохранность контингента соответствует целевому нормативу.

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

 

Рисунок 8. Позиционирование метки для виджета «Диаграмма с меткой»

 

Компонент пользовательского интерфейса «Диаграмма в диаграмме»

Предназначен для анализа доли структурной подгруппы в общем показателе. Базовая полоса отображает общее значение показателя для каждой категории. Внутри неё размещается сравнительная цветная полоса меньшей высоты, показывающая значение, относящееся к целевой подгруппе.

В контексте анализа кадрового состава университета базовая полоса может отображать общую численность профессорско-преподавательского состава (ППС) по каждой высшей школе, а сравнительная полоса – численность остепенённых ППС (имеющих учёную степень кандидата или доктора наук) в той же категории.

Такое визуальное решение позволяет одновременно оценивать как абсолютное количество остепенённых сотрудников (длина базовой полосы), так и их долю относительно общей численности ППС (положение и длина сравнительной полосы внутри базовой). Например, если сравнительная полоса занимает половину базовой, это означает, что в данной категории 50 % преподавателей имеют учёную степень (рисунок 9).

 

Рисунок 9. Виджет «Диаграмма в диаграмме»

 

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

 

Рисунок 10. Листинг кода виджета «Диаграмма в диаграмме»

 

Фиксированный отступ между полосами, равный 2 пикселям, был выбран эмпирически в процессе тестирования виджета. При отступе в 1 пиксель полосы визуально сливались, а при отступе в 3 и более пикселей сравнительная полоса выходила за пределы базовой полосы, нарушая целостность визуальной композиции. Значение в 2 пикселя обеспечивает оптимальный баланс – полосы остаются различимыми, а общая высота сравнительной полосы остаётся компактной и полностью размещается внутри базовой полосы.

ЗАКЛЮЧЕНИЕ И ВЫВОДЫ

Проведённое авторами исследование было направлено на адаптацию набора кастомных виджетов визуализации данных, обеспечивающих отображение трёх связанных величин на одной диаграмме. Поставленная цель достигнута: разработана трёхуровневая классификация управленческих метрик, предложен метод «узкой полосы» с эмпирически обоснованным соотношением 65/35 для распределения пространства между полосами и текстом, а также разработано пять кастомных JS-виджетов для платформы Visiology, охватывающих все три уровня метрик. Разработанные виджеты были применены при создании дашборда управления образовательной деятельностью в ФГБОУ ВО «Югорский государственный университет».

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

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

About the authors

Valeriy A. Samarin

Yugra State University

Email: V_Samarin@ugrasu.ru

Candidate of Engineering Science, Associate Professor, Associate Professor at the Engineering School of Digital Technologies

Russian Federation, Khanty-Mansiysk

Olga V. Samarina

Yugra State University

Author for correspondence.
Email: samarina_ov@mail.ru

Candidate of Physics and Mathematics, Associate Professor, Associate Professor at the Engineering School of Digital Technologies

Russian Federation, Khanty-Mansiysk

References

Supplementary files