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

Популярная платформа с открытым исходным кодом DSpace [1] предназначена для работы с научными данными, предоставляя широкий набор инструментов оперирования метаданными и средства настройки прав доступа. Среди ее преимуществ можно отметить гибкую архитектуру [2], поддержку множества форматов, а также наличие активного сообщества, которое постоянно работает над развитием и улучшением платформы. Однако в штатном наборе функций DSpace отсутствуют средства визуализации данных, что затрудняет ее использование для анализа и представления информации. Без развитых средств визуализации пользователи сталкиваются с трудностями при восприятии и анализе больших объемов данных — только текстовое или табличное представление информации не всегда наглядно и прозрачно передает тенденции и взаимосвязи.

Для визуализации данных в DSpace необходимо их передать в библиотеку с открытым исходным кодом Chart.js, позволяющую строить различные типы диаграмм, включая столбчатые графики, линейные диаграммы, круговые и другие. Библиотека интегрируется с фреймворками, такими как открытая и свободная платформа для разработки веб-приложений Angular [3], и обеспечивает адаптивное отображение графиков на устройствах с разными параметрами экрана.

Первый способ извлечения данных из репозитория — REST API DSpace, позволяющий запрашивать данные в структурированном формате, но он ограничен механизмом разбиения данных на страницы с указанием их размера и смещения (пагинацией). Второй — прямое обращение к базе данных DSpace. Пагинация, используемая в DSpace, усложняет процесс формирования запросов к его API, поэтому для ее обхода и получения необходимых данных был разработан сервис, который обращается непосредственно к базе DSpace, извлекая данные, формируя их в формате JSON и размещая на веб-сервере DSpace. Сервис выполняет регулярные запросы к базе через планировщик задач cron, что обеспечивает непрерывное обновление данных на веб-сервере для визуализации.

В качестве платформы создания веб-приложений в DSpace используется Angular, позволяющая расширять функциональность системы и интегрировать дополнительные компоненты, включая средства визуализации данных. Angular предоставляет мощные инструменты для создания динамичных и интерактивных пользовательских интерфейсов, что облегчает внедрение сложных графических элементов, таких как графики и диаграммы. Один из таких инструментов — библиотека Chart.js [4], обладающая богатыми средствами построения графиков и диаграмм различных типов.

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

Компонент в Angular — это основная строительная единица, которая представляет собой связанный блок пользовательского интерфейса, управляющий отображением и логикой на определенном участке страницы. Компонент состоит из шаблона (HTML), который описывает структуру и элементы интерфейса; логики TypeScript — языка программирования, расширяющего JavaScript, который отвечает за поведение компонента, обработку данных и взаимодействие с сервисами; стилей (Cascading Style Sheets, CSS), задающих внешний вид, расположение элементов и адаптацию под разные устройства. Компонент инкапсулирует логику, связанную с тем, как должно выглядеть и вести себя приложение.

Сервис в Angular — это класс, предоставляющий данные или логику, которую можно использовать в разных компонентах. Сервисы обычно используются для выполнения операций, таких как обработка данных, HTTP-запросы, хранение состояний и логика работы с API. Сервисы позволяют организовать код и логику в независимые от компонента блоки, что делает приложение более масштабируемым.

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

Архитектура компонента и сервиса Angular

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

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

Рис. 1. Порядок работы компонента и сервиса Angular с сервисом данных

Взаимодействие компонента и сервиса Angular с сервисом данных происходит через сервис Angular (рис. 1). Сервис данных напрямую обращается к базе данных DSpace, извлекая данные, преобразуя их в формат JSON и размещая на веб-сервере DSpace для последующего использования. Взаимодействие между компонентом и сервисом, в рамках приложения Angular, в свою очередь, осуществляется через механизмы подписки и асинхронных HTTP-запросов. Подписка — это механизм уведомления компонента о событиях, происходящих в системе без активного запроса данных. Асинхронные HTTP-запросы выполняются в фоновом режиме, не блокируя главный поток программы. Алгоритм работы Angular с сервисом данных можно разделить на несколько ключевых этапов (рис. 1).

