goatdash

goatdash est un tableau de bord léger et respectueux de la vie privée conçu pour [GoatCounter](https://www.goatcounter.com/) Analytics. Il fonctionne entièrement côté client en JavaScript vanilla, avec zéro dépendance, aucun outil de build et aucun serveur backend propre. Le déploiement se réduit à copier une poignée de fichiers statiques sur n'importe quel hébergeur web. ## Ce qu'il fait Le tableau de bord se connecte à une ou plusieurs instances GoatCounter via leur API publique v0 sur HTTPS. Il affiche les données analytiques incluant : - **Cinq cartes KPI** : visiteurs uniques (avec tendance), pages vues, page principale, chemins suivis et total d'événements. - **Répartition des referrers** : trafic groupé par canal (direct, moteurs de recherche, campagnes, autres sites) avec possibilité d'approfondir vers les referrers individuels et les pages qu'ils ont amenées. - **Carte choroplèthe du monde** : pays ombrés selon le nombre de visites sur une échelle racine carrée, avec infobulles au survol, zoom, déplacement et réinitialisation. - **Approfondissement partout** : cliquez sur n'importe quelle page pour voir ses referrers, sur n'importe quel referrer pour voir les pages qu'il a générées, sur les navigateurs/systèmes/appareils vers leurs versions, les pays vers les régions, et les campagnes vers leurs URLs sources. - **Périodes flexibles** : aujourd'hui, 7 jours, 30 jours, 90 jours, ou une période personnalisée début/fin. ## Support multi-site goatdash est conçu autour des configurations multi-sites où chaque site vit sur son propre domaine mais partage un seul compte GoatCounter. GoatCounter résout le bon site depuis l'en-tête `Host`, donc le tableau de bord interroge chaque site cross-origin à son propre domaine. La barre latérale liste tous les sites depuis `/api/v0/sites`, restreints aux permissions de la clé API. Le changement de site est rapide grâce au précache en arrière-plan des sites inactifs. ## Architecture et stack - **JS vanilla uniquement** : pas de React, pas de bundler, pas d'appels CDN. Sept fichiers statiques au total. - **Pas de backend** : le navigateur parle directement à l'API GoatCounter. Il n'y a pas de serveur à patcher, de base de données à sauvegarder, ou de service à maintenir. - **Service worker** : met en cache le shell de l'application et les actifs versionnés pour des rechargements instantanés ; les réponses API sont mises en cache avec stale-while-revalidate. - **Thème** : sombre, clair ou auto, basculé via les boutons de la barre supérieure et appliqué avant le paint par un script externe `theme.js` compatible CSP stricte (`default-src 'self'`). - **Langue** : espagnol, anglais ou détection automatique, persistée dans `localStorage`. - **Mode démo** : charge des données d'exemple réalistes sans clé API pour l'exploration. ## Installation Il n'y a pas de script d'installation ni rien à compiler. Servez les fichiers statiques depuis n'importe quel serveur HTTP : ```sh python3 -m http.server 8000 ``` Prérequis : un serveur web statique et une instance GoatCounter dont l'API v0 est accessible via HTTPS depuis le navigateur. Pas besoin de Docker, Node ou outils de build. Pour les déploiements multi-sites en production, configurez votre serveur web pour servir les fichiers depuis un domaine dédié (ex. `stats.example.com`) et assurez-vous que `Cache-Control: no-store` est défini sur le HTML index. Les fichiers d'actifs utilisent des query strings versionnés (ex. `app.js?v=3`) et doivent être incrémentés à chaque déploiement pour éviter les problèmes de cache obsolète. Un auto-updater hebdomadaire basé sur systemd est fourni (`deploy/goatdash-update.sh`) qui télécharge la dernière release GitHub, vérifie son checksum SHA256, sauvegarde l'installation actuelle et remplace par la nouvelle version. ## Configuration Au premier chargement, l'écran de connexion demande : - L'**URL GoatCounter** de vos site(s) (ex. `https://stats.cloudless.club`). - Une **clé API** créée dans GoatCounter sous Paramètres > API, avec au moins les permissions Compteur et Lecture des statistiques. Les deux valeurs sont stockées dans le `localStorage` du navigateur et transmises uniquement via HTTPS vers votre instance GoatCounter. Le thème, la langue, le site sélectionné et la plage de dates sont également persistés localement. Pour les configurations multi-sites, chaque site doit avoir son propre domain pointant vers la même installation GoatCounter. GoatCounter envoie `Access-Control-Allow-Origin: *`, permettant les requêtes cross-origin sans proxy. Notez que chaque requête authentifiée déclenche un preflight `OPTIONS`, résultant en deux allers-retours par appel API. ## Utilisation Ouvrez la page et entrez votre URL GoatCounter et clé API, ou cliquez sur **Essayer la démo** pour explorer avec des données d'exemple. Utilisez le contrôle segmenté pour changer les périodes, le menu engrenage pour modifier le thème/langue ou vous déconnecter, et cliquez sur n'importe quelle carte métrique pour approfondir vers des données connexes. Le menu de rafraîchissement efface les caches et re-télécharge tout. ## Développement Le projet consiste en HTML, CSS et JavaScript plaines à travers `index.html`, `styles.css`, `theme.js`, `app.js`, `fixtures.js` et `sw.js`. Pas de `package.json`, bundler ou harness de test. Développement local : ```sh python3 -m http.server 8000 ``` Les données de démonstration dans `fixtures.js` miment la forme réelle de la réponse API. ## Licence AGPL-3.0. L'actif de la carte du monde (`assets/world-map.js`) est conservé tel quel depuis le goatcounter-dashboard de Abhishekh Singh, sous licence MIT, et reste MIT.