Quick dashboards with Streamlit: a monitoring dashboard in a single script.

From notebook to dashboard

In lesson 0.6.1 the charts were made in a notebook: you change a line, run the cell and look at the result. For research that is the right approach. For monitoring a portfolio every morning it is not: nobody wants to edit code to change the asset or the period, let alone ask a colleague who does not program to do it.

A dashboard solves that: a page with a few controls (asset, dates) and always the same figures and charts. Streamlit builds that page from an ordinary Python script, with no HTML or JavaScript. Each st.something(…) in the script adds an element to the page, in the order in which it appears.

Streamlit fills the gap between the notebook and the custom application: a hundred lines give you a useful dashboard. In exchange, the way it runs is different from that of an ordinary script, and almost all the problems of a dashboard that is slow or "forgets" its data come from not understanding it.

Streamlit is not part of the course environment: the interface code is shown but not run on this page. What does run, and it is the important part, are the data functions the dashboard uses.

The whole script, on every click

An ordinary script runs once, from the first line to the last, and ends. A Streamlit app runs whole, from top to bottom, every time the user touches a widget (and every time you save the file while developing it). When the user changes the asset in a selector, Streamlit does not run "the selector part": it relaunches the whole script, and this time the selector line returns the new asset.

flowchart TB
  U[Touches a widget] --> S[Whole script]
  S --> W[Reads the widgets]
  W --> C{Cached function}
  C -->|already computed| K[Copy from cache]
  C -->|new| F[Runs and stores]
  K --> P[Draws the page]
  F --> P
  P --> U

Three practical consequences follow from that rule:

• The expensive parts repeat if not cached. Reading a five-year CSV takes little time; downloading prices from a provider or reading a Parquet file of several gigabytes does not. Without a cache, every click repeats it.
• Variables do not survive between runs. A counter n = n + 1 starts over on every click, because the script starts again. Whatever must be remembered between clicks (a list of orders the user keeps adding) goes in st.session_state, which this dashboard does not need.
• The order of the script is the order of the page. There are no callbacks to order or events to wire: it reads from top to bottom, like the notebook it comes from.

The data functions, without Streamlit

The most useful design rule for a dashboard: the interface computes nothing. The functions that read data, trim periods and compute metrics go in their own module, panel_datos.py, which does not import Streamlit. That way they are tested like any function (lesson 0.4.5), reused in a notebook or a report, and app.py remains a thin layer that only draws.

The dashboard works with five fictitious assets from the course: SINT and the four in cartera_sint.csv. The first function puts their closes together in a table with one column per asset:

import numpy as np
import pandas as pd


def cargar_cierres() -> pd.DataFrame:
    """Daily closes: one column per asset, date index."""
    sint = pd.read_csv("sint_diario.csv", parse_dates=["fecha"],
                       index_col="fecha")["cierre"]
    cartera = pd.read_csv("cartera_sint.csv",
                          parse_dates=["fecha"], index_col="fecha")
    return cartera.join(sint.rename("SINT"), how="inner")


cierres = cargar_cierres()
print(cierres.shape)
cierres.tail(2)

(1303, 5)
              RVAR    RFIJ     ORO   TECH    SINT
fecha
2025-12-30  165.47  102.30  170.50  78.25  139.98
2025-12-31  164.35  102.29  171.44  77.82  142.22

how="inner" keeps only the dates present in both files. Here they all match, but with real data from two markets with different holidays (a European and an American exchange) that would not happen, and it is better for the function to handle it explicitly than to find gaps in the chart.

The second function trims an asset to a period. The detail is in the type of the dates: Streamlit's date selector returns datetime.date objects, while the pandas index is made of Timestamp. Slicing a date index with datetime.date is deprecated in pandas 3 (it emits a warning and will stop working), so the function converts before slicing:

import datetime as dt


def tramo(cierres: pd.DataFrame, ticker: str,
          desde: dt.date, hasta: dt.date) -> pd.Series:
    """Closes of one asset between two dates, both included."""
    inicio, fin = pd.Timestamp(desde), pd.Timestamp(hasta)
    return cierres.loc[inicio:fin, ticker].dropna()


serie = tramo(cierres, "TECH", dt.date(2025, 1, 1),
              dt.date(2025, 12, 31))
print(f"{serie.name}: {len(serie)} sessions, "
      f"from {serie.index[0]:%Y-%m-%d} to {serie.index[-1]:%Y-%m-%d}")

TECH: 261 sessions, from 2025-01-01 to 2025-12-31

The 261 sessions include January 1: SINT and the course portfolio have no holidays. With data from a real market, the first day of the period would be the first session of the year, and the function does not need to know that.

The third computes the figures the dashboard shows at the top: period return, annualized volatility (the daily standard deviation times $\sqrt{252}$; the reason is in lesson 0.7.1) and maximum drawdown. A period with fewer than two sessions has none of the three, and the function says so with a clear error instead of returning NaN:

