def init_tab_4():
return dcc.Tab(label='Team Summary', className = 'custom-tab', selected_className="custom-tab--selected", children = [
html.Div([
#html.H3('Team Summary'),
### select date range
html.Div([
html.Div([html.H6('Select Date:')], style = {'margin-left': 10, 'margin-right': 30}),
dcc.DatePickerRange(
id = 'tab4_date_range',
display_format='Y-M-D',
end_date = dt.now().date(),
start_date = min(trade_table['Timestamp'])
)],
className = 'row',
style = {'margin-left': 30, 'margin-top': 10, 'margin-bottom': 30,
'display': 'flex', 'flex-direction': 'row', 'align-items': 'center', "margin-top": 30}
),
###text boxes to display ratio for selected porfolio
html.Div([
html.Div([
html.Div([
html.H6(id="total_pnl_text_tab4"), html.P("Total PnL")],
id="total_pnl_tab4",
className = "mini_container"),
], className = "three columns"),
html.Div([
html.Div([
html.H6(id="no_of_porfolios_text_tab4"), html.P("Number of Portfolios")],
id="no_of_porfolios_tab4",
className = "mini_container"),
], className = "three columns"),
html.Div([
html.Div(
[html.H6(id="last_week_trades_text_tab4"), html.P("Last Week Trades")],
id="last_week_trades_tab4",
className = "mini_container"),
], className = "three columns"),
html.Div([
html.Div(
[html.H6(id="sharpe_ratio_text_tab4"), html.P("Sharpe Ratio")],
id="sharpe_ratio_tab4",
className = "mini_container"),
], className = "three columns")],
id="info-container_1_tab4",
className="twelve columns",
style = {'margin-left': 30, 'margin-top': 10, 'margin-bottom': 30,
'display': 'flex', 'justify-content': 'center'}),
html.Div([
html.Div([
html.Div(
[html.H6(id="sorting_ratio_text_tab4"), html.P("Sorting Ratio")],
id="sorting_ratio_tab4",
className = "mini_container"),
], className = "three columns"),
html.Div([
html.Div(
[html.H6(id="information_ratio_text_tab4"), html.P("Information Ratio")],
id="information_ratio_tab4",
className = "mini_container"),
], className = "three columns"),
html.Div([
html.Div(
[html.H6(id="jensen_measure_text_tab4"), html.P("Jensen Measure")],
id="jensen_measure_tab4",
className = "mini_container"),
], className = "three columns"),
html.Div([
html.Div(
[html.H6(id="hit_ratio_text_tab4"), html.P("Hit Ratio")],
id="hit_ratio_tab4",
className = "mini_container"),
], className = "three columns"),],
id="info-container_tab4",
className="twelve columns",
style = {'margin-left': 30, 'margin-top': 10, 'margin-bottom': 30,
'display': 'flex', 'justify-content': 'center'}),
html.Div(className = "twelve columns", children = [
html.Div([
html.Div(
###Drodown to select time unit
className = "row chart-top-bar",
children = [
html.Div(
className="inline-block chart-title",
children = "Team PnL View (Individuals)",
),
html.Div(
#html.H6('Select Timeframe'),
className = "graph-top-right inline-block",
children = [
html.Div([
dcc.Dropdown(id='tab4 time unit',
options=[{'label': 'Daily', 'value': 'day'},
{'label': 'Weekly', 'value': 'week'},
{'label': 'Monthly', 'value': 'month'}],
value='day')],
style = {'width': 200}
)],
)
], style = {'justify-content': 'center'}
),
dcc.Graph(id='tab4 team view'),
], className = 'six columns'),
html.Div([
html.Div(
###Drodown to select time unit
className = "row chart-top-bar",
children = [
html.Div(
className="inline-block chart-title",
children = "Team PnL View (Aggregated)",
),
], style = {'justify-content': 'center'}
),
dcc.Graph(id='tab4 aggregated view')
], className = 'six columns')
],
style = {'margin-top': 10, 'margin-bottom': 30})
], style = {'margin-left': 30, 'margin-right': 30, 'margin-top': 20, 'margin-bottom': 30}),
])
new_df['capture_count'] = new_df.apply(lambda x: sum(captures_df[
(captures_df['piece_type'] == x['piece_type']) & (captures_df[
'captured_piece_type'] == x['captured_piece_type'])]['game_id']),
axis=1)
new_df['color'] = new_df['piece_type'].apply(
lambda x: 'white' if ord(x) >= 9812 or ord(x) <= 9817 else 'black')
#Page header
#******************************************************************************************************************
layout = html.Div([
dbc.Container([
dbc.Row([dbc.Col(html.H1(children='Chess gang'), className="mb-2")]),
dbc.Row([
dbc.Col(html.H6(children='Visualising trends across the board'),
className="mb-4")
]),
#******************************************************************************************************************
#Block headers
#******************************************************************************************************************
dbc.Row([
dbc.Col(dbc.Card(html.H3(
children=
'Set the desired ELO rating range for the following graphs',
className="text-center text-white bg-dark"),
body=True,
color="dark"),
className="mt-4 mb-4")
def ice_App():
return html.Div([
html.Div([
html.Div([
html.Div([
dcc.Link('Home', href='/'),
],
className='two columns'),
html.Div([
dcc.Link('Denver Temps', href='/den-temps'),
],
className='two columns'),
html.Div([
dcc.Link('Colorado River', href='/colorado-river'),
],
className='two columns'),
html.Div([
dcc.Link('CO2', href='/co2'),
],
className='two columns'),
],
className='twelve columns'),
],
className='row'),
html.Div([
html.H2('Arctic Sea Ice Extent',
className='twelve columns',
style={'text-align': 'center'}),
],
className='row'),
html.Div([
html.H6('2006-Present',
className='twelve columns',
style={'text-align': 'center'}),
],
className='row'),
html.Div([
html.H6('Data From National Snow and Ice Data Center',
className='twelve columns',
style={'text-align': 'center'}),
],
className='row'),
html.Div(
[
html.Div(
[
html.Label('Select Product',
style={'text-align': 'center'}),
html.Div(
[
dcc.RadioItems(
id='product',
options=[
{
'label': 'Ice Exent By Year',
'value': 'years-graph'
},
{
'label': 'Avg Monthy Extent',
'value': 'monthly-bar'
},
{
'label': 'Extent On Current Date',
'value': 'extent-date'
},
{
'label': 'Extent Rankings',
'value': 'extent-stats'
},
{
'label': '1 Year Moving Avg',
'value': 'moving-avg'
},
],
# value='temp-graph',
labelStyle={'display': 'block'},
),
],
className='pretty_container'),
],
className='three columns',
),
html.Div([
html.Div(id='sea-selector'),
],
className='two columns'),
html.Div([
html.Div(id='month-selector'),
],
className='two columns'),
],
className='row'),
html.Div([
html.Div([
html.Div(id='ice-graph'),
], className='eight columns'),
html.Div([html.Div(id='stats-n-stuff')], className='four columns'),
],
className='row'),
html.Div(
[
html.Div([
html.Div(id='moving-avg-graph'),
],
className='eight columns'),
# html.Div([
# html.Div(id='stats-n-stuff')
# ],
# className='four columns'
# ),
],
className='row'),
html.Div([
html.Div([
html.Div(id='stats'),
], className='twelve columns'),
],
className='row'),
html.Div(id='df-monthly', style={'display': 'none'}),
html.Div(id='df-fdta', style={'display': 'none'}),
html.Div(id='df-year-trailing-avg', style={'display': 'none'}),
])
def render_page():
headerRows = []
settingsRows = []
contentRows = []
traffic_alert = None
if settings.TRAFFIC_WARNING:
traffic_alert = dbc.Alert(
"HUOM: Suuren yhtäaikaisen käyttäjämäärän takia palvelu saattaa toimia hitaasti tai osa simulaatiotoiminnallisuuksista on pois käytöstä.",
color="danger",
className="mt-4 mb-0")
headerRows.append(
dbc.Row([
dbc.Col([
html.Div(html.Small([
dcc.Link("suomi",
id='language-link-fi',
href=(settings.URL_PREFIX or '/') + 'fi',
className="text-light text-uppercase",
refresh=False),
html.Span(" | ", className="text-muted"),
dcc.Link("English",
id='language-link-en',
href=(settings.URL_PREFIX or '/') + 'en',
className="text-light text-uppercase",
refresh=False),
]),
className="text-right"),
html.Div(dbc.Badge("v1.0"), className="text-right"),
html.Img(
src=
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjM2IiBoZWlnaHQ9IjkyIiB2aWV3Qm94PSIwIDAgMjM2IDkyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIyMzYiIGhlaWdodD0iOTIiIGZpbGw9IiMzNDNBNDAiLz48ZyBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c29mdC1saWdodCI+PGNpcmNsZSBjeD0iNDUuNSIgY3k9IjQ2LjUiIHI9IjQ1LjUiIGZpbGw9IiNENEVCRkYiLz48L2c+PGcgc3R5bGU9Im1peC1ibGVuZC1tb2RlOnNvZnQtbGlnaHQiPjxjaXJjbGUgY3g9IjE5MC41IiBjeT0iNDYuNSIgcj0iNDUuNSIgZmlsbD0iI0Q0RUJGRiIvPjwvZz48ZyBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c29mdC1saWdodCI+PGNpcmNsZSBjeD0iNDYiIGN5PSI0NiIgcj0iMzYiIGZpbGw9IiNDQkUyRjYiLz48L2c+PGcgc3R5bGU9Im1peC1ibGVuZC1tb2RlOnNvZnQtbGlnaHQiPjxjaXJjbGUgY3g9IjE5MCIgY3k9IjQ2IiByPSIzNiIgZmlsbD0iI0NCRTJGNiIvPjwvZz48ZyBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c29mdC1saWdodCI+PGNpcmNsZSBjeD0iNDUuNSIgY3k9IjQ2LjUiIHI9IjI2LjUiIGZpbGw9IiNDMkQ5RUQiLz48L2c+PGcgc3R5bGU9Im1peC1ibGVuZC1tb2RlOnNvZnQtbGlnaHQiPjxjaXJjbGUgY3g9IjE5MC41IiBjeT0iNDYuNSIgcj0iMjYuNSIgZmlsbD0iI0MyRDlFRCIvPjwvZz48ZyBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c29mdC1saWdodCI+PGNpcmNsZSBjeD0iNDUuNSIgY3k9IjQ2LjUiIHI9IjEzLjUiIGZpbGw9IiNBQUM1REIiLz48L2c+PGcgc3R5bGU9Im1peC1ibGVuZC1tb2RlOnNvZnQtbGlnaHQiPjxlbGxpcHNlIGN4PSIxOTAiIGN5PSI0Ni41IiByeD0iMTQiIHJ5PSIxMy41IiBmaWxsPSIjQUFDNURCIi8+PC9nPjxnIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzb2Z0LWxpZ2h0Ij48Y2lyY2xlIGN4PSIxMTgiIGN5PSI0NiIgcj0iNDYiIGZpbGw9IiNGQ0Q4RDgiLz48L2c+PGcgc3R5bGU9Im1peC1ibGVuZC1tb2RlOnNvZnQtbGlnaHQiPjxjaXJjbGUgY3g9IjExOCIgY3k9IjQ2IiByPSIzNiIgZmlsbD0iI0Y3QjlCOSIvPjwvZz48ZyBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6c29mdC1saWdodCI+PGNpcmNsZSBjeD0iMTE3LjUiIGN5PSI0NS41IiByPSIyNi41IiBmaWxsPSIjRUY5QTlBIi8+PC9nPjxnIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpzb2Z0LWxpZ2h0Ij48ZWxsaXBzZSBjeD0iMTE4IiBjeT0iNDUuNSIgcng9IjE0IiByeT0iMTMuNSIgZmlsbD0iI0UzN0Q3RCIvPjwvZz48L3N2Zz4=",
className="mb-3"),
html.H1("REINA",
className="font-weight-bold",
style=dict(letterSpacing=".2em")),
html.H6("Realistic Epidemic Interaction Network Agent Model"),
traffic_alert,
],
className='mb-4'),
],
className='mt-4'))
scenario_id = get_variable('preset_scenario')
settingsRows.append(
dbc.Row([
dbc.Col([
html.H4(_('Scenario'), className="mb-3"),
html.P(_('Forecast of the COVID-19 epidemic: %(name)s',
name=get_variable('area_name_long')),
className="lead"),
],
md=12),
]))
settingsRows.append(
dbc.Row([
dbc.Col([
dbc.Form(dbc.FormGroup([
dbc.Label(_('Preset'), className="mr-3"),
dcc.Dropdown(
id='preset-scenario-selector',
options=[{
'label': s.get_name(),
'value': s.id
} for s in SCENARIOS],
value=scenario_id,
style=dict(width="300px"),
)
], ),
inline=True)
],
md=12),
]))
contentRows.append(html.Div(id='main-content-container'))
stc = generate_static_content()
return html.Div([
html.Div(dbc.Container(headerRows),
className="bg-dark text-light py-4"),
html.Div(dbc.Container(settingsRows),
className="bg-gray-400 pt-4 pb-2"),
html.Div(contentRows),
dbc.Jumbotron(
dbc.Container(stc),
className="mt-5 mb-0",
fluid=True,
)
])
showspikes=True,
linewidth=0.5,
linecolor='Grey',
gridcolor='#D3D3D3').update_yaxes(showspikes=True))
app.layout = html.Div(
[
################# Row 1: Filters + Submit Button #########################
dbc.Row(
[
# Filter 1: Ticker
dbc.Col([
html.Div([
html.H6("Ticker: "),
dcc.Dropdown(id='ticker_filter',
options=[{
'label': ticker,
'value': ticker
} for ticker in tickers],
style={
'width': "100%",
'padding-left': '5px'
},
value=tickers[0],
placeholder="Filter by Ticker",
clearable=False)
])
],
width=3),
fig.update_xaxes(title_text='% Change in Median Home Value',range=[-150,400],row=1,col=2)
fig.update_yaxes(title_text='% Change in Median Income',range=[-100,150],row=1,col=2)
fig.update_layout(showlegend=False)
app.layout = html.Div(children=[
html.H1(
children="Analyzing Trends in Boston's Suffolk County",
style={'textAlign': 'center'
}
),
html.Div(children="""
Welcome! In Section 1 of this dashboard, you will find data visualizations and analytical commentary regarding changes in socioeconomic, racial, and housing trends in Suffolk County, MA, which have been derived from the 2000 and 2010 decennial censuses. Further down, in Section 2, you'll find a data scientist's approach to grouping the county's census tracts by their shared features, and an interactive tool to learn more about each census tract. Enjoy!
"""),
html.H3(children='''Section 1: Trends
'''),
html.H6(children='''Boston became more racially diverse
'''),
dcc.Graph(
id='Fig1',
figure={
'data': [
go.Bar(name='White', y=["2000 Census","2010 Census"], x=[df_2000.NHWHT00.sum(),df_2010.nhwht10.sum()],orientation='h',),
go.Bar(name='Non-white', y=["2000 Census","2010 Census"], x=[df_2000[['NHBLK00','NTV00','ASIAN00','HISP00',
'HAW00','INDIA00','CHINA00','FILIP00',
'JAPAN00','KOREA00','VIET00','MEX00',
'PR00','CUBAN00']].sum().sum(),
df_2010[['nhblk10','ntv10','asian10','hisp10',
'haw10','india10','china10','filip10',
'japan10','korea10','viet10','mex10',
'pr10','cuban10']].sum().sum()],orientation='h')
],
def add_defaults_screen():
date = datetime.now().strftime('%Y-%m-%dT%H:%M')
return html.Div(
[
html.Div(style={'margin': '20px 0px'}),
media_types_dropdown(),
# Todo: filter out images from other types for when image type is selected in dropdown
media_dropdown(),
html.Div([
html.Img(id='default-preview-image-horizontal',
style={
'height': '20%',
'width': '40%',
'display': 'inline-bock'
}),
html.Img(id='default-preview-image-vertical',
style={
'height': '25%',
'width': '22%',
'display': 'inline-bock'
},
className='rotateimgvertical')
],
id='default-preview-images',
style={'display': 'none'}),
screen_dropdown(),
html.Div(
[
html.H6('Start Date and Time:',
style={
'margin': '0px 23px 0px 0px',
'vertical-align': 'middle'
}),
dcc.Input(id='default-date',
type='datetime-local',
value=date,
style={
'margin': '0px 20px 0px 0px',
'flex': 1,
'vertical-align': 'middle'
})
],
style={
'display': 'flex',
'margin': '5px 10px',
'flex-direction': 'row',
'width': '100%',
'align-items': 'stretch'
}),
dbc.Tooltip(
'This is the changeover time for the new graphic to display.',
target='default-date'),
html.Div(
[
html.H6('Graphic Name:',
style={
'margin': '0px 66px 0px 0px',
'vertical-align': 'middle'
}),
dcc.Input(id='default-name',
style={
'margin': '0px 20px 0px 0px',
'flex': 1,
'vertical-align': 'middle'
})
],
style={
'display': 'flex',
'margin': '5px 10px',
'flex-direction': 'row',
'width': '100%',
'align-items': 'stretch'
}),
dbc.Tooltip('This is the name for the new graphic to display.',
target='default-name'),
html.Div(html.Button('Create New Configuration',
id='create-default-button',
style={'width': '100%'}),
style={
'margin': 'auto',
'width': '60%',
'align-items': 'stretch'
})
],
id='add-pane',
style={'display': 'none'})
def init_tab_3():
selector_date = html.Div(
[
html.Div([html.H6('Select Date:')],
style={
'margin-left': 10,
'margin-right': 20
}),
dcc.DatePickerRange(id='tab3_date_range',
display_format='Y-M-D',
end_date=dt.now().date())
],
className='row',
style={
'display': 'flex',
'flex-direction': 'row',
'align-items': 'center',
"margin-top": 30
})
selector_portfolio = html.Div(
[html.H6('Select Portfolio'),
dcc.Dropdown(id='tab3 portfolio')],
style={'padding': 8})
ratio_container = html.Div(id="info-container",
children=tab3_build_ratio(ratio_list),
className="four columns",
style={'padding': 10})
selector_section = html.Div([selector_date, selector_portfolio],
className="four columns")
pnl_header = html.Div(className="row chart-top-bar",
children=[
html.Div(className="inline-block chart-title",
children="PnL Performance")
])
pnl_graph = dcc.Graph(id='tab3 daily pnl',
figure=go.Figure(layout=go.Layout({
"paper_bgcolor": "rgba(0,0,0,0)",
"plot_bgcolor": "rgba(0,0,0,0)",
"font": {
"color": "lightgrey"
},
"margin": {
't': 30
}
})))
pnl_section = html.Div([pnl_header, pnl_graph],
className="eight columns",
style={
'padding': 10,
'width': 800
})
table = html.Div(id='tab3_table',
children=tab3_build_table(trade_table, user_list[0]),
className='eight columns',
style={
'height': 400,
'padding': 10,
'width': 800
})
return dcc.Tab(
label='Individual Analysis',
className='custom-tab',
selected_className="custom-tab--selected",
children=[
html.Div(
[
html.Div([selector_section, pnl_section],
className="twelve columns",
style={
'margin-left': 30,
'margin-top': 10,
'margin-bottom': 30
}),
html.Div([ratio_container, table],
className="twelve columns",
style={
'margin-left': 30,
'margin-top': 10,
'margin-bottom': 30
})
],
style={
'margin-left': 30,
'margin-right': 30,
'margin-top': 20,
'margin-bottom': 30
})
])
def init_tab_4():
return dcc.Tab(
label='Team Summary',
className='custom-tab',
selected_className="custom-tab--selected",
children=[
html.Div(
[
#html.H3('Team Summary'),
### select date range
html.Div(
[
html.Div([html.H6('Select Date:')],
style={
'margin-left': 10,
'margin-right': 30
}),
dcc.DatePickerRange(id='tab4_date_range',
display_format='Y-M-D',
end_date=dt.now().date())
],
className='row',
style={
'margin-left': 30,
'margin-top': 10,
'margin-bottom': 30,
'display': 'flex',
'flex-direction': 'row',
'align-items': 'center',
"margin-top": 30
}),
###text boxes to display ratio for selected porfolio
html.Div(
[
html.Div([
html.Div([
html.H6(id="total_pnl_text_tab4"),
html.P("Total PnL")
],
id="total_pnl_tab4",
className="mini_container"),
],
className="one-third column"),
html.Div([
html.Div([
html.H6(id="no_of_porfolios_text_tab4"),
html.P("Number of Portfolios")
],
id="no_of_porfolios_tab4",
className="mini_container"),
],
className="one-third column"),
html.Div([
html.Div([
html.H6(id="last_week_trades_text_tab4"),
html.P("Last Week Trades")
],
id="last_week_trades_tab4",
className="mini_container"),
],
className="one-third column")
],
id="info-container_1_tab4",
className="twelve columns",
style={
'margin-left': 30,
'margin-top': 10,
'margin-bottom': 30,
'display': 'flex',
'justify-content': 'center'
}),
html.Div(
[
html.Div([
html.Div([
html.H6(id="sorting_ratio_text_tab4"),
html.P("Sortino Ratio")
],
id="sorting_ratio_tab4",
className="mini_container"),
],
className="one-third column"),
html.Div([
html.Div([
html.H6(id="sharpe_ratio_text_tab4"),
html.P("Sharpe Ratio")
],
id="sharpe_ratio_tab4",
className="mini_container"),
],
className="one-third column"),
html.Div([
html.Div([
html.H6(id="hit_ratio_text_tab4"),
html.P("Hit Ratio")
],
id="hit_ratio_tab4",
className="mini_container"),
],
className="one-third column")
],
id="info-container_tab4",
className="twelve columns",
style={
'margin-left': 30,
'margin-top': 10,
'margin-bottom': 30,
'display': 'flex',
'justify-content': 'center'
}),
html.Div(
className="six columns",
children=[
html.
H6("Team PnL View (Please select a way of viewing)"
),
dcc.Dropdown(id="tab 4 switch view",
options=[{
'label':
'Break Down By Individuals',
'value':
'Break Down By Individuals'
}, {
'label': 'Team aggregated',
'value': 'Team aggregated'
}])
]),
html.Div(className="six columns",
children=[
dcc.Graph(id='tab4 graphs'),
])
],
style={
'margin-top': 10,
'margin-bottom': 30
})
],
style={
'margin-left': 30,
'margin-right': 30,
'margin-top': 20,
'margin-bottom': 30
})
def create_layout(app):
# Page layouts
return html.Div(
[
html.Div([Header(app)]),
# page 1
html.Div(
[
# Row 3
html.Div(
[
html.Div(
[
html.H5("NBA Summary"),
html.Br([]),
html.P(
# summary here
"The National Basketball Association (NBA) is a men's professional basketball league in North America, composed of 30 teams (29 in the United States and 1 in Canada). It is one of the four major professional sports leagues in the United States and Canada, and is widely considered to be the premier men's professional basketball league in the world. The league was founded in New York City on June 6, 1946, as the Basketball Association of America (BAA).[1][2] It changed its name to the National Basketball Association on August 3, 1949, after merging with the competing National Basketball League (NBL). The NBA's regular season runs from October to April, with each team playing 82 games. Its playoffs extend into June. NBA players are the world's best paid athletes by average annual salary per player.[3][4]. The NBA is an active member of USA Basketball (USAB),[5] which is recognized by FIBA (also known as the International Basketball Federation) as the national governing body for basketball in the United States. The league's several international as well as individual team offices are directed out of its head offices in Midtown Manhattan, while its NBA Entertainment and NBA TV studios are directed out of offices located in Secaucus, New Jersey.",
style={"color": "#ffffff"},
className="row",
),
],
className="product",
)
],
className="row",
),
html.Div(
[
html.Div(
[
html.Br([]),
html.H6(
["2020 Season"],
className="subtitle tiny-header padded",
),
html.Div(
[
html.Img(
src=
'https://images.wallpaperscraft.com/image/nba_national_basketball_association_basketball_81187_1920x1080.jpg',
style={
'height': '100%',
'width': '100%',
'float': 'right',
'position': 'relative',
'padding-top': 0,
'padding-right': 0
})
],
style={"overflow-x": "auto"},
),
],
className="twelve columns",
)
],
className="row ",
),
],
className="sub_page",
),
],
className="page",
)
def init_tab_1():
return dcc.Tab(
label='Individual Summary',
className='custom-tab',
selected_className="custom-tab--selected",
children=[
html.Div(
[
html.Div(
[
# date selection
html.Div(
[
html.Div([html.H6('Select Date:')],
style={
'margin-left': 10,
'margin-right': 30
}),
dcc.DatePickerRange(
id='tab1_date_range',
display_format='Y-M-D',
end_date=dt.now().date())
],
className='row',
style={
'display': 'flex',
'flex-direction': 'row',
'align-items': 'center',
"margin-top": 30
}),
# summary of total portfolios and PnL
html.Div([
html.Div([
html.Div([
html.H6(id="tab1_total_pnl"),
html.P('Total PnL')
],
className="mini_container",
style={'margin-right': 10})
],
className='six columns'),
html.Div([
html.Div([
html.H6(id="tab1_total_portfolio"),
html.P('Total Portfolios')
],
className="mini_container")
],
className='six columns'),
],
className='twelve columns',
style={"margin-top": 30}),
],
className="four columns",
style={
'margin-left': 30,
'margin-top': 10,
'margin-bottom': 30
}),
html.Div([
html.Div(className="row chart-top-bar",
children=[
html.Div(
className="inline-block chart-title",
children="PnL Performance",
)
]),
dcc.Graph(id='tab1_pnl_performance')
],
className='eight columns',
style={
'padding': 10,
'width': 800
}),
],
className='twelve columns',
style={
'margin-left': 30,
'margin-right': 30,
'margin-top': 20,
'margin-bottom': 30
})
])
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.H6("Change the value in the text box to see callbacks in action!"),
html.Div([
"Input: ",
dcc.Input(id='my-input', value='initial value', type='text')
]),
html.Br(),
html.Div(id='my-output'),
])
@app.callback(Output(component_id='my-output', component_property='children'),
[Input(component_id='my-input', component_property='value')])
def update_output_div(input_value):
return 'Output: {}'.format(input_value)
if __name__ == '__main__':
app.run_server(debug=True)
import dash_html_components as html
from navbar import navigationbar
nav = navigationbar()
body = dbc.Container([
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(
[html.H1("NBA Statistics Tracker")], justify="center", align="center"),
dbc.Row(html.H6("A simple way to visualize and track NBA Statistics"),
justify='center'),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
dbc.Row(html.Br()),
import dash_html_components as html
import plotly.graph_objs as go
from data.datafile import sales_sub
df = sales_sub()
fig = go.Figure(data=[
go.Bar(name='Sales',
x=df['Sales'],
y=df['Sub-Category'],
orientation='h',
marker_color='green'),
go.Bar(name='Profit',
x=df['Profit'],
y=df['Sub-Category'],
orientation='h',
marker_color='navy')
])
fig.update_layout(template='simple_white',
title='Sales & Profit of each Sub-Category',
height=700) #barmode='stack'
layout = html.Div([
html.H1(children='Sales & Profit of Sub-category Products'),
html.H6(children='Compare sales & profit'),
dcc.Graph(id='dist-chart', figure=fig)
],
style={
'color': 'navy',
'textAlign': 'center'
})
def get_genres(genres):
genre_list = []
for genre in genres:
genre_dict = {}
genre_dict['label'] = genre
genre_dict['value'] = genre
genre_list.append(genre_dict)
print (genre_list)
return genre_list
input = html.Div([
html.H6('Release Year:',
style={
"display": "inline-block",
"margin": "0px",
"color": "white",
"lineHeight": "0.1",
},),
dcc.RangeSlider(
id='year-slider',
min=years[0],
max=years[-1],
step=1,
value=[years[-2], years[-1]],
marks = get_marks(years),
),
html.H6('Genres:',
style={
"display": "inline-block",
CustomerCodes.sort()
#print(CustomerCodes)
CustomerNames = df_customers["CustomerName"].tolist()
CustomerNames.sort()
#print(CustomerNames)
cursor.close()
del cursor
#------------------------------------------------------------------------------------------------------------------------------------------------
customerprofile_layout = html.Div([
#Input Block : FIRSTROW
html.Div([
#Column 0
html.Div([
html.Div([html.H6("CUSTOMER", style={'color': 'blue'})]),
html.Div([
dcc.Dropdown(id='CustomerName3',
options=[{
'label': i,
'value': i
} for i in CustomerNames],
value='TOYOTA MOTOR (TMMBC)-331156')
],
style={
'width': '40%',
'display': 'inline-block'
}),
html.Div(
[html.Div(id='CustomerCode3')],
style={
]),
#side panel
html.Div(
className="col s3 ",
children=[
html.Div(
className="card blue lighten-4",
children=[
html.Div(
className="card-content",
children=[
html.Div(
style={'margin-top': '20px'},
children=[
html.H6(className="black-text",
children="Add Agent"),
dcc.Dropdown(
id="add-modules-dropdown"),
LayoutHelper.html_button(
icon="person_add",
text="Add Agent",
id="add-module-button"),
LayoutHelper.html_button(
icon="delete_forever",
text="Remove Agent",
id="remove-module-button",
style={"margin-left": '4px'})
]),
html.Div(
style={'margin-top': '20px'},
children=[
),
],
className="app__header",
),
html.Div(
[
# left hand side, tweets count scatter plot
html.Div(
[
dcc.Interval(
id="query_update",
interval=int(GRAPH_INTERVAL),
n_intervals=0,
),
html.Div(
[html.H6("WORD-COUNT TREND", className="graph__title")]
),
html.Div(
[
html.P(
"Total number of tweets streamed during last 60 seconds: 0",
id="bin-size",
className="auto__p",
),
],
className="auto__container",
),
dcc.Graph(
id="number_of_tweets",
animate=False,
figure=go.Figure(
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'],
style={'text-align': 'center', 'color': 'rgba(100, 200, 50, 0.75)'}),
dcc.Graph(id='stats_bar_chart', figure=make_bar_chart(player_stat),
config={'displayModeBar': False})
], style={'padding': '0px 10px'})
r2c2r1 = html.Div(className='row', children=[
dcc.Graph(id="player_barChart", style={
"height": 300}, config={'displayModeBar': False})
])
r2c2r2 = html.Div(className='row', children=[
dcc.Graph(id="box_plot", style={"height": 300},
config={'displayModeBar': False})
])
from skimage import io
import dash
from dash.exceptions import PreventUpdate
from dash.dependencies import Input, Output, State
import dash_html_components as html
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url, parse_jsonstring
app = dash.Dash(__name__)
filename = 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Mitochondria%2C_mammalian_lung_-_TEM_%282%29.jpg'
canvas_width = 300
shape = io.imread(filename, as_gray=True).shape
app.layout = html.Div([
html.H6('Draw on image and press Save to show annotations geometry'),
html.Div([
DashCanvas(
id='canvas',
lineWidth=5,
filename=filename,
width=canvas_width,
),
],
className="five columns"),
html.Div([
html.Img(id='my-image', width=300),
], className="five columns"),
])
def add_upload_screen():
return html.Div(
[
html.Div(
[
html.H4('Media Upload Type: ',
style={
'margin': '0px 23px 0px 0px',
'vertical-align': 'middle'
}),
dcc.Dropdown(id='upload-types-dropdown',
clearable=False,
searchable=False,
options=[{
'label': type,
'value': type
} for type in ['image', 'file']],
value='image',
style={
'margin': '0px 20px 0px 0px',
'flex': 1,
'vertical-align': 'middle'
})
],
style={
'display': 'flex',
'margin': '5px 10px',
'flex-direction': 'row',
'width': '100%',
'align-items': 'stretch'
}),
# Image upload panel
html.Div([
html.Div(
[
html.H4('Image Name:',
style={
'margin': '0px 85px 0px 0px',
'vertical-align': 'middle'
}),
dcc.Input(id='image-name',
style={
'margin': '0px 20px 0px 0px',
'flex': 1,
'vertical-align': 'middle'
})
],
style={
'display': 'flex',
'margin': '5px 10px',
'flex-direction': 'row',
'width': '100%',
'align-items': 'stretch'
}),
dcc.Upload(id='upload-horizontal-image',
children=html.Div([
html.A('Select horizontal image',
id='horizontal-image-label')
],
style={'textAlign': 'center'}),
style={
'width': '99%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'display': 'inline-block',
'margin': '5px'
},
multiple=False,
accept='image/*'),
dcc.Upload(id='upload-vertical-image',
children=html.Div([
html.A('Select vertical image',
id='vertical-image-label')
],
style={'textAlign': 'center'}),
style={
'width': '99%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'display': 'inline-block',
'margin': '5px'
},
multiple=False,
accept='image/*'),
],
id='image-upload-container'),
# Media upload panel
html.Div([
dcc.Upload(id='upload-media-files',
children=html.Div([
'Drag and Drop or ',
html.A('Select media files')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
multiple=True),
html.Div([
html.H4('Selected Media:',
style={
'margin': '0px 10px',
'display': 'inline-block'
}),
html.H6('',
id='selected-media',
style={'display': 'inline-block'})
],
id='media-selection-container',
style={'display': 'none'})
],
id='media-upload-container',
style={'display': 'none'}),
# Todo: hide selected media label when nothing is selected
html.Div(html.Button('Upload Media',
id='upload-media-button',
style={'width': '100%'}),
style={
'margin': 'auto',
'width': '60%',
'align-items': 'stretch'
})
],
id='upload-pane')
for year in range(1999, 2020)},
step=None,
className="custom-range")
]),
])
]
title = "The Lyric Constellation"
description = html.Div(children=[
html.H5("A Collective Assessment", className="text-info"),
html.P("""
We can group each era into a single data point each, represented by a star of different colors.
The most crowded area for each era is inside each ellipse with the same color.
"""),
html.H6("Looking at the stars for the English songs",
className="text-muted"),
html.P("""
There is no clear distinction among eras regarding the lyrics.
If else, the distance has gone closer every year.
We can see this as an indication that most of the English songs across eras have similar topic.
"""),
html.H6("As for the Dutch songs", className="text-muted"),
html.P("""
The distribution is more polarized, especially between songs before 1990 and the 90s.
How about the 2000s songs? If you navigate to ranking year after 2010, those more recent songs
tend to be in the middle, between the oldies and the 90s. Compared to English, the Dutch songs
lyrics are more diverse among the eras.
""")
])
} for source in db]
data_selector_keys = list(db.keys())
# In[]:
# Create app layout
app.layout = html.Div(
[
# Fixed nav
html.Div(
[
html.H6('Analytics Report | Periodic',
style={
'color': '#FFFFFF',
'text-align': 'left',
'float': 'left',
'min-width': '30%',
'max-width': '100%',
'padding-left': '10',
'padding-right': '10',
}),
html.H6('Plotly',
style={
'color': '#FFFFFF',
'background-color': '#29B2EE',
'text-align': 'center',
'float': 'right',
'width': '10%',
'margin-right': '12',
'padding-left': '10',
'padding-right': '10',
'border-radius': '3'
from src.layout.cards.settings.callbacks import get_setting
# Actual settings card layout
layout = dbc.Card([
html.A(
dbc.CardHeader(html.H5("Plot", className="ml-1")),
id="settings-collapse-toggle",
),
dbc.Collapse(
dbc.CardBody(
[
# html.H4("Settings", className="mb-3 settings-card-title"),
html.Div(
[
html.H5("X-axis"),
html.H6("Variable"),
get_setting("variable", "x"),
get_setting("instance", "x"),
get_setting("filter", "x"),
html.H5("Y-axis", className="mt-3"),
html.H6("Variable"),
get_setting("variable", "y"),
get_setting("instance", "y"),
get_setting("filter", "y"),
html.H5("Graph Type", className="mt-3"),
get_setting("graph_type"),
html.H6("Trendline", className="mt-3"),
get_setting("trendline"),
get_setting("colour"),
get_setting("instance", "colour"),
],
),
])
alert = dbc.Alert(
"Please choose Districts from dropdown to avoid further disappointment!",
color="danger",
dismissable=True
), # use dismissable or duration=5000 for alert to close in x milliseconds
image_card = dbc.Card(
[
dbc.CardBody([
html.H4("The Lovely City of Berlin", className="card-title"),
dbc.CardImg(src="/assets/berlinwall.jpg",
title="Graffiti by Gabriel Heimler"),
html.H6("Choose Berlin Districts:", className="card-text"),
html.Div(id="the_alert", children=[]),
dcc.Dropdown(id='district_chosen',
options=[{
'label': d,
"value": d
} for d in df["District"].unique()],
value=["Lichtenberg", "Pankow", "Spandau"],
multi=True,
style={"color": "#000000"}),
html.Hr(), modal
]),
],
color="light",
)
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/',
style={
'height': '36px',
def create_layout(app):
return html.Div(
[
html.Div([Header(app)]),
#page 1
html.Div([
# Row 3
html.Div(
[
html.Div(
[
html.H5("Tenemos lo Resultados Siguientes"),
html.Br([]),
html.P(
"",
style={"color": "#ffffff"},
className="row",
),
],
className="product",
)
],
className="row",
),
#Row 4
html.Div(
[
html.Div(
[
html.H6("¿Conoces de la existencia del derecho animal?", className="subtitle padded"),
dcc.Graph(id='plot_1',figure = fig_1)
], className="six columns", style={'width': '50%', 'align': 'right', 'display': 'inline-block'}
),
html.Div(
[
html.H6("¿Consideras que los animales tienen derechos?", className="subtitle padded",),
dcc.Graph(id='plot_2',figure = fig_2)
], className="six columns",style={'width': '50%', 'display': 'inline-block'}
),
],
className = "row",
style = {"margin-bottom":"35px"}),
#Row 5
html.Div([
html.Div(
[
html.H6("¿Qué derechos consideras tienen los animales?", className="subtitle padded",),
dcc.Graph(id='plot_3',figure = fig_3)
], className="six columns", style={'width': '50%', 'align': 'right', 'display': 'inline-block'}
),
html.Div(
[
html.H6("¿Qué animales consideras tienen que ser protegidos jurídicamente?", className="subtitle padded",),
dcc.Graph(id='plot_4',figure = fig_4)
], className="six columns", style={'width': '50%', 'display': 'inline-block'}
),
],
className = "row",
style = {"margin-bottom":"35px"},
),
#row 6
html.Div(
[
html.Div(
[
html.H6("¿Cómo crees qué es defendido un animal en las leyes mexicanas y el Código Civil Femeninoederal?", className="subtitle padded"),
dcc.Graph(id='plot_5',figure = fig_5)
], className="six columns", style={'width': '50%', 'display': 'inline-block'}
),
html.Div(
[
html.H6("¿Sabes qué hacer ante una situación de maltrato animal?",className="subtitle padded"),
dcc.Graph(id='plot_6',figure = fig_6)
], className="six columns",style={'width': '50%', 'align': 'right', 'display': 'inline-block'}
),
],
className = "row",
style = {"margin-bottom":"35px"},
),
#row 7
html.Div([
html.Div(
[
html.H6("¿Consideras importante que los servidores judiciales estén capacitados en materia de derecho animal?",className="subtitle padded"),
dcc.Graph(id='plot_7',figure = fig_7)
], className="six columns", style={'width': '50%', 'display': 'inline-block'}
),
html.Div(
[
html.H6("¿Consideras idónea la prisión como un mecanismo para crear conciencia sobre el bienestar de los animales?", className="subtitle padded",),
dcc.Graph(id='plot_8',figure = fig_8)
], className="six columns", style={'width': '50%', 'display': 'inline-block'}
),
],
className = "row",
style = {"margin-bottom":"35px"},
),
html.Div([
html.Div(
[
html.H6("¿Qué opinas de la representación jurídica hacia los animales por parte de los abogados y el Ministerio Público?", className="subtitle padded"),
dcc.Graph(id='plot_9',figure = fig_9)
], className="six columns", style={'width': '50%', 'align': 'right', 'display': 'inline-block'}
),
html.Div(
[
html.H6("¿Qué protecciones básicas consideras viables para los animales de trabajo?", className="subtitle padded",),
dcc.Graph(id='plot_10',figure = fig_10)
], className="six columns",style={'width': '50%', 'display': 'inline-block'}
),
],
className = "row",
style = {"margin-bottom":"35px"},
),
#row 7
html.Div([
html.Div(
[
html.H6("Tratándose de la base de tu alimentación, ¿qué tanto consumes productos cárnicos?", className="subtitle padded",),
dcc.Graph(id='plot_11',figure = fig_11)
], className="six columns", style={'width': '50%', 'display': 'inline-block'}
),
html.Div(
[
html.H6("¿Consideras importante que los lingüistas participen en la redacción de las leyes y códigos en materia de derecho animal?", className="subtitle padded",),
dcc.Graph(id='plot_12',figure = fig_12)
], className="six columns", style={'width': '50%', 'align': 'right', 'display': 'inline-block'}
)
],
className = "row",
style = {"margin-bottom":"35px"},
)
],className = "sub_page"
)
],className="page")
dcc.Tabs(
[
#FRONT PAGE DIVISION
dcc.Tab(
label='TAB ONE',
children=[
#INPUT DIVISION
html.Div(
[
#INPUT HEADER DESCRIPTION
html.H3('Inputs'),
#BEGIN CREATING INPUT CORE COMPONENTS
#TRANSACTION DATE
html.H6('Date of Transaction'),
dcc.DatePickerSingle(
className='dropdown',
id=columns[0],
max_date_allowed=datetime.date.today(),
date=datetime.date.today(),
style={'paddingLeft': '0px'}),
#TRANSACTION CATEGORY
html.H6('Transaction Category'),
dcc.Dropdown(className="dropdown",
id=columns[1],
options=options),
#TRANSACTION DOLLAR VALUE
html.H6('Dollar Value'),
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_table
import dash_table.FormatTemplate as FormatTemplate
import pandas as pd
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.H1('NYC Tree Health Proportions'),
html.H6("Pick a Borough and enter a Tree Species:"),
dcc.Dropdown(
id='boro_input',
options=[
{'label': 'Bronx', 'value': 'Bronx'},
{'label': 'Brooklyn', 'value': 'Brooklyn'},
{'label': 'Manhattan', 'value': 'Manhattan'},
{'label': 'Queens', 'value': 'Queens'},
{'label': 'Staten Island', 'value': 'Staten%20Island'}
],
value='Manhattan'
),
dcc.Input(id='spc_common_input', value='magnolia', type='text'),
html.Button('Submit', id='button', n_clicks=0),
html.Div(id='container-button-basic',
children='Pick a Borough and enter a Tree Species')
def init_tab_3():
return dcc.Tab(label='Individual Analysis', className = 'custom-tab', selected_className="custom-tab--selected",
children = [
html.Div([
html.Div([
html.Div([
###Dropdown to select user
# html.Div([
# html.H6('Select User'),
# dcc.Dropdown(id = 'tab3 user',
# options = [{'label': 'Trader '+i, 'value': i} for i in user_list],
# value=user_list[0])],
# style = {'padding':8},
# ),
html.Div([
html.Div([html.H6('Select Date:')], style = {'margin-left': 10, 'margin-right': 20}),
dcc.DatePickerRange(
id = 'tab3_date_range',
display_format='Y-M-D',
end_date = dt.now().date(),
start_date = min(trade_table['Timestamp'])
)],
className = 'row',
style = {'display': 'flex', 'flex-direction': 'row', 'align-items': 'center', "margin-top": 30}
),
html.Div([
html.H6('Select Portfolio'),
dcc.Dropdown(id = 'tab3 portfolio')],
style = {'padding':8}),
],
className = "four columns"),
html.Div([
html.Div(
className = "row chart-top-bar",
children = [
html.Div(
className="inline-block chart-title",
children = "PnL Performance",
),
html.Div(
className = "graph-top-right inline-block",
children = [
html.Div([
dcc.Dropdown(id = 'tab3 time unit',
options=[{'label': 'Daily', 'value': 'day'},
{'label': 'Weekly', 'value': 'week'},
{'label': 'Monthly', 'value': 'month'}],
value='day')],
style = {'width': 300}),
]
)
]
),
dcc.Graph(id='tab3 daily pnl',
figure = go.Figure(
layout = go.Layout({"paper_bgcolor": "rgba(0,0,0,0)",
"plot_bgcolor": "rgba(0,0,0,0)",
"font": {"color": "lightgrey"},
"margin": {'t': 30}})
)
)
],
className = "eight columns",
style = {'padding': 10, 'width': 800})
],
className = "twelve columns",
style = {'margin-left': 30, 'margin-top': 10, 'margin-bottom': 30}),
html.Div([
html.Div(id="info-container",
children = tab3_build_ratio(ratio_list),
className="four columns",
style = {'padding': 10}
),
html.Div(id='tab3_table',
children = tab3_build_table(trade_table,user_list[0]),
className = 'eight columns',
style = {'height': 400, 'padding': 10, 'width': 800}
)
],
className = "twelve columns",
style = {'margin-left': 30, 'margin-top': 10, 'margin-bottom': 30}
)
],
style = {'margin-left': 30, 'margin-right': 30, 'margin-top': 20, 'margin-bottom': 30}
)
]
)