daq.BooleanSwitch(id='switch', on=False, color='#A4D386'), ], id='switch_widget') live_data_area = [ac_map, ac_table, ac_switch] app = DjangoDash( 'AutumnChallenge', add_bootstrap_links=True, ) app.layout = html.Div([ html.Div(id='ac_cards'), html.Div(live_data_area, id='live_data_area'), # dcc.Interval(id='tick',interval=1000,n_intervals=0), dcc.Location(id='url'), html.Div('', id='empty', style={'display': 'none'}), # to write useful data to present things ]) ''' salvation for my responsive.... ''' app.clientside_callback( """ function(path) { return String(window.innerWidth) + ',' + String(window.innerHeight); } """, Output('empty', 'children'), [Input('url', 'pathname')])
dbc.Nav( [ dbc.NavLink("Page 1", href="/page-1", id="page-1-link"), dbc.NavLink("Page 2", href="/page-2", id="page-2-link"), dbc.NavLink("Page 3", href="/page-3", id="page-3-link"), ], vertical=True, pills=True, ), ], style=SIDEBAR_STYLE, ) content = html.Div(id="page-content", style=CONTENT_STYLE) app.layout = html.Div([dcc.Location(id="url"), sidebar, content]) # this callback uses the current pathname to set the active state of the # corresponding nav link to true, allowing users to tell see page they are on @app.callback( [Output(f"page-{i}-link", "active") for i in range(1, 4)], [Input("url", "pathname")], ) 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)]
# connection for app pages import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output from RegentsApp import app import RegentsAppFunctions, RegentsAppMarkdown, Alg1CC, Alg2CC, GeometryCC app.layout = html.Div( [dcc.Location(id='url', refresh=False), html.Div(id='page-content')]) index_page = html.Div([ dcc.Link('Algebra 1 CC Page', href='/Alg1CC'), html.Br(), dcc.Link('Geometry CC Page', href='/GeometryCC'), html.Br(), dcc.Link('Algebra 2 CC Page', href='/Alg2CC'), ]) @app.callback(Output('page-content', 'children'), [Input('url', 'pathname')]) def display_page(pathname): if pathname == '/Alg1CC': return Alg1CC.layout elif pathname == '/GeometryCC': return GeometryCC.layout elif pathname == '/Alg2CC': return Alg2CC.layout else:
def multipage_app(validation=False): app = Dash(__name__, suppress_callback_exceptions=(validation == "suppress")) skeleton = html.Div( [dcc.Location(id="url", refresh=False), html.Div(id="page-content")]) layout_index = html.Div([ dcc.Link('Navigate to "/page-1"', id="index_p1", href="/page-1"), dcc.Link('Navigate to "/page-2"', id="index_p2", 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 "/"', id="p1_index", href="/"), dcc.Link('Navigate to "/page-2"', id="p1_p2", href="/page-2"), ]) layout_page_2 = html.Div([ html.H2("Page 2"), dcc.Input(id="page-2-input", value="LA"), html.Div(id="page-2-display-value"), html.Br(), dcc.Link('Navigate to "/"', id="p2_index", href="/"), dcc.Link('Navigate to "/page-1"', id="p2_p1", href="/page-1"), ]) validation_layout = html.Div( [skeleton, layout_index, layout_page_1, layout_page_2]) def validation_function(): return skeleton if flask.has_request_context() else validation_layout app.layout = validation_function if validation == "function" else skeleton if validation == "attribute": app.validation_layout = validation_layout # Index callbacks @app.callback(Output("page-content", "children"), [Input("url", "pathname")]) def display_page(pathname): if pathname == "/page-1": return layout_page_1 elif pathname == "/page-2": return layout_page_2 else: return layout_index # Page 1 callbacks @app.callback( Output("output-state", "children"), [Input("submit-button", "n_clicks")], [State("input-1-state", "value"), State("input-2-state", "value")], ) def update_output(n_clicks, input1, input2): return ("The Button has been pressed {} times," 'Input 1 is "{}",' 'and Input 2 is "{}"').format(n_clicks, input1, input2) # Page 2 callbacks @app.callback(Output("page-2-display-value", "children"), [Input("page-2-input", "value")]) def display_value(value): print("display_value") return 'You have selected "{}"'.format(value) return app
def url_bar(): """ This does not render anything but is necessary for routing to function """ return dcc.Location(id='url', refresh=False)
# optional - sets the order of columns columns=sorted(dfgdp2007.columns), row_selectable=True, filterable=True, sortable=True, selected_row_indices=[], id='datatable-gapminder'), ], className="container") ]) app.layout = html.Div( [ # This Location component represents the URL bar dcc.Location(id='url', refresh=True), # Each "page" will modify this element html.Div(id='page-content'), html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'}), ], className="container") @app.callback(Output('page-content', 'children'), [Input('url', 'pathname')]) def display_page(pathname): if pathname.startswith('/apps/app1'): country = pathname.split('/')[-1] dfCountry = df_gdp[df_gdp.country == country] return app1.return_Layout(dfCountry, country) elif pathname == '/apps/app2':
dbc.Spinner( dbc.Select( id="app-choice", placeholder="Please select an app...", style={"width": "100%"}, options=[{ "label": name_to_label(x), "value": x } for x in pages], ), ), width=4, ), ], ), html.Div(id="display", style={"height": "90%"}), dcc.Location(id="url", refresh=True), ], style={"height": "calc(100vh - 15px)"}, fluid=True, ) for k in apps: new_callback_map = apps[k].callback_map new_callback_list = apps[k]._callback_list # Prepend to layout IDs recursively in-place # if k in prefix_ignored: # new_callback_map = apps[k].callback_map # new_callback_list = apps[k]._callback_list # else: # prepend_recursive(apps[k].layout, prefix=k + "-")
def generate_layout(): return html.Div( [dcc.Location(id='url'), html.Div(render_page(), id='page-content')])
import dash_daq as daq import dash_html_components as html import dash_core_components as dcc from dash.dependencies import Input, Output, State from app import app from apps import app_tempomonitor, app_memberinfo, app2 from lib import lib_tempo app.layout = html.Div([ dcc.Location(id='index_url', refresh=False), html.Div(id='index_page_content') ]) index_layout = html.Div( [ html.H1(children='qT-Tools'), html.Div([ html.Div(children='Username', style={ 'width': 100, 'display': 'inline-block' }), html.Div(dcc.Input(id='index_input_name', type='text', debounce=True, placeholder='Enter your name here.'), style={'display': 'inline-block'}), html.Div(children='Total Time', style={ 'width': 100,
[ dbc.Tab(label="Wojewodztwa siatka", tab_id=IDS.Tab.VOIV_GRID), dbc.Tab(label="Skala zachorowalności w czasie", tab_id=IDS.Tab.LINE_SPREAD), dbc.Tab(label="Udział dziennych przypadków", tab_id=IDS.Tab.DAILY_PIECHART), dbc.Tab(label="Liczba przypadków przez 7 dni", tab_id=IDS.Tab.CASES_PER_WEEK), ], id=IDS.Tab.TAB_BAR, active_tab=IDS.Tab.VOIV_GRID, ), html.Div(id=IDS.Tab.TAB_DIV_CONTENT), ]) navbar = dbc.NavbarSimple( children=[ dbc.NavItem( dbc.NavLink("Dzienna zmiany", href='/' + IDS.Page.DAILY_CHANGE)), dbc.NavItem( dbc.NavLink("Dzienny stan", href='/' + IDS.Page.DAILY_STATE)), ], brand="Koronawirus w województwach", brand_href="#", color="primary", dark=True, # sticky="top", # style={'height': '45px'}, ) page_location = dcc.Location(id=IDS.Page.URL_PAGE_LOCATION, refresh=False)
'Energy Production Over Time', href='/page-1', active='exact'), html.Br(), html.Br(), dbc.NavLink('Further Reading on Renewable Energy', href='/page-2', active='exact'), ], ), ], className='navBar') #website title app.title = 'Future Energy' #html layout of the homepage app.layout = html.Div([ dcc.Location(id='url', refresh=False), topMenu, html.Div(id='page-content') ]) #homepage layout index_page = html.Div( style={ "margin-left": "1rem", "padding": "2rem 1rem", }, children=[ #title on the page html.H1('Future Energy Limited', style={ 'textAlign': 'center', 'color': 'seagreen',
# Stores used by examples. dcc.Store(id='memory'), dcc.Store(id='memory-output'), dcc.Store(id='local', storage_type='local'), dcc.Store(id='session', storage_type='session'), header, html.Div([ html.Div(id='wait-for-layout'), html.Div([ html.Div(html.Div(id='chapter', className='content'), className='content-container'), ], className='container-width') ], className='background'), dcc.Location(id='location', refresh=False), ]) def name_to_id(name): return (name.replace(' ', '-').replace("'", '').replace('?', '').lower() + '-section') def build_all(): pdf_contents = [] table_of_contents = [] for section in chapter_index.URLS: section_content = [] section_toc = []
def default_layout(*args): return html.Div([html.Div( id=CONTENT_ID), dcc.Location(id=URL_ID)] + list(args))
acct_info = [] for i in enumerate(acct): my_dict = dict() my_dict['label'] = i[1][0] my_dict['value'] = i[1][1] acct_info.append(my_dict) # Close the cursor. Send date to journal_data_entry callback and screen. cursor.close() callbacks.journal_data_entry(app, cust_info, ee_info, acct_info) content = html.Div(id="page-content", style=CONTENT_STYLE) app.layout = html.Div([ dcc.Location(id="url", refresh = False), sidebar, content ]) # this callback uses the current pathname to set the active state of the # corresponding nav link to true, allowing users to tell see page they are on @app.callback( [Output(f"page-{i}-link", "active") for i in range(1, 8)], [Input("url", "pathname")]) def toggle_active_links(pathname): '''Treat page 1 as the homepage / index''' if pathname == "/": return True, False, False, False, False, False, False return [pathname == f"/page-{i}" for i in range(1, 8)] @app.callback(Output("page-content", "children"),
def makeLayout(): return html.Div(children=[ dcc.Location(id='loc'), # Check URL for Git Auth dcc.Store(id='loginInfo', storage_type='session', data={'user': None, 'status': None, 'token': None}), # Used for Git Auth dcc.Interval(id='queueRefreshTimer', interval=1000, n_intervals=0), html.H1(children='Performance Explorer'), html.Div(children=[ html.Div(children=[ dcc.Markdown( 'Interactively compare performance across commits in the [AutoPas](https://github.com/AutoPas/AutoPas) GitHub Repo\n' 'Working with data from [AutoPas-PerformanceTesting](https://github.com/AutoPas/PerformanceTesting)', style={'whiteSpace': 'pre'}), html.Button('Refresh Commit List', id='refreshButton', n_clicks=0), html.Br(), ]), ], style={'float': 'left'}), html.Div(children=[ html.Button('Login', id='loginButton', n_clicks=0), html.P(id='loginResponse'), html.Br(), ], style={'float': 'right'}), html.Br(style={'clear': 'left'}), dcc.Tabs(id='tabs', value='tab2', children=[ dcc.Tab(label='1v1 Compare', value='tab0', children=html.Div([ html.Div([ html.H2('1) Select commits to compare:'), html.Div( [ html.P('Base Commit:', style={'font-weight': 'bold'}), dcc.Dropdown('CommitList0', options=[k for k in dummyOptions], placeholder='Select 1st Commit...', style={ 'font-family': 'monospace', }) ], style={ 'width': '50%', 'float': 'left' } ), html.Div( [ html.P('Compare Commit:', style={'font-weight': 'bold'}), dcc.Dropdown('CommitList1', options=[k for k in dummyOptions], placeholder='Select 2nd Commit...', style={ 'font-family': 'monospace', }) ], style={ 'width': '50%', 'float': 'right' } ), ], style={ 'width': '100%', 'float': 'left', 'background-color': '#F5F0F6' }), html.Br(), html.Div( [html.H2('2) Select setup to compare:'), dcc.Dropdown('Setups', options=[k for k in dummyOptions], placeholder='Select Setup...', style={ 'font-family': 'monospace', })], style={ 'width': '100%', 'float': 'left', 'background-color': '#F5F0F6', 'padding-bottom': '1%' } ), html.Br(), html.Div( #### Dynamic Parts #### [getDynamicOptionTemplate(i, k, 100 / (len(DYNAMIC_OPTIONS) + 1), tab=0) for i, k in enumerate(DYNAMIC_OPTIONS)], #### Dynamic Parts #### ), html.Div( [html.H2('3) Coloring:'), dcc.RadioItems('Coloring', options=[k for k in dummyOptions], labelStyle={'display': 'block'}, style={ 'font-family': 'monospace', })], style={ 'width': f'{100 / (len(DYNAMIC_OPTIONS) + 1)}%', 'background-color': COLORS[len(DYNAMIC_OPTIONS)], 'float': 'left', 'padding': '.3%', 'box-sizing': 'border-box' } ), html.Br(style={'clear': 'left'}), html.H2(id='LoadText', children='Nothing to do'), html.Img(id='LoadingImg', src='', width='5%'), dcc.Interval('LoadCheck', interval=250, disabled=False), # Continuously checking if load has succeeded # TODO: Replace this with dcc.Store html.Div(id='CurrentData', style={'display': 'none'}), html.Div( [ html.H2('4) Plot:', id='PlotTitle'), ] ), dcc.Graph( id='CompareGraph' ), ])), dcc.Tab(label='Compare over time', value='tab1', children=html.Div([ html.Div( [ # TODO: SLIDER VIEW AND BETTER VERTICAL LAYOUT dcc.RangeSlider( id='CommitSlider', min=0, max=9, marks={i: 'Label {}'.format(i) for i in range(10)}, value=[4, 5], pushable=1, vertical=True, verticalHeight=400 ), dcc.Store(id='SliderDict', data=None), dcc.Store(id='SliderData', data=None), dcc.Store(id='LoadTarget', data=None), dcc.Store(id='CurrentLoad', data=None), dcc.Interval(id='TimelineInterval', interval=250, disabled=False) ], style={'font-family': 'monospace', 'width': '100%', 'white-space': 'pre'} ), html.Div( dcc.Dropdown('BaseSetup', options=[k for k in dummyOptions], placeholder='Select Setup...', style={ 'font-family': 'monospace', }), style={ 'width': '100%', 'float': 'left', 'background-color': '#F5F0F6', 'padding-bottom': '1%' } ), html.Br(), html.Div( #### Dynamic Parts #### [getDynamicOptionTemplate(i, k, 100 / (len(DYNAMIC_OPTIONS)), tab=1) for i, k in enumerate(DYNAMIC_OPTIONS)], #### Dynamic Parts #### ), html.Br(style={'clear': 'left'}), html.Div( [ html.H2('Plot:', id='TimelinePlotDiv'), html.Button(children='Button not active yet', id='TimelinePlotButton', disabled=True) ] ), dcc.Graph( id='TimeLine' )])), dcc.Tab(label='Single view', value='tab2', children=[ html.Div([ html.H2('1) Select commits to compare:'), html.Div( [ dcc.Dropdown('CommitListSingle', options=[k for k in dummyOptions], placeholder='Select Commit...', style={ 'font-family': 'monospace', }) ], style={ 'width': '100%', 'float': 'left', } )], style={ 'width': '100%', 'float': 'left', 'background-color': '#F5F0F6' }), html.Br(), html.Div( [html.H2('2) Select setup to compare:'), dcc.Dropdown('SetupSingle', options=[k for k in dummyOptions], placeholder='Select Setup...', style={ 'font-family': 'monospace', })], style={ 'width': '100%', 'float': 'left', 'background-color': '#F5F0F6', 'padding-bottom': '1%' } ), html.Br(), html.Div( #### Dynamic Parts #### [getDynamicOptionTemplate(i, k, 100 / (len(DYNAMIC_OPTIONS) + 1), tab=2) for i, k in enumerate(DYNAMIC_OPTIONS)], #### Dynamic Parts #### ), html.Div( [html.H2('3) Grouping:'), dcc.RadioItems('GroupingSingle', options=[k for k in dummyOptions], labelStyle={'display': 'block'}, style={ 'font-family': 'monospace', })], style={ 'width': f'{100 / (len(DYNAMIC_OPTIONS) + 1)}%', 'background-color': COLORS[len(DYNAMIC_OPTIONS)], 'float': 'left', 'padding': '.3%', 'box-sizing': 'border-box' } ), html.Br(style={'clear': 'left'}), dcc.Store(id='SingleData', data=None), html.Div( [ html.H2('4) Plot, please wait:', id='PlotTitleSingle'), ] ), dcc.Graph( id='SingleGraph' ), ] ), dcc.Tab(label='Submit Job', value='tab3', children=[ html.Div(children=[ html.H1('Submit Custom Jobs to the worker queue (if logged in).'), # Hide div if not logged in html.Div(id='submissionDiv', children=[ html.H2('1) Job Name:'), dcc.Input(id='CustomJobName', placeholder='CUSTOM JOB NAME', required=True, debounce=False), html.H2('2) Git SHAs to test (1 per line):'), dcc.Textarea(id='CustomSHAList', placeholder='Custom SHAs', required=True, style={'width': '40em', 'height': '6em'}), html.H2('3) Upload Yaml Config OR select from list of available:'), dcc.RadioItems(id='YamlSelect', options=[{'label': 'Upload YAML File', 'value': 'uploaded'}, {'label': 'Existing YAML', 'value': 'existing'}], value='existing', labelStyle={'display': 'inline-block'}), html.Div(id='YamlUploadDiv', children=[ html.H3('Upload YAML config file to use:'), dcc.Upload(id='YamlCustomUpload', multiple=False, children=[], style={ 'width': '100%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', # 'display': 'block' }), ]), html.Div(id='YamlSelectDiv', children=[ html.H3('Choose from existing YAML files'), dcc.Dropdown(id='YamlAvailable', options=[]), ]), html.H2('4) OPTIONAL: Upload Checkpoint file OR select from list of available:'), dcc.RadioItems(id='CheckpointSelect', options=[{'label': 'No Checkpoint', 'value': 'noCheckPoint'}, {'label': 'Upload Checkpoint File', 'value': 'uploaded'}, {'label': 'Existing Checkpoint', 'value': 'existing'}, ], value='noCheckPoint', labelStyle={'display': 'inline-block'}), html.Div(id='CheckpointUploadDiv', children=[ html.H3('Upload Checkpoint File to use:'), dcc.Upload(id='CheckpointCustomUpload', multiple=False, children=[], style={ 'width': '100%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', # 'display': 'block' }), ]), html.Div(id='CheckpointSelectDiv', children=[ html.H3('Choose from existing Checkpoint files'), dcc.Dropdown(id='CheckpointAvailable', options=[]), ]), html.Br(), html.H1('Job Summary:'), html.P(id='JobSummary', children=[]), html.Button('Submit Job', id='submitJob', n_clicks=0), html.P(id='SubmitResponse', children=[], style={'white-space': 'pre-wrap'}), ], style={'display': 'none'}), ], style={'text-align': 'center'} ) ]), # TODO: Show yaml in queue dcc.Tab(label='Current Queue', value='tab4', children=[ html.Div(children=[ html.Br(), # html.Button('Refresh Queue', id='refreshQueue', n_clicks=0), html.Table(id='QueueTable', children=[], style={'margin': '0 auto'}), html.Br(), html.H1('Cancel Job:'), dcc.Input(id='CancelJobName', placeholder='CUSTOM JOB NAME', debounce=True), html.Button('Cancel Job', id='cancelJob', n_clicks=0), html.P(id='CancelResponse', children=[]), html.H1('Failed Jobs:'), html.Table(id='FailureTable', children=[], style={'margin': '0 auto'}), ], style={'text-align': 'center'} ) ]), ]), ], style={ 'font-family': 'sans-serif', })
def dashboard_layout() -> html: """ main dashboard layout """ return html.Div( [ dcc.Location(id="url", refresh=False), html.Div( [ html.Div( [ html.P("Select Parameter:"), dcc.Dropdown( id="select-parameter", options=[{ "label": param.value, "value": param.value } for param in DWDObservationParameterSet], value=DWDObservationParameterSet.PRECIPITATION. value, multi=False, className="dcc_control", ), html.P("Select time resolution:"), dcc.Dropdown( id="select-time-resolution", options=[{ "label": param.value, "value": param.value } for param in DWDObservationResolution], value=DWDObservationResolution.MINUTE_10.value, multi=False, className="dcc_control", ), html.P( "Select period type: [NOW, RECENT, HISTORIC]"), dcc.Dropdown( id="select-period-type", options=[{ "label": param.value, "value": param.value } for param in DWDObservationPeriod], value=DWDObservationPeriod.RECENT.value, multi=False, className="dcc_control", ), html.P("Select weather station:"), dcc.Dropdown( id="select-weather-stations", multi=False, className="dcc_control", ), html.P("Select variable:"), dcc.Loading( id="loading-1", children=[ dcc.Dropdown( id="select-variable", multi=False, className="dcc_control", ), html.Div([], id="hidden-div", style={"display": "None"}), ], ), ], className="pretty_container four columns", ), html.Div( [dcc.Graph(id="sites-map")], className="pretty_container eight columns", ), ], id="header", className="row flex-display", style={"margin-bottom": "25px"}, ), html.Div( [ html.Div( [ html.P("Visualisation of Data", style={"text-align": "center"}), dcc.Graph(id="graph1"), ], className="pretty_container twelve columns", ), ], className="row flex-display", ), html.Div([], id="hidden-div-metadata", style={"display": "None"}), ], id="mainContainer", style={ "display": "flex", "flex-direction": "column" }, )
{%favicon%} {%css%} </head> <body> {%app_entry%} <footer> {%config%} {%scripts%} {%renderer%} </footer> <div>Data Mining Report</div> </body> </html> """ app.layout = html.Div([dcc.Location(id="url", refresh=False), html.Div(id="page-content")]) # Update page # # # # # # # # # @app.callback(Output("page-content", "children"), [Input("url", "pathname")]) def display_page(pathname): if ( pathname == "/cc-travel-report/" or pathname == "/cc-travel-report/overview-datamining" or pathname == "/cc-travel-report/overview-datamining/" ): return layout_datamining_category else: return noPage
def test_devtools_validation_errors(self): app = dash.Dash(__name__) test_cases = { 'not-boolean': { 'fail': True, 'name': 'simple "not a boolean" check', 'component': dcc.Graph, 'props': { 'animate': 0 } }, 'missing-required-nested-prop': { 'fail': True, 'name': 'missing required "value" inside options', 'component': dcc.Checklist, 'props': { 'options': [{ 'label': 'hello' }], 'values': ['test'] } }, 'invalid-nested-prop': { 'fail': True, 'name': 'invalid nested prop', 'component': dcc.Checklist, 'props': { 'options': [{ 'label': 'hello', 'value': True }], 'values': ['test'] } }, 'invalid-arrayOf': { 'fail': True, 'name': 'invalid arrayOf', 'component': dcc.Checklist, 'props': { 'options': 'test', 'values': [] } }, 'invalid-oneOf': { 'fail': True, 'name': 'invalid oneOf', 'component': dcc.Input, 'props': { 'type': 'test', } }, 'invalid-oneOfType': { 'fail': True, 'name': 'invalid oneOfType', 'component': dcc.Input, 'props': { 'max': True, } }, 'invalid-shape-1': { 'fail': True, 'name': 'invalid key within nested object', 'component': dcc.Graph, 'props': { 'config': { 'asdf': 'that' } } }, 'invalid-shape-2': { 'fail': True, 'name': 'nested object with bad value', 'component': dcc.Graph, 'props': { 'config': { 'edits': { 'legendPosition': 'asdf' } } } }, 'invalid-shape-3': { 'fail': True, 'name': 'invalid oneOf within nested object', 'component': dcc.Graph, 'props': { 'config': { 'toImageButtonOptions': { 'format': 'asdf' } } } }, 'invalid-shape-4': { 'fail': True, 'name': 'invalid key within deeply nested object', 'component': dcc.Graph, 'props': { 'config': { 'toImageButtonOptions': { 'asdf': 'test' } } } }, 'invalid-shape-5': { 'fail': True, 'name': 'invalid not required key', 'component': dcc.Dropdown, 'props': { 'options': [{ 'label': 'new york', 'value': 'ny', 'typo': 'asdf' }] } }, 'string-not-list': { 'fail': True, 'name': 'string-not-a-list', 'component': dcc.Checklist, 'props': { 'options': [{ 'label': 'hello', 'value': 'test' }], 'values': 'test' } }, 'no-properties': { 'fail': False, 'name': 'no properties', 'component': dcc.Graph, 'props': {} }, 'nested-children': { 'fail': True, 'name': 'nested children', 'component': html.Div, 'props': { 'children': [[1]] } }, 'deeply-nested-children': { 'fail': True, 'name': 'deeply nested children', 'component': html.Div, 'props': { 'children': html.Div([html.Div([3, html.Div([[10]])])]) } }, 'dict': { 'fail': True, 'name': 'returning a dictionary', 'component': html.Div, 'props': { 'children': { 'hello': 'world' } } }, 'nested-prop-failure': { 'fail': True, 'name': 'nested string instead of number/null', 'component': dcc.Graph, 'props': { 'figure': { 'data': [{}] }, 'config': { 'toImageButtonOptions': { 'width': None, 'height': 'test' } } } }, 'allow-null': { 'fail': False, 'name': 'nested null', 'component': dcc.Graph, 'props': { 'figure': { 'data': [{}] }, 'config': { 'toImageButtonOptions': { 'width': None, 'height': None } } } }, 'allow-null-2': { 'fail': False, 'name': 'allow null as value', 'component': dcc.Dropdown, 'props': { 'value': None } }, 'allow-null-3': { 'fail': False, 'name': 'allow null in properties', 'component': dcc.Input, 'props': { 'value': None } }, 'allow-null-4': { 'fail': False, 'name': 'allow null in oneOfType', 'component': dcc.Store, 'props': { 'id': 'store', 'data': None } }, 'long-property-string': { 'fail': True, 'name': 'long property string with id', 'component': html.Div, 'props': { 'id': 'pink div', 'style': 'color: hotpink; ' * 1000 } }, 'multiple-wrong-values': { 'fail': True, 'name': 'multiple wrong props', 'component': dcc.Dropdown, 'props': { 'id': 'dropdown', 'value': 10, 'options': 'asdf', } }, 'boolean-html-properties': { 'fail': True, 'name': 'dont allow booleans for dom props', 'component': html.Div, 'props': { 'contentEditable': True } }, 'allow-exact-with-optional-and-required-1': { 'fail': False, 'name': 'allow exact with optional and required keys', 'component': dcc.Dropdown, 'props': { 'options': [{ 'label': 'new york', 'value': 'ny', 'disabled': False }] } }, 'allow-exact-with-optional-and-required-2': { 'fail': False, 'name': 'allow exact with optional and required keys 2', 'component': dcc.Dropdown, 'props': { 'options': [{ 'label': 'new york', 'value': 'ny' }] } } } app.layout = html.Div([ html.Div(id='content'), dcc.Location(id='location'), ]) @app.callback(Output('content', 'children'), [Input('location', 'pathname')]) def display_content(pathname): if pathname is None or pathname == '/': return 'Initial state' test_case = test_cases[pathname.strip('/')] return html.Div( id='new-component', children=test_case['component'](**test_case['props'])) self.startServer( app, debug=True, use_reloader=False, use_debugger=True, dev_tools_hot_reload=False, ) for test_case_id in test_cases: self.driver.get('http://localhost:8050/{}'.format(test_case_id)) if test_cases[test_case_id]['fail']: try: self.wait_for_element_by_css_selector( '.test-devtools-error-toggle').click() except Exception as e: raise Exception( 'Error popup not shown for {}'.format(test_case_id)) self.percy_snapshot('devtools validation exception: {}'.format( test_cases[test_case_id]['name'])) else: try: self.wait_for_element_by_css_selector('#new-component') except Exception as e: raise Exception( 'Component not rendered in {}'.format(test_case_id)) self.percy_snapshot( 'devtools validation no exception: {}'.format( test_cases[test_case_id]['name']))
]), html.Div(className='five columns', children=[ dcc.Graph(id='graph-focus'), ]), html.Div(className='five columns', children=[ dcc.Graph(id='graph-distrib'), ]), ]), ]) app.layout = html.Div( [html.Div(id='page-content'), dcc.Location('url', refresh=False)]) def compute_evolution(start, r, full=False): x = start vals = [x] for _ in range(N_COMPUTE): x = r * x * (1 - x) vals.append(x) return vals if full else vals[-KEEP:] INPUT_NAMES = [i.lower().replace("_", "-") for i in DEFAULTS.__dict__]
style={"display": "grid"}, children=[ html.Button(children=[html.A('prediction', href='/success')], n_clicks=0, type='button', style={"margin-top": "10px"}), html.Button(children=[html.A('search', href='/search')], n_clicks=0, type='button', style={"margin-top": "10px"}) ]) ]) # Create success layout layout = html.Div(children=[ dcc.Location(id='url_login_success', refresh=True), html.Label("phone"), dcc.Input(placeholder='Enter your PHONE NUMBER', type='text', id='SEARCH-PHONE', style={"width": "50%"}), html.Button(children='search', n_clicks=0, type='submit', id='search-btn'), dcc.Graph(id='my_graph_s'), html.Div(id='display-value_s') ]) pre_style = { 'whiteSpace': 'pre-wrap', 'wordBreak': 'break-all', 'whiteSpace': 'normal' }
portfolioManagement, feesMins, distributions, newsReviews, ) app = dash.Dash(__name__, meta_tags=[{ "name": "viewport", "content": "width=device-width" }]) server = app.server # Describe the layout/ UI of the app app.layout = html.Div( [dcc.Location(id="url", refresh=False), html.Div(id="page-content")]) # Update page @app.callback(Output("page-content", "children"), [Input("url", "pathname")]) def display_page(pathname): if pathname == "/dash-financial-report/price-performance": return pricePerformance.create_layout(app) elif pathname == "/dash-financial-report/portfolio-management": return portfolioManagement.create_layout(app) elif pathname == "/dash-financial-report/fees": return feesMins.create_layout(app) elif pathname == "/dash-financial-report/distributions": return distributions.create_layout(app) elif pathname == "/dash-financial-report/news-and-reviews":
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')
__**Glossary**__\n **Total Carbon Footprint**: Carbon Footprint estimation based on consumer expenditure and consumption\n **Degree**: Average number of degrees attained\n **Rooms per Household**: Average number of rooms per household\n **Home Ownership**: Average number of homes owned\n **Vehicle Ownership**: Average number of vehicles owned\n ''', style={"font-size":"12px", "margin-top":"40px"} ), html.H6("Created by Viren Khandal", className="display-9", style={"font-family":"Candara", "font-size":"10px", "text-align":"center", "margin-left":"auto", "margin-right":"auto", "left":"0", "right":"0", "position":"absolute", "bottom":"0"}) ], style=SIDEBAR_STYLE ) app.layout = html.Div([ dcc.Location(id="url"), html.Div(style=SLIDER_STYLE, children=[ dcc.Slider( id='my_slider', min=2010, max=2017, step=1, value=2014, marks={ 2010: '2010', 2011: '2011', 2012: '2012', 2013: '2013', 2014: '2014', 2015: '2015', 2016: '2016',
import dash_html_components as html import dash_core_components as dcc from dash.dependencies import Input, Output, State from flask import session from app import app, User from flask_login import login_user, current_user from werkzeug.security import check_password_hash # error = '' # if 'error' in session: # error = session.get('error') layout = dbc.Container( [ dcc.Location(id='url_login', refresh=True), html.Div( [ html.Div( [ html.Div([ html.Div([ html.Img(src='/assets/dash-logo-stripe.svg', className='brand_logo'), ], className="brand_logo_container") ], className="d-flex justify-content-center"), html.Div( [ html.Form([
]) ]), html.Div([ dbc.Row([ dbc.Col(dcc.Graph(id="rg1", figure=rg1), ), dbc.Col(dcc.Graph(id="rg2", figure=rg2)) ]) ]), ], style={"margin-left": "10rem"}) # ___________________________________________________ LAYOUT _______________________________________________________________ app.layout = html.Div( [ dcc.Location(id="url"), # refresh = False html.Div(sidebar("none"), style={"display": "none"}), main_page(app, True), html.Div(content_us(app, False), style={"display": "none"}), ], id="page-content") hoja_principal = html.Div([ html.Div(sidebar("none"), style={"display": "none"}), main_page(app, True), html.Div(content_us(app, False), style={"display": "none"}), ]) hoja_1_layout = html.Div([ sidebar("block"), resumen,
iris = px.data.iris() external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"] # ➊ app = dash.Dash( __name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True, ) # レイアウト app.layout = html.Div( [ dcc.Location(id="my_location"), html.Div(id="show_location1", style={"height": 600}), html.Br(), dcc.Link("home", href="/"), html.Br(), dcc.Link("/graph", href="/graph"), html.Br(), dcc.Link("/table", href="/table"), ], style={"textAlign": "center"}, ) # ページごとのコンテンツの作成 # homeページ作成 home = html.H1("irisデータ")
import dash_core_components as dcc import dash_html_components as html import dash_bootstrap_components as dbc from dash import no_update from dash.dependencies import Input, Output, State from app import app, User from flask_login import login_user from werkzeug.security import check_password_hash layout = html.Div([ dcc.Location(id='login-url',refresh=True), dbc.Container( [ dbc.Row( dbc.Col( dbc.Card( [ html.H4('An Orange Company in the Future, Inc.'), html.Hr(), html.H5('Login to your account'), dbc.Input(id='login-email',placeholder='Email (try "*****@*****.**")'), dbc.Input(id='login-password',placeholder='Password (try "password123")',type='password', className='mt-2'), dbc.Button('Login',id='login-button',color='success',block=True, className='mt-4'), ], body=True, className='shadow-lg' ), md=6, align="start" ), justify='left',
dbc.NavItem([ dbc.Button(dbc.NavLink("Wordclouds ", href='/apps/wordclouds'), className="lg mx-2", color="primary") ]) ], brand="BookMeIn Analytics", brand_href="welcome.layout", fluid=True, dark=True, color="primary") ], width=12) ]), dcc.Location(id="url", refresh=False, pathname="/apps/welcome"), html.Div(id='page-content', children=[]), dbc.Row( dbc.Col( html.Div( "(c) CAD Group 6 - Keele University - Built by Dash on Flask", style={"text-align": "center"}))) ]) @app.callback(Output('page-content', 'children'), [Input('url', 'pathname')]) def display_page(pathname): if pathname == '/apps/seminars': return seminars.layout if pathname == '/apps/exhibitions': return exhibitions.layout
import region_trends_app from base_app import app, server base_layout = html.Div( className="container-fluid", children=[ html.Div(className="row", style={"margin-top": "20px"}, children=[ html.Div(id="left-sidebar", className="col-sm-3 bg-light sidebar"), html.Div(id="main-content", className="col-sm-9") ]) ]) app.layout = html.Div([dcc.Location(id='url', refresh=False), base_layout]) with open(os.path.join(app._assets_folder, "index.html")) as f: app.index_string = f.read() @app.callback( [Output('left-sidebar', 'children'), Output('main-content', 'children')], [Input('url', 'pathname')]) def display_page(pathname): if pathname == '/apps/compare_members': return compare_members_app.left_controls, compare_members_app.main_content elif pathname == '/apps/compare_participation': return participation_app.left_controls, participation_app.main_content elif pathname == '/apps/compare_party': return compare_party_app.left_controls, compare_party_app.main_content
header = dbc.Navbar( dbc.Container([ dbc.NavbarBrand("Dashbord", href="/home"), dbc.Nav([ dbc.NavItem(dbc.NavLink('Use this section after login-')), dbc.NavItem(dbc.NavLink('Change Password', href='/profile')), dbc.NavItem(dbc.NavLink('Login', id='user-action', href='Login')) ]) ]), className="mb-5", ) app.layout = html.Div([ header, html.Div([dbc.Container(id='page-content')]), dcc.Location(id='base-url', refresh=False) ]) @app.callback(Output('page-content', 'children'), [Input('base-url', 'pathname')]) def router(pathname): ''' routes to correct page based on pathname ''' print('routing shit to', pathname) # auth pages if pathname == '/login': if not current_user.is_authenticated: return login.layout() elif pathname == '/register':