def metricas(cierre: pd.Series) -> dict[str, float]:
    """Return, annual volatility and maximum drawdown."""
    if len(cierre) < 2:
        raise ValueError("At least two sessions are needed")
    rent = cierre.pct_change().dropna()
    drawdown = cierre / cierre.cummax() - 1
    return {
        "rentabilidad": cierre.iloc[-1] / cierre.iloc[0] - 1,
        "volatilidad": rent.std() * np.sqrt(252),
        "drawdown_max": drawdown.min(),
    }


for nombre, valor in metricas(serie).items():
    print(f"{nombre:<13}{valor:8.2%}")

rentabilidad   -9.25%
volatilidad    28.82%
drawdown_max  -31.91%

TECH ends 2025 with a loss of 9.25 %, but along the way it lost as much as 31.91 %: the drawdown figure tells a story that the return alone hides. The drawdown is measured within the chosen period: the running maximum starts counting on the first day of the period. That is what whoever looks at the dashboard expects ("how much have I lost at worst this year"), but it is worth stating on the page itself, because the drawdown from the all-time high can be much larger.

A weekend is a valid period for the selector and an empty one for the data. The function rejects it:

metricas(tramo(cierres, "SINT", dt.date(2025, 12, 27),
               dt.date(2025, 12, 28)))

ValueError: At least two sessions are needed

Before writing a single line of interface, a few minimal tests pin down what is expected from the metrics. A series that rises 10 % and then falls back to its starting level has zero return and a drawdown known in advance:

def test_metricas_ida_y_vuelta():
    fechas = pd.bdate_range("2025-01-06", periods=3)
    m = metricas(pd.Series([100.0, 110.0, 100.0], index=fechas))
    assert m["rentabilidad"] == 0
    assert abs(m["drawdown_max"] - (100 / 110 - 1)) < 1e-12


def test_tramo_incluye_los_extremos():
    s = tramo(cierres, "SINT", dt.date(2025, 12, 1),
              dt.date(2025, 12, 3))
    assert len(s) == 3


test_metricas_ida_y_vuelta()
test_tramo_incluye_los_extremos()
print("tests passed")

tests passed

In the repository, these two functions would go in tests/test_panel_datos.py and uv run pytest would run them. Here they are called by hand so the cell shows the result.

The app: widgets, metrics and chart

With the computations solved and tested, app.py only has to request the data, read the widgets and draw. This is the complete dashboard:

import datetime as dt

import plotly.graph_objects as go
import streamlit as st

from panel_datos import cargar_cierres, metricas, tramo

st.set_page_config(page_title="SINT dashboard", layout="wide")


@st.cache_data(ttl="1h")
def datos():
    return cargar_cierres()


cierres = datos()
ultimo = cierres.index[-1].date()

ticker = st.sidebar.selectbox("Asset", list(cierres.columns))
periodo = st.sidebar.date_input(
    "Period",
    value=(dt.date(ultimo.year, 1, 1), ultimo),
    min_value=cierres.index[0].date(),
    max_value=ultimo,
)
if len(periodo) != 2:
    st.info("Choose the end date of the period.")
    st.stop()

serie = tramo(cierres, ticker, *periodo)
if len(serie) < 2:
    st.warning("The period does not have enough sessions.")
    st.stop()

m = metricas(serie)
st.title(f"{ticker} · {serie.index[0]:%d/%m/%Y} to "
         f"{serie.index[-1]:%d/%m/%Y}")
c1, c2, c3 = st.columns(3)
c1.metric("Return", f"{m['rentabilidad']:.1%}")
c2.metric("Annual volatility", f"{m['volatilidad']:.1%}")
c3.metric("Maximum drawdown (in the period)",
          f"{m['drawdown_max']:.1%}")

fig = go.Figure(go.Scatter(x=serie.index, y=serie, name=ticker))
fig.update_layout(template="plotly_dark", height=420,
                  yaxis_title="Close")
st.plotly_chart(fig)
st.caption(f"Data up to the close of {ultimo:%d/%m/%Y}.")

Read from top to bottom, as Streamlit runs it:

• st.set_page_config sets the title of the browser tab and the page width ("wide" uses the whole screen).
• datos() is the loading, wrapped in a function with @st.cache_data (next section). On the first run it reads the CSV files; on the following ones, it returns a copy of what it already read.
• st.sidebar.selectbox puts a dropdown with the five assets in the sidebar and returns the chosen one, a str. By default, the first in the list.
• st.sidebar.date_input with a tuple as value becomes a range selector. It returns a tuple of 0 to 2 dates: while the user has marked the start but not yet the end, the tuple has only one. Unpacking desde, hasta = … without checking breaks the app halfway through the selection; that is why len(periodo) is checked and st.stop() halts that run with a notice. The next interaction relaunches the script.
• st.columns(3) spreads the three metrics across a row; metric shows a label and a large figure.
• st.plotly_chart draws the Plotly figure from lesson 0.6.1, with its zoom and cursor. For something quick, st.line_chart(serie) draws the line without building the figure.
• st.caption says up to which date the data goes. A dashboard that does not say it invites decisions with prices from a week ago without knowing it.

The cache: load once, not on every click

@st.cache_data stores the result of a function by its arguments. The first call with given arguments runs the function and stores what it returns; the following ones with the same arguments skip the execution. Since the script runs on every click, it is what separates a dashboard that responds instantly from one that rereads the data every time.

The standard library has a similar mechanism, functools.cache, which can be run here and shows the idea:

from functools import cache

lecturas = 0


@cache
def cargar(ruta: str) -> pd.DataFrame:
    global lecturas
    lecturas += 1
    return pd.read_csv(ruta, parse_dates=["fecha"],
                       index_col="fecha")


for _ in range(5):        # five "clicks"
    df = cargar("sint_diario.csv")
print(f"Calls: 5 · file reads: {lecturas}")
print(f"Same object? {cargar('sint_diario.csv') is df}")

Calls: 5 · file reads: 1
Same object? True

Five calls, a single read. The second line shows the important difference from Streamlit: functools.cache returns the same object every time. If a piece of code did df["cierre"] *= 1.1 for some computation, the cache would be modified for all the following calls. st.cache_data avoids that: it stores the result serialized (with pickle) and hands a copy to each call. Whatever the function returns has to be serializable: tables, arrays, numbers, lists.

What is not data but a shared resource (a connection to a database, a client for the broker's API, a model loaded in memory) goes with st.cache_resource, which does not copy: all sessions use the same object.

Three parameters that are used often:

The ttl is the trading decision of this section. With daily data, one hour is enough; with a dashboard that reads intraday prices, a one-hour cache shows prices from an hour ago that look current. The cache is cleared by hand with datos.clear() or with st.cache_data.clear().

Run it locally and store the secrets

Streamlit is installed like any project dependency (lesson 0.2.2) and started with streamlit run. The project structure looks like this:

uv add streamlit
uv run streamlit run app.py --server.address localhost

streamlit run starts a web server and opens the browser at http://localhost:8501 (8501 is the default port). If no address is set, Streamlit also shows a "Network URL": the dashboard is open to the other machines on your network, including those on a shared Wi-Fi; --server.address localhost (or address = "localhost" in the [server] section of .streamlit/config.toml) restricts it to your machine. While you develop, every time you save app.py Streamlit offers to rerun it; "Always rerun" does it automatically.

As soon as the dashboard reads data from a provider or a broker, it needs a key. Streamlit reads it from .streamlit/secrets.toml (in the folder the app is launched from; there is also a global one in ~/.streamlit/secrets.toml):

[proveedor]
api_key = "put-your-key-here"

clave = st.secrets["proveedor"]["api_key"]

st.secrets is read like a dictionary. The file goes in .gitignore from the first commit: a key that reaches GitHub stays in the history even if it is deleted later, and it has to be revoked (lesson 0.2.5). The environment variables and .env files from lesson 0.2.4 are still valid; secrets.toml is Streamlit's own way, and the one its deployment services use.

Exercises

1. Add to panel_datos.py a function rentabilidad_por_anio(cierre) that returns the return of each calendar year (from the last close of the previous year to the last close of the year). Test it with TECH. What does it return for the first year, which has no previous year?

def rentabilidad_por_anio(cierre: pd.Series) -> pd.Series:
    """Return of each calendar year, from close to close."""
    fin_de_anio = cierre.groupby(cierre.index.year).last()
    return fin_de_anio.pct_change().dropna()


rentabilidad_por_anio(cierres["TECH"]).round(3)

fecha
2022    0.372
2023    0.131
2024    0.064
2025   -0.104
Name: TECH, dtype: float64

2. A colleague proposes removing @st.cache_data from datos() "because the CSV is small". What happens every time the user moves the date selector? And if tomorrow cargar_cierres() downloads the prices from a pay-per-call API?

3. Write a function alinear(cierres, base) that rescales all columns so they are worth base on the first day, and use it with the five assets in 2025. What is it for in the dashboard?

def alinear(cierres: pd.DataFrame, base: float = 100) -> pd.DataFrame:
    """Rescales each column so it starts at `base`."""
    return cierres / cierres.iloc[0] * base


anio = cierres.loc[pd.Timestamp("2025-01-01"):]
alinear(anio).iloc[-1].sort_values().round(1)

TECH     90.8
RFIJ    102.0
RVAR    102.6
SINT    104.4
ORO     109.4
Name: 2025-12-31 00:00:00, dtype: float64