# Reactive variables

**Express Summary:** Automatically calculate progress percentage with computed variables, map and filter for real-time reactivity.

---

## Introduction to computed variables

We're going to create a progress indicator that displays the project advancement percentage. Concretely: **number of completed tasks / total number of tasks � 100**.

## Why a computed variable?

Unlike regular variables, **computed variables** automatically recalculate when data changes. Perfect for a percentage that needs to be updated with each task addition or modification.

## 1. Create the computed variable

### Basic configuration
1. Create a **computed** variable named "percentage"
2. Display it in the interface (for example in parentheses in the header)
3. Access the **Logic** tab to define the calculation

## 2. Calculate total number of tasks

### Retrieve store data
1. Use **get store**
2. **Spread** the store to access properties
3. Use **get property** to retrieve "cards"

### Use the Map function
The **Map** function executes a function on each array element.

1. Connect the card array to a **Map** block
2. Create a **lambda function** (anonymous function)
3. In this function:
    - Retrieve current element
    - Use **get property** to get "tasks"
    - Use **get length** to count tasks
4. Connect to computed execution

### Sum all results
1. Map returns an array of numbers (number of tasks per card)
2. Use **Sum** to add all elements
3. Result: total number of tasks in the application

## 3. Calculate number of completed tasks

### Filter "Done" cards
1. Retrieve store and cards again
2. Use **Filter** instead of Map
3. Filter keeps only elements that pass a test

### Configure filtering test
1. In Filter's lambda function:
    - Use **get property** to retrieve "title"
    - Test if **title equals "Done"**
    - Callback becomes red (boolean) because it's a test
2. Connect to execution (after Map)

### Count tasks in "Done" card
1. Filter returns an array with one element (the "Done" card)
2. Use **hat** (index 0) to retrieve the first element
3. **Get property** � "tasks" � **get length**
4. Result: number of completed tasks

## 4. Calculate percentage

### Division and formatting
1. Use **Divide**: completed tasks � total tasks
2. **Multiply** by 100 to get percentage
3. **Round** to round the result
4. Connect final result to **percentage** variable

### Deep function for arrays
� **Important**: Since we use arrays, add the **deep** function to the computed to monitor deep changes.

## Complete logical structure

The complete data flow:
1. **Store** � cards � **Map** � lengths � **Sum** = total tasks
2. **Store** � cards � **Filter** � "Done" card � **Hat[0]** � tasks � **Length** = completed tasks
3. **Divide** � **Multiply 100** � **Round** = final percentage

## Key concepts

### Computed variables
- **Automatic reactivity**: recalculation on each dependency change
- **Optimized performance**: cached until next change
- **Declarative**: describe what we want, not how to get it

### Advanced array functions
- **Map**: transformation of each element
- **Filter**: conditional selection of elements
- **Sum**: aggregation of numeric values
- **Hat[index]**: access to specific element

### Deep monitoring
- **deep**: necessary to monitor changes in objects/arrays
- Without deep: only references are monitored
- With deep: all internal changes are detected

## Advantages of this approach

- **Real-time**: indicator updates instantly
- **Automatic**: no manual action required
- **Performant**: recalculation only when necessary
- **Maintainable**: centralized and reusable logic

---

*Coming next: Organize and structure code with reusable functions.*