# Define App Layout
app.layout = html.Div([
 # Title
 html.H2('Analytics Dashboard'),
 
 # Dropdown to choose the dataset
 html.Div([
 html.Label('Choose Your Data'),
 dcc.Dropdown(
 options = [{'label':i, 'value':i} for i in onlyfiles], 
 value = " ",
 id="field-dropdown"
 ), 
 ], 
 style = {'width':'25%', 'display':'inline-block'}
 ),
 # Visualize Dataframe using Dash's Data Table Experiments
 dt.DataTable(
 # initialize rows
 rows = [{}],
 # selection feature in dash table
 row_selectable = True,
 # filter feature in dash table
 filterable = True,
 # sort feature in dash table
 sortable = True,
 # initialize row selection array
 selected_row_indices = [],
 # data table id (for referencing)
 id = 'datatable'
 ), 
 dt.DataTable(
 rows = [{}],
 row_selectable = False,
 filterable = False,
 sortable = False,
 id = 'statisticalTable'
 ), 
 # Hidden div inside the app that stores the intermediate value
 # Use for sharing data between callback
 html.Div(id='intermediate-value', style={'display':'none'})
])
# Callback to read state change in dropdown
@app.callback(Output('intermediate-value','children'),[Input('field-dropdown', 'value')])
def updateTable(field_dropdown): # update function in dropdown change
 # pandas dataframe construct
 df = pd.read_csv(datapath+field_dropdown)
 return df.to_json(date_format='iso', orient='split')
@app.callback(Output('datatable','rows'),[Input('intermediate-value', 'children')])
def updateTable(jsonified_clean_data):
 print('update 1st table')
 dff = pd.read_json(jsonified_clean_data, orient='split')
 return dff.to_dict('record')
@app.callback(Output('statisticalTable','rows'),[Input('intermediate-value', 'children')])
def updateStatTable(jsonified_clean_data):
 print('update 2nd table')
 dff = pd.read_json(jsonified_clean_data, orient='split')
 stat = dff.describe()
 print(stat)
 return stat.to_dict('record')
# server main 
if __name__ == '__main__':
 app.run_server(debug=True)