Valuebox flexdashboard layout

shiny
1

I want to use valueboxes in flexdashboard:

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
  runtime: shiny
---

```{r global, include=FALSE}

library(dplyr)
library(flexdashboard)
 
Name=c('Test1', 'Test1', 'Test2')
Number = c(8, 9, 7)

zt <- data.frame(Name, Number)

PersonList <- sort(unique(zt$Name))
    
```

Selections {.sidebar}
===============================
```{r}
## The shiny part
selectInput("PersonSel", "Person: ", PersonList, selected = 'Test1')
```

Tab 1
======================================================================

 
Row 
-----------------------------------------------------------------------


### Mean
```{r}
renderValueBox({
cqi <- zt %>%
  na.omit() %>%
  filter(Name %in% input$PersonSel) %>%
  summarize(avg_Number = round(mean(Number)))
valueBox(value = cqi, icon = "fa-users")
})
```

### Median
```{r}
renderValueBox({
cqi <- zt %>%
  na.omit() %>%
  filter(Name %in% input$PersonSel) %>%
  summarize(avg_Number = round(median(Number)))
valueBox(value = cqi, icon = "fa-comments")
})
```

What I get is this:

2017-12-18 13_55_41-rstudio
2017-12-18 13_55_41-rstudio1097×297 8.5 KB

But I want the valueboxes next to each other, and I want to influence the width. How can I do that?

2

Hi @AlfredD, what I do is to set the orientation in the front-matter to rows, which makes stacks each value box horizontally rather then vertically: http://rmarkdown.rstudio.com/flexdashboard/using.html#layout . I have an example of that in a LinkedIn post I wrote a few months back: https://www.linkedin.com/pulse/its-nonlinear-world-interactive-dashboard-edgar-ruiz/ , here's the link to the app, which has the Source Code button enabled so you can see how I put it together: https://beta.rstudioconnect.com/content/2840/

2 Likes
3

Thanks @edgararuiz. I changed the code a bit:

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
  orientation: rows
runtime: shiny
---

```{r global, include=FALSE}
library(dplyr)
library(flexdashboard)
 
Name=c('Test1', 'Test1', 'Test2')
Number = c(8, 9, 7)
zt <- data.frame(Name, Number)
PersonList <- sort(unique(zt$Name))
```

Selections {.sidebar}
===============================
```{r}
selectInput("PersonSel", "Person: ", PersonList, selected = 'Test1')
```

Tab 1
======================================================================

Row 
-----------------------------------------------------------------------

### Mean

```{r}
renderValueBox({
  cqi <- zt %>%
  na.omit() %>%
  filter(Name %in% input$PersonSel) %>%
  summarize(avg_Number = round(mean(Number)))
  valueBox(cqi, icon = "fa-users")
})
```

### Median

```{r}
renderValueBox({
  cqi <- zt %>%
  na.omit() %>%
  filter(Name %in% input$PersonSel) %>%
  summarize(avg_Number = round(median(Number)))
  valueBox(cqi, icon = "fa-comments")
})
```

However, nothing changed. When I compare it with your example, I can't see why your code works and mine doesn't. You also define a row and then the valueboxes. It looks the same, but I guess I'm missing something here. :slight_smile:

4

I think one you switch to "orientation: rows" you need to worry about defining columns more so than rows.

Please see the following example of a couple things I think you are trying to accomplish (I think i'm having trouble escaping the Rmd :confused: ):

title: "Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: rows
runtime: shiny

library(dplyr)
library(flexdashboard)
 
Name=c('Test1', 'Test1', 'Test2')
Number = c(8, 9, 7)
zt <- data.frame(Name, Number)
PersonList <- sort(unique(zt$Name))

Selections {.sidebar}

selectInput("PersonSel", "Person: ", PersonList, selected = 'Test1')

Tab 1

Column {data-width=50}

Mean

renderValueBox({
  cqi <- zt %>%
  na.omit() %>%
  filter(Name %in% input$PersonSel) %>%
  summarize(avg_Number = round(mean(Number)))
  valueBox(cqi, icon = "fa-users")
})

Column {data-width=100}

Median

renderValueBox({
  cqi <- zt %>%
  na.omit() %>%
  filter(Name %in% input$PersonSel) %>%
  summarize(avg_Number = round(median(Number)))
  valueBox(cqi, icon = "fa-comments")
})

Median 2

renderValueBox({
  cqi <- zt %>%
  na.omit() %>%
  filter(Name %in% input$PersonSel) %>%
  summarize(avg_Number = round(median(Number)))
  valueBox(cqi, icon = "fa-comments")
})

By setting the columns you can control which value block ends up in each one (Like the second median block in the right column above. Also by setting the {data-width = x} you can set how wide it should be in relation to the other column (exact size seems to be affected by the responsive nature of flexdashboard... I don't completely understand it).

5

That helps indeed. The width of the valuebox is determined by the size of the dashboard however. And in case I want a row below the valueboxes - I've tried a couple of things, but I only get some strange behaviour in the dashboard.

6

This is wild, but I think all of your weird behavior will be solved if you indent "Orientation: rows" one more level to the right:

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
runtime: shiny
---

Doing this got everything in your example responding as expected again for me. Sorry for not catching that in my first answer!

7

You're right! It even is documented on the flexdashboard site. :see_no_evil:

It looks like I have to pay attention to such details when using flexdashboard, as it influences a lot! Thanks again.

1 Like