SVG: виджет для нестандартных элементов в BI

15 Февраль 2023
Привет! На связи команда платформы для создания аналитических приложений Insight. Недавно мы придумали и запустили виджет SVG, чтобы разработчики перестали изобретать колеса, а бизнес мог сэкономить на кастомной разработке. Рассказываем, что получилось.

Секретный датасет

Недавно к нам в руки попало несколько датасетов с континента Вестерос. Почему бы не создать карту, которая позволит перемещаться между домами из “Игры престолов”, попутно получая инсайты о героях — предложили наши аналитики. И заодно протестировать виджет SVG, который появился в low-code конструкторе нашей BI-платформы. Сказано — сделано!

SVG — язык разметки векторной и векторно-растровой двухмерной графики, который поддерживает анимацию и интерактивность.

Карта Вестероса — это и есть виджет SVG, где каждый регион является отдельным объектом. Цветом выделяются территории, которые относятся к определенным домам. С картой можно взаимодействовать. Например, переключаться между домами и  фильтровать контент, который выводится на дашборде справа. 

Что на карте Вестероса

По сюжету “Игры престолов” семь королевств поделены между множеством благородных и великих домов. Тем, кто не проштудировал все вышедшее из-под пера автора саги Джорджа Мартина, а сериал смотрел эпизодически, может быть интересна самая основная информация. 

Поэтому на карту мы поместили девять основных домов: 

  • Старк
  • Таргариен
  • Аррен
  • Грейджой
  • Ланнистер
  • Тирелл
  • Мартелл
  • Баратеон
  • Талли.
По клику на иконку дома открываются подробные данные. Девиз, глава, наследник, замок, территория, описание герба, вера, дата основания, основатель.

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

“Игра престолов” вообще немыслима без сражений. Битву между армиями Рамси Болтона и Джона Сноу в конце шестого сезона сериала, например, признали самой эффектной в истории телевидения. Мы сделали “военную” аналитику, в которой показано, сколько персонажей автор умертвил в каждой книге и разбили причины их гибели по категориям.

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

Плюсы SVG

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

Долгое время векторные изображения SVG были не слишком популярны, так как поддерживались не всеми браузерами, но сейчас эта проблема решена. Поэтому формат активно применяется в веб-разработке и для создания разных приложений. Чтобы не тратить на однотипные задачи время дорогих Javascript-разработчиков, как раз и удобны такие инструменты, как виджет.

В Insight виджет SVG является компонентом low-code конструктора. В виджет можно превратить любую картинку. Размеченные объекты, из которых она состоит, затем можно параметризировать: стилизовать, фильтровать, подсвечивать, выводить подписи и так далее. 

Например, на карте Вестероса объектами являются отдельные регионы и области. Объекты SVG связываются с данными и фильтрация контента идет по переменной, которая отправляется из карты. 

В конструкторе Insight кастомный виджет SVG делается в несколько простых шагов. Нужно:

  1. Выбрать или отрисовать картинку.
  2. Присвоить объектам, из которых состоит картинка, ключи (ID). 
  3. Загрузить картинку в редактор. 
  4. Подключить в настройках дата-сеты с объектами SVG.

Еще один пример

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

Затем загружаем изображение пирамиды в редактор Insight и связываем ее части (SVG-объекты) с данными. Вуаля — интерактивный фильтр готов! Можно выбрать разные цвета, сделать особые границы при наведении, задать события, которые будут тригериться при нажатии, например, вывод поп-апа. 

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

Итого

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

Мы постарались снизить стоимость, сроки и пользовательский порог для создания аналитических приложений качества pixel perfect с нестандартными элементами. Больше не нужно ждать роудмэпа и разработки. При условии, что данные и картинка подготовлены, весь процесс создания интерактивного виджета в Insight займет от нескольких минут до нескольких часов.

Мы задумывали виджет SVG в первую очередь как инструмент для навигации и фильтрации, но это не единственные варианты его использования. Для каких еще сценариев может пригодиться такой виджет? Делитесь в комментариях!