Style Column Metrics like the Documentation

[saxon11]

Working on nice Streamlit app with Columns and Metrics. I noticed the streamlit doc website appears to be a streamlit app with columns? If so, how can I format my metric in similar way? thank you

[Shawn_Pereira]

Well, you can achieve this effect in part with html & st.markdown, but you have to inspect elements, isolate them and then colour them. Refer the pix for the effect I tried to produce and the colours can be changed as required.

[Probability]

Or you can just create your own components and layouts so it looks exactly how you want.
A page from a credit assessment system I created for a client, all Streamlit with custom components for the widgets not available from the standard offering.

[saxon11]

Wow, how does one make your own components (like you did with metrics and adding the icon in upper right corner)? I’d love to see a code example to start with.

Does anyone know if the stream doc website is actually written in streamlit? https://docs.streamlit.io/

[saxon11]

Would be great if there was a way to add Font Awesome icons to metrics: Font Awesome

[Shawn_Pereira]

Here is an example with fontawesome icons and different colours.

But components are a better way to go.

Cheers.

[snehankekre]

Hi @saxon11,

Just to clarify: The Streamlit documentation is not a Streamlit app. We use Next.js, React, and Markdown to build the site and Netlify to host it. The code is public: GitHub - streamlit/docs: Source code for the Streamlit Python library documentation

Best,
Snehan

[yeshwanth1312]

Can you share the source code for this @Shawn_Pereira . Thanks

[Shawn_Pereira]

Hi @yeshwanth1312

I don’t have the earlier code as that was written just for a temporary purpose.

I have re-written the following code only for 1 kpi metric. You can do:
a. put the code in a function, so you can all it many times
b. change the parameters & variables to suit your purpose
c. use st.columns for multiple kpi metrics, etc.

# variables
wch_colour_box = (0, 204, 102)  # green
wch_colour_font = (0, 0, 0)  # blackfont
fontsize = 18
valign = "left"
iconname = "fas fa-asterisk"
sline = "Users" # kpi name
lnk = ''
i = 1000  # kpi value
htmlstr = f"""

                         {i}
                        

                    <span style='font-size: 18px;
                    margin-top: 0;'>{sline}</style>
                    </span></p>"""

st.markdown(lnk + htmlstr, unsafe_allow_html=True)

Also, pasting a snapshot of the code here, as my copy-paste makes some of my text disappear.

Cheers

[leb_dev]

Maybe it’s late but how can i get like these customized metrics?

[Shawn_Pereira]

Just try out the code given in the picture above, and then modify it for your use, as needed.

Cheers

[Oceane]

Hi @Shawn_Pereira ,

I tried the code you suggested but it doesn’t work. Layout is not taken into account.
My code :

Result :

Thanks

[Shawn_Pereira]

Hi @Oceane

I suggest that you:

1. properly duplicate my code
2. then check if it works for you
3. and thereafter modify it to suit your needs

At first glance, I see some errors in your code:

1. The lnk variable is missing
2. ‘order-radius’ should be ‘border-radius’
3. the last link (markdown) does not have the lnk variable as in my code

Lastly, you will have to work with the available streamlit layouts. Use columns, containers, etc. You would need to do a little experimenting.

Here’s the demo code, if you want to copy-paste:

import streamlit as st

wch_colour_box = (0,204,102)
wch_colour_font = (0,0,0)
fontsize = 18
valign = "left"
iconname = "fas fa-asterisk"
sline = "Observations"
lnk = '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">'
i = 123

htmlstr = f"""<p style='background-color: rgb({wch_colour_box[0]}, 
                                              {wch_colour_box[1]}, 
                                              {wch_colour_box[2]}, 0.75); 
                        color: rgb({wch_colour_font[0]}, 
                                   {wch_colour_font[1]}, 
                                   {wch_colour_font[2]}, 0.75); 
                        font-size: {fontsize}px; 
                        border-radius: 7px; 
                        padding-left: 12px; 
                        padding-top: 18px; 
                        padding-bottom: 18px; 
                        line-height:25px;'>
                        <i class='{iconname} fa-xs'></i> {i}
                        </style><BR><span style='font-size: 14px; 
                        margin-top: 0;'>{sline}</style></span></p>"""

st.markdown(lnk + htmlstr, unsafe_allow_html=True)

Cheers

[Lazy]

Thank you very much sir .

[christian_heins]

how did you achieved he loading bar under the card ?

[johnsnow09]

This is really helpful and amazing but how can we switch font colors in this on the basis of dark or light color theme ?

Thanks !!!

[maartenbreddels]

I modified the above example slightly by not giving it a font-color, so it uses the theme color (white text in dark mode).

You can try it out here:

PyCafe - Streamlit - Streamlit Custom Metrics Visualization