Is there a way to execute a function when a streamlit metric is clicked?

Using Streamlit
1

I’d like to execute a function that opens a dialog box when we click on a metric component. For instance, if a metric says we have 5 open items, I’d like to click on it to open a dialog box to display a table with the details of those records.

Thanks,

Chris

2

Hello,
you can use the st.popover.

    # If the condition (5 open items) open a button popover displaying the talbe
    if your_condition:
        with st.popover("Open table"):
            st.write("### Open Items")
            st.table(open_items)

Flo

3

Hi @Faltawer, Thank you for your reply.

I may have done a poor job phrasing my question. I’m more interested in how to make the st.metric component execute a callback function when clicked.

For instance, I’d like to be able to click on the metric component and have it execute a function to display a dialogue box or something similar.

thank you again

4

Not sure if it’s possible to click on the st.metric. (Perhaps with css code)
i got this design by mixing the st.metric, button.

image
image1114×217 8.91 KB

image
image1152×348 15.8 KB

list = ['Temperature', 'Wind', 'noideawhatelse']
        value = ["70 °F", "150m.s", "3.14"]
        delta = ["1.2 °F", "-10 ms", '42']

        @st.experimental_dialog("Cast your vote")
        def vote(item):
            st.write(f"Why is {item} your favorite?")
            reason = st.text_input("Because...")
            if st.button("Submit"):
                st.session_state.vote = {"item": item, "reason": reason}
                st.rerun()

        for i, col in enumerate(st.columns(3)):
            col.metric(label=" ", value=value[i], delta=delta[i], label_visibility="hidden")
            if col.button(list[i]):
                vote("A")

You can add some css code to hide the button :

image
image1134×220 7.44 KB

The code :

if col.button(list[i], type="primary" ):

____
css:
st.markdown(
            """
            <style>
            button[kind="primary"] {
                background: none!important;
                border: none;
                padding: 0!important;
                color: black !important;
                text-decoration: none;
                cursor: pointer;
                border: none !important;
            }
            button[kind="primary"]:hover {
                text-decoration: none;
                color: black !important;
            }
            button[kind="primary"]:focus {
                outline: none !important;
                box-shadow: none !important;
                color: black !important;
            }
            </style>
            """,
            unsafe_allow_html=True,
        )

Hope it helps :slight_smile: