How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard

Reading time:

time

min

December 3, 2020

<h2>Introducing semantic.dashboard</h2> Dashboards allow you to structure reports intuitively and break them down into easy-to-read chunks. As a result, end-users can navigate and explore data much easier than with traditional reports. The <code>shinydashboard</code> R package has been out for ages, and it is a good option with a decent amount of features. However, apps built with it tend to look alike – especially if you're using it daily on multiple projects. A lot of simplistic, aesthetically identical dashboards can leave a bad impression on clients and stakeholders. That's where <code>semantic.dashboard</code> comes into play. The <code>semantic.dashboard</code> package is an open-source alternative to <code>shinydashboard</code> created by <a href="https://appsilon.com/shiny/" target="_blank" rel="noopener noreferrer">Appsilon</a>. It allows you to include <a href="http://fomantic-ui.com/" target="_blank" rel="noopener noreferrer">Fomantic UI</a> components to R Shiny apps without breaking a sweat. For example, let's take a look at two identical applications - the first built with <code>shinydashboard</code>, and the second one with <code>semantic.dashboard</code>: <img class="size-full wp-image-6154" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b02187aa4d870bbd4d3d1c_Screenshot-2020-12-03-at-11.28.12.webp" alt="Dashboard built with shinydashboard" width="1545" height="823" /> Image 1 - Dashboard built with shinydashboard <img class="size-full wp-image-6155" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b02188a89a044c4d36b981_Screenshot-2020-12-03-at-11.28.48.webp" alt="Dashboard built with semantic.dashboard" width="1963" height="1149" /> Image 2 - Dashboard built with semantic.dashboard Both look good - that's guaranteed, but the one built with <code>semantic.dashboard</code> doesn't look as generic. You'll create a somewhat simplified version of this dashboard today. You can download the source code of this article <a href="https://appsilon.com/wp-content/uploads/2020/12/semantic-dashboard-code.zip" target="_blank" rel="noopener noreferrer">here</a>. <blockquote>Want to learn more about <code>semantic.dashboard</code>? <a class="editor-rtfLink" href="https://github.com/Appsilon/semantic.dashboard" target="_blank" rel="noopener noreferrer">Visit the official Github page.</a> Feel free to leave us a star!</blockquote> Navigate to a section: <ul><li><a href="#first-dashboard">semantic.dashboard Installation and Your First Dashboard</a></li><li><a href="#interactive-dashboard">Build a Fully Interactive Dashboard</a></li><li><a href="#conclusion">Conclusion</a></li></ul> To learn more about Appsilon's open-source packages, see our new <a class="editor-rtfLink" href="http://shiny.tools/" target="_blank" rel="noopener noreferrer">Open-Source Landing Page:</a> <a href="http://shiny.tools"><img class="size-large wp-image-5332" src="https://wordpress.appsilon.com/wp-content/uploads/2020/09/Screen-Shot-2020-09-23-at-5.02.14-PM-1024x504.png" alt="Appsilon's shiny.tools landing page for our open source packages." width="1024" height="504" /></a> Appsilon's shiny.tools landing page for our open source packages. <h2 id="first-dashboard">Installation and Your First Dashboard</h2> The <code>semantic.dashboard</code> package is available on CRAN (Comprehensive R Archive Network). To install it, execute the following line from the R console: <pre><code class="language-r">install.packages("semantic.dashboard")</code></pre> You can now proceed by creating an empty dashboard: <pre><code class="language-r">library(shiny) library(semantic.dashboard) ui <- dashboardPage( dashboardHeader(), dashboardSidebar(sidebarMenu()), dashboardBody() ) server <- function(input, output) { } shinyApp(ui, server)</code></pre> Here's the corresponding output: <img class="size-full wp-image-6096" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b270aafcac124f318a568b_1-1.webp" alt="Empty shiny.semantic dashboard" width="2574" height="954" /> Image 3 - Empty shiny.semantic dashboard The <code>semantic.dashboard</code>'s app UI is made of a <code>dashboardPage</code>, which is further split into three elements: <ol><li>Header - <code>dashboardHeader</code></li><li>Sidebar - <code>dashboardSidebar</code></li><li>Body - <code>dashboardBody</code></li></ol> This structure is identical as with <code>shinydashboard</code> - making things easier to learn. Let's see how to tweak all of them. There are a lot of things you can do with <code>dashboardHeader</code>. For example, you can change the color by specifying a value for the <code>color</code> parameter. You could also include a logo by setting <code>logo_path</code> and <code>logo_allign</code> parameters. If you want to remove the header, specify <code>disabled = TRUE</code>. Here's how to change the color from white to something less boring: <pre><code class="language-r">dashboardHeader(color = "blue", inverted = TRUE)</code></pre> The <code>inverted</code> parameter sets the color to the header background instead of the header text. Here's the corresponding output: <img class="size-full wp-image-6097" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d5eb84d9192ab6b0fffc_7223069e_2.webp" alt="Styling header of the semantic dashboard" width="2138" height="328" /> Image 4 - Styling the header of the semantic dashboard Next, let's see how to add elements to the <code>dashboardSidebar</code>. You can specify the sidebar size by tweaking the <code>side</code> parameter (left by default). You can also tweak the size, which you'll see how in a minute. Finally, you can altogether disable the sidebar by setting <code>disable = TRUE</code>. Here's how to make the sidebar wider: <pre><code class="language-r">dashboardSidebar( size = "wide", sidebarMenu( menuItem(tabName = "panel1", text = "Panel 1"), menuItem(tabName = "panel2", text = "Panel 2") ) )</code></pre> Here are the results: <img class="size-full wp-image-6098" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d5ebbe40ac3284ae1ccd_163a2dc8_3.webp" alt="Styling sidebar of the semantic dashboard" width="2138" height="490" /> Image 5 - Styling the sidebar of the semantic dashboard That adds the elements to the sidebar, but how can you display different content when the tab is clicked? That's where tweaks to <code>dashboardBody</code> come into play. Let's add <code>tabItems</code> and two tabs, corresponding to two options in the sidebar. The first option is selected by default, as specified with the <code>selected</code> parameter. Only a single text box should be visible on both panels, indicating which panel you're currently on. Here's the code snippet: <pre><code class="language-r">dashboardBody( tabItems( selected = 1, tabItem( tabName = "panel1", textOutput(outputId = "text1") ), tabItem( tabName = "panel2", textOutput(outputId = "text2") ) ) )</code></pre> To make this work, you'll need to make some tweaks to the <code>server</code> function. You'll have to render text on the corresponding outputs. Here's how: <pre><code class="language-r">server <- function(input, output) { output$text1 <- renderText("This is Panel 1") output$text2 <- renderText("This is Panel 2") }</code></pre> Your dashboard should look like this now: <img class="size-full wp-image-6099" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d5ec98512f0e5204eb23_a417543d_4.gif" alt="Initial dashboard with two panels" width="1060" height="248" /> Image 6 - Initial dashboard with two panels Now you know the basics of <code>semantic.dashboard</code>. Let's see how to take it a step further and display an interactive data-driven map. <h2 id="interactive-dashboard">Build a Fully Interactive Dashboard</h2> R comes with a lot of built-in datasets, <code>quakes</code> being one of them. It shows geolocations of 1000 seismic events that occurred near Fiji since 1964. Here's what the first couple of rows look like: <img class="size-full wp-image-6100" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b270aca29bdbc93bbf4cb6_5-1.webp" alt="First couple of rows of the Quakes dataset" width="722" height="364" /> Image 7 - First couple of rows of the Quakes dataset You'll now see how to develop a semantic dashboard with the following tabs: <ul><li>Interactive map - display geographical area near Fiji with markers representing the magnitude of the seismic event</li><li>Table - shows the source dataset formatted as a table</li></ul> You'll create the interactive map with the <code>leaflet</code> package, so make sure to have it installed: <pre><code class="language-r">install.packages("leaflet")</code></pre> The UI follows the pattern discussed in the previous section - there's a header, sidebar, and a body. The header will be empty this time. Most of the differences are in the <code>dashboardBody</code>. The structure should look familiar, but there are two new functions: <ul><li><code>leafletOutput()</code> - used to display the interactive map </li><li><code>dataTableOutput()</code> - used to display the data table </li></ul> To make the map as large as possible, you can set some inline CSS styles. In the code below, the height is modified, so the map always takes almost the entire screen height (- 80 pixels as a margin). Here's the code for the UI: <pre><code class="language-r">library(shiny) library(shiny.semantic) library(shinydashboard) library(leaflet) ui <- dashboardPage( dashboardHeader(), dashboardSidebar( size = "wide", sidebarMenu( menuItem(tabName = "map", text = "Map", icon = icon("map")), menuItem(tabName = "table", text = "Table", icon = icon("table")) ) ), dashboardBody( tabItems( selected = 1, tabItem( tabName = "map", tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"), leafletOutput("map") ), tabItem( tabName = "table", fluidRow( h1("Quakes Table"), semantic_DTOutput("quakesTable") ) ) ) ) )</code></pre> In order to make this dashboard work, you'll have to modify the <code>server</code> function. Inside it lies the code for rendering both the map and the table. The coordinates for the map were chosen arbitrarily, after a quick Google search. The magnitude of the seismic activity determines the size of a marker. Every marker is clickable - showing the magnitude, depth in kilometers, and the number of stations that reported the seismic activity. Here's the code for the server: <pre><code class="language-r">server <- function(input, output) { output$map <- renderLeaflet({ leaflet() %>% setView(lng = 179.3355929, lat = -20.4428959, zoom = 6.5) %>% addProviderTiles("Esri.WorldStreetMap") %>% addCircles( data = quakes, radius = sqrt(10^quakes$mag) * 30, color = "#000000", fillColor = "#ffffff", fillOpacity = 0.5, popup = paste0( "Magnitude: ", quakes$mag, " ", "Depth (km): ", quakes$depth, " ", "Num. stations reporting: ", quakes$stations ) ) }) output$quakesTable <- DT::renderDataTable( semantic_DT(quakes) ) }</code></pre> And here's the final dashboard: <img class="wp-image-6150 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0218f6cd8f7584c83592a_6_fixed.gif" alt="Final Quakes dashboard" width="1658" height="818" /> Image 8 - Final Quakes dashboard <h2 id="conclusion">Conclusion</h2> In this short hands-on guide, you've learned how to develop simple and aesthetically-pleasing Shiny dashboards. You've learned what <code>semantic.dashboard</code> is, what it brings to the table, and how to pair it with other libraries to produce stunning and intuitive dashboards. You can learn more about <code>semantic.dashboard</code> by visiting the links below. <blockquote>Looking for inspiration? <a class="editor-rtfLink" href="https://appsilon.github.io/shiny.semantic/index.html" target="_blank" rel="noopener noreferrer">Check out component demos and complete dashboards here.</a></blockquote> <ul><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/create-outstanding-dashboards-with-the-new-semantic-dashboard-package/" target="_blank" rel="noopener noreferrer">Create outstanding R Shiny dashboards with the semantic.dashboard package</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/video-tutorial-create-and-customize-a-simple-shiny-dashboard/" target="_blank" rel="noopener noreferrer">Video Tutorial: Create and Customize a Simple Shiny Dashboard</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-dashboard-ui-crash-course/" target="_blank" rel="noopener noreferrer">Why is My Dashboard Ugly? A Crash Course in R Shiny UI</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/r-shiny-faster-updateinput-css-javascript/" target="_blank" rel="noopener noreferrer">Make R Shiny Dashboards Faster with updateInput, CSS, and JavaScript</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/how-to-scale-a-shiny-dashboard/" target="_blank" rel="noopener noreferrer">Video Tutorial: How to Scale Shiny Dashboards</a></li></ul> <a href="https://appsilon.com/careers/"><img class="aligncenter wp-image-5940 size-medium" src="https://wordpress.appsilon.com/wp-content/uploads/2020/11/appsilon.hiring0-600x338.jpg" alt="" width="600" height="338" /></a> Appsilon is hiring globally! We are primarily seeking an Engineering Manager who can lead a team of 6-8 ambitious software engineers. See our <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/" target="_blank" rel="noopener noreferrer">Careers</a> page for all new openings, including openings for a <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#project-manager" target="_blank" rel="noopener noreferrer">Project Manager</a> and <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#community-manager" target="_blank" rel="noopener noreferrer">Community Manager</a>.