I am trying to create a stacked bar chart that updates given a date range using DatePickerRange and dcc.Checklist.
Context:
Visualising the status of jobs on a compute cluster over a certain time period. e.g. how many jobs have completed/failed or both in any given period.
There are 6 components to the stacked bar chart, each created using traces, with the date for the x axis, the number of jobs on that given date period and then the stacks would be the state of the job (completed/failed etc.).
I can get all of the components, however the stacked bar chart doesn’t update when choosing a time period or selecting the state of the job. I’m assuming it’s to do with my callback code.
app = Dash(__name__)
app.layout = html.Div(children=[
html.H1(children='Wren Dashboard'),
html.Label('Choose Date Range'),
dcc.DatePickerRange(
id='date-picker-range',
min_date_allowed=date(2023, 1, 1),
max_date_allowed=datetime.now().strftime('%m/%d/%y'),
initial_visible_month=datetime.now().strftime('%m/%d/%y'),
start_date=date(2023, 8, 3), #can change depending on what dates want to open up on
end_date=datetime.today().date(),
start_date_placeholder_text="Start Date",
end_date_placeholder_text="End Date",
),
html.Div([
dcc.Checklist(
id='state',
options=[
{'label': 'Completed', 'value': 'completed'},
{'label': 'Failed', 'value': 'Failed'},
{'label': 'Cancelled', 'value': 'cancelled'},
{'label': 'Pending', 'value': 'pending'},
{'label': 'Time Out', 'value': 'timeout'},
{'label': 'Node Fail', 'value': 'nodefail'}
],
value=['completed']
),
dcc.Graph(id='status-of-jobs')
])
])
@app.callback(
Output(component_id='status-of-jobs', component_property='figure'),
[Input(component_id='date-picker-range', component_property='start_date'),
Input(component_id='date-picker-range', component_property='end_date'),
Input(component_id='state', component_property='value')])
def status_of_jobs_graph(start_date, end_date, value):
temp_df = pd.DataFrame(wren_df, columns = ['StartDate', 'State'])
temp = temp_df.groupby(['StartDate', 'State']).size()
temp_one = temp.rename('size').reset_index()
completed = temp_one[temp_one['State']=='COMPLETED']
failed = temp_one[temp_one['State']=='FAILED']
pending = temp_one[temp_one['State']=='PENDING']
cancelled = temp_one[temp_one['State']=='CANCELLED']
timeout = temp_one[temp_one['State']=='TIMEOUT']
nodefail = temp_one[temp_one['State']=='NODE_FAIL']
trace1 = go.Bar(name='COMPLETED', x=completed['StartDate'], y=completed['size'])
trace2 = go.Bar(name='FAILED', x=failed['StartDate'], y=failed['size'])
trace3 = go.Bar(name='PENDING', x=pending['StartDate'], y=pending['size'])
trace4 = go.Bar(name='CANCELLED', x=cancelled['StartDate'], y=cancelled['size'])
trace5 = go.Bar(name='TIMEOUT', x=timeout['StartDate'], y=timeout['size'])
trace6 = go.Bar(name='NODE FAIL', x=nodefail['StartDate'], y=nodefail['size'])
return {
'data': [trace1, trace2, trace3, trace4, trace5, trace6],
'layout': go.Layout(
title='Jobs by Status', barmode='stack')
}
return figure
#Run app
if __name__ == '__main__':
app.run(debug=True)
'temp_one ’ dataframe looks like this:
It gives the date of the job, the status of the job and then how many jobs of this status there were on that date.
StartDate State size
0 2023-08-03 CANCELLED 19
1 2023-08-03 COMPLETED 254
2 2023-08-03 FAILED 57
3 2023-08-04 COMPLETED 1116
4 2023-08-04 FAILED 1
5 2023-08-05 COMPLETED 36
6 2023-08-06 COMPLETED 151
7 2023-08-07 CANCELLED 1
8 2023-08-07 COMPLETED 1282
9 2023-08-07 FAILED 46
10 2023-08-08 CANCELLED 113
11 2023-08-08 COMPLETED 315
12 2023-08-08 FAILED 33
13 2023-08-09 COMPLETED 223
14 2023-08-09 FAILED 1
15 2023-08-10 COMPLETED 255
16 2023-08-10 FAILED 2
17 2023-08-11 CANCELLED 2
18 2023-08-11 COMPLETED 991
19 2023-08-11 FAILED 1
20 2023-08-11 TIMEOUT 1
21 2023-08-12 COMPLETED 43
22 2023-08-13 COMPLETED 79
23 2023-08-14 COMPLETED 219
24 2023-08-15 COMPLETED 51
25 2023-08-16 CANCELLED 4
26 2023-08-16 COMPLETED 916
27 2023-08-16 FAILED 1
28 2023-08-16 NODE_FAIL 2
29 2023-08-17 COMPLETED 25
This is my current dash:
Linux system, Dash version 2.7.0, Plotly version 5.9.0
Thankyou