Code Editor for app.py

import streamlit as st
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
from datetime import datetime, timedelta

# Set page configuration
st.set_page_config(
    page_title="Basic Dashboard",
    page_icon="📊",
    layout="wide"
)

# Title
st.title("📊 Basic Dashboard")

# Generate some sample data
def generate_sample_data():
    dates = pd.date_range(start=datetime.now() - timedelta(days=30), end=datetime.now(), freq='D')
    sales = pd.Series(range(50, 150, 3))[:31] + np.random.normal(0, 10, 31)
    visitors = sales * 5 + np.random.normal(0, 50, 31)
    conversion = (sales / visitors * 100).round(2)
    
    df = pd.DataFrame({
        'Date': dates,
        'Sales': sales,
        'Visitors': visitors,
        'Conversion Rate': conversion
    })
    return df

# Create sample data
df = generate_sample_data()

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

with col1:
    st.metric(
        "Total Sales",
        f"${df['Sales'].sum():,.0f}",
        f"{((df['Sales'].iloc[-1] / df['Sales'].iloc[-2]) - 1)*100:+.1f}%"
    )

with col2:
    st.metric(
        "Total Visitors",
        f"{df['Visitors'].sum():,.0f}",
        f"{((df['Visitors'].iloc[-1] / df['Visitors'].iloc[-2]) - 1)*100:+.1f}%"
    )

with col3:
    st.metric(
        "Avg Conversion Rate",
        f"{df['Conversion Rate'].mean():.1f}%",
        f"{df['Conversion Rate'].iloc[-1] - df['Conversion Rate'].iloc[-2]:+.1f}%"
    )

# Create two columns for charts
col1, col2 = st.columns(2)

with col1:
    st.subheader("Sales Trend")
    fig = px.line(df, x='Date', y='Sales', title='Daily Sales')
    fig.update_layout(height=400)
    st.plotly_chart(fig, use_container_width=True)

with col2:
    st.subheader("Visitors vs Conversion Rate")
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=df['Date'], y=df['Visitors'], name='Visitors', yaxis='y'))
    fig.add_trace(go.Scatter(x=df['Date'], y=df['Conversion Rate'], name='Conversion Rate', yaxis='y2'))
    fig.update_layout(
        height=400,
        yaxis=dict(title='Visitors'),
        yaxis2=dict(title='Conversion Rate (%)', overlaying='y', side='right')
    )
    st.plotly_chart(fig, use_container_width=True)

# Data table
st.subheader("Raw Data")
st.dataframe(df, use_container_width=True)