This widget is ideal for displaying simple KPI visualizations.
Despite its simplicity, it offers useful enhancements such as:
- Progress Bar: Track your metric’s progress against a target value.
- Comparison Value: Easily compare current results with those from a previous quarter.
These features make it easy to monitor key performance trends at a glance.
Configuration
1. View
Select the view you want to use as the base for your widget. You can use a saved view or select “Embedded View” and create a new one for this widget.
2. App
Choose the application you would like to use for the data for the widget.
3. Filter
You can adjust the filters from a previously saved view or add filters just for this widget.
For more information on filters see the following article:
4. Field
Choose the field you would like to use to base your number widget off of. Only fields within your chosen application will be available.
5. Calculate
For number widgets you can decide how you would like to calculate the numbers from you chosen app and field.
6. Atributes
This section lets you customize the appearance and behavior of the widget’s main value display:
Subtitle: Add supporting text below the main number for extra context.
Font Size: Choose between Small, Medium, or Large to best fit your layout and design preferences.
Format Mask: Control how the number is displayed using format patterns.
Note: For advanced formatting, refer to the Numeral.js documentation.
Alignment: Align all displayed information to the Left, Center, or Right of the widget.
Show % Bar: Enable this to show a percentage progress bar below the subtitle.
- Lower Limit: Define the starting point of the percentage bar.
- Upper Limit: Set the maximum value the percentage bar represents.
- Value Color: Choose the color for the percentage bar to match your visual style.
7. Comparison
Clicking this checkbox will give you the ability to add another calculation for comparison. You can choose from the filters you enabled earlier and decide on the parameters for displaying the number.
For example, you could choose to display the total revenue for the current quarter in the main number while displaying the previous quarters revenue in the comparison.
