Strapi How to configure a heat map - kwantu/platformconfiguration GitHub Wiki
Return to Guides
What is a Heat Map?
A Heat Map is a data visualisation tool used to graphically represent the magnitude of a parameter within a collection of boundaries. In this case the boundaries could for a district, country, sector etc. and the parameter is any numerical value such as: The cost of projects, Satisfaction level, etc.
BetterData setup
Before you can render a Heat Map in Strapi you must first configure a dashboard on BetterData with the Choropleth Map (Heat Map) Widget. The map has a series of fields that will be required to be filled out to render properly. Below is a list of the fields.
| Field Name | Description |
|---|---|
| Node ID | This is an automatically generated key for the map |
| Box title | This is the title for the box, on your dashboard, that contains the map |
| Widget | This defines the widget. Here you will select Chloropleth Map (Heat Map) |
| Datasource | Here you need to select the report that contains the relevant data for the heat map |
| Run across communities | Tick this if the dashboard will run across multiple communities |
| Select instance | Select which instance of the datasource you would like to use |
| Score field | This defines which field from your datasource will be associated with the score |
| Boundary code | This defines which field from your datasource will be associated with the boundaries of the heat map |
| Boundary label | This defines which field from your datasource will be associated with the label of the boundaries |
| Disable click | With the Heat Maps you can click a boundary to open a profile. If this option is ticked then the Heat Map cannot be clicked |
| Theme color | Choose which colour you would like your Heat Map to use |
| Color order: (Default is 'Light to dark') | Choose whether you would like your Heat Map to go from light to dark or the opposite. Light to dark with the colour green would mean that a score of 0 would be light green and a score of 100 would be a dark green |
| Context filter | This is used only if you want to pre filter based on a certain code. To work in Strapi this code must match the code used to generate filtered Strapi pages |
Here is an example of what the setup for a Heat Map might look like in BetterData.
Strapi Setup
Once you have your dashboard on BetterData setup with a working Heat Map then you can create a Heat Map Strapi Component. These are the following fields for the Heat Map Component.
| Field Name | Description |
|---|---|
| Page | This defines which page will open when the map is clicked. Note: if you disabled click in betterData then this will do nothing |
| Label | The label for your Heat Map (is displayable) |
| Description | The description for your Heat Map |
| HeatmapId | The unique Id for this strapi component (This will be automatically generated based on your label) |
| DashboardId | The dashboard Id that contains your Heat Map that you created in BetterData |
| NodeId | The node Id for your Heat Map that you created in BetterData |
| Height | The height of the Heat Map |
| Name | The name of this component (is not displayable) |
| DisplayTitle | Choose whether to display the Label or not |