Title: | Dashboard with Fomantic UI Support for Shiny |
---|---|
Description: | It offers functions for creating dashboard with Fomantic UI. |
Authors: | Filip Stachura [aut], Dominik Krzeminski [aut], Krystian Igras [aut], Michał Maj [ctb], Michał Drzazga [ctb], Developers Appsilon [cre], Appsilon [cph] |
Maintainer: | Developers Appsilon <[email protected]> |
License: | MIT + file LICENSE |
Version: | 0.2.1 |
Built: | 2025-02-17 05:31:53 UTC |
Source: | https://github.com/appsilon/semantic.dashboard |
Create a box with additional UI elements.
box( ..., title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, collapse_icon = "minus", expand_icon = "plus" )
box( ..., title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, collapse_icon = "minus", expand_icon = "plus" )
... |
UI elements to include within the box. |
title |
Label of the box. |
color |
Color of the box. One of |
ribbon |
Should label be presented as ribbon. |
title_side |
Side of a label. One of |
collapsible |
Should minimize button be added to label. |
width |
Width of the box. |
id |
ID of the box. |
collapse_icon |
Icon class to be used for collapsing (when |
expand_icon |
Icon class to be used for expanding (when |
A box that can be passed to dashboardBody
box(title = "Sample box", color = "blue", width = 11, "This is a box content" )
box(title = "Sample box", color = "blue", width = 11, "This is a box content" )
Create a column with additional UI elements.
column(width, ...)
column(width, ...)
width |
Width of the column. Between 1 and 16. |
... |
UI elements to include within the column. |
A column that can be passed to dashboardPage
Create a body of a dashboard with tabs and other additional UI elements.
dashboard_body(..., class = "") dashboardBody(..., class = "")
dashboard_body(..., class = "") dashboardBody(..., class = "")
... |
UI elements to include within the body. |
class |
CSS class to be applied to the container of |
A tab that can be passed to dashboardPage
dashboardBody()
: Create a body of a dashboard (alias for dashboard_body
for
compatibility with shinydashboard
)
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
Create a header of a dashboard with other additional UI elements.
Hint: use shiny::tagList()
if you want to add multiple elements in
left
/ center
or right
.
dashboard_header( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" ) dashboardHeader( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" )
dashboard_header( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" ) dashboardHeader( ..., left = NULL, center = NULL, right = NULL, title = NULL, titleWidth = "thin", logo_align = "center", logo_path = "", color = "", inverted = FALSE, disable = FALSE, show_menu_button = TRUE, menu_button_label = "Menu", class = "" )
... |
UI elements to include within the header. They will be displayed on the right side. |
left |
UI element to put on the left of the header. It will be placed after (to the right) the title and menu button (if they exist). |
center |
UI element to put in the center of the header. |
right |
UI element to put to the right of the header. It will be placed before elements
defined in |
title |
Dashboard title to be displayed in the upper left corner. If NULL, will not display any title field. Use "" for an empty title. |
titleWidth |
Title field width, one of |
logo_align |
Where should logo be placed. One of |
logo_path |
Path or URL of the logo to be shown in the header. |
color |
Color of the sidebar / text / icons (depending on the value of 'inverted' parameter.
One of |
inverted |
If FALSE sidebar will be white and text will be colored. \
If TRUE text will be white and background will be colored. Default is |
disable |
If |
show_menu_button |
If |
menu_button_label |
Text of the menu button. Default is |
class |
CSS class to be applied to the container of |
A header that can be passed to dashboardPage
dashboardHeader()
: Create a header of a dashboard (alias for dashboard_header
for compatibility with shinydashboard
)
if(interactive()) { library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue", inverted = TRUE), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
if(interactive()) { library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue", inverted = TRUE), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
Create a page with menu item sidebar and body containing tabs and other additional elements.
dashboard_page( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" ) dashboardPage( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" )
dashboard_page( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" ) dashboardPage( header, sidebar, body, title = "", suppress_bootstrap = TRUE, theme = NULL, margin = TRUE, class = "", sidebar_and_body_container_class = "" )
header |
Header of a dashboard. |
sidebar |
Sidebar of a dashboard. |
body |
Body of a dashboard. |
title |
Title of a dashboard. |
suppress_bootstrap |
There are some conflicts in CSS styles between
FomanticUI and Bootstrap. For the time being it's better to suppress Bootstrap.
If |
theme |
Theme name or path. For possible options see
|
margin |
If |
class |
CSS class to be applied to the page container ( |
sidebar_and_body_container_class |
CSS class to be applied to the |
Dashboard.
dashboardPage()
: Create a dashboard (alias for dashboard_page
for compatibility
with shinydashboard
)
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
Create a pushable sidebar of a dashboard with menu items and other additional UI elements.
dashboard_sidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" ) dashboardSidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" )
dashboard_sidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" ) dashboardSidebar( ..., side = "left", size = "thin", color = "", inverted = FALSE, closable = FALSE, pushable = TRUE, center = FALSE, visible = TRUE, disable = FALSE, overlay = FALSE, dim_page = FALSE, class = "" )
... |
UI elements to include within the sidebar. |
side |
Placement of the sidebar. One of |
size |
Size of the sidebar. One of |
color |
Color of the sidebar / text / icons (depending on the value of 'inverted'
parameter. One of |
inverted |
If FALSE sidebar will be white and text will be colored. \
If TRUE text will be white and background will be colored. Default is |
closable |
If |
pushable |
If |
center |
Should label and icon be centerd on menu items. Default to |
visible |
Should sidebar be visible on start. Default to |
disable |
If |
overlay |
If |
dim_page |
If |
class |
CSS class to be applied to the container of |
A sidebar that can be passed to dashboardPage
dashboardSidebar()
: Create a sidebar of a dashboard (alias for dashboard_sidebar
for compatibility with shinydashboard
)
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
if(interactive()){ library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(color = "blue"), dashboardSidebar(side = "left", size = "thin", color = "teal", sidebarMenu( menuItem(tabName = "tab1", "Tab 1"), menuItem(tabName = "tab2", "Tab 2"))), dashboardBody(tabItems( tabItem(tabName = "tab1", p("Tab 1")), tabItem(tabName = "tab2", p("Tab 2")))) ) server <- function(input, output) { } shinyApp(ui, server) }
icon
for compatibility with shinydashboard
)This creates an icon tag using Semantic UI styles.
icon(type, ...)
icon(type, ...)
type |
A name of an icon. Look at http://semantic-ui.com/elements/icon.html for all possibilities. |
... |
Other arguments to be added as attributes of the tag (e.g. style, class etc.) |
icon("dog")
icon("dog")
Semantic light colors https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/globals/site.variables
light_semantic_palette
light_semantic_palette
An object of class character
of length 13.
Create a message item.
message_item(from, message, ..., icon = "user") messageItem(from, message, ..., icon = "user")
message_item(from, message, ..., icon = "user") messageItem(from, message, ..., icon = "user")
from |
Who the message is from. |
message |
Text of the message. |
... |
Additional UI elements to include within the dropdown menu. |
icon |
Additional icon. |
A message item that can be passed to dropdownMenu
messageItem()
: Create a message item (alias for message_item
for compatibility
with shinydashboard
)
messageItem("Marek", "Another test!", icon = "warning")
messageItem("Marek", "Another test!", icon = "warning")
Create a notification item.
notification_item(text, icon = "warning", color = "") notificationItem(text, icon = "warning", color = "")
notification_item(text, icon = "warning", color = "") notificationItem(text, icon = "warning", color = "")
text |
Text of the notification. |
icon |
Additional icon. |
color |
Color of the notification item. One of
|
A notification item that can be passed to dropdownMenu
notificationItem()
: Create a notification item (alias for notification_item
for
compatibility with shinydashboard
)
notificationItem("This is notification!", color = "red")
notificationItem("This is notification!", color = "red")
Server-side function for dynamic valueBox.
render_value_box(expr, env = parent.frame(), quoted = FALSE) renderValueBox(expr, env = parent.frame(), quoted = FALSE) renderInfoBox(expr, env = parent.frame(), quoted = FALSE)
render_value_box(expr, env = parent.frame(), quoted = FALSE) renderValueBox(expr, env = parent.frame(), quoted = FALSE) renderInfoBox(expr, env = parent.frame(), quoted = FALSE)
expr |
ValueBox. |
env |
The environment in which to evaluate expr. |
quoted |
Is expr a quoted expression (with |
A dynamic valueBox that can be assigned to output.
renderValueBox()
: Create a value box output (alias for render_value_box
)
renderInfoBox()
: Create a value box output (alias for render_value_box
)
## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)
## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)
Semantic colors https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/default/globals/site.variables
semantic_palette
semantic_palette
An object of class character
of length 13.
This creates an user panel using Semantic UI styles.
sidebar_user_panel(name, subtitle = NULL, image = NULL, image_size = "tiny") sidebarUserPanel(name, subtitle = NULL, image = NULL, image_size = "tiny")
sidebar_user_panel(name, subtitle = NULL, image = NULL, image_size = "tiny") sidebarUserPanel(name, subtitle = NULL, image = NULL, image_size = "tiny")
name |
Name of the user |
subtitle |
Information to be displayed below the name (for example if the user is online) |
image |
Path to an image. This can be a relative link to an existing 'www/' directory, or an URL to an image |
image_size |
CSS class to display the image, see Semantic documentation for all sizes (goes from 'mini' to 'massive') |
A div tag with the user panel
sidebarUserPanel()
: Create a sidebar user panel (alias for
sidebar_user_panel
for compatibility with shinydashboard
)
sidebarUserPanel( "Some Name", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = "some_image_located_inside_www_dir.jpg", image_size = "mini" ) ui_user <- sidebarUserPanel( "Jane Smith", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = base::system.file( file.path('examples', "www", "jane_smith.jpg"), package = "semantic.dashboard" ), image_size = "mini" ) if (interactive()) { ui <- dashboardPage( dashboardHeader(), dashboardSidebar( ui_user, sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), body = dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) {} shinyApp(ui, server) }
sidebarUserPanel( "Some Name", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = "some_image_located_inside_www_dir.jpg", image_size = "mini" ) ui_user <- sidebarUserPanel( "Jane Smith", subtitle = shiny::a(href = "#", icon("circle"), "Online"), # Image file should be in www/ subdir # or a link to a image image = base::system.file( file.path('examples', "www", "jane_smith.jpg"), package = "semantic.dashboard" ), image_size = "mini" ) if (interactive()) { ui <- dashboardPage( dashboardHeader(), dashboardSidebar( ui_user, sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), body = dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) {} shinyApp(ui, server) }
Create a tab box with additional UI elements.
tab_box( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... ) tabBox( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... )
tab_box( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... ) tabBox( tabs, title = NULL, color = "", ribbon = TRUE, title_side = "top right", collapsible = TRUE, width = 8, id = NULL, ... )
tabs |
Tabs to include within the box. |
title |
Label of the box. |
color |
Color of the box. One of |
ribbon |
Should label be presented as ribbon. |
title_side |
Side of a label. One of |
collapsible |
Should minimize button be added to label. |
width |
Width of the box. |
id |
ID of the box. |
... |
other elements of the box. |
A box that can be passed to dashboardBody
tabBox()
: Create a tab box (alias for tab_box
for compatibility with
shinydashboard
)
tabBox(title = "Sample tab box", color = "blue", width = 5, tabs = list( list(menu = "First Tab", content = "This is first tab"), list(menu = "Second Tab", content = "This is second tab") ))
tabBox(title = "Sample tab box", color = "blue", width = 5, tabs = list( list(menu = "First Tab", content = "This is first tab"), list(menu = "Second Tab", content = "This is second tab") ))
Create a tab panel with additional UI elements.
tab_item(tabName, ..., fluid = TRUE) tabItem(tabName, ..., fluid = TRUE)
tab_item(tabName, ..., fluid = TRUE) tabItem(tabName, ..., fluid = TRUE)
tabName |
Id of the tab. |
... |
UI elements to include within the tab. |
fluid |
Controls whether tab width should be 100% (TRUE) or limited by Foomantic UI breakpoints (FALSE). |
A tab that can be passed to dashboardBody
tabItem()
: Create a tab (alias for tab_item
for compatibility with
shinydashboard
)
tab_item(tabName = "tab1", "Tab 1")
tab_item(tabName = "tab1", "Tab 1")
Create a panel with tabs.
tab_items(...) tabItems(...)
tab_items(...) tabItems(...)
... |
Tabs. |
A panel with tabs that can be passed to dashboardBody
tabItems()
: Create a panel with tabs (alias for tab_items
for compatibility
with shinydashboard
)
tabItems( tabItem(tabName = "tab1", "Tab 1"), tabItem(tabName = "tab2", "Tab 2"))
tabItems( tabItem(tabName = "tab1", "Tab 1"), tabItem(tabName = "tab2", "Tab 2"))
Create a task item.
task_item(text, value, color = "") taskItem(text, value, color = "")
task_item(text, value, color = "") taskItem(text, value, color = "")
text |
Progress bar label. |
value |
Progress bar value. |
color |
Color of the task item. One of |
A task item that can be passed to dropdownMenu
taskItem()
: Create a task item (alias for taks_item
for compatibility with
shinydashboard
)
taskItem("Project progress...", 50.777, color = "red")
taskItem("Project progress...", 50.777, color = "red")
Change the selected tab on the client
update_tab_items(session = shiny::getDefaultReactiveDomain(), tab) updateTabItems(session = shiny::getDefaultReactiveDomain(), tab)
update_tab_items(session = shiny::getDefaultReactiveDomain(), tab) updateTabItems(session = shiny::getDefaultReactiveDomain(), tab)
session |
The session object passed to function given to shinyServer |
tab |
The name of the tab that should be selected |
updateTabItems()
: Change the selected item on the client (alias for
update_tab_items
for compatibility with shinydashboard
)
if (interactive()) { ui <- dashboardPage( dashboardSidebar( sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) { update_tab_items(tab = "tab2") } shinyApp(ui, server) }
if (interactive()) { ui <- dashboardPage( dashboardSidebar( sidebarMenu( menuItem("Tab 1", tabName = "tab1"), menuItem("Tab 2", tabName = "tab2") ) ), dashboardBody( tabItems( tabItem(tabName = "tab1", h2("Tab 1")), tabItem(tabName = "tab2", h2("Tab 2")) ) ) ) server <- function(input, output, session) { update_tab_items(tab = "tab2") } shinyApp(ui, server) }
Create a valueBox with additional UI elements.
value_box(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") valueBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") infoBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "")
value_box(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") valueBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "") infoBox(subtitle, value, icon = NULL, color = "blue", width = 5, size = "")
subtitle |
Label of the valueBox. |
value |
Value of the valueBox. |
icon |
Icon of the valueBox. |
color |
Color of the valueBox. One of |
width |
Width of the valueBox. |
size |
Size of value. One of |
A valueBox that can be passed to dashboardBody
valueBox()
: Create a valueBox (alias for value_box
)
infoBox()
: Create a valueBox (alias for value_box
)
valueBox("Unread Mail", 44, icon("mail"), color = "blue", width = 5, size = "tiny")
valueBox("Unread Mail", 44, icon("mail"), color = "blue", width = 5, size = "tiny")
UI-side function for dynamic valueBox.
value_box_output(outputId, width = 5) valueBoxOutput(outputId, width = 5) infoBoxOutput(outputId, width = 5)
value_box_output(outputId, width = 5) valueBoxOutput(outputId, width = 5) infoBoxOutput(outputId, width = 5)
outputId |
Id of the output. |
width |
Width of the valueBox. |
A value box that can be passed to dashboardBody
valueBoxOutput()
: Create a valueBox output (alias for value_box_output
)
infoBoxOutput()
: Create a valueBox output (alias for value_box_output
)
## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)
## Not run: valueBoxOutput("value_box") output$value_box <- renderValueBox({ valueBox( value = 33.45, subtitle = "Simple valuebox", icon = icon("bar chart"), color = "purple", width = 5) }) ## End(Not run)