В последние годы анализ данных прошел путь от диаграмм в Excel до сложных интерактивных дашбордов, которые помогают принимать взвешенные решения. Одновременно с этим сформировалось устойчивое представление о дашборде как о наборе диаграмм, таблиц и фильтров, собранных в визуальном редакторе методом drag-and-drop. Этот подход действительно сделал аналитику доступной: он быстрый, понятный и не требует знаний в программировании.

Но! В нашей работе все чаще появляются нетривиальные задачи, поэтому помимо Self-Service мы, команда интерактивной аналитики Инновационного центра «Безопасный транспорт», находим новые способы реализации интересных проектов. В этой статье мы хотим поговорить о том, какую пользу приносит разработка в BI.

Начнем издалека. Ранее мы пытались создать дашборды с помощью drag-and-drop подхода, однако столкнулись с его ограничениями — от невозможности повторить дизайнерские макеты до отсутствия гибкой логики фильтрации и взаимодействий между элементами. Поэтому, проанализировав весь рынок BI-поставщиков, еще в 2022 году мы остановились на платформе Visiology. Ее ключевым преимуществом стало то, что она предоставила не только готовый стек технологий для управления данными (от etl до оптимизации вычислительного слоя) и набор стандартных визуализаций, но и инструменты для написания кастомных компонентов на JavaScript и CSS.

Благодаря этому платформа обеспечивает единый уровень комфорта и консистентности как при работе с WYSIWYG-редактором, так и при написании кода. Мы понимали, что наша BI-система должна поддерживать картосхемы и географические карты, а также создавать дашборды с безупречным UI и UX для презентаций. Поэтому мы пошли по пути написания кода. Мы начали мыслить в терминах компонентов, событий, реактивных цепочек и шаблонов повторного использования, то есть интегрировать в проекты:

• Централизованное управление стилями и логикой;

• Динамическую генерацию виджетов и окон;

• Событийную модель взаимодействия;

• Полный контроль жизненного цикла компонентов.

Чтобы качественно осуществить такой переход, мы пришли к гибридному подходу: для типовых элементов используем drag-and-drop, а для особых сценариев внедряем кастомный код, не меняя платформу, не теряя уже проделанную работу и используя все преимущества вычислительного слоя Visiology.

10 примеров комбинирования разработки и Self-Service на базе Visiology

Сейчас мы приведем 10 наиболее ярких примеров, которые подробнее рассмотрим в следующих статьях на Хабре.

Карты

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

• Leaflet легко встраивается и имеет открытый исходный код, однако у него нет собственного сервиса для настройки внешнего вида.

• 2ГИС имеет качественные стилизованные слои для российских городов. Но были конфликты при интеграции с Visiology, которые могут приводить к потере кликабельности карты.

Совмещая эти инструменты, мы приходим к техническим компромиссам.

Дизайн

Чтобы обеспечить полное соответствие дашбордов дизайнерским макетам, мы использовали собственные стили CSS. Такой подход позволил легко менять визуальное оформление дашбордов, не ограничиваясь доступными на платформе вариантами стилей.

HTML-компоненты

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

Такой инструмент позволил автоматически генерировать нужное количество одинаковых виджетов на основе шаблона.

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

К нам поступает большое количество проектов с различными задачами. И такой подход позволил создать удобный интерфейс для оперативной навигации по дашбордам с учетом прав пользователей.

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

Сложная фильтрация

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

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

Эпилог

Подводя итоги, можно сказать, что инженерный подход отлично дополняет BI, преодолевая ограничения drag-and-drop. В итоге на дашборде можно получить:

• Точность — соответствие строгим дизайн-требованиям;

• Гибкость — адаптацию под нестандартные сценарии;

• Масштабируемость — автоматизация и переиспользование вместо ad-hoc. Возможность не делать разовые правки «на скорую руку», а внедрить инструмент, который помогает решать типовые задачи как конвейер.

Нюансы инженерного подхода

Однако, как и любое решение, инженерный подход в BI имеет свои особенности. В своей практике мы отметили: 

1. Высокий порог квалификации

Работа с JavaScript, DOM, событиями, адаптивной версткой и асинхронными запросами требует соответствующего уровня подготовки. Аналитик, привыкший к drag-and-drop, не сможет мгновенно переключиться на инженерный подход без обучения и практики. Поэтому, если вы собираетесь выбирать этот путь у себя, необходимо инвестировать в развитие профессиональных навыков команды и переосмысление ролей внутри неё…конечно, если это вообще нужно, потому что большинство задач решаются и в режиме Self-Service — по крайней мере, на Visiology.

2. Рост технического долга

Код — мощный инструмент, но он требует порядка, как и любое инженерное занятие. Представьте, что каждый новый дашборд — это этаж в доме. Уверены, что многие читатели Хабра прекрасно знают, что такое трудно поддерживаемый код. Но если вы еще не сталкивались с этим, можно представить, что любой дашборд — это дом. Если возводить его стены без общего плана, меняя технологию на ходу, то часто получается так:

• Первый этаж сложили из кирпича,

• Второй — из брёвен «по-быстрому»,

• Третий —  «на скорую руку» из того, что было.

Со временем такой дом начинает оседать: двери перекашиваются, окна не закрываются, а каждое новое изменение требует всё больше усилий. И в этом кроется один из самых коварных аспектов перехода на разработку в BI. Ведь, пользуясь стандартными компонентами Visiology, вы получаете экосистему, где нет никакой необходимости следить за соответствиями и корректностью работы - за вас это делает вендор.

3. Необходимость в стандартах

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

Мы понимали, что внедрение JavaScript и CSS в Visiology — это не просто добавление новых инструментов, а переход на инженерный уровень зрелости, поэтому выстроили целую методологию, которая позволит систематизированно работать над проектами и понимать, как нужно пользоваться теми или иными инструментами.

Да, мы вкладываем большое количество сил, времени и ресурсов, чтобы выстроить такую слаженную систему работы, но в итоге мы получаем действительно устойчивые дашборды, сравнимые по стабильности со стандартными компонентами BI-платформы.

Заключение: стоит ли делать из дашборда самолет?

Инженерный подход — не для всех. Если ваша задача — быстро собрать отчёт из стандартных компонентов, то вам может подойти простой визуальный редактор. Однако, если вы работаете с амбициозными проектами, где важна тонкая настройка интерфейса, сложная логика и свобода визуализации — другого пути нет. При этом большой плюс в том, что в Visiology написание своих визуализаций продумано разработчиками и поддерживается платформой — это в разы экономит ресурсы, необходимые на развитие наших BI-проектов. 

Мы сделали выбор в пользу написания кода сознательно, и он открыл нам новые горизонты. Каждый день мы создаём дашборды для транспортного комплекса, где требования к качеству, скорости и надёжности исключительно высоки. В частности, над этим текстом вместе работали Алина Мальковская, начальник отдела интерактивной аналитики, Павел Орехов, front-end разработчик отдела интерактивной аналитики, Светлана Чобану, BI-разработчик отдела интерактивной аналитики, Юрий Андреев, бизнес-аналитик отдела интерактивной аналитики, Глеб Любавский, руководитель отдела Web-дизайна, а также Мария Денищук, экс-BI-разработчик отдела интерактивной аналитики ИЦ. Наша команда гордится тем, что смогла открыть для себя такое количество новых уникальных решений.

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