app.layout = html.Div(children=[
html.H1(children='Dashboard Diabetes (by Baron P.Hartono)',
className='titleDashboard'),
dcc.Tabs(id="tabs",
value='tab-1',
children=[
dcc.Tab(label='Diabetes Dataset',
value='tab-1',
children=[renderTable(dfDiabetes)]),
dcc.Tab(label='Scatter Plot',
value='tab-2',
children=[renderScatterPlot(dfDiabetes)]),
dcc.Tab(label='Test Predict',
value='tab-3',
children=[renderModelPredict()]),
],
style={'fontFamily': 'system-ui'},
content_style={
'fontFamily': 'Arial',
'borderBottom': '1px solid #d6d6d6',
'borderLeft': '1px solid #d6d6d6',
'borderRight': '1px solid #d6d6d6',
'padding': '44px'
})
],
style={
'maxWidth': '1200px',
'margin': '0 auto'
})
html.Div([
dcc.Dropdown(
id='jenisDiamond',
options=[{'label': i.capitalize(), 'value': i} for i in ['cut','color','clarity']],
value='cut',
)
],className='col-6'),
],className='row'),
dcc.Graph(
id='categoricalPlot',
)
])
]),
dcc.Tab(label='Test Predict', value='tab-4',children=[
renderModelPredict()
]),
], style={
'fontFamily': 'system-ui'
}, content_style={
'fontFamily': 'Arial',
'borderBottom': '1px solid #d6d6d6',
'borderLeft': '1px solid #d6d6d6',
'borderRight': '1px solid #d6d6d6',
'padding': '44px'
})
], style={
'maxWidth': '1200px',
'margin': '0 auto'
})