A metric bar gives a dashboard a quick executive snapshot: several important values appear side by side in one horizontal area. Each metric is calculated from the currently filtered data, formatted for readability, and displayed with a clear label. In a sales dashboard, this might show overall revenue, orders, or another configured measure for the selected date range. section 6.1.4 section 6.4.4
Build the bar as a small data-to-interface pipeline:
- Load and clean the raw data, then apply global filters and the selected date range before passing data to dashboard components. section 6.1.4
- Configure which metrics appear and let each Metric object provide the function that calculates its value. section 6.4.4
- Create one Streamlit column per displayed metric, format its value, and place an st.metric widget inside a bordered container. section 6.4.4
- Center each widget with three nested columns when the surrounding layout does not provide convenient horizontal centering. section 6.4.4
- Optionally calculate percentage change against a comparison range; omit the delta when comparison data is missing or its value is zero. section 7.4.2
Adding comparison feedback
After filtering the main date range, filter a comparison range and pass both dataframes to the bar. For each metric, calculate (value - compare_value) / compare_value, format the result as a percentage, and supply it to st.metric. If the comparison value is zero, return None so Streamlit displays the current metric without a misleading delta. section 7.4.2
Listing 6.9 A metric bar
import streamlit as st
from metric_config import metrics, display_metrics
from formatting import format_metric
def get_metric(df, metric):
return metric.func(df)
def metric_bar(main_df):
with st.container(border=True):
metric_cols = st.columns(len(display_metrics))
for idx, metric_name in enumerate(display_metrics):
metric = metrics[metric_name]
with metric_cols[idx]:
value = get_metric(main_df, metric)
formatted_value = format_metric(value, metric.type)
c1, c2, c3 = st.columns([1, 3, 1])
with c2:
st.metric(metric.title, formatted_value)
Use the complete listing to inspect the compact implementation: configured metrics become columns, metric functions produce values, formatting prepares display strings, and nested columns center each widget. section 6.4.4
