import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__,external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='XJETS',style={'textAlign':'center'},id='title'),

    html.Div(children='''The Status Quo''',style={'textAlign':'center'}),

    dcc.Graph(
        id='bapp vs L300',
        figure={
            'data':[
                {'x':[1,2,3],"y":[1,2,3],'type':'bar','name':'SF'},
                {'x':[1,2,3],'y':[4,1,2],'type':'bar','name':'temp'}
            ],
            'layout':{
                'title':'Beta app vs Lobe L300'
            }
        }
    ),

    dcc.Input(id='test-input',value='XJETS',type='text'),

    
])



@app.callback(Output(component_id='title',component_property='children'),
[Input(component_id='test-input',component_property='value')]
)
def update_output_div(input_value):
    return '{0}'.format(input_value)

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