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