CODEWITHSUNDEEP
rshiny
Araê Souza
Araê Souza

Reputation: 79

Divide UI in rows shiny

I'm having a problem with my UI in shiny. I need the dashboardBody to be divided by two rows.

The first row is divided by 2 columns. One with one plot and the other with 2 plots, each one in a row.

The second row is divided by 3 columns, each one with a infoBox.

This is my code:

dashboardPage(skin = 'green',
  dashboardHeader(title = 'Zanity - Análise de Dados e Consultoria', titleWidth = 400),
  dashboardSidebar(width = 400),
  dashboardBody(
    box(title = 'Weekly revenue', plotlyOutput('plot_revenue')),
    box(title = 'Loading %', plotlyOutput('plot_porc_loading')),
    box(title = 'Manufacture', plotly('plot_manu')),
    fluidRow(
      infoBox('Ex. Load', 200, icon = icon('weight')),
      infoBox('Loading %', '0.97%', icon = icon('percent')),
      infoBox('Revenue', 'R$ 60.000,00', icon = icon('dollar-sign'))
    )
  )
)

This is how I want it to look:

ideal layout

Upvotes: 1

Views: 1356

Answers (1)

Kevin
Kevin

Reputation: 2044

See below: the trick is first dividing everything into fluidRow() and then diving each row in column() and understanding each column has a width = 12 even if the column in the row isn't.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(skin = 'green',
  dashboardHeader(title = 'Zanity - Análise de Dados e Consultoria', titleWidth = 400),
  dashboardSidebar(width = 400),
  dashboardBody(
    #First Row:
    fluidRow(
      column(6,
             box(title = 'Weekly revenue', width = 12)
             ),
      column(6,
             box(title = 'Loading %', width = 12),
             box(title = 'Manufacture', width = 12)
             )
    ),
    #Second Row:
    fluidRow(
      infoBox('Ex. Load', 200, icon = icon('weight')),
      infoBox('Loading %', '0.97%', icon = icon('percent')),
      infoBox('Revenue', 'R$ 60.000,00', icon = icon('dollar-sign'))
    )
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

Upvotes: 2

Related Questions