Exemplo n.º 1
0
                                           unit='ms').dt.time
#cast to datetime object
daily_df['date'] = pd.to_datetime(daily_df['date'])

summary_plot_types = {
    'Scatter': ['Step Count vs Date', 'Distance vs Date', 'Calorie vs Date'],
}

daily_plot_types = {
    'Scatter': ['Step Count vs Date', 'Distance vs Date', 'Calorie vs Date'],
}

aggregated_page = html.Div([
    html.Header([
        ' | ',
        dcc.Link('Home', href='/'), ' | ',
        dcc.Link('Summary', href='/summary'), ' | ',
        dcc.Link('Sleep', href='/sleep'), ' | ',
        dcc.Link('Step Count', href='/step'), ' | ',
        dcc.Link('Floors Climbed', href='/floors'), ' | ',
        dcc.Link('Heart Rate', href='/heart'), ' | ',
        dcc.Link('Exercise', href='/exercise'), ' | ',
        dcc.Link('Daily Aggregated', href='/daily_aggregated'), ' | ',
        dcc.Link('Data Sets', href='/data'), ' | '
    ],
                id='top',
                style={'textAlign': 'center'}),
    html.Br(),
    html.Div([
        html.H1('Daily Aggregated Analysis'),
        html.Div([
Exemplo n.º 2
0
    [dcc.Location(id='url', refresh=False),
     html.Div(id='page-content')])

## Global data Layout

index_page = html.Div([
    html.H2("COVID-19 Dashboard", style={'textAlign': 'center'}),
    html.Table(html.Tr([
        html.Td(
            dcc.Link(html.Button('global',
                                 style={
                                     'backgroundColor': '#008080',
                                     'border': 'none',
                                     'color': 'white',
                                     'padding': '15px 32px',
                                     'textAlign': 'center',
                                     'textDecoration': 'none',
                                     'display': 'inlineBlock',
                                     'fontSize': '16px',
                                     'borderRadius': '8px'
                                 }),
                     href='/global_data')),
        html.Td(
            dcc.Link(html.Button('country data',
                                 style={
                                     'backgroundColor': '#008080',
                                     'border': 'none',
                                     'color': 'white',
                                     'padding': '15px 32px',
                                     'textAlign': 'center',
                                     'textDecoration': 'none',
Exemplo n.º 3
0
def symbol_layout(symbol_name, aesthetics=None):
    """Create a Dash layout for a provided symbol.

    Args:
      symbol_name (str): a symbol name
      aesthetics (dict): an aesthetics configuration dictionary

    Returns:
      Dash layout

    """
    aesthetics = aesthetics or AESTHETICS.copy()

    # list to hold layouts for each section
    layouts = []

    symbol = DEFAULT_SYMBOLS[symbol_name]

    main_name = symbol.display_names[0]

    layouts.append(html.H6('Graph'))
    # TODO: costly, should just construct subgraph directly?
    g = Graph()
    subgraph = nx.ego_graph(g.get_networkx_graph(), symbol, undirected=True, radius=2)
    options=AESTHETICS['global_options']
    if "arrows" in options["edges"]:
        options["edges"]["arrows"] = "to"
    set_(aesthetics, "node_options.show_model_labels", True)
    layouts.append(html.Div(
        GraphComponent(
            id="model_graph",
            graph=graph_conversion(subgraph, aesthetics=AESTHETICS),
            options=AESTHETICS['global_options']
        ),
        style={'width': '100%', 'height': '300px'}
    ))

    if len(symbol.display_names) > 1:
        display_names = ", ".join(symbol.display_names[1:])
        other_names = dcc.Markdown("Also known as: {}".format(display_names))
        layouts.append(other_names)

    if len(symbol.display_symbols) > 1:
        symbols = " ".join(symbol.display_symbols)
        symbols = dcc.Markdown("Common symbols: {}".format(symbols))
        layouts.append(symbols)

    if symbol.category in ('property', 'condition'):
        units = dcc.Markdown("Canonical units: **{}**".format(symbol.unit_as_string))
        dimension = dcc.Markdown("**{}**".format(symbol.dimension_as_string))
        layouts.append(units)
        layouts.append(dimension)

    if symbol.comment:
        layouts.append(dcc.Markdown(symbol.comment))

    return html.Div([
        main_name,
        html.Br(),
        html.Div(layouts),
        html.Br(),
        #dcc.Link('< Back to Properties', href='/property'),
        #html.Br(),
        dcc.Link('< Back', href='/explore')
    ])
Exemplo n.º 4
0
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

from app import app

layout = html.Div([
    html.H3('Welcome!'),
    dcc.Link('Go to App', href='/Main')
])
            "f1_av_weighted (%)": res[model][0][3].round(3) * 100,
            "prec_av_weighted (%)": res[model][0][3].round(3) * 100,
            "recall_av_weighted (%)": res[model][0][3].round(3) * 100,
        }
    df = pd.DataFrame.from_dict(final, orient="index").round(3)
    return df


df_res = print_table_res(res)

########################################################################################
#################################### LAYOUT ############################################
########################################################################################
layoutPage2 = html.Div([
    html.Header([
        dcc.Link(html.Button('Go to Home Page', className='pth_button'),
                 href='/'),
        dcc.Link(html.Button('Datas analysis', className='pth_button'),
                 href='/Datas%20Analysis'),
        html.Br(),
        html.H1('Emotions detector'),
        html.H2('Classification Results'),
    ]),
    html.Aside(),
    html.Tbody(
        id='main_block',
        children=[
            html.Div(
                id='Block_left',
                children=[
                    html.Article(
                        id='left_selector',
Exemplo n.º 6
0
column1 = dbc.Col(
    [
        dcc.Markdown(
            """
        
            ## Which Strain for your pain?

            Emphasize how the app will benefit users. Don't emphasize the underlying technology.

            ✅ RUN is a running app that adapts to your fitness levels and designs personalized workouts to help you improve your running.

            ❌ RUN is the only intelligent running app that uses sophisticated deep neural net machine learning to make your run smarter because we believe in ML driven workouts.

            """
        ),
        dcc.Link(dbc.Button('Your Call To Action', color='primary'), href='/predictions')
    ],
    md=4,
)

gapminder = px.data.gapminder()
fig = px.scatter(gapminder.query("year==2007"), x="gdpPercap", y="lifeExp", size="pop", color="continent",
           hover_name="country", log_x=True, size_max=60)

column2 = dbc.Col(
    [
        dcc.Graph(figure=fig),
    ]
)

layout = dbc.Row([column1, column2])
Exemplo n.º 7
0
# df = pd.read_csv('admission_pollution_melt.csv')
df = pd.read_csv('health_pollution_final.csv')
available_indicators = df['Indicator Name'].unique()

markdown_text = """
This is an interactive dashboard visualising the relationship between selected health indicators and air pollutants.
Select different indicators from the drop downs to see if they are correlated with each other.
Hover over points (CCGs) on the left scatter graph to regenerate line plots on the right, which show both indicators over time for the selected NHS CCG.
**Please note that all Health Indicators are standaridised rates per 100,000 population and pollution indicators are measured in (R µg/m3)**.
"""

layout = html.Div([
    # Navigation Tree - Don't Delete
    html.Div([
        html.Div([
            dcc.Link('Air Pollution and Distance', href='/apps/app1'),
            dcc.Link('Air Pollution/Distance Relationship',
                     href='/apps/app2',
                     style={"margin-left": "30px"}),
            dcc.Link('Health and Distance',
                     href='/apps/app3',
                     style={"margin-left": "30px"}),
            dcc.Link('Health/Distance Over Time',
                     href='/apps/app4',
                     style={"margin-left": "30px"}),
            dcc.Link('Health and Air Pollution',
                     href='/apps/app5',
                     style={"margin-left": "30px"})
        ]),
    ]),
    html.
Exemplo n.º 8
0
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

from app import app

layout = html.Div([
    html.Div([dcc.Link('Go to GVA Sector', href='/gva-sectors')]),
    html.Div([dcc.Link('Go to GVA Time Series', href='/gva-time-series')]),
    html.Div([
        dcc.Link('Go to Agg. National Accounts', href='/agg_national_accounts')
    ]),
    html.Div([
        dcc.Link('Go to Agg. Economic Activities', href='/agg-eco-activities')
    ]),
    html.Div(
        [dcc.Link('Go to Households Private consumption', href='/household')])
])
Exemplo n.º 9
0
import dash_core_components as dcc
import dash_html_components as html

errorPage = html.Div([
    html.H2('404 Page not found'),
    html.H6('This page is not available or the server is not responding..'),
    dcc.Link('Go to Home Page', href='/')
],
                     className="error")
def toggle_active_links(pathname):
    if pathname == "/":
        # Treat page 1 as the homepage / index
        return True, False, False
    return [pathname == f"/page-{i}" for i in range(1, 4)]


img_style = {"width": "200px", "margin": "auto"}
card_style = {"margin": "auto", "height": "200px", "width": "200px"}
card_link = {"margin-bottom": "50px"}
card1 = dcc.Link(
    dbc.Card([
        dbc.CardImg(
            src=
            "https://proven-sa.com/wp-content/uploads/2016/09/Absher-logo.png",
            style=img_style)
    ],
             style=card_style,
             id="card1-btn"),
    href='/Absher',
    style=card_link,
)

card2 = dcc.Link(
    dbc.Card([
        dbc.CardImg(
            src=
            "https://www.moh.gov.sa/_layouts/15/MOH/Internet/New/images/logo.png",
            top=True,
            style=img_style)
    ],
             style=card_style,
Exemplo n.º 11
0
# https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
column1 = dbc.Col(
    [
        dcc.Markdown(
            """
        
            ## Welcome to San Fransisco!

            Enjoy some of the best weather , diverse cuisines , great shopping districts and attractions such as antique cable cars, the Golden Gate bridge, Fisherman’s Wharf and Pier 39, wine country, Alcatraz, Muir Woods’ 1000 year-old redwood forest and so much more!
            
            This app helps you find a place to stay that fits in your budget.          

            
            """
        ),
        dcc.Link(dbc.Button('Next', color='primary'), href='/predictions')
    ],
    md=4,
)

gapminder = px.data.gapminder()
fig = px.scatter(gapminder.query("year==2007"), x="gdpPercap", y="lifeExp", size="pop", color="continent",
           hover_name="country", log_x=True, size_max=60)

column2 = dbc.Col(
    [
        #dcc.Graph(figure=fig),
        html.Div(html.Img(src=app.get_asset_url('download.jpeg')), style={'height':'10%', 'width':'10%'})
    ]
)
Exemplo n.º 12
0

# Creating a layout for the landing pageself.
app.title = 'Welcome'
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div([
        html.H2(f'{greeting()}, Welcome to multi page demo'),
        html.
        H3('Following dashboards are available. Click on the link to navigate to the page'
           )
    ],
             className='row',
             style={'display': 'inline-block'}),
    html.Div([
        html.Div([dcc.Link('Gapminder', href='/apps/gapminder')],
                 className='three columns'),
        html.Div([dcc.Link('Iris', href='/apps/iris')],
                 className='three columns'),
        html.Div([dcc.Link('MPG', href='/apps/mpg')],
                 className='three columns')
    ],
             className='row'),
    html.Div(id='page-content')
],
                      className='container',
                      style={
                          'width': '98%',
                          'margin-left': 10,
                          'margin-right': 10,
                          'max-width': 50000
Exemplo n.º 13
0
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# Imports from this application
from app import app, server
from pages import index, predictions, insights, process

# Navbar docs: https://dash-bootstrap-components.opensource.faculty.ai/l/components/navbar
navbar = dbc.NavbarSimple(brand='Na P Periodically',
                          brand_href='/',
                          children=[
                              dbc.NavItem(
                                  dcc.Link('Predictions',
                                           href='/predictions',
                                           className='nav-link')),
                              dbc.NavItem(
                                  dcc.Link('Insights',
                                           href='/insights',
                                           className='nav-link')),
                              dbc.NavItem(
                                  dcc.Link('Process',
                                           href='/process',
                                           className='nav-link')),
                          ],
                          sticky='top',
                          color='light',
                          light=True,
                          dark=False)
Exemplo n.º 14
0
brand (string, optional): Brand text, to go top left of the navbar.
brand_href (string, optional): Link to attach to brand.
children (a list of or a singular dash component, string or number, optional): The children of this component
color (string, optional): Sets the color of the NavbarSimple. Main options are primary, light and dark, default light. You can also choose one of the other contextual classes provided by Bootstrap (secondary, success, warning, danger, info, white) or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name)
dark (boolean, optional): Applies the `navbar-dark` class to the NavbarSimple, causing text in the children of the Navbar to use light colors for contrast / visibility.
light (boolean, optional): Applies the `navbar-light` class to the NavbarSimple, causing text in the children of the Navbar to use dark colors for contrast / visibility.
sticky (string, optional): Stick the navbar to the top or the bottom of the viewport, options: top, bottom. With `sticky`, the navbar remains in the viewport when you scroll. By contrast, with `fixed`, the navbar will remain at the top or bottom of the page.
"""

navbar = dbc.NavbarSimple(
    brand='Overwatch Game Predictor',
    brand_href='/',
    children=[
        dbc.NavItem(
            dcc.Link('Predictions', href='/predictions',
                     className='nav-link')),
        #dbc.NavItem(dcc.Link('Insights', href='/insights', className='nav-link')),
        #dbc.NavItem(dcc.Link('Process', href='/process', className='nav-link')),
    ],
    sticky='top',
    color='light',
    light=True,
    dark=False)

footer = dbc.Container(
    dbc.Row(
        dbc.Col(
            html.P([
                html.Span('Jordan Ireland', className='mr-2'),
                html.A(html.I(className='fas fa-envelope-square mr-1'),
                       href='mailto:<you>@<provider>.com'),
    '15_9_F_11_T2': '15/9-F-11 T2',
    '15_9_F_12': '15/9-F-12',
    '15_9_F_14': '15/9-F-14',
    '15_9_F_15': '15/9-F-15',
    '15_9_F_15_A': '15/9-F-15 A',
    '15_9_F_15_B': '15/9-F-15 B',
    '15_9_F_15_C': '15/9-F-15 C',
    '15_9_F_15_D': '15/9-F-15 D'
}

app.layout = html.Div([
    dcc.Location(id='url'),
    dcc.Link('Volve wells',
             href='/volve_wells',
             style={
                 'color': 'rgb(0,0,0)',
                 'font-size': '17px',
                 'font-weight': 'bold'
             }),
    dcc.Link('Time/depth curve',
             href='/timevsdepth',
             style={
                 'color': 'rgb(0,0,0)',
                 'font-size': '17px',
                 'font-weight': 'bold',
                 'paddingLeft': '25px'
             }),
    dcc.Link('Operations',
             href='/operations',
             style={
                 'color': 'rgb(0,0,0)',
Exemplo n.º 16
0
def generate_sidebar():
    # we use the Row and Col components to construct the sidebar header
    # it consists of a title, and a toggle, the latter is hidden on large screens
    sidebar_header = dbc.Row([
        dbc.Col(
            html.A([
                html.H2([
                    html.Img(src='/assets/covidata.png',
                             style={
                                 "height": "70px",
                                 "margin-right": "5px"
                             }), "Covidata.be"
                ],
                        id="sidebar-title",
                        className="display-6")
            ],
                   href="http://www.covidata.be/",
                   style={
                       "color": "black",
                       "text-decoration": "none"
                   })),
        dbc.Col(
            [
                html.Button(
                    # use the Bootstrap navbar-toggler classes to style
                    html.Span(className="navbar-toggler-icon"),
                    className="navbar-toggler",
                    # the navbar-toggler classes don't set color
                    style={
                        "color": "rgba(0,0,0,.5)",
                        "borderColor": "rgba(0,0,0,.1)",
                    },
                    id="navbar-toggle",
                ),
            ],
            # the column containing the toggle will be only as wide as the
            # toggle, resulting in the toggle being right aligned
            width="auto",
            # vertically align the toggle in the center
            align="center",
        ),
    ])

    menus_components = []
    for menu_idx, menu in enumerate(menus):
        this_menu_links = [
            dbc.NavLink([
                html.I(className="fas fa-arrow-right mr-3"),
                str(x.link_name)
            ],
                        id=menu_links[x]["id"],
                        href=menu_links[x]["href"]) for x in menu.children
            if not x.invisible
        ]

        if not menu.fake_menu:
            menus_components += [
                html.Li(
                    # use Row and Col components to position the chevrons
                    dbc.Row(
                        [
                            dbc.Col(
                                dcc.Link(str(menu.name),
                                         href=menu.base_link +
                                         menu.children[0].link)),
                            dbc.Col(
                                html.I(className="fas fa-chevron-right mr-3"),
                                width="auto"),
                        ],
                        className="my-1",
                    ),
                    id=f"submenu-{menu_idx}",
                ),
                # we use the Collapse component to hide and reveal the navigation links
                dbc.Collapse(
                    this_menu_links,
                    id=f"submenu-{menu_idx}-collapse",
                ),
            ]
        else:
            menus_components += this_menu_links

    menus_components.append(
        html.Li(dbc.Row(
            [
                dbc.Col(gettext("Language"), className="navbar-text"),
                dbc.Col(
                    dbc.Button("EN",
                               color="link",
                               id="en-lang",
                               disabled=str(get_locale()) == "en")),
                dbc.Col(
                    dbc.Button("FR",
                               color="link",
                               id="fr-lang",
                               disabled=str(get_locale()) == "fr"))
            ],
            className="my-1",
        ),
                id="language-switcher"))
    return [
        sidebar_header,
        # we wrap the horizontal rule and short blurb in a div that can be
        # hidden on a small screen
        html.Div(
            [
                #html.Hr(),
                html.P(
                    get_translation(
                        en=
                        "Select any link below to learn more about the virus and how Belgium handles it.",
                        fr=
                        "Cliquez sur les liens ci-dessous pour en apprendre plus sur le virus et sur la manière dont la Belgique gère cette crise."
                    ),
                    className="lead",
                ),
            ],
            className="blurb"),
        # use the Collapse component to animate hiding / revealing links
        dbc.Collapse(
            [dbc.Nav(menus_components, vertical=True)],
            id="collapse",
        ),
        html.Div([
            html.A("Tweets by Covidatabe",
                   className="twitter-timeline",
                   href="https://twitter.com/Covidatabe?ref_src=twsrc%5Etfw")
        ],
                 id="twitterdiv",
                 className="blurb")
    ]
    return sidebar
Exemplo n.º 17
0
app = dash.Dash(
    __name__,
    external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
app.config['suppress_callback_exceptions'] = True
params = [
    'Weight', 'Torque', 'Width', 'Height', 'Efficiency', 'Power',
    'Displacement'
]

url_bar_and_content_div = html.Div(
    [dcc.Location(id='url', refresh=False),
     html.Div(id='page-content')])

layout_index = html.Div([
    dcc.Link('Navigate to "/page-1"', href='/page-1'),
    html.Br(),
    dcc.Link('Navigate to "/page-2"', href='/page-2'),
])

layout_page_1 = html.Div([
    html.H2('Page 1'),
    dcc.Input(id='input-1-state', type='text', value='Montreal'),
    dcc.Input(id='input-2-state', type='text', value='Canada'),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),
    html.Div(id='output-state'),
    html.Br(),
    dcc.Link('Navigate to "/"', href='/'),
    html.Br(),
    dcc.Link('Navigate to "/page-2"', href='/page-2'),
])
Exemplo n.º 18
0
from sklearn.ensemble import RandomForestClassifier
from sklearn.metrics import accuracy_score, precision_score, recall_score, confusion_matrix, classification_report

app = dash.Dash(__name__)
server = app.server

#################################################### NAVIGATION BAR MENU ####################################################
####################################################                     ####################################################

# Configure navbar menu
nav_menu = html.Div(
    [
        html.Ul(
            [
                # html.Li([dcc.Link('Introduction', href='intro')]),
                html.Li([dcc.Link('EDA', href='/eda')]),
                html.Li([dcc.Link('Modeling', href='/modeling')])
            ],
            className='nav navbar-nav')
    ],
    className='navbar navbar-default navbar-static-top')

# Content to be rendered in this element
content = html.Div(id='page-content')

# Define layout
app.layout = html.Div([
    # represents the URL bar, doesn't render anything
    dcc.Location(id='url', refresh=False),
    nav_menu,
    content
Exemplo n.º 19
0
# main heading
main_heading = dbc.Container(
[
    html.H1(["Economic Impact Of The COVID-19 Pandemic"], className="my-5 pt-5 text-center"),
 ]
, className='pt-3')

# what is covid-19
what_is_covid = dbc.Container(
    [
        html.Div([
            html.H3('What is COVID-19?'),
            html.P("Coronavirus disease 2019 (COVID-19) is a contagious disease caused by severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2). The first case was identified in Wuhan, China, in December 2019. It has since spread worldwide, leading to an ongoing pandemic."),
            html.P("COVID-19 is caused by infection with the severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2) virus strain."),
            html.Span('More information '),
            dcc.Link('here', href = 'https://www.who.int/emergencies/diseases/novel-coronavirus-2019')
        ])
    ]
, className="mb-5")

world_tally = dbc.Container(
    [
        html.H2('World Data', style = {'text-align': 'center'}),
        dbc.Row(
            [
                dbc.Col(children = [html.H4('Confirmed'),
                        html.Div(country_df['Confirmed'].sum(), className='text-info', style = {'font-size': '34px', 'font-weight': '700'})],
                        width=3, className='text-center bg-light border-right p-2', style = {'border-top-left-radius': '6px', 'border-bottom-left-radius': '6px'}),
                dbc.Col(children = [html.H4('Recovered', style = {'padding-top': '0px'}),
                        html.Div(country_df['Recovered'].sum(), className='text-success', style = {'font-size': '34px', 'font-weight': '700'})],
                        width=3, className='text-center bg-light border-right p-2'),
Exemplo n.º 20
0
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html

from .server import app
from . import router

app.layout = html.Div(children=[
    dcc.Location(id='url', refresh=False),
    dcc.Link('Index', href=f'{app.url_base_pathname}'), ', ',
    dcc.Link('Figure 1', href=f'{app.url_base_pathname}fig1'), ', ',
    dcc.Link('Figure 2', href=f'{app.url_base_pathname}fig2'),
    html.Br(),
    html.Br(),
    html.Div(id='content')
])

# callbacks could go here, or in another callback.py file with this at the top:
# from .server import app
    ]),
    html.Hr(),
    dbc.Button('Save the Progress!',
               color='danger',
               block=True,
               id='save_progress_button',
               n_clicks=0)
],
                    body=True)

navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(
            dbc.NavLink(
                dcc.Link('Cosine Function',
                         href='/cosine',
                         className="mx-4 text-decoration-none text-reset"))),
        dbc.NavItem(
            dbc.NavLink(
                dcc.Link('Visualize Uploaded Data',
                         href='/data',
                         className="mx-4 text-decoration-none text-reset"))),
        dbc.NavItem(
            dbc.NavLink(
                dcc.Link('Previous Runs',
                         href='/prev',
                         className="mx-4 text-decoration-none text-reset"))),
        # dbc.DropdownMenu(
        #     children=[
        #         dbc.DropdownMenuItem("More pages", header=True),
        #         dbc.DropdownMenuItem("Page 2", href="#"),
Exemplo n.º 22
0
control_div = html.Div([
    dcc.Dropdown(
        id='dropdown1',
        options=dd.options1,
        value=0
    ),
    dcc.Dropdown(
        id='dropdown2',
        options=dd.options2,
        value=0
    )
])

# Url Div
url_div = html.Div(
    dcc.Link('Navigation', href='/', id='link1')
)

# Display Div
display_div = html.Div([
    dcc.Graph(id='graph1',
              figure=dd.fig,
              style={'height': '800px'}
              )
])

# Place
app.layout = html.Div([
    logo_div,
    control_div,
    url_div,
Exemplo n.º 23
0
    def test_location_link(self):
        app = dash.Dash(__name__)

        app.layout = html.Div([
            html.Div(id='waitfor'),
            dcc.Location(id='test-location', refresh=False),
            dcc.Link(html.Button('I am a clickable button'),
                     id='test-link',
                     href='/test/pathname'),
            dcc.Link(html.Button('I am a clickable hash button'),
                     id='test-link-hash',
                     href='#test'),
            dcc.Link(html.Button('I am a clickable search button'),
                     id='test-link-search',
                     href='?testQuery=testValue',
                     refresh=False),
            html.Button('I am a magic button that updates pathname',
                        id='test-button'),
            html.A('link to click', href='/test/pathname/a', id='test-a'),
            html.A('link to click', href='#test-hash', id='test-a-hash'),
            html.A('link to click', href='?queryA=valueA', id='test-a-query'),
            html.Div(id='test-pathname', children=[]),
            html.Div(id='test-hash', children=[]),
            html.Div(id='test-search', children=[]),
        ])

        @app.callback(output=Output(component_id='test-pathname',
                                    component_property='children'),
                      inputs=[
                          Input(component_id='test-location',
                                component_property='pathname')
                      ])
        def update_location_on_page(pathname):
            return pathname

        @app.callback(output=Output(component_id='test-hash',
                                    component_property='children'),
                      inputs=[
                          Input(component_id='test-location',
                                component_property='hash')
                      ])
        def update_location_on_page(hash_val):
            if hash_val is None:
                return ''

            return hash_val

        @app.callback(output=Output(component_id='test-search',
                                    component_property='children'),
                      inputs=[
                          Input(component_id='test-location',
                                component_property='search')
                      ])
        def update_location_on_page(search):
            if search is None:
                return ''

            return search

        @app.callback(output=Output(component_id='test-location',
                                    component_property='pathname'),
                      inputs=[
                          Input(component_id='test-button',
                                component_property='n_clicks')
                      ],
                      state=[
                          State(component_id='test-location',
                                component_property='pathname')
                      ])
        def update_pathname(n_clicks, current_pathname):
            if n_clicks is not None:
                return '/new/pathname'

            return current_pathname

        self.startServer(app=app)

        self.snapshot('link -- location')

        # Check that link updates pathname
        self.wait_for_element_by_css_selector('#test-link').click()
        self.assertEqual(
            self.driver.current_url.replace('http://localhost:8050', ''),
            '/test/pathname')
        self.wait_for_text_to_equal('#test-pathname', '/test/pathname')

        # Check that hash is updated in the Location
        self.wait_for_element_by_css_selector('#test-link-hash').click()
        self.wait_for_text_to_equal('#test-pathname', '/test/pathname')
        self.wait_for_text_to_equal('#test-hash', '#test')
        self.snapshot('link -- /test/pathname#test')

        # Check that search is updated in the Location -- note that this goes through href and therefore wipes the hash
        self.wait_for_element_by_css_selector('#test-link-search').click()
        self.wait_for_text_to_equal('#test-search', '?testQuery=testValue')
        self.wait_for_text_to_equal('#test-hash', '')
        self.snapshot('link -- /test/pathname?testQuery=testValue')

        # Check that pathname is updated through a Button click via props
        self.wait_for_element_by_css_selector('#test-button').click()
        self.wait_for_text_to_equal('#test-pathname', '/new/pathname')
        self.wait_for_text_to_equal('#test-search', '?testQuery=testValue')
        self.snapshot('link -- /new/pathname?testQuery=testValue')

        # Check that pathname is updated through an a tag click via props
        self.wait_for_element_by_css_selector('#test-a').click()
        try:
            self.wait_for_element_by_css_selector('#waitfor')
        except Exception as e:
            print(
                self.wait_for_element_by_css_selector(
                    '#_dash-app-content').get_attribute('innerHTML'))
            raise e

        self.wait_for_text_to_equal('#test-pathname', '/test/pathname/a')
        self.wait_for_text_to_equal('#test-search', '')
        self.wait_for_text_to_equal('#test-hash', '')
        self.snapshot('link -- /test/pathname/a')

        # Check that hash is updated through an a tag click via props
        self.wait_for_element_by_css_selector('#test-a-hash').click()
        self.wait_for_text_to_equal('#test-pathname', '/test/pathname/a')
        self.wait_for_text_to_equal('#test-search', '')
        self.wait_for_text_to_equal('#test-hash', '#test-hash')
        self.snapshot('link -- /test/pathname/a#test-hash')

        # Check that hash is updated through an a tag click via props
        self.wait_for_element_by_css_selector('#test-a-query').click()
        self.wait_for_element_by_css_selector('#waitfor')
        self.wait_for_text_to_equal('#test-pathname', '/test/pathname/a')
        self.wait_for_text_to_equal('#test-search', '?queryA=valueA')
        self.wait_for_text_to_equal('#test-hash', '')
        self.snapshot('link -- /test/pathname/a?queryA=valueA')
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

from app import app

layout = html.Div([
    html.H3('App 2'),
    dcc.Dropdown(
        id='app-2-dropdown',
        options=[
            {'label': 'App 2 - {}'.format(i), 'value': i} for i in [
                'NYC', 'MTL', 'LA'
            ]
        ]
    ),
    html.Div(id='app-2-display-value'),
    dcc.Link('Go to Index', href='/')
],className="CONTENT_STYLE")


@app.callback(
    Output('app-2-display-value', 'children'),
    [Input('app-2-dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)
Exemplo n.º 25
0
 html.Header([
     html.Div([html.Div([], className='fa fa-bars tooltips')],
              className='sidebar-toggle-box'),
     html.A([
         html.B([
             html.Img(src='assets/usuario.jpg',
                      className='img-circle logo'), 'CNC',
             html.Span(' ECAR')
         ])
     ],
            href='',
            className='logo'),
     html.Div([
         html.Ul([
             html.Li(
                 html.A([dcc.Link('MODEL', href='/page-2')],
                        className='logout'))
         ],
                 className='nav pull-right top-menu')
     ],
              className='top-menu'),
     html.Div([
         html.Ul([
             html.Li(
                 html.A([dcc.Link('ACERCA TEAM76', href='/page-1')],
                        className='logout'))
         ],
                 className='nav pull-right top-menu')
     ],
              className='top-menu'),
     html.Div([
Exemplo n.º 26
0
 html.Div(
     [
         #the next div holds the app title.
         html.Div(
             [
                 html.H1('MDB Analysis',
                         style={'color': colours['white']})
             ],
             style={
                 'marginLeft': '30%',
                 'width': '50%',
                 'textAlign': 'center',
                 'display': 'inline-block'
             }),
         html.Div([
             html.H3(dcc.Link('Index Page', href='/'),
                     style=style_title_links),
             html.H3(dcc.Link('Summary', href='/apps/app1'),
                     style=style_title_links),
             html.H3(dcc.Link('Comparison', href='/apps/app2'),
                     style=style_title_links),
             html.H3(dcc.Link('Data', href='/raw+data'),
                     style=style_title_links),
         ],
                  style={'marginLeft': '25%'})  # end div holding links
     ],
     style={
         'width': '90%',
         'display': 'inline-block'
     }),
 html.Div([
Exemplo n.º 27
0
import dash_core_components as dcc
import plotly.express as px

# 2 column layout. 1st column width = 4/12
# https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
column1 = dbc.Col(
    [
        dcc.Markdown(
            """Your Risk Report

            The Cylinder app provides you a traffic risk report based on you,
            and how you self identify.  Be safe, for yourself and for those
            around you.
            """
        ),
        dcc.Link(dbc.Button('Get My Report', color='primary'),
                 href='/predictions')
    ],
    md=4,
)

gapminder = px.data.gapminder()
fig = px.scatter(gapminder.query("year==2007"),
                 x="gdpPercap",
                 y="lifeExp",
                 size="pop",
                 color="continent",
                 hover_name="country",
                 log_x=True, size_max=60)

column2 = dbc.Col(
    [
Exemplo n.º 28
0
                    ' de toutes les variables disponible ',
                    html.A('ici', href='https://github.com/owid/covid-19-data/blob/master/public/data/owid-covid-codebook.csv', target='_blank'),
                    ').']),
            html.P(['Il nous a fallu dans un second temps trouver des données permettant'\
                    ' de mesurer l\'impact économique de la crise. Nous nous sommes pour'\
                    ' cela appuyé sur les nombreux datasets disponibles sur le site de'\
                    ' l\'OCDE (voir ',
                    html.A('ici', href='https://stats.oecd.org/index.aspx?lang=fr', target='_blank'),
                    ') en choisissant différents indicateurs ainsi que certains datasets disponibles sur Kaggle.'])

           ], className='deroulement_projet'),

        html.Div([
            html.H2('Plan du dashboard'),
            html.Ul([
                html.Li([dcc.Link('Données covid', href='/apps/covid', style={'color': '#FFFFFF'}),
                        ': page contenant quelques graphiques relatifs à'\
                        ' l\'évolution de l\'épidemie.']),
                html.Li([dcc.Link('PIB', href='/apps/pib', style={'color': '#FFFFFF'}),
                         ': page permettant de mesurer l\'impact de la crise sur l\'évolution du PIB.']),
                html.Li([dcc.Link('Commerce', href='/apps/commerce', style={'color': '#FFFFFF'}),
                         ': page permettant de mesurer l\'impact de la crise sur les échanges internationaux (exportations, importations).']),
                html.Li([dcc.Link('HDI', href='/apps/HID', style={'color': '#FFFFFF'}),
                         ': page permettant de mesurer l\'impact de la crise en fonction du développement des pays.']),
                html.Li([dcc.Link('Cours actions', href='/apps/actions', style={'color': '#FFFFFF'}),
                         ': page permettant de mesurer l\'impact de la crise sur le cours des actions.']),
                html.Li([dcc.Link('Cours pétrole', href='/apps/petrol', style={'color': '#FFFFFF'}),
                         ': page permettant de mesurer l\'impact de la crise sur l\'évolution des prix du pétrole.']),
                html.Li([dcc.Link('Emplois', href='/apps/travail', style={'color': '#FFFFFF'}),
                         ': page permettant de mesurer l\'impact de la crise sur la situation du marché de l\'emploi.']),
Exemplo n.º 29
0
df = pd.DataFrame()

########################
#Setup the layout
########################

# Document search page
search_page_layout = html.Div([
    dash_table.DataTable(id='table',
                         columns=[{
                             "name": i,
                             "id": i
                         } for i in df.columns],
                         data=df.to_dict('records')),
    dcc.Link(html.Button(id='back-button',
                         children='Back',
                         style={'margin': '5px'}),
             href='/'),
    html.Button(id='refresh-button',
                children='Refresh',
                style={'margin': '5px'}),
    html.Div(id='trigger-div', style={'display': 'none'})
])


########################
#Set up callbacks
########################
@app.callback(
    [Output('table', 'data'),
     Output('table', 'columns')],
    [Input('refresh-button', 'n_clicks'),
Exemplo n.º 30
0
# https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
column1 = dbc.Col(
    [
        dcc.Markdown("""
        
            ## Let us suggest similar song

            Is there a song you love and wish to find a song of the same likelyhood?
            Tell us what song you love and we will suggest you 5 alike songs!

            Emphasize how the app will benefit users.

            ✅ RUN 
            ❌ Not RUN
            """),
        dcc.Link(dbc.Button('Get your Songs', color='primary'),
                 href='/predictions')
    ],
    md=4,
)

# gapminder = px.data.gapminder()

# fig = px.scatter(gapminder.query("year==2007"), x="gdpPercap", y="lifeExp", size="pop", color="continent",
#            hover_name="country", log_x=True, size_max=60)

# column2 = dbc.Col(
#     [
#         dcc.Graph(figure=fig),
#     ]
# )