elon_py/pkg/dash/app_html.py

167 lines
6.4 KiB
Python
Raw Normal View History

2025-03-05 10:24:46 +08:00
from dash import dcc, html
2025-03-06 10:16:59 +08:00
from pkg.config import interval_options, days_options, render_data
2025-03-05 10:24:46 +08:00
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=[
2025-03-05 10:44:38 +08:00
html.Div(id='pst-clock')
2025-03-05 10:24:46 +08:00
],
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'
}
2025-03-06 10:16:59 +08:00
),
# 新增按钮和提示框
html.Div(
id='info-button',
children='',
style={
'fontSize': '24px',
'cursor': 'pointer',
'padding': '5px',
'marginTop': '10px'
}
),
html.Div(
id='info-tooltip',
children='这是一个信息按钮示例', # 默认显示的信息
style={
'position': 'absolute',
'left': '35px',
'top': '80px', # 调整位置,避免与其他 tooltip 重叠
'backgroundColor': 'rgba(0, 0, 0, 0.8)',
'color': 'white',
'padding': '10px',
'borderRadius': '5px',
'fontSize': '14px',
'display': 'none',
'whiteSpace': 'nowrap'
}
),
2025-03-06 10:16:59 +08:00
html.A(
href='https://x.com/elonmusk',
2025-03-07 14:14:08 +08:00
target='_blank',
2025-03-06 10:16:59 +08:00
children=[
html.Img(
src='https://pbs.twimg.com/profile_images/1893803697185910784/Na5lOWi5_400x400.jpg',
style={
'height': '24px', # Matches fontSize of other buttons
'width': '24px',
'cursor': 'pointer',
'padding': '5px',
'marginTop': '10px'
}
)
]
2025-03-05 10:24:46 +08:00
)
],
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=[
2025-03-05 11:48:14 +08:00
dcc.Tab(label='Line', value='line'),
2025-03-05 10:24:46 +08:00
dcc.Tab(label='Heatmap', value='heatmap'),
2025-03-06 10:16:59 +08:00
dcc.Tab(label='Heatmap(1-day)', value='one_day_heatmap'),
2025-03-05 10:24:46 +08:00
]),
html.Div(id='tabs-content'),
], style={'marginLeft': '50px'}),
dcc.Interval(id='clock-interval', interval=1000, n_intervals=0)
])
return app