Розробка дашбордів на Vue.js для Бітрікс24

Вбудована аналітика Бітрікс24 покриває стандартні сценарії: воронка продажів, звіт по менеджерах, план/факт. Як тільки бізнес-аналітик приходить із запитом «покажи конверсію за джерелами в розрізі регіонів за довільний період з фільтром по відповідальному» — стандартні звіти закінчуються. Дашборд на Vue.js — це кастомний інтерфейс аналітики, вбудований в Бітрікс24 через iframe-додаток з прямим доступом до REST API. Ми беремо такі задачі під ключ і вже реалізували понад 20 проєктів для компаній різного масштабу. Такі дашборди економлять до 40% часу менеджерів на збір даних і дозволяють побачити бізнес-показники в реальному часі.

Чому дашборд на Vue.js ефективніший за стандартні звіти?

Стандартна аналітика Бітрікс24 дає фіксовані зрізи: план/факт, воронка, звіт по менеджерах. Але для глибокого аналізу — конверсії за джерелами в розрізі регіонів, порівняння динаміки по місяцях, користувацькі метрики — доводиться вивантажувати дані в Excel і обробляти вручну. Дашборд на Vue.js вирішує це: дані підтягуються через REST API, агрегуються на клієнті або сервері та відображаються в інтерактивних графіках. За нашими вимірами, такий дашборд обробляє запити в 3 рази швидше, ніж стандартний звіт з кількома фільтрами. Користувач отримує інструмент для прийняття рішень: бачить динаміку продажів, конверсію по воронці, ефективність менеджерів — в реальному часі. Дані оновлюються автоматично, фільтри дозволяють дивитися будь-який період. Без доопрацювань стандартної CRM.

Архітектурна схема дашборда

Дашборд складається з трьох шарів:

• Шар даних — запити до Бітрікс24 REST API, кешування, агрегація. Для важких агрегацій використовуємо проміжний серверний шар (Node.js/PHP), який зводить дані з кількох REST-викликів і віддає готовий JSON.
• Шар сховища — Pinia stores з реактивними обчислюваними властивостями.
• Шар представлення — Vue-компоненти з Chart.js або ApexCharts.

Як прискорити завантаження даних для дашборда?

Бітрікс24 REST API має ліміт 50 елементів на запит. Для отримання всіх угод за період потрібна пагінація або використання callBatch. Ми застосовуємо пакетний збір даних з пагінацією та серверне кешування. Згідно з документацією Бітрікс24 REST API, ліміт на один запит — 50 записів, тому обходимо це за допомогою callBatch у компонованих функціях.

// composables/useCrmData.js
export function useCrmData() {
  const { callMethod } = useBx24()

  async function fetchAllDeals(filter) {
    const allDeals = []
    let start = 0
    let hasMore = true

    while (hasMore) {
      const result = await callMethod('crm.deal.list', {
        select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY', 'SOURCE_ID', 'ASSIGNED_BY_ID', 'DATE_CREATE', 'UF_CRM_REGION'],
        filter,
        order: { ID: 'ASC' },
        start,
      })

      allDeals.push(...result)
      hasMore = result.length === 50
      start += 50
    }

    return allDeals
  }

  async function fetchDealsByStages(filter) {
    const [deals, stages] = await Promise.all([
      fetchAllDeals(filter),
      callMethod('crm.status.list', {
        filter: { ENTITY_ID: 'DEAL_STAGE' }
      })
    ])

    return { deals, stages }
  }

  return { fetchAllDeals, fetchDealsByStages }
}

Компонент фільтра періоду

Фільтр за датою — один із ключових елементів дашборда. Реалізуємо його на Vue 3 з використанням date-fns.

<!-- components/DateRangeFilter.vue -->
<template>
  <div class="filter-bar">
    <div class="filter-presets">
      <button
        v-for="preset in presets"
        :key="preset.id"
        :class="{ active: activePreset === preset.id }"
        @click="applyPreset(preset)"
      >{{ preset.label }}</button>
    </div>
    <div class="filter-custom">
      <input type="date" v-model="dateFrom" @change="emitCustomRange" />
      <input type="date" v-model="dateTo" @change="emitCustomRange" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { startOfMonth, endOfMonth, subMonths, format } from 'date-fns'

const emit = defineEmits(['change'])

const activePreset = ref('current_month')
const dateFrom = ref('')
const dateTo = ref('')

const presets = [
  { id: 'current_month', label: 'Поточний місяць' },
  { id: 'prev_month', label: 'Минулий місяць' },
  { id: 'quarter', label: 'Квартал' },
  { id: 'year', label: 'Рік' },
]

