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)])
]
