Architecture Globale

Le tableau de bord COVID-19 est construit selon une architecture client-serveur moderne, avec une séparation claire entre le frontend et le backend. Cette approche permet une maintenance plus facile et une meilleure évolutivité du projet.

Stack Technique

Le projet utilise les technologies suivantes :

Backend

• Node.js : Environnement d'exécution JavaScript côté serveur
• Express : Framework web pour Node.js
• PostgreSQL : Système de gestion de base de données relationnelle
• Python : Utilisé pour les scripts d'importation de données
• JWT : JSON Web Tokens pour l'authentification

Frontend

• Vue.js 3 : Framework JavaScript progressif
• Vite : Outil de build moderne pour les applications web
• Chart.js : Bibliothèque de visualisation de données
• Axios : Client HTTP basé sur les promesses
• FontAwesome : Bibliothèque d'icônes

Structure du Projet

Le projet est organisé selon la structure suivante :

covid-dashboard-vue/
├── backend/                # Serveur Node.js et API REST
│   ├── import_data.py      # Script Python pour l'import des données
│   ├── server.js           # Point d'entrée du serveur
│   ├── package.json        # Dépendances du backend
│   └── ...
└── frontend/               # Application Vue.js 3
    ├── src/                # Code source Vue
    │   ├── components/     # Composants Vue
    │   │   ├── Charts/     # Composants de visualisation
    │   │   ├── Dashboard/  # Composants du tableau de bord
    │   │   └── NavBar/     # Barre de navigation
    │   ├── assets/         # Ressources statiques
    │   ├── App.vue         # Composant racine
    │   └── main.js         # Point d'entrée de l'application
    ├── package.json        # Dépendances du frontend
    └── vite.config.js      # Configuration de Vite

Backend

Le backend de l'application est basé sur Node.js avec Express pour l'API REST et PostgreSQL pour le stockage des données. Cette section détaille l'architecture de la base de données, les endpoints de l'API et le processus d'importation des données.

Schéma de Base de Données

La base de données covid_db utilise un modèle relationnel pour stocker les données COVID-19 à différents niveaux géographiques (mondial, régional, national, provincial).

La base de données est conçue avec les tables suivantes :

• who_regions : Stocke les régions définies par l'OMS
• countries : Contient les informations de base sur les pays (nom, continent, population)
• provinces : Enregistre les provinces ou états des pays, avec leurs coordonnées géographiques
• us_counties : Contient les comtés des États-Unis (spécifique aux données américaines détaillées)
• daily_stats : Statistiques quotidiennes par pays (cas confirmés, décès, guérisons, cas actifs)
• province_stats : Statistiques quotidiennes par province
• county_stats : Statistiques quotidiennes par comté (États-Unis)
• country_details : Informations détaillées supplémentaires par pays (tests, taux par million, etc.)

-- Structure complète de la base de données
CREATE DATABASE covid_db;

-- Table des régions WHO
CREATE TABLE who_regions (
    id SERIAL PRIMARY KEY,
    region_name VARCHAR(50) UNIQUE
);

-- Table des pays
CREATE TABLE countries (
    id SERIAL PRIMARY KEY,
    country_name VARCHAR(100) UNIQUE,
    continent VARCHAR(50),
    population BIGINT,
    who_region_id INTEGER REFERENCES who_regions(id)
);

-- Table des provinces/états
CREATE TABLE provinces (
    id SERIAL PRIMARY KEY,
    province_name VARCHAR(100),
    country_id INTEGER REFERENCES countries(id),
    latitude FLOAT,
    longitude FLOAT,
    UNIQUE(province_name, country_id)
);

-- Table des comtés US
CREATE TABLE us_counties (
    id SERIAL PRIMARY KEY,
    county_name VARCHAR(100),
    state_id INTEGER REFERENCES provinces(id),
    fips VARCHAR(10),
    latitude FLOAT,
    longitude FLOAT,
    UNIQUE(fips)
);

-- Table des statistiques quotidiennes par pays
CREATE TABLE daily_stats (
    id SERIAL PRIMARY KEY,
    country_id INTEGER REFERENCES countries(id),
    date DATE,
    confirmed INTEGER,
    deaths INTEGER,
    recovered INTEGER,
    active INTEGER,
    new_cases INTEGER,
    new_deaths INTEGER,
    new_recovered INTEGER,
    UNIQUE(country_id, date)
);

