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' })