Data Display in Streamlit Intermediate

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(50, 3), columns=["A", "B", "C"])

# Interactive DataFrame (sortable, searchable)
st.dataframe(df, use_container_width=True, height=400)

# Static table (no interactivity)
st.table(df.head(10))

# Editable DataFrame
edited_df = st.data_editor(df, num_rows="dynamic")

# DataFrame with column configuration
st.dataframe(df, column_config={
    "A": st.column_config.NumberColumn("Value A", format="%.2f"),
    "B": st.column_config.ProgressColumn("Progress", min_value=-3, max_value=3),
})

# Line chart
st.line_chart(df)

# Bar chart
st.bar_chart(df)

# Area chart
st.area_chart(df)

# Scatter chart
st.scatter_chart(df, x="A", y="B", size="C")

import plotly.express as px

# Plotly scatter plot
fig = px.scatter(df, x="A", y="B", color="C",
                 title="Scatter Plot")
st.plotly_chart(fig, use_container_width=True)

# Plotly histogram
fig = px.histogram(df, x="A", nbins=30,
                   title="Distribution of A")
st.plotly_chart(fig)

# Plotly pie chart
sales = pd.DataFrame({
    "Category": ["Electronics", "Clothing", "Food"],
    "Revenue": [4500, 2300, 1800]
})
fig = px.pie(sales, values="Revenue", names="Category")
st.plotly_chart(fig)

import altair as alt

chart = alt.Chart(df).mark_circle().encode(
    x="A",
    y="B",
    size="C",
    tooltip=["A", "B", "C"]
).interactive()

st.altair_chart(chart, use_container_width=True)

# Simple map with lat/lon data
map_data = pd.DataFrame({
    "lat": np.random.randn(100) / 50 + 37.76,
    "lon": np.random.randn(100) / 50 - 122.4
})

st.map(map_data)

# Display KPI metrics with deltas
col1, col2, col3, col4 = st.columns(4)
col1.metric("Revenue", "$12,450", "+12.3%")
col2.metric("Users", "1,234", "+45")
col3.metric("Accuracy", "94.2%", "-0.3%", delta_color="inverse")
col4.metric("Latency", "32ms", "-8ms", delta_color="inverse")