Allow deselecting topics via checkbox list

master
0xee 2020-12-30 21:02:08 +01:00
parent 065462a071
commit 324afe2de2
2 changed files with 46 additions and 12 deletions

View File

@ -9,3 +9,21 @@
#range_count { #range_count {
width: 30%; width: 30%;
} }
.checklist-container {
display:flex;
flex-direction:column;
}
@media (max-width: 1080px) {
.checklist-container {
font-size: 24pt;
}
.checklist-input {
width: 36pt;
height: 36pt;
}

38
tsplot
View File

@ -75,7 +75,9 @@ plot_page = html.Div([
value='d' value='d'
), ),
]), ]),
dcc.Graph(id='graph', animate=False), dcc.Graph(id='graph', animate=False, responsive=True),
dcc.Checklist(id='topic-checklist', className="checklist-container",
inputClassName="checklist-input"),
dcc.Link('Back', href='/') dcc.Link('Back', href='/')
]) ])
@ -89,14 +91,29 @@ def get_timedelta(range_str, count):
return range_to_delta[range_str] return range_to_delta[range_str]
@app.callback([Output('topic-checklist', 'options'),
Output('topic-checklist', 'value')],
[Input('url', 'pathname')])
def update_topic_checklist(pathname):
pathname = pathname.strip('/')
if pathname:
topics = pathname.strip('/').split('+')
selected = topics
else:
topics = all_topics
selected = []
return [{"label":topic, "value":topic, "disabled":False} for topic in sorted(topics)], selected
@app.callback(Output('graph', 'figure'), @app.callback(Output('graph', 'figure'),
[Input('interval-component', 'n_intervals'), [Input('interval-component', 'n_intervals'),
Input('timerange', 'value'), Input('timerange', 'value'),
Input('range_count', 'value'), Input('range_count', 'value'),
Input('url', 'pathname')]) Input('topic-checklist', 'value')])
def update_graph(interval, timerange, range_count, pathname): def update_graph(interval, timerange, range_count, topics):
topics = pathname.strip('/').split('+') if topics:
if len(topics): print(f"topics: {topics}")
delta = get_timedelta(timerange, range_count) delta = get_timedelta(timerange, range_count)
now = int(time.time()) // update_interval_s now = int(time.time()) // update_interval_s
def make_data(df, name): def make_data(df, name):
@ -107,18 +124,17 @@ def update_graph(interval, timerange, range_count, pathname):
'mode': 'lines', 'mode': 'lines',
'name': name 'name': name
} }
return { return {
'data': [make_data(get_data(topic, delta, now), topic) for topic in topics]} 'data': [make_data(get_data(topic, delta, now), topic) for topic in topics]}
else: else:
return {} return {}, []
# Update the index # Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'), @app.callback(dash.dependencies.Output('page-content', 'children'),
[dash.dependencies.Input('url', 'pathname')]) [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname): def display_page(pathname):
if pathname == '/':
return index_page
else:
return plot_page return plot_page
# You could also return a 404 "URL not found" page here # You could also return a 404 "URL not found" page here
@ -134,10 +150,10 @@ if __name__ == '__main__':
db = args.db db = args.db
conn = sqlite3.connect(db) conn = sqlite3.connect(db)
topics = get_topics(conn) all_topics = get_topics(conn)
index_page = html.Div(sum([[ index_page = html.Div(sum([[
dcc.Link(f'Go to {page}', href=f'/{page}'), dcc.Link(f'Go to {page}', href=f'/{page}'),
html.Br()] for page in topics], [])) html.Br()] for page in all_topics], []))
app.run_server(debug=args.debug, host='0.0.0.0') app.run_server(debug=args.debug, host='0.0.0.0')