Comment combiner la disposition des lignes et des colonnes dans FlexDashboard?

Question

Pour un nouveau projet, je veux essayer le nouveau paquet FlexDasboard. Je pense à une disposition dans laquelle l'orientation des colonnes et des rangées est en quelque sorte combinée.

La mise en page Je pense quelque chose comme ceci:

Si je change ce code:

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

dans ce:

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

(ofcourse) Cela ne fonctionne pas, mais je n'ai pas compris la bonne façon. est-ce que quelqu'un a une idée?

Answer 1

Cela ne semble pas possible en utilisant des lignes et des colonnes de base, mais cela peut être réalisé en utilisant une barre latérale pour contenir le contenu du panneau de gauche. Cela changera la mise en forme du panneau de gauche par rapport aux autres, mais son apparence peut alors être ajustée à votre goût en éditant le CSS. Notez que vous pouvez modifier la largeur de la barre latérale à l'aide de l'option data-width, par exemple. {.sidebar données 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} 
``` 

Ce qui donne ...

L'apparition de la barre latérale peut alors être modifié à votre goût. Par exemple:

Pour

1. changer la couleur de fond du panneau latéral au blanc (si vous voulez faire correspondre les autres panneaux),
2. aligner le bord supérieur avec les autres panneaux, et
3. ajouter des bordures gauche et en bas pour correspondre aux autres panneaux:

modifier la feuille de style CSS pour .section.sidebar à

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

Pour changer le rembourrage, utilisez l'option de données Rembourrage en flexdashboard démarquage:

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

Maintenant, il ressemble à ceci:

Answer 2

Qu'est-ce que vous avez vraiment besoin est le fillCol et fillRow fonctions. Jetez un oeil à ceci: http://shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol

Answer 3

Une approche alternative peut être d'utiliser des panneaux absolus de brillant. Au lieu d'essayer de trouver un arrangement de grille pour adapter toutes les pièces à l'écran, utilisez un panneau absolu avec des boutons de pliage pour choisir sélectivement quelles boîtes apparaissent à un moment donné. Cela permet à l'utilisateur de choisir quelles parcelles et quelles informations il souhaite présenter. L'idée a évolué à partir de l'application superzip https://shiny.rstudio.com/gallery/superzip-example.html, mais fonctionne bien dans flexdashboard.

Dans l'exemple ci-dessous, les tracés peuvent apparaître ou être masqués lors du chargement de la page.Cliquez sur les boutons pour les faire apparaître ou disparaître. Cela a été très utile lors du mélange de feuillets avec des parcelles, pour éviter de noyer la carte avec des parcelles (où, comme auparavant, les parcelles étaient limitées en raison de problèmes de noyade).

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

    ) 

    ```