Разработка дашборда аналитики на Vue.js для 1С-Битрикс

Разработка дашборда аналитики на Vue.js для 1С-Битрикс

Стандартные отчёты в административной панели Битрикса — это статичные HTML-таблицы, которые генерируются при каждом обновлении страницы. Для оперативного контроля бизнес-показателей этого недостаточно: нельзя изменить период без перезагрузки, нет визуализации трендов, данные из нескольких источников не агрегированы. Vue.js в связке с Chart.js или ECharts превращает данные Битрикса в живой дашборд.

Откуда берутся данные

Битрикс хранит всё необходимое в базе: заказы в b_sale_order, позиции в b_sale_basket, оплаты в b_sale_pay_system_action, покупатели в b_user. D7 ORM позволяет строить агрегирующие запросы напрямую через DataManager:

$result = \Bitrix\Sale\Internals\OrderTable::getList([
    'select' => [
        new \Bitrix\Main\ORM\Fields\ExpressionField(
            'TOTAL', 'SUM(%s)', 'PRICE'
        ),
        new \Bitrix\Main\ORM\Fields\ExpressionField(
            'COUNT', 'COUNT(*)', 'ID'
        ),
        'DATE_KEY' => 'DATE_INSERT',
    ],
    'filter' => [
        '>=DATE_INSERT' => $dateFrom,
        '<=DATE_INSERT' => $dateTo,
        '=STATUS_ID' => ['N', 'P', 'F'],
    ],
    'group' => ['DATE_KEY'],
]);

Кастомный REST-контроллер (наследник Bitrix\Main\Engine\Controller) принимает параметры периода и возвращает агрегированный JSON. Контроллер закрыт на checkPermissions — только пользователи с правом sale_order_view.

Структура Vue-дашборда

Дашборд строится из независимых виджетов — каждый Widget*.vue компонент самостоятельно загружает свои данные и отображает состояние загрузки. Родительский Dashboard.vue управляет только общим периодом через provide/inject.

Ключевые виджеты:

• RevenueChart — линейный или столбчатый график выручки по периодам (Chart.js line)
• OrdersKpi — карточки ключевых показателей: выручка, количество заказов, средний чек, конверсия
• TopProducts — горизонтальный bar chart топ-10 товаров по продажам
• FunnelWidget — воронка: посетители → добавили в корзину → оформили заказ → оплатили
• OrdersTable — последние заказы с пагинацией, быстрая ссылка на заказ в админке

Общий фильтр периода — DatePicker с предустановленными диапазонами («Сегодня», «Эта неделя», «Этот месяц», «Прошлый месяц», «Произвольный»). При изменении периода все виджеты получают watchEffect или watch на period из inject и перезагружают данные.

Интеграция с несколькими источниками

Реальный дашборд редко ограничен одной системой. Типичный стек данных для e-commerce на Битрикс:

• Заказы и выручка — b_sale_order, b_sale_basket через D7
• Трафик — Yandex.Metrika API или Google Analytics 4 Data API
• CRM-показатели — если стоит модуль crm, то CCrmDeal::GetList или Bitrix\Crm\DealTable
• Рекламные расходы — Яндекс.Директ API, VK Ads API, если настроены интеграции

В Vue каждый источник — отдельный composable:

// useMetrikaData.js
export function useMetrikaData(period) {
    const data = ref(null);
    const loading = ref(false);
    const error = ref(null);

    watchEffect(async () => {
        loading.value = true;
        try {
            data.value = await fetchMetrika(period.value);
        } catch (e) {
            error.value = e.message;
        } finally {
            loading.value = false;
        }
    });
    return { data, loading, error };
}

Параллельные запросы через Promise.all — дашборд не ждёт последовательно каждый источник.

Кейс: дашборд для руководителя интернет-магазина

Магазин электроники на Битриксе, 200-400 заказов в день. Проблема: директор ежедневно просил менеджеров собрать отчёт из 1С, панели Битрикса и Метрики. Процесс занимал 40 минут.

Разработали дашборд, доступный по URL /area51/dashboard/sales/ (в административной части Битрикса, под авторизацией). Технически — страница административного раздела через CAdminSection, на которую монтируется Vue-приложение.

Виджеты: выручка сегодня/вчера/7 дней с тренд-стрелкой, количество заказов по статусам (новые/в обработке/выполнены/отменены), топ-5 товаров за период, сравнение двух периодов на одном графике, показатель брошенных корзин (b_sale_basket с ORDER_ID IS NULL).

Данные по брошенным корзинам — собственный запрос, которого нет в штатных отчётах Битрикса:

SELECT DATE(DATE_INSERT) as day, COUNT(DISTINCT FUSER_ID) as abandoned
FROM b_sale_basket
WHERE ORDER_ID IS NULL
  AND DATE_INSERT >= NOW() - INTERVAL 30 DAY
GROUP BY day

Дашборд обновляется автоматически каждые 5 минут через setInterval — актуальные данные без F5. Время разработки — 3 недели с учётом всех виджетов и интеграции с Метрикой.

Производительность запросов

Агрегирующие запросы по b_sale_order на больших базах (от 100К заказов) требуют индексов. Проверяем через EXPLAIN:

• DATE_INSERT — индекс обязателен для фильтрации по периоду
• Составной индекс (STATUS_ID, DATE_INSERT) — для фильтрации по статусу и периоду одновременно
• Результаты тяжёлых агрегаций кешируем через Bitrix\Main\Data\Cache на 5-15 минут

Этапы и сроки

Сроки зависят от количества источников данных, сложности агрегаций и требований к кастомным визуализациям.