-- Table des statistiques quotidiennes par province
CREATE TABLE province_stats (
    id SERIAL PRIMARY KEY,
    province_id INTEGER REFERENCES provinces(id),
    date DATE,
    confirmed INTEGER,
    deaths INTEGER,
    recovered INTEGER,
    active INTEGER,
    UNIQUE(province_id, date)
);

-- Table des statistiques quotidiennes par comté US
CREATE TABLE county_stats (
    id SERIAL PRIMARY KEY,
    county_id INTEGER REFERENCES us_counties(id),
    date DATE,
    confirmed INTEGER,
    deaths INTEGER,
    UNIQUE(county_id, date)
);

-- Table des statistiques détaillées par pays
CREATE TABLE country_details (
    id SERIAL PRIMARY KEY,
    country_id INTEGER REFERENCES countries(id),
    total_tests BIGINT,
    tests_per_million FLOAT,
    cases_per_million FLOAT,
    deaths_per_million FLOAT,
    serious_critical INTEGER,
    last_updated DATE,
    UNIQUE(country_id, last_updated)
);

API Endpoints

Le backend expose plusieurs endpoints REST pour permettre au frontend d'accéder aux données. Voici les principaux endpoints :

// Exemple d'implémentation de l'API global-stats dans server.js
app.get('/api/global-stats', async (req, res) => {
    try {
        const result = await pool.query(`
            SELECT
                SUM(confirmed) as total_confirmed,
                SUM(deaths) as total_deaths,
                SUM(recovered) as total_recovered,
                SUM(active) as total_active
            FROM daily_stats
            WHERE date = (SELECT MAX(date) FROM daily_stats)
        `);
        res.json(result.rows[0]);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
});

Import des Données

Le processus d'import des données est géré par un script Python import_data.py. Ce script se connecte à la base de données PostgreSQL, lit plusieurs fichiers CSV contenant les données COVID-19, et les insère dans les tables correspondantes.

Le script utilise la bibliothèque Python pandas pour la manipulation des données et psycopg2 pour se connecter à PostgreSQL. L'import des données se déroule en plusieurs étapes :

1. Lecture des fichiers : Le script lit différents fichiers CSV contenant des données COVID-19
2. Nettoyage des données : Les données sont nettoyées et normalisées
3. Insertion des régions WHO : Les régions définies par l'OMS sont insérées en premier
4. Insertion des pays : Les pays et leurs informations de base sont insérés
5. Insertion des provinces : Les provinces et états sont insérés avec leurs coordonnées
6. Insertion des comtés US : Les comtés américains sont insérés pour les données détaillées
7. Insertion des statistiques : Les données quotidiennes sont insérées pour chaque niveau géographique

# Extrait du script import_data.py
def insert_who_regions(conn, df):
    """Insertion des régions WHO"""
    with conn.cursor() as cur:
        for region in pd.unique(df['WHO Region']):
            cur.execute("""
                INSERT INTO who_regions (region_name)
                VALUES (%s)
                ON CONFLICT (region_name) DO NOTHING
                RETURNING id
            """, (region,))
        conn.commit()

def insert_countries(conn, df_countries, df_worldometer):
    """Insertion des pays"""
    with conn.cursor() as cur:
        # Récupération du mapping des régions WHO
        cur.execute("SELECT region_name, id FROM who_regions")
        who_regions_map = dict(cur.fetchall())
        
        # Fusion et insertion des données pays
        for _, row in df_countries.iterrows():
            worldometer_data = df_worldometer[
                df_worldometer['Country/Region'] == row['Country/Region']
            ].iloc[0] if len(df_worldometer[df_worldometer['Country/Region'] == row['Country/Region']]) > 0 else None
            
            cur.execute("""
                INSERT INTO countries (country_name, continent, population, who_region_id)
                VALUES (%s, %s, %s, %s)
                ON CONFLICT (country_name) DO UPDATE
                SET continent = EXCLUDED.continent,
                    population = EXCLUDED.population,
                    who_region_id = EXCLUDED.who_region_id
                RETURNING id
            """, (
                row['Country/Region'],
                worldometer_data['Continent'] if worldometer_data is not None else None,
                worldometer_data['Population'] if worldometer_data is not None else None,
                who_regions_map.get(row['WHO Region'])
            ))
        conn.commit()

Frontend

Le frontend de l'application est développé avec Vue.js 3, un framework JavaScript progressif. Cette section détaille l'architecture frontend, les composants principaux et les vues de l'application.

Structure Vue.js

L'application Vue.js est organisée selon une architecture modulaire et composable. Le point d'entrée est le fichier main.js qui monte l'application sur l'élément DOM avec l'ID "app".

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@fortawesome/fontawesome-free/css/all.css'

createApp(App).mount('#app')

Le composant racine App.vue contient la structure principale de l'application et gère la navigation entre les différentes vues :

<template>
  <div>
    <nav-bar :active-view="activeView" @change-view="changeView" />

    <div class="container">
      <error-message :message="errorMessage" />

      <mondial-view v-if="activeView === 'mondial'" @show-error="showError" />
      <regions-view v-if="activeView === 'regions'" @show-error="showError" />
      <pays-view v-if="activeView === 'pays'" @show-error="showError" />
      <correlation-view v-if="activeView === 'correlation'" @show-error="showError" />
      <tendances-view v-if="activeView === 'tendances'" @show-error="showError" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import NavBar from './components/NavBar/NavBar.vue';
import ErrorMessage from './components/Dashboard/ErrorMessage.vue';
import MondialView from './components/Dashboard/MondialView.vue';
import RegionsView from './components/Dashboard/RegionsView.vue';
import PaysView from './components/Dashboard/PaysView.vue';
import CorrelationView from './components/Dashboard/CorrelationView.vue';
import TendancesView from './components/Dashboard/TendancesView.vue';

const activeView = ref('mondial');
const errorMessage = ref('');

function changeView(view) {
  activeView.value = view;
  errorMessage.value = '';
}

function showError(message) {
  errorMessage.value = message;
  setTimeout(() => {
    if (errorMessage.value === message) {
      errorMessage.value = '';
    }
  }, 5000);
}
</script>

Composants

L'application est construite avec plusieurs composants réutilisables, organisés en catégories :

Vues

L'application est divisée en plusieurs vues principales, chacune représentant une section fonctionnelle du tableau de bord :

<template>
      <div id="mondial" class="visualization-section">
        <global-stats @toggle-dataset="toggleDataset" @show-error="showError" />
        <world-chart ref="worldChart" @toggle-loading="setLoading" @show-error="showError" />
        <loading-indicator :is-loading="isLoading" />
      </div>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    import GlobalStats from './GlobalStats.vue';
    import WorldChart from '../Charts/WorldChart.vue';
    import LoadingIndicator from './LoadingIndicator.vue';
    
    const isLoading = ref(false);
    const worldChart = ref(null);
    
    function toggleDataset(datasetName) {
      if (worldChart.value) {
        worldChart.value.toggleDataset(datasetName);
      }
    }
    
    function showError(message) {
      emit('show-error', message);
    }
    
    function setLoading(loading) {
      isLoading.value = loading;
    }
    </script>

<template>
      <div id="pays" class="visualization-section">
        <div class="options-panel">
          <div class="options-grid">
            <div class="option-group">
              <label>Sélectionner un pays</label>
              <country-selector :value="selectedCountry" @country-changed="updateSelectedCountry" @show-error="showError" />
            </div>
          </div>
        </div>
    
        <country-stats :stats="countryStats" />
        <country-chart :selectedCountry="selectedCountry" @toggle-loading="setLoading" @show-error="showError" @update-stats="updateCountryStats" @country-changed="updateSelectedCountry" />
        <loading-indicator :is-loading="isLoading" />
      </div>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    import CountrySelector from './CountrySelector.vue';
    import CountryStats from './CountryStats.vue';
    import CountryChart from '../Charts/CountryChart.vue';
    import LoadingIndicator from './LoadingIndicator.vue';
    
    const selectedCountry = ref('France');
    const countryStats = ref({
      confirmed: null,
      deaths: null,
      recovered: null,
      active: null,
      mortalityRate: null
    });
    const isLoading = ref(false);
    
    function updateSelectedCountry(country) {
      selectedCountry.value = country;
    }
    
    function updateCountryStats(stats) {
      countryStats.value = stats;
    }
    
    function showError(message) {
      emit('show-error', message);
    }
    
    function setLoading(loading) {
      isLoading.value = loading;
    }
    </script>

<template>
      <div id="correlation" class="visualization-section">
        <div class="coming-soon">
          <h2>Analyse des corrélations</h2>
          <p>Cette fonctionnalité sera disponible prochainement.</p>
        </div>
      </div>
    </template>

Flux de Données

Cette section explique comment les données circulent dans l'application, depuis la base de données jusqu'à l'affichage dans l'interface utilisateur.

Le flux de données suit les étapes suivantes :

1. Base de données → API Backend : Les données sont extraites de PostgreSQL par les requêtes SQL exécutées par le serveur Express
2. API Backend → Frontend : Les données sont formatées en JSON et envoyées au frontend via les endpoints REST
3. Axios → Composants Vue : Le client HTTP Axios récupère les données et les transmet aux composants Vue
4. Composants Vue → Composants Chart : Les données sont passées aux composants de visualisation via des props
5. Composants Chart → Interface utilisateur : Les graphiques et visualisations sont rendus dans l'interface
6. Interface utilisateur → API Backend : Les interactions de l'utilisateur déclenchent de nouvelles requêtes à l'API

Gestion de l'État

L'application utilise la Composition API de Vue.js 3 pour gérer l'état local dans chaque composant :

• Chaque vue principale gère son propre état local (ex: pays sélectionné, options de graphique)
• Les événements sont utilisés pour communiquer entre composants parents et enfants
• Les références ref sont utilisées pour stocker les données réactives

// Exemple de gestion d'état dans PaysView.vue
    const selectedCountry = ref('France');  // État local pour le pays sélectionné
    const countryStats = ref({              // État local pour les statistiques du pays
      confirmed: null,
      deaths: null,
      recovered: null,
      active: null,
      mortalityRate: null
    });
    const isLoading = ref(false);           // État local pour l'indicateur de chargement
    
    // Fonction pour mettre à jour l'état
    function updateSelectedCountry(country) {
      selectedCountry.value = country;
    }

Optimisations de Performance

Pour garantir des performances optimales, l'application implémente plusieurs optimisations :

• Chargement paresseux des vues : Seule la vue active est rendue (v-if)
• Requêtes optimisées : Les requêtes SQL sont optimisées pour récupérer uniquement les données nécessaires
• Mise en cache côté client : Axios peut mettre en cache certaines réponses pour éviter des requêtes répétées
• Optimisation des rendus : Chart.js est configuré pour optimiser les rendus des graphiques

Installation et Déploiement

Cette section fournit des instructions détaillées pour installer, configurer et déployer l'application dashboard COVID-19.

Prérequis

• Node.js (v14+)
• PostgreSQL (v12+)
• Python 3.7+ (pour l'import des données)
• npm ou yarn

Configuration de la Base de Données

1. Créer une base de données PostgreSQL nommée covid_db :

psql -U postgres
    CREATE DATABASE covid_db;
    \c covid_db

Copier
2. Créer les tables en exécutant le script SQL fourni :

psql -U postgres -d covid_db -f structure_table.txt

Copier

Installation du Backend

1. Naviguer vers le dossier backend :

cd covid-dashboard/covid-dashboard-vue/backend

Copier
2. Installer les dépendances :

npm install

Copier
3. Créer un fichier .env pour les variables d'environnement :

DB_NAME=covid_db
    DB_USER=postgres
    DB_PASSWORD=votre_mot_de_passe
    DB_HOST=localhost
    DB_PORT=5432
    JWT_SECRET=votre_secret_jwt
    ADMIN_USERNAME=admin
    ADMIN_PASSWORD=mot_de_passe_admin
    PORT=3000

Copier

Import des Données

1. Installer les dépendances Python :

pip install pandas psycopg2-binary python-dotenv

Copier
2. Exécuter le script d'importation :

python import_data.py

Copier

Installation du Frontend

1. Naviguer vers le dossier frontend :

cd ../frontend

Copier
2. Installer les dépendances :

npm install

Copier

Lancement en Développement

1. Démarrer le serveur backend :

cd ../backend
    npm start

Copier
2. Dans un autre terminal, démarrer le serveur frontend :

cd ../frontend
    npm run dev

Copier
3. Accéder à l'application via http://localhost:5173

Build pour Production

1. Créer un build de production du frontend :

cd ../frontend
    npm run build

Copier
2. Copier les fichiers du dossier dist vers le dossier public du backend :

mkdir -p ../backend/public
    cp -r dist/* ../backend/public/

Copier
3. Lancer le serveur en production :

cd ../backend
    NODE_ENV=production npm start

Copier

Déploiement avec Docker (Optionnel)

L'application peut également être déployée à l'aide de Docker :

# Exemple de Dockerfile pour le backend
    FROM node:14-alpine
    
    WORKDIR /app
    
    COPY package*.json ./
    RUN npm install
    
    COPY . .
    
    EXPOSE 3000
    
    CMD ["npm", "start"]

Tutoriels

Ajout d'un Nouveau Type de Graphique

Ce tutoriel explique comment ajouter un nouveau type de graphique à l'application :

1. Ajouter l'option dans le composant ChartOptions.vue :

<select :id="chartTypeId" v-model="localChartType" @change="emitChartTypeChange">
        <option value="line">Ligne</option>
        <option value="bar">Barres</option>
        <option value="area">Aire</option>
        <option value="scatter">Nuage de points</option> <!-- Nouveau type -->
        <option v-if="showPieOptions" value="pie">Camembert</option>
        <option v-if="showPieOptions" value="doughnut">Anneau</option>
    </select>

Copier
2. Modifier la fonction createDataset dans les composants de graphique pour gérer le nouveau type :

function createDataset(label, data, color) {
        return {
            label: label,
            data: data,
            borderColor: color,
            backgroundColor: chartType.value === 'bar' ? `${color}88` : `${color}22`,
            fill: chartType.value === 'area',
            tension: 0.4,
            id: label.toLowerCase().replace(/\s+/g, ''),
            // Configurations spécifiques au type scatter
            pointRadius: chartType.value === 'scatter' ? 4 : 0,
            pointHoverRadius: 6
        };
    }

Copier

Ajout d'un Nouvel Endpoint API

Ce tutoriel explique comment ajouter un nouvel endpoint à l'API backend :

1. Ajouter la route dans server.js :

// API pour obtenir les prédictions de cas
    app.get('/api/predictions/:country', async (req, res) => {
        try {
            const result = await pool.query(`
                WITH last_30_days AS (
                    SELECT
                        d.date,
                        d.confirmed
                    FROM daily_stats d
                    JOIN countries c ON d.country_id = c.id
                    WHERE c.country_name = $1
                    ORDER BY d.date DESC
                    LIMIT 30
                )
                SELECT
                    date,
                    confirmed,
                    -- Calcul simple de prédiction basé sur la tendance des 30 derniers jours
                    confirmed + (
                        (SELECT MAX(confirmed) - MIN(confirmed) FROM last_30_days) / 30
                    ) * 7 AS prediction_7_days
                FROM last_30_days
                ORDER BY date DESC
                LIMIT 1
            `, [req.params.country]);
            
            res.json(result.rows[0]);
        } catch (err) {
            res.status(500).json({ error: err.message });
        }
    });

Copier
2. Accéder à cet endpoint depuis le frontend avec Axios :

async function loadPredictions(country) {
        try {
            const response = await axios.get(`/api/predictions/${country}`);
            return response.data;
        } catch (error) {
            console.error('Erreur lors du chargement des prédictions:',error);
            throw error;
        }
    }

Copier

Modification du Format des Données

Ce tutoriel explique comment ajouter un nouveau format de données pour les graphiques :

1. Ajouter l'option dans le composant ChartOptions.vue :

<select :id="dataFormatId" v-model="localDataFormat" @change="emitDataFormatChange">
        <option value="raw">Valeurs brutes</option>
        <option value="daily">Variation quotidienne</option>
        <option value="weekly">Moyenne mobile (7j)</option>
        <option value="monthly">Moyenne mobile (30j)</option>
        <option value="percentage">Pourcentage du total</option> <!-- Nouveau format -->
    </select>

Copier
2. Implémenter le traitement pour ce format dans la fonction processData :

const processData = (data, format) => {
        switch (format) {
            case 'percentage':
                // Calcul du pourcentage par rapport au total
                const totals = data.map(item => item.confirmed + item.deaths + item.recovered + item.active);
                return data.map((item, i) => ({
                    ...item,
                    confirmed: (item.confirmed / totals[i]) * 100,
                    deaths: (item.deaths / totals[i]) * 100,
                    recovered: (item.recovered / totals[i]) * 100,
                    active: (item.active / totals[i]) * 100
                }));
            case 'daily':
                return data.map((item, index) => {
                    if (index === 0) return item;
                    return {
                        ...item,
                        confirmed: item.confirmed - data[index - 1].confirmed,
                        deaths: item.deaths - data[index - 1].deaths,
                        recovered: item.recovered - data[index - 1].recovered,
                        active: item.active - data[index - 1].active
                    };
                });
            case 'weekly':
                return calculateMovingAverage(data, 7);
            case 'monthly':
                return calculateMovingAverage(data, 30);
            default:
                return data;
        }
    };

Copier

FAQs - Questions Fréquemment Posées

const chartConfig = ref({
        datasets: {
            confirmed: true,
            deaths: true,
            recovered: true,
            active: true
        },
        colors: {
            confirmed: '#1a73e8',  // Bleu
            deaths: '#dc3545',     // Rouge
            recovered: '#28a745',  // Vert
            active: '#ffc107'      // Jaune
        }
    });