Извлечение и подготовка данных. Сервис данных извлекает статистические показатели публикационной активности из базы данных DSpace (статистика публикаций за несколько лет, различные типы публикаций и пр.). Эти данные преобразуются в структурированный формат JSON, что позволяет сохранить все семантические связи и метаданные. Такой подход обеспечивает корректную обработку и представление данных в дальнейшем. После преобразования данные размещаются на сервере DSpace, что обеспечивает их доступность для программного интерфейса и дальнейшего использования в визуализации.

Инициализация компонента и запрос данных в Angular. В процессе инициализации компонента Angular происходит запрос данных, которые необходимы для построения графиков. Это осуществляется через сервис Angular, который запрашивает данные у веб-сервера DSpace. При загрузке компонента метод сервиса вызывается для получения данных для визуализации. Компонент подписывается на поток данных и после выполнения запроса ожидает их получения в виде JSON-объектов, подготовленных для визуализации.

Обработка данных сервисом Angular. Когда компонент отправляет запрос, сервис инициирует HTTP-запрос к серверу DSpace для получения требуемых данных. Ответ приходит в формате JSON. Процесс обработки данных включает фильтрацию, агрегацию, а также преобразование меток и значений в необходимый для визуализации формат. В случае ошибок, например, при сбоях в запросах, сервис предусмотрительно обрабатывает исключения и передает компоненту либо значения по умолчанию, либо пустые данные, что исключает возможные сбои в работе приложения.

Передача данных компоненту Angular. После обработки данных сервис передает их обратно в компонент, который подписан на изменения в потоке данных. Как только данные становятся доступными, они автоматически передаются компоненту для рендеринга. Компонент, в свою очередь, передает эти данные в библиотеку Chart.js, которая преобразует их в графическое представление. Использование механизма Angular Change Detection, который позволяет автоматически обновлять графики при изменении данных, обеспечивает динамическую визуализацию, реагирующую на любые обновления или изменения в данных.

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

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

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

Рис. 2. Пример визуализации страницы цифрового репозитория

Пример результата работы компонента и сервиса Angular с сервисом данных представлен на рис. 2.

***

Представленный алгоритм работы компонента и сервиса Angular предлагает гибкое, масштабируемое решение для визуализации данных цифрового репозитория. Разделение ответственности между компонентом и сервисом, а также их взаимодействие обеспечивают стабильную работу системы и возможность масштабирования. Механизмы обработки ошибок и отказоустойчивости гарантируют продолжение работы приложения даже при сбоях. Взаимодействие с библиотекой Chart.js позволяет не только визуализировать, но и динамично обновлять данные. В целом этот алгоритм предоставляет надежное и производительное решение для визуализации данных в веб-приложениях. На сегодняшний день предложенная система визуализации данных работает на платформе цифрового репозитория ОИЯИ.

Литература

1. Bondyakov, Aleksey Sergeevich; Kondrayev, Andrey Olegovich. Архитектура цифрового репозитория публикаций на платформе DSpace. Современные информационные технологии и ИТ-образование, [S.l.], v. 20, n. 3, oct. 2024. ISSN 2411-1473. URL: http://sitito.cs.msu.ru/index.php/SITITO/article/view/1083 (дата обращения: 09.08.2025).

2. Андрей Кондратьев, Алексей Бондяков. Автоматизированный сбор и систематизация публикаций // Открытые системы.СУБД. — 2024. — № 1. — С. 49–51. URL: https://www.osp.ru/os/2024/01/13058272 (дата обращения: 19.08.2025).

3. G. Geetha, M. Mittal, K. M. Prasad and J. G. Ponsam, «Interpretation and Analysis of Angular Framework,» 2022 International Conference on Power, Energy, Control and Transmission Systems (ICPECTS), Chennai, India, 2022, pp. 1–6. URL: https://doi.org/10.1109/ICPECTS56089.2022.10047474 (дата обращения: 09.07.2025).

4. Официальная документация о библиотеке Chart.js. URL: https://www.chartjs.org/docs/ (дата обращения: 09.08.2025).

Алексей Бондяков (aleksey@jinr.ru) — старший научный сотрудник, Андрей Кондратьев (kondratyev@jinr.ru) — младший научный сотрудник, Объединенный институт ядерных исследований (Дубна).

DOI: 10.51793/OS.2025.29.38.004