Code Editor for app.py

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

# Set page config
st.set_page_config(
    page_title="Real-Time Data Visualization",
    page_icon="📊",
    layout="wide"
)

# Initialize session state
if 'data' not in st.session_state:
    st.session_state.data = pd.DataFrame(
        columns=['timestamp', 'value1', 'value2', 'value3']
    )

# Title and description
st.title("Real-Time Data Visualization")
st.markdown("""
This app demonstrates real-time data visualization using Streamlit.
The chart updates automatically every second with new random data points.
""")

# Create placeholder for the chart
chart_placeholder = st.empty()

# Create columns for metrics
col1, col2, col3 = st.columns(3)

# Main loop
while True:
    # Generate new data point
    new_data = pd.DataFrame({
        'timestamp': [pd.Timestamp.now()],
        'value1': [np.random.randn()],
        'value2': [np.random.randn()],
        'value3': [np.random.randn()]
    })
    
    # Append new data
    st.session_state.data = pd.concat([st.session_state.data, new_data], ignore_index=True)
    
    # Keep only last 50 data points
    if len(st.session_state.data) > 50:
        st.session_state.data = st.session_state.data.iloc[-50:]
    
    # Update metrics
    with col1:
        st.metric(
            "Value 1",
            f"{st.session_state.data['value1'].iloc[-1]:.2f}",
            f"{st.session_state.data['value1'].iloc[-1] - st.session_state.data['value1'].iloc[-2]:.2f}"
            if len(st.session_state.data) > 1 else None
        )
    
    with col2:
        st.metric(
            "Value 2",
            f"{st.session_state.data['value2'].iloc[-1]:.2f}",
            f"{st.session_state.data['value2'].iloc[-1] - st.session_state.data['value2'].iloc[-2]:.2f}"
            if len(st.session_state.data) > 1 else None
        )
    
    with col3:
        st.metric(
            "Value 3",
            f"{st.session_state.data['value3'].iloc[-1]:.2f}",
            f"{st.session_state.data['value3'].iloc[-1] - st.session_state.data['value3'].iloc[-2]:.2f}"
            if len(st.session_state.data) > 1 else None
        )
    
    # Update chart
    with chart_placeholder.container():
        st.line_chart(
            st.session_state.data.set_index('timestamp')[['value1', 'value2', 'value3']]
        )
    
    # Wait for 1 second before next update
    time.sleep(1)