Stat

Display key stats in your internal tools.

Note: 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.

Ways to use a Stat component

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.

Configuring your Stat

Data

‍Source

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.

Text

Name your component and add an optional label to your stat.

Stat Details

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).

Note: 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. 

‍

Filters

Apply a filter to narrow down your data. For example, you may want to:

1. Show data within the last 7 days, 6 months, or a year
2. Show data for records that are “completed” or “pending”.

‍Visibility Rules

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.

‍

‍Design

Layout

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

‍

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

‍

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.

‍

Style

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.