it-swarm.com.de

Wie kombiniert man Zeilen- und Spaltenlayout in Flexdashboard?

Für ein neues Projekt möchte ich das neue Flexdasboard-Paket ausprobieren. Ich denke an ein Layout, in dem die Spalten- und Zeilenorientierung irgendwie kombiniert ist. 

Das Layout, an das ich denke, ist ungefähr so:

 enter image description here

Wenn ich diesen Code ändere:

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

das sehr gut finden:

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

(natürlich) das funktioniert nicht, aber ich habe nicht den richtigen Weg gefunden. Hat jemand eine Idee?

20
rdatasculptor

Dies scheint mit einfachen Zeilen und Spalten nicht möglich zu sein, kann aber erreicht werden, indem eine Seitenleiste verwendet wird, um den Inhalt des linken Bedienfelds aufzunehmen. Dadurch wird die Formatierung des linken Bedienfelds im Vergleich zu den anderen geändert. Das Erscheinungsbild kann jedoch durch Bearbeiten der CSS-Datei an Ihre Bedürfnisse angepasst werden. Beachten Sie, dass Sie die Breite der Seitenleiste mit der Option Datenbreite ändern können, z. {.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}
```

Was gibt ... 

 enter image description here

Das Erscheinungsbild der Seitenleiste kann dann nach Ihren Wünschen bearbeitet werden. Zum Beispiel:

Zu 

  1. Ändern Sie die Hintergrundfarbe der Seitenleiste in Weiß (wenn Sie möchten, dass sie mit den anderen Bereichen übereinstimmt). 
  2. richten Sie die obere Kante an den anderen Bereichen aus
  3. fügen Sie die linken und unteren Ränder hinzu, um sie an die anderen Bereiche anzupassen:

bearbeiten Sie das CSS-Stylesheet für .section.sidebar in 

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

Um die Auffüllung zu ändern, verwenden Sie die Datenauffülloption in flexdashboard markdown:

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

Nun sieht es so aus:

 enter image description here

22
dww

Ich habe dieses Flexdashboard-Beispiel aus dem zusammengestellt, was ich auf der Shiny + flex-Site in RStudio mit fillCol gefunden habe:

 enter image description here

---
title: "Fill Layout"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
runtime: shiny
---

# Info {.sidebar data-width=350}

When you mix multiple Shiny inputs and/or outputs within a flexdashboard panel it’s good practice to have them fill the bounds of their container in the same way that other flexdashboard components like plots and htmlwidgets do. This is possible using the Shiny `fillRow` and `fillCol` layout functions.

For those familiar with Shiny here are further details on how this example works:

1. The container is laid out using the `fillCol` function, which establishes a single column layout with flexible row heights.

2. Flexible height behavior is defined via `flex = c(NA, 1)`. The `NA` applies to the first component (the input panel) and says to not give it flexible height (i.e. allow it to occupy it’s natural height). The `1` applies to the second component (the plot) and says that it should have flexible height (i.e. occupy all remaining height in the container).

3. The call to `plotOutput` includes `height = "100%"` to ensure that the plot takes advantage of the height allocated to it by the `fillCol` flexible layout.

4. Finally, note that unlike the simpler layout examples above this examples uses an explicit  `plotOutput` / `renderPlot` pairing rather than just a standalone `renderPlot`. This is so that the plot can be included in a more sophisticated layout scheme (i.e. one more like traditional ui.R layout).

# Use fillCol

```{r}
fillCol(height = 600, flex = c(NA, 1), 
  inputPanel(
    selectInput("region", "Region:", choices = colnames(WorldPhones))
  ),
  plotOutput("phonePlot", height = "100%")
)

output$phonePlot <- renderPlot({
  barplot(WorldPhones[,input$region]*1000, 
          ylab = "Number of Telephones", xlab = "Year")
})
```
2
f0nzie

Was Sie wirklich brauchen, sind die Funktionen fillCol und fillRow. Schauen Sie sich das an: http://shiny.rstudio.com/articles/gadget-ui.html#fillrowfillcol

1
sanyi14ka

Ein alternativer Ansatz kann sein, absolutepanels von shiny zu verwenden. Anstatt zu versuchen, eine Rasteranordnung zu finden, die zu allen Teilen auf dem Bildschirm passt, verwenden Sie ein absolutes Quadrat mit Klappschaltflächen, um selektiv auszuwählen, welche Kästchen zu einem bestimmten Zeitpunkt angezeigt werden. Auf diese Weise kann der Benutzer auswählen, welche Diagramme und Informationen angezeigt werden sollen. Die Idee entwickelte sich aus der Superzip-App https://shiny.rstudio.com/gallery/superzip-example.html , funktioniert jedoch gut in Flexdashboard. 

Im folgenden Beispiel können Diagramme beim Laden der Seite erscheinen oder ausgeblendet werden. Klicken Sie auf die Schaltflächen, um sie anzuzeigen oder zu entfernen. Dies war sehr hilfreich beim Mischen von Flugblättern mit Plots, um zu vermeiden, dass die Karte mit Plots überschwemmt wird (wobei Plots aufgrund von Ertrinkungsproblemen nach wie vor begrenzt waren).

 enter image description here

 enter image description here

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

   )

  ```
0
pdbentley