Розробка дашборду аналітики на 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 хвилин

Етапи та терміни

Терміни залежать від кількості джерел даних, складності агрегацій та вимог до кастомних візуалізацій.