def opponent_img(link, f_name, l_name): return [ html.Div(className="op-name", children=[html.H2(f_name), html.H2(l_name)]), html.Img(className="op-img", src=link) ]
import pandas as pd # Read in the data from Excel df = pd.read_excel( "https://github.com/chris1610/pbpython/blob/master/data/salesfunnel.xlsx?raw=True" ) # Get a list of all the avilable managers mgr_options = df["Manager"].unique() # Create the app app = dash.Dash() # Populate the layout with HTML and graph components app.layout = html.Div([ html.H2("Sales Funnel Report"), html.Div([ dcc.Dropdown(id="Manager", options=[{ 'label': i, 'value': i } for i in mgr_options], value='All Managers'), ], style={ 'width': '25%', 'display': 'inline-block' }), dcc.Graph(id='funnel-graph'), ])
# Enter your code below. Make sure you have correct formatting. html.H1('US Domestic Airline Flights Performance', style={ 'textAlign': 'center', 'color': '#503D36', 'font-size': 24 }), # REVIEW2: Dropdown creation # Create an outer division html.Div([ # Add an division html.Div( [ # Create an division for adding dropdown helper text for report type html.Div([ html.H2('Report Type:', style={'margin-right': '2em'}), ]), # TASK2: Add a dropdown # Enter your code below. Make sure you have correct formatting. dcc.Dropdown(id='input-type', options=[{ 'label': 'Yearly Airline Performance Report', 'value': 'OPT1' }, { 'label': 'Yearly Airline Delay Report', 'value': 'OPT2' }], placeholder='Select a report type', style={ 'width': '80%', 'padding': '3px',
def layout(self): return html.Div([ dbc.Row([ make_hideable( dbc.Col([html.H2('Feature Importances:')]), hide=self.hide_title), ]), dbc.Row([ make_hideable( dbc.Col([ dbc.FormGroup([ dbc.Label("Importances type:"), dbc.RadioItems( options=[ {'label': 'Permutation Importances', 'value': 'permutation'}, {'label': 'SHAP values', 'value': 'shap'} ], value=self.importance_type, id='importances-permutation-or-shap-'+self.name, inline=True, ), ], id='importances-permutation-or-shap-form-'+self.name), dbc.Tooltip("Select Feature importance type: \n" "Permutation Importance: How much does performance metric decrease when shuffling this feature?\n" "SHAP values: What is the average SHAP contribution (positive or negative) of this feature?", target='importances-permutation-or-shap-form-'+self.name), ]), self.hide_type), make_hideable( dbc.Col([ html.Label('Depth:', id='importances-depth-label-'+self.name), dcc.Dropdown(id='importances-depth-'+self.name, options = [{'label': str(i+1), 'value':i+1} for i in range(self.explainer.n_features(self.cats))], value=self.depth), dbc.Tooltip("Select how many features to display", target='importances-depth-label-'+self.name) ], md=3), self.hide_depth), make_hideable( dbc.Col([ dbc.FormGroup( [ dbc.Label("Grouping:", id='importances-group-cats-label-'+self.name), dbc.Tooltip("Group onehot encoded categorical variables together", target='importances-group-cats-label-'+self.name), dbc.RadioButton( id='importances-group-cats-'+self.name, className="form-check-input", checked=self.cats), dbc.Label("Group Cats", html_for='importances-group-cats-'+self.name, className="form-check-label"), ], check=True, id='importances-group-cats-form-'+self.name), ]), self.hide_cats), make_hideable( dbc.Col([self.selector.layout() ], width=2), hide=self.hide_selector) ], form=True), dbc.Row([ dbc.Col([ dcc.Loading(id='importances-graph-loading-'+self.name, children=dcc.Graph(id='importances-graph-'+self.name, config=dict(modeBarButtons=[['toImage']], displaylogo=False))), ]), ]), ])
""", className='mb-4'), dcc.Slider(id='OverallQual', min=0, max=10, step=1, marks={n: str(n) for n in range(0, 11, 1)}, className='mb-2'), ], md=4, ) column2 = dbc.Col([ html.H2('Predicted sales price:', className='mb-5'), html.Div(id='prediction-content', className='lead') ]) @app.callback( Output('prediction-content', 'children'), [ Input('total_sf', 'value'), Input('year', 'value'), Input('OverallQual', 'value') ], ) def predict(total_sf, year, OverallQual): # total_sf mean_row = [X[i].mean() for i in X if i != 'TotalSF']
"value": col } for col in foodData_df["Food"].unique()], multi=True), dbc.FormText("Tip: do not include restaurant names "), ]), dbc.Button("Submit", id='submitC', n_clicks=0, color="success"), ]))), html.Br(), dbc.Row([ dbc.Col(table), html.Br(), ]), html.Br(), dbc.Row( [dbc.Col((dbc.Alert(html.H2(id="sum-calories"), color="primary")))]) ]) ####################################################################################################################### # Build BMI Chart bmi_card = dbc.Card([ dbc.CardImg( src="https://sfc-mma.com/wp-content/uploads/2019/11/bmi-featured.png"), ], ) ####################################################################################################################### # Build the BMI and BMR results table which will be displayed row1 = html.Tr(
from .models import Result from .tasks import slow_loop EXPLAINER = """ This app demonstrates asynchronous execution of long running tasks in Dash using Redis and RQ. When you type text in the box below and click on the 'Upper case' button, the text will be converted to upper case character by character (with a time delay in each iteration of the loop). An interval checks periodically for completion of the task, and also updates a progress bar in the UI to inform the user of the progress being made. """ app.layout = dbc.Container([ dcc.Store(id="store"), dcc.Interval(id="interval", interval=500), html.H2("Redis / RQ demo", className="display-4"), html.P(EXPLAINER), html.Hr(), dbc.Textarea(id="text", className="mb-3"), dbc.Button("Upper case", id="button", color="primary", className="mb-3"), dbc.Collapse(dbc.Progress(id="progress", className="mb-3"), id="collapse"), html.P(id="output"), ]) @app.callback( Output("store", "data"), [Input("button", "n_clicks")], [State("text", "value")], ) def submit(n_clicks, text):
app = dash.Dash() server = app.server # Layout of Dash App app.layout = html.Div(children=[ html.Div( className="row", children=[ # Column for user controls html.Div( className="four columns div-user-controls", children=[ html.Img(className="logo", src=app.get_asset_url("dash-logo-new.png")), html.H2("DASH - UBER DATA APP"), html. P("""Select different days using the date picker or by selecting different time frames on the histogram."""), html.Div( className="div-for-dropdown", children=[ dcc.DatePickerSingle( id="date-picker", min_date_allowed=dt(2014, 4, 1), max_date_allowed=dt(2014, 9, 30), initial_visible_month=dt(2014, 4, 1), date=dt(2014, 4, 1).date(), display_format="MMMM D, YYYY", style={"border": "0px solid black"}, )
html.H4(), html.H5("None", className="card-subtitle", id='water-consumption'), html.H4(), html.H5("None", className="card-subtitle", id='water-cost'), ]), color="primary", inverse=True) # Create months for slider month_array = np.arange(1, 13, 1) # Define website layout app.layout = dbc.Container( [ html.H1("OK Bloomer"), html.H2("A Decision Support Tool for Greenhouse Design"), html.Hr(), html.H2("User Inputs:"), dbc.Row([ dbc.Col(controls2, md=2), dbc.Col(controls3, md=2), dbc.Col(controls4, md=3), dbc.Col(controls1, md=2), dbc.Col( html.Img(src='data:image/png;base64,{}'.format(test_base64)), md=2), ], ), html.Hr(), html.H2("Simulation Outputs:"), dbc.Row([ dbc.Col(id='lighting_card', children=[lighting_card], md=6),
justify="center", no_gutters=True ), dbc.Row( [ dbc.Col( [ ], md=1, ), dbc.Col( [ dbc.FormGroup( [ html.H2("Sectors"), dbc.Checklist( options=[ {"label": "Consumer Discretionary & Staples", "value": 0}, {"label": "Energy", "value": 1}, {"label": "Financials", "value": 2}, {"label": "Health Care", "value": 3}, {"label": "Industrials", "value": 4}, {"label": "Information Technology", "value": 5}, {"label": "Materials", "value": 6}, {"label": "Real Estate", "value": 7}, {"label": "Telecommunication Services", "value": 8}, {"label": "Utlities", "value": 9}, ], value=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9], id="checklist-sectors",
'title': 'Contagios por Covid 19', } }), dcc.Graph(id='example2', figure={ 'data': [{ 'x': df['Region'], 'y': df['Casos nuevos totales'], 'type': 'bar', 'name': 'Casos nuevos' }], 'layout': { 'title': 'Casos Nuevos Covid 19' } }), html.H2(children='Datos COVID-19 por Pais'), html.Div(children=[ html.Div(children='Ingrese pais'), dcc.Input(id='input', value='Ej: Chile', type='text'), html.Div(id='output-graph') ]) ]) #LEER DATOS DEL TEXTBOX Y USARLOS PARA MOSTRAR DATOS DEL DATAFRAME #EL CALLBACK CUANDO ES USADO, ACTIVA AUTOMATICAMENTE LA FUNCION UPDATE_VALUE @app.callback( Output(component_id='output-graph', component_property='children'), [Input(component_id='input', component_property='value')]) def update_value(input_data): return dcc.Graph(
def execute(self): """Execute the link. :returns: status code of execution :rtype: StatusCode """ settings = process_manager.service(ConfigObject) ds = process_manager.service(DataStore) # --- your algorithm code goes here self.logger.debug('Now executing link: {link}.', link=self.name) app = dash.Dash( __name__, assets_folder=self.assets_folder, ) figure_childs = du.figure_grid(len(self.figures), self.figures, layout_kwargs=self.layout_kwargs) app.layout = html.Div([ html.Div([ du.row([ du.column([ html.H1(self.app_title), *self.controls, html.H2('Filter by:'), *self.filter_controls ], className="two columns"), du.column(figure_childs, className='ten columns'), ]) ]) ]) # Make the callbacks -- This needs to be done manually for each control! # FIGURE 1 @app.callback(Output('fig_0', 'figure'), [ Input('dropdown_0', 'value'), Input('slider_0', 'value'), Input('filter_dropdown', 'value') ]) def update_fig1(col, bins, filter): return du.make_histogram(ds[self.read_key], col, bins, filter, self.layout_kwargs) # FIGURE 2 @app.callback(Output('fig_1', 'figure'), [ Input('dropdown_1', 'value'), Input('slider_1', 'value'), Input('filter_dropdown', 'value') ]) def update_fig2(col, bins, filter): return du.make_histogram(ds[self.read_key], col, bins, filter, self.layout_kwargs) # FIGURE 3 @app.callback(Output('fig_2', 'figure'), [ Input('dropdown_2', 'value'), Input('dropdown_3', 'value'), Input('filter_dropdown', 'value') ]) def update_fig3(x, y, filter): return du.make_scatter(ds[self.read_key], x, y, filter, self.layout_kwargs) # save app in datastore ds[self.store_key] = app return StatusCode.Success
""" @author: [email protected] @site: e-smartdata.org """ import dash import dash_core_components as dcc import dash_html_components as html import plotly.graph_objects as go app = dash.Dash(__name__) app.layout = html.Div(children=[ html.H2(children='Hello Dash!'), dcc.Graph(figure=go.Figure([ go.Bar(x=['2017', '2018', '2019'], y=[150, 180, 220], name='lokalnie'), go.Bar(x=['2017', '2018', '2019'], y=[80, 160, 240], name='online') ])) ]) if __name__ == '__main__': app.run_server()
# rowList.append(gender[gender]) print(row) # Load datasets US_AG_URL = 'templates/test2.csv' df_ag = pd.read_csv(US_AG_URL) print(df_ag.head()) # Create our app layout app = dash.Dash(__name__) server = app.server app.layout = html.Div([ html.H2('MACHINE LEARNING INTERFACE'), dt.DataTable( id='my-datatable', rows=df_ag.to_dict('records'), editable=False, row_selectable=True, filterable=True, sortable=True, selected_row_indices=[] ), html.Div(id='selected-indexes'), dcc.Graph( id='datatable-subplots' ) ], style={'width': '90%'})
html.Img(src='./assets/nucypher_logo.png'), ], className='banner'), html.Div([ html.Div([ html.Div([ html.Img(src='./assets/enrico.png', style={ 'height': '150px', 'width': '220px' }), ], className='two columns'), html.Div([ html.Div([ html.H2('ENRICO'), html. P("Enrico is the OBD device in Alicia's vehicle that uses a data policy key " "to encrypt Alicia's vehicular measurements into a database or some storage service " "(e.g., IPFS, S3, whatever). Data Sources like the OBD device remain " "completely unaware of the recipients. In their mind, they are producing data " "for Alicia. "), ], className="row") ], className='five columns'), ], className='row'), ], className='app_name'), html.Hr(),
y5 = us['car_culture_comp_index_uv'] y6 = us['car_culture_percent_reach'] fig3 = go.Figure(data=[ go.Bar(name='car culture index', x=x, y=y5), go.Bar(name='car culture reach', x=x, y=y6) ]) fig3.update_layout(barmode='group') fig3.update_yaxes(type='linear') layout = html.Div(children=[ # All elements from the top of the page html.Div([ html.H1(children=''), html.H2(children='', style={'fontSize': 14}), html.Div(children=''' '''), dcc.Graph(id='hh_income', figure=fig1), ]), html.Br(), html.Br(), html.Div([ html.Br(), html.H1(children=''), html.H2(children='', style={'fontSize': 14}), dcc.Graph(id='tech_pie', figure=fig2), ]), html.Br(), html.Br(),
fee_df = pd.DataFrame(list(zip(fee_names, fee_amount)), columns=['Charge Type', 'Amount']) delivery_boy_list = list() for x in df['delivery_boy']: if isinstance(x, dict): delivery_boy_list.append(x) delivery_boy_list_df = pd.DataFrame.from_records(delivery_boy_list) delivery_boy_name = delivery_boy_list_df['name'].value_counts(dropna=False) delivery_boy_name = seriesToFrame( delivery_boy_name, ['Delivery Partner Name', 'Delivery Count']).head(10) app.layout = html.Div(children=[ html.H2(children='Swiggy Data Analyzer', style={'textAlign': 'center'}), html.H6( children='Visualizing Swiggy Order History of myself Ashwin Joseph', style={'textAlign': 'center'}), html.A( [ html.Img( src='https://image.flaticon.com/icons/svg/1384/1384014.svg', style={ 'height': '36px', 'width': '36px', }, ), ], target='_blank', href='https://www.linkedin.com/in/ashwinjoseph/',
# --------------- app = dash.Dash() # Initialize dash application # Reference externally hosted CSS file my_css_url = "https://codepen.io/madjazz/pen/awxxQK.css" app.css.append_css({ "external_url": my_css_url }) # Define layout app.layout = html.Div(children=[ html.H1(children="Simple Dashboard Example", style={"height": "100px", "text-align": "center"}), html.H2(children="Plots", style={"text-align": "center"}), # From core components use the dropdown component dcc.Dropdown( id="dropdown-graph", options=[ {"label": "Insulin vs BMI", "value": "insulin_bmi"}, {"label": "Glucose vs BMI", "value": "glucose_bmi"}, {"label": "Age vs BMI", "value": "age_bmi"} ], value="insulin_bmi" ), # Set position of plot dcc.Graph(id="display-graph", style={"padding-bottom": "50px"}),
import ta import data_loader from time_tools import convert_date_input from app import app app.config.suppress_callback_exceptions = True app.scripts.config.serve_locally = True # -------------------------------------------------------- data preparation ---------------------------------------- $ misc_data_dict = data_loader.load_misc() # -------------------------------------------------------- help functions ---------------------------------------- $ # -------------------------------------------------------- define layout ---------------------------------------- $ layout = html.Div([ html.Div([html.H2("misc data")], className='banner'), html.Div(id='cached-data-market-misc-data', style={'display': 'none'}), html.Div([ html.Div([ dcc.Dropdown( id="data-item-selection-market-misc-data", options=[{ 'label': md, 'value': md } for md in sorted(misc_data_dict.keys())], value='USDT', ), ], className='two columns wind-polar'), html.Div([ dcc.Dropdown(
image_filename = 'img/logo.jpg' # replace with your own image encoded_image = base64.b64encode(open(image_filename, 'rb').read()) colorscale = cl.scales['9']['qual']['Paired'] # df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/dash-stock-ticker-demo.csv') app.layout = html.Div( [ html.Div([ html.H2('Finance Explorer', style={ 'display': 'inline', 'float': 'left', 'font-size': '2.65em', 'margin-left': '7px', 'font-weight': 'bolder', 'font-family': 'Product Sans', 'color': "rgba(117, 117, 117, 0.95)", 'margin-top': '20px', 'margin-bottom': '0' }), # html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe.png", html.Img( src='data:image/jpg;base64,{}'.format(encoded_image.decode()), style={ 'height': '100px', 'float': 'right' }, ), ]), dcc.Dropdown(
timedelta(days=365.24), end_date=date(dt.year, dt.month, dt.day)) ]), #row 2 html.Div(className="row", children=[ html.Div(id="QQ Plot", className="six columns", children=[dcc.Graph(id='QQ Plot figure')]), html.Div(id="Beta", className="six columns", children=[dcc.Graph(id='Beta figure')]) ]), html.Div(className="row", children=[ html.H2("Key Figures"), ]), #dropdown html.Div(className="row", children=[ html.Div( className="three columns", children=html.Div([ dcc.Dropdown( id='BAL', options=[{ 'label': s[0], 'value': str(s[1])
app.css.append_css( {'external_url': 'https://codepen.io/amyoshino/pen/jzXypZ.css'}) # noqa: E501 server = app.server app.title = 'Victorious Secret Crime Analyzer' # get the top 4 crimes df df_t4 = prep_data() body = dbc.Container( [ dbc.Row([ dbc.Col( [ html.H2("San Francisco Top 4 Crimes"), html.P("""\ When looking for a place to live or visit, one important factor that people will consider is the safety of the neighborhood. This app aims to help people make decisions when considering their next trip or move to San Francisco, California via visually exploring a dataset of crime statistics. The app provides an overview of the crime rate across neighborhoods and allows users to focus on more specific information through filtering crime type or time of the crime. """), html.H5("Use the box below to choose crimes of interest:"), dcc.Dropdown(id='drop_selection_crime', options=[{ 'label': i, 'value': i } for i in df_t4['Category'].unique()], style={ 'height': '20px',
refreshTickers() time.sleep(5) def refreshTickers(): get_data("ETH-USD") get_data("ETH-BTC") get_data("BTC-USD") get_data("LTC-USD") # begin building the dash itself app = dash.Dash() # simple layout that can be improved with better CSS later, but it does the job for now app.layout = html.Div([ html.H2('CRYPTO WHALE WATCHING APP (support / donations appreciated)'), html.H3('ETH Address: 0xDB63E1e60e644cE55563fB62f9F2Fc97B751bc49' + ' -------------------- ' 'BTC Address: 1BtEBzRxymw6NvtCfoGheLuh2E2iS5mPuo'), html.H3('GitHub: https://github.com/pmaji/eth_python_tracker'), html.H3('Legend: Bright colored mark = 5 or more distinct orders at a price-point. ' 'Hover over bubbles for more info.'), dcc.Graph( id='live-graph-ethusd', ), dcc.Graph( id='live-graph-ethbtc', ), dcc.Graph( id='live-graph-btcusd', ), dcc.Graph(
neighbors.append(key) clusters.append(str(value)) app = dash.Dash() app.layout = html.Div([ html.H1('The Nextdoor', style={ 'color': 'rgb(192,72,81)', 'margin-left': '550px', 'font-size': '40px', 'font-family': 'arial' }), html.H2('Get to know the neighborhood!', style={ 'color': 'rgb(192,72,81)', 'margin-left': '520px' }), #sort neighborhood based on selected feature html.Div([ html.H2('Sort Neighborhood by feature ', style={ 'color': 'rgb(23,114,180)', 'margin-left': '120px' }), dcc.Dropdown(id='dropdown-a', options=[{ 'label': i, 'value': i } for i in major_group_feature], value='Sectors',
dcc.Dropdown(id='season_selector', options=option_seasons, placeholder="Select a season", value='2020-21', multi=False,) ]) r1c1 = html.Div(className='one columns', children=[ html.Img(src='https://a.espncdn.com/combiner/i?img=/redesign/assets/img/icons/ESPN-icon-basketball.png&h=160&w=160&scale=crop&cquality=40', style={'height': '75px'}) ], style={'padding-left': '10px'}) r1c2 = html.Div(className='six columns', children=[ html.H2('Advanced NBA Analytics for Fantasy Basketball Players', style={'color': 'orange'}) ]) r1c3 = html.Div(className='two columns', children=[ # html.H6(" Select a season") ], style={'padding-top': '5px'}) r1c4 = html.Div(className='three columns', children=[ dropdown_seasons ]) r2c1 = html.Div(className='four columns', children=[ dropdown_features, html.H6(id='bar_chart_label', children=['Top Players of the 2019-20 Season'],
index_page = html.Div([ html.H1('Data Mining Project'), html.H3('Aira Domingo'), dcc.Link('Load Dataset', href='/page-1'), html.Br(), dcc.Link('Explore Data', href='/page-2'), html.Br(), dcc.Link('Models', href='/page-3') ]) ###PAGE 1 page_1_layout = html.Div([ html.H2('Load Dataset'), dcc.Upload( id='upload-data', children=html.Div([ 'Drag and Drop or ', html.A('Select Files') ]), style={ 'width': '100%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px'
colors = { 'background': '#111111', 'text': '#7FDBFF' } markdown_text = "40% prósent af kolefnisspori Íslands, utan landnotkunar og skógarræktar, má rekja til Orkunotknar. Vegasamgöngur eru megin uppspretta losunar í orkuflokknum, eða um helmingur af kolefnisfótsporinu!" # https://ust.is/loft/losun-grodurhusalofttegunda/losun-islands/ # TOdo # plotta upp Heildar Orku og sýna myndrænt hvað fer mikið í vegasamgöngur # Segja hvað það þarf mörg tré til að binda kolefnið val_km = [5, 10, 15, 20, 25, 30, 35, 40, 50] app.layout = html.Div([ html.H2("""Hvernig þú hefur áhrif með því að taka þátt í áskoruninni "Hjólum í vinnuna" """), dcc.Markdown(children=markdown_text), html.Div( [ html.Label( "Meðal maðurinn keyrir 25km á dag. Hvað keyrir þú mikið?"), dcc.Dropdown( id="km", options=[{ 'label': i, 'value': i } for i in val_km], value=25), # value-ið sem við tökum inn á eftir ], style={'width': '25%',
# Read in geo-json file # read in Detroit neighborhood geojson. with open("../data/raw/detroit_geo.json") as json_file: detroit_geo = json.load(json_file) #------------------------------------------------- # DASH APP # Background color colors = {'background': '#006e99', 'text': '#7FDBFF'} # App layout (Dash components all go inside layout) app.layout = html.Div( #style={"backgroundColor": colors["background"], "pad": 0}, children=[ # Title of the web-app html.H1("Detroit City", style={"text-align": "center"}), html.H2("Police Attention Level Needed", style={"text-align": "center"}), # Date picker html.Div([ dcc.DatePickerSingle(id="dt_pick_single", date=dt(2020, 11, 13), min_date_allowed=dt(2020, 11, 7), max_date_allowed=dt(2020, 11, 13)) ], style={"padding-left": "25%"}), # Element to show selected date as text html.H2( html.Div(id="output_container", children=[], style={"padding-left": "25%"})),
# Fonts "https://fonts.googleapis.com/css?family=Open+Sans|Roboto" "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", # Custom CSS "https://cdn.rawgit.com/xhlulu/dash-image-processing/1d2ec55e/custom_styles.css", ] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.scripts.config.serve_locally = True app.layout = html.Div( [ # Banner display html.Div([ html.H2('Image Compression App', id='title'), html.Img( src= "https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png" ) ], className="banner"), dcc.Upload(id='upload-image', children=['Drag and Drop or ', html.A('Select Files')], style={ 'height': 'auto', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '10px',
def challenger_img(link, f_name, l_name): return [ html.Img(className="ch-img", src=link), html.Div(className="ch-name", children=[html.H2(f_name), html.H2(l_name)]) ]