main.py

import streamlit as st
import numpy as np
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

# Set page title
st.title('Product Metrics vs Price Demo')

# Generate random data
np.random.seed(42)
n_points = 30
prices = np.linspace(1, 30, n_points)
engagement = 50 + 30*np.random.randn(n_points) - prices*0.3 + np.random.randn(n_points)*10
satisfaction = 80 + 20*np.random.randn(n_points) - prices*0.4 + np.random.randn(n_points)*8
retention = 70 + 25*np.random.randn(n_points) - prices*0.35 + np.random.randn(n_points)*12

# Create dataframe
df = pd.DataFrame({
    'Price (USD)': prices,
    'Engagement Score': engagement,
    'Satisfaction Score': satisfaction,
    'Retention Rate': retention
})

# Add price slider
selected_price = st.slider('Select Price Point (USD)', min_value=1.0, max_value=30.0, value=15.0)

# Create vertical line data
vline_data = dict(
    type='line',
    x0=selected_price,
    x1=selected_price,
    yref='paper',
    y0=0,
    y1=1,
    line=dict(color='red', dash='dash')
)

# Create combined plot
fig = go.Figure()

# Add traces for each metric
fig.add_trace(go.Scatter(
    x=df['Price (USD)'],
    y=df['Engagement Score'],
    mode='lines+markers',
    name='Engagement Score'
))

fig.add_trace(go.Scatter(
    x=df['Price (USD)'],
    y=df['Satisfaction Score'],
    mode='lines+markers',
    name='Satisfaction Score'
))

fig.add_trace(go.Scatter(
    x=df['Price (USD)'],
    y=df['Retention Rate'],
    mode='lines+markers',
    name='Retention Rate'
))

# Add vertical line
fig.add_shape(vline_data)

# Update layout
fig.update_layout(
    title='Product Metrics vs Price',
    xaxis_title='Price (USD)',
    yaxis_title='Score/Rate',
    template='plotly_white'
)

# Display plot
st.plotly_chart(fig, use_container_width=True)

# Add explanation
st.markdown("""
This demo shows simulated relationships between product price and key metrics:
- Each point represents a product
- The lines show the relationships between price and metrics
- Notice how all metrics tend to decrease as price increases
- There's some random variation to simulate real-world noise
- The red dashed line shows your selected price point across all metrics
""")