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

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)