def make_left_panel(elements, style=None):
"""
Place empty left panel
Parameters
----------
elements: list
collection of dash_core_components
or dash_html_elements
"""
panel = html.Aside([html.Nav(elements, className="menu", style=style)],
className="column is-2")
return panel
id='table',
columns=[{
"name": i,
"id": i
} for i in df.columns],
)
],
className='card-body1')
],
className='card')
],
id="main-section"),
html.Aside([
html.H1("Definition"),
html.
H6("A decision tree is a decision support tool that uses a tree-like model of decisions and their possible consequences, including chance event outcomes, resource costs, and utility. It is one way to display an algorithm that only contains conditional control statements.Decision trees are commonly used in operations research, specifically in decision analysis, to help identify a strategy most likely to reach a goal, but are also a popular tool in machine learning."
)
],
id='sidebar')
],
className='col-md-12'),
],
className='row'),
html.Div([html.H1(" ")], className='row'),
html.Div([
html.Section([
html.Div([
html.Div([
html.Div([dcc.Graph(id='scatter')],
className='card-body2')
],
# time series of deaths and ratio over cases
html.Div(
children=[
html.H3(children="This is the cumulative trend of deaths",
className='h3'),
# html.H3(className="h3", children='Ciao mamma \n, ecco i nuovi casi di oggi:'),
html.Div(
children=
"Dot size gives you an idea of the relationship between new cases and deaths"
),
dcc.Graph(id="fig2")
], ),
html.Aside(
className=".sidebar a",
children=
"Made by Matteo Jucker Riva Thanks to propulsion Academy for all the skills",
)
])
# ---- data preprations
"""these functions extract the data form the raw dataframe and create additional columns. \
The data_prep_wrapper calls all other functions"""
# data preparation
def select_columns(country_name, source_raw):
country_df = pd.DataFrame({
'date':
source_raw[source_raw[' Country'] == country_name]['Date_reported'],
'new_cases':
html.Aside([
html.Br(),
html.Div(id='day-text', children='Base day:', style={'margin-left': '10px'}),
html.Div([
dcc.Dropdown(
id='day-dropdown',
options=[{'label': i, 'value': i} for i in charts.keys()],
value=list(charts.keys())[-1],
clearable=False,
style={
'width': '99%',
'margin-left': '5px'
}
)
]),
html.Br(),
html.Div(id='hour-text', children='Base hour:', style={'margin-left': '10px'}),
html.Div([
dcc.Dropdown(
id='hour-dropdown',
clearable=False,
style={
'width': '99%',
'margin-left': '5px'
}
)
]),
html.Br(),
html.Div(id='chart-text', children='Chart:', style={'margin-left': '10px'}),
html.Div([
dcc.Dropdown(
id='chart-dropdown',
clearable=False,
style={
'width': '99%',
'margin-left': '5px'
}
)
]),
html.Br(),
html.Div([
dbc.Button("Info & instructions", id="info-button", className="mr-1")
], style={
'textAlign': 'center'
}),
html.Br(),
html.Div(id='description', children=" ", style={'margin-left': '10px', 'white-space': 'pre-line'})
], style={
'width': '30%',
'float': 'left'
}),
html.Aside(
className='main-sidebar',
children=[
html.Section(
className='sidebar',
children=[
html.Div(
className='user-panel',
children=[
html.Div(
className='pull-left image',
children=[
html.Img(
className='img-circle',
src='./assets/hat.png')
]),
html.Div(className='pull-left info',
children='MADS Hatters')
]),
html.
Ul(className='sidebar-menu',
children=[
html.
Li(className='header',
children='MAIN NAVIGATION'),
html.
Li(children=[
dcc.Tabs(
id="menu-tabs",
vertical=True,
parent_style={'float': 'left'},
value='menu-item-home',
className="treeview-menu",
style=menu_tabs_styles,
children=[
dcc.Tab(
label='Home',
value='menu-item-home',
style=menu_tab_style,
selected_style=
menu_tab_selected_style
),
dcc.Tab(
label='All Satellites',
value=
'menu-item-allsats',
style=menu_tab_style,
selected_style=
menu_tab_selected_style
),
dcc.Tab(
label='History',
value=
'menu-item-history',
style=menu_tab_style,
selected_style=
menu_tab_selected_style
),
dcc.Tab(
label='Intercepts',
value=
'menu-item-intercepts',
style=menu_tab_style,
selected_style=
menu_tab_selected_style
),
dcc.Tab(
label='Starlink',
value=
'menu-item-starlink',
style=menu_tab_style,
selected_style=
menu_tab_selected_style
),
dcc.Tab(
label=
'Maneuver Detection',
value=
'menu-item-maneuvers',
style=menu_tab_style,
selected_style=
menu_tab_selected_style
),
dcc.Tab(
label='Gabbard Diagram',
value=
'menu-item-gabbard',
style=menu_tab_style,
selected_style=
menu_tab_selected_style
),
]),
html.Div(id='ui_dummy',
style={'display': 'none'}),
html.Div(
id='csk',
style={'display': 'none'},
children=
"ZXlKaGJHY2lPaUpJVXpJMU5pSXNJblI1Y0NJNklrcFhWQ0o5LmV5SnFkR2tpT2lJd05tSXdORGN5WkMwNE5tUTBMVFExTnpRdFltVTNOeTAxWVRabFpUVTRNRFUzWkRVaUxDSnBaQ0k2TkRBeE5ESXNJbWxoZENJNk1UWXdPRE0xTkRZNE9IMC5uT1pBQ291ay0tZnhQX2V1cXRnRmt3d05TMi02NEJaODFBTWVNbzlwZ1lj"
)
])
])
])
]),
html.Aside(
className="results-page__menu",
children=[
html.A(
className="results-page__menu__back",
href="/?file-selection-modal",
children=[
html.I(className="material-icons",
children="arrow_back"),
" Select another dataset",
],
),
html.H3(
className="results-page__menu__section-title",
children="Filters",
),
html.Form(
id="filters-form",
children=[
# @TODO: turn these into new filters
html.Div(
className="cf",
children=[
html.Form(
id="dashboard-filter",
className="",
children=[
InsightFoldable(
id="df-change-{}-wrapper".
format(filter_id),
container=dict(
className=
"results-page__menu__subsection",
),
title=dict(
value=filter_def.get(
"label",
filter_id),
className=
"results-page__menu__subsection-title js-foldable js-foldable-more",
unfoldedClassName=
"js-foldable-less",
),
value=dict(
value="",
className=
"results-page__menu__subsection-value js-foldable-target",
foldedClassName=
"js-foldable-foldTarget",
style={
"maxHeight": "16px"
},
),
child=dict(
className=
"js-foldable-target",
foldedClassName=
"js-foldable-foldTarget",
),
children=[
filter_html(
"df-change-{}".
format(filter_id),
filter_def,
),
],
) for filter_id, filter_def in
FILTERS.items()
] + [
html.Div(
className=
"results-page__menu__subsection",
children=[
html.A(
id=
"df-reset-filters",
href="#",
className=
"results-page__menu__reset",
children=
"Reset all filters",
)
],
),
html.Div(
className=
"results-page__menu__subsection",
children=[
html.P(
className=
"results-page__menu__feedback",
children=[
"Tell us what you think",
html.Br(),
html.A(
href=
"mailto:[email protected]",
children=
"*****@*****.**",
),
],
),
],
),
],
),
],
),
dcc.Store(
id="award-dates",
data={
f: FILTERS[f]["defaults"]
for f in FILTERS
},
),
],
),
],
),
'width': 'auto',
'color': 'black'
})),
html.Div(className='header__avatar',
children='Trivet & Walker Rulezzzzz'),
]),
html.Aside(
className='sidenav',
children=[
html.Div(className='sidenav__close-icon'),
html.I(className="fas fa-times sidenav__brand-close"),
html.Ul(
className="sidenav__list",
children=[
html.Li(className="sidenav__list-item",
children='All Weather',
id='AW'),
html.Li(className="sidenav__list-item",
children='AR Cowboy',
id='ARC'),
html.Li(className="sidenav__list-item",
children='AR Nerd',
id='ARN'),
# html.Li(className="sidenav__list-item", children='Rocket')
])
]),
html.Main(
className='main',
children=[
html.Div(
className='"main-header"',
children=[
html.Aside([
html.Div(
[
html.Ul(
[
html.Li([
html.A([
html.I(className='fa fa-bar-chart-o'),
html.Span('DASHBOARD')
],
href='',
className='active')
],
className='mt')
###########################################################
# filtros
###########################################################
,
filtros.filtro_01 #mapa
,
filtros.filtro_02 #efectividad - cuotas
,
filtros.filtro_03 #Tiempos - Marcador
,
filtros.filtro_04 #Filtro de año y mes
],
id='nav-accordion',
className='sidebar-menu')
],
id='sidebar',
className='nav-collapse ')
]),
df_res = print_table_res(res)
########################################################################################
#################################### LAYOUT ############################################
########################################################################################
layoutPage2 = html.Div([
html.Header([
dcc.Link(html.Button('Go to Home Page', className='pth_button'),
href='/'),
dcc.Link(html.Button('Datas analysis', className='pth_button'),
href='/Datas%20Analysis'),
html.Br(),
html.H1('Emotions detector'),
html.H2('Classification Results'),
]),
html.Aside(),
html.Tbody(
id='main_block',
children=[
html.Div(
id='Block_left',
children=[
html.Article(
id='left_selector',
children=[
## Data Selector
html.H3('Select a DataSet'),
dcc.Dropdown(
id='DataSet_dropdown',
options=[
sidebar = html.Aside(
children=[
html.Div(
id="sidebar",
className="nav-collapse",
children=[
html.Ul(
className="sidebar-menu",
id="nav-accordion",
children=[
html.Li(
className="mt",
children=[
dcc.Link(
href="dashboard",
children=[
html.I(
className="fa fa-dashboard"
),
html.Span(
"Dashboard"
)
]
)
]
),
html.Li(
className="mt",
children=[
dcc.Link(
href="dataexploration",
children=[
html.I(
className="fa fa-book"
),
html.Span(
"Exploración de Datos"
)
]
)
]
),
html.Li(
className="mt",
children=[
dcc.Link(
href="models",
children=[
html.I(
className="fa fa-tasks"
),
html.Span(
"Modelos"
)
]
)
]
),
]
)
]
)
]
)
in a network. This intricate diagram shows a possible scenario\
for UK energy production and consumption in 2050:\
energy **supplies** are on the left, and **demands** are on the right.\
Intermediate nodes group related forms of production and\
show how energy is converted and transmitted before it\
is consumed (or lost\!). The thickness of each link encodes\
the amount of flow from source to target.", className="markdown"),
dcc.Markdown("[Plotly](https://plot.ly/)'s sankey functionality is built upon and expands the functionality of the D3 Sankey plugin. The original plugin takes as input the nodes and weighted links,\
computing positions via [iterative relaxation](https://en.wikipedia.org/wiki/Gauss%E2%80%93Seidel_method). After fixing\
the horizontal position of each node, the algorithm starts\
from the sources on the left, positioning downstream nodes\
so as to minimize link distance. A reverse pass is then made\
from right-to-left, and then the entire process is repeated\
several times. Overlapping nodes are shifted to avoid collision. Plotly's library allows for increased customization and more granularity when looking at multiple links between nodes\
while also allowing users to share their findings easily.", className="markdown"),
html.Aside("Plotly's Dash framework allows users to create and share their,\
data analysis with no prior CSS or HTML experience required.", className="aside"),
dcc.Markdown("The fully automatic layout is convenient for rapid\
visualization-positioning nodes manually is tedious\!\
However, the algorithm is not perfect\; links are drawn\
with partial transparency to highlight crossings. To improve\
readability and further disambiguate links, this example also\
lets you reposition nodes interactively. The algorithm could\
be improved in the future, say to minimize link crossing or\
to support loopback in cyclical networks.", className="markdown"),
dcc.Markdown("This example was created using Plotly's [Dash](https://plot.ly/dash/) framework\
all credit is given to [Mike Bostock](https://bost.ocks.org/mike/sankey/) for his original example.", className="markdown")
],
style={
'width': '960px',
'font-family': '''"PT Serif", serif''',
'margin': "1em auto 4em auto",
HERE Technologies.
This model can and should be improved upon to include better constraints that
can provide a more optimal solution.
**IBM Technologies**
- [IBM Decision Optimization](https://www.ibm.com/analytics/decision-optimization)
- [Watson Studio](https://www.ibm.com/cloud/watson-studio)
- [Watson Machine Learning](https://www.ibm.com/cloud/machine-learning)
- [DOcplex examples](https://github.com/IBMDecisionOptimization/docplex-examples)
**HERE Technologies**
- [HERE.com API Key](https://developer.here.com/sign-up)
- [HERE Maps](https://developer.here.com/products/maps)
- [HERE Geocoding and Search](https://developer.here.com/products/geocoding-and-search)
- [Integrate interactive maps and location features into your application](https://developer.here.com/documentation/)
'''.format(title=demo_title,
subtitle=demo_subtitle,
description=demo_description)
info_panel = html.Aside(id='max-info-panel',
className='max-panel',
children=[dcc.Markdown(info_panel_content)])
html.Aside(className='results-page__menu', children=[
html.A(
className='results-page__menu__back',
href='/?file-selection-modal',
children=[
html.I(className='material-icons', children='arrow_back'),
" Select another dataset",
]
),
html.H3(className='results-page__menu__section-title', children='Filters'),
html.Form(id='filters-form', children=[
# @TODO: turn these into new filters
html.Div(className="cf", children=[
html.Form(id="dashboard-filter", className='', children=[
InsightFoldable(
id='df-change-{}-wrapper'.format(filter_id),
container=dict(
className='results-page__menu__subsection',
),
title=dict(
value=filter_def.get('label', filter_id),
className='results-page__menu__subsection-title js-foldable js-foldable-more',
unfoldedClassName='js-foldable-less',
),
value=dict(
value="",
className='results-page__menu__subsection-value js-foldable-target',
foldedClassName='js-foldable-foldTarget',
style={'maxHeight': '16px'},
),
child=dict(
className='js-foldable-target',
foldedClassName='js-foldable-foldTarget',
),
children=[
filter_html('df-change-{}'.format(filter_id), filter_def),
]
) for filter_id, filter_def in FILTERS.items()
] + [
html.Div(className="results-page__menu__subsection", children=[
html.A(id='df-reset-filters', href='#',
className='results-page__menu__reset', children='Reset all filters')
]),
html.Div(className="results-page__menu__subsection", children=[
html.P(className='results-page__menu__feedback', children=[
'Tell us what you think',
html.Br(),
html.A(href='mailto:[email protected]',
children='*****@*****.**'),
]),
])
]),
]),
dcc.Store(id='award-dates', data={f: FILTERS[f]["defaults"] for f in FILTERS}),
]),
]),