Dash, merge two dashboards and add a button

Viewed 170

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 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?

0 Answers
Related