For a new project I want to try the new flexdasboard package. I am thinking of a lay out in which the column and row orientation is somehow combined.
The layout I am thinking of is something like this:
If I change this 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}
```
into this:
---
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) this doesn't work, but I haven't figured out the right way. Does anyone have an idea?
This does not seem possible using basic rows and columns, but can be achieved by using a sidebar to hold the content of the left hand panel. This will change the formatting of the left panel compared to the others, but its appearance can then be adusted to your liking by editing the css. Note that you can alter the width of the side bar using the data-width option e.g. {.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}
```
Which gives...
The appearance of the side bar can then be edited to your liking. For example:
To
edit the css style sheet for .section.sidebar to
.section.sidebar {
top: 61px;
border-bottom: 10px solid #ececec;
border-left: 10px solid #ececec;
background-color: rgba(255, 255, 255, 1);
}
To change the padding, use the data-padding option in flexdashboard markdown:
Column {.sidebar data-width=500 data-padding=10}
Now, it looks like this: