Об этом проекте

goatdash — это лёгкий, ориентированный на конфиденциальность дашборд для аналитики [GoatCounter](https://www.goatcounter.com/). Он работает полностью на стороне клиента как чистый JavaScript без зависимостей, инструментов сборки и собственного сервера. Развёртывание сводится к копированию нескольких статических файлов на любой веб-хостинг. ## Что делает Дашборд подключается к одному или нескольким экземплярам GoatCounter через их публичный v0 API по HTTPS. Отображает аналитические данные, включая: - **Пять KPI-карточек**: уникальные посетители (с трендом), просмотров страниц, самая посещаемая страница, отслеживаемые пути и общее количество событий. - **Анализ рефереров**: трафик, сгруппированный по каналам (прямой, поисковые системы, кампании, другие сайты) с возможностью детализации до отдельных рефереров и страниц, которые они привели. - **Хореоплетная карта мира**: страны, закрашенные по количеству визитов с использованием квадратичного масштаба, с всплывающими подсказками, масштабированием, перемещением и сбросом. - **Детализация везде**: нажмите на любую страницу, чтобы увидеть её рефереров; на любого реферера, чтобы увидеть страницы, которые он привёл; на браузеры/системы/устройства, чтобы увидеть их версии; на страны, чтобы увидеть регионы; на кампании, чтобы увидеть исходные URL. - **Гибкие временные диапазоны**: сегодня, 7 дней, 30 дней, 90 дней или произвольный период с началом и концом. ## Поддержка мульти-сайтов goatdash разработан для мульти-сайтовых конфигураций, где каждый сайт находится на своём домене, но использует один аккаунт GoatCounter. GoatCounter определяет нужный сайт по заголовку `Host`, поэтому дашборд запрашивает данные для каждого сайта кросс-доменно с его собственного домена. Боковая панель показывает список всех сайтов из `/api/v0/sites`, доступных согласно разрешениям API-ключа. Переключение между сайтами быстрое благодаря фоновому прекашингу неактивных сайтов. ## Архитектура и стек - **Только чистый JS**: без React, без сборщика, без обращений к CDN. Всего семь статических файлов. - **Без бэкенда**: браузер общается напрямую с API GoatCounter. Не нужно обновлять сервер, резервировать базу данных или поддерживать работу сервиса. - **Service Worker**: кэширует оболочку приложения и версионированные ресурсы для мгновенных перезагрузок; ответы API кэшируются по стратегии stale-while-revalidate. - **Тема**: тёмная, светлая или авто, переключается кнопками в верхней панели и применяется до отрисовки с помощью внешнего скрипта `theme.js`, совместимого со строгим CSP (`default-src 'self'`). - **Язык**: испанский, английский или автоопределение, сохраняется в `localStorage`. - **Демо-режим**: загружает реалистичные демонстрационные данные без API-ключа для исследования. ## Установка Нет установочного скрипта и ничего компилировать. Разместите статические файлы на любом HTTP-сервере: ```sh python3 -m http.server 8000 ``` Требования: статический веб-сервер и экземпляр GoatCounter, чей v0 API доступен по HTTPS из браузера. Docker, Node или инструменты сборки не требуются. Для мульти-сайтовых развёртываний в продакшене настройте веб-сервер на отдачу файлов с выделенного домена (например, `stats.example.com`) и убедитесь, что для index.html установлен заголовок `Cache-Control: no-store`. Файлы ресурсов используют версионные строки запроса (например, `app.js?v=3`), и номер версии нужно увеличивать при каждом деплое во избежание проблем со старым кэшем. Предоставляется опциональный еженедельный самонастраиватель на базе systemd (`deploy/goatdash-update.sh`), который загружает последний релиз GitHub, проверяет его SHA256-сумму, создаёт резервную копию текущей установки и заменяет на новую версию. ## Конфигурация При первом запуске экран подключения запрашивает: - **URL GoatCounter** вашего сайта (сайтов) (например, `https://stats.cloudless.club`). - **API-ключ**, созданный в GoatCounter в разделе Settings > API, с правами как минимум Count и Read статистики. Оба значения сохраняются в `localStorage` браузера и передаются только по HTTPS на ваш экземпляр GoatCounter. Тема, язык, выбранный сайт и временной диапазон также сохраняются локально. Для мульти-сайтовых конфигураций каждый сайт должен иметь свой домен, указывающий на одну установку GoatCounter. GoatCounter отправляет заголовок `Access-Control-Allow-Origin: *`, что позволяет кросс-доменные запросы без прокси. Обратите внимание, что каждый аутентифицированный запрос запускает предварительный `OPTIONS`-запрос, в результате чего на каждое обращение к API требуется два往返ных цикла. ## Использование Откройте страницу и введите URL GoatCounter и API-ключ, либо нажмите **Попробовать демо** для исследования с демонстрационными данными. Используйте сегментированный контрол для переключения диапазонов дат, меню настроек для смены темы/языка или отключения, и нажимайте на любые карточки метрик для детализации связанных данных. Меню обновления очищает кэши и заново загружает всё. ## Разработка Проект состоит из обычного HTML, CSS и JavaScript в файлах `index.html`, `styles.css`, `theme.js`, `app.js`, `fixtures.js` и `sw.js`. Нет `package.json`, сборщика или тестового комплекса. Локальная разработка: ```sh python3 -m http.server 8000 ``` Демонстрационные фикстуры в `fixtures.js` воспроизводят структуру реальных ответов API. ## Лицензия AGPL-3.0. Ресурс мировой карты (`assets/world-map.js`) сохранён дословно из MIT-лицензированного проекта goatcounter-dashboard Абхишека Сингха и остаётся под лицензией MIT.