rstudio / rstudio/flexdashboard

Align multiple valueboxes/gauges counter to overall orientation

Open
#87 4 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
848
Forks
298
PR merge metrics
No merged PRs in 30d

Description

At the moment, because the overall orientation is either columns or rows, it is currently impossible to align multiple valueboxes or gauges next to each other in column layout or above each other in row layout. Simple layouts can usually be translated, but even mildly complicated layouts are impossible:


---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill

---

```{r setup, include=FALSE}
library(flexdashboard)
```

Left column {.sidebar data-width=300}
----------------------------------------------------------------------

### Left sidebar

```{r}
mtcars[, 1:2]
```

Center column
-----------------------------------------------------------------------

### Box 1

```{r}
valueBox('left please')
```

### Box 2 

```{r}
valueBox('right please')
```

### Center chart

```{r}
plot(1)
```


Right column {data-width=300}
----------------

### Right column

```{r}
mtcars[, 1:2]
```

which of course renders the valueboxes above each other, which looks silly if they're in the main column. It seems like adding a data-width parameter to the h3 header of each or setting the fig.width/fig.align chunk options should flow them together as screen width allows, but it doesn't.

Thus, is it possible to add

  • the option to set individual flexbox widths (as a percentage of the current column, perhaps), or
  • the ability to use rows within columns and vice versa, or
  • a way to render mulitple valueboxes and gauges from within one code chunk?

This is related to the limitation of tabsets, which can't contain more than a single figure, and are thus useless for valueboxes and gauges. Maybe it's time to break into h4 headers.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied R Markdown example with columns orientation and multiple valueBox calls. Inspect the layout behavior around valueboxes, gauges, headings, and tabsets; the issue does not identify files or tests. Done would require a decided approach that supports the requested responsive arrangement without breaking existing dashboard layouts.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, r
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.