Nothing
Dash Core Components
In dashCoreComponents: Core Interactive UI Components for 'Dash'
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>"
)
Dash ships with supercharged components for interactive user interfaces. A core set of components, written and maintained by the Dash team, is available in the dashCoreComponents package. The source is on GitHub at plotly/dash-core-components.
Please visit our online documentation, which is interactive and frequently updated: https://dashr.plotly.com.
Dropdown Component
Default Dropdown
An example of a default dropdown without any extra properties.
dccDropdown(
options=list(
list(label="New York City", value="NYC"),
list(label="Montréal", value="MTL"),
list(label="San Francisco", value="SF")
),
value=list("MTL", "NYC"),
multi=TRUE
)
Multi-Value Dropdown
A dropdown component with the multi property set to TRUE will allow the user to select more than one value at a time.
dccDropdown(
options=list(
list(label="New York City", value="NYC"),
list(label="Montréal", value="MTL"),
list(label="San Francisco", value="SF")
),
value="MTL",
id="my-dropdown"
)
Disable Search
The searchable property is set to TRUE by default on all Dropdown components. To prevent searching the dropdown value, just set the searchable property to FALSE. Try searching for 'New York' on this dropdown below and compare it to the other dropdowns on the page to see the difference.
dccDropdown(
options=list(
list(label="New York City", value="NYC"),
list(label="Montréal", value="MTL"),
list(label="San Francisco", value="SF")
),
searchable = FALSE
)
Dropdown Clear
The clearable property is set to TRUE by default on all Dropdown components. To prevent the clearing of the selected dropdown value, just set the clearable property to FALSE:
dccDropdown(
options=list(
list(label="New York City", value="NYC"),
list(label="Montréal", value="MTL"),
list(label="San Francisco", value="SF")
),
value = "MTL",
clearable = FALSE
)
Placeholder Text
The placeholder property allows you to define default text shown when no value is selected.
dccDropdown(
options=list(
list(label="New York City", value="NYC"),
list(label="Montréal", value="MTL"),
list(label="San Francisco", value="SF")
),
placeholder="Select a city"
)
Disable Dropdown
To disable the dropdown just set disabled=TRUE.
dccDropdown(
options=list(
list(label="New York City", value="NYC"),
list(label="Montréal", value="MTL"),
list(label="San Francisco", value="SF")
),
disabled=TRUE
)
Disable Options
To disable a particular option inside the dropdown menu, set the disabled property in the options.
dccDropdown(
options=list(
list(label="New York City", value="NYC", "disabled" = TRUE),
list(label="Montréal", value="MTL"),
list(label="San Francisco", value="SF", "disabled" = TRUE)
)
)
Slider Component
Simple Slider Example
An example of a basic slider tied to a callback.
library(dashCoreComponents)
library(dashHtmlComponents)
app <- Dash$new()
app$layout(
htmlDiv(
list(
dccSlider(
id='my-slider',
min=0,
max=20,
step=0.5,
value=10
),
htmlDiv(id='slider-output-container')
)
)
)
app$callback(
output(id = 'slider-output-container', property = 'children'),
params=list(input(id = 'my-slider', property = 'value')),
function(value) {
sprintf("you have selected %0.1f", value)
})
app$run_server()
Marks and Steps
If slider marks are defined and step is set to NULL then the slider will only be able to select values that have been predefined by the marks. marks is a list where the keys represent the numerical values and the values represent their labels.
dccSlider(
min=0,
max=10,
marks = list(
"0" = "0 °F",
"3" = "3 °F",
"5" = "5 °F",
"7.65" = "7.65 °F",
"10" = "10 °F"
),
value=5
)
By default, included=TRUE, meaning the rail trailing the handle will be highlighted. To have the handle act as a discrete value set included=FALSE. To style marks, include a style css attribute alongside the list value.
dccSlider(
min=0,
max=100,
value = 65,
marks = list(
"0" = list("label" = "0 °C", "style" = list("color" = "#77b0b1")),
"26" = list("label" = "26 °C"),
"37" = list("label" = "37 °C"),
"100" = list("label" = "100 °C", "style" = list("color" = "#FF4500"))
)
)
Non-Linear Slider and Updatemode
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
transform_value = function(value){
return(10**value)
}
app <- Dash$new()
app$layout(
htmlDiv(
list(
dccSlider(
id='slider-updatemode',
marks=unlist(lapply(list(1:4), function(x){10**x})),
max=3,
value=2,
step=0.01,
updatemode='drag'
),
htmlDiv(id='updatemode-output-container', style=list('margin-top' = 20))
)
)
)
app$callback(
output(id = 'updatemode-output-container', property='children'),
params=list(input(id='slider-updatemode', property='value')),
function(value) {
sprintf('Linear Value: %g | Log Value: %0.2f', value, transform_value(value))
})
app$run_server()
RangeSlider Component
Simple RangeSlider Example
An example of a basic RangeSlider tied to a callback.
library(dashCoreComponents)
library(dashHtmlComponents)
app <- Dash$new()
app$layout(
htmlDiv(
list(
dccRangeSlider(
id='my-range-slider',
min=0,
max=20,
step=0.5,
value=list(5, 15)
),
htmlDiv(id='output-container-range-slider')
)
)
)
app$callback(
output(id = 'output-container-range-slider', property='children'),
params=list(input(id='my-range-slider', property='value')),
function(value) {
sprintf('You have selected [%0.1f, %0.1f]', value[1], value[2])
})
app$run_server()
Marks and Steps
If slider marks are defined and step is set to NULL then the slider will only be able to select values that have been predefined by the marks.
dccRangeSlider(
min=0,
max=10,
marks=list(
"0" = "0 °F",
"3" = "3 °F",
"5" = "5 °F",
"7.65" = "7.65 °F",
"10" = "10 °F"
),
value=list(3, 7.65)
)
Included and Styling Marks
By default, included=TRUE, meaning the rail trailing the handle will be highlighted. To have the handle act as a discrete value set included=FALSE. To style marks, include a style css attribute alongside the key value.
library(dashCoreComponents)
dccRangeSlider(
min=0,
max=100,
marks = list(
"0" = list("label" = "0 °C", "style" = list("color" = "#77b0b1")),
"26" = list("label" = "26 °C"),
"37" = list("label" = "37 °C"),
"100" = list("label" = "100°C" , "style" = list("color" = "#FF4500"))
)
)
Multiple Handles
To create multiple handles just define more values for value!
dccRangeSlider(
min=0,
max=30,
value=list(1, 3, 4, 5, 12, 17)
)
Crossing Handles
If allowCross=FALSE, the handles will not be allowed to cross over each other.
dccRangeSlider(
min=0,
max=30,
value=list(10,15),
allowCross = FALSE
)
Non-Linear Slider and Updatemode
Create a logarithmic slider by setting marks to be logarithmic and adjusting the slider's output value in the callbacks. The updatemode property allows us to determine when we want a callback to be triggered. The following example has updatemode='drag' which means a callback is triggered everytime the handle is moved. Contrast the callback output with the first example on this page to see the difference.
library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)
transform_value = function(value){
return(10 ** value)
}
app <- Dash$new()
app$layout(
htmlDiv(
list(
dccRangeSlider(
id='non-linear-range-slider',
marks=unlist(lapply(list(1:4), function(x){10**x})),
max=3,
value=list(0.1, 2),
dots=FALSE,
step=0.01,
updatemode='drag'
),
htmlDiv(id='output-container-range-slider-non-linear', style=list('margin-top' = 20))
)
))
app$callback(
output(id = 'output-container-range-slider-non-linear', property='children'),
params=list(input(id='non-linear-range-slider', property='value')),
function(value) {
transformed_value = lapply(value, transform_value)
sprintf('Linear Value: %g, Log Value: [%0.2f, %0.2f]', value[2],transformed_value[1], transformed_value[2])
})
app$run_server()
Input Component
Update Value on Keypress
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
app <- Dash$new()
app$layout(
htmlDiv(
list(
dccInput(id='input-1-keypress', type='text', value='Montreal'),
dccInput(id='input-2-keypress', type='text', value='Canada'),
htmlDiv(id='output-keypress1')
)
)
)
app$callback(
output(id = 'output-keypress1', property='children'),
params=list(input(id='input-1-keypress', property='value'),
input(id='input-2-keypress', property='value')),
function(input1, input2) {
sprintf('Input 1 is %s and input 2 is %s', input1,input2)
})
app$run_server()
Update Value on Enter/Blur
dccInput has properties n_submit, which updates when the enter button is pressed, and n_blur, which updates when the component loses focus (e.g. tab is pressed or the user clicks outside of the input field).
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
app <- Dash$new()
app$layout(
htmlDiv(
list(
dccInput(id='input-1-submit', type='text', value='Montreal'),
dccInput(id='input-2-submit', type='text', value='Canada'),
htmlDiv(id='output-keypress')
)
))
app$callback(
output(id = 'output-keypress', property='children'),
params=list(input(id='input-1-submit', property='n_submit'),
input(id = 'input-1-submit', property = 'n_blur'),
input(id='input-2-submit', property='n_submit'),
input(id = 'input-2-submit', property = 'n_blur'),
state('input-1-submit', 'value'),
state('input-2-submit', 'value')),
function(ns1, nb1, ns2, nb2, input1, input2) {
sprintf('Input 1 is %s and input 2 is %s', input1, input2)
})
app$run_server()
Textarea Component
library(dashCoreComponents)
library(dash)
dccTextarea(
placeholder = "Enter a value...",
value = "This is a TextArea component",
style = list("width" = "100%")
)
Checklist Component
library(dashCoreComponents)
library(dash)
dccChecklist(
options=list(
list("label" = "New York City", "value" = "NYC"),
list("label" = "Montréal", "value" = "MTL"),
list("label" = "San Francisco", "value" = "SF")
),
value=list("MTL", "SF")
)
library(dashCoreComponents)
dccChecklist(
options=list(
list("label" = "New York City", "value" = "NYC"),
list("label" = "Montréal", "value" = "MTL"),
list("label" = "San Francisco", "value" = "SF")
),
value=list("MTL", "SF"),
labelStyle = list("display" = "inline-block")
)
RadioItems Component
library(dashCoreComponents)
library(dash)
dccRadioItems(
options=list(
list("label" = "New York City", "value" = "NYC"),
list("label" = "Montréal", "value" = "MTL"),
list("label" = "San Francisco", "value" = "SF")
),
value = "MTL"
)
library(dashCoreComponents)
library(dash)
dccRadioItems(
options=list(
list("label" = "New York City", "value" = "NYC"),
list("label" = "Montréal", "value" = "MTL"),
list("label" = "San Francisco", "value" = "SF")
),
value = "MTL",
labelStyle = list("display" = "inline-block")
)
Button Component
Button Basic Example
An example of a default button without any extra properties and n_clicks in the callback. n_clicks is an integer that represents that number of times the button has been clicked. Note that the original value is NULL.
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
app <- Dash$new()
app$layout(
htmlDiv(
list(
htmlDiv(dccInput(id="input-box", type="text")),
htmlButton("Submit", id="button"),
htmlDiv(id="output-container-button",
children="Enter a value and press submit")
)
)
)
app$callback(
output = list(id = "output-container-button", property = 'children'),
params=list(input(id = "button", property = "n_clicks"),
input(id = "input-box", property = "value")),
function(n_clicks, value) {
sprintf("The input value was \'%s\' and the button has been clicked \'%s\' times", value, n_clicks)
})
app$run_server()
Button with n_clicks_timestamp
This example utilizes the n_clicks_timestamp property, which returns an integer representation of time. This is useful for determining when the button was last clicked.
library(dashCoreComponents)
library(dash)
app <- Dash$new()
app$layout(
htmlDiv(
list(
htmlButton('Button 1', id='btn-1', n_clicks_timestamp=0),
htmlButton('Button 2', id='btn-2', n_clicks_timestamp=0),
htmlButton('Button 3', id='btn-3', n_clicks_timestamp=0),
htmlDiv(id='container-button-timestamp')
)
)
)
app$callback(
output(id = 'container-button-timestamp', property = 'children'),
params = list(input(id = 'btn-1', property = 'n_clicks_timestamp'),
input(id = 'btn-2', property = 'n_clicks_timestamp'),
input(id = 'btn-3', property ='n_clicks_timestamp')),
function(btn1, btn2, btn3){
if((btn1) > (btn2) & (btn1) > (btn3)){
msg = 'Button 1 was most recently clicked'
} else if((btn2) > (btn1) & (btn2) > (btn3)){
msg = 'Button 2 was most recently clicked'
} else if((btn3) > (btn1) & (btn3) > (btn2)){
msg = 'Button 3 was most recently clicked'
}
else{
msg = 'None of the buttons have been clicked yet'
}
return(htmlDiv(list(
htmlDiv(sprintf('btn1: %s', format(btn1, scientific = FALSE))),
htmlDiv(sprintf('btn2: %s', format(btn2, scientific = FALSE))),
htmlDiv(sprintf('btn3: %s', format(btn3, scientific = FALSE))),
htmlDiv(msg))
))
}
)
app$run_server()
DatePickerSingle Component
Calendar Clear and Portals
When the clearable property is set to TRUE the component will be rendered with a small 'x' that will remove all selected dates when selected.
The DatePickerSingle component supports two different portal types, one being a full screen portal (with_full_screen_portal) and another being a simple screen overlay, like the one shown below (with_portal).
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(
htmlDiv(
list(
dccDatePickerSingle(
id='my-date-picker-single',
min_date_allowed=as.Date('1995-8-5'),
max_date_allowed=as.Date('2017-9-19'),
initial_visible_month=as.Date('2017-8-5'),
date = as.POSIXct("2017-08-25 23:59:59", tz = "GMT")
),
htmlDiv(id='output-container-date-picker-single')
)
)
)
app$callback(
output = list(id='output-container-date-picker-single', property = 'children'),
params = list(input(id = 'my-date-picker-single', property = 'date')),
function(date){
if(is.null(date) == FALSE){
date = format(as.Date(date), format = '%B %d,%Y')
sprintf('You have selected: %s', date)
}
}
)
Month and Display Format
The display_format property determines how selected dates are displayed in the DatePickerRange component. The month_format property determines how calendar headers are displayed when the calendar is opened.
Both of these properties are configured through strings that utilize a combination of any of the following tokens.
| String Token | Example | Description |
|:-------------|:-----------------|:-------------------------------------------------------|
| YYYY | 2014 | 4 or 2 digit year |
| YY | 14 | 2 digit year |
| Y | -25 | Year with any number of digits and sign |
| Q | 1..4 | Quarter of year. Sets month to first month in quarter. |
| M MM | 1..12 | Month number |
| MMM MMMM | Jan..December | Month name |
| D DD | 1..31 | Day of month |
| Do | 1st..31st | Day of month with ordinal |
| DDD DDDD | 1..365 | Day of year |
| X | 1410715640.579 | Unix timestamp |
| X | 1410715640579 | Unix ms timestamp |
Display Format Examples
You can utilize any permutation of the string tokens shown in the table above to change how selected dates are displayed in the DatePickerRange component.
dccDatePickerSingle(
date="2017-06-21",
display_format="MMM Do, YY"
)
# Displays "Jun 21st, 17""
dccDatePickerSingle(
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d"),
display_format="M-D-Y-Q"
)
# Displays "6-21-2017-2"
dccDatePickerSingle(
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d"),
display_format="MMMM Y, DD"
)
# Displays "June 2017, 21"
dccDatePickerSingle(
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d"),
display_format="X"
)
# Displays "1498017600"
Month Format Examples
Similar to the display_format, you can set month_format to any permutation of the string tokens shown in the table above to change how calendar titles are displayed in the DatePickerRange component.
dccDatePickerSingle(
month_format="MMM Do, YY",
placeholder="MMM Do, YY",
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "06/21/2017"
dccDatePickerSingle(
month_format="M-D-Y-Q",
placeholder="M-D-Y-Q",
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "06/21/2017"
dccDatePickerSingle(
month_format="MMMM Y",
placeholder="MMMM Y",
date=format(as.Date("2020-2-29"), format = "%Y,%m,%d")
)
# Displays "02/29/2020"
Vertical Calendar and Placeholder Text
The DatePickerRange component can be rendered in two orientations, either horizontally or vertically. If calendar_orientation is set to 'vertical', it will be rendered vertically and will default to 'horizontal' if not defined.
The start_date_placeholder_text and end_date_placeholder_text define the grey default text defined in the calendar input boxes when no date is selected.
dccDatePickerSingle(
calendar_orientation="vertical",
placeholder="Select a date",
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "06/21/2017"
Calendar Clear and Portals
When the clearable property is set to TRUE the component will be rendered with a small 'x' that will remove all selected dates when selected.
The DatePickerSingle component supports two different portal types, one being a full screen portal (with_full_screen_portal) and another being a simple screen overlay, like the one shown below (with_portal).
dccDatePickerSingle(
clearable=TRUE,
with_portal=TRUE,
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "06/21/2017"
Right to Left Calendars and First Day of Week
When the is_RTL property is set to TRUE the calendar will be rendered from right to left.
The first_day_of_week property allows you to define which day of the week will be set as the first day of the week. In the example below, Tuesday is the first day of the week.
dccDatePickerSingle(
is_RTL=TRUE,
first_day_of_week=3,
date=format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "06/21/2017"
DatePickerRange Component
Simple DatePickerRange Example
This is a simple example of a DatePickerRange component tied to a callback. The min_date_allowed and max_date_allowed properties define the minimum and maximum selectable dates on the calendar while initial_visible_month defines the calendar month that is first displayed when the DatePickerRange component is opened.
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(
htmlDiv(
list(
dccDatePickerRange(
id='my-date-picker-single',
min_date_allowed=as.Date('1995-8-5'),
max_date_allowed=as.Date('2017-9-19'),
initial_visible_month=as.Date('2017-8-5'),
end_date = as.Date('2017-8-5')
),
htmlDiv(id='output-container-date-picker-range')
)
)
)
app$callback(
output = list(id='output-container-date-picker-range', property = 'children'),
params = list(input(id = 'my-date-picker-range', property = 'start_date'),
input(id = 'my-date-picker-range', property = 'end_date')),
function(start_date, end_date){
string_prefix = 'You have selected: '
if(is.null(start_date) == FALSE){
start_date = format(as.Date(start_date), format = '%B %d,%Y')
string_prefix = paste(string_prefix, 'Start Date ', start_date, sep = "")
}
if(is.null(end_date) == FALSE){
end_date = format(as.Date(end_date), format = '%B %d,%Y')
string_prefix = paste(string_prefix, 'End Date: ', end_date, sep = "")
}
if(nchar(string_prefix) == nchar('You have selected: ')){
return('Select a date to see it displayed here')
}
else{
return(string_prefix)
}
}
)
app$run_server()
Month and Display Format
The display_format property determines how selected dates are displayed in the DatePickerRange component. The month_format property determines how calendar headers are displayed when the calendar is opened.
Both of these properties are configured through strings that utilize a combination of any of the following tokens.
| String Token | Example | Description |
|:-------------|:-----------------|:-------------------------------------------------------|
| YYYY | 2014 | 4 or 2 digit year |
| YY | 14 | 2 digit year |
| Y | -25 | Year with any number of digits and sign |
| Q | 1..4 | Quarter of year. Sets month to first month in quarter. |
| M MM | 1..12 | Month number |
| MMM MMMM | Jan..December | Month name |
| D DD | 1..31 | Day of month |
| Do | 1st..31st | Day of month with ordinal |
| DDD DDDD | 1..365 | Day of year |
| X | 1410715640.579 | Unix timestamp |
| X | 1410715640579 | Unix ms timestamp |
Display Format Examples
You can utilize any permutation of the string tokens shown in the table above to change how selected dates are displayed in the DatePickerRange component.
dccDatePickerRange(
end_date = as.POSIXct("2017-6-21 23:59:59", tz = "GMT"),
display_format = "MMM Do, YY",
start_date_placeholder_text = "MMM Do, YY"
)
# Displays "Jun 21st, 17"
dccDatePickerRange(
end_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d"),
display_format = "M-D-Y-Q",
start_date_placeholder_text = "M-D-Y-Q"
)
# Displays "6-21-2017-2"
dccDatePickerRange(
end_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d"),
display_format = "MMMM Y, DD",
start_date_placeholder_text = "MMMM Y, DD"
)
# Displays "June 2017, 21"
dccDatePickerRange(
end_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d"),
display_format = "X",
start_date_placeholder_text = "X"
)
# Displays "1498017600"
Month Format Examples
Similar to the display_format, you can set month_format to any permutation of the string tokens shown in the table above to change how calendar titles are displayed in the DatePickerRange component.
dccDatePickerRange(
display_format = "MMM Do, YY",
start_date_placeholder_text = "MMM Do, YY",
start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "Jun 21st, 17"
dccDatePickerRange(
display_format = "M-D-Y-Q",
start_date_placeholder_text = "M-D-Y-Q",
start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "6-21-2017-2"
dccDatePickerRange(
display_format = "MMMM Y",
start_date_placeholder_text = "MMMM Y",
start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "June 2017"
dccDatePickerRange(
display_format = "X",
start_date_placeholder_text = "X",
start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "1498017600"
Vertical Calendar and Placeholder Text
The DatePickerRange component can be rendered in two orientations, either horizontally or vertically. If calendar_orientation is set to 'vertical', it will be rendered vertically and will default to 'horizontal' if not defined.
The start_date_placeholder_text and end_date_placeholder_text define the grey default text defined in the calendar input boxes when no date is selected.
dccDatePickerRange(
start_date_placeholder_text = "Start Period",
end_date_placeholder_text = "End Period",
calendar_orientation = "vertical",
)
Minimum Nights, Calendar Clear, and Portals
The minimum_nights property defines the number of nights that must be in between the range of two selected dates.
When the clearable property is set to TRUE the component will be rendered with a small 'x' that will remove all selected dates when selected.
The DatePickerRange component supports two different portal types, one being a full screen portal (with_full_screen_portal) and another being a simple screen overlay, like the one shown below (with_portal).
dccDatePickerRange(
minimum_nights = 5,
clearable = TRUE,
with_portal = TRUE,
start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
Right to Left Calendars and First Day of Week
When the is_RTL property is set to TRUE the calendar will be rendered from right to left.
The first_day_of_week property allows you to define which day of the week will be set as the first day of the week. In the example below, Tuesday is the first day of the week.
dccDatePickerRange(
is_RTL = TRUE,
first_day_of_week = 3,
start_date= format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
Markdown Component
Syntax Guide
These examples are based on the GitHub Markdown Guide. The Dash Markdown component uses the CommonMark specification of Markdown.
Headers
library(dashCoreComponents)
dccMarkdown('
# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag)
library(dashCoreComponents)
dccMarkdown('
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
_You **can** combine them_
'
)
Lists
Unordered
library(dashCoreComponents)
dccMarkdown('
* Item 1
* Item 2
* Item 2a
* Item 2b
')
Block Quotes
library(dashCoreComponents)
dccMarkdown('
>
> Block quotes are used to highlight text.
>
')
Links
library(dashCoreComponents)
dccMarkdown('
[Dash User Guide](https://dash.plotly.com/)')
Inline Code
Any block of text surrounded by
library(dashCoreComponents)
dccMarkdown('
Inline code snippet = `TRUE` ')
Interactive Tables
The dashHtmlComponents package exposes all of the HTML tags. This includes the Table, Tr, and Tbody tags that can be used to create an HTML table. See Create Your First Dash App, Part 1 for an example. Dash provides an interactive DataTable as part of the dash-table project. This table includes built-in filtering, row-selection, editing, and sorting.
Upload Component
The Dash upload component allows your app's viewers to upload files, like excel spreadsheets or images, into your application. Your Dash app can access the contents of an upload by listening to the contents property of the dccUpload component. contents is a base64 encoded string that contains the files contents, no matter what type of file: text files, images, zip files, excel spreadsheets, etc.
Here's an example that parses CSV or Excel files and displays the results in a table. Note that this example uses the DataTable from the dash-table project.
library(dashHtmlComponents)
library(dash)
library(anytime)
app = Dash$new()
app$layout(htmlDiv(list(
dccUpload(
id='upload-data',
children=htmlDiv(list(
'Drag and Drop or ',
htmlA('Select Files')
)),
style=list(
'width'= '100%',
'height'= '60px',
'lineHeight'= '60px',
'borderWidth'= '1px',
'borderStyle'= 'dashed',
'borderRadius'= '5px',
'textAlign'= 'center',
'margin'= '10px'
),
# Allow multiple files to be uploaded
multiple=TRUE
),
htmlDiv(id='output-data-upload')
)))
parse_contents = function(contents, filename, date){
content_type = strsplit(contents, ",")
content_string = strsplit(contents, ",")
decoded = base64_dec(content_string)
if('csv' %in% filename){
df = read.csv(utf8::as_utf8(decoded))
} else if('xls' %in% filename){
df = read.table(decoded, encoding = 'bytes')
} else{
return(htmlDiv(list(
'There was an error processing this file.'
)))
}
return(htmlDiv(list(
htmlH5(filename),
htmlH6(anytime(date)),
dashDataTable(df_to_list('records'),columns = lapply(colnames(df), function(x){list('name' = x, 'id' = x)})),
htmlHr(),
htmlDiv('Raw Content'),
htmlPre(paste(substr(toJSON(contents), 1, 100), "..."), style=list(
'whiteSpace'= 'pre-wrap',
'wordBreak'= 'break-all'
))
)))
}
app$callback(
output = list(id='output-data-upload', property = 'children'),
params = list(input(id = 'upload-data', property = 'contents'),
state(id = 'upload-data', property = 'filename'),
state(id = 'upload-data', property = 'last_modified')),
function(list_of_contents, list_of_names, list_of_dates){
if(is.null(list_of_contents) == FALSE){
children = lapply(1:length(list_of_contents), function(x){
parse_content(list_of_contents[[x]], list_of_names[[x]], list_of_dates[[x]])
})
}
return(children)
})
app$run_server()
This next example responds to image uploads by displaying them in the app with the htmlImg component.
library(dashHtmlComponents)
library(dash)
library(anytime)
app = Dash$new()
app$layout(htmlDiv(list(
dccUpload(
id='upload-image',
children=htmlDiv(list(
'Drag and Drop or ',
htmlA('Select Files')
)),
style=list(
'width'= '100%',
'height'= '60px',
'lineHeight'= '60px',
'borderWidth'= '1px',
'borderStyle'= 'dashed',
'borderRadius'= '5px',
'textAlign'= 'center',
'margin'= '10px'
),
# Allow multiple files to be uploaded
multiple=TRUE
),
htmlDiv(id='output-image-upload')
)))
parse_content = function(contents, filename, date){
return(htmlDiv(list(
htmlH5(filename),
htmlH6(anytime(date)),
htmlImg(src=contents),
htmlHr(),
htmlDiv('Raw Content'),
htmlPre(paste(substr(toJSON(contents), 1, 100), "..."), style=list(
'whiteSpace'= 'pre-wrap',
'wordBreak'= 'break-all'
))
)))
}
app$callback(
output = list(id='output-image-upload', property = 'children'),
params = list(input(id = 'upload-image', property = 'contents'),
state(id = 'upload-image', property = 'filename'),
state(id = 'upload-image', property = 'last_modified')),
function(list_of_contents, list_of_names, list_of_dates){
if(is.null(list_of_contents) == FALSE){
children = lapply(1:length(list_of_contents), function(x){
parse_content(list_of_contents[[x]], list_of_names[[x]], list_of_dates[[x]])
})
} else{
}
return(children)
}
)
app$run_server()
The children attribute of the Upload component accepts any Dash component. Clicking on the children element will trigger the upload action, as will dragging and dropping files. Here are a few different ways that you could style the upload component using standard dash components.
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(htmlDiv(list(
dccUpload(htmlButton('Upload File')),
htmlHr(),
dccUpload(htmlA('Upload File')),
htmlHr(),
dccUpload(list(
'Drag and Drop or ',
htmlA('Select a File')
), style=list(
'width'= '100%',
'height'= '60px',
'lineHeight'= '60px',
'borderWidth'= '1px',
'borderStyle'= 'dashed',
'borderRadius'= '5px',
'textAlign'= 'center'
))
)))
app$run_server()
Tabs Component
The Tabs and Tab components can be used to create tabbed sections in your app. The Tab component controls the style and value of the individual tab and the Tabs component hold a collection of Tab components.
- Method 1. Content as Callback
- Method 2. Content as Tab children
- Styling the Tabs component
- with CSS classes
- with inline styles
- with props
Method 1. Content as Callback
Attach a callback to the Tabs value prop and update a container's children property in your callback.
library(dashHtmlComponents)
library(dash)
utils <- new.env()
source('dashr/utils.R', local=utils)
examples <- list(
button = utils$LoadExampleCode('dashr/chapters/dash-core-components/Button/examples/button.R'),
tabs = utils$LoadExampleCode('dashr/chapters/dash-core-components/Tabs/examples/tabs.R')
)
app = Dash$new()
app$layout(htmlDiv(list(
htmlH1('Dash Tabs component demo'),
dccTabs(id="tabs-example", value='tab-1-example', children=list(
dccTab(label='Tab One', value='tab-1-example'),
dccTab(label='Tab Two', value='tab-2-example')
)),
htmlDiv(id='tabs-content-example')
)))
app$callback(
output = list(id='tabs-content-example', property = 'children'),
params = list(input(id = 'tabs-example', property = 'value')),
function(tab){
if(tab == 'tab-1-example'){
return(htmlDiv(list(
htmlH3('Tab content 1'),
dccGraph(
id='graph-1-tabs',
figure=list(
'data' = list(list(
'x' = c(1, 2, 3),
'y' = c(3, 1, 2),
'type' = 'bar'
))
)
)
)))
}
else if(tab == 'tab-2-example'){
return(htmlDiv(list(
htmlH3('Tab content 2'),
dccGraph(
id='graph-2-tabs',
figure=list(
'data' = list(list(
'x' = c(1, 2, 3),
'y' = c(5, 10, 6),
'type' = 'bar'
))
)
)
)))
}
}
)
app$run_server()
Method 2. Content as Tab Children
Instead of displaying the content through a callback, you can embed the content directly as the children property in the Tab component:
app$layout(htmlDiv(list(
dccTabs(id="tabs", children=list(
dccTab(label='Tab one', children=list(
htmlDiv(list(
dccGraph(
id='example-graph',
figure=list(
'data'= list(
list('x'= c(1, 2, 3), 'y'= c(4, 1, 2),
'type'= 'bar', 'name'= 'SF'),
list('x'= c(1, 2, 3), 'y'= c(2, 4, 5),
'type'= 'bar', 'name'= 'Montréal')
)
)
)
))
)),
dccTab(label='Tab two', children=list(
dccGraph(
id='example-graph-1',
figure=list(
'data'= list(
list('x'= c(1, 2, 3), 'y'= c(1, 4, 1),
'type'= 'bar', 'name'= 'SF'),
list('x'= c(1, 2, 3), 'y'= c(1, 2, 3),
'type'= 'bar', 'name'= 'Montréal')
)
)
)
)),
dccTab(label='Tab three', children=list(
dccGraph(
id='example-graph-2',
figure=list(
'data'= list(
list('x'= list(1, 2, 3), 'y'= list(2, 4, 3),
'type'= 'bar', 'name'= 'SF'),
list('x'= list(1, 2, 3), 'y'= list(5, 4, 3),
'type'= 'bar', 'name'= 'Montréal')
)
)
)
))
))
)))
app$run_server()
Note that this method has a drawback: it requires that you compute the children property for each individual tab upfront and send all of the tab's content over the network at once. The callback method allows you to compute the tab's content on the fly (that is, when the tab is clicked).
Styling the Tabs component
With CSS classes
Styling the Tabs (and Tab) component can either be done using CSS classes by providing your own to the className property:
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(htmlDiv(list(
dccTabs(
id="tabs-with-classes",
value='tab-2',
parent_className='custom-tabs',
className='custom-tabs-container',
children=list(
dccTab(
label='Tab one',
value='tab-1',
className='custom-tab',
selected_className='custom-tab--selected'
),
dccTab(
label='Tab two',
value='tab-2',
className='custom-tab',
selected_className='custom-tab--selected'
),
dccTab(
label='Tab three, multiline',
value='tab-3', className='custom-tab',
selected_className='custom-tab--selected'
),
dccTab(
label='Tab four',
value='tab-4',
className='custom-tab',
selected_className='custom-tab--selected'
)
)),
htmlDiv(id='tabs-content-classes')
)))
app$callback(
output = list(id='tabs-content-classes', property = 'children'),
params = list(input(id = 'tabs-with-classes', property = 'value')),
function(tab){
if(tab == 'tab-1'){
return(htmlDiv(
list(htmlH3('Tab content 1'))
))
} else if(tab == 'tab-2'){
return(htmlDiv(
list(htmlH3('Tab content 2'))
))
} else if(tab == 'tab-3'){
return(htmlDiv(
list(htmlH3('Tab content 3'))
))
} else if(tab == 'tab-4'){
return(htmlDiv(
list(htmlH3('Tab content 4'))
))
}
}
)
app$run_server()
Notice how the container of the Tabs can be styled as well by supplying a class to the parent_className prop, which we use here to draw a border below it, positioning the actual Tabs (with padding) more in the center. We also added display: flex and justify-content: center to the regular Tab components, so that labels with multiple lines will not break the flow of the text. The corresponding CSS file (assets/tabs.css) looks like this. Save the file in an assets folder (it can be named anything you want). Dash will automatically include this CSS when the app is loaded.
.custom-tabs-container { width: 85%; } .custom-tabs { border-top-left-radius: 3px; background-color: #f9f9f9; padding: 0px 24px; border-bottom: 1px solid #d6d6d6; }
.custom-tab { color:#586069; border-top-left-radius: 3px; border-top: 3px solid transparent !important; border-left: 0px !important; border-right: 0px !important; border-bottom: 0px !important; background-color: #fafbfc; padding: 12px !important; font-family: "system-ui"; display: flex !important; align-items: center; justify-content: center; } .custom-tab--selected { color: black; box-shadow: 1px 1px 0px white; border-left: 1px solid lightgrey !important; border-right: 1px solid lightgrey !important; border-top: 3px solid #e36209 !important; }
With inline styles
An alternative to providing CSS classes is to provide style dictionaries directly:
library(dashHtmlComponents)
library(dash)
app = Dash$new()
tabs_styles = list(
'height'= '44px'
)
tab_style = list(
'borderBottom'= '1px solid #d6d6d6',
'padding'= '6px',
'fontWeight'= 'bold'
)
tab_selected_style = list(
'borderTop'= '1px solid #d6d6d6',
'borderBottom'= '1px solid #d6d6d6',
'backgroundColor'= '#119DFF',
'color'= 'white',
'padding'= '6px'
)
app$layout(htmlDiv(list(
dccTabs(id="tabs-styled-with-inline", value='tab-1', children=list(
dccTab(label='Tab 1', value='tab-1', style=tab_style, selected_style=tab_selected_style),
dccTab(label='Tab 2', value='tab-2', style=tab_style, selected_style=tab_selected_style),
dccTab(label='Tab 3', value='tab-3', style=tab_style, selected_style=tab_selected_style),
dccTab(label='Tab 4', value='tab-4', style=tab_style, selected_style=tab_selected_style)
), style=tabs_styles),
htmlDiv(id='tabs-content-inline')
)))
app$callback(
output = list(id='tabs-content-inline', property = 'children'),
params = list(input(id = 'tabs-styled-with-inline', property = 'value')),
function(tab){
if(tab == 'tab-1'){
return(htmlDiv(
list(htmlH3('Tab content 1'))
))
} else if(tab == 'tab-2'){
return(htmlDiv(
list(htmlH3('Tab content 2'))
))
} else if(tab == 'tab-3'){
return(htmlDiv(
list(htmlH3('Tab content 3'))
))
} else if(tab == 'tab-4'){
return(htmlDiv(
list(htmlH3('Tab content 4'))
))
}
}
)
app$run_server()
Lastly, you can set the colors of the Tabs components in the color prop, by specifying the "border", "primary", and "background" colors in a dict. Make sure you set them all, if you are using them!
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(htmlDiv(list(
dccTabs(id="tabs-styled-with-props", value='tab-1', children=list(
dccTab(label='1', value='tab-1'),
dccTab(label='2', value='tab-2')
), colors=list(
"border"= "white",
"primary"= "gold",
"background"= "cornsilk"
)),
htmlDiv(id='tabs-content-props')
)))
app$callback(
output = list(id='tabs-content-props', property = 'children'),
params = list(input(id = 'tabs-styled-with-props', property = 'value')),
function(tab){
if(tab == 'tab-1'){
return(htmlDiv(
list(htmlH3('Tab content 1'))
))
} else if(tab == 'tab-2'){
return(htmlDiv(
list(htmlH3('Tab content 2'))
))
}
})
app$run_server()
Graph Component
Customize the Plotly.js config options of your graph using the config property. The example below uses the showSendToCloud and plotlyServerURL options include a save button in the modebar of the graph which exports the figure to URL specified by plotlyServerURL.
app$layout(htmlDiv(list(
dccDropdown(
id='my-dropdown1',
options=list(
list('label'= 'New York City', 'value'= 'NYC'),
list('label'= 'Montreal', 'value'= 'MTL'),
list('label'= 'San Francisco', 'value'= 'SF')
),
value='NYC'
),
dccGraph(
id='graph1',
config=list(
'showSendToCloud'= TRUE,
'plotlyServerURL'= 'https=//plotly.com'
)
)
)))
app$callback(
output = list(id='graph1', property='figure'),
params = list(input(id='my-dropdown1', property='value')),
function(value) {
y_list = list(
'NYC'= list(4,2,3),
'MTL'= list(1, 2, 4),
'SF'= list(5, 3, 6)
)
return(list(
'data' = list(
list(
'type'= 'scatter',
'y'= c(unlist(y_list[value]))
)),
'layout'= list(
'title'= value
)
))
}
)
app$run_server()
ConfirmDialog Component
ConfirmDialog is used to display the browser's native 'confirm' modal, with an optional message and two buttons ('OK' and 'Cancel').
library(dashCoreComponents)
confirm <- dccConfirmDialog(
id = "confirm",
message = "Danger danger! Are you sure you want to continue?"
)
This ConfirmDialog can be used in conjunction with buttons when the user is performing an action that should require an extra step of verification.
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(
htmlDiv(
list(
dccConfirmDialog(
id='confirm',
message='Danger danger! Are you sure you want to continue?'
),
dccDropdown(
options=lapply(list('Safe', 'Danger!!'),function(x){list('label'= x, 'value'= x)}),
id='dropdown'
),
htmlDiv(id='output-confirm1')
)
)
)
app$callback(
output = list(id = 'confirm', property = 'displayed'),
params=list(input(id = 'dropdown', property = 'value')),
function(value){
if(value == 'Danger!!'){
return(TRUE)}
else{
return(FALSE)}
})
app$callback(
output = list(id = 'output-confirm1', property = 'children'),
params=list(input(id = 'confirm', property = 'submit_n_clicks')),
function(n_clicks, value) {
if(length(submit_n_clicks) == FALSE){
sprintf('It wasnt easy but we did it %s', str(submit_n_clicks))
}
})
app$run_server()
There is also a dccConfirmDialogProvider, it will automatically wrap a child component to send a dccConfirmDialog when clicked.
confirm <- dccConfirmDialogProvider(
children = htmlButton("Click Me"),
id = "danger-danger",
message = "Danger danger! Are you sure you want to continue?"
)
Store Component
The store component can be used to keep data in the visitor's browser. The data is scoped to the user accessing the page. Three types of storage (storage_type prop):
memory: default, keep the data as long the page is not refreshed.local: keep the data until it is manually cleared.session: keep the data until the browser/tab closes. For local/session, the data is serialized as json when stored.
library(dashCoreComponents)
store <- dccStore(id = "my-store", data = list("my-data" = "data"))
Loading Component
Here’s a simple example that wraps the outputs for a couple of Input components in the Loading component. As you can see, you can define the type of spinner you would like to show (refer to the reference table below for all possible types of spinners). You can modify other attributes as well, such as fullscreen=TRUE if you would like the spinner to be displayed fullscreen. Notice that, the Loading component traverses all of it's children to find a loading state, as demonstrated in the second callback, so that even nested children will get picked up.
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(htmlDiv(
children=list(
htmlH3("Edit text input to see loading state"),
dccInput(id="input-1", value='Input triggers local spinner'),
dccLoading(id="loading-1", children=list(htmlDiv(id="loading-output-1")), type="default"),
htmlDiv(
list(
dccInput(id="input-2", value='Input triggers nested spinner'),
dccLoading(
id="loading-2",
children=list(htmlDiv(list(htmlDiv(id="loading-output-2")))),
type="circle"
)
)
)
)
))
app$callback(
output = list(id='loading-output-1', property = 'children'),
params = list(input(id = 'input-1', property = 'value')),
function(value){
Sys.sleep(1)
return(value)
}
)
app$callback(
output = list(id='loading-output-2', property = 'children'),
params = list(input(id = 'input-2', property = 'value')),
function(value){
Sys.sleep(1)
return(value)
}
)
app$run_server()
Location Component
The location component represents the location bar in your web browser. Through its href, pathname, search and hash properties you can access different portions of your app's url. For example, given the url http://127.0.0.1:8050/page-2?a=test#quiz:
href = 'http://127.0.0.1:8050/page-2?a=test#quiz'pathname = '/page-2'search = '?a=test'hash = '#quiz'
Try the dashCoreComponents package in your browser
Any scripts or data that you put into this service are public.
dashCoreComponents documentation built on July 1, 2020, 8:20 p.m.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
knitr::opts_chunk$set( collapse = TRUE, comment = "#>" )
Dash ships with supercharged components for interactive user interfaces. A core set of components, written and maintained by the Dash team, is available in the dashCoreComponents package. The source is on GitHub at plotly/dash-core-components.
Please visit our online documentation, which is interactive and frequently updated: https://dashr.plotly.com.
Dropdown Component
Default Dropdown
An example of a default dropdown without any extra properties.
dccDropdown( options=list( list(label="New York City", value="NYC"), list(label="Montréal", value="MTL"), list(label="San Francisco", value="SF") ), value=list("MTL", "NYC"), multi=TRUE )
Multi-Value Dropdown
A dropdown component with the multi property set to TRUE will allow the user to select more than one value at a time.
dccDropdown( options=list( list(label="New York City", value="NYC"), list(label="Montréal", value="MTL"), list(label="San Francisco", value="SF") ), value="MTL", id="my-dropdown" )
Disable Search
The searchable property is set to TRUE by default on all Dropdown components. To prevent searching the dropdown value, just set the searchable property to FALSE. Try searching for 'New York' on this dropdown below and compare it to the other dropdowns on the page to see the difference.
dccDropdown( options=list( list(label="New York City", value="NYC"), list(label="Montréal", value="MTL"), list(label="San Francisco", value="SF") ), searchable = FALSE )
Dropdown Clear
The clearable property is set to TRUE by default on all Dropdown components. To prevent the clearing of the selected dropdown value, just set the clearable property to FALSE:
dccDropdown( options=list( list(label="New York City", value="NYC"), list(label="Montréal", value="MTL"), list(label="San Francisco", value="SF") ), value = "MTL", clearable = FALSE )
Placeholder Text
The placeholder property allows you to define default text shown when no value is selected.
dccDropdown( options=list( list(label="New York City", value="NYC"), list(label="Montréal", value="MTL"), list(label="San Francisco", value="SF") ), placeholder="Select a city" )
Disable Dropdown
To disable the dropdown just set disabled=TRUE.
dccDropdown( options=list( list(label="New York City", value="NYC"), list(label="Montréal", value="MTL"), list(label="San Francisco", value="SF") ), disabled=TRUE )
Disable Options
To disable a particular option inside the dropdown menu, set the disabled property in the options.
dccDropdown( options=list( list(label="New York City", value="NYC", "disabled" = TRUE), list(label="Montréal", value="MTL"), list(label="San Francisco", value="SF", "disabled" = TRUE) ) )
Slider Component
Simple Slider Example
An example of a basic slider tied to a callback.
library(dashCoreComponents) library(dashHtmlComponents) app <- Dash$new() app$layout( htmlDiv( list( dccSlider( id='my-slider', min=0, max=20, step=0.5, value=10 ), htmlDiv(id='slider-output-container') ) ) ) app$callback( output(id = 'slider-output-container', property = 'children'), params=list(input(id = 'my-slider', property = 'value')), function(value) { sprintf("you have selected %0.1f", value) }) app$run_server()
Marks and Steps
If slider marks are defined and step is set to NULL then the slider will only be able to select values that have been predefined by the marks. marks is a list where the keys represent the numerical values and the values represent their labels.
dccSlider( min=0, max=10, marks = list( "0" = "0 °F", "3" = "3 °F", "5" = "5 °F", "7.65" = "7.65 °F", "10" = "10 °F" ), value=5 )
By default, included=TRUE, meaning the rail trailing the handle will be highlighted. To have the handle act as a discrete value set included=FALSE. To style marks, include a style css attribute alongside the list value.
dccSlider( min=0, max=100, value = 65, marks = list( "0" = list("label" = "0 °C", "style" = list("color" = "#77b0b1")), "26" = list("label" = "26 °C"), "37" = list("label" = "37 °C"), "100" = list("label" = "100 °C", "style" = list("color" = "#FF4500")) ) )
Non-Linear Slider and Updatemode
library(dashCoreComponents) library(dashHtmlComponents) library(dash) transform_value = function(value){ return(10**value) } app <- Dash$new() app$layout( htmlDiv( list( dccSlider( id='slider-updatemode', marks=unlist(lapply(list(1:4), function(x){10**x})), max=3, value=2, step=0.01, updatemode='drag' ), htmlDiv(id='updatemode-output-container', style=list('margin-top' = 20)) ) ) ) app$callback( output(id = 'updatemode-output-container', property='children'), params=list(input(id='slider-updatemode', property='value')), function(value) { sprintf('Linear Value: %g | Log Value: %0.2f', value, transform_value(value)) }) app$run_server()
RangeSlider Component
Simple RangeSlider Example
An example of a basic RangeSlider tied to a callback.
library(dashCoreComponents) library(dashHtmlComponents) app <- Dash$new() app$layout( htmlDiv( list( dccRangeSlider( id='my-range-slider', min=0, max=20, step=0.5, value=list(5, 15) ), htmlDiv(id='output-container-range-slider') ) ) ) app$callback( output(id = 'output-container-range-slider', property='children'), params=list(input(id='my-range-slider', property='value')), function(value) { sprintf('You have selected [%0.1f, %0.1f]', value[1], value[2]) }) app$run_server()
Marks and Steps
If slider marks are defined and step is set to NULL then the slider will only be able to select values that have been predefined by the marks.
dccRangeSlider( min=0, max=10, marks=list( "0" = "0 °F", "3" = "3 °F", "5" = "5 °F", "7.65" = "7.65 °F", "10" = "10 °F" ), value=list(3, 7.65) )
Included and Styling Marks
By default, included=TRUE, meaning the rail trailing the handle will be highlighted. To have the handle act as a discrete value set included=FALSE. To style marks, include a style css attribute alongside the key value.
library(dashCoreComponents) dccRangeSlider( min=0, max=100, marks = list( "0" = list("label" = "0 °C", "style" = list("color" = "#77b0b1")), "26" = list("label" = "26 °C"), "37" = list("label" = "37 °C"), "100" = list("label" = "100°C" , "style" = list("color" = "#FF4500")) ) )
Multiple Handles
To create multiple handles just define more values for value!
dccRangeSlider( min=0, max=30, value=list(1, 3, 4, 5, 12, 17) )
Crossing Handles
If allowCross=FALSE, the handles will not be allowed to cross over each other.
dccRangeSlider( min=0, max=30, value=list(10,15), allowCross = FALSE )
Non-Linear Slider and Updatemode
Create a logarithmic slider by setting marks to be logarithmic and adjusting the slider's output value in the callbacks. The updatemode property allows us to determine when we want a callback to be triggered. The following example has updatemode='drag' which means a callback is triggered everytime the handle is moved. Contrast the callback output with the first example on this page to see the difference.
library(dash) library(dashCoreComponents) library(dashHtmlComponents) transform_value = function(value){ return(10 ** value) } app <- Dash$new() app$layout( htmlDiv( list( dccRangeSlider( id='non-linear-range-slider', marks=unlist(lapply(list(1:4), function(x){10**x})), max=3, value=list(0.1, 2), dots=FALSE, step=0.01, updatemode='drag' ), htmlDiv(id='output-container-range-slider-non-linear', style=list('margin-top' = 20)) ) )) app$callback( output(id = 'output-container-range-slider-non-linear', property='children'), params=list(input(id='non-linear-range-slider', property='value')), function(value) { transformed_value = lapply(value, transform_value) sprintf('Linear Value: %g, Log Value: [%0.2f, %0.2f]', value[2],transformed_value[1], transformed_value[2]) }) app$run_server()
Input Component
Update Value on Keypress
library(dashCoreComponents) library(dashHtmlComponents) library(dash) app <- Dash$new() app$layout( htmlDiv( list( dccInput(id='input-1-keypress', type='text', value='Montreal'), dccInput(id='input-2-keypress', type='text', value='Canada'), htmlDiv(id='output-keypress1') ) ) ) app$callback( output(id = 'output-keypress1', property='children'), params=list(input(id='input-1-keypress', property='value'), input(id='input-2-keypress', property='value')), function(input1, input2) { sprintf('Input 1 is %s and input 2 is %s', input1,input2) }) app$run_server()
Update Value on Enter/Blur
dccInput has properties n_submit, which updates when the enter button is pressed, and n_blur, which updates when the component loses focus (e.g. tab is pressed or the user clicks outside of the input field).
library(dashCoreComponents) library(dashHtmlComponents) library(dash) app <- Dash$new() app$layout( htmlDiv( list( dccInput(id='input-1-submit', type='text', value='Montreal'), dccInput(id='input-2-submit', type='text', value='Canada'), htmlDiv(id='output-keypress') ) )) app$callback( output(id = 'output-keypress', property='children'), params=list(input(id='input-1-submit', property='n_submit'), input(id = 'input-1-submit', property = 'n_blur'), input(id='input-2-submit', property='n_submit'), input(id = 'input-2-submit', property = 'n_blur'), state('input-1-submit', 'value'), state('input-2-submit', 'value')), function(ns1, nb1, ns2, nb2, input1, input2) { sprintf('Input 1 is %s and input 2 is %s', input1, input2) }) app$run_server()
Textarea Component
library(dashCoreComponents) library(dash) dccTextarea( placeholder = "Enter a value...", value = "This is a TextArea component", style = list("width" = "100%") )
Checklist Component
library(dashCoreComponents) library(dash) dccChecklist( options=list( list("label" = "New York City", "value" = "NYC"), list("label" = "Montréal", "value" = "MTL"), list("label" = "San Francisco", "value" = "SF") ), value=list("MTL", "SF") )
library(dashCoreComponents) dccChecklist( options=list( list("label" = "New York City", "value" = "NYC"), list("label" = "Montréal", "value" = "MTL"), list("label" = "San Francisco", "value" = "SF") ), value=list("MTL", "SF"), labelStyle = list("display" = "inline-block") )
RadioItems Component
library(dashCoreComponents) library(dash) dccRadioItems( options=list( list("label" = "New York City", "value" = "NYC"), list("label" = "Montréal", "value" = "MTL"), list("label" = "San Francisco", "value" = "SF") ), value = "MTL" )
library(dashCoreComponents) library(dash) dccRadioItems( options=list( list("label" = "New York City", "value" = "NYC"), list("label" = "Montréal", "value" = "MTL"), list("label" = "San Francisco", "value" = "SF") ), value = "MTL", labelStyle = list("display" = "inline-block") )
Button Component
Button Basic Example
An example of a default button without any extra properties and n_clicks in the callback. n_clicks is an integer that represents that number of times the button has been clicked. Note that the original value is NULL.
library(dashCoreComponents) library(dashHtmlComponents) library(dash) app <- Dash$new() app$layout( htmlDiv( list( htmlDiv(dccInput(id="input-box", type="text")), htmlButton("Submit", id="button"), htmlDiv(id="output-container-button", children="Enter a value and press submit") ) ) ) app$callback( output = list(id = "output-container-button", property = 'children'), params=list(input(id = "button", property = "n_clicks"), input(id = "input-box", property = "value")), function(n_clicks, value) { sprintf("The input value was \'%s\' and the button has been clicked \'%s\' times", value, n_clicks) }) app$run_server()
Button with n_clicks_timestamp
This example utilizes the n_clicks_timestamp property, which returns an integer representation of time. This is useful for determining when the button was last clicked.
library(dashCoreComponents) library(dash) app <- Dash$new() app$layout( htmlDiv( list( htmlButton('Button 1', id='btn-1', n_clicks_timestamp=0), htmlButton('Button 2', id='btn-2', n_clicks_timestamp=0), htmlButton('Button 3', id='btn-3', n_clicks_timestamp=0), htmlDiv(id='container-button-timestamp') ) ) ) app$callback( output(id = 'container-button-timestamp', property = 'children'), params = list(input(id = 'btn-1', property = 'n_clicks_timestamp'), input(id = 'btn-2', property = 'n_clicks_timestamp'), input(id = 'btn-3', property ='n_clicks_timestamp')), function(btn1, btn2, btn3){ if((btn1) > (btn2) & (btn1) > (btn3)){ msg = 'Button 1 was most recently clicked' } else if((btn2) > (btn1) & (btn2) > (btn3)){ msg = 'Button 2 was most recently clicked' } else if((btn3) > (btn1) & (btn3) > (btn2)){ msg = 'Button 3 was most recently clicked' } else{ msg = 'None of the buttons have been clicked yet' } return(htmlDiv(list( htmlDiv(sprintf('btn1: %s', format(btn1, scientific = FALSE))), htmlDiv(sprintf('btn2: %s', format(btn2, scientific = FALSE))), htmlDiv(sprintf('btn3: %s', format(btn3, scientific = FALSE))), htmlDiv(msg)) )) } ) app$run_server()
DatePickerSingle Component
Calendar Clear and Portals
When the clearable property is set to TRUE the component will be rendered with a small 'x' that will remove all selected dates when selected.
The DatePickerSingle component supports two different portal types, one being a full screen portal (with_full_screen_portal) and another being a simple screen overlay, like the one shown below (with_portal).
library(dashHtmlComponents) library(dash) app = Dash$new() app$layout( htmlDiv( list( dccDatePickerSingle( id='my-date-picker-single', min_date_allowed=as.Date('1995-8-5'), max_date_allowed=as.Date('2017-9-19'), initial_visible_month=as.Date('2017-8-5'), date = as.POSIXct("2017-08-25 23:59:59", tz = "GMT") ), htmlDiv(id='output-container-date-picker-single') ) ) ) app$callback( output = list(id='output-container-date-picker-single', property = 'children'), params = list(input(id = 'my-date-picker-single', property = 'date')), function(date){ if(is.null(date) == FALSE){ date = format(as.Date(date), format = '%B %d,%Y') sprintf('You have selected: %s', date) } } )
Month and Display Format
The display_format property determines how selected dates are displayed in the DatePickerRange component. The month_format property determines how calendar headers are displayed when the calendar is opened.
Both of these properties are configured through strings that utilize a combination of any of the following tokens.
| String Token | Example | Description |
|:-------------|:-----------------|:-------------------------------------------------------|
| YYYY | 2014 | 4 or 2 digit year |
| YY | 14 | 2 digit year |
| Y | -25 | Year with any number of digits and sign |
| Q | 1..4 | Quarter of year. Sets month to first month in quarter. |
| M MM | 1..12 | Month number |
| MMM MMMM | Jan..December | Month name |
| D DD | 1..31 | Day of month |
| Do | 1st..31st | Day of month with ordinal |
| DDD DDDD | 1..365 | Day of year |
| X | 1410715640.579 | Unix timestamp |
| X | 1410715640579 | Unix ms timestamp |
Display Format Examples
You can utilize any permutation of the string tokens shown in the table above to change how selected dates are displayed in the DatePickerRange component.
dccDatePickerSingle( date="2017-06-21", display_format="MMM Do, YY" ) # Displays "Jun 21st, 17""
dccDatePickerSingle( date=format(as.Date("2017-6-21"), format = "%Y,%m,%d"), display_format="M-D-Y-Q" ) # Displays "6-21-2017-2"
dccDatePickerSingle( date=format(as.Date("2017-6-21"), format = "%Y,%m,%d"), display_format="MMMM Y, DD" ) # Displays "June 2017, 21"
dccDatePickerSingle( date=format(as.Date("2017-6-21"), format = "%Y,%m,%d"), display_format="X" ) # Displays "1498017600"
Month Format Examples
Similar to the display_format, you can set month_format to any permutation of the string tokens shown in the table above to change how calendar titles are displayed in the DatePickerRange component.
dccDatePickerSingle( month_format="MMM Do, YY", placeholder="MMM Do, YY", date=format(as.Date("2017-6-21"), format = "%Y,%m,%d") ) # Displays "06/21/2017"
dccDatePickerSingle( month_format="M-D-Y-Q", placeholder="M-D-Y-Q", date=format(as.Date("2017-6-21"), format = "%Y,%m,%d") ) # Displays "06/21/2017"
dccDatePickerSingle( month_format="MMMM Y", placeholder="MMMM Y", date=format(as.Date("2020-2-29"), format = "%Y,%m,%d") ) # Displays "02/29/2020"
Vertical Calendar and Placeholder Text
The DatePickerRange component can be rendered in two orientations, either horizontally or vertically. If calendar_orientation is set to 'vertical', it will be rendered vertically and will default to 'horizontal' if not defined.
The start_date_placeholder_text and end_date_placeholder_text define the grey default text defined in the calendar input boxes when no date is selected.
dccDatePickerSingle( calendar_orientation="vertical", placeholder="Select a date", date=format(as.Date("2017-6-21"), format = "%Y,%m,%d") ) # Displays "06/21/2017"
Calendar Clear and Portals
When the clearable property is set to TRUE the component will be rendered with a small 'x' that will remove all selected dates when selected.
The DatePickerSingle component supports two different portal types, one being a full screen portal (with_full_screen_portal) and another being a simple screen overlay, like the one shown below (with_portal).
dccDatePickerSingle( clearable=TRUE, with_portal=TRUE, date=format(as.Date("2017-6-21"), format = "%Y,%m,%d") ) # Displays "06/21/2017"
Right to Left Calendars and First Day of Week
When the is_RTL property is set to TRUE the calendar will be rendered from right to left.
The first_day_of_week property allows you to define which day of the week will be set as the first day of the week. In the example below, Tuesday is the first day of the week.
dccDatePickerSingle( is_RTL=TRUE, first_day_of_week=3, date=format(as.Date("2017-6-21"), format = "%Y,%m,%d") ) # Displays "06/21/2017"
DatePickerRange Component
Simple DatePickerRange Example
This is a simple example of a DatePickerRange component tied to a callback. The min_date_allowed and max_date_allowed properties define the minimum and maximum selectable dates on the calendar while initial_visible_month defines the calendar month that is first displayed when the DatePickerRange component is opened.
library(dashHtmlComponents) library(dash) app = Dash$new() app$layout( htmlDiv( list( dccDatePickerRange( id='my-date-picker-single', min_date_allowed=as.Date('1995-8-5'), max_date_allowed=as.Date('2017-9-19'), initial_visible_month=as.Date('2017-8-5'), end_date = as.Date('2017-8-5') ), htmlDiv(id='output-container-date-picker-range') ) ) ) app$callback( output = list(id='output-container-date-picker-range', property = 'children'), params = list(input(id = 'my-date-picker-range', property = 'start_date'), input(id = 'my-date-picker-range', property = 'end_date')), function(start_date, end_date){ string_prefix = 'You have selected: ' if(is.null(start_date) == FALSE){ start_date = format(as.Date(start_date), format = '%B %d,%Y') string_prefix = paste(string_prefix, 'Start Date ', start_date, sep = "") } if(is.null(end_date) == FALSE){ end_date = format(as.Date(end_date), format = '%B %d,%Y') string_prefix = paste(string_prefix, 'End Date: ', end_date, sep = "") } if(nchar(string_prefix) == nchar('You have selected: ')){ return('Select a date to see it displayed here') } else{ return(string_prefix) } } ) app$run_server()
Month and Display Format
The display_format property determines how selected dates are displayed in the DatePickerRange component. The month_format property determines how calendar headers are displayed when the calendar is opened.
Both of these properties are configured through strings that utilize a combination of any of the following tokens.
| String Token | Example | Description |
|:-------------|:-----------------|:-------------------------------------------------------|
| YYYY | 2014 | 4 or 2 digit year |
| YY | 14 | 2 digit year |
| Y | -25 | Year with any number of digits and sign |
| Q | 1..4 | Quarter of year. Sets month to first month in quarter. |
| M MM | 1..12 | Month number |
| MMM MMMM | Jan..December | Month name |
| D DD | 1..31 | Day of month |
| Do | 1st..31st | Day of month with ordinal |
| DDD DDDD | 1..365 | Day of year |
| X | 1410715640.579 | Unix timestamp |
| X | 1410715640579 | Unix ms timestamp |
Display Format Examples
You can utilize any permutation of the string tokens shown in the table above to change how selected dates are displayed in the DatePickerRange component.
dccDatePickerRange( end_date = as.POSIXct("2017-6-21 23:59:59", tz = "GMT"), display_format = "MMM Do, YY", start_date_placeholder_text = "MMM Do, YY" ) # Displays "Jun 21st, 17"
dccDatePickerRange( end_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d"), display_format = "M-D-Y-Q", start_date_placeholder_text = "M-D-Y-Q" ) # Displays "6-21-2017-2"
dccDatePickerRange( end_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d"), display_format = "MMMM Y, DD", start_date_placeholder_text = "MMMM Y, DD" ) # Displays "June 2017, 21"
dccDatePickerRange( end_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d"), display_format = "X", start_date_placeholder_text = "X" ) # Displays "1498017600"
Month Format Examples
Similar to the display_format, you can set month_format to any permutation of the string tokens shown in the table above to change how calendar titles are displayed in the DatePickerRange component.
dccDatePickerRange( display_format = "MMM Do, YY", start_date_placeholder_text = "MMM Do, YY", start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d") ) # Displays "Jun 21st, 17"
dccDatePickerRange( display_format = "M-D-Y-Q", start_date_placeholder_text = "M-D-Y-Q", start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d") ) # Displays "6-21-2017-2"
dccDatePickerRange(
display_format = "MMMM Y",
start_date_placeholder_text = "MMMM Y",
start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "June 2017"
dccDatePickerRange(
display_format = "X",
start_date_placeholder_text = "X",
start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d")
)
# Displays "1498017600"
Vertical Calendar and Placeholder Text
The DatePickerRange component can be rendered in two orientations, either horizontally or vertically. If calendar_orientation is set to 'vertical', it will be rendered vertically and will default to 'horizontal' if not defined.
The start_date_placeholder_text and end_date_placeholder_text define the grey default text defined in the calendar input boxes when no date is selected.
dccDatePickerRange( start_date_placeholder_text = "Start Period", end_date_placeholder_text = "End Period", calendar_orientation = "vertical", )
Minimum Nights, Calendar Clear, and Portals
The minimum_nights property defines the number of nights that must be in between the range of two selected dates.
When the clearable property is set to TRUE the component will be rendered with a small 'x' that will remove all selected dates when selected.
The DatePickerRange component supports two different portal types, one being a full screen portal (with_full_screen_portal) and another being a simple screen overlay, like the one shown below (with_portal).
dccDatePickerRange( minimum_nights = 5, clearable = TRUE, with_portal = TRUE, start_date = format(as.Date("2017-6-21"), format = "%Y,%m,%d") )
Right to Left Calendars and First Day of Week
When the is_RTL property is set to TRUE the calendar will be rendered from right to left.
The first_day_of_week property allows you to define which day of the week will be set as the first day of the week. In the example below, Tuesday is the first day of the week.
dccDatePickerRange( is_RTL = TRUE, first_day_of_week = 3, start_date= format(as.Date("2017-6-21"), format = "%Y,%m,%d") )
Markdown Component
Syntax Guide
These examples are based on the GitHub Markdown Guide. The Dash Markdown component uses the CommonMark specification of Markdown.
Headers
library(dashCoreComponents) dccMarkdown(' # This is an <h1> tag ## This is an <h2> tag ###### This is an <h6> tag)
library(dashCoreComponents) dccMarkdown(' *This text will be italic* _This will also be italic_ **This text will be bold** __This will also be bold__ _You **can** combine them_ ' )
Lists
Unordered
library(dashCoreComponents) dccMarkdown(' * Item 1 * Item 2 * Item 2a * Item 2b ')
Block Quotes
library(dashCoreComponents) dccMarkdown(' > > Block quotes are used to highlight text. > ')
Links
library(dashCoreComponents) dccMarkdown(' [Dash User Guide](https://dash.plotly.com/)')
Inline Code
Any block of text surrounded by will rendered as inline-code.
library(dashCoreComponents) dccMarkdown(' Inline code snippet = `TRUE` ')
Interactive Tables
The dashHtmlComponents package exposes all of the HTML tags. This includes the Table, Tr, and Tbody tags that can be used to create an HTML table. See Create Your First Dash App, Part 1 for an example. Dash provides an interactive DataTable as part of the dash-table project. This table includes built-in filtering, row-selection, editing, and sorting.
Upload Component
The Dash upload component allows your app's viewers to upload files, like excel spreadsheets or images, into your application. Your Dash app can access the contents of an upload by listening to the contents property of the dccUpload component. contents is a base64 encoded string that contains the files contents, no matter what type of file: text files, images, zip files, excel spreadsheets, etc.
Here's an example that parses CSV or Excel files and displays the results in a table. Note that this example uses the DataTable from the dash-table project.
library(dashHtmlComponents) library(dash) library(anytime) app = Dash$new() app$layout(htmlDiv(list( dccUpload( id='upload-data', children=htmlDiv(list( 'Drag and Drop or ', htmlA('Select Files') )), style=list( 'width'= '100%', 'height'= '60px', 'lineHeight'= '60px', 'borderWidth'= '1px', 'borderStyle'= 'dashed', 'borderRadius'= '5px', 'textAlign'= 'center', 'margin'= '10px' ), # Allow multiple files to be uploaded multiple=TRUE ), htmlDiv(id='output-data-upload') ))) parse_contents = function(contents, filename, date){ content_type = strsplit(contents, ",") content_string = strsplit(contents, ",") decoded = base64_dec(content_string) if('csv' %in% filename){ df = read.csv(utf8::as_utf8(decoded)) } else if('xls' %in% filename){ df = read.table(decoded, encoding = 'bytes') } else{ return(htmlDiv(list( 'There was an error processing this file.' ))) } return(htmlDiv(list( htmlH5(filename), htmlH6(anytime(date)), dashDataTable(df_to_list('records'),columns = lapply(colnames(df), function(x){list('name' = x, 'id' = x)})), htmlHr(), htmlDiv('Raw Content'), htmlPre(paste(substr(toJSON(contents), 1, 100), "..."), style=list( 'whiteSpace'= 'pre-wrap', 'wordBreak'= 'break-all' )) ))) } app$callback( output = list(id='output-data-upload', property = 'children'), params = list(input(id = 'upload-data', property = 'contents'), state(id = 'upload-data', property = 'filename'), state(id = 'upload-data', property = 'last_modified')), function(list_of_contents, list_of_names, list_of_dates){ if(is.null(list_of_contents) == FALSE){ children = lapply(1:length(list_of_contents), function(x){ parse_content(list_of_contents[[x]], list_of_names[[x]], list_of_dates[[x]]) }) } return(children) }) app$run_server()
This next example responds to image uploads by displaying them in the app with the htmlImg component.
library(dashHtmlComponents) library(dash) library(anytime) app = Dash$new() app$layout(htmlDiv(list( dccUpload( id='upload-image', children=htmlDiv(list( 'Drag and Drop or ', htmlA('Select Files') )), style=list( 'width'= '100%', 'height'= '60px', 'lineHeight'= '60px', 'borderWidth'= '1px', 'borderStyle'= 'dashed', 'borderRadius'= '5px', 'textAlign'= 'center', 'margin'= '10px' ), # Allow multiple files to be uploaded multiple=TRUE ), htmlDiv(id='output-image-upload') ))) parse_content = function(contents, filename, date){ return(htmlDiv(list( htmlH5(filename), htmlH6(anytime(date)), htmlImg(src=contents), htmlHr(), htmlDiv('Raw Content'), htmlPre(paste(substr(toJSON(contents), 1, 100), "..."), style=list( 'whiteSpace'= 'pre-wrap', 'wordBreak'= 'break-all' )) ))) } app$callback( output = list(id='output-image-upload', property = 'children'), params = list(input(id = 'upload-image', property = 'contents'), state(id = 'upload-image', property = 'filename'), state(id = 'upload-image', property = 'last_modified')), function(list_of_contents, list_of_names, list_of_dates){ if(is.null(list_of_contents) == FALSE){ children = lapply(1:length(list_of_contents), function(x){ parse_content(list_of_contents[[x]], list_of_names[[x]], list_of_dates[[x]]) }) } else{ } return(children) } ) app$run_server()
The children attribute of the Upload component accepts any Dash component. Clicking on the children element will trigger the upload action, as will dragging and dropping files. Here are a few different ways that you could style the upload component using standard dash components.
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(htmlDiv(list(
dccUpload(htmlButton('Upload File')),
htmlHr(),
dccUpload(htmlA('Upload File')),
htmlHr(),
dccUpload(list(
'Drag and Drop or ',
htmlA('Select a File')
), style=list(
'width'= '100%',
'height'= '60px',
'lineHeight'= '60px',
'borderWidth'= '1px',
'borderStyle'= 'dashed',
'borderRadius'= '5px',
'textAlign'= 'center'
))
)))
app$run_server()
Tabs Component
The Tabs and Tab components can be used to create tabbed sections in your app. The Tab component controls the style and value of the individual tab and the Tabs component hold a collection of Tab components.
- Method 1. Content as Callback
- Method 2. Content as Tab children
- Styling the Tabs component
- with CSS classes
- with inline styles
- with props
Method 1. Content as Callback
Attach a callback to the Tabs value prop and update a container's children property in your callback.
library(dashHtmlComponents) library(dash) utils <- new.env() source('dashr/utils.R', local=utils) examples <- list( button = utils$LoadExampleCode('dashr/chapters/dash-core-components/Button/examples/button.R'), tabs = utils$LoadExampleCode('dashr/chapters/dash-core-components/Tabs/examples/tabs.R') ) app = Dash$new() app$layout(htmlDiv(list( htmlH1('Dash Tabs component demo'), dccTabs(id="tabs-example", value='tab-1-example', children=list( dccTab(label='Tab One', value='tab-1-example'), dccTab(label='Tab Two', value='tab-2-example') )), htmlDiv(id='tabs-content-example') ))) app$callback( output = list(id='tabs-content-example', property = 'children'), params = list(input(id = 'tabs-example', property = 'value')), function(tab){ if(tab == 'tab-1-example'){ return(htmlDiv(list( htmlH3('Tab content 1'), dccGraph( id='graph-1-tabs', figure=list( 'data' = list(list( 'x' = c(1, 2, 3), 'y' = c(3, 1, 2), 'type' = 'bar' )) ) ) ))) } else if(tab == 'tab-2-example'){ return(htmlDiv(list( htmlH3('Tab content 2'), dccGraph( id='graph-2-tabs', figure=list( 'data' = list(list( 'x' = c(1, 2, 3), 'y' = c(5, 10, 6), 'type' = 'bar' )) ) ) ))) } } ) app$run_server()
Method 2. Content as Tab Children
Instead of displaying the content through a callback, you can embed the content directly as the children property in the Tab component:
app$layout(htmlDiv(list( dccTabs(id="tabs", children=list( dccTab(label='Tab one', children=list( htmlDiv(list( dccGraph( id='example-graph', figure=list( 'data'= list( list('x'= c(1, 2, 3), 'y'= c(4, 1, 2), 'type'= 'bar', 'name'= 'SF'), list('x'= c(1, 2, 3), 'y'= c(2, 4, 5), 'type'= 'bar', 'name'= 'Montréal') ) ) ) )) )), dccTab(label='Tab two', children=list( dccGraph( id='example-graph-1', figure=list( 'data'= list( list('x'= c(1, 2, 3), 'y'= c(1, 4, 1), 'type'= 'bar', 'name'= 'SF'), list('x'= c(1, 2, 3), 'y'= c(1, 2, 3), 'type'= 'bar', 'name'= 'Montréal') ) ) ) )), dccTab(label='Tab three', children=list( dccGraph( id='example-graph-2', figure=list( 'data'= list( list('x'= list(1, 2, 3), 'y'= list(2, 4, 3), 'type'= 'bar', 'name'= 'SF'), list('x'= list(1, 2, 3), 'y'= list(5, 4, 3), 'type'= 'bar', 'name'= 'Montréal') ) ) ) )) )) ))) app$run_server()
Note that this method has a drawback: it requires that you compute the children property for each individual tab upfront and send all of the tab's content over the network at once. The callback method allows you to compute the tab's content on the fly (that is, when the tab is clicked).
Styling the Tabs component
With CSS classes
Styling the Tabs (and Tab) component can either be done using CSS classes by providing your own to the className property:
library(dashHtmlComponents) library(dash) app = Dash$new() app$layout(htmlDiv(list( dccTabs( id="tabs-with-classes", value='tab-2', parent_className='custom-tabs', className='custom-tabs-container', children=list( dccTab( label='Tab one', value='tab-1', className='custom-tab', selected_className='custom-tab--selected' ), dccTab( label='Tab two', value='tab-2', className='custom-tab', selected_className='custom-tab--selected' ), dccTab( label='Tab three, multiline', value='tab-3', className='custom-tab', selected_className='custom-tab--selected' ), dccTab( label='Tab four', value='tab-4', className='custom-tab', selected_className='custom-tab--selected' ) )), htmlDiv(id='tabs-content-classes') ))) app$callback( output = list(id='tabs-content-classes', property = 'children'), params = list(input(id = 'tabs-with-classes', property = 'value')), function(tab){ if(tab == 'tab-1'){ return(htmlDiv( list(htmlH3('Tab content 1')) )) } else if(tab == 'tab-2'){ return(htmlDiv( list(htmlH3('Tab content 2')) )) } else if(tab == 'tab-3'){ return(htmlDiv( list(htmlH3('Tab content 3')) )) } else if(tab == 'tab-4'){ return(htmlDiv( list(htmlH3('Tab content 4')) )) } } ) app$run_server()
Notice how the container of the Tabs can be styled as well by supplying a class to the parent_className prop, which we use here to draw a border below it, positioning the actual Tabs (with padding) more in the center. We also added display: flex and justify-content: center to the regular Tab components, so that labels with multiple lines will not break the flow of the text. The corresponding CSS file (assets/tabs.css) looks like this. Save the file in an assets folder (it can be named anything you want). Dash will automatically include this CSS when the app is loaded.
.custom-tabs-container { width: 85%; } .custom-tabs { border-top-left-radius: 3px; background-color: #f9f9f9; padding: 0px 24px; border-bottom: 1px solid #d6d6d6; } .custom-tab { color:#586069; border-top-left-radius: 3px; border-top: 3px solid transparent !important; border-left: 0px !important; border-right: 0px !important; border-bottom: 0px !important; background-color: #fafbfc; padding: 12px !important; font-family: "system-ui"; display: flex !important; align-items: center; justify-content: center; } .custom-tab--selected { color: black; box-shadow: 1px 1px 0px white; border-left: 1px solid lightgrey !important; border-right: 1px solid lightgrey !important; border-top: 3px solid #e36209 !important; }
With inline styles
An alternative to providing CSS classes is to provide style dictionaries directly:
library(dashHtmlComponents) library(dash) app = Dash$new() tabs_styles = list( 'height'= '44px' ) tab_style = list( 'borderBottom'= '1px solid #d6d6d6', 'padding'= '6px', 'fontWeight'= 'bold' ) tab_selected_style = list( 'borderTop'= '1px solid #d6d6d6', 'borderBottom'= '1px solid #d6d6d6', 'backgroundColor'= '#119DFF', 'color'= 'white', 'padding'= '6px' ) app$layout(htmlDiv(list( dccTabs(id="tabs-styled-with-inline", value='tab-1', children=list( dccTab(label='Tab 1', value='tab-1', style=tab_style, selected_style=tab_selected_style), dccTab(label='Tab 2', value='tab-2', style=tab_style, selected_style=tab_selected_style), dccTab(label='Tab 3', value='tab-3', style=tab_style, selected_style=tab_selected_style), dccTab(label='Tab 4', value='tab-4', style=tab_style, selected_style=tab_selected_style) ), style=tabs_styles), htmlDiv(id='tabs-content-inline') ))) app$callback( output = list(id='tabs-content-inline', property = 'children'), params = list(input(id = 'tabs-styled-with-inline', property = 'value')), function(tab){ if(tab == 'tab-1'){ return(htmlDiv( list(htmlH3('Tab content 1')) )) } else if(tab == 'tab-2'){ return(htmlDiv( list(htmlH3('Tab content 2')) )) } else if(tab == 'tab-3'){ return(htmlDiv( list(htmlH3('Tab content 3')) )) } else if(tab == 'tab-4'){ return(htmlDiv( list(htmlH3('Tab content 4')) )) } } ) app$run_server()
Lastly, you can set the colors of the Tabs components in the color prop, by specifying the "border", "primary", and "background" colors in a dict. Make sure you set them all, if you are using them!
library(dashHtmlComponents) library(dash) app = Dash$new() app$layout(htmlDiv(list( dccTabs(id="tabs-styled-with-props", value='tab-1', children=list( dccTab(label='1', value='tab-1'), dccTab(label='2', value='tab-2') ), colors=list( "border"= "white", "primary"= "gold", "background"= "cornsilk" )), htmlDiv(id='tabs-content-props') ))) app$callback( output = list(id='tabs-content-props', property = 'children'), params = list(input(id = 'tabs-styled-with-props', property = 'value')), function(tab){ if(tab == 'tab-1'){ return(htmlDiv( list(htmlH3('Tab content 1')) )) } else if(tab == 'tab-2'){ return(htmlDiv( list(htmlH3('Tab content 2')) )) } }) app$run_server()
Graph Component
Customize the Plotly.js config options of your graph using the config property. The example below uses the showSendToCloud and plotlyServerURL options include a save button in the modebar of the graph which exports the figure to URL specified by plotlyServerURL.
app$layout(htmlDiv(list( dccDropdown( id='my-dropdown1', options=list( list('label'= 'New York City', 'value'= 'NYC'), list('label'= 'Montreal', 'value'= 'MTL'), list('label'= 'San Francisco', 'value'= 'SF') ), value='NYC' ), dccGraph( id='graph1', config=list( 'showSendToCloud'= TRUE, 'plotlyServerURL'= 'https=//plotly.com' ) ) ))) app$callback( output = list(id='graph1', property='figure'), params = list(input(id='my-dropdown1', property='value')), function(value) { y_list = list( 'NYC'= list(4,2,3), 'MTL'= list(1, 2, 4), 'SF'= list(5, 3, 6) ) return(list( 'data' = list( list( 'type'= 'scatter', 'y'= c(unlist(y_list[value])) )), 'layout'= list( 'title'= value ) )) } ) app$run_server()
ConfirmDialog Component
ConfirmDialog is used to display the browser's native 'confirm' modal, with an optional message and two buttons ('OK' and 'Cancel').
library(dashCoreComponents) confirm <- dccConfirmDialog( id = "confirm", message = "Danger danger! Are you sure you want to continue?" )
This ConfirmDialog can be used in conjunction with buttons when the user is performing an action that should require an extra step of verification.
library(dashCoreComponents) library(dashHtmlComponents) library(dash) app = Dash$new() app$layout( htmlDiv( list( dccConfirmDialog( id='confirm', message='Danger danger! Are you sure you want to continue?' ), dccDropdown( options=lapply(list('Safe', 'Danger!!'),function(x){list('label'= x, 'value'= x)}), id='dropdown' ), htmlDiv(id='output-confirm1') ) ) ) app$callback( output = list(id = 'confirm', property = 'displayed'), params=list(input(id = 'dropdown', property = 'value')), function(value){ if(value == 'Danger!!'){ return(TRUE)} else{ return(FALSE)} }) app$callback( output = list(id = 'output-confirm1', property = 'children'), params=list(input(id = 'confirm', property = 'submit_n_clicks')), function(n_clicks, value) { if(length(submit_n_clicks) == FALSE){ sprintf('It wasnt easy but we did it %s', str(submit_n_clicks)) } }) app$run_server()
There is also a dccConfirmDialogProvider, it will automatically wrap a child component to send a dccConfirmDialog when clicked.
confirm <- dccConfirmDialogProvider( children = htmlButton("Click Me"), id = "danger-danger", message = "Danger danger! Are you sure you want to continue?" )
Store Component
The store component can be used to keep data in the visitor's browser. The data is scoped to the user accessing the page. Three types of storage (storage_type prop):
memory: default, keep the data as long the page is not refreshed.local: keep the data until it is manually cleared.session: keep the data until the browser/tab closes. For local/session, the data is serialized as json when stored.
library(dashCoreComponents) store <- dccStore(id = "my-store", data = list("my-data" = "data"))
Loading Component
Here’s a simple example that wraps the outputs for a couple of Input components in the Loading component. As you can see, you can define the type of spinner you would like to show (refer to the reference table below for all possible types of spinners). You can modify other attributes as well, such as fullscreen=TRUE if you would like the spinner to be displayed fullscreen. Notice that, the Loading component traverses all of it's children to find a loading state, as demonstrated in the second callback, so that even nested children will get picked up.
library(dashCoreComponents)
library(dashHtmlComponents)
library(dash)
app = Dash$new()
app$layout(htmlDiv(
children=list(
htmlH3("Edit text input to see loading state"),
dccInput(id="input-1", value='Input triggers local spinner'),
dccLoading(id="loading-1", children=list(htmlDiv(id="loading-output-1")), type="default"),
htmlDiv(
list(
dccInput(id="input-2", value='Input triggers nested spinner'),
dccLoading(
id="loading-2",
children=list(htmlDiv(list(htmlDiv(id="loading-output-2")))),
type="circle"
)
)
)
)
))
app$callback(
output = list(id='loading-output-1', property = 'children'),
params = list(input(id = 'input-1', property = 'value')),
function(value){
Sys.sleep(1)
return(value)
}
)
app$callback(
output = list(id='loading-output-2', property = 'children'),
params = list(input(id = 'input-2', property = 'value')),
function(value){
Sys.sleep(1)
return(value)
}
)
app$run_server()
Location Component
The location component represents the location bar in your web browser. Through its href, pathname, search and hash properties you can access different portions of your app's url. For example, given the url http://127.0.0.1:8050/page-2?a=test#quiz:
href='http://127.0.0.1:8050/page-2?a=test#quiz'pathname='/page-2'search='?a=test'hash='#quiz'
Try the dashCoreComponents package in your browser
Any scripts or data that you put into this service are public.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Embedding an R snippet on your website
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.