cards_tab = dac.TabItem( id='content_cards', children=[ html.Div([ dac.Box([ dac.BoxHeader(dac.BoxDropdown(dropdown_items), collapsible=True, closable=True, title="Closable box with dropdown"), dac.BoxBody( dcc.Graph(figure=plot_pie(), config=dict(displayModeBar=False), style={'width': '38vw'})) ], color='warning', width=6), dac.Box([ dac.BoxHeader(collapsible=True, closable=True, title="Closable box with gradient"), dac.BoxBody( dcc.Graph(figure=plot_surface(), config=dict(displayModeBar=False), style={'width': '38vw'})) ], gradient_color="success", width=6) ], className='row'), html.Div(dac.Box([ dac.BoxHeader(collapsible=True, closable=True, title="Card with solidHeader and elevation"), dac.BoxBody( dcc.Graph(figure=plot_scatter(), config=dict(displayModeBar=False), style={'width': '38vw'})) ], color='primary', solid_header=True, elevation=4, width=6), className='row') ])
tab_cards_tab = dac.TabItem(id='content_tab_cards', children=[ html.Div( [ dac.TabBox( [ dac.TabBoxHeader( dac.TabBoxMenu( [ dac.TabBoxMenuItem(tab_id='tab_box_1_tab1', label='Tab 1'), dac.TabBoxMenuItem(tab_id='tab_box_1_tab2', label='Tab 2'), dac.TabBoxMenuItem(tab_id='tab_box_1_tab3', label='Tab 3') ], id='tab_box_1_menu' ), collapsible = False, closable = True, title="A card with tabs" ), dac.TabBoxBody( id='tab_box_1' ) ], width=6, elevation=2 ), dac.TabBox( [ dac.TabBoxHeader( dac.TabBoxMenu( [ dac.TabBoxMenuItem(tab_id='tab_box_2_tab1', label='Tab 1', color='dark'), dac.TabBoxMenuItem(tab_id='tab_box_2_tab2', label='Tab 2', color='danger'), dac.TabBoxMenuItem(tab_id='tab_box_2_tab3', label='Tab 3', color='primary') ], id='tab_box_2_menu' ), closable=True, title="A card with colorful tabs" ), dac.TabBoxBody( id='tab_box_2' ) ], color='warning', width=6, elevation=2 ) ], className='row' ) ] )
brand_color="primary", url="http://localhost:8050/", src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg", elevation=3, opacity=0.8) # Body body = dac.Body( dac.TabItems([ anomaly_tab, validation_tab, tab_inicio, table_comparison_tab, value_boxes_tab, dac.TabItem( html.P('Gallery 1 (You can add Dash Bootstrap Components!)'), id='content_gallery_1'), dac.TabItem( html.P('Gallery 2 (You can add Dash Bootstrap Components!)'), id='content_gallery_2'), ])) # Controlbar controlbar = dac.Controlbar([ html.P("Seleccionar clientes"), html.Div([ dcc.Dropdown(id='crossfilter-rut', options=[{ 'label': i, 'value': i } for i in available_indicators],
tab_inicio = dac.TabItem(id='content_inicio', children=[ html.Div([ html.Div( [ dac.UserCard( src = "https://adminlte.io/themes/AdminLTE/dist/img/user1-128x128.jpg", color = "info", title = "Bienvenido", subtitle = "Administrador", elevation = 4, children="Plataforma de DataQuality" ) ], className='row d-flex justify-content-center' ),], className='container'), html.Div([ html.Div([ #html.Div([ dcc.Upload( id='datatable-upload', children=html.Div([ 'Drag & Drop o ', html.A('Seleccione un archivo') ]), style={ 'width': "100%", 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'outset', 'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px', 'color':'#ffffff', 'background-color':'#eb8c17'},) ], className='row d-flex justify-content-center'), html.Div([ dash_table.DataTable( id='datatable-upload-container', style_as_list_view=True, style_data_conditional=[{'if': {'row_index': 'odd'},'backgroundColor': 'rgb(248, 248, 248)'}], style_header={'backgroundColor': '#f5b86e','fontWeight': 'bold'}, style_table={'overflowX': 'scroll'}, fixed_rows={ 'headers': True, 'data': 0 }, ) #], className="col-12") ], className="row d-flex justify-content-center") ], className='container') ] )
import dash_html_components as html import dash_admin_components as dac social_cards_tab = dac.TabItem( id='content_social_cards', children=html.Div([ dac.UserCard( src= "https://adminlte.io/themes/AdminLTE/dist/img/user1-128x128.jpg", color="info", title="User card type 1", subtitle="a subtitle here", elevation=4, children="Any content here"), dac.UserCard( type=2, src= "https://adminlte.io/themes/AdminLTE/dist/img/user7-128x128.jpg", color="success", image_elevation=4, title="User card type 2", subtitle="a subtitle here", children="Any content here") ], className='row'))
anomaly_tab = dac.TabItem(id='anomaly_cards', children=[ html.Div([ html.Div([ dac.ValueBox( value=anomD_lastMonth, subtitle="Cantidad en el último mes", color = "primary", icon = "eye", href = "#" ), dac.ValueBox( elevation = 4, value = anomD_lastMonth-anomD_previousMonth, subtitle = "Diferencia con el mes anterior", color = "danger", icon = "exclamation-circle" ), dac.ValueBox( value = anomA_lastMonth, subtitle = "Cantidad en el último mes", color = "warning", icon = "eye" ), dac.ValueBox( value = anomA_lastMonth-anomA_previousMonth, subtitle = "Diferencia con el mes anterior", color = "success", icon = "exclamation-circle" ), dac.Box( [ dac.BoxHeader( dac.BoxDropdown(dropdown_items), collapsible = True, closable = True, title="Anomalías en la renta Diaria" ), dac.BoxBody( dcc.Graph( id='box-renta_diaria', config=dict(displayModeBar=False), style={'width': '37vw'} ) ) ], color='primary', solid_header=True, elevation=4, width=6 ), dac.Box( [ dac.BoxHeader( dac.BoxDropdown(dropdown_items), collapsible = True, closable = True, title="Anomalías en la renta Acumulada" ), dac.BoxBody( dcc.Graph( id='box-renta_acum', config=dict(displayModeBar=False), style={'width': '37vw'} ) ) ], color='primary', solid_header=True, elevation=4, width=6 )], className='row' ), html.Div([ html.H4('Anomalías Renta Diaria'), dash_table.DataTable( id='tabla_rnt_diaria', style_as_list_view=True, style_data_conditional=[{'if': {'row_index': 'odd'},'backgroundColor': 'rgb(248, 248, 248)'}], style_header={'backgroundColor': '#f5b86e','fontWeight': 'bold'}, style_table={'overflowX': 'scroll'}, columns=[ {'name': i, 'id': i, 'deletable': True} for i in sorted(anomD.columns) ], page_current=0, page_size=8, page_action='custom', sort_action='custom', sort_mode='single', sort_by=[] ) ], className='container mt-3'), html.Div([ html.H4('Anomalías Renta Acumulada'), dash_table.DataTable( id='tabla_rnt_acum', style_as_list_view=True, style_data_conditional=[{'if': {'row_index': 'odd'},'backgroundColor': 'rgb(248, 248, 248)'}], style_header={'backgroundColor': '#f5b86e','fontWeight': 'bold'}, style_table={'overflowX': 'scroll'}, columns=[ {'name': i, 'id': i, 'deletable': True} for i in sorted(anomA.columns) ], page_current=0, page_size=8, page_action='custom', sort_action='custom', sort_mode='single', sort_by=[] ) ], className='container mt-3'), html.Div([ html.Div([ #html.Div([ dac.Box( [ dac.BoxHeader( dac.BoxDropdown(dropdown_items), collapsible = True, closable = True, title="Cantidad de anomalías Renta diaria" ), dac.BoxBody( dcc.Graph( id='box-anomD_cont', config=dict(displayModeBar=False), style={'width': '36vw'} ) ) ], color='primary', solid_header=True, elevation=4, width=6 ), #], className='col-6'), #html.Div([ dac.Box( [ dac.BoxHeader( dac.BoxDropdown(dropdown_items), collapsible = True, closable = True, title="Cantidad de anomalías Renta acumulada" ), dac.BoxBody( dcc.Graph( id='box-anomA_cont', config=dict(displayModeBar=False), style={'width': '36vw'} ) ) ], color='primary', solid_header=True, elevation=4, width=6 ) #], className='col-6') ], className='row') ], className='container mt-5') ],className='container') ] )
value_boxes_tab = dac.TabItem( id='content_value_boxes', children=[ html.H4('Value Boxes'), html.Div([ dac.ValueBox(value=150, subtitle="New orders", color="primary", icon="shopping-cart", href="#"), dac.ValueBox(elevation=4, value="53%", subtitle="New orders", color="danger", icon="cogs"), dac.ValueBox(value="44", subtitle="User Registrations", color="warning", icon="suitcase"), dac.ValueBox(value="53%", subtitle="Bounce rate", color="success", icon="database") ], className='row'), html.H4('Info Boxes'), html.Div([ dac.InfoBox(title="Messages", value=1410, icon="envelope"), dac.InfoBox( title="Bookmarks", color="info", value=240, icon="bookmark"), dac.InfoBox(title="Comments", gradient_color="danger", value=41410, icon="comments") ], className='row'), ])
import dash_html_components as html import dash_core_components as dcc import dash_admin_components as dac from example_plots import plot_scatter basic_boxes_tab = dac.TabItem( id='content_basic_boxes', children=html.Div([ dac.SimpleBox(style={'height': "600px"}, title="Box 1", children=[ dcc.Graph(id='box-graph', config=dict(displayModeBar=False), style={'width': '38vw'}) ]), dac.SimpleBox(style={'height': "600px"}, title="Box 2", children=[ dcc.Graph(figure=plot_scatter(), config=dict(displayModeBar=False), style={'width': '38vw'}) ]) ], className='row'))
def render_content(tab): if tab == 'tab-1': return html.Div([ dac.TabItem(id='content_value_boxes', children=[ html.Div([ dac.InfoBox(title="TOTAL CONFIRMED ", value=sum(report["Confirmed"]), gradient_color="danger", icon="bookmark"), dac.InfoBox(title="TOTAL RECOVERED", gradient_color="success", value=sum(Recovered.iloc[:, -1]), icon="bookmark"), dac.InfoBox(title="TOTAL DEATHS", color="black", value=sum(report["Deaths"]), icon="bookmark") ], className='row') ]), dbc.Container([ dcc.RadioItems( id='maptype', options=[{ 'label': i, 'value': i } for i in [ 'National_map', 'open-street-map', 'stamen-toner', '3D' ]], value='National_map', labelStyle=items_style), ]), dcc.Graph(id='graph-1-tabs', figure=fig) ]) elif tab == 'tab-2': return html.Div([ html.H3('Worldwide Evolution of COVID19'), dcc.Graph(id='graph-2-tabs', figure=fig3), html.H2('Evolution of COVID19 by country'), dcc.Dropdown(id='country', options=[{ 'label': i, 'value': i } for i in factors], value=['Spain', 'Italy'], multi=True), html.Div([ html.Div([dcc.Graph(id='confirmed-evolution')], className="six columns", style={'display': 'inline-block'}), html.Div([dcc.Graph(id='death-evolution')], className="six columns", style={'display': 'inline-block'}), ], className="row", style={ 'width': '100%', 'display': 'inline-block' }) ]) elif tab == 'tab-3': return html.Div([ dash_table.DataTable( id='datatable-interactivity', columns=[{ "name": i, "id": i, "deletable": True, "selectable": True } for i in globalreport.columns], data=globalreport.to_dict('records'), editable=True, filter_action="native", sort_action="native", sort_mode="multi", column_selectable="single", row_selectable="multi", row_deletable=True, selected_columns=[], selected_rows=[], page_action="native", page_current=0, page_size=10, style_table={'textAlign': 'center'}, style_cell={ 'padding': '5px', 'fontSize': 12, 'textAlign': 'center' }, style_header={ 'backgroundColor': 'white', 'fontWeight': 'bold', 'fontSize': 12 }, ) ])
validation_tab = dac.TabItem( id='validations_cards', children=html.Div([ html.Div([ dac.Box( [ dac.BoxHeader(dac.BoxDropdown(dropdown_items), collapsible=True, closable=True, title="Campos con datos Inválidos"), dac.BoxBody( dcc.Graph(figure=plot_bar(), config=dict(displayModeBar=True, scrollZoom=True), style={'width': '37vw'})) ], color='warning', ), dac.ValueBox(value=len(all_errors), subtitle="Errores detectados", color="success", icon="bug", href="#") ], className='row'), html.Div([ html.H4('Errores Detectados'), dash_table.DataTable(id='errores-detectados', style_as_list_view=True, style_data_conditional=[{ 'if': { 'row_index': 'odd' }, 'backgroundColor': 'rgb(248, 248, 248)' }], style_header={ 'backgroundColor': '#f5b86e', 'fontWeight': 'bold' }, style_table={'overflowX': 'scroll'}, columns=[{ 'name': i, 'id': i, 'deletable': True } for i in sorted(all_errors.columns)], page_current=0, page_size=8, page_action='custom', sort_action='custom', sort_mode='single', sort_by=[]) ], className='container') ], className='container'))
invalid_col, invalid_row = tc.indicator(rec1, rec2) table = dbc.Table( #table_header + table_body, tc.generate_table(rec1, rec2)[0] + tc.generate_table(rec1, rec2)[1], bordered=True, #dark=True, hover=True, responsive=True, striped=True, ) table2 = dbc.Table( #table_header + table_body, tc.generate_table(rec2, rec1)[0] + tc.generate_table(rec2, rec1)[1], bordered=True, #dark=True, hover=True, responsive=True, striped=True, ) table_comparison_tab = dac.TabItem( id='content_table_comparation', children=html.Div([ html.Div([html.H4('Fuente de Datos: PostgresSQL'), table], className='container'), html.Div([html.H4('Fuente de Datos: Archivo CSV'), table2], className='container') ], className='container'))