Code Editor for app.py

import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
from datetime import datetime, timedelta

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

# Custom CSS to make it beautiful
st.markdown("""
    <style>
    .stMetric {
        background-color: #f0f2f6;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    }
    .stTitle {
        font-weight: bold;
        color: #1f77b4;
    }
    div[data-testid="stHorizontalBlock"] {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        margin: 10px 0;
    }
    </style>
""", unsafe_allow_html=True)

# Generate sample data
@st.cache_data
def generate_data():
    dates = pd.date_range(start='2023-01-01', end='2023-12-31', freq='D')
    np.random.seed(42)
    data = {
        'Date': dates,
        'Sales': np.random.normal(1000, 100, len(dates)),
        'Visitors': np.random.normal(500, 50, len(dates)),
        'Conversion': np.random.uniform(0.1, 0.3, len(dates))
    }
    return pd.DataFrame(data)

df = generate_data()

# Dashboard title
st.title('✨ Beautiful Analytics Dashboard')
st.markdown('---')

# Key metrics in columns
col1, col2, col3, col4 = st.columns(4)

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

with col2:
    st.metric(
        "Average Daily Sales",
        f"${df['Sales'].mean():,.0f}",
        f"{((df['Sales'].tail(7).mean() / df['Sales'].tail(14).head(7).mean()) - 1):+.1%}"
    )

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

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

# Charts
col1, col2 = st.columns(2)

with col1:
    st.subheader("Sales Trend")
    fig_sales = px.line(
        df,
        x='Date',
        y='Sales',
        title='Daily Sales Performance',
        template='plotly_white'
    )
    fig_sales.update_traces(line_color='#1f77b4')
    st.plotly_chart(fig_sales, use_container_width=True)

with col2:
    st.subheader("Visitors vs Conversion Rate")
    fig_conversion = px.scatter(
        df,
        x='Visitors',
        y='Conversion',
        title='Visitor to Conversion Relationship',
        template='plotly_white',
        trendline="ols"
    )
    st.plotly_chart(fig_conversion, use_container_width=True)

# Time series analysis
st.subheader("Detailed Analysis")
tabs = st.tabs(["Daily Trends", "Monthly Analysis", "Raw Data"])

with tabs[0]:
    daily_avg = df.groupby(df['Date'].dt.day_name())[['Sales', 'Visitors', 'Conversion']].mean()
    fig_daily = px.bar(
        daily_avg,
        title='Average Metrics by Day of Week',
        barmode='group',
        template='plotly_white'
    )
    st.plotly_chart(fig_daily, use_container_width=True)

with tabs[1]:
    monthly_data = df.groupby(df['Date'].dt.month)[['Sales', 'Visitors', 'Conversion']].mean()
    fig_monthly = px.line(
        monthly_data,
        title='Monthly Trends',
        template='plotly_white'
    )
    st.plotly_chart(fig_monthly, use_container_width=True)

with tabs[2]:
    st.dataframe(
        df.style.format({
            'Sales': '${:,.2f}',
            'Visitors': '{:,.0f}',
            'Conversion': '{:.1%}'
        }),
        use_container_width=True
    )