appsilon / semantic.dashboard

Quick, beautiful and customizable dashboard template for Shiny based on shiny.semantic and Fomantic UI.

semantic.dashboard

Quick, beautiful and customizable dashboard template for Shiny based on shiny.semantic and Fomantic UI.

Are you fed up with ordinary shinydashboard look?

Give your app a new fresh look with Fomantic UI support.

library(shiny)
library(shinydashboard) # <-- Change this line to: library(semantic.dashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(sidebarMenu(
      menuItem(tabName = "home", text = "Home", icon = icon("home")),
      menuItem(tabName = "another", text = "Another Tab", icon = icon("heart"))
  )),
  dashboardBody(
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

semantic.dashboard offers basic functions for creating dashboard with Fomantic UI.

How to install?

Install shiny.semantic library first. Here you can find how.

You can install a stable version semantic.dashboard from CRAN repository:

install.packages("semantic.dashboard")

The development version can be installed from GitHub using remotes.

remotes::install_github("Appsilon/semantic.dashboard")

To install previous version you can run:

remotes::install_github("Appsilon/semantic.dashboard", ref = "0.1.0")

Example

You can find examples in the examples/ folder of the GitHub repository.

You can check documentation for tutorials.

How to contribute?

If you want to contribute to this project please submit a regular PR, once you're done with new feature or bug fix. Please check development/README.md first! It contains useful information that will help you run your dev environment for semantic.dashboard.

Troubleshooting

We used the latest versions of dependencies for this library, so please update your R environment before installation.

However, if you encounter any problems, try the following:

1. Up-to-date R language environment
2. Installing specific dependent libraries versions
   • shiny.semantic

Future enhacements

• Release of a stable 1.0.0 version
• Closer integration with shinydashboard

Appsilon

Appsilon is a Posit (formerly RStudio) Full Service Certified Partner.
Learn more at appsilon.com.

Get in touch [email protected]

Explore the Rhinoverse - a family of R packages built around Rhino!

semantic.dashboard's Issues

automatically add class 'active' to first 'uitab' if there's no active one.

Now you have to specify active tab, there's also problems with more then one active

Add valueBoxOutput/ infoBoxOutput and renderValueBox / renderInfoBox functions

add icons to sidebar

Add ability to add icon in sidebar menu items and smaller icon menu items.

Compare and arguments from both packages and adjust similar ones

add better examples to functions

Feature request: add possibility to move cards.

Inspired by cartodb dashboards: https://carto.com/blog/new-approach-customer-segmentation-location-data/

What possible we can use to implement this:

• http://rubaxa.github.io/Sortable/
• https://bevacqua.github.io/dragula/

Create a Readme

https://github.com/Appsilon/readme_rmd_template

Add box function

Convert "simple sales revenue dashboard"

https://www.r-bloggers.com/building-a-simple-sales-revenue-dashboard-with-r-shiny-shinydashboard/

Add task_item, notification_item, message_item functions

BUG: sales example needs to use one set of colors for app and plots

Add Continuous Integration with linter to the project

As an example, use CircleCI blog post (https://github.com/Appsilon/website/pull/38/files ) and sample project https://github.com/Appsilon/ci.example

Change build test to fail on notes, remove notes, warnings, errors

Add .RBuildignore for .circleci and /examples

Make sample dashboards use Appsilon's colors.

add dashboardHeader()

Now 'header' is automatically added to top.

add 'color' parameter do body (pusher)

Add 'visible on start' argument to sidebar

Make it easy to add logo to your dashboard.

Fix tab switching (suspendWhenHidden = FALSE)

I think it's best if you two @maju116 and @filipstachura discuss what we can do to fix tab switching
(so that we don't have to add suspendWhenHidden = FALSE)

set height in 'pusher' element to 100%

For now 'pusher' height can't be set to 100%. Visual problem in the app.

Add 'width' argument for box

Add js code to collapse button for the box

BUG: Card without label should not be collapsible.

Add dropdown_menu, dropdown_menu_output and render_dropdown_menu functions

Add tab_box function + alias

BUG: crandash example has ugly menu that needs to be fixed.

Verify which remaining functions are often used.

#30

Add info_box_output and render_info_box functions

Add column function

Fix icons in dropdown_menu

Icons from dropdown_menu_output are higher then normal icons

check how shinyDashboard chenages active tabs and fix problem with elements on tabs (max 3h)

After 2h of checking i wasn't able to learn how shiny changes active elements.

UMBRELLA TASK: convert 3 examples from shinyDashboard (from their web page) to semantic.dashboard

The goal here is to convert 3 dashboards from shiny.dashboard to semantic.dashboard. This is split into the following tasks:

• #27
• #28
• #29

Add valueBox / infoBox function

Option to make sidebar and header `sticky`

When scrolling down we want to have dashboard_header and menu_items on sidebar always visible (sticky)

Example: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

Add info_box function ( for now same as value_box)

Add sidebar_menu function + alias

Make notifications and cards beautiful. Fix margins, hairline icons and/or text, consider loosing a segment .

Update github pages (merge develop into master) + show two example dashboards

• github pages for the package looks nice, but there are no screenshots
• we need screenshots of dark and light dashboards created this way
• value proposition
• one liner -- replace one line in your shiny.dasbhoard app and get awesome appearance
• remove if-interactive from example

How hard it would be to add support for semantic themes?

This doesn't seem to be very hard. We need to upload themes to our cdn and suppress defaults. Probably the best way to go would be to change that directly in shiny.semantic and here just pass theme argument further.

Create a list of unimplemented functions from ShinyDashboard and differences in sygnatures

Add unit tests for checking functions in sematcic.dashboard and shinydashboard.

Implemented from shinydashboard:

box
sidebarMenu
dashboardBody
dashboardHeader
dashboardPage
dashboardSidebar
menuItem
menuSubItem
renderValueBox
tabItem
tabItems
valueBox
valueBoxOutput
dropdownMenu
dropdownMenuOutput
infoBox
infoBoxOutput
messageItem
notificationItem
renderDropdownMenu
renderInfoBox
tabBox
taskItem

Not implemented from shinydashboard:

menuItemOutput
renderMenu
sidebarMenuOutput
sidebarSearchForm
sidebarUserPanel
updateTabItems

Arguments:

fun	common	only_shiny	only_semantic
box	..., title, width, collapsible	footer, status, solidHeader, background, height, collapsed	color, ribbon, title_side
dashboardBody	...
dashboardHeader	..., disable	title, titleWidth, .list	color
dashboardPage	header, sidebar, body, title	skin	suppress_bootstrap
dashboardSidebar	..., disable	width, collapsed	side, size, color, center, visible
dropdownMenu	..., type, icon	badgeStatus, headerText, .list
dropdownMenuOutput	outputId
infoBox	value, subtitle, icon, color, width	title, href, fill
infoBoxOutput	outputId, width
menuItem	text, ..., icon, tabName, href, newtab	badgeLabel, badgeColor, selected, expandedName, startExpanded
menuSubItem	text, tabName, href, newtab, icon	selected	...
messageItem	from, message, icon	time, href	color
notificationItem	text, icon	status, href	color
renderDropdownMenu	expr, env, quoted
renderInfoBox	expr, env, quoted
renderValueBox	expr, env, quoted
sidebarMenu	...	id, .list
tabBox	title, width	..., id, selected, height, side	tabs, color, ribbon, title_side, collapsible
tabItem	tabName, ...
tabItems	...		selected
taskItem	text, value, color	href
valueBox	value, subtitle, icon, color, width	href
valueBoxOutput	outputId, width

Add `inverted` argument to both header and sidebar?

Convert bus-dashboard to semantic.dashboard

https://github.com/rstudio/shiny-examples/tree/1e6d6819a60eb8b6b9c55886f3898c1f997c291e/086-bus-dashboard

Remove unnecessary scrollbar

The app has a vertical scrollbar that allows scrolling down exactly to the height of the menu header:

Add 'disable' parameter to header

Add hyperlinks to menu items

Convert Crandash example to Semantic.dashboard

Convert this example:
https://github.com/rstudio/shiny-examples/tree/b281a0a78c2481b6e506ffcb27eb431aefdcf575/087-crandash

Acceptance criteria:

• Complete dashboard code works with semantic.dashboard instead of shiny.dashboard, except for:
  • TODO @maju116 add complete list of differences

Add 'disable' parameter to sidebar

Add 'pushable' and 'closable' arguments to sidebar

pushable - should we get menu button on header to show sidebar
closable - can i be closed (pushed back) by clicking on body

Create basic dashboardPage()

Create something similar to dashboardPage from shinydashboard package:

dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

Header and Sidebar should be optional

resolve conflicts between sidebar and dropdown (shiny.semantic)