def test_dtpr004_max_and_min_dates_are_clickable(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
dcc.DatePickerRange(
id="dps-initial-month",
start_date=datetime(2021, 1, 11),
end_date=datetime(2021, 1, 19),
max_date_allowed=datetime(2021, 1, 20),
min_date_allowed=datetime(2021, 1, 10),
)
]
)
dash_dcc.start_server(app)
dash_dcc.select_date_range("dps-initial-month", (10, 20))
dash_dcc.wait_for_text_to_equal(
'#dps-initial-month .DateInput_input.DateInput_input_1[placeholder="Start Date"]',
"01/10/2021",
)
dash_dcc.wait_for_text_to_equal(
'#dps-initial-month .DateInput_input.DateInput_input_1[placeholder="End Date"]',
"01/20/2021",
)
assert dash_dcc.get_logs() == []
def test_dtpr005_disabled_days_arent_clickable(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
html.Label("Operating Date"),
dcc.DatePickerRange(
id="dpr",
min_date_allowed=datetime(2021, 1, 1),
max_date_allowed=datetime(2021, 1, 31),
initial_visible_month=datetime(2021, 1, 1),
disabled_days=[datetime(2021, 1, 10), datetime(2021, 1, 11)],
),
],
style={
"width": "10%",
"display": "inline-block",
"marginLeft": 10,
"marginRight": 10,
"marginBottom": 10,
},
)
dash_dcc.start_server(app)
date = dash_dcc.find_element("#dpr input")
assert not date.get_attribute("value")
assert not any(
dash_dcc.select_date_range("dpr", day_range=(10, 11))
), "Disabled days should not be clickable"
assert all(
dash_dcc.select_date_range("dpr", day_range=(1, 2))
), "Other days should be clickable"
# open datepicker to take snapshot
date.click()
dash_dcc.percy_snapshot("dtpr005 - disabled days")
def test_dtpr003_no_initial_month_no_min_date_start_date(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
dcc.DatePickerRange(
id="dps-initial-month",
start_date=datetime(2019, 8, 13),
max_date_allowed=datetime(2099, 12, 31),
)
]
)
dash_dcc.start_server(app)
date_picker_start = dash_dcc.find_element(
'#dps-initial-month .DateInput_input.DateInput_input_1[placeholder="Start Date"]'
)
date_picker_start.click()
dash_dcc.wait_for_text_to_equal(
"#dps-initial-month .CalendarMonth.CalendarMonth_1[data-visible=true] strong",
"August 2019",
)
assert dash_dcc.get_logs() == []
def test_cdpr001_date_clearable_true_works(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
dcc.DatePickerRange(id="dpr", clearable=True),
dcc.DatePickerSingle(id="dps", clearable=True),
]
)
dash_dcc.start_server(app)
# DPR
start_date, end_date = dash_dcc.select_date_range("dpr", (1, 28))
close_btn = dash_dcc.wait_for_element('button[aria-label="Clear Dates"]')
assert (
"1" in start_date and "28" in end_date
), "both start date and end date should match the selected day"
close_btn.click()
start_date, end_date = dash_dcc.get_date_range("dpr")
assert not start_date and not end_date, "both start and end dates should be cleared"
# DPS
selected = dash_dcc.select_date_single("dps", day="1")
assert selected, "single date should get a value"
close_btn = dash_dcc.wait_for_element("#dps button")
close_btn.click()
(single_date,) = dash_dcc.get_date_range("dps")
assert not single_date, "date should be cleared"
assert dash_dcc.get_logs() == []
def update_output(value):
return dcc.DatePickerRange(
id="dpr",
min_date_allowed=datetime(2020, 1, 1),
max_date_allowed=datetime(2020, 1, 7),
start_date=datetime(2020, 1, 3, 1, 1, 1, value),
end_date=datetime(2020, 1, 4, 1, 1, 1, value),
persistence=True,
persistence_type="session",
)
def _input_date():
return dbc.InputGroup([
dbc.InputGroupAddon("Date", addon_type="prepend"),
dcc.DatePickerRange(
id="input_date",
clearable=True,
display_format="YYYY-M-D",
style={
"flex": "1 1 auto",
"width": "1%",
"display": "flex",
},
),
])
def platter_app():
app = Dash(__name__)
app.layout = html.Div([
html.Div(id="waitfor"),
html.Label("Upload"),
dcc.Upload(),
html.Label("Horizontal Tabs"),
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(
label="Tab one",
className="test",
style={"border": "1px solid magenta"},
children=[html.Div(["Test"])],
),
dcc.Tab(
label="Tab two",
children=[
html.Div([
html.H1("This is the content in tab 2"),
html.P("A graph here would be nice!"),
])
],
id="tab-one",
),
dcc.Tab(
label="Tab three",
children=[
html.Div([html.H1("This is the content in tab 3")])
],
),
],
style={"fontFamily": "system-ui"},
content_style={
"border": "1px solid #d6d6d6",
"padding": "44px"
},
parent_style={
"maxWidth": "1000px",
"margin": "0 auto"
},
),
html.Label("Vertical Tabs"),
dcc.Tabs(
id="tabs1",
vertical=True,
children=[
dcc.Tab(label="Tab one", children=[html.Div(["Test"])]),
dcc.Tab(
label="Tab two",
children=[
html.Div([
html.H1("This is the content in tab 2"),
html.P("A graph here would be nice!"),
])
],
),
dcc.Tab(
label="Tab three",
children=[
html.Div([html.H1("This is the content in tab 3")])
],
),
],
),
html.Label("Dropdown"),
dcc.Dropdown(options=OPTIONS, value="MTL", id="dropdown"),
html.Label("Multi-Select Dropdown"),
dcc.Dropdown(options=OPTIONS, value=["MTL", "SF"], multi=True),
html.Label("Radio Items"),
dcc.RadioItems(options=OPTIONS, value="MTL"),
html.Label("Checkboxes"),
dcc.Checklist(options=OPTIONS, value=["MTL", "SF"]),
html.Label("Text Input"),
dcc.Input(value="", placeholder="type here", id="textinput"),
html.Label("Disabled Text Input"),
dcc.Input(
value="disabled",
type="text",
id="disabled-textinput",
disabled=True,
),
html.Label("Slider"),
dcc.Slider(
min=0,
max=9,
marks={i: f"Label {i}" if i == 1 else str(i)
for i in range(1, 6)},
value=5,
),
html.Label("Graph"),
dcc.Graph(
id="graph",
figure={
"data": [{
"x": [1, 2, 3],
"y": [4, 1, 4]
}],
"layout": {
"title": "北京"
},
},
),
html.Div([
html.Label("DatePickerSingle"),
dcc.DatePickerSingle(id="date-picker-single",
date=datetime(1997, 5, 10)),
html.Div(
[
html.Label("DatePickerSingle - empty input"),
dcc.DatePickerSingle(),
],
id="dt-single-no-date-value",
),
html.Div(
[
html.Label(
"DatePickerSingle - initial visible month (May 97)"),
dcc.DatePickerSingle(
initial_visible_month=datetime(1997, 5, 10)),
],
id="dt-single-no-date-value-init-month",
),
]),
html.Div([
html.Label("DatePickerRange"),
dcc.DatePickerRange(
id="date-picker-range",
start_date_id="startDate",
end_date_id="endDate",
start_date=datetime(1997, 5, 3),
end_date_placeholder_text="Select a date!",
),
html.Div(
[
html.Label("DatePickerRange - empty input"),
dcc.DatePickerRange(
start_date_id="startDate",
end_date_id="endDate",
start_date_placeholder_text="Start date",
end_date_placeholder_text="End date",
),
],
id="dt-range-no-date-values",
),
html.Div(
[
html.Label(
"DatePickerRange - initial visible month (May 97)"),
dcc.DatePickerRange(
start_date_id="startDate",
end_date_id="endDate",
start_date_placeholder_text="Start date",
end_date_placeholder_text="End date",
initial_visible_month=datetime(1997, 5, 10),
),
],
id="dt-range-no-date-values-init-month",
),
]),
html.Label("TextArea"),
dcc.Textarea(placeholder="Enter a value... 北京",
style={"width": "100%"}),
html.Label("Markdown"),
dcc.Markdown("""
#### Dash and Markdown
Dash supports [Markdown](https://rexxars.github.io/react-markdown/).
Markdown is a simple way to write and format text.
It includes a syntax for things like **bold text** and *italics*,
[links](https://rexxars.github.io/react-markdown/), inline `code` snippets, lists,
quotes, and more.
1. Links are auto-rendered: https://dash.plotly.com.
2. This uses ~commonmark~ GitHub flavored markdown.
Tables are also supported:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
北京
""".replace(" ", "")),
dcc.Markdown(["# Line one", "## Line two"]),
dcc.Markdown(),
dcc.Markdown("""
```py
import python
print(3)
```"""),
dcc.Markdown(["```py", "import python", "print(3)", "```"]),
dcc.Markdown(),
])
yield app
id='LSTMToggle',
on=False,
color='lightcoral',
),
daq.BooleanSwitch(
label='Prophet',
className='one columns',
id='ProphetToggle',
on=False,
color='lightblue',
),
html.P(id='textual_gain'),
dcc.DatePickerRange(
id='date_picker_range',
display_format='DD MMM YYYY',
max_date_allowed=date.today(),
end_date=date.today(),
calendar_orientation='vertical',
),
]
),
html.Br(),
html.H5(id='graphTitle', children=''),
dcc.Graph(id='stockGraph', config={'scrollZoom':True}),
dcc.ConfirmDialog(
id='noDataFound',
message='No Data Found, check Stock Name',
),
])
"Input symbol for counterfactual:",
dcc.Input(id="sim-input", type="text"),
html.Button(id="sim-submit", children="Submit", n_clicks=0),
],
id="sim-selector-container",
hidden=True,
style={"text-align": "left"},
),
html.Hr(style={"margin-bottom": 0, "margin-top": 0}),
html.Div(
[
html.Div(
[
dcc.DatePickerRange(
id="date-selector",
start_date=datetime.today(),
end_date=datetime.today(),
display_format="MMM Do, YYYY",
),
html.Div(id="value", children="Value box"),
],
className="six columns",
style={"text-align": "left"},
),
html.Div(
id="rate-of-return",
children="RoR box",
className="six columns",
style={"text-align": "right"},
),
],
className="row",
[
# Navigation
html.P("Welcome to the Stock Dash App!", className="start"),
html.Div([
html.P("Input stock code: "),
html.Div([
dcc.Input(id="dropdown_tickers", type="text"),
html.Button("Submit", id='submit'),
],
className="form")
],
className="input-place"),
html.Div([
dcc.DatePickerRange(id='my-date-picker-range',
min_date_allowed=dt(1995, 8, 5),
max_date_allowed=dt.now(),
initial_visible_month=dt.now(),
end_date=dt.now().date()),
],
className="date"),
html.Div([
html.Button(
"Stock Price", className="stock-btn", id="stock"),
html.Button("Indicators",
className="indicators-btn",
id="indicators"),
dcc.Input(id="n_days",
type="text",
placeholder="number of days"),
html.Button(
"Forecast", className="forecast-btn", id="forecast")
def test_cdpr002_updatemodes(dash_dcc):
app = Dash(__name__)
app.layout = html.Div(
[
dcc.DatePickerRange(
id="date-picker-range",
start_date_id="startDate",
end_date_id="endDate",
start_date_placeholder_text="Select a start date!",
end_date_placeholder_text="Select an end date!",
updatemode="bothdates",
),
html.Div(id="date-picker-range-output"),
]
)
@app.callback(
Output("date-picker-range-output", "children"),
[
Input("date-picker-range", "start_date"),
Input("date-picker-range", "end_date"),
],
)
def update_output(start_date, end_date):
return f"{start_date} - {end_date}"
dash_dcc.start_server(app=app)
start_date = dash_dcc.find_element("#startDate")
start_date.click()
end_date = dash_dcc.find_element("#endDate")
end_date.click()
assert (
dash_dcc.find_element("#date-picker-range-output").text == "None - None"
), "the output should not update when both clicked but no selection happen"
start_date.click()
dash_dcc.find_elements(dash_dcc.date_picker_day_locator)[4].click()
assert (
dash_dcc.find_element("#date-picker-range-output").text == "None - None"
), "the output should not update when only one is selected"
eday = dash_dcc.find_elements(dash_dcc.date_picker_day_locator)[-4]
wait.until(lambda: eday.is_displayed() and eday.is_enabled(), timeout=2)
eday.click()
date_tokens = set(start_date.get_attribute("value").split("/"))
date_tokens.update(end_date.get_attribute("value").split("/"))
assert (
set(
itertools.chain(
*[
_.split("-")
for _ in dash_dcc.find_element(
"#date-picker-range-output"
).text.split(" - ")
]
)
)
== date_tokens
), "date should match the callback output"
assert dash_dcc.get_logs() == []
def _add_ctrl_panel(self) -> dbc.Row:
"""
"""
return dbc.Row(
id="row-ctrl-panel",
class_name="g-0",
children=[
dbc.Row(
class_name="g-0 p-2",
children=[
dbc.Row(
class_name="gy-1",
children=[
dbc.Label(
class_name="p-0",
children=self._show_tooltip(
"help-dut", "Device under Test")
),
dbc.Row(
dbc.RadioItems(
id="ri-duts",
inline=True,
value=self.default["dut"],
options=self.default["duts"]
)
)
]
),
dbc.Row(
class_name="gy-1",
children=[
dbc.Label(
class_name="p-0",
children=self._show_tooltip(
"help-ttype", "Test Type"),
),
dbc.RadioItems(
id="ri-ttypes",
inline=True,
value=self.default["ttype"],
options=self.default["ttypes"]
)
]
),
dbc.Row(
class_name="gy-1",
children=[
dbc.Label(
class_name="p-0",
children=self._show_tooltip(
"help-cadence", "Cadence"),
),
dbc.RadioItems(
id="ri-cadences",
inline=True,
value=self.default["cadence"],
options=self.default["cadences"]
)
]
),
dbc.Row(
class_name="gy-1",
children=[
dbc.Label(
class_name="p-0",
children=self._show_tooltip(
"help-tbed", "Test Bed"),
),
dbc.Select(
id="dd-tbeds",
placeholder="Select a test bed...",
value=self.default["tbed"],
options=self.default["tbeds"]
)
]
),
dbc.Row(
class_name="gy-1",
children=[
dbc.Alert(
id="al-job",
color="info",
children=self.default["job"]
)
]
),
dbc.Row(
class_name="g-0 p-2",
children=[
dbc.Label(
class_name="gy-1",
children=self._show_tooltip(
"help-time-period", "Time Period"),
),
dcc.DatePickerRange(
id="dpr-period",
className="d-flex justify-content-center",
min_date_allowed=\
datetime.utcnow() - timedelta(
days=self.time_period),
max_date_allowed=datetime.utcnow(),
initial_visible_month=datetime.utcnow(),
start_date=\
datetime.utcnow() - timedelta(
days=self.time_period),
end_date=datetime.utcnow(),
display_format="D MMM YY"
)
]
)
]
),
]
)
style={'textAlign': 'center'},
)
],
width=4),
dbc.Col([
html.Div(
[
dcc.Dropdown(id='year-picker',
options=[{
'label': f'{year}',
'value': year
} for year in range(2015, 1900, -1)],
value=storm_dates[0].split('-')[0]),
dcc.DatePickerRange(
month_format='MMMM Y',
start_date=storm_dates[0].split(' - ')[0],
end_date=storm_dates[0].split(' - ')[1],
id='date-picker')
],
style={
'display': 'inline-block',
'float': 'right',
'margin-right': '30px'
},
)
],
width=4)
]),
dbc.Row([
dbc.Col(dcc.Graph(id='gradh500',
style={
def test_msps001_basic_persistence(dash_dcc):
app = Dash(__name__)
app.layout = html.Div([
dcc.Checklist(
id="checklist",
options=[
{
"label": u"Slow 🐢",
"value": u"🐢"
},
{
"label": u"Fast 🏎️",
"value": u"🏎️"
},
{
"label": u"Faster 🚀",
"value": u"🚀"
},
],
value=[u"🏎️"],
persistence=True,
),
dcc.DatePickerRange(
id="datepickerrange",
start_date="2017-08-21",
end_date="2024-04-08",
start_date_id="start_date",
end_date_id="end_date",
initial_visible_month="2019-05-01",
persistence=True,
),
dcc.DatePickerSingle(id="datepickersingle",
date="2019-01-01",
persistence=True),
dcc.Dropdown(
id="dropdownsingle",
options=[
{
"label": u"One 1️⃣",
"value": u"1️⃣"
},
{
"label": u"Two 2️⃣",
"value": u"2️⃣"
},
{
"label": u"Three 3️⃣",
"value": u"3️⃣"
},
],
value=u"2️⃣",
persistence=True,
),
dcc.Dropdown(
id="dropdownmulti",
options=[
{
"label": u"Four 4️⃣",
"value": u"4️⃣"
},
{
"label": u"Five 5️⃣",
"value": u"5️⃣"
},
{
"label": u"Six 6️⃣",
"value": u"6️⃣"
},
],
value=[u"4️⃣"],
multi=True,
persistence=True,
),
dcc.Input(id="input", value="yes", persistence=True),
dcc.RadioItems(
id="radioitems",
options=[
{
"label": "Red",
"value": "r"
},
{
"label": "Green",
"value": "g"
},
{
"label": "Blue",
"value": "b"
},
],
value="b",
persistence=True,
),
dcc.RangeSlider(id="rangeslider",
min=0,
max=10,
value=[3, 7],
persistence=True),
dcc.Slider(id="slider", min=20, max=30, value=25, persistence=True),
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(label="Eh?", children="Tab A", value="A"),
dcc.Tab(label="Bee", children="Tab B", value="B"),
dcc.Tab(label="Sea", children="Tab C", value="C"),
],
value="A",
persistence=True,
),
dcc.Textarea(id="textarea", value="knock knock", persistence=True),
html.Div(id="settings"),
])
@app.callback(
Output("settings", "children"),
[
Input("checklist", "value"),
Input("datepickerrange", "start_date"),
Input("datepickerrange", "end_date"),
Input("datepickersingle", "date"),
Input("dropdownsingle", "value"),
Input("dropdownmulti", "value"),
Input("input", "value"),
Input("radioitems", "value"),
Input("rangeslider", "value"),
Input("slider", "value"),
Input("tabs", "value"),
Input("textarea", "value"),
],
)
def make_output(*args):
return json.dumps(args)
initial_settings = [
[u"🏎️"],
"2017-08-21",
"2024-04-08",
"2019-01-01",
u"2️⃣",
[u"4️⃣"],
"yes",
"b",
[3, 7],
25,
"A",
"knock knock",
]
dash_dcc.start_server(app)
dash_dcc.wait_for_text_to_equal("#settings", json.dumps(initial_settings))
dash_dcc.find_element("#checklist label:last-child input").click() # 🚀
dash_dcc.select_date_range("datepickerrange", day_range=(4, ))
dash_dcc.select_date_range("datepickerrange",
day_range=(14, ),
start_first=False)
dash_dcc.find_element("#datepickersingle input").click()
dash_dcc.select_date_single("datepickersingle", day="20")
dash_dcc.find_element("#dropdownsingle .Select-input input").send_keys(
"one" + Keys.ENTER)
dash_dcc.find_element("#dropdownmulti .Select-input input").send_keys(
"six" + Keys.ENTER)
dash_dcc.find_element("#input").send_keys(" maybe")
dash_dcc.find_element("#radioitems label:first-child input").click() # red
range_slider = dash_dcc.find_element("#rangeslider")
dash_dcc.click_at_coord_fractions(range_slider, 0.5, 0.25) # 5
dash_dcc.click_at_coord_fractions(range_slider, 0.8, 0.25) # 8
slider = dash_dcc.find_element("#slider")
dash_dcc.click_at_coord_fractions(slider, 0.2, 0.25) # 22
dash_dcc.find_element("#tabs .tab:last-child").click() # C
dash_dcc.find_element("#textarea").send_keys(Keys.ENTER + "who's there?")
edited_settings = [
[u"🏎️", u"🚀"],
"2019-05-04",
"2019-05-14",
"2019-01-20",
u"1️⃣",
[u"4️⃣", u"6️⃣"],
"yes maybe",
"r",
[5, 8],
22,
"C",
"knock knock\nwho's there?",
]
dash_dcc.wait_for_text_to_equal("#settings", json.dumps(edited_settings))
# now reload the page - all of these settings should persist
dash_dcc.wait_for_page()
dash_dcc.wait_for_text_to_equal("#settings", json.dumps(edited_settings))
assert dash_dcc.get_logs() == []
