Defining Metrics
Learn how to define metrics in Nova.
Nova metrics allow you to quickly gain insight on key business indicators for your application. For example, you may define a metric to display the total number of users added to your application per day, or the amount of weekly sales for a given product.
Nova offers several types of built-in metrics: value, trend, partition, and progress. We’ll examine each type of metric and demonstrate their usage below.
Value Metrics
Value metrics display a single value and, if desired, its change compared to a previous time interval. For example, a value metric might display the total number of users created in the last thirty days compared with the previous thirty days:
Value metrics may be generated using the nova:value
Artisan command. By default, all new metrics will be placed in the app/Nova/Metrics
directory:
Once your value metric class has been generated, you’re ready to customize it. Each value metric class contains a calculate
method. This method should return a Laravel\Nova\Metrics\ValueResult
instance. Don’t worry, Nova ships with a variety of helpers for quickly generating metric results.
In this example, we are using the count
helper, which will automatically perform a count
query against the specified Eloquent model for the selected range, as well as automatically retrieve the count for the “previous” range:
Value Query Types
Value metrics don’t only ship with a count
helper. You may also use a variety of other aggregate functions when building your metric. Let’s explore each of them now.
Average
The average
method may be used to calculate the average of a given column compared to the previous time interval / range:
Sum
The sum
method may be used to calculate the sum of a given column compared to the previous time interval / range:
Max
The max
method may be used to calculate the maximum value of a given column compared to the previous time interval / range:
Min
The min
method may be used to calculate the minimum value of a given column compared to the previous time interval / range:
Value Ranges
Every value metric class contains a ranges
method. This method determines the ranges that will be available in the value metric’s range selection menu. The array’s keys determine the number of days that should be included in the query, while the values determine the “human readable” text that will be placed in the range selection menu. Of course, you are not required to define any ranges at all:
You may customize these ranges to suit your needs; however, if you are using the built-in “Today”, “Yesterday”, “Month To Date”, “Quarter To Date”, “Year To Date”, or “All Time” ranges, you should not change their keys.
Zero Result Values
By default, Nova will handle results of 0
as a result containing no data. This may not always be correct, which is why you can use the allowZeroResult
method to indicate that 0
is a valid value result:
Formatting the Value
You can add a prefix and / or suffix to the Value metric’s result by invoking the prefix
and suffix
methods when returning the ValueResult
instance:
You may also use the currency
method to specify that a given value result represents a currency value. By default, the currency symbol will be $
, but you may also specify your own currency symbol by passing the symbol as an argument to the currency
method:
To customize the display format of a value result, you may use the format
method. The format must be one of the formats supported by Numbro:
Transforming a Value Result
There may be times you need to “transform” a value result before it is displayed to the user. For example, let’s say you have a “Total Revenue” metric which calculates the total revenue for a product in cents. You may wish to present this value to the user in dollars versus cents. To transform the value before it’s displayed, you can use the transform
helper:
Manually Building Value Results
If you are not able to use the included query helpers for building your value metric, you may easily manually provide the final values to the metric using the result
and previous
methods, giving you full control over the calculation of these values:
Trend Metrics
Trend metrics display values over time via a line chart. For example, a trend metric might display the number of new users created per day over the previous thirty days:
Trend metrics may be generated using the nova:trend
Artisan command. By default, all new metrics will be placed in the app/Nova/Metrics
directory:
Once your trend metric class has been generated, you’re ready to customize it. Each trend metric class contains a calculate
method. This method should return a Laravel\Nova\Metrics\TrendResult
object. Don’t worry, Nova ships with a variety of helpers for quickly generating results.
In this example, we are using the countByDays
helper, which will automatically perform a count
query against the specified Eloquent model for the selected range and for the selected interval unit (in this case, days):
Trend Query Types
Trend metrics don’t only ship with a countByDays
helper. You may also use a variety of other aggregate functions and time intervals when building your metric.
Count
The count
methods may be used to calculate the count of a given column over time:
Average
The average
methods may be used to calculate the average of a given column over time:
Sum
The sum
methods may be used to calculate the sum of a given column over time:
Max
The max
methods may be used to calculate the maximum value of a given column over time:
Min
The min
methods may be used to calculate the minimum value of a given column over time:
Trend Ranges
Every trend metric class contains a ranges
method. This method determines the ranges that will be available in the trend metric’s range selection menu. The array’s keys determine the number of time interval units (months, weeks, days, etc.) that should be included in the query, while the values determine the “human readable” text that will be placed in the range selection menu. Of course, you are not required to define any ranges at all:
Displaying the Current Value
Sometimes, you may wish to emphasize the value for the latest trend metric time interval. For example, in this screenshot, six users have been created during the last day:
To accomplish this, you may use the showLatestValue
method:
To customize the display format of a value result, you may use the format
method. The format must be one of the formats supported by Numbro:
Displaying the Trend Sum
By default, Nova only displays the last value of a trend metric as the emphasized, “current” value. However, sometimes you may wish to show the total count of the trend instead. You can accomplish this by invoking the showSumValue
method when returning your values from a trend metric:
Formatting the Trend Value
Sometimes you may wish to add a prefix or suffix to the emphasized, “current” trend value. To accomplish this, you may use the prefix
and suffix
methods:
If your trend metric is displaying a monetary value, you may use the dollars
and euros
convenience methods for quickly prefixing a Dollar or Euro sign to the trend values:
Manually Building Trend Results
If you are not able to use the included query helpers for building your trend metric, you may manually construct the Laravel\Nova\Metrics\TrendResult
object and return it from your metric’s calculate
method. This approach to calculating trend data gives you total flexibility when building the data that should be graphed:
Partition Metrics
Partition metrics displays a pie chart of values. For example, a partition metric might display the total number of users for each billing plan offered by your application:
Partition metrics may be generated using the nova:partition
Artisan command. By default, all new metrics will be placed in the app/Nova/Metrics
directory:
Once your partition metric class has been generated, you’re ready to customize it. Each partition metric class contains a calculate
method. This method should return a Laravel\Nova\Metrics\PartitionResult
object. Don’t worry, Nova ships with a variety of helpers for quickly generating results.
In this example, we are using the count
helper, which will automatically perform a count
query against the specified Eloquent model and retrieve the number of models belonging to each distinct value of your specified “group by” column:
Partition Query Types
Partition metrics don’t only ship with a count
helper. You may also use a variety of other aggregate functions when building your metric.
Average
The average
method may be used to calculate the average of a given column within distinct groups. For example, the following call to the average
method will display a pie chart with the average order price for each department of the company:
Sum
The sum
method may be used to calculate the sum of a given column within distinct groups. For example, the following call to the sum
method will display a pie chart with the sum of all order prices for each department of the company:
Max
The max
method may be used to calculate the max of a given column within distinct groups. For example, the following call to the max
method will display a pie chart with the maximum order price for each department of the company:
Min
The min
method may be used to calculate the min of a given column within distinct groups. For example, the following call to the min
method will display a pie chart with the minimum order price for each department of the company:
Customizing Partition Labels
Often, the column values that divide your partition metrics into groups will be simple keys, and not something that is “human readable”. Or, if you are displaying a partition metric grouped by a column that is a boolean, Nova will display your group labels as “0” and “1”. For this reason, Nova allows you to provide a Closure that formats the label into something more readable:
Customizing Partition Colors
By default, Nova will choose the colors used in a partition metric. Sometimes, you may wish to change these colors to better match the type of data they represent. To accomplish this, you may call the colors
method when returning your partition result from the metric:
Manually Building Partition Results
If you are not able to use the included query helpers for building your partition metric, you may manually provide the final values to the metric using the result
method, providing maximum flexibility:
Progress Metric
Progress metrics display current progress against a target value within a bar chart. For example, a progress metric might display the number of users registered for the given month compared to a target goal:
Progress metrics may be generated using the nova:progress
Artisan command. By default, all new metrics will be placed in the app/Nova/Metrics
directory:
Once your progress metric class has been generated, you’re ready to customize it. Each progress metric class contains a calculate
method. This method should return a Laravel\Nova\Metrics\ProgressResult
object. Don’t worry, Nova ships with a variety of helpers for quickly generating results.
In this example, we are using the count
helper to determine if we have reached our new user registration goal for the month. The count
helper will automatically perform a count
query against the specified Eloquent model:
Sum
Progress metrics don’t only ship with a count
helper. You may also use the sum
aggregate method when building your metric. For example, the following call to the sum
method will display a progress metric with the sum of the completed transaction amounts against a target sales goal:
Unwanted Progress
Sometimes you may be tracking progress towards a “goal” you would rather avoid, such as the number of customers that have cancelled in a given month. In this case, you would typically want the color of the progress metric to no longer be green as you approach your “goal”.
When using the avoid
method to specify that the metric is something you wish to avoid, Nova will use green to indicate lack of progress towards the “goal”, while using yellow to indicate the approaching completion of the “goal”:
Formatting the Progress Value
Sometimes you may wish to add a prefix or suffix to the current progress value. To accomplish this, you may use the prefix
and suffix
methods:
If your progress metric is displaying a monetary value, you may use the dollars
and euros
convenience methods for quickly prefixing a Dollar or Euro sign to the progress values:
Manually Building Progress Results
If you are not able to use the included query helpers for building your progress metric, you may manually provide the final values to the metric using the result
method:
Table Metrics
Table metrics allow you to display custom lists of links along with a list of actions, as well as an optional icon.
Table metrics may be generated using the nova:table
Artisan command. By default, all new metrics will be placed in the app/Nova/Metrics
directory:
Once your table metric class has been generated, you’re ready to customize it. Each table metric class contains a calculate
method. This method should return an array of Laravel\Nova\Metrics\MetricTableRow
objects. Each metric row allows you to specify a title and subtitle, which will be displayed stacked on the row:
Adding Actions to Table Rows
While table metrics are great for showing progress, documentation links, or recent entries to your models, they become even more powerful by attaching actions to them.
You can use the actions
method to return an array of Laravel\Nova\Menu\MenuItem
instances, which will be displayed in a dropdown menu:
You can learn more about menu customization by reading the menu item customization documentation.
Displaying Icons on Table Rows
Table metrics also support displaying an icon to the left of the title and subtitle for each row. You can use this information to visually delineate different table rows by type, or by using them to show progress on an internal process.
To show an icon on your table metric row, use the icon
method and pass in the key for the icon you wish to use:
You may customize the icon’s color via CSS by using the iconClass
method to add the needed classes to the icon:
Nova utilizes the free icon set Heroicons UI from designer Steve Schoger. Feel free to use these icons to match the look and feel of Nova’s built-in icons.
Customizing Table Metric Empty Text
If you’re dynamically generating rows for your table metric, there may be times where there are no results to display. By default, Nova will show the user “No Results Found…“.
But, sometimes you may wish to customize this text to give the user more context. For example, a metric named “Recent Users” may not have any users to display because there are no recent users. In these situations, you may customize the “no results” message using the emptyText
method:
Caching
Occasionally the calculation of a metric’s values can be slow and expensive. For this reason, all Nova metrics contain a cacheFor
method which allows you to specify the duration the metric result should be cached:
Customizing Metric Names
By default, Nova will use the metric class name as the displayable name of your metric. You may customize the name of the metric displayed on the metric card by overriding the name
method within your metric class: