R Shiny Flexdashboard ValueBox в макете столбца

Question

Мне нужно выровнять некоторые элементы в макете столбца на Shinydashboard, который объединяет некоторые элементы из flexdashboard.Вот код:

library(shiny)
library(shinydashboard)
library(flexdashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(),
  dashboardBody(
    column(3,flexdashboard::valueBoxOutput("ValueBox")),
    #flexdashboard::valueBoxOutput("ValueBox"),
    column(3,plotOutput("plot1",height = 150)),
    column(6,h3("Gauges"),
           fluidRow(
             column(3,flexdashboard::gaugeOutput("Gauge1")),
             column(3,flexdashboard::gaugeOutput("Gauge2"))
             )
           )
    )
)

server <- function(input, output) {

  output$ValueBox <- renderValueBox({
    shinydashboard::valueBox(
      value = 100,
      subtitle = "Value",
      icon = icon("area-chart"),
      color = "aqua"
    )
  })

  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata
    hist(data)
  })

  output$Gauge1 <- flexdashboard::renderGauge({
    gauge(60, min = 0, max = 100, symbol = "%") 
  })  

  output$Gauge2 <- flexdashboard::renderGauge({
    gauge(25, min = 0, max = 100, symbol = "%") 
  })    
}

shinyApp(ui, server)

Это производит вывод, где поле значения заполняет только примерно треть отведенного для него пространства:

Когда яизмените valueBoxOutput, чтобы он был за пределами column (закомментируйте первую и раскомментируйте вторую строку в dashboardBody), поле значений заполняет все выделенное пространство, но вывод «Gauge» переходит на другую строкуа не направо:

Как заставить «комбинацию» двух подходов, чтобы результат выглядел примерно так?

Я безуспешно пробовал следующее:

• Вместо
• используйте *1026* Используйте аргумент widthcolumn, а также valueBoxOutput команды

Answer 1

После экспериментов с шириной столбца, основанной на ответе ismirsehregal, я обнаружил, в чем проблема.

Часть пользовательского интерфейса верна, и оба способа способны дать результат.Проблема заключалась в том, что определение внутри renderValueBox не указывало аргумент width, который по умолчанию был равен 4 и представлял относительную ширину по сравнению с родительской средой.Таким образом, в первом случае поле занимает 4/12 столбца шириной 3. Во втором случае выход имел ширину 4 + 3 + 6 = 13, которая больше 12 и, следовательно, была разбита на две части.lines.

Следующее определение решает проблему:

  output$ValueBox <- renderValueBox({
    shinydashboard::valueBox(
      value = 100,
      subtitle = "Value",
      icon = icon("area-chart"),
      color = "aqua",
      width = 12
    )
  })

width = 12 устанавливает флажок для заполнения всей ширины родительской среды, которая в данном случае является столбцомширина 3. Можно также использовать width = 3 напрямую и исключить определение column, но предпочтителен первый способ, поскольку ширина всех трех элементов указывается в пользовательском интерфейсе, а не на сервере.

Answer 2

Это работает для меня:

library(shiny)
library(shinydashboard)
library(flexdashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(),
  dashboardBody(
    flexdashboard::valueBoxOutput("ValueBox", width = "100%"), # Edit %
    #flexdashboard::valueBoxOutput("ValueBox"),
    column(4,plotOutput("plot1",height = 150)),
    column(4,h3("Gauges"),
           fluidRow(
             column(6,flexdashboard::gaugeOutput("Gauge1")),
             column(6,flexdashboard::gaugeOutput("Gauge2"))
           )
    )
  )
)

server <- function(input, output) {

  output$ValueBox <- renderValueBox({
    shinydashboard::valueBox(
      value = 100,
      subtitle = "Value",
      icon = icon("area-chart"),
      color = "aqua"
    )
  })

  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata
    hist(data)
  })

  output$Gauge1 <- flexdashboard::renderGauge({
    gauge(60, min = 0, max = 100, symbol = "%") 
  })  

  output$Gauge2 <- flexdashboard::renderGauge({
    gauge(25, min = 0, max = 100, symbol = "%") 
  })    
}

shinyApp(ui, server)

Итак, вот предпочтительный способ, основанный на идеях Радека Янхубы - установка подходящей ширины при рендеринге(для всех, кто придет сюда позже):

library(shiny)
library(shinydashboard)
library(flexdashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(),
  dashboardBody(
    column(4,flexdashboard::valueBoxOutput("ValueBox")),
    column(4,plotOutput("plot1",height = 150)),
    column(4,h3("Gauges"),
           fluidRow(
             column(6,flexdashboard::gaugeOutput("Gauge1")),
             column(6,flexdashboard::gaugeOutput("Gauge2"))
           )
    )
  )
)

server <- function(input, output) {

  output$ValueBox <- renderValueBox({
    shinydashboard::valueBox(
      value = 100,
      subtitle = "Value",
      icon = icon("area-chart"),
      color = "aqua",
      width = 12
    )
  })

  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata
    hist(data)
  })

  output$Gauge1 <- flexdashboard::renderGauge({
    gauge(60, min = 0, max = 100, symbol = "%") 
  })  

  output$Gauge2 <- flexdashboard::renderGauge({
    gauge(25, min = 0, max = 100, symbol = "%") 
  })    
}

shinyApp(ui, server)