Reactive variables

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.