Metrics / KPI Component

🧩 Streamlit Components
1

Hi all,

A simple component for those of us building dashboards with Streamlit, in case useful.

streamlit-metrics
streamlit-metrics982×371 10.9 KB

Installation

pip install streamlit-metrics

Usage

import streamlit as st
from streamlit_metrics import metric, metric_row

st.write("## Here's a single figure")
metric("Metric 0", 0)

st.write("## ... and here's a row of them")
metric_row(
    {
        "Metric 1": 100,
        "Metric 2": 200,
        "Metric 3": 300,
        "Metric 4": 400,
        "Metric 5": 500,
    }
)

Pull requests welcome at GitHub - samdobson/streamlit-metrics: Component for displaying KPI widgets on a Streamlit dashboard

14 Likes
2

Nice! I love components like these @sjd333, things that are conceptually simple but wrap the functionality up into an easy-to-import function :+1:

2 Likes
3

Hey @sjd333 welcome back

I love it, easy to use and stylish!
You should definitely post it inside the Components Tracker :slight_smile:

Cheers,
Fanilo

2 Likes
4

Thanks @andfanilo and @randyzwitch. Couldn’t resist building something that leverages the new horizontal layout capabilities (Streamlit suddenly became even more powerful - love it!)

4 Likes
6

Love this, super useful and super clean, thanks for sharing this @sjd333 :heart:

1 Like
7

Hi, have you had success in using st.empty() to create a placeholder for a metric at top of page, where the actual metric will only be known, or updated, after call to function with values from say a text input further down the page? I’ve tried:

metric = st.empty()

then

metric.metric and metric.metric_row

but get the following error message:

metric() is not a valid Streamlit command.`

It could quite likely be some newbie error I’m making. Thanks for any guidance!

8

Doh, nevermind, as per the Streamlit documentation for using “with” notation with st.empty()

metrics = st.empty()
..
..

with metrics:
    metric('Results', len(df))
9

So great to see a (much nicer!) version of this implemented in Streamlit core.

Forget this component folks, go check out the beautiful official one that now comes out of the box:

https://docs.streamlit.io/en/stable/api.html#streamlit.metric

1 Like
10

great