I must apologize firstly for the dirty code.
I know that most of the formatting should be on a css page, but I’m in the middle of prototyping.
I am loading up three separate charts in tabs.
My first tab (Production) loads in great (has focus), but when changing to the Rejects tabs, and waiting for chart to load, it is zoomed in on the current day or last entry from the query.
When I double-click on the graph to resize/zoom it, the chart is loading data from left to right (time-series data).
When I click on the Down Time tab and wait for it to load, I get a date range on the bottom and my two categories display in the legend… but no data/visuals in the chart.
In all of the tabs, the data_tables load in just fine.
[Rejects Tab - No Good]
-On Load: formatting is zoomed in
-After initial double-click into chart: dates are backward
-After leaving and coming back to Rejects tab
[Down Time Tab - No Good]
-Initial load after data has been queried
-After double-click
[========CODE======]
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash.dependencies import Input, Output
import dash_table
from datetime import datetime
from queried_pages.line_query_strings import blm2rqry_ver1
import os
TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')
curr_day = datetime.now().date()
#[Query for OEE]=====================================================
#
#====================================================================
#Create a view to show oee grouped
prodline = 'BLM #2 Rotor'
# =============================================================================
#
# =============================================================================
prodweek = blm2rqry_ver1.weekproduce()
rejweek = blm2rqry_ver1.weekreject()
timelostweek = blm2rqry_ver1.weeklosttime()
losttime = timelostweek[1]
lostimess = losttime[losttime['SS_DT'] == 'SS']
lostimedt = losttime[losttime['SS_DT'] == 'DT']
table_1_columns = [{"name": i, "id": i} for i in prodweek.columns]
table_1_data = prodweek.to_dict('records')
table_2_columns = [{"name": i, "id": i} for i in losttime.columns]
table_2_data = losttime.to_dict('records')
table_3_columns = [{"name": i, "id": i} for i in rejweek.columns]
table_3_data = rejweek.to_dict('records')
app = dash.Dash(__name__,suppress_callback_exceptions=True,requests_pathname_prefix='/blm2rdashdaily/')
tabs_styles = {
'height': '44px'
}
tab_style = {
'borderBottom': '1px solid #d6d6d6',
'padding': '6px',
'fontWeight': 'bold'
}
tab_selected_style = {
'borderTop': '1px solid #d6d6d6',
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': '#119DFF',
'color': 'white',
'padding': '6px'
}
app.layout = html.Div([
html.Div([
html.H2(f'{prodline}: KPI Dashboard [Weekly KPI Data]', style={'font-size':45, 'color':'white'}),
html.A(html.Button(f"{prodline} Monthly KPI Data",style={'cursor':'pointer', 'font-size':25,'background-color':'white', 'color':'black', 'padding':'5px', 'margin-top':'15px'}), href="/blm2rdash"),
],),
dcc.Tabs([
dcc.Tab(label='Production', style=tab_style, selected_style=tab_selected_style, children=[
html.Div([
dcc.Graph(id='production-week', config={'displayModeBar': 'hover', 'displaylogo': False}, animate=True),
],style={'padding':0,'width':'100%','display':'inline-block'}),
html.Div([
html.H1('Production', style={'color':'white'}),
dash_table.DataTable(id='table-1',
columns=table_1_columns,
data=table_1_data,
fixed_rows={'headers': True},
style_header={'backgroundColor': 'rgb(230, 230, 230)','fontWeight': 'bold', 'width':'auto'},
style_cell={'textAlign': 'left',
'minWidth': '30px','maxWidth': '100px',
'overflow': 'hidden','textOverflow': 'ellipsis'},
filter_action="native",
sort_action="native",
style_table={'height': '600px',
'overflowY': 'auto',
'color':'black'})
],style={'width':'20%', 'display':'inline-block', 'padding':5} ),
dcc.Interval(id='interval-component-1', interval=5*1000, n_intervals=0),
]),
dcc.Tab(label='Down Time', style=tab_style, selected_style=tab_selected_style, children=[
html.Div([
dcc.Graph(id='lost-time', config={'displayModeBar': False, 'displaylogo': False}, animate=True),
],style={'padding':0,'width':'80%','display':'inline-block'}),
html.Div([
html.H1('Short Stops and DT', style={'color':'white'}),
dash_table.DataTable(id='table-2',
columns=table_2_columns,
data=table_2_data,
fixed_rows={'headers': True},
style_header={'backgroundColor': 'rgb(230, 230, 230)','fontWeight': 'bold', 'width':'auto'},
style_cell={'textAlign': 'left',
'minWidth': '30px','maxWidth': '100px',
'overflow': 'hidden','textOverflow': 'ellipsis'},
filter_action="native",
sort_action="native",
style_table={'height': '600px',
'overflowY': 'auto',
'color':'black'}),
],style={'width':'70%', 'display':'inline-block', 'padding':5} ),
dcc.Interval(id='interval-component-2', interval=5*1000, n_intervals=0),
]),
dcc.Tab(label='Rejects', style=tab_style, selected_style=tab_selected_style, children=[
html.Div([
dcc.Graph(id='rejects-week', config={'displayModeBar': 'hover', 'displaylogo': False}, animate=True),
],style={'padding':0,'width':'100%','display':'inline-block'}),
html.Div([
html.H1('Rejects', style={'color':'white'}),
dash_table.DataTable(id='table-3',
columns=table_3_columns,
data=table_3_data,
fixed_rows={'headers': True},
style_header={'backgroundColor': 'rgb(230, 230, 230)','fontWeight': 'bold', 'width':'auto'},
style_cell={'textAlign': 'left',
'minWidth': '30px','maxWidth': '100px',
'overflow': 'hidden','textOverflow': 'ellipsis'},
filter_action="native",
sort_action="native",
style_table={'height': '600px',
'overflowY': 'auto',
'color':'black'})
],style={'width':'30%', 'display':'inline-block', 'padding':5} ),
dcc.Interval(id='interval-component-3', interval=5*1000, n_intervals=0),
html.Div(children=[
]),
]),
], style={'color':'black', 'font-size':'30px'}),
])
@app.callback([Output('production-week', 'figure'),
Output('table-1', 'data')],
[Input('interval-component-1','n_intervals')])
def update_prodweek(n):
print('checking production-week data for daily blm 2 rotor')
prodweek = blm2rqry_ver1.weekproduce()
data = prodweek.to_dict('records')
trace1 = go.Figure()
trace1.add_trace(go.Bar({'x':prodweek['Production Date'], 'y':prodweek['Total Produced'],'textposition':'auto','textfont':{'size':20}, 'marker_color':'green'}, hovertext=prodweek['Product Number']))
trace1.update_layout(template = 'plotly_dark',width=1750,height=300, margin={'l':0,'r':0,'b':0,'t':0}, barmode='group', hovermode='closest', paper_bgcolor='black')
trace1.update_yaxes(tickfont={'size':15}, rangemode='tozero')
return trace1, data
@app.callback([Output('lost-time', 'figure'),
Output('table-2', 'data')],
[Input('interval-component-2','n_intervals')])
def update_lostime(n):
print('checking lost-time data for daily blm 2 rotor')
timelostweek = blm2rqry_ver1.weeklosttime()
losttime = timelostweek[1]
lostimess = losttime[losttime['SS_DT'] == 'SS']
lostimedt = losttime[losttime['SS_DT'] == 'DT']
data = losttime.to_dict('records')
trace2 = go.Figure()
trace2.add_trace(go.Bar({'x':lostimess['Date_Occurred'], 'y':lostimess['Time_Lost'], 'name':'Short Stops','textposition':'auto','textfont':{'size':20}, 'marker_color':'yellow'}, hovertext=lostimess['Alert_Message']))
trace2.add_trace(go.Bar({'x':lostimedt['Date_Occurred'], 'y':lostimedt['Time_Lost'], 'name':'Down Time','textposition':'auto','textfont':{'size':20}, 'marker_color':'crimson'}, hovertext=lostimess['Alert_Message']))
trace2.update_layout(template = 'plotly_dark',width=1750,height=300, margin={'l':0,'r':0,'b':0,'t':0}, barmode='stack', hovermode='closest', showlegend=True)
trace2.update_yaxes(tickfont={'size':15}, rangemode='tozero')
return trace2, data
@app.callback([Output('rejects-week', 'figure'),
Output('table-3', 'data')],
[Input('interval-component-3','n_intervals')])
def update_rejweek(n):
print('checking reject-week data for daily blm 2 rotor')
rejweek = blm2rqry_ver1.weekreject()
data = rejweek.to_dict('records')
trace3 = go.Figure()
trace3.add_trace(go.Bar({'x':rejweek['Date_Occurred'], 'y':rejweek['Total'],'textposition':'auto','textfont':{'size':20}, 'marker_color':'red'}, hovertext=rejweek['Reject']))
trace3.update_layout(template = 'plotly_dark',width=1750,height=300, margin={'l':0,'r':0,'b':0,'t':0}, barmode='group', hovermode='closest')
trace3.update_yaxes(tickfont={'size':15}, rangemode='tozero')
return trace3, data
if __name__ == '__main__':
app.run_server(port=8050,debug=True)