def Navbar(app: Dash, download: bool = False):
return html.Nav([
html.Div([
dcc.Link([
html.Img(src=app.get_asset_url("logo-black.png")),
html.Span("Compliance: The Basics")
], href="/home", className="nav-brand"),
html.Ul(generate_nav_links(download=download), className="nav-links", id="nav-list")
], className="nav-container")
], className="navigation bg-nav")
def test_asset_url(
empty_environ,
requests_pathname_prefix,
assets_external_path,
assets_url_path,
expected,
):
app = Dash(
"Dash",
requests_pathname_prefix=requests_pathname_prefix,
assets_external_path=assets_external_path,
assets_url_path=assets_url_path,
)
path = app.get_asset_url("reset.css")
assert path == expected
def build_header(app: dash.Dash):
header = html.Div(
[
html.Div(
[
html.Img(
src=app.get_asset_url("tvd.svg"),
id="plotly-image",
style={
"height": "40px",
"width": "auto",
"margin-bottom": "25px",
},
)
],
className="one-third column",
),
html.Div(
[
html.Div([
html.H3(
"Atemteurer",
style={"margin-bottom": "0px"},
),
html.H5("AiExplainer", style={"margin-top": "0px"}),
])
],
className="one-half column",
id="title",
),
html.Div(
[
html.A(
html.Button("Learn More", id="learn-more-button"),
href="https://www.trivadis.com/de/big-data-science",
)
],
className="one-third column",
id="button",
),
],
id="header",
className="row flex-display",
style={"margin-bottom": "25px"},
)
return header
def build_banner(app: dash.Dash):
mieuxvoter_logo = app.get_asset_url("img/mieux-voter-logo.png")
search_bar = dbc.Row(
[
dbc.Col(dbc.Input(type="search", placeholder="Not working yet.")),
dbc.Col(
dbc.Button("Search", color="primary", className="ml-2"),
width="auto",
),
],
no_gutters=True,
className="ml-auto flex-nowrap mt-3 mt-md-0",
align="center",
)
return dbc.Navbar(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=mieuxvoter_logo, height="30px")),
dbc.Col(
dbc.NavbarBrand("Mieux Voter - Dashboard",
className="ml-2")),
],
align="center",
no_gutters=True,
),
href="https://app.mieuxvoter.fr",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
],
color="dark",
dark=True,
)
clicks = None
# HTML Layout
app.layout = html.Div(style={'backgroundColor': '#000000'},
children=[
html.Div(className="content", style={"min-height": "calc(100vh - 50px)"},
children=[
# Set style so that it is hidden!
html.Div(id="size", style={
"position": "fixed", "top": 0, "left": 0} if DEBUG else {"display": "none"}),
dcc.Location(id="url"),
html.Img(style={"height": "auto", "display": "block",
"margin-left": "auto", "margin-right": "auto"},
className= "dynamic-width",
src=app.get_asset_url('book-cloud.png')),
html.Div(id='input-div', style={"margin": "auto", "padding": "10px"},
className="dynamic-width",
children=[
dcc.Dropdown(id='book-dropdown',
style={"background-color": "black", "color": "black",
"display": "block", "width": "100%", "padding-bottom": "10px"},
options=books_options,
placeholder='Select A Book'
),
html.Div(id='upload-div', children=[
dcc.Upload(
id='upload-text',
children=html.Div([
html.A('Upload'),
' Your Own Book'
"http://cnews.getnews.co.kr/view.php?ud=20190818212014101988c3409001_16",
className="row pretty_container columns"),
dbc.ListGroupItem(
"여름철 지리산 산악사고 이렇게 예방하자",
href=
"http://www.gnmaeil.com/news/articleView.html?idxno=423562",
className="row pretty_container columns"),
])
],
className="pretty_container five columns",
),
html.Div([
html.Div(html.H4('산악 사고 발생 빈도 TOP 300')),
html.Div(
html.Iframe(
src=dash_app.get_asset_url("acct.html"),
style={
"width": "100%",
"height": "400px",
},
), ),
],
className="pretty_container seven columns"),
],
className="row flex-display",
),
],
id="mainContainer",
style={
"display": "flex",
"flex-direction": "column"
from dash import Dash, html, dcc
import dash
import dash_labs as dl
app = Dash(__name__, plugins=[dl.plugins.pages])
app.layout = html.Div([
html.H1("App Frame"),
html.Div([
html.Div(
[
html.Img(
src=app.get_asset_url(page["image"]),
height="40px",
width="60px",
),
dcc.Link(f"{page['name']} - {page['path']}",
href=page["path"]),
],
style={"margin": 20},
) for page in dash.page_registry.values()
]),
dl.plugins.page_container,
])
if __name__ == "__main__":
app.run_server(debug=True)
def get_header(app: dash.Dash, data: GameData) -> html:
"""Layout for the header
Arguments:
app {dash.Dash} -- dash app instance
data {GameData} -- game data
Returns:
html -- html layout
"""
logo = app.get_asset_url("logo.png")
score_user, score_ai = count_score(data)
header = dbc.Container(
dbc.Navbar(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=logo, height="40px")),
dbc.Col(
dbc.NavbarBrand("Beat the AI - Car Edition",
className="ml-2")),
],
align="center",
no_gutters=True,
),
href="/",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(dbc.Row(
dbc.Col([
dbc.Button([
"You:",
dbc.Badge(
score_user, color="light", className="ml-1")
],
className="mr-2"),
dbc.Button([
"AI:",
dbc.Badge(
score_ai, color="light", className="ml-1")
],
className="mr-2"),
dbc.Button([
"Rounds:",
dbc.Badge(str(data.current_round + 1) + '/' +
str(data.max_rounds + 1),
color="light",
className="ml-1")
])
]),
no_gutters=True,
className="ml-auto flex-nowrap mt-3 mt-md-0",
align="center",
),
id="navbar-collapse",
navbar=True),
],
color=COLOR_STATWORX,
dark=True,
),
className='mb-4 mt-4 navbar-custom')
return header
## Data and Methodology
### Data
1. Data is downloaded from Eurostat Comext (Eurostat, 2019).
2. We only keep trade flows in normal statistical regime (excluding, for example, processing trade).
3. We aggregate all trade flows up to 6-digit Harmonized System products.
4. There are cases when product codes are masked to protect confidentiality of individual sellers, affecting about 2--3 percent of trade value. Because these product codes are available at the Chapter (2-digit) level, we redistribute the total value of confidential trade across the reported, non-confidential product codes of the same Chapter.
### Computation
We compare the export- and import-composition of a Member State vis-a-vis a third country with the EU average. Let *s(ijp)* denote the export share of product *p* in total exports of country *i* to country *j*. We compute a baseline export share *s(0jp)* as the export share of all other countries in the EU. We are interested in how similar is *s(ijp)* to *s(0jp)*.
***
We first compute the Kullback-Leibler divergence (Kullback, 1987) between the two trade share vectors as
''',
className='container',
style = {'maxWidth': '650px'}
),
html.Div(html.Img(src=app.get_asset_url('KLD.png')),
className='container',
style = {'maxWidth': '650px', 'textAlign': 'center'}
),
dcc.Markdown('''
As the name suggests, the Kullback-Leibler divergence is a measure of distance.
This measure takes a value of 0 if the two vectors are the same, and can be arbitrarily large for different vectors.
We convert it into a Trade Similarity Index as
''',
className='container',
style = {'maxWidth': '650px'}
),
html.Div(html.Img(src=app.get_asset_url('utility.png')),
className='container',
style = {'maxWidth': '650px', 'textAlign': 'center'}
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>
'''
server = app.server # Required by Heroku
app.layout = html.Div(children=[
html.Div([
html.Img(src=app.get_asset_url('Kodimpi.png'),
id="logo",
alt="Kodimpi logo"),
get_instructions(),
html.Div([
html.
A(html.Button("PRESENTATION", className="button_instruction"),
href=
"https://docs.google.com/presentation/d/1UxK_5VFOWXF3Ni_3pTustceeMWMWMBmiT3ZiNMB7xNs/edit?usp=sharing"
),
html.
A(html.Button("GITHUB", className="github_button"),
href="https://github.com/xiaoxiaobt/Reaktor-Data-Science-project"
)
],
className="mobile_buttons"),
