Skip to content

Allow configuring delta arrow in st.metric #12982

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.

Sign up for GitHub

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

Jump to bottom
Merged
lukasmasuch merged 4 commits into from
Nov 20, 2025
Merged

Allow configuring delta arrow in st.metric #12982

lukasmasuch merged 4 commits into from
Nov 20, 2025
+135 −7

Conversation

@lukasmasuch
Copy link
Collaborator

@lukasmasuch lukasmasuch commented Nov 8, 2025 •
edited
Loading

Describe your changes

Adds a delta_arrow: "auto" | "up" | "down" | "off" parameter to st.metric that allows to configure the delta arrow direction.

image

GitHub Issue Link (if applicable)

Testing Plan

  • Added unit & e2e tests.

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

@lukasmasuch lukasmasuch requested a review from Copilot November 8, 2025 20:09
@snyk-io
Copy link
Contributor

snyk-io bot commented Nov 8, 2025 •
edited
Loading

✅ Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
✅ Licenses 0 0 0 0 0 issues
✅ Open Source Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 8, 2025 •
edited
Loading

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-12982/streamlit-1.51.0-py3-none-any.whl
📦 @streamlit/component-v2-lib Download from artifacts
🕹️ Preview app pr-12982.streamlit.app (☁️ Deploy here if not accessible)

@lukasmasuch lukasmasuch added security-assessment-completed Security assessment has been completed for PR impact:internal PR changes only affect internal code change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users and removed impact:internal PR changes only affect internal code labels Nov 8, 2025
Copilot AI reviewed Nov 8, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds a new delta_arrow parameter to the st.metric component, allowing users to manually control the direction of the delta indicator arrow independently from the delta value's sign.

Key changes:

  • Introduces delta_arrow parameter with values "auto" (default), "up", "down", and "off"
  • When set, overrides the automatic arrow direction that normally follows the delta sign
  • Adjusts frontend padding to account for the arrow's visibility

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
lib/streamlit/elements/metric.py Adds delta_arrow parameter, validation, and logic to override direction proto
lib/tests/streamlit/elements/metric_test.py Adds unit tests for default behavior, valid values, and invalid input
frontend/lib/src/components/elements/Metric/Metric.tsx Passes showArrow prop based on whether direction is null
frontend/lib/src/components/elements/Metric/styled-components.ts Adjusts padding conditionally based on arrow visibility
e2e_playwright/st_metric.py Adds test cases demonstrating arrow override scenarios
e2e_playwright/st_metric_test.py Adds E2E tests verifying arrow behavior and snapshot comparison

@lukasmasuch lukasmasuch marked this pull request as ready for review November 8, 2025 20:28
@lukasmasuch
Copy link
Collaborator Author

lukasmasuch commented Nov 17, 2025

@jrieke regarding the "off" value. Either we align it with delta_color "off' - as in this PR - or we use None and add None to delta_color as well. Since delta_color is already using "off", I would probably lean towards using "off" here as well. This also makes it a bit more explicit since using None doesn't always mean that something gets switched off in our API.

@jrieke
Copy link
Collaborator

jrieke commented Nov 19, 2025

regarding the "off" value. Either we align it with delta_color "off' - as in this PR - or we use None and add None to delta_color as well. Since delta_color is already using "off", I would probably lean towards using "off" here as well. This also makes it a bit more explicit since using None doesn't always mean that something gets switched off in our API.

Yeah I've been thinking about this too. I think I'm slightly in favor of using "off" here too, just to make it similar to the delta_color.

sfc-gh-nbellante
sfc-gh-nbellante approved these changes Nov 20, 2025
View reviewed changes
Copy link
Contributor

@sfc-gh-nbellante sfc-gh-nbellante left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool feature!

@lukasmasuch lukasmasuch merged commit b4df75a into develop Nov 20, 2025
40 checks passed
@lukasmasuch lukasmasuch deleted the feature/configure-arrow-direction branch November 20, 2025 21:58
@lukasmasuch lukasmasuch mentioned this pull request Dec 1, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@sfc-gh-nbellante sfc-gh-nbellante sfc-gh-nbellante approved these changes

Assignees

No one assigned

Labels

change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Hide the arrow in the delta of st.metric

4 participants

@lukasmasuch @jrieke @sfc-gh-nbellante