Support for markdown in the metrics value and delta parameters#13094
Support for markdown in the metrics value and delta parameters#13094lukasmasuch merged 16 commits intostreamlit:developfrom
Conversation
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
There was a problem hiding this comment.
Pull request overview
This PR adds markdown rendering support to the value and delta parameters of the st.metric component by replacing plain text rendering with the StreamlitMarkdown component. This enables users to use markdown formatting (bold, italic, code blocks, LaTeX math, etc.) in metric values and delta indicators.
Key changes:
- Value and delta fields now use
StreamlitMarkdowncomponent withallowHTML={false}andinheritFontprops - Markdown rendering is consistent with the label field, which already supported markdown
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
The color change of the metric delta is from the previous color changes not related to this PR.
lukasmasuch
left a comment
There was a problem hiding this comment.
LGTM 👍 I added a e2e & unit tests, docstring update and applied some limitations to the markdown.
| The value can optionally contain GitHub-flavored Markdown, | ||
| including the Markdown directives described in the ``body`` | ||
| parameter of ``st.markdown``. |
There was a problem hiding this comment.
In theory, this also just supports the limited set of markdown directives we support in all labels. However, copy-pasting the specifics for value & delta as done in label seems a bit much. Maybe we need to find a shorter version on how to explain the limitations or mention that its the same supported in the label parameter? cc @sfc-gh-dmatthews
Describe your changes
I have added markdown rendering components to value and delta
It is functional like in the screenshot but I do not know how to deal with conflicting chars like - or $
I see 3 options:
Please let me know what behavior is most desirable.
Code in my Screenshot:
Screenshot or video (only for visual changes)
GitHub Issue Link (if applicable)
st.metric#11773Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
Note
Render
st.metricvalue and delta using Markdown instead of plain text.StreamlitMarkdown(Markdown enabled,allowHTML=false,inheritFont).metricValuewith spaces.element.bodyasmetricValue.Written by Cursor Bugbot for commit df8ebfa. Configure here.