Hello everyone,
I am a noob to dash and web apps so forgive my ignorant questions.
I am creating a dashboard that have multiple dash_core_components objects and I am trying to placed them side by side when the page is large enough. Currently all the objects are stacked onto of each other and haven’t been able to figure out how to solved this. I will attach my code at the bottom of this page for your review.
Thank you for your help.
C.
import dash
import dash_core_components as dcc
import dash_html_components as html
import datetime
import pandas as pd
import QryMng as qrm
print(dcc.version)
collection = qrm.MongoConnect.FetchCollection(‘XXXX@XXXX’,
‘XXXXXX’,‘XXX.XXX.XXX’,
‘Dashboard’, ‘ProcessDetail’)
wk = datetime.datetime.now() - datetime.timedelta(days=30)
td = datetime.datetime.now() + datetime.timedelta(hours=12)
qry_results = qrm.MongoConnect.QueryConsructor(collection,
[‘TaxYear’,‘ProcessDt’],
[[2017,2018], ‘placeholder’],
gt_lt = [‘ProcessDt’, wk,’$gt’,
‘ProcessDt’, td,’$lt’])
df = pd.DataFrame(list(qry_results))
df[‘CreateDt’] = df[‘CreateDt’] - datetime.timedelta(hours=5)
df[‘EndTime’] = df[‘EndTime’] - datetime.timedelta(hours=5)
err_code = pd.read_csv(’…\ErrorCodes.txt’)
df[‘Status’] = df[‘Status’].map(err_code.set_index(‘Code’)[‘Description’])
clusters = pd.read_csv(’…\Client_Key_Table.csv’)
df = pd.merge(df, clusters, how=‘left’, on=‘ClientId’)
df[‘Comment’] = df[‘Comment’].fillna(’’)
df[‘Clusters’].fillna(‘Unassigned’, inplace=True)
proc = pd.read_csv(’…\ProcessList.csv’)
clients = df[‘ClientId’].unique()
process = proc[‘0’].tolist()
clusters = [‘Charlotte’,‘Phace3’,‘Beta’,‘Direct’,‘InTrader’,‘OneSource’,‘Unassiged’]
taxyear = [str(datetime.date.today().year - 3),
str(datetime.date.today().year - 2),
str(datetime.date.today().year - 1),
str(datetime.date.today().year)]
status = [‘Completed’, ‘Error’, ‘In Progress’, ‘Terminated’]
app = dash.Dash()
colors = {‘background’: ‘#292730’,
‘text’: ‘#36b540’}
app.layout = html.Div([
html.P(‘Client Clusters’),
html.P(’’),
dcc.Checklist(
id = ‘ClustersBox’,
options=[
{‘label’: i, ‘value’: i} for i in clusters
],
values=[],
labelStyle={
‘display’: ‘list-item’, ‘textAlign’ : ‘justify’
}
),
html.P(‘Tax Year’),
html.P(’’),
dcc.Checklist(
id = ‘TaxYr’,
options=[
{‘label’: i, ‘value’: i} for i in taxyear
],
values=[],
labelStyle={
‘display’: ‘list-item’
}
),
html.P('Status'),
html.P(''),
dcc.Checklist(
id = 'Status',
options=[
{'label': i, 'value': i} for i in status
],
values=[],
labelStyle={
'display': 'list-item'
}
),
html.P('Clients'),
html.P(''),
dcc.Dropdown(
id = 'clients',
options=[
{'label': i, 'value': i} for i in clients
],
value=[],
multi = True
),
html.P('Process'),
html.P(''),
dcc.Dropdown(
id = 'process',
options=[
{'label': i, 'value': i} for i in process
],
value=[],
multi = True
),
html.P('Date Range'),
html.P(''),
dcc.DatePickerRange(
id='my-date-picker-range',
min_date_allowed= wk,
max_date_allowed= td,
initial_visible_month = td
),
html.Div(id='output-container-date-picker-range')
]
)
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})
app.css.config.serve_locally = False
app.scripts.config.serve_locally = False
if name == ‘main’:
app.run_server(debug=False, port=8000)