СРАВНЕНИЕ СЕРВЕРНОЙ И КЛИЕНТСКОЙ АГРЕГАЦИИ KPI В КОРПОРАТИВНОМ ДАШБОРДЕ (NUXT + ECHARTS)

COMPARING SERVER-SIDE AND CLIENT-SIDE KPI AGGREGATION IN A CORPORATE DASHBOARD (NUXT + ECHARTS)

Bekmuratova Anastasiya Yuryevna

student, Department of PIKS, Belarusian State University of Informatics and Radioelectronics,

Belarus, Minsk

Khoroshko Vitaliy Viktorovich

scientific supervisor, PhD (Engineering), Associate Professor, Head of the Department of PIKS, Belarusian State University of Informatics and Radioelectronics,

Belarus, Minsk

АННОТАЦИЯ

В статье рассмотрен практический подход к построению корпоративного веб-дашборда на основе Nuxt и Apache ECharts с двумя вариантами подготовки данных: серверной агрегацией KPI и агрегацией в браузере. На экспериментальном стенде сравниваются объём передаваемых данных (payload) и временные метрики получения и отображения результатов при горизонтах 60, 180 и 365 дней. Показано, что перенос агрегации на сервер снижает payload на два порядка и упрощает масштабирование при реальных сетевых ограничениях.

ABSTRACT

The paper presents a practical approach to building a corporate web dashboard with Nuxt and Apache ECharts using two data-preparation strategies: server-side KPI aggregation and browser-side aggregation. An experimental benchmark compares payload size and timing metrics for 60, 180 and 365-day horizons. The results show that moving aggregation to the server reduces payload by roughly two orders of magnitude and improves scalability under real network constraints.

Ключевые слова: корпоративная аналитика, дашборд, Nuxt, Apache ECharts, агрегация данных, производительность, payload.

Keywords: corporate analytics, dashboard, Nuxt, Apache ECharts, data aggregation, performance, payload.

Корпоративные дашборды должны показывать KPI за выбранный период быстро и предсказуемо, особенно при доступе с мобильных устройств. Для прототипирования удобны Nuxt и Apache ECharts [1; 3], однако производительность определяется не только библиотекой графиков, но и тем, где выполняется агрегация исходных данных.

В работе сравниваются две стратегии подготовки данных. В режиме server серверное API возвращает уже агрегированные временные ряды (например, выручку и количество заказов по дням). В режиме client браузер получает «сырые» события и сам группирует их, формируя те же точки для графика. Оба режима дают одинаковое число точек (days+1), но отличаются объёмом исходных данных.

Экспериментальный стенд инструментирован по стадиям: serverCompute, fetch, clientAgg, render и payload. Такой разбор позволяет отделить сетевые затраты от вычислений и визуализации. Измерения выполнялись при периодах 60, 180 и 365 дней при фиксированном seed, а интерфейс включал три графика: временной ряд KPI, распределение по категориям и долю каналов.

Результаты для opt=on показали, что в режиме client объём ответа растёт вместе с числом событий: 287 025 байт для 60 дней и 1 760 455 байт для 365 дней. В режиме server ответ остаётся компактным и составляет 1 860–9 143 байт, так как содержит только агрегированные ряды. Сравнение сведено в табл. 1.

Несмотря на то что локально (localhost) время render может быть сопоставимым в обоих подходах, в реальных сетевых условиях доминирует передача и парсинг ответа. Оценка по формуле t = S / B показывает, что переход от килобайт к мегабайтам быстро добавляет заметные задержки, а также повышает пиковое потребление памяти в браузере.

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

Таблица 1.

Сравнение режимов агрегации (opt=on).

Список литературы:

1. Apache ECharts. Documentation. URL: https://echarts.apache.org/ (дата обращения: 10.01.2026).
2. MDN Web Docs. Performance API. URL: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API (дата обращения: 10.01.2026).
3. Nuxt. Documentation. URL: https://nuxt.com/docs (дата обращения: 10.01.2026).