Hi, Iām using st.metrics as a data display component, and I want to contain a hyperlink in the value, but found the value wonāt be rendered as markdown or html. Any way to do this?
There are two parts: first is actually making it into a link and the second if you are trying to stay within your app, within the same session.
To deal with the first part by itself, letās say you want to open another tab to another site when you click on a metric. Hereās a proof of concept, though it makes every metric on a page go to the same place (streamlit.io in my example):
import streamlit as st
st.metric(label='My Metric', value=10000, delta=10)
js = '''
<script>
var metrics = window.parent.document.querySelectorAll('[data-testid="metric-container"]');
metrics.forEach((metric) => {
metric.onclick = function() {
window.open('https://www.streamlit.io/');
}
})
</script>'''
st.components.v1.html(js)
To expand it to your case, you would need set the url conditionally, say based on the label you used in the metric. Hereās a related example that implements a function to change button colors based on their labels:
Nowā¦if you are trying to navigate within your app, youāll have to layer in even more complication because at this point the only way I know of doing from the front end is to grab the page links by javascript and emulate a click on them⦠Top-level links from a component iframe? - #8 by mathcatsand
PS: Youād also need to add in an edit to have some hover effect to show itās a link which can be done as an add-on to the javascript making it a link, or separately though CSS.
Hi,
The above snippet gets all the metric-container on the document.
If there are two metric-container and when clicked both opens same page.
But I want to open different sites when clicked.
How can i achieve that I tried using xpath like below, however it doesnāt seem to work.
var metrics = window.parent.document.querySelector(ādiv[text=ālinkā]ā);