123 lines
4.6 KiB
Python
123 lines
4.6 KiB
Python
from dash import dcc, html
|
|
from pkg.config import interval_options,days_options,render_data
|
|
|
|
def layout_config(app):
|
|
# Dash app layout (unchanged except default days value)
|
|
app.layout = html.Div([
|
|
# Left sidebar with clock button and tooltip (unchanged)
|
|
html.Div(
|
|
id='clock-container',
|
|
children=[
|
|
html.Div(
|
|
id='clock-button',
|
|
children='🕒',
|
|
style={
|
|
'fontSize': '24px',
|
|
'cursor': 'pointer',
|
|
'padding': '5px',
|
|
}
|
|
),
|
|
html.Div(
|
|
id='clock-tooltip',
|
|
children=[
|
|
html.Div(id='pst-clock')
|
|
],
|
|
style={
|
|
'position': 'absolute',
|
|
'left': '35px',
|
|
'top': '0px',
|
|
'backgroundColor': 'rgba(0, 0, 0, 0.8)',
|
|
'color': 'white',
|
|
'padding': '10px',
|
|
'borderRadius': '5px',
|
|
'fontSize': '14px',
|
|
'display': 'none',
|
|
'whiteSpace': 'nowrap'
|
|
}
|
|
),
|
|
html.Div(
|
|
id='play-button',
|
|
children='▶️',
|
|
n_clicks=0,
|
|
style={
|
|
'fontSize': '24px',
|
|
'cursor': 'pointer',
|
|
'padding': '5px',
|
|
'marginTop': '10px'
|
|
}
|
|
),
|
|
html.Div(
|
|
id='play-tooltip',
|
|
children=[],
|
|
style={
|
|
'position': 'absolute',
|
|
'left': '35px',
|
|
'top': '40px',
|
|
'backgroundColor': 'rgba(0, 0, 0, 0.8)',
|
|
'color': 'white',
|
|
'padding': '10px',
|
|
'borderRadius': '5px',
|
|
'fontSize': '14px',
|
|
'display': 'none',
|
|
'whiteSpace': 'nowrap'
|
|
}
|
|
)
|
|
],
|
|
style={
|
|
'position': 'fixed',
|
|
'left': '10px',
|
|
'top': '50%',
|
|
'transform': 'translateY(-50%)',
|
|
'zIndex': 1000
|
|
}
|
|
),
|
|
# Main content
|
|
html.Div([
|
|
html.H1("Elon Musk Tweet Time Analysis (EST)"),
|
|
html.Div(id='date-picker-container', children=[
|
|
dcc.Dropdown(
|
|
id='multi-date-picker',
|
|
options=[{'label': str(date), 'value': str(date)} for date in render_data.all_dates],
|
|
value=render_data.default_date,
|
|
multi=True,
|
|
searchable=True,
|
|
placeholder="Search and select dates (YYYY-MM-DD)",
|
|
style={'width': '100%'}
|
|
)
|
|
]),
|
|
dcc.Dropdown(
|
|
id='multi-interval-picker',
|
|
options=interval_options,
|
|
value=10,
|
|
style={'width': '50%', 'marginTop': '10px'}
|
|
),
|
|
html.Div(id='days-display-container', style={'display': 'none'}, children=[
|
|
dcc.Dropdown(
|
|
id='days-display-picker',
|
|
options=days_options,
|
|
value=30, # Default changed to 30 since 1 is removed
|
|
style={'width': '50%', 'marginTop': '10px'}
|
|
)
|
|
]),
|
|
html.Div(id='multi-day-warning', style={'color': 'red', 'margin': '10px'}),
|
|
dcc.Checklist(
|
|
id='time-zone-checklist',
|
|
options=[
|
|
{'label': 'California Time (PST)', 'value': 'PST'},
|
|
{'label': 'Texas Time (CST)', 'value': 'CST'}
|
|
],
|
|
value=['PST'],
|
|
style={'margin': '10px'}
|
|
),
|
|
html.Div(id='multi-tweet-summary', style={'fontSize': '20px', 'margin': '10px'}),
|
|
dcc.Tabs(id='tabs', value='line', children=[
|
|
dcc.Tab(label='Line Chart', value='line'),
|
|
dcc.Tab(label='Heatmap', value='heatmap'),
|
|
dcc.Tab(label='Scatter Plot', value='scatter'),
|
|
]),
|
|
html.Div(id='tabs-content'),
|
|
], style={'marginLeft': '50px'}),
|
|
dcc.Interval(id='clock-interval', interval=1000, n_intervals=0)
|
|
])
|
|
return app
|