goatdash

O goatdash é um painel leve e focado em privacidade para análises do [GoatCounter](https://www.goatcounter.com/). Ele funciona inteiramente no lado do cliente como JavaScript vanilla, com zero dependências, sem ferramentas de build e sem servidor backend próprio. A implantação consiste em copiar alguns arquivos estáticos para qualquer hospedagem web. ## O que ele faz O painel se conecta a uma ou mais instâncias do GoatCounter por meio de sua API pública v0 via HTTPS. Exibe dados analíticos incluindo: - **Cinco cartões KPI**: visitantes únicos (com tendência), visualizações de página, página principal, caminhos rastreados e eventos totais. - **Divisão por referenciador**: tráfego agrupado por canal (direto, mecanismos de busca, campanhas, outros sites) com drill-down para referenciadores individuais e as páginas que trouxeram. - **Mapa-múndi coroplético**: países sombreados por contagem de visitas usando escala de raiz quadrada, com tooltips ao passar o mouse, zoom, pan e reposicionamento. - **Drill-down em todos os lugares**: clique em qualquer página para ver seus referenciadores, qualquer referenciador para ver as páginas que direcionou, navegadores/sistemas/dispositivos às suas versões, países a regiões e campanhas às URLs de origem. - **Intervalos de data flexíveis**: hoje, 7 dias, 30 dias, 90 dias ou período personalizado de início/fim. ## Suporte multi-site O goatdash é projetado para configurações multi-site onde cada site vive em seu próprio domínio, mas compartilha uma única conta GoatCounter. O GoatCounter resolve o site correto pelo cabeçalho `Host`, então o painel consulta cada site cross-origin no próprio domínio. A barra lateral lista todos os sites de `/api/v0/sites`, limitados às permissões da chave de API. A alternância entre sites é rápida graças ao precache em segundo plano dos sites inativos. ## Arquitetura e stack - **Apenas JS vanilla**: sem React, sem bundler, sem chamadas CDN. Sete arquivos estáticos no total. - **Sem backend**: o navegador fala diretamente com a API GoatCounter. Não há servidor para aplicar patches, banco de dados para backup ou serviço para manter ativo. - **Service worker**: armazena em cache o shell do aplicativo e os ativos versionados para recarregamentos instantâneos; as respostas da API são armazenadas em cache com stale-while-revalidate. - **Tema**: modo escuro, claro ou automático, alternado por botões na barra superior e aplicado antes do paint por um script externo `theme.js` compatível com CSP rigoroso (`default-src 'self'`). - **Idioma**: espanhol, inglês ou detecção automática, persistido no `localStorage`. - **Modo demo**: carrega dados amostrais realistas sem chave de API para exploração. ## Instalação Não há script de instalação nem nada para compilar. Sirva os arquivos estáticos a partir de qualquer servidor HTTP: ```sh python3 -m http.server 8000 ``` Requisitos: um servidor web estático e uma instância GoatCounter cuja API v0 seja acessível via HTTPS a partir do navegador. Sem Docker, Node ou ferramentas de build necessários. Para implantações multi-site em produção, configure seu servidor web para servir os arquivos a partir de um domínio dedicado (por exemplo, `stats.example.com`) e certifique-se de que `Cache-Control: no-store` esteja definido no index HTML. Os arquivos de ativo usam strings de query de versão (por exemplo, `app.js?v=3`) e devem ser incrementados em cada deploy para evitar problemas de cache desatualizado. Um atualizador semanal opcional baseado em systemd é fornecido (`deploy/goatdash-update.sh`) que baixa a última release do GitHub, verifica o checksum SHA256, faz backup da instalação atual e substitui pela nova versão. ## Configuração Na primeira execução, a tela de conexão solicita: - A **URL do GoatCounter** do(s) seu(s) site(s) (por exemplo, `https://stats.cloudless.club`). - Uma **chave de API** criada no GoatCounter em Settings > API, com pelo menos permissões de Count e Read nas estatísticas. Ambos os valores são armazenados no `localStorage` do navegador e transmitidos apenas por HTTPS para sua instância GoatCounter. Tema, idioma, site selecionado e intervalo de data também são persistidos localmente. Para configurações multi-site, cada site deve ter seu próprio domínio apontando para a mesma instalação GoatCounter. O GoatCounter envia `Access-Control-Allow-Origin: *`, permitindo requisições cross-origin sem proxy. Observe que toda requisição autenticada dispara um preflight `OPTIONS`, resultando em duas viagens de ida e volta por chamada de API. ## Uso Abra a página e insira sua URL e chave de API GoatCounter, ou clique em **Try Demo** para explorar com dados amostrais. Use o controle segmentado para alternar intervalos de data, o menu de engrenagem para alterar tema/idioma ou desconectar, e clique em qualquer cartão de métrica para fazer drill-down nos dados relacionados. O menu de atualização limpa os caches e refaz todas as requisições. ## Desenvolvimento O projeto consiste em HTML, CSS e JavaScript puros em `index.html`, `styles.css`, `theme.js`, `app.js`, `fixtures.js` e `sw.js`. Não há `package.json`, bundler ou test harness. Desenvolvimento local: ```sh python3 -m http.server 8000 ``` Os dados de fixture demo em `fixtures.js` refletem a forma real de resposta da API. ## Licença AGPL-3.0. O ativo do mapa-múndi (`assets/world-map.js`) é mantido integralmente do goatcounter-dashboard licenciado sob MIT de Abhishekh Singh e permanece como MIT.