def _wrap_full_layout(self, layout): ddk = import_ddk() return ddk.App( children=layout, **filter_kwargs(self.app_kwargs, theme=self.theme), )
def serv_layout(): return html.Div([ dcc.Location(id='url', refresh=False), ddk.App(style={'background-color': 'transparent'}, children=[ ddk.Block(width=100, style={ 'height': '100vh', 'width': '100%', 'text-align': 'center', 'padding': '0' }, children=ddk.Block( width=100, style={ 'margin': '0', 'width': '100%' }, children=html.Div(id='page-content'))), html.Div(id='hidden-div') ]) ])
# id='portfolio-tabs', # value='create-report', # children=[ # dcc.Tab(value='historical', label='Historical View'), # dcc.Tab(value='predicted', label='Predicted View'), # # I need to figure out why I get a console error about this not being present in layout even though suppress callback exeptions is on. # dcc.Tab(value='create-report', label='Create Report', children=html.Button(id='portfolio-create-report-button', n_clicks=0, style={'display': 'none'})) # ] # ), # html.Div(id='portfolio-tabs-content') # ]) ]) # Standard Dash app code below app.layout = ddk.App(theme=theme, children=[get_home()]) @app.callback(Output('output', 'children'), [Input('portfolio-table', 'data')]) def print_data(data): pprint(data) y = ''' ``` {} ``` '''.format(data) return y if __name__ == '__main__': app.run_server(debug=True, port=8092)
app.layout = ddk.App([ ddk.Header([ ddk.Logo(src=app.get_asset_url('logo.png')), ddk.Title('Dash Enterprise Sample Application'), ]), ddk.Row(children=[ ddk.Card(children=ddk.Graph(figure={ 'data': [{ 'x': [1, 2, 3, 4], 'y': [4, 1, 6, 9], 'line': { 'shape': 'spline' } }] }, )), ]), ddk.Row(children=[ ddk.Card(width=50, children=ddk.Graph(figure={ 'data': [{ 'x': [1, 2, 3, 4], 'y': [4, 1, 6, 9], 'line': { 'shape': 'spline' } }] }, )), ddk.Card(width=50, children=ddk.Graph(figure={ 'data': [{ 'x': [1, 2, 3, 4], 'y': [4, 1, 6, 9], 'line': { 'shape': 'spline' } }] }, )), ]) ])
ddk.App( style={'background-color': 'transparent'}, children=[ ddk.Header( style={ 'height': '7vh', 'background-color': '#163d47', 'opacity': '1', 'margin': '0px' }, children=[ ddk.Block( width=33, style={'text-align': 'left'}, children=[ html.Div(id='placeholder1', style={"display": "none"}, children=layouts.sound(0)), html.Div(id='on-content', style={'display': 'none'}), html.Div(id='off-content', style={'display': 'none'}), html.Button(children="TURN ON", style={ 'text-align': 'center', "background-color": "palegreen", "border-radius": "20px", 'margin': '10px', 'font-size': '15px' }, id='On_Avtomat_btn', n_clicks=0), html.Button( children="ALERT", style={ 'text-align': 'center', # 'max-width': '100px', "background-color": "tomato", "border-radius": "20px", 'margin': '10px', 'font-size': '15px' }, id='Off_Avtomat_btn', n_clicks=0) ]), ddk.Block(width=33, style={'text-align': 'center'}, children=[ html.Button(children="REFRESH BALANCE", style={ 'text-align': 'center', "background-color": "palegreen", "border-radius": "20px", 'margin': '10px', 'font-size': '15px' }, id='Ref_balance_btn', n_clicks=0), html.Div(id='BALANCE-content', style={'display': 'none'}), ]), ddk.Block(width=33, style={'text-align': 'right'}, children=[ dcc.Link('ГЛАВНАЯ', style={ 'color': 'azure', 'margin': '10px' }, href='/'), dcc.Link('REGIM 2', style={ 'color': 'azure', 'margin': '10px' }, href='/regim2'), dcc.Link('REGIM 3', style={ 'color': 'azure', 'margin': '10px' }, href='/regim3'), dcc.Link('КЛЮЧИ', style={ 'color': 'azure', 'margin': '10px' }, href='/keys') ]) ]), html.Div(id='page-content'), ])
app.layout = ddk.App([ ddk.Header([ ddk.Logo(src=app.get_asset_url('logo.png'), style={ 'max-height': 100, 'width': 'auto' }), ddk.Title('TELONAS2'), ddk.SectionTitle('', id='final_date'), html.Button('Refresh', style={'float': 'right'}, id='refresh', n_clicks=0), ]), ddk.Block( children=[ dcc.Tabs(id='selected-tab', value='load', children=[ dcc.Tab(label="Load", value='load', children=[ddk.Card(width=100, children=[ dcc.Loading(id='load_loader', children=[ ddk.Graph(id="load_plot", config=graph_config)]), ] ) ] ) ] ), dcc.Tab(label="Profiles", value='profiles', children=[ddk.Card(width=100, children=[ dcc.Loading(id='profile_loader', children=[ ddk.Graph(id="profile_plot", config=graph_config)]) ] ) ] ) ] ), ddk.Card(children=[ ddk.Block(width=6, children= [ html.Img(src='https://www.pmel.noaa.gov/sites/default/files/PMEL-meatball-logo-sm.png', height=100, width=100), ]), ddk.Block(width=90, children=[ html.Div(children=[ dcc.Link('National Oceanic and Atmospheric Administration', href='https://www.noaa.gov/'), ]), html.Div(children=[ dcc.Link('Pacific Marine Environmental Laboratory |', href='https://www.pmel.noaa.gov/'), dcc.Link(' Engineering', href='https://www.pmel.noaa.gov/edd/') ]), html.Div(children=[ dcc.Link('*****@*****.**', href='mailto:[email protected]') ]), html.Div(children=[ dcc.Link('DOC |', href='https://www.commerce.gov/'), dcc.Link(' NOAA |', href='https://www.noaa.gov/'), dcc.Link(' OAR |', href='https://www.research.noaa.gov/'), dcc.Link(' PMEL |', href='https://www.pmel.noaa.gov/'), dcc.Link(' Privacy Policy |', href='https://www.noaa.gov/disclaimer'), dcc.Link(' Disclaimer |', href='https://www.noaa.gov/disclaimer'), dcc.Link(' Accessibility', href='https://www.pmel.noaa.gov/accessibility') ]) ]) ]) ])
import dash_core_components as dcc from dash.dependencies import Input, Output import plotly.graph_objs as go import requests from datetime import datetime as dt r = requests.get("https://financialmodelingprep.com/api/v3/quote/BTCUSD") time = [] price = [] app = dash.Dash() server = app.server app.layout = ddk.App(children=[ ddk.Card(ddk.Graph(id="graph")), dcc.Interval(id="liveupdate", interval=10000, n_intervals=0), ]) @app.callback(Output("graph", "figure"), [Input("liveupdate", "n_intervals")]) def gaph_update(n): price.append( requests.get("https://financialmodelingprep.com/api/v3/quote/BTCUSD"). json()[0]["price"]) time.append( dt.utcfromtimestamp( int( requests.get( "https://financialmodelingprep.com/api/v3/quote/BTCUSD"). json()[0]["timestamp"])).strftime('%H:%M:%S'))
app.layout = ddk.App( show_editor=False, # setting to True allows styling after build children=[ ddk.Header([ ddk.Logo( "assets/6synctLogoBlack.png", style={ "height": "30px", "margin-right": "0px", "width": "auto", }, ), ddk.Title('NRC IRAP - Corporate Funding in Canada from 2018-2020'), ]), # end of ddk.Header ddk.Block( # left-hand column width=20, children=[ dcc.Tabs([ dcc.Tab( label='Map Filters', children=[ ddk.ControlCard( id='map-controls', children=[ ddk.CardHeader(title='Search for Funding'), ddk.ControlItem(dcc.Dropdown( id='province-dropdown', options=[{ 'label': i, 'value': i } for i in province_list], multi=True, clearable=False, value=province_list), label='Province'), ddk.ControlItem(dcc.Dropdown( id='naics-dropdown', options=[{ 'label': i, 'value': i } for i in naics_sect_list], multi=True, value=['Manufacturing'], clearable=False, ), label='NAICS Sector'), ddk.ControlItem(dcc.Dropdown( id='year-dropdown', options=[{ 'label': i, 'value': i } for i in year_list], multi=True, clearable=False, value=['2019_20 Only']), label='Year'), ddk.ControlItem( dcc.Dropdown( id='donor-dropdown', options=[{ 'label': i, 'value': i } for i in donor_list], multi= True, # allow for multiple selections value= donor_list, # default value on app load clearable=False, ), label='Donor Program'), ddk.ControlItem( dcc.Input( id='project-input', maxLength=20, multiple=False, placeholder="enter keyword", type="text", disabled=True # DISABLED... for now! ), label='Project Search') ]), # end of map-controls ControlCard ]), # end of map-controls tab dcc.Tab( label='About', children=[ ddk.Card( id='app-description', children=[ ddk.CardHeader( title= 'How can this data be used and what questions can it answer?' ), dcc.Markdown(''' 1. How many companies have received federal funding (how many are new in 2019_20)? 2. What is the total annual federal budget for IRAP funding? 3. What is the National/Local budget for funding? What are the trends from year to year? 4. How is the funding distributed? (Is it based on populations? Industry type? other factors?) 5. How novel is my grant request compared to already funded projects? 6. Which federal program should I apply to? 7. How much funding should I apply for (compared to other similarly sized companies, research opportunities, jurisdictional budget limits)? '''), ddk.CardFooter("Source Information:"), dcc.Link( 'Data Source', href='https://open.canada.ca/', ), html.Br(), dcc.Link( 'Available under open gov. license', href= 'http://open.canada.ca/en/open-government-licence-canada', ), ] ), # end of app-description Card and it's children ]), # end of About tab and it's children ]), # end of dcc.Tabs() and it's children ] # end of left-hand column - children ), # end of left-hand column ddk.Block( # right-hand column width=80, children=[ ddk.Card( # map of canada padding=0, children=[ ddk.CardHeader( title='Geographic Representation of Funding'), ddk.Graph(id='map-graph'), ]), ddk.Card( # Companies Dataframe Table children=[ ddk.CardHeader( title='Search by Company or Project Keyword'), ddk.DataTable( id='companies-table', columns=[{ "name": i, "id": i } for i in df[[ 'Company_Name', 'Project', '$_Amount' ]].columns], fill_width=False, filter_action='native', #filter_query='' sort_action='native', page_size=7, sort_mode='multi', style_header={ "fontWeight": "bold", "textTransform": "capitalize" }, style_cell_conditional=[ { 'if': { 'column_id': '$_Amount' }, 'width': '10%' }, { 'if': { 'column_id': 'Company_Name' }, 'width': '20%' }, { 'if': { 'column_id': 'Project' }, 'width': '50%' }, ], style_cell={ 'whiteSpace': 'normal', #'height': 'auto', }, style_data_conditional=[{ "if": { "row_index": "even" }, "backgroundColor": "var(--report_background_page)", }], ), ]), ddk.Card( width=50, # funding treemap children=[ ddk.CardHeader(title='Total Funding'), ddk.Graph(id='treemap') ]), ddk.Card( width=50, # donor graph children=[ ddk.CardHeader(title='Funding by Donor'), ddk.Graph(id='donor-graph') ]), ddk.Card( # bar graph children=[ ddk.CardHeader( title='Funding Commitments - by Start Date (YR/Q)' ), ddk.Graph(id='timeline-graph'), ]), ] # end of right-hand column - children ), # end of right-hand column ] # end app.layout - children ) # end of app.layout
app.layout = ddk.App(children=[ ddk.Block( ddk.ControlCard( width=100, rounded=True, children=[ ddk.ControlItem(children=[ dcc.Dropdown( id="dropdown", options=iex.companies, value="AAPL"), ddk.ControlItem(width=50, children=[ dcc.DatePickerRange( id="datepicker", start_date="2015-01-01", end_date="2016-01-01", display_format="YYYY-MM-DD") ]) ]) ], )), ddk.Block(children=[ ddk.DataCard(id="dc1", width=25, label="Dividend Yield", value="-"), ddk.DataCard(id="dc2", width=25, label="Peg Ratio", value="-"), ddk.DataCard(id="dc3", width=25, label="Beta", value="%"), ddk.DataCard(id="dc4", width=25, label="Country", value="-"), ]), ddk.Block(children=[ ddk.Card(rounded=True, children=[ ddk.Graph( id="graph", figure={ "data": [ go.Scatter(x=iex.get_prices( "AAPL", "2015-01-01", "2016-01-01").index, y=iex.get_prices( "AAPL", "2015-01-01", "2016-01-01")["Adj Close"]) ], "layout": go.Layout(xaxis={'showgrid': False}, yaxis={'showgrid': False}) }) ]) ]) ])
import dash from dash import dcc import dash_design_kit as ddk app = dash.Dash(__name__) app.layout = ddk.App([ ddk.Header([ ddk.Menu(dcc.Link(page["name"], href=page["path"])) for page in dash.page_registry ]), dash.page_container, ]) if __name__ == "__main__": app.run_server(debug=True)
layout = ddk.App( [ ddk.Header( [ ddk.Logo(src=app.get_asset_url('trex.png')), ddk.Title("Dino Fossil Data"), ] ), dbc.Row( children=[ dbc.Col( dbc.Card( dbc.CardBody( children=[ html.Label('Period', style={'fontSize':30, 'textAlign':'center'}), dcc.Dropdown( id='period', options=[ {"label": i, "value": i} for i in Period_list ], multi=True, value= Period_list, clearable=True, searchable=True, ), html.Div(id="Period-dropdown"), html.Label('Dino Type', style={'fontSize':30, 'textAlign':'center'}), dcc.Dropdown(id='display-type', options=[], multi=True, value=[]), ] ) ), width=8, ), ddk.Card( width=24, children=[ ddk.CardHeader(title='Total Fossils Found Across All Periods'), ddk.DataCard(value=totalFossilsFounds, style={'width':'fit-content'}), ] ), # ddk.Card( # width=24, # children=[ # ddk.CardHeader(title='Total Fossils Found'), # ddk.DataCard( # id='total-fossils', # value='', # style={'width':'fit-content'}), # ] # ), # ddk.Card( # width=40, # children=[ # dcc.Graph(figure=px.scatter_geo(df2, lat='Latitude', lon='Longitude', color="Period", size='LatLongPeriodCount', # hover_name="Country").update_geos(projection_type="orthographic")), # ], # ), ddk.Card( width=43, children=[ ddk.CardHeader(title='Which Country Fossils Were Found'), dcc.Graph(id='display-map', figure={}), ],), ddk.Card( width=56, children=[ ddk.CardHeader(title='Total Found by Country'), ddk.Graph(id='display-scatter', figure={}), ], ), # px.scatter(df, x="MillionsYears", y=len(df.axes[0]), color="Period"), ], ), ] ),
}] app = dash.Dash() app.layout = ddk.App( show_editor=True, children=[ ddk.ControlCard( width=50, children=[ ddk.ControlItem(children=[ dcc.Dropdown(id="dd1", options=symbols, value="BTCUSD") ]) ]), ddk.ControlCard( width=25, children=[ ddk.ControlItem(children=[ dcc.Dropdown(id="dd2", options=time, value="15min") ]) ]), ddk.ControlCard( width=25, children=[ ddk.ControlItem( children=[dcc.Input(id="Input_Value", value=5)]) ]), ddk.Card(children=[ddk.Graph(id="graph")]) ]) @app.callback(Output("graph", "figure"), [
app.layout = ddk.App(children=[ ddk.Header(children=[ dcc.Link( href=app.get_relative_path("/"), children=[ddk.Logo(src=app.get_relative_path("/assets/hnts.png"))], ), ddk.Title("Daily Standup"), html.Div([ html.P( "Powered by", style={ "float": "left", 'fontSize': 10, "margin-bottom": "0px" }, ), html.Img(src=app.get_asset_url("his.png"), style={ "width": "130px", "float": "left", "margin-top": "0px", "margin-left": "5px" }) ]), ], style={"backgroundColor": "var(--accent_positive)"}), ddk.Sidebar([ ddk.Menu([ dcc.Link(href=app.get_relative_path('/'), children='Home'), dcc.Link(href=app.get_relative_path('/census'), children='Census'), dcc.Link(href=app.get_relative_path('/VisitPlanning'), children='VisitPlanning'), dcc.Link(href=app.get_relative_path('/orders'), children='Orders'), dcc.Link(href=app.get_relative_path('/authorizations'), children='Authorizations'), dcc.Link(href=app.get_relative_path('/bd'), children='Business Development'), dcc.Link(href=app.get_relative_path('/qa'), children='Quality Assurance'), dcc.Link(href=app.get_relative_path('/billing'), children='Billing'), dcc.Link(href=app.get_relative_path('/OrderProcessing'), children='Order Processing'), ]), ]), dcc.Location(id='url', refresh=False), ddk.SidebarCompanion(html.Div(id='content')) ], show_editor=True)
dash_app.layout = html.Div([ dcc.Location(id='url', refresh=False), ddk.App( style={'background-color': 'transparent'}, children=[ ddk.Header( style={ 'height': '7vh', 'background-color': '#163d47', 'opacity': '1', 'margin': '0' }, children=[ ddk.Logo(src='../assets/logo.gif'), ddk.Block( style={'text-align': 'right'}, children=[ dcc.Link('Главная', style={ 'color': 'azure', 'margin': '10px' }, href='/'), # dcc.Link('Карточка Матча', style={'color': '#fff', 'margin': '10px'}, href='/match_card'), # dcc.Link('МАТЧИ', style={'color': '#fff', 'margin': '10px'}, href='/all_matches') ]) ]), html.Div(id='page-content'), html.Div(id='table-container'), ]) ])
app.layout = ddk.App([ ddk.Header([ ddk.Logo(src=app.get_asset_url('logo.png')), ddk.Title(get_configuration()), menu ]), ddk.Block(width=30, children=[ ddk.ControlCard(controls), ddk.ControlCard(controls), ddk.ControlCard(controls), ]), ddk.Block(width=70, children=[ ddk.Row([ ddk.Card(width=50, children=dcc.Markdown( textwrap.dedent(''' Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, **expect similar results next week** ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. '''))), ddk.DataCard(value='1.17', label='Power', trace_x=ddk.datasets.timeseries().x1, trace_y=ddk.datasets.timeseries().y1, width=25), ddk.DataCard(value='5.4', label='Efficiency', trace_x=ddk.datasets.timeseries().x2, trace_y=ddk.datasets.timeseries().y2, width=25), ]), ddk.Card(width=100, children=ddk.Graph( figure={ 'data': [{ 'x': [1, 2, 3, 4], 'y': [4, 1, 6, 9], 'line': { 'shape': 'spline' } }] })), ddk.Card(width=50, children=ddk.Graph( figure={ 'data': [{ 'x': [1, 2, 3, 4], 'y': [4, 1, 6, 9], 'line': { 'shape': 'spline' } }] })), ddk.Card(width=50, children=ddk.Graph( figure={ 'data': [{ 'x': [1, 2, 3, 4], 'y': [4, 1, 6, 9], 'line': { 'shape': 'spline' } }] })), ]) ])
import dash import dash_design_kit as ddk import plotly.express as px import pandas as pd app = dash.Dash(__name__) server = app.server # expose server variable for Procfile df = pd.DataFrame({ "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], "Amount": [4, 1, 2, 2, 4, 5], "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] }) fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group") app.layout = ddk.App( show_editor=True, children=[ ddk.Header([ddk.Title('Hello Dash')]), ddk.Card(children=[ ddk.CardHeader( title='Dash: A Web application framework for Python.'), ddk.Graph(figure=fig) ]) ])