Top N Card
The Top N Card is an analytics visualisation that is used to show outliers within a single metric.
It shows the proportional breakdown of a single metric and the bar visualiation shows the proportion relative to the total amount. The rows should ordered by size in descending order.
Show 5 rows by default
You should show 5 rows of data by default, but prepared that a user could change this value to 10 or 15. This is keep data density high while also allowing the user to expand as needed.
Avoid data with lots of unique values
Avoid using metrics that are unique, an example of this would be user IDs as every record will only have one value associated with it. These kind of dimensions are said to have high cardinality.
Countries
Paths
If your data is being loaded asyncronously you should use the loading prop to ensure the page doesn't jump when data is loaded in.
TopNCard dimensions can be used as filters, you will need to pass filtering functions to the onAddFilter, onExcludeFilter and onRemoveFilter props for the filtering UI component to display. Look at the props table below for more information on what data is exposed through these functions.
When a filter has been applied you should use the filteredBy prop to pass down the dimension that has been filtered, this will show a UI to remove the filter.
- Design
- Implementation
TODO - Design
Product Usage
- Dashboard
- Teams
- Radar