render a shinydashboard infobox... without shinydashboard

Question

I work on a Shiny application that is built on the standard layout (fluidpage(), I cannot change this), and I need to display some reactive KPIs to the user, which color , icon and text depend on the results of some computations. The ideal format for this kind of information would be an object like an infoBox() from shinydashboard just like this:

Of course, when I put this code in a fluidpage it looses its styles:

infoBox("Accuracy",  "50%",  icon = icon("ok", lib = "glyphicon"), color = "yellow")

What I tried:

• add a dashboard page inside my fluidpage application, which works but i could't remove the menu, header, and other stuff around it.

• try to customized textoutput which is not very nice:

• I didn't know how to add the glyphicon nicely.

Do you have any solution to achieve? Thanks,

Answer 1

The package shinyWidgets now has the function useShinydashboard() that allows the infoBox to render properly. Just add it to the top of the ui.

Allow to use functions from 'shinydashboard' into a classic 'shiny' app, specifically valueBox, infoBox and box.

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- fluidPage(
  useShinydashboard(),
  ...
  
)

Answer 2

You can copy the CSS from AdminLTE and create a new css file. I copied the contents for the info box component, and the bg-yellow class. Note that in order to use other colours, you have to copy the corresponding class as well, or use your own css to give your element a custom colour.

To make a working example, I included the CSS inline. Of course a neater solution is to create a separate CSS file. If you are unfamiliar with how to do that, you can find instructions here. I hope this helps!

library(shiny)
library(shinydashboard)

ui <- shinyUI(fluidPage(
  tags$head(
    tags$style(HTML("/*
 * Component: Info Box
                    * -------------------
                    */
                    .info-box {
                    display: block;
                    min-height: 90px;
                    background: #fff;
                    width: 100%;
                    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                    border-radius: 2px;
                    margin-bottom: 15px;
                    }
                    .info-box small {
                    font-size: 14px;
                    }
                    .info-box .progress {
                    background: rgba(0, 0, 0, 0.2);
                    margin: 5px -10px 5px -10px;
                    height: 2px;
                    }
                    .info-box .progress,
                    .info-box .progress .progress-bar {
                    border-radius: 0;
                    }
                    .info-box .progress .progress-bar {
                    background: #fff;
                    }
                    .info-box-icon {
                    border-top-left-radius: 2px;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                    border-bottom-left-radius: 2px;
                    display: block;
                    float: left;
                    height: 90px;
                    width: 90px;
                    text-align: center;
                    font-size: 45px;
                    line-height: 90px;
                    background: rgba(0, 0, 0, 0.2);
                    }
                    .info-box-icon > img {
                    max-width: 100%;
                    }
                    .info-box-content {
                    padding: 5px 10px;
                    margin-left: 90px;
                    }
                    .info-box-number {
                    display: block;
                    font-weight: bold;
                    font-size: 18px;
                    }
                    .progress-description,
                    .info-box-text {
                    display: block;
                    font-size: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    }
                    .info-box-text {
                    text-transform: uppercase;
                    }
                    .info-box-more {
                    display: block;
                    }
                    .progress-description {
                    margin: 0;
                    }

                    .bg-yellow,
                    .callout.callout-warning,
                    .alert-warning,
                    .label-warning,
                    .modal-warning .modal-body {
                      background-color: #f39c12 !important;
                    }

                    "))
  ),

  headerPanel("New Application"),

  sidebarPanel(),

  mainPanel(
    infoBox("Accuracy",  "50%",  icon = icon("ok", lib = "glyphicon"), color = "yellow")
  )
)
)

server <- function(input,output,session)
{}

shinyApp(ui,server)