# The heatmap

### What is a heatmap?

A heat map is a two dimension chart in which asses the intensity of a target indicator. The more darker the color, the higher the intensity. In our example we are going to see how many tasks we have considering Progress and Priority.

![Our heatmap will look like this](https://3220951636-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnUfK4SRGZUB01uvHGeDB%2Fuploads%2FIjUaCK0WE9hp3cpqQ85U%2Fimage.png?alt=media\&token=5ba61a49-898a-4f38-8bb1-9dc765e53149)

The analysis provided by this chart will differ from one case to another. In our task managing system  we would like (ideally) to see that **critical** and **high** priority tasks are **in progress**. Therefore, this quadrant should be darker then the others.

### Power FX

On this first snippet we are using a static data structure. This means we are buiding the two dimension (Progress and Priority) with hard coded formulas. The couting however is happening on a dynamic way, by filtering the datasource and using *CountRows().* The advantage of this method is it becames more readable and simpler. The downside however is that any changes on the two dimension structure will be relying on the code. For instance, if we had one more progress status called **canceled**, the code would need to be changed to reflect it.

Please check the full session where we explain more advanced concepts to make the data structure 100% dynamic.

```csharp
Table(
    {
        name: "Not Started",
        color: "#800080",
        data: [
            {
                label: "Low",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Low",
                        Progress = "Not started"
                    )
                )
            },
            {
                label: "Medium",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Medium",
                        Progress = "Not started"
                    )
                )
            },
            {
                label: "High",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "High",
                        Progress = "Not started"
                    )
                )
            },
            {
                label: "Critical",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Critical",
                        Progress = "Not started"
                    )
                )
            }
        ]
    },
    {
        name: "In Progress",
        color: "#800080",
        data: [
            {
                label: "Low",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Low",
                        Progress = "In progress"
                    )
                )
            },
            {
                label: "Medium",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Medium",
                        Progress = "In progress"
                    )
                )
            },
            {
                label: "High",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "High",
                        Progress = "In progress"
                    )
                )
            },
            {
                label: "Critical",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Critical",
                        Progress = "In progress"
                    )
                )
            }
        ]
    },
    {
        name: "Completed",
        color: "#800080",
        data: [
            {
                label: "Low",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Low",
                        Progress = "Completed"
                    )
                )
            },
            {
                label: "Medium",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Medium",
                        Progress = "Completed"
                    )
                )
            },
            {
                label: "High",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "High",
                        Progress = "Completed"
                    )
                )
            },
            {
                label: "Critical",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Critical",
                        Progress = "Completed"
                    )
                )
            }
        ]
    },
    {
        name: "Blocked",
        color: "#800080",
        data: [
            {
                label: "Low",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Low",
                        Progress = "Blocked"
                    )
                )
            },
            {
                label: "Medium",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Medium",
                        Progress = "Blocked"
                    )
                )
            },
            {
                label: "High",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "High",
                        Progress = "Blocked"
                    )
                )
            },
            {
                label: "Critical",
                value: CountRows(
                    Filter(
                        colWorkProgressTracker,
                        Priority = "Critical",
                        Progress = "Blocked"
                    )
                )
            }
        ]
    }
)
```

###
