Кастомная визуализация данных для ситуационного центра службы «Честный знак»

Задача

Перед нами стояла задача создать широкоформатный дашборд для главного офиса службы маркировки и прослеживания товаров «Честный знак». Эта система цифровой маркировки позволяет не только защитить потребителей от подделок, но и подробно отслеживать показатели всего объема товаров: сроки годности, изменения цены, кол-во товаров в наличии.

Начальный этап работы

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

На первом этапе работы мы определили ключевые задачи:

Что мы сделали

Мы разработали многостраничный дашборд для оперативного принятия решений и управления процессами, а также для презентации первым лицам государства. Не личный кабинет аналитика, не классическое веб-решение — а сложный интерактивный продукт. Визуализация данных позволяла отслеживать эффективность работы системы маркировки, изменения в количестве товара в регионах и многое другое. В процессе работы дашборд постепенно расширялся и на данный момент состоит из 11 разделов, в каждом из которых регулярно обновляются данные по 22 товарным группам. При этом количество товарных групп продолжает расти, и к концу 2025 года к ним добавится несколько из 15 текущих пилотных проектов службы.

Цветовые решения

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

Раздел 1: Оборот товаров

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

В левой части экрана в формате таблицы представлена аналогичная информация, но уже по отдельным товарным группам. Для удобства поиска мы объединили 22 товарных группы в 4 метагруппы: пищевую, непищевую, акцизную и социальную. Можно было отфильтровать данные по интересующей категории. Справа располагается рейтинг Федеральных органов исполнительной власти РФ (ФОИВ), формирующийся по результатам выполнения поручений.

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

Раздел 2: Остатки на складах

Центральную часть экрана занимает интерактивная карта РФ, где каждый регион отмечен диаграммой, заполнение которой отображает текущий запас товаров разных групп на данной территории. Границы региона также выделяются одним из трех цветов: синий (запасов хватит меньше, чем на месяц), голубой (1-3 месяца) и зеленый (> 3 месяцев).

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

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

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

Раздел 3: Контроль и Безопасность

Одна из основных задач «Честного Знака» — контроль качества продаваемых продуктов и повышение легальной доли рынка. Раздел «Контроль и безопасность» позволяет следить за работой системы и делать выводы о ее эффективности. В нем отображаются продажи, заблокированные на кассе по какой-то причине. Например, если истек срок годности или товар возможно купить только до определенного времени дня.

Справа на странице расположен виджет с двумя вкладками. Первая переключается между окнами «продаж заблокировано» и «нарушений выявлено» с помощью центральных виджетов на экране. В числе оснований для остановки продажи: отсутствие сведений о коде или нанесении, запрет ОГВ, повторные продажи, истечение срока годности и т.д. Вторая вкладка «Введенные запреты» показывает, какие контроли уже введены и для каких групп, какие планируются и будут введены, и какие не планируется вводить.

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

Раздел 4: Доля товарных групп

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

Раздел 5: Бюджет

Еще одна важная задача службы «Честный знак» заключается в том, чтобы через легализацию рынка упростить расчеты бюджета: сделать более прозрачными данные о пополнениях, НДС, таможенных выплатах и налоге на прибыль. Линейная диаграмма отражает доли этих источников поступлений средств и дополняется графиком, который показывает динамику последних лет. В левой части экрана детализированы данные о пополнении бюджета по каждой товарной группе.

Раздел 6: KPI

Для каждой товарной группы и для всех ФОИВ есть определенное количество задач. Шестой раздел позволяет отслеживать эффективность их выполнения. В нем в виде графиков отражено соотношение запланированных и реальных показателей, как общих, так и по конкретным товарным группам. Центральная диаграмма показывает, какое количество задач было выполнено в срок, какое — с незначительной или большой задержкой. На виджете справа с помощью линейной диаграммы можно посмотреть KPI по каждому ФОИВ: первая линия отражает плановый показатель, а вторая фактический. Также для некоторых задач есть месячные разрезы, в этом случае есть только линия фактических KPI.

Раздел 7: Проверки товаров

«Честный знак» дает возможность любому потребителю через приложение на телефоне самостоятельно проверить товар: считать уникальный код маркировки и получить подробную информацию о производстве, составе и сроки годности. Если реальные данные не совпадают с заявлениями продавца, клиент может подать жалобу — и она появится в системе дашборда. Выделяется два типа жалоб: обработанные органами власти, которые в свою очередь делятся на выявленные нарушения и невыявленные; а также те, что урегулированы с бизнесом. Данные отражены на диаграмме и на графике, который показывает динамику во времени. По этой странице можно сделать вывод о том, какое количество жалоб проверяется органами власти и насколько хорошо на них реагирует бизнес.

Раздел 8: География и импорт

В этом разделе на интерактивная карте мира цветными линиями показаны страны, которые импортируют наибольшее количество товаров в РФ. Мы использовали данные не только о том, где товар был произведен, но и о том, через какую страну его ввезли. В правой части экрана в таблице выведен топ стран-импортеров по определенным товарным группам (с указанием доли импорта). Дополнительные фильтры позволяют посмотреть данные по странам-членам БРИКС, СНГ, ЕАС и тд., а также сгруппировать страны по признаку дружественных и недружественных. При клике на область страны на карте появляется отдельная вкладка по импорту из этой страны: к каким группам принадлежат ввезенные товары и сколько процентов рынка занимают.

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

Раздел 9: Производство и импорт

Страница отображает доли собственного и контрактного производства товаров в стране, а также динамику их изменения. Первые принадлежат торговым маркам, зарегистрированным на территории РФ, вторые — зарубежным производителям. Данные по импортному производству распределяются по группам «дружественные», «недружественные» и страны ЕАС.

Раздел 10: Наценки

На общей карте с помощью цветового кодирования визуально отображено, насколько в каждом из регионов конечная цена товара увеличивается от себестоимости. С помощью меню фильтрации можно выбрать одну или все товарные группы и посмотреть процентный уровень наценки: границы региона выделяются цветом (15-50% наценки — зеленый, 50-100% — синий, больше 100% — фиолетовый). В данном случае опция мультивыбора оказалась недоступна, потому что показатели представлены в процентах, и при подсчетах для нескольких товарных групп конечные данные будут не актуальны. Также можно посмотреть данные по разным типам наценки: оптовой, розничной и совокупной, среднему показателю между первыми двумя.

Раздел 11: Раздел ценообразования

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

Работа с данными

Мы работали с базой данных, собранной и обновляемой службой «Честный знак» по всем маркированным товарам.