def layout(self):
el_layout = [dbc.Row(x.layout) for x in self.elements]
layout = html.Div(
[
dbc.Button("Controls", id="fade-button", className="mb-3"),
dbc.Fade(
el_layout,
id="fade",
is_in=False,
style={
'transition': 'opacity 100ms ease',
'background': 'white',
# 'padding': '12px 12px 12px 12px',
# 'border': '1px solid gray',
# 'height': '80vh',
'width': '25vw',
'overflow': 'visible'
},
className='top shadow-sm p-3 mb-5 rounded')
],
style={
'position': 'fixed',
'left': '20px',
'top': '75px'
},
className='top')
return layout
def layout(self):
return html.Div(
[
dbc.Button(self.button_text, id=self.name+'modal-open', size=self.button_size, outline=self.button_outline),
dbc.Modal([
dbc.ModalHeader(self.title),
dcc.Graph(id=self.name+'-modal-graph', style={"max-height": "none", "height": "80%"}),
dbc.ModalFooter([
html.Div([
html.Div([
html.Div([
dbc.Button(html.Small("Description"),
id=self.name+'-show-description',
color='link', className="text-muted ml-auto"),
dbc.Fade([
html.Small(self.description, className="text-muted")],
id=self.name+'-fade',
is_in=True,
appear=True),
], style=dict(display="none" if not self.description else None))
], className="text-left"),
html.Div([
dbc.Button("Close", id=self.name+'-modal-close', className="mr-auto")
], className="text-right", style=dict(float='right')),
], style={"display":"flex"}),
], className="justify-content-between")
], id=self.name+'-modal', style={"max-width": "none", "width": "80%"})
], style={"display":"flex", "justify-content":"flex-end"})
def layout(self):
el_layout = [dbc.Row(x.layout) for x in self.elements]
layout = html.Div([
dbc.Button("Show Info", id="fade-button2", className="mb-3",
style={'position': 'fixed', 'right': '20px', 'top': '20px'}),
dbc.Fade(
el_layout,
id="fade2",
is_in=False,
style={'transition': 'opacity 100ms ease',
'background': 'white',
'height': 'auto',
'width': '30vw',
'overflow': 'visible',
'position': 'fixed', 'right': '20px', 'top': '80px'},
className='top shadow-sm p-3 mb-5 rounded'
)
], className='top')
return layout
dbc.Button("outline", size="lg", outline=True, className="mr-2"),
],
className="mt-2"),
html.Div(children=[
dbc.Button("Open collapse", id="collapse-button"),
dbc.Collapse(dbc.Card(
dbc.CardBody("This content is hidden in the collapse")),
id="collapse")
],
className="mt-2"),
html.Div(children=[
dbc.Button("Toggle fade", id="fade-button"),
dbc.Fade(
dbc.Card(
dbc.CardBody(dbc.CardText("This content fades in and out"))),
id="fade",
is_in=True,
appear=False,
),
],
className="mt-2"),
html.Div(children=[
html.P([
"Click on the word ",
html.Span("popover", id="popover-target", className="text-info")
]),
dbc.Popover([
dbc.PopoverHeader("Popover header"),
dbc.PopoverBody("Popover body"),
],
id="popover",
placeholder="Local",
style={"margin-right": 5},
),
dbc.Button("Procurar", color="primary", id="search_local"),
]),
dbc.Fade(
html.Div([
dbc.Select(
id="select_local",
style={
"margin-top": 5,
"margin-bottom": 5
},
),
dbc.Button(
"Procurar Imóveis",
color="primary",
id="search_imoveis",
style={
"margin-bottom": 20,
"width": "100%"
},
),
]),
id="fade_search_imoveis",
is_in=False,
),
]),
dbc.Fade(
html.Div([
html.Hr(),
html.Div([
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
dbc.Button('Toggle fade', id='fade-button', className='mb-3'),
dbc.Fade(
dbc.Card(
dbc.CardBody(
html.P('This content fades in and out',
className='card-text'))),
id='fade',
is_in=True,
appear=False,
style={"transition": "opacity 100ms ease"},
)
])
@app.callback(
Output("fade", "is_in"),
[Input("fade-button", "n_clicks")],
[State("fade", "is_in")],
)
def toggle_fade(n, is_in):
if not n:
# Button has never been clicked
return True
return [updated_images, updated_options]
else:
answer_options = []
return [None, answer_options]
#fade function makes images disappear when question modal pops up so that player cannot cheat in the game
fading_pics = html.Div(style={
"display": "flex",
"flex-direction": "column"
},
id='new-images')
fade = html.Div([
dbc.Fade(fading_pics, id="fade", is_in=True, appear=False),
])
#callback so that pictures fade out when next button is clicked and question modal pops up
@app.callback(
Output("fade", "is_in"),
[Input("next", "n_clicks"),
Input("close", "n_clicks")],
[State("fade", "is_in")],
)
def toggle_fade(n, n2, is_in):
if not n:
return True
return not is_in
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
fade = html.Div([
dbc.Button(
"Toggle fade",
id="fade-transition-button",
className="mb-3",
n_clicks=0,
),
dbc.Fade(
dbc.Card(
dbc.CardBody(
html.P("This content fades in and out",
className="card-text"))),
id="fade-transition",
is_in=True,
style={"transition": "opacity 2000ms ease"},
timeout=2000,
),
])
@app.callback(
Output("fade-transition", "is_in"),
[Input("fade-transition-button", "n_clicks")],
[State("fade-transition", "is_in")],
)
def toggle_fade(n, is_in):
if not n:
# Button has never been clicked
checklist_div,
dcc.Checklist(
options = [
#{'label':'Gecko comparison', 'value':'GC', 'disabled':False},
#{'label':'Reference genome comparison', 'value':'RGC', 'disabled':False},
{'label':'Notify me by email','value':'email', 'disabled':False}],
id = 'checklist-advanced',
),
dbc.Fade(
[
dbc.FormGroup(
[
dbc.Label("Email", html_for="example-email"),
dbc.Input(type="email", id="example-email", placeholder="Enter email", className='exampleEmail'),
# dbc.FormText(
# "Are you on email? You simply have to be these days",
# color="secondary",
# ),
]
)
],
id = 'fade', is_in= False, appear= False
),
#html.H3('Submit', style = {'margin-top':'0'}),
html.Div(
[
html.Button('Submit', id = 'check-job'),
html.Button('', id = 'submit-job', style = {'visibility':'hidden'})
],
style = {'display':'inline-block', 'margin':'0 auto'} #style="height:55px; width:150px"
)
import dash_html_components as html
from .util import make_subheading
fade = html.Div(
[
make_subheading("Fade", "fade"),
html.Div(
[
dbc.Button(
"Toggle fade",
id="fade-button",
style={"marginBottom": "1rem"},
),
dbc.Fade(
dbc.Card(
dbc.CardBody(
html.P(
"This content fades in and out",
className="card-text",
)
)
),
id="fade",
is_in=True,
),
]
),
],
)
},
],
value="1",
),
]),
width=3,
),
dbc.Col(
dbc.Fade(
dbc.FormGroup([
dbc.Label("Exponential Rate",
html_for="patient_rate_input"),
dbc.Input(id="patient_rate_input",
type="number",
value=1.1,
min=0.5,
max=1.2,
step=0.01),
]),
id="fade",
is_in=False,
appear=False,
),
width=3,
),
],
form=True,
)
patient_form = dbc.Row(
[
import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
fade = html.Div([
dbc.Button("Toggle fade", id="fade-button", className="mb-3", n_clicks=0),
dbc.Fade(
dbc.Card(
dbc.CardBody(
html.P("This content fades in and out",
className="card-text"))),
id="fade",
is_in=False,
appear=False,
),
])
@app.callback(
Output("fade", "is_in"),
[Input("fade-button", "n_clicks")],
[State("fade", "is_in")],
)
def toggle_fade(n, is_in):
if not n:
# Button has never been clicked
return False
return not is_in
[
html.Span(id="button_3", style={"vertical-align": "middle"}),
html.A('Descargar calificaciones', id='link_descarga', href="/results/info.csv"),
]
)
fade = html.Div(
[
dbc.Button("Agregar más estados", id="fade-button", className="mb-1", outline=True),
dbc.Fade(
dbc.Card(
dbc.CardBody(
estado_checklist
#html.P(
# "This content fades in and out", className="card-text"
#)
)
),
id="fade",
is_in=False,
appear=False,
),
]
)
tipoEscuela = dbc.FormGroup(
[
dbc.Label("Tipo de escuela:"),
dbc.RadioItems(
options=[{'label':'Activate specific date filter','value':1}],
value=[],switch=True
),
dbc.Row(dbc.Col(html.Br())),
html.Div([
dbc.FormText("Please input date in the format of MM/DD/YYYY, \
eg 1/1/2000 (click FILTER to refresh)"),
dbc.Row([dbc.Col(dbc.Input(id='date_s',type='text',
placeholder='Start Point',disabled=True,
style={'width':'150px'}),width=2),
dbc.Col(dbc.Input(id='date_e',type='text',
placeholder='End Point',disabled=True,
style={'width':'150px'}),width=2)],
justify="start"),
dbc.Fade(html.P("Invalid date input",
style={'color':'red','size':1}),
id='fade',is_in=False,appear=False),
dbc.Row(dbc.Col(html.Br()))
])
])
)
tab2 = dbc.Card(dbc.CardBody([
html.H4("Meteor Shower Observation Top List",className='card-title'),
html.P("Select a list that you are interested",style={'color':'#708090'}),
html.Div([dcc.Dropdown(id='list_dropdown',options=[
{'label':'Top 20 observation cities','value':'list1'},
{'label':'Top 10 observation dates','value':'list2'},
{'label':'Future Meteor Showers','value':'list3'}
]),
sidebar = Sidebar() # Подключаем код левого меню
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.UNITED
]) #Подключение темы для сайта
app.title = "Система ИАС УЭР Металлоинвест" # Название сайта
preload_page = dbc.Fade(
id='pr_load',
children=[
html.Div(id='p_prldr',
children=[
html.Div(className='contpre',
children=[
html.Span(className='svg_anm'),
html.Br(),
html.P('Подождите идет загрузка')
])
]),
],
is_in=True,
appear=False,
)
app.layout = html.Div([
dcc.Location(id='url', refresh=False), preload_page, nav,
dbc.Row([
dbc.Col(sidebar, id="left", className="leftMenu", md=2),
dbc.Col([
html.Div(id='page-content'),
])
back='data:image/png;base64,{}'.format(cear.decode())
ode = base64.b64encode(open('Apoio/ode.png', 'rb').read())
jumbotron =dbc.Jumbotron(
[
dbc.Row(
[
dbc.Col([],md=2),
dbc.Col([
#html.Hr(className="my-2"),
dbc.Fade(
html.H3("Bem vindo(a) ao",style={'font-size':'55px'}),
id="fade_bem_vindo_1",
is_in=True,
appear=True,
style={"transition": "opacity 2000ms ease", 'textAlign':'center','color':'#04383f'}
),
dbc.Fade(
html.H3("Observatório de Dados",style={'font-size':'55px'}),
id="fade_bem_vindo_1_",
is_in=True,
appear=True,
style={"transition": "opacity 2500ms ease", 'textAlign':'center','color':'#04383f'}
),
#dbc.Fade(
# html.H1("ao", className="display-3"),
# id="fade2",
# is_in=True,
subjects_dropdown_menu = dbc.FormGroup(
[
dbc.Label('See all courses of this subject!\nYou can type to search.', id='dropdown_label', style={
'color': 'white'}),
dcc.Dropdown(
id='subject_input',
options=dropdown_item_options,
value="COMP",
)
]
)
subjects_dropdown_fade = dbc.Fade(
subjects_dropdown_menu,
id='subject_fade',
is_in=True,
)
course_input_box = dbc.FormGroup(
[
dbc.Label('Course Name', style={'color': 'white'}),
dbc.InputGroup([
dbc.Input(
id='course_input',
type='text',
placeholder='e.g. COMP 202',
value='comp 302',
),
dbc.InputGroupAddon(
card1 = make_card_one(letters)
card2 = make_card(names[0], blurbs[0])
card3 = make_card(names[1], blurbs[1])
card4 = make_card(names[2], blurbs[2])
card5 = make_card(names[3], blurbs[3])
result_tabs = dbc.Tabs([
dbc.Tab(card1, label="Your Profile"),
dbc.Tab(card2, label="IA"),
dbc.Tab(card3, label="SL"),
dbc.Tab(card4, label="CN"),
dbc.Tab(card5, label="RB")
])
fade = dbc.Fade(result_tabs,
id="fade-transition",
is_in=True,
style={"transition": "opacity 100ms ease"})
result_blurb = html.Div(
dbc.Card([
dbc.CardBody([
html.H5("What's your political profile?", className='card-title'),
html.P(re_bl),
dbc.Button("Get My Results",
id="fade-transition-button",
className="mb-3",
n_clicks=0), fade
])
]))
result_card = dbc.Card([dbc.CardBody([dbc.Row([result_blurb])])])
def page_1_layout(pitches):
return html.Div([
Nav,
# Main container
html.Div([
# Header
html.Div([
html.Div([
html.Div([
], className='col-lg-12', style={'margin-top':20})
], className='row')
], className='page-header'),
# Row containing charts
dbc.Fade([
# Left Side
html.Div([
html.Div([
# Left chart
html.Div([html.H3('Predicted Returns', style={'display':'inline-block','margin-bottom':'0px'})],
className='card-header'),
html.Div([
# Distillery picker
dbc.Row([
dbc.Col([
dcc.Dropdown(
id='distillery-dropdown',
options=pitches[['formattedDistillery', 'distillery']].drop_duplicates() \
.rename({'formattedDistillery': 'label', 'distillery': 'value'}, axis=1).to_dict(
orient='records'),
multi=True,
),
], width=8, style={'padding-left':'0px'}),
# Radio items
dbc.Col([
dcc.RadioItems(
id='radio-high-correlation',
options=[{'label':'All data','value':1},{'label':'High R Value','value':2}],
value=2,
labelStyle={'display': 'inline-block', 'padding':'2px'},
),
], width=4),
], style={'margin':'5px'}),
# Malt picker
html.Div([
dcc.Checklist(
id='grain-malt-chooser',
options=[{'label':i,'value':i} for i in ['Single Malt','Grain']],
value =['Single Malt','Grain'],
labelStyle={'display': 'inline-block', 'margin': '5px'},),
], className='row', style={'margin':'5px'}),
# Chart row
html.Div([
# html.Div([
dcc.Graph(
id='whisky-return-graph',
hoverData={'points': [{'text': 'auchroisk_2012_Q4_HHR', 'customdata':1}]},
# style={'width':800},
# figure=create_pitch(pitches),
style={'height':'100%', 'width':'100%'}
),
], className='row', style={'margin':'5px','height':450})
],className='section'),
], className='card border-secondary mb-3', style={'height':650}),
],className='col-lg-6'),
# Right Side
html.Div([
html.Div([
html.Div([html.H3('Price History',style={'display':'inline-block','margin-bottom':'0px'}),
html.P('Filler', id='single-whisky-title', className='float-right',
style={'margin-bottom': '0px'})],
className='card-header'),
dcc.Graph(id='single-whisky-chart',
style={'height':'100%'}),
],className='card border-secondary mb-3', style={'height':650}),
],className='col-lg-6'),
],className='row row-eq-height', id="chart-content", appear=False, is_in=True),
# Footer
Footer,
], className="container"),
])
"padding-right": "6rem",
"padding-left": "2rem",
"overflow-y": "scroll"
}),
],
style={
"display": "flex",
"height": "68vh"
})
app.layout = html.Div([
login_layout(app),
dbc.Fade(
patient_layout(app),
id="fade-transition",
is_in=True,
style={"transition": "opacity 100ms ease"},
),
])
@app.callback([
Output("login-collapse-check", "is_open"),
Output("login-layout", "hidden"),
Output("patient-layout", "hidden"),
], [
Input("login-button-submit", "n_clicks"),
Input("logout-button", "n_clicks")
], [
State("login-input-username", "value"),
State("login-input-password", "value")
'Applied Principal', 'Applied Interest', 'End Principal'
]
# input formgroup
loan_amount = dbc.FormGroup([
dbc.Label("Loan Amount"),
dbc.Input(id='loan_amount', type='number', min=1000, step=1),
dbc.FormText("Please type the loan amount no less than $1000")
])
payment = dbc.FormGroup([
dbc.Label("Loan Monthly Payment"),
dbc.Input(id='payment', type='number', min=1, step=1, disabled=True),
dbc.Fade(html.P("Invalid loan payment", style={
'color': 'red',
'size': 1
}),
id='fade',
is_in=False,
appear=False)
])
interest = dbc.FormGroup([
dbc.Label("Loan Interest rate %"),
dbc.Input(id='interest',
type='number',
min=1,
max=99,
step=0.1,
disabled=True)
])
extra_payment = dbc.FormGroup([
dbc.Label("Extra Payment(monthly)"),
