Skip to content

Lens metric trends #2232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 28, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions explore-analyze/visualize/lens.md
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,54 @@ Color mapping works best with fields that have a reasonable number of distinct v

When choosing colors, consider how they will appear in both light and dark themes. Use theme-aware neutral colors when you want to de-emphasize data.

### Show trends in Metric charts [metric-trends]
```{applies_to}
stack: ga 9.1
serverless: ga
```

When creating **Metric** visualizations with numeric data, you can add trend indicators that compare your primary metric to a secondary value. This feature displays colored badges with directional arrows to help you quickly identify whether values are increasing, decreasing, or staying the same.

| Without trend | With trend |
|--------|-------|
| ![Secondary metric before comparison](../images/secondary_metric_before_compare.png "title =70%") | ![Secondary metric after comparison](../images/secondary_metric_after_compare.png "title =70%") |

To add trend indicators to your metric visualization:

1. Create a **Metric** visualization with a numeric primary metric.
2. Add a secondary metric that represents the comparison value.

::::{tip}
Use the `shift` parameter in formulas to compare current values against historical data. For example, if your primary metric is counting orders (based on an `order_id` field) for the current week, you can use the `count(order_id, shift='1w')` formula to compare this week's count of orders to last week's count.
::::

3. In the secondary metric configuration, look for the **Color by value** option. The possible choices are:
* **None** — No trend indicators (default)
* **Static** — Shows the secondary metric as a badge with a single color that you select
* **Dynamic** — Enables both color coding and directional icons based on the comparison

4. Select **Dynamic** coloring. More options appear.

5. Choose a **Color palette** that matches how you'd like to represent the comparison.

6. Configure the **Display** option:
* **Icon** — Shows only directional arrows: ↑ for increase, ↓ for decrease, = for no change
* **Value** — Shows only the secondary metric value
* **Both** — Shows both the icon and value (default)

7. The secondary metric does not automatically compare with the primary metric. Define the value to **Compare to**:
* **Static value** — Compares against a fixed baseline value that you specify
* **Primary metric** — Compares the secondary metric directly against the primary metric. This option is only available when the primary metric is numeric.

When you select this option, the secondary metric is automatically updated:

* The secondary metric label changes to **Difference**. You can change this by editing the **Prefix** option of the metric.
* If you chose a **Display** option that shows a value, the secondary metric value is automatically updated to show the difference compared to the primary metric.

7. Apply your changes.

The metric visualization is updated and now shows the secondary metric as a comparison with a trend indicator.


### Create visualizations with keyboard navigation [drag-and-drop-keyboard-navigation]

Expand Down
Loading