Merge two dashboards and add a button

Dash Python
1

I’m pretty new to Dash. I created two dashboards that read from two different dataframes. They work well individually. I would like to merge them in a single one, giving the possibility to the user to access them using a dropdown menu.
I would like to also add a button which (when clicked) returns a function.

Those are the codes for the two dashboards:

first one: 
import pandas as pd
df1 = pd.read_csv('/df1.csv')

# Import libraries
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import plotly.express as px



# Create the Dash app
app = Dash()

# Set up the app layout
options_dropdown = dcc.Dropdown(options=df1['options'].unique(),
                            value='wordcount')

app.layout = html.Div(children=[
    html.H1(children='offensive/non offensive username activity dashboard'),
    options_dropdown,
    dcc.Graph(id='df1')
])



# Set up the callback function
@app.callback(
    Output(component_id='df1', component_property='figure'),
    Input(component_id=options_dropdown, component_property='value')
)
def update_graph(sel_option):
    filtered_options = df1[df1['options'] == sel_option]
    bar_fig = px.bar(filtered_options,
                       x= "user", y = "value",
                       color='user',
                           color_discrete_map={
                            'off': '#d62728',
                            'non_off': 'green'},
                        title=f' average {sel_option}',
                        width=500, height=500)
    return bar_fig

print(df1)
# Run local server
if __name__ == '__main__':
    app.run_server(debug=True)
second one: 
import pandas as pd
df2 = pd.read_csv('/df2.csv')

# Import libraries
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import plotly.express as px



# Create the Dash app
app = Dash()

# Set up the app layout
options_dropdown = dcc.Dropdown(options=df2['options'].unique(),
                            value='wordcount')

app.layout = html.Div(children=[
    html.H1(children='offensive/non offensive username activity dashboard'),
    options_dropdown,
    dcc.Graph(id='df2')
])



# Set up the callback function
@app.callback(
    Output(component_id='df2', component_property='figure'),
    Input(component_id=options_dropdown, component_property='value')
)
def update_graph(sel_option):
    filtered_options = df2[df2['options'] == sel_option]
    line_fig = px.line(filtered_options,
                       x= "Week_Number", y = "value",
                       color='offensive',
                           color_discrete_map={
                            1: '#d62728',
                            0: 'green'},
                        title=f' average {sel_option}')
    return line_fig

print(df2)
# Run local server
if __name__ == '__main__':
    app.run_server(debug=True)
and this is the function I want to implement pressing a button: 
sentences = []
df3 = pd.read_csv('/df3.csv')
def cool_function():
    ext = rd.randint(0,len(df3.offensive))
    return rd.choice(sentences).format(df3.author[ext], "", df3.text[ext])

How do I merge those three elements in a single dashboard?

2

how about this?
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/

3

Apart from @stu’s proposal to use tabs, you can also use a multipage setup. If you follow this example you’ll get it running in no time at all. The advantage, in my opinion, is that it’s then really easy to add more content to the main app: basically you just create a new app, import it into the main and serve the layout.