semantic.dashboard: New Open Source R Shiny Package
<em><strong>Updated</strong>: December 30, 2022.</em> <h2 id="semantic-dashboard-is-on">Introducing semantic.dashboard by Appsilon</h2> Are you fed up with ordinary <code class="highlighter-rouge">shinydashboard</code> look? Give your app a new life with Semantic UI support. It cannot be any easier! You can install <code class="highlighter-rouge">semantic.dashboard</code> from CRAN and load it instead to your app. It’s compatible with the original shinydashboard. Here's the installation command: <pre><code class="language-r">install.packages("semantic.dashboard")</code></pre> Up next, we'll compare <code>shinydashboard</code> to <code>semantic.dashboard</code>, so you can get a full feel between the differences. <blockquote>Diver deeper into semantic.dashboard - <a href="https://appsilon.com/create-outstanding-dashboards-with-the-new-semantic-dashboard-package/">Here's a full guide to improve the design of your Shiny apps</a>.</blockquote> <hr /> <h2>R shinydashboard vs. semantic.dashboard - What are the differences?</h2> To start, let's build a basic Shiny dashboard with the <code>shinydashboard</code> package. You already know what it will look like - plain and boring - but it'll serve as to prove a point on how little code you need to change to start using <code>semantic.dashboard</code>. Here's the code: <pre><code class="language-r">library(shiny) library(shinydashboard) <br>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) ) ) ) ) <br>server <- function(input, output) { set.seed(122) histdata <- rnorm(500) output$plot1 <- renderPlot({ data <- histdata[seq_len(input$slider)] hist(data) }) } <br>shinyApp(ui, server)</code></pre> And here's what the resulting dashboard looks like: <img class="size-full wp-image-17224" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01cbf508cc5c2332048ec_1-5.webp" alt="Image 1 - shinydashboard example" width="1824" height="1419" /> Image 1 - shinydashboard example In order to switch to <code>semantic.dashboard</code>, you only need to change the library import. That's it! Here's the entire code snippet: <pre><code class="language-r">library(shiny) library(semantic.dashboard) #### ONLY CHANGE THE IMPORT <br>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) ) ) ) ) <br>server <- function(input, output) { set.seed(122) histdata <- rnorm(500) output$plot1 <- renderPlot({ data <- histdata[seq_len(input$slider)] hist(data) }) } <br>shinyApp(ui, server)</code></pre> The dashboard looks much more modern and minimalistic now: <img class="size-full wp-image-17226" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b7d7047d51e4abfaea0e3b_1fdf96a8_2-4.webp" alt="Image 2 - semantic.dashboard example" width="1824" height="1419" /> Image 2 - semantic.dashboard example We thrive to deliver the most awesome shiny apps for our clients. In our work we identified a number of limitations in the ordinary shiny dashboards. Therefore, a few months ago we decided it was time to take the next step and we created our own dashboard package with full integration of Semantic UI. Semantic.dashboard offers all the basic functions for creating a dashboard along with some additional features. You can select from the many <a href="http://semantic-ui-forest.com/themes/">Semantic UI Themes</a> and easily adjust the look of your dashboard. <blockquote>Want to dive deeper into the semantic.dashboard package? <a href="https://appsilon.com/impressive-dashboards-with-semantic-dashboard/">Read our guide on making impressive Shiny apps</a>.</blockquote> For specific installation guidelines and more examples visit the dashboard’s <a href="https://github.com/Appsilon/semantic.dashboard" target="_blank" rel="noopener noreferrer">GitHub page</a>, or simply install version <code class="highlighter-rouge">0.2.1</code> from CRAN and check documentation: <figure class="highlight"> <pre><code class="language-r" data-lang="r"><span class="n">install.packages</span><span class="p">(</span><span class="s2">"semantic.dashboard"</span><span class="p">)</span></code></pre> </figure> The <code class="highlighter-rouge">semantic.dashboard</code> engine is based on our other successful package <code class="highlighter-rouge">shiny.semantic</code>. Shiny.semantic allows to introduce semantic elements to shiny apps. It has recently been updated to version 0.3.0. marking the beginning of a new chapter for this solution, in this current version we: <ul><li style="font-weight: 400;">migrated the styles to fomantic 2.8.3</li><li style="font-weight: 400;">introduced semantic modal</li><li style="font-weight: 400;">refreshed the look and functionality of calendar</li></ul> You can read more in the <a href="https://appsilon.github.io/shiny.semantic/">new documentation</a> build using pkgdown. Go to Appsilon's GitHub profile for additional information about our other open sources projects. <code class="highlighter-rouge">semantic.dashboard</code> is a next step in our mission to <a href="https://appsilon.com/making-shiny-apps-awesome/">make shiny apps awesome</a>! Unleash your imagination and let us know what have you achieved! <iframe src="https://www.youtube.com/embed/WfxE73Q4e1g" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <hr /> <h2><b>Follow Appsilon on Social Media</b></h2><ul><li>Follow <a href="https://twitter.com/appsilon">@Appsilon</a> on Twitter</li><li>Follow Appsilon on <a href="https://www.linkedin.com/company/appsilon">LinkedIn</a></li><li>Try out our other R Shiny <a href="https://appsilon.com/opensource/">open source</a> packages</li><li>Sign up for the <a href="https://appsilon.com/data-for-good/">Data for Good</a> newsletter</li></ul>
.png)
