Teks, judul, markdown, dan menampilkan data

Idenya

Dashboard sebagian besar adalah komunikasi: judul yang jelas, beberapa angka utama, satu kalimat konteks, sebuah tabel untuk detailnya. Streamlit punya sekumpulan kecil elemen untuk setiap tugas. Memilih yang tepat membuat halaman mudah dipindai, sehingga orang menemukan angka yang mereka cari dalam dua detik.

Judul dan teks

Pemilik toko membuka laporan mingguan di ponselnya dan harus langsung tahu apa yang dicakup laporan itu, kapan diperbarui, dan apa poin-poin utamanya. Streamlit punya sekumpulan kecil elemen teks untuk menyusun halaman seperti itu:

import streamlit as st

st.title("Toko Kita: weekly report")
st.caption("Completed orders, 1 to 7 July 2024 · refreshed 08:00 WIB")
st.header("Sales")
st.subheader("By channel")
st.text("Plain, fixed-width text.")
st.markdown("Revenue is **up 12%**, driven by the *web* channel.")

Markdown dalam satu pemanggilan

st.markdown memahami Markdown yang sama dengan yang kamu lihat di pelajaran-pelajaran situs ini:

import streamlit as st

st.markdown("""
### This week
- **Revenue:** Rp 11.8M (completed)
- **Top product:** USB-C Hub
- Full data in the [shared drive](https://example.com)
""")

String bertanda kutip tiga memungkinkanmu menulis beberapa baris dengan wajar. st.write("...") juga me-render Markdown, itulah sebabnya ia berfungsi untuk teks di modul pertama.

Metric: angka-angka utama

st.metric menampilkan angka besar dengan perubahan opsional di bawahnya:

import streamlit as st

st.metric("Revenue", "Rp 11.8M", delta="12%")
st.metric("Cancelled orders", 10, delta=3, delta_color="inverse")

Delta berwarna hijau saat positif dan merah saat negatif. Untuk angka di mana naik itu buruk (pembatalan, biaya, komplain), delta_color="inverse" membalik warnanya, jadi +3 pembatalan tampil merah.

Deretan metric di bagian atas adalah header dashboard yang klasik; modul layout menunjukkan cara menaruhnya berdampingan.

Pesan status

Kotak berwarna memberi tanda bagaimana pembaca seharusnya merasakan sesuatu:

import streamlit as st

st.success("All 26 completed orders were delivered.")
st.info("Data for June is still being finalised.")
st.warning("3 orders are pending for more than 7 days.")
st.error("The payment provider feed failed at 03:00.")

Pakai secukupnya. Kalau semuanya adalah peringatan, tidak ada yang benar-benar peringatan.

Menampilkan data

Pada suatu saat pemilik toko akan ingin melihat angka sebenarnya di balik angka utama, seperti revenue per kategori. Streamlit punya dua cara menampilkan DataFrame, dan masing-masing cocok untuk situasi yang berbeda:

import streamlit as st
import pandas as pd

sales = pd.read_csv("sales.csv")
by_category = (sales[sales["status"] == "completed"]
               .groupby("category", as_index=False)["revenue"].sum()
               .sort_values("revenue", ascending=False))

st.subheader("Interactive table")
st.dataframe(by_category, hide_index=True)

st.subheader("Static table")
st.table(by_category)

• st.dataframe itu interaktif: pengguna bisa mengurutkan kolom, menggulir dan mencari. Pakai untuk apa pun yang lebih besar dari segelintir baris. hide_index=True membuang kolom index 0, 1, 2 yang tidak dibutuhkan siapa pun.
• st.table itu statis: semuanya ditampilkan sekaligus. Pakai untuk tabel ringkasan yang kecil.
• st.write(df) memilih st.dataframe untukmu.

st.json menampilkan dictionary dan respons API, bisa dilipat dan mudah dibaca:

import streamlit as st

st.json({"order_id": "NG-105", "status": "pending", "items": [{"sku": "KT-POUR", "qty": 1}]})

st.write: pisau lipat serbaguna

st.write melihat apa yang kamu berikan dan memilih cara menampilkannya: teks menjadi Markdown, DataFrame menjadi tabel, dict menjadi JSON, figure Plotly menjadi grafik. Ia juga menerima beberapa argumen: st.write("Total:", 42).

Sangat bagus saat bereksplorasi. Di aplikasi yang sudah jadi, utamakan fungsi spesifiknya (st.markdown, st.dataframe, st.metric): kodenya menyatakan dengan tepat apa yang muncul, dan kamu mendapat opsi tambahannya.

Mengapa ini penting untuk kode yang bersih

Halaman yang mudah dibaca punya struktur yang sama dengan kode yang mudah dibaca: nama yang jelas (judul), bagian-bagian (header), hal-hal penting lebih dulu (metric), detail di akhir (tabel). Memilih elemen spesifik alih-alih st.write adalah versi UI dari memilih nama yang presisi alih-alih x: orang berikutnya tahu persis apa maksudmu.

Rangkuman

• st.title sekali; st.header/st.subheader untuk bagian; st.caption untuk konteks; st.divider() di antara bagian.
• st.markdown me-render tebal, miring, list dan link (kutip tiga untuk beberapa baris).
• st.metric(label, value, delta=...); delta_color="inverse" saat naik itu buruk.
• st.success, st.info, st.warning, st.error memberi tanda status; pakai secukupnya.
• st.dataframe (interaktif, hide_index=True) untuk data; st.table untuk tabel statis kecil; st.json untuk dict.
• st.write itu fleksibel; fungsi spesifik lebih jelas di aplikasi yang sudah jadi.