diff --git a/assets/main.css b/assets/main.css index befe488..5496322 100644 --- a/assets/main.css +++ b/assets/main.css @@ -9,3 +9,21 @@ #range_count { width: 30%; } + + +.checklist-container { + display:flex; + flex-direction:column; +} + + +@media (max-width: 1080px) { +.checklist-container { + font-size: 24pt; +} + +.checklist-input { + width: 36pt; + height: 36pt; + +} diff --git a/tsplot b/tsplot index 30ad3ad..59c2f5f 100755 --- a/tsplot +++ b/tsplot @@ -75,7 +75,9 @@ plot_page = html.Div([ 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='/') ]) @@ -89,14 +91,29 @@ def get_timedelta(range_str, count): 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'), [Input('interval-component', 'n_intervals'), Input('timerange', 'value'), Input('range_count', 'value'), - Input('url', 'pathname')]) -def update_graph(interval, timerange, range_count, pathname): - topics = pathname.strip('/').split('+') - if len(topics): + Input('topic-checklist', 'value')]) +def update_graph(interval, timerange, range_count, topics): + if topics: + print(f"topics: {topics}") + delta = get_timedelta(timerange, range_count) now = int(time.time()) // update_interval_s def make_data(df, name): @@ -107,19 +124,18 @@ def update_graph(interval, timerange, range_count, pathname): 'mode': 'lines', 'name': name } + return { 'data': [make_data(get_data(topic, delta, now), topic) for topic in topics]} + else: - return {} + return {}, [] # Update the index @app.callback(dash.dependencies.Output('page-content', 'children'), [dash.dependencies.Input('url', '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 @@ -134,10 +150,10 @@ if __name__ == '__main__': db = args.db conn = sqlite3.connect(db) - topics = get_topics(conn) + all_topics = get_topics(conn) index_page = html.Div(sum([[ 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')