Розробка дашборду аналітики та звітності

Розробка дашборда аналітики та звітності

Дашборд аналітики візуалізує бізнес-метрики у реальному часі або періодично. Ціль: зробити дані з кількох джерел читаними без SQL-запитів. Ключові вимоги: швидке завантаження (користувачі не повинні чекати 30 секунд), гнучка фільтрація, коректна агрегація.

Джерела даних

Дашборд тягне дані з кількох місць:

• Основна БД PostgreSQL / MySQL
• Аналітичне сховище (ClickHouse, BigQuery, Redshift)
• Зовнішні API (Google Analytics, рекламні платформи)
• Файли (CSV, Excel імпорт)

Оптимізація запитів

Основна проблема аналітичних дашбордів: важкі запити проти OLTP-БД. Рішення:

Матеріалізовані представлення:

CREATE MATERIALIZED VIEW daily_revenue AS
SELECT
  DATE_TRUNC('day', created_at) as date,
  SUM(total) as revenue,
  COUNT(*) as orders
FROM orders
WHERE status = 'completed'
GROUP BY DATE_TRUNC('day', created_at);

REFRESH MATERIALIZED VIEW CONCURRENTLY daily_revenue;

Таблиці агрегації (Rollups):

CREATE TABLE metrics_hourly (
  metric_date DATE,
  metric_hour INTEGER,
  visits INTEGER,
  conversions INTEGER,
  revenue DECIMAL,
  PRIMARY KEY (metric_date, metric_hour)
);

-- Заповнюйте через запланову роботу
INSERT INTO metrics_hourly (metric_date, metric_hour, visits, conversions, revenue)
SELECT
  DATE(created_at),
  DATE_PART('hour', created_at)::INTEGER,
  COUNT(*),
  COUNT(CASE WHEN converted THEN 1 END),
  SUM(COALESCE(revenue, 0))
FROM events
WHERE created_at >= CURRENT_DATE - INTERVAL '7 days'
GROUP BY DATE(created_at), DATE_PART('hour', created_at);

React Дашборд

function AnalyticsDashboard() {
  const [metrics, setMetrics] = useState<Metrics | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/analytics/summary?period=month')
      .then(r => r.json())
      .then(data => {
        setMetrics(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <Spinner />;
  if (!metrics) return <div>Немає даних</div>;

  return (
    <Grid columns={3} gap={4}>
      <StatCard title="Виручка" value={`$${metrics.revenue}`} change={metrics.revenue_change} />
      <StatCard title="Конверсії" value={metrics.conversions} change={metrics.conversion_change} />
      <StatCard title="Avg Order Value" value={`$${metrics.aov}`} />
      <RevenueChart data={metrics.daily_data} />
      <ConversionFunnel steps={metrics.funnel} />
      <GeographicChart data={metrics.geo_data} />
    </Grid>
  );
}

Розклад

Базовий дашборд з 5-6 ключових метрик: 2-3 дні. Продвинута звітність з фільтрами, drill-downs, користувацькими діапазонами дат: 5-7 днів.