│ │

│ ├── 🧱

: Mini-cards (PIB Moyen, Croissance Faune %).

│ │

│ ├── 🧱

(Grid 2 colonnes)

│ │ ├──

: Canvas 1 (PIB : Observé vs Prévu).

│ │ └──

: Canvas 2 (Faune : Tendance linéaire).

│ │

│ └── 🧱

: Tableau récapitulatif des valeurs brutes.

└── 🏗️

: Sources des données & Copyright Refoia Jeremy Tech.

🎨 CHARTE GRAPHIQUE

🎨 Palette de Couleurs (Basée sur le script)

Primaire (PIB) : #3B82F6 (Bleu – Valeurs observées) / #EF4444 (Rouge – Prévisions).

Secondaire (Faune) : #10B981 (Vert – Observations) / #6366F1 (Indigo – Tendance).

Background : #F3F4F6 (Gris très clair pour reposer l’œil).

🔤 Typographie

Titres : Inter, Sans-serif (Bold) pour la clarté des chiffres.

Données : JetBrains Mono (Optionnel pour les tableaux de données).

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Rendu Graphique Charger la page Les deux graphiques s’animent à l’entrée.

2 Tooltips Hover sur un point Affiche l’année exacte et la valeur (ex: 3694.5 MD$).

3 Toggle Légende Cliquer sur « Prévu » La courbe rouge disparaît/apparaît dynamiquement.

📝 EXEMPLE D’INTÉGRATION JS (Logique du script .py)

JavaScript

// Exemple de configuration pour le graphique PIB

const ctx = document.getElementById(‘gdpChart’).getContext(‘2d’);

new Chart(ctx, {

type: ‘line’,

data: {

labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],

datasets: [{

label: ‘PIB Observé’,

data: [3137.9, 3174.6, 3298.2, 3422.9, 3563.1, 3694.5, null, null],

borderColor: ‘#3B82F6’,

fill: false

}, {

label: ‘Prévu’,

data: [null, null, null, null, null, 3694.5, 3820.1, 3945.7], // Suite logique

borderColor: ‘#EF4444’,

borderDash: [5, 5]

}]

}

});