goatdash

goatdash 是一款轻量级、注重隐私的 [GoatCounter](https://www.goatcounter.com/) 分析仪表盘。它以纯 JavaScript 完全在客户端运行，零依赖、无构建工具，也不依赖任何后端服务器。部署只需将几个静态文件复制到任意 Web 主机即可。 ## 功能概览 仪表盘通过 HTTPS 连接到一个或多个 GoatCounter 实例的公开 v0 API，展示分析数据： - **五大 KPI 卡片**：独立访客（含趋势）、页面浏览量、最热页面、已追踪路径和总事件数。 - **来源明细**：按渠道（直接访问、搜索引擎、营销活动、其他网站）分组显示流量，支持下钻查看单个来源及其带来的页面。 - **等值世界地图**：按访问量使用平方根比例着色国家，支持悬停提示、缩放、平移和重置。 - **全局下钻**：点击任意页面可查看其来源，点击任意来源可查看其驱动的页面，可查看浏览器/系统/设备版本、国家至地区详情，以及活动至来源 URL 详情。 - **灵活的日期范围**：今天、7 天、30 天、90 天或自定义起止日期。 ## 多站点支持 goatdash 围绕多站点场景设计，每个站点拥有独立域名，但共享同一个 GoatCounter 账户。GoatCounter 通过 `Host` 头解析正确站点，因此仪表盘会跨域访问每个站点自身域名的数据。侧边栏列出 `/api/v0/sites` 中的所有站点，受 API 密钥权限限制。非活跃站点的后台预缓存使站点切换非常迅速。 ## 架构与技术栈 - **纯原生 JS**：无 React，无打包器，无 CDN 调用。共七个静态文件。 - **无后端**：浏览器直接与 GoatCounter API 通信。无需修补服务器、备份数据库或维护服务。 - **Service Worker**：缓存应用壳和版本化资源以实现秒开；API 响应使用 stale-while-revalidate 策略缓存。 - **主题**：深色、浅色或自动模式，通过顶栏按钮切换，由外部 `theme.js` 脚本在渲染前应用，兼容严格 CSP（`default-src 'self'`）。 - **语言**：西班牙语、英语或自动检测，持久化存储于 `localStorage`。 - **演示模式**：无需 API 密钥即可加载真实感样本数据进行体验。 ## 安装 无需安装脚本，无需编译。从任意 HTTP 服务器提供静态文件即可： ```sh python3 -m http.server 8000 ``` 要求：静态 Web 服务器，以及浏览器可通过 HTTPS 访问其 v0 API 的 GoatCounter 实例。无需 Docker、Node 或构建工具。 对于生产环境的多站点部署，配置 Web 服务器从专用域名（如 `stats.example.com`）提供服务，并确保对索引 HTML 设置 `Cache-Control: no-store`。资源文件使用版本查询字符串（如 `app.js?v=3`），每次部署时需递增版本号以避免缓存过期问题。 项目提供了一个可选的基于 systemd 的每周自动更新脚本（`deploy/goatdash-update.sh`），可下载最新 GitHub 发布版、验证 SHA256 校验和、备份当前安装并替换为新版本。 ## 配置 首次加载时，连接界面会要求提供： - 您站点的 **GoatCounter URL**（如 `https://stats.cloudless.club`）。 - 在 GoatCounter 的「设置 > API」中创建的 **API 密钥**，至少需具备统计数据的「计数」和「读取」权限。 两个值均存储在浏览器的 `localStorage` 中，且仅通过 HTTPS 传输到您的 GoatCounter 实例。主题、语言、选定站点和日期范围也均在本地持久化。 对于多站点部署，每个站点必须有各自指向同一 GoatCounter 安装的独立域名。GoatCounter 会返回 `Access-Control-Allow-Origin: *`，无需代理即可启用跨域请求。注意：每次认证请求都会触发 `OPTIONS` 预检，导致每次 API 调用产生两次往返。 ## 使用方法 打开页面并输入您的 GoatCounter URL 和 API 密钥，或点击**尝试演示**以样本数据探索。使用分段控件切换日期范围，使用齿轮菜单更改主题/语言或断开连接，点击任意指标卡片下钻查看相关数据。刷新菜单可清除缓存并重新获取所有内容。 ## 开发 项目由 `index.html`、`styles.css`、`theme.js`、`app.js`、`fixtures.js` 和 `sw.js` 中的纯 HTML、CSS 和 JavaScript 组成。没有 `package.json`、打包器或测试框架。本地开发： ```sh python3 -m http.server 8000 ``` `fixtures.js` 中的演示样本数据与实际 API 响应结构保持一致。 ## 许可证 AGPL-3.0。世界地图资源文件（`assets/world-map.js`）完整保留自 Abhishekh Singh 的 MIT 许可项目 goatcounter-dashboard，仍为 MIT 授权。