Статичний мікродашборд на GitHub Pages чи Vercel: швидкий звіт без BI

Не кожне запитання потребує пайплайна, сховища і BI-ліцензій. Звіт для інвестора за рік, аналіз результатів акції, підсумок дослідження, дашборд для конференції — це разові або рідко оновлювані історії. Для них добре працює статичний мікродашборд: одна-дві сторінки з графіками, зібрані з готових даних і опубліковані як звичайний сайт.

#Що це таке

Статичний мікродашборд — це HTML-сторінка з даними, «запеченими» в момент збірки:

• дані — CSV, JSON, вивантаження з Google Таблиць, CRM чи BigQuery;
• графіки — JavaScript-бібліотека візуалізації;
• хостинг — GitHub Pages, Vercel, Netlify або будь-який статичний хостинг;
• оновлення — перезбирання вручну або за розкладом (наприклад, GitHub Actions раз на день).

Немає сервера, бази даних і ліцензій — тому він дешевий, швидкий і надійний.

#Коли його досить

Детальніше про вибір між інструментами — у статтях власний дашборд чи BI і Power BI чи Looker Studio.

#З чого складається

1. Підготовка даних: агрегація до потрібного рівня (дні, канали, категорії) — у SQL, Python або прямо в таблиці. На сторінку йдуть лише агрегати, а не сирі дані.
2. Макет: 3–6 KPI, 2–4 графіки, таблиця, текстові висновки. Мікродашборд — це «історія з цифрами», тому висновки важливіші, ніж у щоденному дашборді.
3. Збірка: статичний генератор або простий фронтенд, який читає JSON під час збірки.
4. Публікація: push у репозиторій → автоматичний деплой.

#Приклад: автооновлення з GitHub Actions

name: rebuild-dashboard
on:
  schedule: [{ cron: '0 5 * * *' }]   # щодня о 05:00 UTC
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: python scripts/export_data.py   # тягне агрегати, ключі — у secrets
        env:
          SHEET_ID: ${{ secrets.SHEET_ID }}
      - run: npm ci && npm run build
      - uses: actions/upload-pages-artifact@v3
        with: { path: dist }

Секрети (ключі API, ID таблиць) зберігаються в налаштуваннях репозиторію, а не в коді.

#Доступ і конфіденційність

Найважливіше застереження: статична сторінка за замовчуванням публічна. Якщо дані комерційні:

• Vercel має захист деплоїв паролем і авторизацією на певних тарифах;
• Cloudflare Access перед будь-яким хостингом дає вхід за email-кодом або корпоративним SSO;
• GitHub Pages у приватних репозиторіях з обмеженням доступу доступний на платних тарифах GitHub для організацій;
• в будь-якому разі — лише агрегати, без персональних даних клієнтів.

Обфускація чи «секретне посилання» — не захист: посилання пересилають і індексують.

#Скільки часу займає

Для готових даних — зазвичай 1–2 тижні: день-два на розбір даних і висновків, кілька днів на макет і збірку, решта — правки. Найдовше — формулювання висновків, а не код.

#Що добре працює в мікродашбордах

• заголовок-висновок над кожним графіком («Повторні покупки виросли після запуску розсилки»), а не «Графік 3»;
• порівняння з попереднім періодом або планом;
• анотації на графіках — події, акції, зміни цін;
• методологія внизу: джерела, дати, визначення метрик;
• друк і PDF — інвестори часто пересилають файл.

Принципи візуалізації — у статті про дизайн дашбордів. Якщо дані поки живуть у таблицях — див. дашборд з Google Таблиць.

#Типові помилки

• Публікувати сирі дані з персональною інформацією.
• Вважати «нікому не відоме посилання» захистом.
• Перевантажувати мікродашборд фільтрами — це вже інший продукт.
• Не вказувати дату даних.
• Тримати ключі API в коді репозиторію.

#Чекліст

• Дані агреговані, без персональних даних
• 3–6 KPI і 2–4 графіки з заголовками-висновками
• Дата даних і методологія на сторінці
• Доступ закрито (Vercel protection / Cloudflare Access), якщо дані не публічні
• Секрети — у налаштуваннях CI
• Перевірено на мобільному і в друці

#Покроково: як його зробити

