Дашборд аналітики на Vue.js для 1С-Бітрікс: кейс та впровадження

Багато керівників інтернет-магазинів на 1С-Бітрікс стикаються з тим, що стандартні звіти просто не дають оперативної картини. Щоразу доводиться відкривати кілька розділів, вивантажувати дані в Excel і зводити вручну. Ми пропонуємо інший підхід — кастомний дашборд на Vue.js, який агрегує дані з усіх потрібних джерел і оновлюється в реальному часі. Такий інструмент дозволяє бачити ключові метрики (виручку, кількість замовлень, середній чек, конверсію) на одному екрані без перезавантаження сторінки. Наш досвід показує, що впровадження дашборду скорочує час підготовки звітів до нуля.

Чому Vue.js для дашборду?

Vue.js з Chart.js або ECharts дає інтерактивні графіки без повного перемальовування сторінки. Компонентний підхід дозволяє перевикористовувати віджети та легко додавати нові. Бітрікс-розробнику достатньо базового знання Vue, щоб за пару днів зібрати працюючий прототип. Крім того, Vue-додаток можна розмістити прямо в адмінці Бітрікса, не змінюючи архітектуру ядра.

Які дані можна об'єднати на дашборді?

Реальний дашборд рідко обмежений однією системою. Ми агрегуємо:

• Замовлення та виручка — b_sale_order, b_sale_basket через D7
• Трафік — Yandex.Metrika API або Google Analytics 4 Data API
• CRM-показники — через Bitrix\Crm\DealTable
• Рекламні витрати — Яндекс.Директ API, VK Ads API

Кожне джерело — окремий composable з паралельним завантаженням через Promise.all. Vue-компонент отримує дані та відображає статус завантаження. Офіційна документація 1С-Бітрікс рекомендує D7 ORM для високонавантажених вибірок.

Звідки беруться дані

Бітрікс зберігає все необхідне в базі: замовлення в 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 і перезавантажують дані.

Інтеграція з кількома джерелами

У кожному composable використовуємо watchEffect для реактивного завантаження. Приклад для метрики:

// 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 };
}

Порівняння: Vue-дашборд рендериться в 5 разів швидше стандартної сторінки звітів завдяки віртуальному DOM (замість повного перезавантаження HTML).

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

Магазин електроніки на Бітріксі, 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. Економія часу керівника — до 40 хвилин на день (понад 10 годин на місяць).

Що входить в роботу

• Розробка REST-контролера з фільтрацією та правами доступу
• Створення набору Vue-віджетів (графіки, KPI-картки, таблиці)
• Інтеграція з зовнішніми API (Яндекс.Метрика, Google Analytics, рекламні майданчики)
• Налаштування тегованого кешування для швидкого завантаження
• Документація по розгортанню та навчання співробітників

Продуктивність запитів

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

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

Хочете отримати консультацію щодо впровадження дашборду? Зв'яжіться з нами — оцінимо ваш проект за один день.