goatdash

goatdash es un panel de control ligero y centrado en la privacidad para [GoatCounter](https://www.goatcounter.com/) analytics. Se ejecuta completamente del lado del cliente como JavaScript vanilla, con cero dependencias, sin herramientas de compilación y sin servidor backend propio. La implementación consiste simplemente en copiar unos pocos archivos estáticos a cualquier proveedor de alojamiento web. ## Qué hace El panel de control se conecta a una o más instancias de GoatCounter a través de su API v0 pública por HTTPS. Muestra datos de analítica que incluyen: - **Cinco tarjetas KPI**: visitantes únicos (con tendencia), páginas vistas, página principal, rutas rastreadas y eventos totales. - **Desglose de referenciadores**: tráfico agrupado por canal (directo, motores de búsqueda, campañas, otros sitios) con drill-down a referenciadores individuales y las páginas que trajeron. - **Mapa mundial coroplético**: países sombreados según el número de visitas usando una escala de raíz cuadrada, con tooltips al pasar el mouse, zoom, paneo y restablecimiento. - **Drill-down en todas partes**: haz clic en cualquier página para ver sus referenciadores, en cualquier referenciador para ver las páginas que impulsó, en navegadores/sistemas/dispositivos para ver sus versiones, en países para ver regiones, y en campañas para ver sus URLs de origen. - **Rangos de fecha flexibles**: hoy, 7 días, 30 días, 90 días, o un período personalizado de inicio/fin. ## Soporte multi-sitio goatdash está diseñado para configuraciones multi-sitio donde cada sitio reside en su propio dominio pero comparte una única cuenta de GoatCounter. GoatCounter resuelve el sitio correcto a partir de la cabecera `Host`, por lo que el panel consulta cada sitio de forma cross-origin en su propio dominio. La barra lateral lista todos los sitios desde `/api/v0/sites`, restringido a los permisos de la clave de API. El cambio de sitio es rápido gracias a la precarga en segundo plano de los sitios inactivos. ## Arquitectura y stack - **Solo JS vanilla**: sin React, sin empaquetador, sin llamadas CDN. Siete archivos estáticos en total. - **Sin backend**: el navegador habla directamente con la API de GoatCounter. No hay servidor que parchear, base de datos de la que hacer backup, o servicio que mantener activo. - **Service worker**: almacena en caché la shell de la aplicación y los activos versionados para recargas instantáneas; las respuestas de la API se almacenan con stale-while-revalidate. - **Tema**: modo oscuro, claro o automático, cambiado mediante botones en la barra superior y aplicado antes del pintado por un script externo `theme.js` compatible con CSP estricta (`default-src 'self'`). - **Idioma**: español, inglés o detección automática, persistido en `localStorage`. - **Modo demo**: carga datos de ejemplo realistas sin necesidad de clave de API para exploración. ## Instalación No hay script de instalación ni nada que compilar. Sirve los archivos estáticos desde cualquier servidor HTTP: ```sh python3 -m http.server 8000 ``` Requisitos: un servidor web estático y una instancia de GoatCounter cuya API v0 sea accesible por HTTPS desde el navegador. No se necesita Docker, Node ni herramientas de compilación. Para despliegues multi-sitio en producción, configura tu servidor web para servir los archivos desde un dominio dedicado (por ejemplo, `stats.example.com`) y asegúrate de que `Cache-Control: no-store` esté configurado en el HTML índice. Los archivos de activos utilizan strings de consulta de versión (por ejemplo, `app.js?v=3`) y deben incrementarse en cada despliegue para evitar problemas de caché obsoleta. Se proporciona un autoactualizador semanal opcional basado en systemd (`deploy/goatdash-update.sh`) que descarga el último lanzamiento de GitHub, verifica su checksum SHA256, realiza una copia de seguridad de la instalación actual e instala la nueva versión. ## Configuración En la primera carga, la pantalla de conexión solicita: - La **URL de GoatCounter** de tus sitio(s) (por ejemplo, `https://stats.cloudless.club`). - Una **clave de API** creada en GoatCounter en Configuración > API, con al menos permisos de Count y Read de estadísticas. Ambos valores se almacenan en `localStorage` del navegador y solo se transmiten por HTTPS a tu instancia de GoatCounter. El tema, idioma, sitio seleccionado y rango de fecha también se persisten localmente. Para configuraciones multi-sitio, cada sitio debe tener su propio dominio apuntando a la misma instalación de GoatCounter. GoatCounter envía `Access-Control-Allow-Origin: *`, permitiendo solicitudes cross-origin sin proxy. Ten en cuenta que cada solicitud autenticada genera un preflight `OPTIONS`, resultando en dos viajes por llamada de API. ## Uso Abre la página e ingresa la URL de GoatCounter y tu clave de API, o haz clic en **Probar Demo** para explorar con datos de ejemplo. Usa el control segmentado para cambiar rangos de fecha, el menú de engranaje para cambiar el tema/idioma o desconectar, y haz clic en cualquier tarjeta de métrica para hacer drill-down en datos relacionados. El menú de actualización borra las cachés y vuelve a obtener todo. ## Desarrollo El proyecto consiste en HTML, CSS y JavaScript planos a través de `index.html`, `styles.css`, `theme.js`, `app.js`, `fixtures.js` y `sw.js`. No hay `package.json`, empaquetador ni conjunto de pruebas. Desarrollo local: ```sh python3 -m http.server 8000 ``` Los datos de ejemplo en `fixtures.js` replican la estructura real de respuesta de la API. ## Licencia AGPL-3.0. El activo del mapa mundial (`assets/world-map.js`) se conserva tal cual del proyecto goatcounter-dashboard con licencia MIT de Abhishekh Singh y permanece MIT.