def get_layout(app, scenarios):
session_id = str(uuid.uuid4())
return html.Div(children=[
html.Div(session_id, id="session-id", style={"display": "none"}),
get_header(app),
html.Main(
className="dashboard",
children=[
get_scenario_column(app, scenarios),
html.Div(className="content",
children=[
dbc.Tabs([
dbc.Tab([
get_filter_column(),
get_aggregation_order_column(),
get_save_load_column(app),
get_units_column(),
],
className="test",
label="Filters"),
dbc.Tab([
get_color_column(app),
get_label_column(app),
],
label="Presentation")
], ),
get_graph_column()
]),
get_footer()
],
),
], )
def new(children, id=''):
r = html.Main(className="mdl-layout__content",
children=html.Div(className="page-content",
style={'height': '100%'},
children=children,
id=id))
return (r)
def layout():
all_data = get_data()
if all_data["grants"] is None:
return html.Div("No data found")
data = filter_data(all_data)
return html.Div(
id="main-div",
className="layout layout--single-column layout--full",
children=[
dcc.Location(id="url", refresh=False),
dcc.Store(id="filters"),
header(),
html.Main(
className="layout__content",
children=[
html.Div(
className="layout__content-inner wrapper",
children=[
html.Div(
id="page-header",
className="grid grid--one-column",
children=page_header(data),
),
html.Div(id="data-cards",
children=cards(data["grants"])),
html.Div(className="spacer-5"),
html.Div(className="",
children=filters(data["all_grants"])),
dcc.Loading(
id="data-tab-loading",
debug=False,
fullscreen=False,
color="#bc2c26",
type="dot",
children=[
dcc.Tabs(
parent_className="",
id="tabs",
value="dashboard",
className="filters",
children=[
tab_dashboard(data, all_data),
tab_map(data, all_data),
tab_data(data, all_data),
],
),
],
),
],
),
],
),
# subscribe(),
footer(),
],
)
def serve_layout():
return html.Main(
[
dcc.Dropdown(
id='deviceid',
options=[
{'label': 'ST1', 'value': ''},
{'label': 'ST2', 'value': ''},
{'label': 'ST3', 'value': ''},
{'label': 'ST4', 'value': ''},
{'label': 'ST5', 'value': ''},
{'label': 'ST6', 'value': ''},
{'label': 'ST7', 'value': ''},
{'label': 'ST8', 'value': ''},
{'label': 'ST9', 'value': ''},
{'label': 'ST10', 'value': ''},
{'label': 'STDemo', 'value': ''}
],
value='36a8d4b0-618c-11e8-ab9e-8f4bf9a263e5'
),
dcc.Dropdown(
id='key',
options=[
{'label': 'RSRP', 'value': 'rsrp'},
{'label': 'RSRQ', 'value': 'rsrq'},
{'label': 'SNR', 'value': 'snr'}
],
value='rsrp'
),
dcc.DatePickerSingle(
id='datepicker',
# layout settings
first_day_of_week=1,
display_format='YYYY-MM-DD',
placeholder='Select Date',
# date defaults
date=datetime.now(),
# date limits
min_date_allowed=datetime(2018, 1, 1),
# today
max_date_allowed=datetime.now(),
initial_visible_month=datetime(
datetime.now().year,
datetime.now().month,
1
)
),
html.Button(
'Select Date',
id='button'
),
dcc.Graph(id='plot', figure=fig_init)
],
)
def main_layout(app: dash.Dash, data: GameData, content: html) -> html:
"""Main layout which consists of the header, footer
and a dynamically changing main layout
Arguments:
app {dash.Dash} -- dash app instance
data {GameData} -- game data
content {html} -- layout for the main content
Returns:
html -- html layout
"""
layout = html.Div([
html.Header(get_header(app, data)),
html.Main(id='page-content', children=[content]),
html.Footer(get_footer())
])
return layout
html.Main([
html_collection_selector(),
html.Div([
dbc.Collapse([html_filter_drawer()],
id="filter_panel"),
html.Div([
html.Div([
html.Div(samples_list('/'),
className="btn-group shadow-sm",
id="selected-view-buttons"),
],
className="col-4"),
html.Div([
html.Button(
html.I(className="fas fa-filter fa-sm"
),
className=
"btn btn-outline-secondary shadow-sm mx-auto d-block",
id="filter_toggle"),
],
className="col-4"),
],
className="row mb-4"),
],
id="samples-panel",
className="d-none"),
html.Div(id="selected-view"),
html.Footer([
"Created with 🔬 at SSI. Bacteria icons from ",
html.A("Flaticon",
href="https://www.flaticon.com/"), "."
],
className="footer container")
],
className="container-fluid",
role="main"),
import dash
import dash_core_components as dcc
import dash_html_components as html
import dashmaterialui as dmui
import flask
server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)
app.layout = html.Div([
dmui.AppBar(
dmui.Toolbar(dmui.Typography("DSV", variant="h2", color="inherit"))),
html.Main([
dmui.Toolbar(),
dmui.Grid(
container=True,
children=[
dmui.Grid(item=True, children=[dmui.Typography("HELLO")])
],
),
]),
])
# if __name__ == "__main__":
# app.run_server()
"https://negomi.github.io/react-burger-menu/normalize.css",
"https://negomi.github.io/react-burger-menu/fonts/font-awesome-4.2.0/css/font-awesome.min.css"
]
# Create example app.
app = Dash(external_stylesheets=external_css)
app.layout = html.Div([
Burger(children=[
html.Nav(children=[
link_element("fa fa-fw fa-star-o", "Favorites"),
link_element("fa fa-fw fa-bell-o", "Alerts"),
link_element("fa fa-fw fa-envelope-o", "Messages"),
link_element("fa fa-fw fa-comment-o", "Comments"),
link_element("fa fa-fw fa-bar-chart-o", "Analytics"),
link_element("fa fa-fw fa-newspaper-o", "Reading List")
],
className="bm-item-list",
style={"height": "100%"})
],
id="slide"),
html.Main(
"Hello world!", style={
"width": "100%",
"height": "100vh"
}, id="main")
],
id="outer-container",
style={"height": "100%"})
if __name__ == '__main__':
app.run_server()
html.Main(
className='main-container',
children=[
dcc.Dropdown(
id='person-dropdown',
options=[
{
'label': db.get_patient_personal_data(1),
'value': 1
},
{
'label': db.get_patient_personal_data(2),
'value': 2
},
{
'label': db.get_patient_personal_data(3),
'value': 3
},
{
'label': db.get_patient_personal_data(4),
'value': 4
},
{
'label': db.get_patient_personal_data(5),
'value': 5
},
{
'label': db.get_patient_personal_data(6),
'value': 6
},
],
value=1,
clearable=False,
),
html.Section(
className='visualization-container',
children=[
html.Label('Statistical data about sensors value'),
dash_table.DataTable(id='stat-data-table',
style_cell={
'textAlign': 'center',
'maxWidth': 0
},
columns=[{
'name': 'Sensor',
'id': 'stat-name'
}, {
'name': 'L1',
'id': '0'
}, {
'name': 'L2',
'id': '1'
}, {
'name': 'L3',
'id': '2'
}, {
'name': 'R1',
'id': '3'
}, {
'name': 'R2',
'id': '4'
}, {
'name': 'R3',
'id': '5'
}],
data=[{
'stat-name': 'Minimum',
'0': 1023,
'1': 1023,
'2': 1023,
'3': 1023,
'4': 1023,
'5': 1023
}, {
'stat-name': 'Maximum',
'0': 1023,
'1': 1023,
'2': 1023,
'3': 1023,
'4': 1023,
'5': 1023
}, {
'stat-name': 'Mean',
'0': 1023,
'1': 1023,
'2': 1023,
'3': 1023,
'4': 1023,
'5': 1023
}, {
'stat-name':
'Root Mean Square',
'0': 1023,
'1': 1023,
'2': 1023,
'3': 1023,
'4': 1023,
'5': 1023
}]),
dcc.Dropdown(id='sensor-dropdown',
options=[
{
'label': 'Sensor L1',
'value': 0
},
{
'label': 'Sensor L2',
'value': 1
},
{
'label': 'Sensor L3',
'value': 2
},
{
'label': 'Sensor R1',
'value': 3
},
{
'label': 'Sensor R2',
'value': 4
},
{
'label': 'Sensor R3',
'value': 5
},
],
value=[0, 1, 2, 3, 4, 5],
multi=True),
dcc.Graph(id='linear-graph'),
html.Div(
className='foot-anomaly-container',
children=[
dcc.Graph(id='foot-image',
config={'displayModeBar': False},
figure=feet_image(
get_sensor_values(1))),
dcc.Graph(id='histogram')
])
])
]),
app.layout = html.Main([
html.Header('Job Prediction',
style={
'width': '100%',
'display': 'block',
'text-align': 'center'
}),
html.Div([
html.Label(['Plot type'],
style={
'width': '12%',
'display': 'inline-table'
}),
dcc.Dropdown(id='plottype',
options=[{
'label': e,
'value': e
} for e in plots],
value=plots[0],
style={
'width': '85%',
'display': 'inline-table'
})
],
style={'width': '100%'}),
html.Br(),
html.Div([
html.Label(['Job Title'],
style={
'width': '12%',
'display': 'inline-table'
}),
dcc.Dropdown(
id='jobtitle',
options=[{
'label': str(e),
'value': e
} for e in df['Title_New'].unique()],
value=df[df['Title_New'].notnull()]['Title_New'].unique()[0],
style={
'width': '85%',
'display': 'inline-table'
})
]),
html.Br(),
html.Div([
html.Label(['Location'],
style={
'width': '12%',
'display': 'inline-table'
}),
dcc.Dropdown(id='location',
options=[{
'label': e,
'value': e
} for e in df['Location'].unique()],
value=df['Location'].unique()[0],
style={
'width': '85%',
'display': 'inline-table'
})
]),
html.Br(),
html.Div([
html.Label(['Algorithm'],
style={
'width': '12%',
'display': 'inline-table'
}),
dcc.Dropdown(
id='algorithm',
# options=[{'label': e, 'value': e} for e in regressors_str],
# value=regressors_str[0],
style={
'width': '85%',
'display': 'inline-table'
})
]),
html.Br(),
html.Div([
html.Label(['Education'], id='educationlabel'),
dcc.RadioItems(id='education',
options=[{
'label': 'Tenth',
'value': 'Education_Tenth'
}, {
'label': 'Twelvth',
'value': 'Education_Twelvth'
}, {
'label': 'Bachelors',
'value': 'Education_Bachelors'
}, {
'label': 'Masters',
'value': 'Education_Masters'
}, {
'label': 'Doctorate',
'value': 'Education_Doctorate'
}],
value='Education_Bachelors',
style={
'width': '85%',
'display': 'inline-table'
}),
html.Br(),
html.Label(['Experience'], id='experiencelabel'),
dcc.RadioItems(id='experience',
options=[{
'label': 'XP_Fresher',
'value': 'XP_Fresher'
}, {
'label': 'XP_Experience',
'value': 'XP_Experience'
}],
value=regressors_str[0],
style={
'width': '85%',
'display': 'inline-table'
}),
]),
html.Br(),
html.Div([html.P(id='prediction')], style={}),
html.Br(),
html.Div([html.P(id='accuracy')], style={}),
html.Br()
])
app.layout = html.Main([
# header
html.Section(
className="section",
children=[
html.Div(
className="container",
children=[
# title
html.H1(
className="is-size-1",
children="TP2 on regression"),
# description
html.P(
className="description",
children="Exploration of various regression methods. \
We will use linear, polynomial, Ridge and Lasso \
regressions."
),
]
)
]
),
# fake data, section 1
html.Section(
className="section",
children=[
html.Div(
className="container",
children=[
# title
html.H3(
className="is-size-3",
children="Fake data"
),
# user controls
MyControlBox(fake_data_controls),
# graph
MyGraphBox(
id='fake-graph',
figure={
'data': [],
'layout': DefaultGraphLayout()
}
)
],
)
]
),
# real data, section 2
html.Section(
className="section",
children=[
html.Div(
className="container",
children=[
# title
html.H3('Real data'),
# user controls
MyControlBox(real_data_controls),
# graph
MyGraphBox(
id='real-graph',
figure={
'data': [],
'layout': DefaultGraphLayout()
}
)
],
)
]
),
# grid search on real data, section 3
html.Section(
className="section",
children=[
html.Div(
className="container",
children=[
# title
html.H4('Grid search on real data'),
# user controls
MyControlBox(grid_search_controls),
# graph
MyGraphBox(
id='grid-search',
figure={
'data': [],
'layout': DefaultGraphLayout()
}
)
],
)
]
)
])
from sentiment import TweetSentimentAnalyzer
from plot import create_plot_data
analyzer = TweetSentimentAnalyzer()
app = dash.Dash()
app.layout = html.Main(
children=[
html.H1('Sentiment analyzer', className='mt-5'),
dcc.Upload(
'Drag CSV here',
className='sentiment-app-file-upload',
id='sentiment-app-file-upload'
),
html.Div(
children=[],
id='sentiment-app-output-div'
)
],
className='container'
)
def parse_upload(uploaded_contents):
_, file_contents = uploaded_contents.split(',')
parsed_contents = base64.b64decode(file_contents).decode('utf-8')
df = pd.read_csv(
io.StringIO(parsed_contents),
parse_dates=True,
layout = html.Main([
# Nivel inferior
html.Div(
[
# Ingreso
html.Div(
[
# Dropdown mall
html.Div([
dcc.Dropdown(
id='dropdown_malls',
className='dropdown menu',
options=[{
'label': i['name'],
'value': i['id_comuna']
} for i in dfs.to_dict(orient='records')],
placeholder="Seleccione el Mall",
clearable=False,
disabled=False,
value=13001,
)
],
className='bloque'),
# Graf. Proyección crecimiento de habitantes
html.Div([
dcc.Graph(id='habita_graf_proy_col',
config={'displayModeBar': False})
],
className='bloque'),
# Indicadores
html.Div([
html.Div([
html.Div([
html.Div(id='nro_habit_col',
style={
'font-size': '18px',
'font-weight': 'bold'
}),
html.Div('Habitantes en el municipio',
style={'font-size': '10px'})
],
className='bloque-mini')
],
className='cell small-6'),
html.Div([
html.Div([
html.Div(id='por_habit_col',
style={
'font-size': '18px',
'font-weight': 'bold'
}),
html.Div('% de habitantes (nacion)',
style={'font-size': '10px'})
],
className='bloque-mini')
],
className='cell small-6')
],
className='grid-x align-center')
],
className='cell small-12 medium-6 large-3'),
# Seccion del salud
html.Div(
[
# Graf. Ingreso pib
html.Div([
dcc.Graph(id='econom_graf_ingreso_col',
config={'displayModeBar': False})
],
className='bloque'),
# Graf. Indice de pobreza
html.Div([
dcc.Graph(id='empleo_graf_pobreza_col',
config={'displayModeBar': False}),
],
className='bloque'),
],
className='cell small-12 medium-6 large-3'),
# Mapa
html.Div([
html.Div([
html.Div([
dcc.Graph(id='mapa_box_col',
config={'displayModeBar': False})
])
],
className='bloque')
],
className='cell small-12 medium-12 large-6'),
],
className='grid-x nivel')
])
html.Div(id='description', children=" ", style={'margin-left': '10px', 'white-space': 'pre-line'})
], style={
'width': '30%',
'float': 'left'
}),
html.Main([
html.Img(id='image',
style={'height': '100%',
'width': '100%',
'textAlign': 'center'
}),
dcc.Interval(
id='day-interval',
interval=5 * 60 * 1000, # in milliseconds
n_intervals=0
)
], style={
'width': '70%',
'float': 'right'
})
], style={'backgroundColor': '#181a3d'})
@app.callback(
dash.dependencies.Output("description", "children"),
[dash.dependencies.Input("chart-dropdown", "value")]
)
app.layout = html.Main([
dbc.Row([
html.H3("VACUUM PROCESSING INDEX", style={'text-align': 'center'}),
html.Div([
html.Span([
html.A("Raw Data",
href="/download_excel/",
style={'margin-right': '10px'}),
html.I(className="fa fa-arrow-circle-down")
],
className="button")
])
],
className='header',
style={'display': 'grid'}),
dbc.Container([
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
html.H4("Overall Index",
style={
'text-align': 'left',
'padding-bottom': 0
}),
dcc.Graph(figure=index_chart)
]),
]),
],
width=8),
dbc.Col([
dbc.Card(
[
dbc.CardHeader(
f"Current Index Value ({data.rebased_prices.index[-1].date()})"
),
dbc.CardBody([
html.H4(f"{round(data.current_index_value,2)} ",
className="card-title"),
html.P([
html.P(f"Daily change: "),
html.Span(
f"{round(data.daily_index_pct_change,2)} %",
className='number')
],
className="card-text"),
html.P([
html.P(f"Weekly change: "),
html.Span(
f"{round(data.weekly_index_pct_change,2)} %",
className='number')
],
className="card-text"),
html.P([
html.P(f"Monthly change: "),
html.Span(
f"{round(data.monthly_index_pct_change,2)} %",
className='number')
],
className="card-text"),
]),
],
style={"width": "18rem"},
),
],
width=4),
],
align='center'),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
dbc.Tabs([
dbc.Tab([html.Li(x) for x in COMPANY_NAMES],
label="Stocks in index",
style={
'text-align': 'left',
'padding': 10
}),
dbc.Tab([
dbc.Row([
html.
H4("Year over year index growth - 28 day MA",
style={'padding': 10}),
dcc.Graph(figure=yoy_growth_chart)
]),
dbc.Row([
html.H4("Calendar Growth Map",
style={'padding': 10}),
html.Img(src="assets/yoy_calmap.png",
style={'padding': 10})
])
],
label="YoY Growth"),
dbc.Tab(dbc.Table.from_dataframe(
data.monthly_returns_table,
striped=True,
bordered=True,
hover=True,
responsive=True),
label="Index Monthly Returns"),
dbc.Tab([
dbc.Row([
html.
H4("'Under-water Plot' - Drawdown Periods",
style={'padding': 10}),
dcc.Graph(figure=drawdown_chart)
]),
],
label="Drawdown"),
]),
]),
]),
]),
]),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
html.H1("Individual Stocks",
style={
'textAlign': 'center',
'padding-bottom': '20px'
}),
html.H4("Stock Price Growth",
style={
'text-align': 'left',
'padding-bottom': '10px'
}),
dcc.Graph(figure=swarm_plot),
html.H4("Stock Prices - Rebased",
style={
'text-align': 'left',
'padding-bottom': '10px'
}),
dcc.Dropdown(id='my-dropdown',
options=stock_list,
multi=True,
value=[x['value'] for x in stock_list],
style={
"display": "block",
"margin-left": "auto",
"margin-right": "auto",
"width": "60%"
}),
dcc.Graph(id='my-graph')
])
])
]),
]),
dbc.Row([html.Footer(html.P("Julian West"))], className="footer")
])
])
def initial_layout():
"""Create the layout displayed when the page is first loaded. Should be a blank graph."""
return html.Main([
html.Button(id='next-epoch', children='Epoch 0'),
dcc.Graph(id='figure', figure=fig)])
# Right side panel
right_side_panel = html.Div(
[
dbc.FormGroup([
dbc.Card(children=[
dbc.CardHeader([html.H4('Ingredient details')]),
dbc.CardBody([
html.Div([
html.P('Ingredient name: ', style=CARD_TEXT_STYLE),
html.P('Nothing selected',
id='selectedNode-id',
style={'margin-left': 1})
],
className='row'),
html.Main("Currently displaying {} nodes ".format(
len(set(nodes))),
id='total_nodes')
])
]),
html.Br(),
dbc.Card(children=[
dbc.CardHeader([html.H4('Tab views')]),
dbc.CardBody([
dbc.Nav([
dbc.NavLink("Table view",
href="/table_view",
id="table_view_link"),
dbc.NavLink("Graph view",
href="/graph_view",
id="graph_view_link"),
],
}),
duc.appsidebarfooter(),
duc.appsidebarminimizer()
],
fixed=True,
display='lg'),
html.Main(
[
duc.appbreadcrumb(appRoutes=[{
'path': '/',
'name': 'Dashboard'
}]),
#dbc.Container(id='page-content', fluid=True)
dbc.Container([
duc.approuteconditional(route='/',
children=dashboard_layout),
duc.approuteconditional(route='/charts',
children=charts_layout),
duc.approuteconditional(
route='/other/animals',
children=other_animals_layout)
],
id='page-content',
fluid=True)
],
className='main'),
duc.appaside([
duc.approuteconditional(
route='/',
children=dbc.Form([
html.H6('Dashboard Settings'),
dbc.FormGroup([
from . import tabs
layout = html.Div(
html.Main(
[
dcc.Location(id="page-location-url", refresh=False),
html.Div(
[
dcc.Tabs(
[
tabs.allocations(),
tabs.summary(),
tabs.metrics(),
tabs.returns(),
tabs.drawdowns(),
tabs.assets(),
tabs.overfitting(),
],
id="tabs",
value="allocations",
),
],
className="column",
),
],
className="columns",
),
className="section",
)
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# internal imports
from app import app
# define page layout
layout = html.Main([
html.Div([
html.Div([html.H1('End-of-Shift Reports')], className='row'),
html.Div([html.P('View by shifts or by residents below:')],
className='row'),
html.Div([
html.Div([
dcc.Dropdown(id='reports_location_input',
options=['hello test', 'hello bye'],
placeholder='Select a location to view')
],
className='col-md-6'),
html.Div(['Put some date selector here'], className='col-md-6')
],
className='row'),
html.Div(
[html.Div(id='report_overview_output', className='col-md-12')],
className='row')
],
className='col-md-12')
],
role='main')
href=
'https://www.mlbstatic.com/mlb.com/images/logos/apple-touch-icons-152x152/117.png'
),
html.Link(
rel='apple-touch-icon',
sizes='120x120',
href=
'https://www.mlbstatic.com/mlb.com/images/logos/apple-touch-icons-120x120/117.png'
),
]),
html.Main(className="container",
children=[
dcc.Interval(id='ticker'),
html.A(
href="https://www.mlb.com/astros/schedule",
children=[
html.Div(className='fhead', id='isitbaseballyet'),
html.Div(className='ftitle', id='title'),
html.Div(className='fbody', id='time-remaining'),
],
),
])
])
def time_remaining(end_dt):
now = dt.now()
t = (end_dt - now).total_seconds()
return {
'total': t,
'weeks': floor(t / (60 * 60 * 24 * 7)),
'days': floor(t / (60 * 60 * 24) % 7),
html.Div(style={"padding-left": "7%"},
id='chart',
className='col s9',
children=[
dcc.Graph(id='gantt-plot',
config={
'displayModeBar': False,
'showAxisDragHandles': False,
'autosizable': True
})
])
])
app.layout = html.Main(children=[
header(),
day_report(),
])
'''
The app needs to be able to
update the chart using the
variables input by the user
'''
@app.callback(dash.dependencies.Output('gantt-plot', 'figure'), [
dash.dependencies.Input('date-picker-single', 'date'),
dash.dependencies.Input('lines-dropdown', 'value')
])
def update_gantt(date, value):
converted_date = datetime.strptime(date, '%Y-%m-%d')
line_filtered = df[df['Line'] == value]
# Necessary to get more cytoscape layouts
cyto.load_extra_layouts()
"""
#####################
## Middle window ##
#####################
"""
# This will appear above the cytoscape node graph
node_graph_layout = dbc.Row(
[
dbc.Col(
[
# Drop down selector for layout of cytoscape, at the top of the page
html.Main("Choose graph layout style:"),
dcc.Dropdown(
id='dropdown-layout',
options=[
{'label': 'random',
'value': 'random'},
{'label': 'grid',
'value': 'grid'},
{'label': 'circle',
'value': 'circle'},
{'label': 'concentric',
'value': 'concentric'},
{'label': 'breadthfirst',
'value': 'breadthfirst'},
{'label': 'cose',
'value': 'cose'},
])
])
])
fig = plotly.tools.make_subplots(rows=2, cols=1, vertical_spacing=0.2)
fig["layout"]["margin"] = {
"l": 30, "r": 10, "b": 30, "t": 10
}
fig["layout"]["legend"] = {"x": 0, "y": 1, "xanchor": "left"}
main_area = html.Main(id="main-area", className="col-md-9 float-left col px-5 pl-md-2 pt-2 main", children=[
html.A(**{"data-target":"#sidebar", "data-toggle":"collapse"}, href="#", children=[
html.I(className="fa fa-navicon fa-2x py-2 p-1")
]),
html.Div(id="content-container-root", className="page-header", children=[
#service_list.layout,
]),
html.Div(id="walk-around", style={"display": "none"}, children=[service_list.layout()])
])
total = html.Div(className="container-fluid", children=[
html.Div(className="row d-flex d-md-block flex-nowrap wrapper", children=[
html.Div(style={"display":"none"}, children=[]),
sider_bar,
main_area
])
])
app.layout = html.Div(children=[
# walkalround that let client download js bundle, *bugs* in dash
html.Div(**{"data-parent":'#sidebar'}, className="collapse", id="menu3", children=[
html.A("3.1", **{"data-parent"='#menu3'}, href="#", className="list-group-item")
html.A("3.2", **{"data-toggle":"collapse","aria-expanded":"false"}, href="#menu3sub2",className="list-group-item")
html.Div(className="collapse", id="menu3sub2", children=[
html.A("3.2.a", **{"data-parent":"#menu3sub2"}, href="#", className="list-group-item")
html.A("3.2.b", **{"data-parent":"#menu3sub2"}, href="#", className="list-group-item")
html.A("3.2.c", **{"data-parent":"#menu3sub2"}, href="#", className="list-group-item")
])
html.A("3.3",**{"data-parent":"#menu3"}, href="#", className="list-group-item")
])
])
main_area = html.Main(className="col-md-9 float-left col px-5 pl-md-2 pt-2 main", children=[
html.A(**{"data-target":"#sidebar", "data-toggle":"collapse"}, href="#", children=[
html.I(className="fa fa-navicon fa-2x py-2 p-1")
])
html.Div(className="page-header", children=[
html.H2("Bootstrap 4 Sidebar Menu")
])
html.P("A responsive, multi-level vertical accordion.", className="lead")
html.Hr()
html.Div(className="row", children=[
html.Div(className="col-lg-6", children=[
html.Button("horizontal collapsible", **{"data-toggle":"collapse","data-target":'#demo',"aria-expanded":"true"}, role="button", className="btn btn-danger")
html.Div(**{"aria-expanded":"true"}, id="demo", className="width collapse show")
html.Div(className="list-group", style="width:400px", children=[
html.P("Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.")
html.P("Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.")
])
])
html.Main([
# Page Content Start
html.Div([
# Partision of page start
html.Div([
# Search row start
html.Div([
html.Div([
html.Div([
html.Div('Account Type', className='three columns'),
html.Div(dcc.Dropdown(id='accountSelector',options=onLoad_GetData(),value='All',className='nine columns')),
],className ='three columns'),
html.Div([
html.Div('Category Type', className='three columns'),
html.Div(dcc.Dropdown(id='categorySelector',value='All',className='nine columns')),
],className ='three columns'),
html.Div([
html.Div('Year', className='three columns'),
html.Div(dcc.Dropdown(id='yearSelector',value=str(datetime.now().year),className='nine columns')),
],className ='three columns'),
html.Div([
html.Div('Month', className='three columns'),
html.Div(dcc.Dropdown(id='monthSelector',value='00',className='nine columns')),
],className ='three columns'),
],className ='twelve columns'),
# Search row end
],className ='twelve columns'),
# Top row start
html.Div([
# table start
html.Div([
# ------------------------------------------------------------------------------
html.Div([
dt.DataTable(
# Initialise the rows
columns=['Date','Account','Title','MainCategory','Amount','Balance'],
rows=[{}],
row_selectable=False,
filterable=True,
sortable=True,
selected_row_indices=[],
max_rows_in_viewport = 10,
id='table'
),
html.Div(id='selected-indexes')
]),
# ------------------------------------------------------------------------------
# table end
], className="seven columns",style={'padding': divPadding}),
# Graph start
html.Div([
# ------------------------------------------------------------------------------
# Top Row Plots
html.Div([
#Scatter Plot
# html.Button('Refresh', id='buttonRefresh'),
dcc.Graph(id='lineGraph')
]),
# ------------------------------------------------------------------------------
# Graph end
], className="five columns",style={'padding': divPadding}),
# top row end
], className="twelve columns"),
# Bottom row start
html.Div([
# Bottom Row Plots
# https://community.plot.ly/t/two-graphs-side-by-side/5312
html.Div([
html.Div([
# html.Button('Plot Expenses', id='buttonExpense'),
dcc.Graph(id='categoryGraphExpenses')
], className="six columns",style={'padding': divPadding}),
html.Div([
# html.H1('Table')
# html.Button('Plot Income', id='buttonIncome'),
dcc.Graph(id='categoryBarGraphExpenses')
], className="six columns"),
], className="six columns",style={'padding': divPadding}),
html.Div([
html.Div([
# html.Button('Plot Expenses', id='buttonExpense'),
dcc.Graph(id='categoryGraphIncome')
], className="six columns",style={'padding': divPadding}),
html.Div([
# html.Button('Plot Income', id='buttonIncome'),
# html.H1('Table')
dcc.Graph(id='categoryBarGraphIncome')
], className="six columns",style={'padding': divPadding}),
], className="six columns")
# bottom row end
], className="twelve columns")
# Partision of page end
],className="mdl-grid"),
# Page content end
],className='page-content',style={'background-color': 'black'})
# Page Main End
],className='mdl-layout__content')
],
value=[])
]),
]),
]),
html.Main(
className="col-lg-9",
children=[
html.Div(
className="float-left bg-transparent",
style={
"height": "100%",
"width": "100%"
},
children=[
html.
H5("Performance Chart",
className=
"text-secondary d-flex align-items-center justify-content-center",
style={"height": 600})
]),
dcc.Loading([
html.Div(style={"height": 600},
children=[dcc.Graph(id="chart")])
])
])
])
])
def load_performance(filename, path="simulate_settings/performances/"):
{%metas%}
{%favicon%}
{%css%}
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>
'''
########################################################################################################################
# LAYOUTS
########################################################################################################################
layout = html.Div(
[Header(), html.Main([], id='page-content'),
Footer()],
id='contenido',
className='grid-container fluid')
app.layout = layout
if __name__ == '__main__':
#app.run_server(debug=True, port=8010)
app.run_server(debug=True, port=8010, host='0.0.0.0')
def display_page(pathname="/"):
project_name = pathname.strip('/')
if project_name and len(project_name) > 0:
pathname = path.join(path.normpath(tangager_data_folder),
project_name)
generation = tu.num_generations(pathname)
# Load DataFrames for both stats and individuals file.
all_dfs = tu.load_data_files(pathname)
slider_step = 1
num_slider_marks = 20
if generation > num_slider_marks:
slider_step = tu.slider_round(generation / num_slider_marks)
page_layout = html.Div(children=[
html.H1(f'Project {project_name}',
className='text-gray-400 font-bold text-5xl my-10'),
html.Main(
children=[
html.Div(all_dfs['statistics'].to_json(
date_format='iso', orient='split'),
id='stats-json',
style={'display': 'none'}),
html.Div(all_dfs['individuals'].to_json(
date_format='iso', orient='split'),
id='individuals-json',
style={'display': 'none'}),
tc.graph_panel(
children=[
dcc.Graph(id='gen-dist-plot',
figure=tp.generation_distribution(
all_dfs['individuals']),
responsive=True,
className="h-full w-full"),
html.Div('Select Generation',
className='self-start'),
dcc.Slider(id='gen-dist-slider',
className="w-full",
min=0,
max=generation,
step=1,
value=0,
marks={
i: f"{i}"
for i in
range(0, generation +
1, slider_step)
})
]),
tc.graph_panel(
children=[
tp.fitness_vs_generation(
all_dfs['statistics']),
]),
tc.graph_panel(
children=[
tp.plot_ec_stats(all_dfs['statistics']),
]),
tc.graph_panel(
children=[
tp.plot_ec_population(all_dfs['individuals']),
]),
tc.graph_panel(
children=[
tp.generation_network_graph(
all_dfs['individuals'])
],
className='2xl:col-span-2')
],
className='grid grid-cols-1 2xl:grid-cols-2 gap-6 mr-20'),
],
className='w-full bg-gray-100 pl-20')
else:
page_layout = tc.get_default_page(tanager_config)
return page_layout
children=html.Main(
children=[
html.Div(
className="container py-2",
children=[
components.header(
logo_url=app.get_asset_url("dash-dark.png"),
title=texts.DASHBOARD_TITLE,
),
components.historic_trend(chart_data=ds.filter(x_col="start_date")),
html.Div(
className="row align-items-md-stretch",
children=[
html.Div(
className="col-md-4",
children=components.dropdown_filters(
age_ranges_options=ds.get_age_ranges_options(),
years_options=ds.get_years_options(),
gender_options=ds.get_gender_options(),
),
),
html.Div(
className="col-md-8",
children=[
html.Div(
id="comparison-graph-div",
style={
"backgroundColor": PALETTE.plot_bgcolor,
},
className=(
"h-100 rounded-3 text-dark shadow-sm p-2 text-center"
),
),
],
),
],
),
],
)
]
),