dbc.Col([
html.H4("4. Which flavor do you like?"),
dcc.Graph(id="pie-chart"),
]),
dbc.Col([
html.H4("5. Which course do you want?"),
dcc.Graph(id="hist-stacked")
])
]),
dbc.Row([
dbc.Col([
html.H4("6. Choose and cook!"),
dash_table.DataTable(
id='table',
page_current=0,
page_size=15,
page_action='custom',
style_as_list_view=True,
)
])
], align="center"),
dbc.Row([
dbc.Col([
html.A(
dbc.Button("Reset all", color="warning", className="mr-1"),
href='/'),
])
]),
dbc.Row([
dbc.Col([
'width': '1000px',
'maxWidth': '1000px',
'overflowY': 'scroll',
'overflowX': 'scroll'
},
style_header={
'backgroundColor': 'rgb(220, 220, 220)',
'fontWeight': 'bold'
})
subject_table = dash_table.DataTable(
id='subject-table',
columns=columns,
data=subjs,
editable=True,
# allow sorting
sort_action='native',
# allow filtering
filter_action='native',
# # # allow selecting a single entry
row_selectable='single',
**table_style_template)
app.layout = html.Div( #app MUST have a layout in order to launch, first UI element is Div
children=[ #First argument is children (can include or not) & include a list
'Mouse table', subject_table
])
# If I run this module as a script
if __name__ == '__main__':
app.run_server(debug=True)
def update_output(clicks, input_value):
if clicks is not None:
# print("Hello")
# print(clicks)
hyperschedule_input = json.loads(input_value)
data = []
for course in hyperschedule_input:
courses_costs = {}
courseCode = course["courseCode"]
courses_costs["Course Code"] = courseCode
courses_costs["Course Name"] = course["courseName"]
if False: # courseCode in course_ratings_dict: # TODO: Change this
courses_costs["Rating"] = course_ratings_dict[courseCode]
else:
courses_costs["Rating"] = 0
data.append(courses_costs)
selectable_columns = [i for i in range(len(data))]
courses_datatable = dash_table.DataTable(
id="courses-table",
columns=[{
"name": i,
"id": i,
"editable": j
} for i, j in [
("Course Code", False),
("Course Name", False),
("Rating", True),
]],
data=data,
sort_action="native",
sort_mode="single",
column_selectable="multi",
row_selectable="multi",
selected_rows=selectable_columns,
page_action="native",
style_header={
"backgroundColor": "rgb(30, 30, 30)",
"color": "white"
},
style_table={
"height": table1Height,
"width": table1Width,
"overflowY": "auto",
},
style_cell={
"backgroundColor": bgString,
"color": "black",
"overflow": "hidden",
"textOverflow": "ellipsis",
"textAlign": "left",
"fontSize": table1FontSize,
},
style_data_conditional=[
{
"if": {
"column_id": "Rating"
},
"backgroundColor": "#32a893",
"color": "white",
"text-align": "center",
},
{
"if": {
"state": "active"
},
"backgroundColor": "rgb(200, 200, 200)",
"border": "1px solid rgb(0, 116, 217)",
},
{
"if": {
"state": "selected"
},
"backgroundColor": "rgb(200, 200, 200)",
"border": "1px solid rgb(0, 116, 217)",
},
],
)
requirements_table = dash_table.DataTable(
id="requirements-table",
columns=[{
"name": i,
"id": i,
"deletable": True
} for i in requirements_template_df.columns],
data=requirements_template_df.to_dict("records"),
editable=True,
page_action="none",
style_header={
"backgroundColor": "rgb(30, 30, 30)",
"color": "white"
},
# style_data={
# 'height': 'auto'
# },
style_cell={
"backgroundColor": bgString,
"color": "black",
"whiteSpace": "normal",
"minWidth": "250px",
# 'maxWidth': '200px',
"width": "250px",
"height": "auto",
"textAlign": "center",
"fontSize": table2FontSize,
},
style_table={
"height": table2Height,
"width": table2Width,
"overflowY": "auto",
"overflowX": "auto",
},
)
final_button = dbc.Button(
id="submit-button-2",
type="submit",
children="Calculate the Optimal Course Schedule!",
size="lg",
color="primary",
className="mr-1"
# style={"width": "600px", "height": "100px"}
)
add_col_button = dbc.Button(
"Add Requirement",
id="adding-cols-button",
color="success",
className="mr-1",
size="rg",
style={
"marginLeft": 75,
"fontSize": 25
},
)
rating_instructions_modal = html.Div([
dbc.Button("Open", id="open-centered"),
dbc.Modal(
[
dbc.ModalHeader("Header"),
dbc.ModalBody("This modal is vertically centered"),
dbc.ModalFooter(
dbc.Button("Close",
id="close-centered",
className="ml-auto")),
],
id="modal-centered",
centered=True,
),
])
requirement_instructions_modal = html.Div([
dbc.Button("Open", id="open-centered-2"),
dbc.Modal(
[
dbc.ModalHeader("Header"),
dbc.ModalBody("This modal is vertically centered"),
dbc.ModalFooter(
dbc.Button("Close",
id="close-centered",
className="ml-auto")),
],
id="modal-centered-2",
centered=True,
),
])
return [
{
"display": "none"
},
[
dbc.Row(
[
html.H2(
"Enter Your Course Ratings: ",
style={
"textAlign": "center",
},
),
dbc.Button(
[html.I(className="fa fa-question-circle"), ""],
color="info",
style={"marginLeft": 75},
),
],
justify="center",
align="center",
style={"marginTop": 50},
),
dbc.Row([courses_datatable], align="center", justify="center"),
dbc.Row(
[
html.H2("Requirements: ", style={"fontSize": 45}),
add_col_button,
dbc.Button(
[html.I(className="fa fa-question-circle"), ""],
color="info",
style={"marginLeft": 150},
),
],
justify="center",
align="center",
style={"marginTop": 50},
),
dbc.Row(
[requirements_table],
justify="center",
align="center",
),
dbc.Row(
dbc.Col(
[final_button],
width={
"size": 6,
"offset": 2
},
style={"marginTop": 50},
),
justify="center",
),
],
]
else:
return (no_update, no_update)
# Creating the application, which is running the interactive page
demo_app = dash.Dash(__name__, **options)
demo_app.layout = html.Div(children=[
# Creates the Headline
html.H1(children='Spreadsheet Energy System Model Generator -'
'Interactive Results'),
# Creates the Sub-Headline
html.Div(children='''Summary of the modelling:'''),
# Creates Table 1
dash_table.DataTable(
id='table2',
# Defines, that all columns from df_summary shall be shown
columns=[{
"name": i,
"id": i
} for i in df_summary.columns],
data=df_summary.to_dict('records'),
# Defines the Style of the Table
style_table={'margin': {
'b': 10000
}}),
# Includes Image
DashCanvas(id='graph',
tool='line',
lineWidth=5,
lineColor='red',
image_content='data:image/png;base64,{}'.format(test_base64),
width=canvas_width),
# Creates the Sub-Headline
html.Div(children=[
html.Div("-"),
[
html.Div(
[
dash_table.DataTable(
id='table',
columns=[{
"name": i,
"id": i
} for i in df.columns],
style_table={
'width': '600px',
'maxHeight': '300',
},
data=df.to_dict('records'),
fixed_rows={
'headers': True,
'data': 0
},
style_cell={
# all three widths are needed
'minWidth': '180px',
'width': '180px',
'maxWidth': '180px',
'whiteSpace': 'no-wrap',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
},
),
],
className="six columns"),
html.Div([
className = 'dropdown',
),
html.Div([
html.Label('.'),
html.Button('Submit', id='submit_button', type='submit'),
],
className = 'bottom-divs-sub',
),
],
),
# show input
html.Div([
dash_table.DataTable(
id = 'table',
columns = [],
style_cell = {'backgroundColor': 'white', 'color': 'rgb(50, 50, 50)', 'font_family': 'sans-serif', 'width': '13vw'},
style_as_list_view = True,
)
],
style={'margin-top': 90}
)
],
className = 'tab-div-sides',
)
]),
# tab 2: outflow
dcc.Tab(label='Retain', className='custom-tab', selected_className='custom-tab--selected', children=[
# outlfow past
html.Div([
"""),
html.Div(
id="display-selected-num"
),
html.Div(children=[
html.H3('Calls '),
daq.ToggleSwitch(id='toggle-cdr-ipdr',value=False, size=40),
html.H3('Internet')],id='switch-cdr-ipdr'),
# html.Div([
# html.Pre(id='click-data-table', )]
# , id='click-data-cdr-table'),
html.Div([html.Pre(id='click-data-table',)],id='click-cdr-data-table'),
dash_table.DataTable(id='click-data-cdr-table', columns=(
[{'id': header, 'name': header} for header in final_data_columns]
),),
html.Div([
dcc.Markdown(
"#### Usage Statistics of various Apps"
),
dcc.Graph(
id='pie-chart'
),
dcc.Markdown(
"**App usage of the person selected**"
),
def heatmap_component():
container = html.Div(style={
'flex': 1,
'display': 'flex',
'flexDirection': 'row',
'marginTop': '3px'
})
container_left = html.Div(
style={
'flex': 1,
'display': 'flex',
'flexDirection': 'column',
#'JustifyContent': 'space-between',
'marginTop': '3px'
})
container_middle = html.Div(
style={
'flex': 1,
'display': 'flex',
'flexDirection': 'column',
'marginTop': '3px'
})
container_right = html.Div(style={'flex': 1})
type_selector = dcc.Dropdown(
id='heatmap-selector',
options=[{
'label': 'destination square',
'value': 'destination'
}, {
'label': 'origin square',
'value': 'origin'
}, {
'label': 'occupied squares',
'value': 'occupied'
}],
value='destination',
clearable=False,
)
piece_selector = dcc.Dropdown(
id='piece-selector',
options=[
{
'label': 'All pieces',
'value': 'all'
},
{
'label': 'Pawn',
'value': 'p'
},
{
'label': 'Knight',
'value': 'n'
},
{
'label': 'Bishop',
'value': 'b'
},
{
'label': 'Rook',
'value': 'r'
},
{
'label': 'Queen',
'value': 'q'
},
{
'label': 'King',
'value': 'k'
},
],
value='all',
clearable=False,
)
color_selector = dcc.Dropdown(
id='color-selector',
options=[
{
'label': 'Both players',
'value': 'both'
},
{
'label': 'White',
'value': 'white'
},
{
'label': 'Black',
'value': 'black'
},
],
value='both',
clearable=False,
)
depth_selector = dcc.RangeSlider(
id='depth-selector',
min=1,
max=50,
pushable=1,
step=None,
value=[1, 50],
marks={i: str(i) if i % 2 == 0 else ''
for i in range(51)},
updatemode='drag')
#button = html.Button(id='button_for_testing', children=['calc'])
graph = dcc.Graph(id='heatmap',
figure=empty_figure(),
config={'displayModeBar': False},
style={'height': '100%'})
container_left.children = [
html.Div(children=[
html.Label('Heatmap type:', style={'fontWeight': 'bold'}),
type_selector
],
style={'flex': 1}),
html.Div(children=[
html.Label('Filter by moved piece:', style={'fontWeight': 'bold'}),
piece_selector
],
style={'flex': 1}),
html.Div(children=[
html.Label('Filter by player:', style={'fontWeight': 'bold'}),
color_selector
],
style={'flex': 1}),
html.Div(
children=[
html.Label(children='Filter by search depth ',
style={'fontWeight': 'bold'}),
html.Label(
id='depth-filter-info',
children=[''],
),
depth_selector,
#html.Div(id='depth-filter-info', style={'width': '50%',
# 'margin': '0 auto'})
],
style={'flex': 1})
]
container_middle.children = [graph]
move_count_table = dash_table.DataTable(
id='move-count-table',
columns=MOVE_COUNT_TABLE_COLUMNS,
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'
},
style_cell_conditional=[
{
'if': {
'column_id': 'piece'
},
'textAlign': 'left'
},
],
style_header_conditional=[{
'if': {
'header_index': 0
},
'textAlign': 'center'
}, {
'if': {
'header_index': 1
},
'textAlign': 'right'
}, {
'if': {
'column_id': 'piece'
},
'textAlign': 'left'
}],
merge_duplicate_headers=True,
)
container_right.children = [move_count_table]
container.children = [container_left, container_middle,
container_right] #dummy_spacer
return (container)
def rf(criterion, max_depth, max_features, min_samples_leaf, n_estimators):
if (criterion == 'gini' and max_depth == 25 and max_features == 6
and min_samples_leaf == 1 and n_estimators == 200):
pipeline = joblib.load('rf.joblib')
else:
pipeline = trainRF(criterion, max_depth, max_features,
min_samples_leaf, n_estimators)
y_pred = pipeline.predict(X_test_std)
evaluationDF = classificationReport_to_dataframe(y_test, y_pred)
matrixDF = matrixtodataframe(y_test, y_pred)
table1 = html.Div(children=[
html.Label(children='Performance Matrix',
style={
'width': '40%',
'display': 'inline-block',
'margin': 0,
'padding': '8px'
}),
dash_table.DataTable(id='table_no1',
columns=[{
"name": i,
"id": i
} for i in evaluationDF.columns],
data=evaluationDF.to_dict("rows"),
style_table={
'width': '70%',
},
style_data={
'whiteSpace': 'normal',
'height': 'auto'
},
style_cell_conditional=[{
'if': {
'column_id': 'Parameters'
},
'width': '50%'
}],
style_data_conditional=[{
'if': {
'row_index': 'odd'
},
'backgroundColor':
'rgb(246, 246, 246)'
}],
style_header={
'backgroundColor': 'rgb(228, 228, 228)',
'fontWeight': 'bold'
},
style_cell={
'width': '170px',
'height': '40px',
'textAlign': 'left',
'minWidth': '0px',
'maxWidth': '170px'
})
])
table2 = html.Div(children=[
html.Label(children='Confusion Matrix',
style={
'width': '40%',
'display': 'inline-block',
'margin': 0,
'padding': '8px'
}),
dash_table.DataTable(id='confusionMatrix',
columns=[{
"name": i,
"id": i
} for i in matrixDF.columns],
data=matrixDF.to_dict("rows"),
style_table={
'width': '40%',
},
style_data_conditional=[{
'if': {
'row_index': 'odd'
},
'backgroundColor':
'rgb(246, 246, 246)'
}],
style_header={
'backgroundColor': 'rgb(228, 228, 228)',
'fontWeight': 'bold'
},
style_cell={
'width': '170px',
'height': '40px',
'textAlign': 'left',
'minWidth': '0px',
'maxWidth': '170px'
})
])
final = html.Div([html.Br([]), table1, table2], style=dict(display='flex'))
return final
apps = {
filename.replace(".py", "").replace("app_", ""): getattr(
getattr(
__import__(".".join(["tests", "dash",
filename.replace(".py", "")])), "dash"),
filename.replace(".py", ""),
)
for filename in os.listdir(os.path.join("tests", "dash"))
if filename.startswith("app_") and filename.endswith(".py")
}
app.layout = html.Div(children=[
dcc.Location(id="location"),
html.Div(id="container"),
html.Div(style={"display": "none"},
children=dash_table.DataTable(id="hidden")),
])
@app.callback(Output("container", "children"), [Input("location", "pathname")])
def display_app(pathname):
if pathname == "/" or pathname is None:
return html.Div(
className="container",
children=[
html.H1("Dash Table Review App"),
html.Ol([
html.Li(
dcc.Link(
name.replace("app_", "").replace("_", " "),
href="/{}".format(
construction_list = reversed([num] + construction_list)
return ''.join(get_nth_alphabet_letter(n) for n in construction_list)
tst_data = table_data_from_dataframe(df_test)
app.layout = html.Div(children=[
html.Div([
dash_table.DataTable(id='test-table',
columns=tst_data[0],
data=tst_data[1],
style_cell={
'minWidth': '40px',
'maxWidth': '180px',
'whiteSpace': 'no-wrap',
'overflow': 'hidden',
'textOverflow': 'ellipsis'
},
style_table={'overflowX': 'scroll'},
editable=True)
],
style={
'display': 'inline-block',
'float': 'left'
}),
html.Div([html.Button('+', id='add-column-button')],
style={'display': 'inline-block'}),
html.Div([html.Button('+', id='add-row-button')],
style={'display': 'block'},
className='twelve columns'),
df = pd.read_csv('mensal_bi_tri_se_an_sousa_geral.csv')
# criando um layout para a variável app
# adicionando ao layout um componente html.Div que irá conter os demais componentes que dão forma
app.layout = html.Div([
# inserindo um componente da biblioteca dash HTML components como título/cabeçalho da tabela
html.H1('Tabela de dados da cidade de Sousa - PB'),
# gerando a tabela de dados com a função DataTable() da biblioteca Dash Table
dash_table.DataTable(
# dados
data=df.to_dict('records'),
# identificação das colunas da planilha
columns=[{
'name': col,
'id': col
} for col in df.columns],
)
])
# servindo a aplicação em dash como versão para teste
if __name__ == '__main__':
app.run_server(debug=True)
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Outra forma de gerar uma tabela, sem a utilização da biblioteca Dash Table
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
label='STACK',
className='custom-tab',
selected_className='custom-tab--selected',
children=[
html.Div([
# These seem really easy till you style the f*ckers
dt.DataTable(
id='stack_table',
columns=[{'name':i, 'id':i} for i in tamariz.columns],
style_table={'maxHeight': '600px', # 500px is my google browser
'overflowY': 'scroll'},
style_as_list_view=True,
style_cell_conditional=[
{'if':{'column_id':'posn'}, 'text-align':'center', 'width':'15%'},
{'if':{'column_id':'card'}, 'text-align':'center', 'width':'15%'},
{'if':{'column_id':'loci'}, 'text-align':'center', 'width':'15%'},
{'if':{'column_id':'image'}, 'text-align':'center'}],
style_data_conditional=[
{'if':{'row_index':'odd'}, 'backgroundColor': 'floralwhite'}],
style_header={'backgroundColor': 'burlywood',
'fontWeight': 'bold'},
),
], className='tab-div-custom',),
]), # END of STACK tab
# %% ### Loci Tabl
dcc.Tab(id='loci',
label='LOCI',
className='custom-tab',
step=1,
value=[10, 20]
),
html.Div(id='slider-output-container'),
dash_table.DataTable(
id="test-table",
data=df.to_dict('records'),
# [{'id': 1, 'name': 'Jhb'}],
columns=[
{
'id': 'Link',
'name': 'Link',
'presentation': 'markdown'
},
{
'id': 'Date',
'name': 'Date',
},
{
'id': 'Volume USD',
'name': 'Volume USD',
},
{
'id': 'Close',
'name': 'Close',
}
]
)
])
@app.callback(
}]
style_header = {'backgroundColor': 'rgb(230, 230, 230)', 'fontWeight': 'bold'}
#
# PART 2, Create our clean DASH LAYOUT object
#
app.layout = html.Div([
html.H1(children='Browse ETFs'),
dcc.Input(id='initialize_app_components_with_dummy_callback',
value='',
type='text',
style={'display': 'none'}),
dcc.Dropdown(id='mgr-dropdown'),
html.Br(),
dash_table.DataTable(id='table-container',
style_cell_conditional=style_cell_conditional,
style_data_conditional=style_data_conditional,
style_header=style_header),
html.H3(children='Expenses over Assets Chart'),
dcc.Graph(id='graph-container')
])
#
# PART 2, Load Initial DROPDOWN LIST DATA in our DASH layout which
# will happen after the app is run.
#
@app.callback(Output(
component_id='mgr-dropdown', component_property='options'), [
Input(component_id='initialize_app_components_with_dummy_callback',
component_property='value')
])
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div([
dash_table.DataTable(
id='datatable-interactivity',
columns=[{
"name": i,
"id": i,
"deletable": True,
"selectable": True
} for i in df.columns],
data=df.to_dict('records'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=False,
selected_columns=[],
selected_rows=[],
page_action="native",
page_current=0,
page_size=10,
),
html.Div(id='datatable-interactivity-container')
]),
html.Div(
[
html.Div([
'value': item1
} for item1 in stock_list],
value='AMZN',
searchable=True)
]),
]), ),
html.Br(),
]),
html.Br(),
dbc.Row([
dbc.Col(
html.Div([
dash_table.DataTable(
id='datatable-paging',
columns=[{
"name": i,
"id": i
} for i in df.columns],
data=df.to_dict('records'),
)
])),
]),
html.Br(),
dbc.Row([
dbc.Col(html.Div(dcc.Graph(id="my-output"), ), ),
]),
])
@app.callback(Output("my-input", "options"), [Input('page_1_sector', 'value')])
def list_update(value_list):
df_temp = df_2[df_2.Sector.isin(value_list)]
def generate_table(name, dataframe):
'''
generate table dynamically from dataframe
'''
return html.Div([
html.Br(),
html.H5(name),
dbc.Label(f"Total Articles Retrieved: {len(dataframe)}",
style={
"font-weight": "600",
"font-size": "14px"
}),
html.Br(),
html.Div(
dash_table.DataTable(
columns=[{
"name": i,
"id": i,
"selectable": True
} for i in dataframe.columns],
data=dataframe.to_dict('records'),
style_data={'whiteSpace': 'normal'},
style_header={'fontWeight': 'bold'},
style_cell={
# all three widths are needed
'minWidth': '5px',
'width': '80px',
'maxWidth': '180px',
'minHeight': '10px',
'height': '10px',
'maxHeight': '10px',
'whiteSpace': 'normal',
'fontSize': 12,
'font-family': 'Verdana',
'overflow': 'hidden',
},
style_cell_conditional=[{
'if': {
'column_id': 'Date'
},
'textAlign': 'center'
}, {
'if': {
'column_id': 'Risk Score'
},
'textAlign': 'center'
}, {
'if': {
'column_id': 'Content'
},
'textAlign': 'left'
}, {
'if': {
'column_id': 'URL'
},
'textAlign': 'left'
}],
sort_action='native',
sort_mode='single',
sort_by=[],
page_size=5,
css=[{
'selector': '.row',
'rule': 'margin: 0'
}],
style_as_list_view=True,
),
style={}),
html.Br(),
html.Br()
])