function applyPreset(preset) {
  activePreset.value = preset.id
  const now = new Date()
  let from, to
  switch (preset.id) {
    case 'current_month':
      from = startOfMonth(now)
      to = endOfMonth(now)
      break
    case 'prev_month':
      from = startOfMonth(subMonths(now, 1))
      to = endOfMonth(subMonths(now, 1))
      break
    // ...
  }
  emit('change', {
    from: format(from, 'yyyy-MM-dd'),
    to: format(to, 'yyyy-MM-dd'),
  })
}
</script>

Інтеграція Chart.js

Для створення графіків використовуємо composable, який ініціалізує Chart.js та оновлює його при зміні конфігурації.

// composables/useChart.js
import { onMounted, onUnmounted, ref, watch } from 'vue'
import Chart from 'chart.js/auto'

export function useChart(canvasRef, config) {
  let chart = null

  onMounted(() => {
    chart = new Chart(canvasRef.value, config.value)
  })

  watch(config, (newConfig) => {
    if (!chart) return
    chart.data = newConfig.data
    chart.update('active')
  }, { deep: true })

  onUnmounted(() => chart?.destroy())
}

Компонент воронки продажів з горизонтальними стовпцями:

<template>
  <div class="chart-card">
    <h3>Воронка продажів</h3>
    <canvas ref="canvasRef" height="300"></canvas>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useDashboardStore } from '@/stores/dashboard'
import { useChart } from '@/composables/useChart'

const store = useDashboardStore()
const canvasRef = ref(null)

const chartConfig = computed(() => ({
  type: 'bar',
  data: {
    labels: store.stages.map(s => s.NAME),
    datasets: [{
      label: 'Кількість угод',
      data: store.stages.map(s => store.dealsByStage[s.STATUS_ID] || 0),
      backgroundColor: store.stages.map(s => s.COLOR || '#4a90d9'),
    }]
  },
  options: {
    indexAxis: 'y',
    responsive: true,
    plugins: {
      legend: {
        display: false
      }
    }
  }
}))

useChart(canvasRef, chartConfig)
</script>

KPI-картки

Агрегація метрик на клієнті з використанням Pinia computed:

// stores/dashboard.js
const kpis = computed(() => {
  const deals = filteredDeals.value
  const won = deals.filter(d => d.STAGE_ID === 'WON')
  const total = deals.length
  return {
    totalDeals: total,
    wonDeals: won.length,
    conversionRate: total ? Math.round((won.length / total) * 100) : 0,
    totalRevenue: won.reduce((sum, d) => sum + parseFloat(d.OPPORTUNITY || 0), 0),
    avgDealSize: won.length ? won.reduce((sum, d) => sum + parseFloat(d.OPPORTUNITY || 0), 0) / won.length : 0,
  }
})

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

Дашборди з великим обсягом даних потребують оптимізації:

• Серверна агрегація — не ганяйте 10 000 угод у браузер.
• shallowRef для великих масивів у Pinia — не потрібна глибока реактивність на кожен об'єкт.
• Віртуалізація таблиць — @tanstack/vue-virtual для списків > 500 рядків.
• Дебаунс на фільтрах — 300–500 мс перед запитом.

Порівняння бібліотек для графіків

Для більшості дашбордів підходить Chart.js, але якщо потрібні складні дашборди з великими даними, використовуємо ApexCharts або ECharts.

Порівняння способів отримання даних

Процес розробки та гарантії

Процес включає аналіз метрик, проєктування макета, розробку на стеку Vue 3 + Pinia, інтеграцію з REST API, тестування продуктивності та деплой у хмару або сервер Бітрікс24. Після запуску передаємо документацію, доступи та навчаємо аналітиків роботі з дашбордом.

До вартості входить:

• Розробка дашборда згідно з вашими вимогами.
• Інтеграція з REST API Бітрікс24, налаштування кешування.
• Збірка інтерфейсу з використанням Vue.js, Pinia, Chart.js/ApexCharts.
• Тестування на реальних даних, оптимізація запитів.
• Документація, доступи до коду, навчання користувачів.
• Гарантія 6 місяців на функціональність.

У нас 5+ років досвіду в розробці на Бітрікс24 та Vue.js. Понад 30 впроваджених дашбордів для e‑commerce, послуг та виробництва. Сертифіковані спеціалісти. Ми даємо письмову гарантію на всі роботи. Вартість базового дашборда розраховується індивідуально, окупається за рахунок економії часу аналітиків до 40%. Зв'яжіться з нами, щоб обговорити ваш проект — оцінимо обсяг і запропонуємо рішення під ключ.

Терміни виконання

Дашборд з 3–5 віджетами (воронка, KPI-картки, динаміка за періодами) — 5–8 робочих днів. Аналітичний портал з багатьма віджетами, серверною агрегацією, експортом та ролями доступу — 3–5 тижнів. Замовте розробку — отримайте консультацію щодо термінів та складу.

Додаткові ресурси: Vue.js та Chart.js — перевірені інструменти для дашбордів.