# Abstract

As web dashboards have become the norm for interacting with data, looks and added functionality have taken a more prominent role. Dashboard users expect the typical look and feel and interactivity they get when surfing the web. To help fill the gap between data scientists and developers, packages that simplify and streamline the dashboard creation process have become more important as part of the dashboard creation workflow.

We will start with a basic shiny dashboard that uses no libraries. This is how most shiny dashboards look when someone begins working on it. Then I will show you how we can enhance it using two different approaches based on the most popular UI frameworks: bootstrap  and semantic UI. Most of you use bootstrap, but I encourage you to try a new one!   

Then I will wrap up by giving you a taste of how far you can go using only r/shiny to create a pure custom solution. 

# Agenda

– Base shiny

– Bootstrap approach: `shinydashboard`

– Semantic UI approach: `shiny.semantic`

– Custom approach: no framework? No problem.

# Shiny

We will start with a proof of concept dashboard created using base shiny (This particular dashboard was created for our company’s internal tools for our hiring processes, but all data in the examples is randomly generated).

a shiny dashboard example

A great example of the advantages of shiny for creating simple dashboards, our UI can be easily defined:

fluidPage(

  headerPanel("Hiring Funnel"),

  sidebarPanel(...),

  mainPanel(...)

)

Coupled with some server behavior for the different inputs and outputs, we end up with a complete dashboard that, even though it’s simple will become the base for our next examples.

# shinydashboard

Shiny already includes bootstrap as a default framework. `shinydashboard` is probably the most well known extension to shiny when it comes to styling your dashboards in a simple and quick way. In fact enabling it is as simple as loading the library and replacing the wrappers for our main dashboard components:

library(shinydashboard)

dashboardPage(

  dashboardHeader(...),

  dashboardSidebar(...),

  dashboardBody(...)
)

A simple way to breathe new life into your dashboards! However it is important to keep in mind that:

 – Customization is limited (css is an option).

 – Color themes are available.

 – you’ll be pigeon-holed in the bootstrap ecosystem.

a shinydashboard dashboard example

# shiny.semantic

Another possible solution, especially if you would like more customization and would like to switch bootstrap in favor of semantic UI, is to use shiny.semantic in conjunction with semantic.dashboard. This opens a different set of UI elements that can be used, so elements such as tabs, inputs might need to be updated if you are making the switch from shiny or shinydashboard.

From the main layout part, `semantic.dashboard` works very similar to how `shinydashboard` does. A few differences exist when it comes to function arguments, but the general structure remains the same:

library(semantic.dashboard)

library(shiny.semantic)

dashboardPage(

  dashboardHeader(...),

  dashboardSidebar(...),

  dashboardBody(...)
)

Some changes are needed for some components. Two good examples are:

 – Date inputs. Switching from bootstrap means we no longer have access to bootstrap components, date input is one of those examples that can be replaced by the semantic version:

# Bootstrap
dateInput("date_from", "Start date", value = "2019-02-01", weekstart = 1)
# Semantic UI
date_input("date_from", "Start date", value = "2019-02-01", icon = "")

 – Tab sets. Another example of this is tab sets; semantic tabsets need to be replaced by their semantic counterpart:

# Bootstrap
tabsetPanel(
  tabPanel("General overview", ...)
  tabPanel("Channels overview", ...)
  tabPanel("Days to decision", ...)
  tabPanel("Funnel visualization", ...)
)

# Semantic UI
tabset(
  list(menu = div("General overview"), content = div(...)),
  list(menu = div("Channels overview"), content = div(...)),
  list(menu = div("Days to decision"), content = div...()),
  list(menu = div("Funnel visualization"), content = div(...))
)

The semantic UI version is a bit more verbose, but it does allow for more customization when it comes to the internal HTML structure. You also get access to all of the semantic UI library. 

semantic.dashboard

# custom

We can also go a different route and dive into a fully custom solution, allowing a much higher level of customization, but it also requires a lot more knowledge when it comes to HTML, CSS and JS. This solution is usually reserved for applications where the layout, theme or overhaul experience is completely different for existing packages.

As an example, our internal app using a fully custom approach ended up like this:

example of a fully custom dashboard

Also with dark mode:

Our approach included:

 – Extended usage of CSS (in our case, SASS) for styling, layout and themes,

 – Custom HTML elements using `shiny:::tags`.

 – JavaScript for extra functionalities (Loading screens, custom tab behavior)

There’s a lot going on here so I will go over it in more detail on a future post about all of the different things that went into creating this dashboard, but it’s good to remember: no matter the complexity, a true custom solution is always possible! What is your favorite package? Do you think it’s better to spend more time in custom solutions, or are the standard packages enough for you? Add your comments below! 

# References

– [shiny] (https://shiny.rstudio.com/)

– [shinydashboard] (https://rstudio.github.io/shinydashboard/)

– [semantic.dashboard] (https://github.com/Appsilon/semantic.dashboard/)

– [shiny.semantic] (https://github.com/Appsilon/shiny.semantic/)

– [Bootstrap] (https://getbootstrap.com/)

– [Semantic UI] (https://semantic-ui.com/)

Follow Appsilon Data Science on Social Media

• Follow @Appsilon on Twitter. Follow me @sparktuga
• Follow us on LinkedIn
• Sign up for our newsletter
• Try out our R Shiny open source packages

Article a journey from basic prototype to production-ready Shiny dashboard comes from Appsilon Data Science | End­ to­ End Data Science Solutions.