# Variables réactives

**Résumé express :** Calculer automatiquement le pourcentage de progression avec variables computed, map et filter pour une réactivité en temps réel.

---

## Introduction aux variables computed

Nous allons créer un indicateur de progression qui affiche le pourcentage d'avancement du projet. Concrètement : **nombre de tâches terminées / nombre total de tâches × 100**.

## Pourquoi une variable computed ?

Contrairement aux variables classiques, les **variables computed** se recalculent automatiquement quand les données changent. Parfait pour un pourcentage qui doit être mis à jour à chaque ajout ou modification de tâche.

## 1. Créer la variable computed

### Configuration de base
1. Créer une variable **computed** nommée "percentage"
2. L'afficher dans l'interface (par exemple entre parenthèses dans le header)
3. Accéder à l'onglet **Logic** pour définir le calcul

## 2. Calculer le nombre total de tâches

### Récupérer les données du store
1. Utiliser **get store**
2. **Spread** le store pour accéder aux propriétés
3. Utiliser **get property** pour récupérer "cards"

### Utiliser la fonction Map
La fonction **Map** exécute une fonction sur chaque élément d'un tableau.

1. Connecter le tableau de cartes à un bloc **Map**
2. Créer une **lambda function** (fonction anonyme)
3. Dans cette fonction :
    - Récupérer l'élément courant
    - Utiliser **get property** pour obtenir "tasks"
    - Utiliser **get length** pour compter les tâches
4. Connecter à l'exécution de la computed

### Additionner tous les résultats
1. Le Map retourne un tableau de nombres (nombre de tâches par carte)
2. Utiliser **Sum** pour additionner tous les éléments
3. Résultat : nombre total de tâches dans l'application

## 3. Calculer le nombre de tâches terminées

### Filtrer les cartes "Terminé"
1. Récupérer à nouveau le store et les cartes
2. Utiliser **Filter** au lieu de Map
3. Le Filter garde seulement les éléments qui passent un test

### Configurer le test de filtrage
1. Dans la lambda function du Filter :
    - Utiliser **get property** pour récupérer "title"
    - Tester si **title equals "Terminé"**
    - Le callback devient rouge (boolean) car c'est un test
2. Connecter à l'exécution (après le Map)

### Compter les tâches de la carte "Terminé"
1. Le Filter retourne un tableau avec un seul élément (la carte "Terminé")
2. Utiliser **hat** (index 0) pour récupérer le premier élément
3. **Get property** → "tasks" → **get length**
4. Résultat : nombre de tâches terminées

## 4. Calculer le pourcentage

### Division et formatage
1. Utiliser **Divide** : tâches terminées ÷ tâches totales
2. **Multiply** par 100 pour avoir un pourcentage
3. **Round** pour arrondir le résultat
4. Connecter le résultat final à la variable **percentage**

### Fonction Deep pour les tableaux
⚠️ **Important** : Comme nous utilisons des tableaux, ajouter la fonction **deep** à la computed pour qu'elle surveille les changements en profondeur.

## Structure logique complète

Le flux de données complet :
1. **Store** → cartes → **Map** → longueurs → **Sum** = total des tâches
2. **Store** → cartes → **Filter** → carte "Terminé" → **Hat[0]** → tâches → **Length** = tâches terminées
3. **Divide** → **Multiply 100** → **Round** = pourcentage final

## Concepts clés

### Variables computed
- **Réactivité automatique** : recalcul à chaque changement des dépendances
- **Performance optimisée** : mise en cache jusqu'au prochain changement
- **Déclaratif** : on décrit ce qu'on veut, pas comment l'obtenir

### Fonctions de tableau avancées
- **Map** : transformation de chaque élément
- **Filter** : sélection conditionnelle d'éléments
- **Sum** : agrégation de valeurs numériques
- **Hat[index]** : accès à un élément spécifique

### Surveillance profonde
- **deep** : nécessaire pour surveiller les changements dans les objets/tableaux
- Sans deep : seules les références sont surveillées
- Avec deep : tous les changements internes sont détectés

## Avantages de cette approche

- **Temps réel** : l'indicateur se met à jour instantanément
- **Automatique** : aucune action manuelle requise
- **Performant** : recalcul uniquement si nécessaire
- **Maintenable** : logique centralisée et réutilisable

---

*Prochainement : Organiser et structurer le code avec des fonctions réutilisables.*