This is my current dashboard:
I am trying to format my dashboard like this:
Where the funnel matches the distance up to the last dash component I decide to use on the right.
The callbacks and functionality are all tied to a local db so I modified the sample code to just use a fixed funnel. However, all the callbacks and functionality is working properly. The only issue is styling.
from dash import Dash, dcc, html, Input, Output
import datetime as dt
import plotly.graph_objects as go
import pandas as pd
import dash_bootstrap_components as dbc
x = ['10000','450','200','10']
# Initialize
app = Dash()
################################################################################
# LAYOUT
################################################################################
app.layout = html.Div(
[
# Header
html.Div(
[
html.H4("Funnel Dashboard",style={'textAlign': 'center'}),
html.P(
"This app allows a user to dynamically create page view funnels based on __ data (updated daily)",
style={'textAlign': 'center'}
)
]
),
# Main Div
html.Div(
[
html.Div(
[
# Funnel
html.Div([html.H4("Funnel Visualization")]),
dcc.Graph(id='my_funnel')
],
style={'width': '30%',
'textAlign': 'left',
'display': 'inline-block',
'vertical-align':'top',
'margin-left': '3vw',
'margin-top': '3vw'
}
),
# Filters and Inputs
html.Div(
[
html.H4("Please Select a Date Range"),
dcc.DatePickerRange(
id='date-picker-range',
start_date=dt.datetime(2022, 1, 1, 0,0),
end_date=dt.datetime.today()
),
html.H4("Please Select Page Milestones"),
html.P("Please provide a comma delimited list of your desired pages using each page's initial url subdirectory:"),
dcc.Textarea(
id='pid_array',
placeholder='cart.php,checkout,...',
value='',
style={'width': '50%'}
)
],
style={'width': '30%',
'textAlign': 'right',
'display': 'inline-block'}
)
]
),
],
)
###############################################################################
#INTERACTION CALLBACKS
###############################################################################
@app.callback(Output('my_funnel', 'figure'),
[Input('date-picker-range', 'start_date'),
Input('date-picker-range', 'end_date'),
Input('pid_array','value')
])
def execute_funnel(start_date,end_date,pid_string):
if not start_date or not end_date:
raise dash.exceptions.PreventUpdate
else:
return ({'data': [
go.Funnel(
x = ['10000','450','200','10'],
y = ['A','B','C','D']
)
]
})
if __name__ == '__main__':
app.run_server()