Come combinare il layout di righe e colonne in flexdashboard?

Question

Per un nuovo progetto voglio provare il nuovo pacchetto flexdasboard. Sto pensando ad un lay out in cui l'orientamento di colonne e file è in qualche modo combinato.

Il layout sto pensando è qualcosa di simile:

Se cambio questo codice:

--- 
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} 
``` 

in questo:

--- 
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} 
``` 

(naturalmente) questo non funziona, ma non ho capito la strada giusta. Qualcuno ha un'idea?

Answer 1

Questo non sembra possibile utilizzando righe e colonne di base, ma può essere ottenuto utilizzando una barra laterale per contenere il contenuto del pannello di sinistra. Questo cambierà la formattazione del pannello di sinistra rispetto agli altri, ma il suo aspetto può quindi essere adattato a tuo piacimento modificando il css. Si noti che è possibile modificare la larghezza della barra laterale utilizzando l'opzione larghezza dati ad es. {.sidebar data-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} 
``` 

che dà ...

L'aspetto della barra laterale può quindi essere modificato a proprio piacimento. Per esempio:

Per

1. cambiamento il colore di sfondo del pannello laterale al bianco (se si vuole che corrisponde agli altri pannelli),
2. allineare il bordo superiore con gli altri pannelli, e
3. aggiungere bordi sinistra e in basso per abbinare gli altri pannelli:

modificare il foglio di stile CSS per .section.sidebar a

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

Per cambiare l'imbottitura, utilizzare l'opzione dei dati-imbottitura in Markdown flexdashboard:

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

Ora, sembra che questo:

Answer 2

cosa si ha realmente bisogno è il fillCol e fillRow funzioni. Date un'occhiata a questo: http://shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol

Answer 3

Un approccio alternativo può essere quello di utilizzare absolutepanels dal lucido. Invece di cercare di trovare una disposizione a griglia per adattare tutti i pezzi sullo schermo, usa un absolutepanel con pulsanti pieghevoli per scegliere in modo selettivo quali caselle compaiono in un dato momento. Ciò consente all'utente di scegliere i grafici e le informazioni che desidera presentare. L'idea si è evoluta dall'app superzip https://shiny.rstudio.com/gallery/superzip-example.html, ma funziona bene in flexdashboard.

Nell'esempio seguente, è possibile visualizzare i grafici in modo che vengano visualizzati o nascosti al caricamento della pagina.Fai clic sui pulsanti per farli apparire o andare via. Questo è stato molto utile quando si mescolava il foglio con le trame, per evitare di annegare la mappa con trame (dove come prima i grafici erano limitati a causa di problemi di annegamento).

--- 
    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) 
    ) 

    ) 

    ```