import dash_html_components as html
from jupyter_dash import JupyterDash

app = JupyterDash(__name__)

app.layout = html.Div([
    html.H1('H1 header!'),
    html.H2('H2 header!'),
    html.H3('H3 header!'),
    html.H4('H4 header!'),
    html.H5('H5 header!'),
    html.H6('H6 header!'),
])

app.run_server()

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html

app = JupyterDash(__name__)

markdown = '''
# Lorem Ipsum

**Lorem ipsum dolor sit amet**, consectetur adipiscing elit. 

1. Duis ullamcorper nisl eget diam laoreet, ac rutrum enim aliquet. 
2. Curabitur aliquam libero et leo consectetur, at pretium urna mollis. 
3. Cras et vestibulum nisi, sit amet sollicitudin turpis. 

***Nam imperdiet porttitor venenatis***. Aenean vitae maximus enim, ac consectetur augue. 

## Vestibulum nec felis ac erat auctor pharetra. 

> Vestibulum vitae velit at nisl pretium ultricies. 
>> Suspendisse mi urna, lobortis sed ante sit amet, porta venenatis ligula. 

Text generated by the [Lorem Ipsum generator](https://www.lipsum.com/).
'''

app.layout = html.Div([
    dcc.Markdown(children=markdown)
])

app.run_server()

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px

df = px.data.iris() # iris is a pandas DataFrame

app = JupyterDash(__name__)

fig = px.scatter(df, x='petal_length', y='sepal_length') 
 
app.layout = html.Div([
    dcc.Graph(
        figure=fig,
        style={'height': 300},
    )
])

app.run_server()

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

app = JupyterDash(__name__)

app.layout = html.Div([    
    html.Div(['Text:',
              dcc.Input(id='text-input', 
                        value='', 
                        type='text')]),
    html.Div(id='echo-div')
])

@app.callback(
    Output('echo-div', 'children'),
    Input('text-input', 'value')
)
def update_echo_div_callback(text_value):
  if text_value:
    return f'Echo: {text_value}'

app.run_server()

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

app = JupyterDash(__name__)

app.layout = html.Div([
    dcc.Input(
        id='x',
        type='number',
        value=1
    ),
    dcc.Input(
        id='c',
        type='number',
        value=0
    ),
    html.Table([
        html.Tr(html.Td(id='y-1-td')),
        html.Tr(html.Td(id='y-2-td')),
        html.Tr(html.Td(id='y-3-td')),
        html.Tr(html.Td(id='y-4-td')),
        html.Tr(html.Td(id='y-5-td'))        
    ])
])

@app.callback(
    Output('y-1-td', 'children'),
    Output('y-2-td', 'children'),
    Output('y-3-td', 'children'),
    Output('y-4-td', 'children'),
    Output('y-5-td', 'children'),
    Input('x', 'value'),
    Input('c', 'value'))
def compute_callback(x, c):
  if (not x is None) and (not c is None):
    return x*1+c, x*2+c, x*3+c, x*4+c, x*5+c

app.run_server(debug=True)

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

df = pd.read_csv(
    'https://raw.githubusercontent.com/jasonchang0/kaggle-google-apps/master/google-play-store-apps/googleplaystore.csv', delimiter=',')

app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

navbar = dbc.NavbarSimple(
    brand="Google Play Top",
    brand_href="#",
    color="primary",
    dark=True,
)

controls = dbc.Card(
    [
        dbc.FormGroup(
            [
                dbc.Label('Category'),
                dcc.Dropdown(
                    id='category-dropdown',
                    options=[
                        {'label': col, 'value': col} for col in df['Category'].unique()
                    ],
                    value='ART_AND_DESIGN',
                ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label('Top'),
                dcc.Dropdown(
                    id='top-dropdown',
                    options=[
                        {'label': 5, 'value': 5},
                        {'label': 10, 'value': 10},
                        {'label': 20, 'value': 20},
                        {'label': 30, 'value': 30},
                        {'label': 40, 'value': 40},
                        {'label': 50, 'value': 50},
                    ],
                    value=5,
                ),
            ]
        )
    ],
    body=True
)

app.layout = dbc.Container(
    [
        navbar,
        dbc.Row(
            [
                dbc.Col(controls, md=4),
                dbc.Col(dcc.Graph(id='top-graph'), md=8),
            ],
            align='center'
        ),
    ]
)

@app.callback(
    Output('top-graph', 'figure'),
    Input('category-dropdown', 'value'),
    Input('top-dropdown', 'value')
)
def update_callback(category, top):
    df2 = df[df['Category'] == category]
    df2 = df2.sort_values(by='Rating', ascending=False).head(top)
    fig = px.bar(df2, x='App', y='Rating')
    return fig

app.run_server()

df = px.data.iris() # iris is a pandas DataFrame

dcc.Dropdown(
  id='xaxis-dropdown',
  options=[
    {'label': 'sepal_width', 'value': 'sepal_width'},
    {'label': 'sepal_length', 'value': 'sepal_length'},
    {'label': 'petal_length', 'value': 'petal_length'}
  ],
  value='sepal_width',
)

dcc.Dropdown(
  id='yaxis-dropdown',
  options=[
    {'label': 'sepal_width', 'value': 'sepal_width'},
    {'label': 'sepal_length', 'value': 'sepal_length'},
    {'label': 'petal_length', 'value': 'petal_length'}
  ],
  value='sepal_width',
)

dbc.Col(dcc.Graph(id='top-graph'), md=8),

@app.callback(
    Output('top-graph', 'figure'),
    Input('xaxis-dropdown', 'value'),
    Input('yaxis-dropdown', 'value'),
)
def update_callback(xaxis_col, yaxis_col):          
    fig = px.scatter(df, x=xaxis_col, y=yaxis_col)    
    return fig