Статичний мікродашборд — це одна HTML-сторінка, що генерується за розкладом з ваших даних, без BI-інструмента і без живого підключення до бази. Збирається так:

1. Запит, що повертає кілька чисел і рядів для сторінки — зазвичай 4–6 KPI і 2–3 невеликі графіки.
2. Рендер у HTML за шаблоном: числа — звичайною розміткою, графіки — вбудованим SVG або невеликим скриптом з даними у вигляді JSON.
3. Публікація на статичному хостингу за контролем доступу (див. нижче) або вкладенням у повідомлення.
4. Розклад — генерація після нічного оновлення даних.

import json, datetime as dt
from string import Template

data = query_summary()          # {"kpis": [...], "trend": [[date, revenue], ...]}
html = Template(open("template.html").read()).substitute(
    updated=dt.datetime.now().strftime("%d.%m.%Y %H:%M"),
    kpis="".join(f"<div class='kpi'><span>{k['label']}</span><b>{k['value']}</b>"
                 f"<i class='{'up' if k['delta']>=0 else 'down'}'>{k['delta']:+.0%}</i></div>"
                 for k in data["kpis"]),
    trend_json=json.dumps(data["trend"]),
)
open("out/index.html", "w").write(html)

Сторінка відкривається миттєво, працює на будь-якому телефоні і не може зламатися через зміну BI-конектора. Компроміс — вона показує рівно те, що ви спроєктували, і нічого більше. Часто це перевага.

#Приклад: що на одному екрані

Для власника сервісного бізнесу, який дивиться з телефону (ілюстративно):

Згенерувати дві версії (тиждень і місяць) окремими файлами простіше, ніж додавати інтерактивність, а «перемикач» — це просто два посилання.

#Швидкість і доступність

Оскільки сторінка статична, її легко зробити швидкою і доступною:

• Загальна вага сторінки до ~200 КБ, без зовнішніх шрифтів
• У графіків є текстова альтернатива (короткий підсумок або таблиця даних)
• Контраст кольорів відповідає WCAG 2.2 AA, зміни позначені ▲▼, а не лише кольором
• Читається на ширині 360 px без горизонтальної прокрутки
• Час оновлення завжди на видноті

#Коли його вже замало

Багато бізнесів лишають мікродашборд і після цього — як ранковий погляд для власника, тоді як команда працює в повному інструменті.

#Скільки це коштує в підтримці

Підтримка мінімальна: шаблон змінюється рідко, а запит — лише коли змінюються визначення метрик. Основний ризик — тихий збій генерації, коли сторінка лишається вчорашньою. Тому дата оновлення має бути великою і помітною, а невдала генерація — надсилати сповіщення, як і решта пайплайна.

Ще одна практична порада: зберігайте файл попереднього дня поряд із поточним (index.html і yesterday.html). Коли хтось питає «а що там було вчора зранку?», відповідь є без жодного перезапуску. А швидке порівняння двох файлів — дешева перевірка, що сьогоднішні числа змінилися на правдоподібну величину, а не, скажімо, обнулилися через збій завантаження одного з джерел.

#Кому він підходить найкраще

Мікродашборд найкраще працює там, де одна людина щодня приймає кілька повторюваних рішень: власник невеликого магазину, керівник салону, засновник SaaS на ранній стадії. Йому не потрібні фільтри — потрібна відповідь «чи все гаразд» за пів хвилини з телефону.

#Часті запитання

#Чим мікродашборд відрізняється від презентації?

Він інтерактивний (підказки, перемикачі періодів), відкривається за посиланням на будь-якому пристрої і може оновлюватися автоматично.

#Чи можна підключити мікродашборд до живих даних?

Можна оновлювати його за розкладом — щогодини чи щодня. Якщо потрібні дані «в реальному часі» і фільтри по сирих даних, краще повноцінний кабінет.

#Скільки коштує хостинг?

Для невеликих проєктів GitHub Pages і Vercel мають безкоштовні тарифи; захист доступу і комерційне використання можуть вимагати платного плану — перевірте умови провайдера.

#Хто може оновлювати дані?

Якщо джерело — Google Таблиця, достатньо оновити таблицю: збірка за розкладом підтягне зміни.