tabs.py

import plotly.graph_objs as go
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

import flask
import json
import pandas as pd

app = dash.Dash(
    __name__,
    external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'],
    debug=True,
)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/'
    'cb5392c35661370d95f300086accea51/raw/'
    '8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/'
    'indicators.csv')

available_indicators = df['Indicator Name'].unique()


def serve_layout():
    # send initial layout if there is flask request context
    if flask.has_request_context():
        return layout_index

    # otherwise send every element to dash validator to prevent callback exceptions
    return html.Div([
        layout_index,
        get_plots(),
    ])


layout_index = html.Div([
    dcc.Tabs(id="tabs", value='tab-1', children=[
        dcc.Tab(label='Tab one', value='tab-1'),
        dcc.Tab(label='Tab two', value='tab-2'),
        dcc.Tab(label='kills callbacks', value='tab-3'),
    ]),
    html.Div(id='tabs-content'),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(("""
        **Hover Data**

        Mouse over values in the graph.
    """)),
            html.Pre(id='hover-data', style=styles['pre'])
        ], className='three columns'),

        html.Div([
            dcc.Markdown(("""
        **Click Data**

        Click on points in the graph.
    """)),
            html.Pre(id='click-data', style=styles['pre']),
        ], className='three columns'),

        html.Div([
            dcc.Markdown(("""
        **Selection Data**

        Choose the lasso or rectangle tool in the graph's menu
        bar and then select points in the graph.
    """)),
            html.Pre(id='selected-data', style=styles['pre']),
        ], className='three columns'),

        html.Div([
            dcc.Markdown(("""
        **Zoom and Relayout Data**

        Click and drag on the graph to zoom or click on the zoom
        buttons in the graph's menu bar.
        Clicking on legend items will also fire
        this event.
    """)),
            html.Pre(id='relayout-data', style=styles['pre']),
        ], className='three columns')
    ])

])


def get_hist_plot(nested=False):
    import numpy as np

    x0 = np.random.randn(500)
    x1 = np.random.randn(500) + 1

    trace1 = go.Histogram(
        x=x0,
        opacity=0.75
    )
    trace2 = go.Histogram(
        x=x1,
        opacity=0.75
    )

    data = [trace1, trace2]
    layout = go.Layout(barmode='overlay')
    fig = go.Figure(data=data, layout=layout)
    graph = dcc.Graph(id='hist-plot', figure=fig)
    if nested:
        return html.Div([html.Div(), graph])
    else:
        return html.Div([graph])


def get_plots(pref=''):
    return html.Div([
        dcc.Graph(
            id=pref + 'basic-interactions',
            figure={
                'data': [
                    {
                        'x': [1, 2, 3, 4],
                        'y': [4, 1, 3, 5],
                        'text': ['a', 'b', 'c', 'd'],
                        'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
                        'name': 'Trace 1',
                        'mode': 'markers',
                        'marker': {'size': 12}
                    },
                    {
                        'x': [1, 2, 3, 4],
                        'y': [9, 4, 1, 4],
                        'text': ['w', 'x', 'y', 'z'],
                        'customdata': ['c.w', 'c.x', 'c.y', 'c.z'],
                        'name': 'Trace 2',
                        'mode': 'markers',
                        'marker': {'size': 12}
                    }
                ],
                'layout': {'hovermode': 'closest'}
            }
        ),
    ])


app.layout = serve_layout


# Index callbacks
@app.callback(Output('tabs-content', 'children'),
              [Input('tabs', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return get_plots()
    elif tab == 'tab-2':
        return get_hist_plot(True)
    else:
        return get_hist_plot()


# Tab 1 Callbacks
@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)


@app.callback(
    Output('click-data', 'children'),
    [Input('basic-interactions', 'clickData')])
def display_click_data(clickData):
    return json.dumps(clickData, indent=2)


@app.callback(
    Output('selected-data', 'children'),
    [Input('basic-interactions', 'selectedData')])
def display_selected_data(selectedData):
    return json.dumps(selectedData, indent=2)


@app.callback(
    Output('relayout-data', 'children'),
    [Input('basic-interactions', 'relayoutData')])
def display_selected_data(relayoutData):
    return json.dumps(relayoutData, indent=2)


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