app= dash.Dash() #create Dash app
#layout for now is simple, just the graph and the dropdown with metrics.
app.layout = html.Div([
                dcc.Graph(id='graph'),
                dcc.Dropdown(id='metric-dropdown',
                            options=[{'label':'Average Maximum Temp','value':'TMAX'},
                                    {'label':'Average Minimum Temp','value':'TMIN'},
                                    {'label':'Number of days above 90','value':'t90'}])])

#callback is what actually links the input from the dropdown to some other component, here I specify
#that the output will be the component with the id 'graph'
@app.callback(Output('graph','figure'),
             [Input('metric-dropdown','value')])

#This function creates the appropriate plotly style plot from the inputted metric.
def update_figure(metric):
    data = [go.Scatter(x=df.index, y=df[column], mode='lines', name=column)
            for column in [metric,f'{metric}_rolling']]
    layout = go.Layout(title = f'{metric} and 10 year rolling average')
    return {'data':data,'layout':layout}


app.run_server()