Как совместить расположение строк и столбцов в flexdashboard?

Для нового проекта я хочу попробовать новый пакет flexdasboard. Я думаю о планировке, в которой ориентация столбцов и строк каким-то образом сочетается.

Макет, о котором я думаю, выглядит примерно так:

Если я изменю этот код:

---
title: "Focal Chart (Left)"
output: flexdashboard::flex_dashboard
---

Column {data-width=600}
-------------------------------------

### Chart 1

```{r}
```

Column {data-width=400}
-------------------------------------

### Chart 2

```{r}
```   

### Chart 3

```{r}
```

в это:

---
title: "Focal Chart (Left)"
output: flexdashboard::flex_dashboard
---

Column {data-width=600}
-------------------------------------

### Chart 1

```{r}
```

Column {data-width=400}
-------------------------------------

Row {data-width=400}
-------------------------------------

### Chart 2

```{r}
```   

### Chart 3

```{r}
```   

Row {data-width=400}
-------------------------------------

### Chart 4

```{r}
```

(конечно) это не работает, но я не понял правильный путь. У кого-нибудь есть идея?

Ответ 1

Это не представляется возможным с использованием базовых строк и столбцов, но может быть достигнуто с помощью боковой панели для хранения содержимого левой панели. Это изменит форматирование левой панели по сравнению с другими, но ее внешний вид может быть подтянут по вашему вкусу, отредактировав css. Обратите внимание, что вы можете изменить ширину боковой панели, используя параметр ширины данных, например. {.sidebar-width = 300}

---
title: "Focal Chart"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---

Column {.sidebar data-width=500}
-------------------------------------
### Chart 1
```{r}
```

Row {data-height=350}
-------------------------------------
### Chart 2
```{r}
```

### Chart 3
```{r}
```   

Row {data-height=650}
-------------------------------------
### Chart 4
```{r}
```

Что дает...

Внешний вид боковой панели можно отредактировать по своему вкусу. Например:

измените цвет фона боковой панели на белый (если вы хотите, чтобы он соответствовал другим панелям),
выровняйте верхний край с другими панелями и
добавить границы слева и снизу в соответствии с другими панелями:

отредактируйте таблицу стилей css для .section.sidebar для

.section.sidebar {
  top: 61px;
  border-bottom: 10px solid #ececec;
  border-left: 10px solid #ececec;
  background-color: rgba(255, 255, 255, 1);
}

Чтобы изменить прописку, используйте параметр заполнения данных в методе flexdashboard:

Column {.sidebar data-width=500 data-padding=10}

Теперь это выглядит так:

Ответ 2

Вам действительно нужны функции fillCol и fillRow. Взгляните на это: http://shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol

Ответ 3

Альтернативный подход может состоять в том, чтобы использовать absolutepanels от блестящего. Вместо того, чтобы пытаться найти расположение сетки для размещения всех фигур на экране, используйте абсолютную кнопку со складными кнопками, чтобы выборочно выбирать, какие ящики появляются в данный момент времени. Это позволяет пользователю выбирать, какие графики и информация они хотят представить. Идея возникла из приложения superzip https://shiny.rstudio.com/gallery/superzip-example.html, но хорошо работает в flexdashboard.

В приведенном ниже примере графики могут отображаться или скрываться при загрузке страницы. Нажмите кнопки, чтобы они отображались или уходили. Это было очень полезно при смешивании листовки с графиками, чтобы избежать утопления карты с графиками (где, как и раньше, участки были ограничены из-за утомительных проблем).

---
  title: "Demo"
  output:
    flexdashboard::flex_dashboard:
      orientation: columns
      vertical_layout: fill
  ---


  ```{r setup, include=FALSE}
  library(flexdashboard)
  library(rmarkdown)
  library(plotly)
  library(shiny)

  ```

  Column {data-width=400}
  --------------------------------
  ### Planet Earth

  ```{r}

  library(leaflet)
  m = leaflet() %>% addTiles()
  m  # a map with the default OSM tile layer


  ```


  ```{r}
  #plot setup
  mtcars$am[which(mtcars$am == 0)] <- 'Automatic'
  mtcars$am[which(mtcars$am == 1)] <- 'Manual'
  mtcars$am <- as.factor(mtcars$am)

  p <- plot_ly(mtcars, x = ~wt, y = ~hp, z = ~qsec, color = ~am, colors = c('#BF382A', '#0C4B8E')) %>%
    add_markers() %>%
    layout(scene = list(xaxis = list(title = 'Weight'),
                       yaxis = list(title = 'Gross horsepower'),
                       zaxis = list(title = '1/4 mile time')))


  set.seed(100)
  d <- diamonds[sample(nrow(diamonds), 1000), ]


  ##########################
  absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
                draggable = TRUE, top = 70, left = "auto", right = 20, bottom = "auto",
                width = '30%', height = 'auto', 
                style = "overflow-y:scroll; max-height: 1000px; opacity: 0.9; style = z-index: 400",

              h4(strong("Plot Explorer")),

      HTML('<button data-toggle="collapse" data-target="#box1" class="btn-block btn-primary">dot plot</button>'),
      tags$div(id = 'box1', class="collapse in",

        plot_ly(d, x = ~carat, y = ~price, color = ~carat,
          size = ~carat, text = ~paste("Clarity: ", clarity)) %>% layout(height=200)

              ),

   HTML('<button data-toggle="collapse" data-target="#box2" class="btn-block btn-warning">histogram</button>'),
      tags$div(id = 'box2', class="collapse",

         plot_ly(x = rnorm(500), type = "histogram", name = "Histogram") %>% layout(height=200)
      ),


           HTML('<button data-toggle="collapse" data-target="#box3" class="btn-block btn-danger">spinny thing</button>'),
      tags$div(id = 'box3', class="collapse in",

          p %>% layout(height=200)
      )

   )

  ```