import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

stats= {
    'Goals': [43,32,19,32,20,15,20,19,19,21,19,8,14],
    'Assists': [67, 55, 63, 39, 36, 34, 23, 21, 20, 16, 15, 26, 17],
    'Points' : [110, 86, 82, 71, 56, 49, 43, 40, 39, 37, 34, 34, 31],
    'Shots' : [223, 202, 167, 172, 147, 115, 135, 103, 119, 112, 120, 101, 102]
    }
df = pd.DataFrame(stats)

#button options
options = [{'label': str(i), 'value':str(i)} for i in ['Goals','Assists','Points','Shots']]

#grid layout
container= {
    'display':'grid',
    'grid-template-columns':'repeat(2, 1fr)',
    'grid-template-rows':'repeat(2, minmax(100px, auto))',
    'grid-padding': '1em',
}

#placeholder layout
placeholder = {
    'background': "#eee",
    'border-style':'solid',
    'border-size':'0.5em',
    'border-color':'#ddd'
}

app = dash.Dash('')
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

app.layout = html.Div([
    # grid 1,1
    html.Div([
        html.Div(
                dcc.Dropdown(
                    id='category',
                    options= options,
                    value= 'Goals'
                    ),
                ),
        html.Div([
                dcc.Graph(
                    id='histogram',
                    style={'height':'80vh', 'width':'55vw'}
                )
        ]),
        # grid 1,2
        html.Div('placeholder', style=placeholder)
        ]),
    #grid 2,1
    html.Div([
        html.Div([
                #feature dropdown
                dcc.Dropdown(
                    id='xvalue',
                    options=options,
                    value ='goals'
                    ),
                dcc.Dropdown(
                    id='yvalue',
                    options=options,
                    value='goals'
                    ),
                ]),
        html.Div(
            dcc.Graph( id ='scatter' ,  style={'height':'80vh', 'width':'55vw'})
            )
        ]),
    #grid 2,2
    html.Div(
        'placeholder',  style=placeholder )
    ], style=container )

#histogram callback
@app.callback(
    dash.dependencies.Output('histogram', 'figure'),
    [dash.dependencies.Input('category', 'value')]
)
def update_histogram(value):
    return {
        'data':[
           go.Histogram(
            x=df[value]
            )],
        'layout':go.Layout()
            }


@app.callback(
    dash.dependencies.Output('scatter', 'figure'),
    [dash.dependencies.Input('xvalue', 'value'),
    dash.dependencies.Input('yvalue', 'value')]
)
def update_scatter(xvalue,yvalue):
    return {
        'data': [
             go.Scatter(
                x=df[xvalue],
                y=df[yvalue],
                mode='markers'
            )
         ] ,
    'layout' : go.Layout( )
    }


if __name__ == '__main__':
    app.run_server(debug=True)