Skip to content

README.md

Latest commit

 

History

History
193 lines (147 loc) · 5.38 KB

README.md

File metadata and controls

193 lines (147 loc) · 5.38 KB

Composants Vue.js Custom pour Slidev

Ce dossier contient les composants Vue.js personnalisés utilisés dans la présentation Slidev.

LiveClickHouseStats.vue

Composant temps réel qui interroge l'API HTTP de ClickHouse pour afficher des statistiques dynamiques.

🎯 Fonctionnalités

  • ✅ Requêtes HTTP directes à ClickHouse (port 8123)
  • ✅ Rafraîchissement automatique toutes les 3 secondes (configurable)
  • ✅ KPIs en temps réel :
    • Nombre total de paris
    • Montant total parié
    • Pari moyen
    • Clients uniques
  • ✅ Top 5 sports de la dernière heure avec graphiques animés
  • ✅ Statistiques additionnelles :
    • Taux d'acceptation
    • Débit actuel (paris/seconde)
    • Heure du dernier pari
  • ✅ Animations CSS :
    • Flash lors de nouveaux paris
    • Barres de progression animées
    • Transitions fluides
  • ✅ Calculs de delta : affiche l'évolution par minute
  • ✅ Gestion d'erreurs avec affichage informatif

📖 Utilisation dans une slide

---
layout: full
---

# Titre de la slide

<LiveClickHouseStats :refresh-interval="3000" />

🔧 Props

Prop Type Défaut Description
refreshInterval Number 3000 Intervalle de rafraîchissement en ms
clickhouseUrl String http://localhost:8123 URL de l'API HTTP ClickHouse

📊 Requêtes ClickHouse exécutées

Le composant exécute deux requêtes en parallèle :

1. Statistiques principales

SELECT
  count() as totalBets,
  sum(amount) as totalAmount,
  avg(amount) as avgBet,
  uniqExact(customer_id) as uniqueCustomers,
  countIf(status = 'accepted') / count() * 100 as acceptanceRate,
  max(timestamp) as lastBetTime,
  now() as currentTime
FROM streaming_demo.bets

2. Top sports (dernière heure)

SELECT
  sport,
  count() as count
FROM streaming_demo.bets
WHERE timestamp >= now() - INTERVAL 1 HOUR
GROUP BY sport
ORDER BY count DESC
LIMIT 5

🔐 Authentification

Le composant utilise l'authentification par paramètres URL :

  • User : admin
  • Password : admin

⚠️ Production : Utilisez des variables d'environnement sécurisées

🎨 Style

Le composant utilise :

  • Palette de couleurs : Dégradés bleu-vert (#4ecdc4, #44a08d)
  • Background : Dégradé sombre (#1e1e2e → #2a2a3e)
  • Animations :
    • pulse : indicateur de connexion
    • flash : mise en évidence des changements
    • slideIn : apparition des éléments de liste
    • spin : loader de chargement

🚨 Gestion des erreurs

Le composant gère les cas suivants :

  • ✅ ClickHouse non démarré : affiche un message d'erreur clair
  • ✅ Pas de données : affiche des valeurs à 0
  • ✅ Erreur réseau : affiche l'erreur avec instruction
  • ✅ Loading state : spinner animé

🧪 Test du composant

Pour tester le composant :

  1. Démarrer l'architecture :

    docker-compose up -d

  2. Attendre que les données arrivent (30-60 secondes)

  3. Vérifier l'API ClickHouse :

    curl "http://localhost:8123/?query=SELECT%20count()%20FROM%20streaming_demo.bets&user=admin&password=admin"

  4. Lancer Slidev :

    npm run dev

  5. Naviguer vers la slide avec le composant (juste après "Démo Time!")

📈 Performance

  • Requêtes : ~50-100ms par requête ClickHouse
  • Rafraîchissement : 3 secondes par défaut
  • Overhead : Minimal grâce aux requêtes parallèles
  • Bande passante : ~2-5KB par refresh

🔄 Cycle de vie

  1. onMounted :

    • Exécute la première requête immédiatement
    • Démarre l'intervalle de rafraîchissement
    • Démarre le compteur de secondes

  2. fetchStats (tous les 3s) :

    • Sauvegarde les stats précédentes
    • Exécute les requêtes ClickHouse
    • Calcule les deltas
    • Déclenche les animations si changement

  3. onUnmounted :

    • Nettoie les intervalles
    • Évite les memory leaks

💡 Tips

  • Ajuster le refresh : Pour une démo plus spectaculaire, réduire à 1000ms
  • Personnaliser les couleurs : Modifier les variables CSS dans <style scoped>
  • Ajouter des métriques : Ajouter des queries dans fetchStats()
  • Changer le layout : Modifier .kpi-grid pour plus/moins de KPIs

🐛 Troubleshooting

Le composant affiche "Connexion à ClickHouse..."

  • Vérifier que ClickHouse est démarré : docker ps | grep clickhouse
  • Vérifier le port 8123 : curl http://localhost:8123/ping

Erreur CORS

  • ClickHouse autorise CORS par défaut sur l'API HTTP
  • Si problème, vérifier la config ClickHouse

Pas de données

  • Attendre que les producteurs envoient des données
  • Vérifier : docker logs streaming-producer
  • Exécuter : ./verify-avro.sh

Erreur d'authentification

  • Vérifier user/password dans docker-compose.yml
  • Default : admin/admin

🚀 Améliorations possibles

  • Graphiques avec Chart.js ou ECharts
  • WebSocket pour push temps réel
  • Historique avec graphique temporel
  • Alertes visuelles sur seuils
  • Export des données
  • Comparaison période précédente
  • Carte géographique des paris
  • Filtrage par sport/client

📚 Références