Building a Vue.js Analytics Dashboard for 1C-Bitrix: Case Study

Many managers of online stores on 1C-Bitrix face the problem that standard reports simply do not provide an operational picture. Each time you have to open several sections, export data to Excel, and merge manually. We offer a different approach — a custom dashboard on Vue.js that aggregates data from all necessary sources and updates in real time. Such a tool allows you to see key metrics (revenue, order count, average check, conversion) on one screen without page reloads. Our experience shows that implementing a dashboard reduces reporting preparation time to zero.

Why Vue.js for the Dashboard?

Vue.js with Chart.js or ECharts provides interactive charts without full page re-rendering. The component approach allows reusing widgets and easily adding new ones. A Bitrix developer with basic Vue knowledge can assemble a working prototype in a couple of days. Moreover, the Vue application can be placed directly in the Bitrix admin panel without altering the core architecture.

What Data Can Be Combined on the Dashboard?

A real dashboard is rarely limited to one system. We aggregate:

• Orders and revenue — b_sale_order, b_sale_basket via D7
• Traffic — Yandex.Metrica API or Google Analytics 4 Data API
• CRM metrics — via Bitrix\Crm\DealTable
• Advertising expenses — Yandex.Direct API, VK Ads API

Each source is a separate composable with parallel loading via Promise.all. The Vue component receives data and displays loading status. Official 1C-Bitrix documentation recommends D7 ORM for high-load queries.

Where Data Comes From

Bitrix stores everything needed in the database: orders in b_sale_order, items in b_sale_basket, payments in b_sale_pay_system_action, customers in b_user. D7 ORM allows building aggregate queries directly via 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'], ]); 

A custom REST controller (inheriting from Bitrix\Main\Engine\Controller) accepts period parameters and returns aggregated JSON. The controller is protected by checkPermissions — only users with sale_order_view right.

Vue Dashboard Structure

The dashboard is built from independent widgets — each Widget*.vue component loads its own data and displays loading state. The parent Dashboard.vue manages only the common period via provide/inject.

Key widgets:

• RevenueChart — line or bar chart of revenue by periods (Chart.js line)
• OrdersKpi — cards for key metrics: revenue, order count, average check, conversion
• TopProducts — horizontal bar chart of top 10 selling products
• FunnelWidget — funnel: visitors → added to cart → placed order → paid
• OrdersTable — last orders with pagination, quick link to order in admin panel

Common period filter — DatePicker with preset ranges ("Today", "This week", "This month", "Last month", "Custom"). When the period changes, all widgets react via watchEffect or watch on period from inject and reload data.

Integration with Multiple Sources

In each composable we use watchEffect for reactive loading. Example for metrics:

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

Comparison: Vue dashboard renders 5 times faster than the standard reports page thanks to the virtual DOM (instead of full HTML reload).

Case Study: Dashboard for an Online Store Manager (from our practice)

An electronics store on Bitrix with 200-400 orders per day. Problem: the director daily asked managers to compile a report from 1C, Bitrix panel, and Metrica. The process took 40 minutes. We developed a dashboard accessible at URL /area51/dashboard/sales/ (in Bitrix admin section, under authorization). Technically — an admin section page via CAdminSection where the Vue app is mounted.

Widgets: revenue today/yesterday/7 days with trend arrow, order count by status (new/in progress/completed/canceled), top 5 products for the period, two-period comparison on one chart, abandoned cart metric (b_sale_basket with ORDER_ID IS NULL).

Abandoned cart data — a custom query not present in standard Bitrix reports:

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 

The dashboard auto-updates every 5 minutes via setInterval — current data without F5. Time saved for the manager — up to 40 minutes per day (over 10 hours per month).

What the Work Includes

• Development of a REST controller with filtering and access rights
• Creation of a set of Vue widgets (charts, KPI cards, tables)
• Integration with external APIs (Yandex.Metrica, Google Analytics, ad platforms)
• Setting up tagged caching for fast loading
• Deployment documentation and employee training

Query Performance

Aggregate queries on b_sale_order on large databases (100K+ orders) require indexes. We check via EXPLAIN:

• DATE_INSERT — index mandatory for period filtering
• Composite index (STATUS_ID, DATE_INSERT) — for simultaneous filtering by status and period
• Results of heavy aggregations cached via Bitrix\Main\Data\Cache for 5-15 minutes

Want a consultation on dashboard implementation? Contact us — we will evaluate your project in one day.