Hands-On Dashboard Development with Shiny

A practical guide to building effective web applications and dashboards

Chris Beeley

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781789611557
• eBook ISBN: 9781789615623
• Edition: 1
• Topic: Computer Science
• Subtopic: Business Intelligence
• Index: Computer Science

Progressively explore UI development with Shiny via practical examples

Key Features

• Write a Shiny interface in pure HTML
• Explore powerful layout functions to make attractive dashboards and other intuitive interfaces
• Get to grips with Bootstrap and leverage it in your Shiny applications

Book Description

Although vanilla Shiny applications look attractive with some layout flexibility, you may still want to have more control over how the interface is laid out to produce a dashboard. Hands-On Dashboard Development with Shiny helps you incorporate this in your applications.

The book starts by guiding you in producing an application based on the diamonds dataset included in the ggplot2 package. You'll create a single application, but the interface will be reskinned and rebuilt throughout using different methods to illustrate their uses and functions using HTML, CSS, and JavaScript. You will also learn to develop an application that creates documents and reports using R Markdown. Furthermore, the book demonstrates the use of HTML templates and the Bootstrap framework.

Moving along, you will learn how to produce dashboards using the Shiny command and dashboard package. Finally, you will learn how to lay out applications using a wide range of built-in functions.

By the end of the book, you will have an understanding of the principles that underpin layout in Shiny applications, including sections of HTML added to a vanilla Shiny application, HTML interfaces written from scratch, dashboards, navigation bars, and interfaces.

What you will learn

• Add HTML to a Shiny application and write its interfaces from scratch in HTML
• Use built-in Shiny functions to produce attractive and flexible layouts
• Produce dashboards, adding icons and notifications
• Explore Bootstrap themes to lay out your applications
• Get insights into UI development with hands-on examples
• Use R Markdown to create and download reports

Who this book is for

If you have some experience writing Shiny applications and want to use HTML, CSS, and Bootstrap to make custom interfaces, then this book is for you.

Layout Functions in Shiny

In the first chapter, we got introduced to the basics of Shiny applications and the various Shiny commands. The layout functions in Shiny describe the different functions that is available in order to review the applications with each of the layouts with the same content. This chapter explains in detail about producing the different layout functions. We will be covering the following topics throughout the chapter:

• Bootstrap and how it works for Shiny
• How to produce layouts using rows and columns
• The different layout functions available with Shiny
• Navigation bar and navigation list layouts
• Using conditional UI elements, as well as how to take control of the UI

Bootstrap framework

In this section, we will learn about Bootstrap and its framework as well as its usage and the concepts that it brings to web design in the Shiny applications. We will also see how to add a theme to a Bootstrap setup.

Bootstrap is an open source toolkit that makes use of HTML, CSS, and JavaScript. It is of particular interest to web developers because it enables them to make responsive websites that can seamlessly scale up or down depending on the screen it's viewed on, including PC monitors, tablets, and even mobile phones.

Shiny was built on Bootstrap version 3. However, Bootstrap version 4 is available with minor changes. The main content that attracts Shiny developers about Bootstrap is the grid system.

The grid system is a way of organizing content in a sample format, and is initially done by organizing rows and then by columns. Familiarity with Shiny will also breed familiarity with many components of the Bootstrap framework, such as navigation bars, organizing content on a page using a bar with icons and a well panel, which is used to organize inputs and outputs.

Note that the well panel has been superseded by the card component in version 4.

Modals are another important component; they are popup information boxes that give alerts to your users.

As we move forward and continue to develop with Shiny, it's worth learning about its connections to the Bootstrap framework, so we can easily control content using HTML and CSS. As Shiny is based on the Bootstrap framework, Bootstrap will be inevitably pre-owned whenever Shiny is used.

Moving away from vanilla layout functions, such as a sidebar layout, can be done through Bootstrap. For example, the grid system is the layout of your applications that develop using fluidPage() and fixedPage().

Uses of Bootstrap

Bootstrap can be used while moving to HTML templates or raw HTML, although if required, we can use our own CSS. Note that it is worth being aware of the bootstrapPage() function, which provides a minimalistic Shiny user interface setup. This function loads the Bootstrap CSS and JavaScript, but doesn't put anything else into HTML. To learn more about the bootstrapPage() function, you can visit: https://shiny.rstudio.com/reference/shiny/1.0.5/bootstrapPage.html.

Adding themes to Bootstrap

There are many free and open source themes available online if you do not want to use the default theme of Bootstrap.

Using them is as simple as putting the theme inside a www folder, which is at the same level as your application, and providing the filename. For example, sandstone.css as the theme argument to fluidPage, fixedPage, bootstrapPage, or navbarPage.

Producing layout in rows and columns

As we already know, Shiny uses the grid system from Bootstrap to lay out content. There are a couple of ways to carry this out, but built-in Shiny functions are always involved. The differences between the functions are minor and the basic idea of each is the same.

This section will cover the server installation steps of the following functions:

• fluidPage()
• bootstrapPage()
• fixedPage()

fluidPage()

The most standard way of using the grid layout within Shiny is to use the fluidPage() function. The following code snippet illustrates the fluidPage() function:

server = function(input, output){ 
 
# server code
}
ui = fluidPage(
 
 fluidRow(
 column(2, wellPanel(p("Column width 2"))),
 column(10, wellPanel(p("Column width 10")))),
 fluidRow(
 column(4, wellPanel(p("Column width 4"))),
 column(4, wellPanel(p("Column width 4"))),
 column(4, wellPanel(p("Column width 4"))))
)
shinyApp(ui = ui, server = server)

From the preceding code, the content of this function is organized by rows in which the fluidPage() function wraps the whole interface and adds as many fluid rows that are necessary. In this case, the code shows that the whole interface is composed of two rows.

Rows are made up of columns, and as you can see in the following output, the first row is made up of two columns. One is two units wide and the other is 10 units wide. The number of units should always add up to 12. The next row is made up of three columns, each one four units wide.

T...

Table of contents

• Title Page
• Copyright and Credits
• Packt Upsell
• Contributors
• Preface
• HTML and Shiny
• Layout Functions in Shiny
• Dashboards
• Other Books You May Enjoy