I am creating an app that will allow the user to filter his requirements and then look at the figure. I am able to get the desired graph and also all the filters. However, I am facing issues in styling.
Even after appending the css in to my app and mentioning the className, i am not able to see the changes in my app. Kindly look into my code and let me know what I am doing wrong. Thanks in advance!
app.layout = html.Div([
html.Div([
html.P([
html.Label('Choose a Site',style = {'fontSize':18}),
dcc.Dropdown(
id ='Site_input',
options = [{'label':i, 'value' : i} for i in data['Site'].unique()],
value = 'RD MINES',
placeholder='Select a Site'
)
], className = "three columns"),
html.P([
html.Label('Choose a Equipent id',style = {'fontSize':18}),
dcc.Dropdown(
id = 'eqid_input'
)
],className = 'three columns'),
html.P([
html.Label('Choose a Equipent type', style = {'fontSize':18}),
dcc.Dropdown(
id = 'etype_input')
],className = 'three columns')
], className = "row"),
html.Div([
dcc.Tabs(id="tabs", children=[
dcc.Tab(label='Equipment Health',
children =[
html.Div([
html.Label(id = 'health')
]),
html.P([
html.Label("Recent Date Data:"),
html.Div([
dash_table.DataTable(
id='table')
])
])
]) ,
dcc.Tab(label='Wear Metals',
children=[
html.Div(dcc.Checklist(id = 'metal_inp',
options=[
{'label': 'Iron', 'value': 'Fe'},
{'label': 'Chromium', 'value': 'Cr'},
{'label': 'Tin', 'value': 'Sn'},
{'label': 'Aluminium', 'value': 'Al'},
{'label': 'Nickel', 'value': 'Ni'},
{'label': 'Manganese', 'value': 'Mn'},
{'label': 'Copper', 'value': 'Cu'},
{'label': 'Lead', 'value': 'Pb'},
{'label': 'Silver', 'value': 'Ag'},
{'label': 'Vanadium', 'value': 'V'},
{'label': 'Titanium', 'value': 'Ti'}
],
value=['Fe', 'Cr'])),
dcc.Graph(id = 'metal_graph'
)
]),
dcc.Tab(label='Contamination',
children=[
html.Div(dcc.Checklist(id = 'cont_inp',
options=[
{'label': 'Water', 'value': 'Water Content'},
{'label': 'Particle', 'value': 'Partical Counter'},
{'label': 'Silica', 'value': 'Si'},
{'label': 'Sodium', 'value': 'Na'},
{'label': 'Potassium', 'value': 'K'}
],
value=['Si','Na'])),
dcc.Graph(id = 'cont_graph'
)
]),
dcc.Tab(label='Oil Condition',
children =[
html.Div(dcc.Checklist(id = 'oilcond_inp',
options=[
{'label': 'Viscosity at 40C', 'value': 'Viscosity 40'},
{'label': 'Viscosity AT 100C', 'value': 'Viscosity 100'},
{'label': 'TAN', 'value': 'TAN'}
],
value=['TAN','Viscosity 40'])),
dcc.Graph(id = 'oilcond_graph'
)
]
),
dcc.Tab(label='Additives',
children = [
html.Div(dcc.Checklist(id = 'add_inp',
options=[
{'label': 'Calcium', 'value': 'Ca'},
{'label': 'Magnesium', 'value': 'Mg'},
{'label': 'Cadmium', 'value': 'Cd'},
{'label': 'Boron', 'value': 'B'},
{'label': 'Zinc', 'value': 'Zn'},
{'label': 'Phosphorous', 'value': 'P'},
{'label': 'Barium', 'value': 'Ba'},
{'label': 'Molybdenum', 'value': 'Mo'}
],
value=['Ca','Mg'] )),
dcc.Graph(id = 'add_graph'
)
]
),
dcc.Tab(label='All Parameters',
children = [
html.Label("Wear metal:"),
dcc.Dropdown(id = 'allinp1',
options=[
{'label': 'Iron', 'value': 'Fe'},
{'label': 'Chromium', 'value': 'Cr'},
{'label': 'Tin', 'value': 'Sn'},
{'label': 'Aluminium', 'value': 'Al'},
{'label': 'Nickel', 'value': 'Ni'},
{'label': 'Manganese', 'value': 'Mn'},
{'label': 'Copper', 'value': 'Cu'},
{'label': 'Lead', 'value': 'Pb'},
{'label': 'Silver', 'value': 'Ag'},
{'label': 'Vanadium', 'value': 'V'},
{'label': 'Titanium', 'value': 'Ti'}], multi =True, value = ['Fe']),
html.Label("Contamination:"),
dcc.Dropdown(id = 'allinp2',
options=[
{'label': 'Water', 'value': 'Water Content'},
{'label': 'Particle', 'value': 'Partical Counter'},
{'label': 'Silica', 'value': 'Si'},
{'label': 'Sodium', 'value': 'Na'},
{'label': 'Potassium', 'value': 'K'}], multi =True, value = ['K']),
html.Label("Oil Condition:"),
dcc.Dropdown(id = 'allinp3',
options=[
{'label': 'Viscosity at 40C', 'value': 'Viscosity 40'},
{'label': 'Viscosity AT 100C', 'value': 'Viscosity 100'},
{'label': 'TAN', 'value': 'TAN'}], multi = True, value = ['Viscosity 100']),
html.Label("Additives:"),
dcc.Dropdown(id = 'allinp4',
options=[
{'label': 'Calcium', 'value': 'Ca'},
{'label': 'Magnesium', 'value': 'Mg'},
{'label': 'Cadmium', 'value': 'Cd'},
{'label': 'Boron', 'value': 'B'},
{'label': 'Zinc', 'value': 'Zn'},
{'label': 'Phosphorous', 'value': 'P'},
{'label': 'Barium', 'value': 'Ba'},
{'label': 'Molybdenum', 'value': 'Mo'}
],multi = True,
value=['Ca','Mg'] ),
dcc.Graph(id = 'allgraph'
)
]
)
]
)
], className = 'row')
])