rstudio / rstudio/flexdashboard
Align multiple valueboxes/gauges counter to overall orientation
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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