The Stat component allows you to display key stats in your internal tools.
Display an important metric
You can add a Stat component to a Space to display important metrics.
Show how you’re tracking with colors
You can apply conditional styling to alert users when a number is lower than expected, or higher.
First, specify the Source that will power this Stat component.
- Specify if the stat will come from a Function or a Binding.
- If Function, select the data source and choose a function.
- If Binding, select a component and specify what data you want the Stat component to bind to.
Internal caps the number of records we’ll calculate at 5000. This means that this component will not produce accurate results for data sets whose output exceeds that limit. Generally, if you’re hitting that limit, we recommend creating a dedicated reporting function that aggregates in the database. For the stat component, there is an option for “Pre-aggregated values” under “How should your data be calculated?“. That’s the option to use if you have custom function to get around the limit.
Name your component and add an optional label to your stat.
Specify how you want the Stat to be calculated.
- Count of records: Counts the total number of records in your source
- Sum of: Sums up all the values of a specified attribute
- Pre-aggregated value: Uses the value as is (if there are multiple records, it will show the value for the first record).
Internal will only Count or Sum up data sets with less than 5000 records. If your data set has more than 5000 records, try adding a Filter to reduce the number of records. Alternatively, you can create a Custom Function and pre-aggregate your stat before using it with this component.
Apply a filter to narrow down your data. For example, you may want to:
- Show data within the last 7 days, 6 months, or a year
- Show data for records that are “completed” or “pending”.
Apply visibility rules to show the Stat component when a certain rule is met. For example, only show the Stat component when the value is greater than 20.
You can customize the design attributes of the Stat component.
Assign a color to your Stat component, and make it conditional. For example, set to red when the value is less than 5, and set to green when the value is greater than 20.
Updated 9 months ago