I'm learning flexdashboard and trying some different lay-outs for a future app. But I'm having trouble assigning different attributes for the same page.
I want the second page to have a row lay-out, be listed in nav-bar A and have an icon in front of the title.
When I write them like this: {data-orientation=rows, data-navmenu="Menu A", data-icon="fa-list"} none of them is used. When written like this: {data-orientation=rows}, {data-navmenu="Menu A"}, {data-icon="fa-list"} only the last one is executed and the first two are put in the page-title. When using the second one without commas, the same thing happens.
I haven't found any examples of muliple attributes for a page in the examples.
How do I combine them? It must be possible as I can't imagine I have to chose between giving my page a row-format and putting it in a drop-down menu...
This is the code I used:
title: "My flexdash"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Page 1 {data-navmenu="Menu A"}
======================================
Column {data-width=350}
-----------------------------------------------------------------------
### Chart A
```{r}
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart B
```{r}
```
# need these attributes to be working but invisible
Page 2 {data-orientation=rows}, {data-navmenu="Menu A"}, {data-icon="fa-list"}
=============================================
Row {data-width=650}
-----------------------------------------------------------------------
### Chart C
```{r}
```
Row {data-width=350}
-----------------------------------------------------------------------
### Chart D
```{r}
```
Found the answer: I only had to separate them by a space...
Page 2 {data-orientation=rows data-navmenu="Menu A" data-icon="fa-list"}
Thanks - I didn't have the same problem (dropdown + storyboard) but your rmd snippet was just what I needed to solve the problem! That is, just keeping the two layouts parallel instead of shoehorning one layout into another.
Responsable Conception Produit {data-navmenu="Competences par Métier"}
=========================================
<br>
<br>
```{r echo=FALSE, message=FALSE, warning=FALSE, results='asis'}
# Responsable Conception Produit
...
```
Related
I found this tutorial here that I want to follow: https://beta.rstudioconnect.com/jjallaire/htmlwidgets-showcase-storyboard/htmlwidgets-showcase-storyboard.html
I would like to try and find a way to remove the "empty spaces" that appear in the tabs (e.g. remove the spaces below the red line):
Is there a way to do this in R? I tried to follow the advice recommended in this post over here (Format tab icon size in R flexdashboard) and manually change the font size in hopes that this would work:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
<style>
.active {
font-size:15px;
}
</style>
a_tab_name {data-icon="fa-calendar"}
=====================================
Column {data-width=150}
-----------------------------------------------------------------------
### Chart B
```{r}
```
### Chart C
```{r}
```
This seemed to have worked - but is there an automatic way to instruct R to remove all empty spaces in these tabs?
Thank you!
Use height: auto
---
title: "HTML Widgets Showcase"
output:
flexdashboard::flex_dashboard:
storyboard: true
social: menu
source: embed
---
```{r setup, include=FALSE}
library(flexdashboard)
```
```{css}
.storyboard-nav .sbframelist ul li {
height: auto;
}
```
### Leaflet is a JavaScript library for creating dynamic maps that support panning and zooming along with various annotations.
### d3heatmap creates interactive D3 heatmaps including support for row/column.
### Dygraphs provides rich facilities for charting time-series data in R and includes support for many interactive features.
### Plotly provides bindings to the plotly.js library
Which looks like,
I need to select a tab from a tabset in R Markdown document (with Shiny runtime).
I followed the example in How to select a specific tabPanel in Shiny, and tried to adapt it to R Markdown. I added ids to the tabset / tab, and used them in the updateTabsetPanel() call, but it doesn't seem to work. (I used the names that pop-up when inspecting the individual HTML elements in the resulting dashboard.)
How can I select the "Chart3" tab from the tabset by clicking the button?
EDIT: I need to be able to select a specific tab programmatically (e.g. via observeEvent() call), not just on start-up.
---
title: "Tabset Column"
output: flexdashboard::flex_dashboard
runtime: shiny
---
Column
-------------------------------------
### Chart 1
```{r}
actionButton("switch_tab", "Switch tab", width=200)
```
Column {#mytabset .tabset}
-------------------------------------
### Chart 2
```{r}
```
### Chart 3 {#mytab}
```{r}
observeEvent(input$switch_tab, {
updateTabsetPanel(session, inputId = "section-mytabset", selected = "#section-mytab")
})
```
The {.active} attribute could answer your question when launching the dashboard (static solution), and works with html_document :
---
title: "Active Tabset"
output: html_document
---
Column {.tabset}
-------------------------------------
### Tab 1
Some text
### Tab 2 {.active}
Some other text
Unfortunately, this didn't work with Flexdashboard :
---
title: "Active Tabset"
output: flexdashboard::flex_dashboard
---
Column {.tabset}
-------------------------------------
### Tab 1
Some text
### Tab 2 {.active}
Some other text
The issue has already been signaled here but was closed because of automatic lock.
The waiting period in order to comply with RMarkdown issue guide being over, I filed a new issue with the Minimal Reproducible Example above.
EDIT :
This request has been taken into account, so this should soon work with Shiny Dashboard.
Instead of an observeEvent you could wrap the actionButton itself in an tags$a and link to #section-mytab. Note that you have to add section- before the tab name when using runtime: shiny.
Does this solve your problem or do you need it to work with observeEvent?
---
title: "Tabset Column"
output: flexdashboard::flex_dashboard
runtime: shiny
---
Column
-------------------------------------
### Chart 1
```{r, echo = FALSE}
tags$a(href = "#section-mytab",
shiny::actionButton("btn1", "go to mytab")
)
```
Column {.tabset}
-------------------------------------
### Chart 2
```{r}
```
### Chart 3 {#mytab}
```{r}
```
If needed, the logic above can be combined with observeEvent using {shinyjs} and a non-visible actionButton. The trick is here, that we still use an actionButton to trigger the tab. But the actual button is not shown display: none (it is important, that the button is not set to hidden, since this will prevent it from being clicked). We then create another actionButton which is observed by an observeEvent. This can trigger other calculations etc. and finally a click on the actionButton which is not shown. If you have more pages and want to jump from page 1 to, say, tab 3 on page 2, then we would need two clicks: one changing the page and one activating the tab. But we can all trigger this inside the observeEvent. Its hacky and doesn't look like good code, but on the plus side it works, even without a custom javascript function.
---
title: "Tabset Column"
output:
flexdashboard::flex_dashboard
runtime: shiny
---
```{r global, echo = FALSE}
library(shiny)
library(shinyjs)
useShinyjs(rmd = TRUE)
```
Column
-------------------------------------
### Chart 1
```{r, echo = FALSE}
observeEvent(input$btn1, {
# do some calculations here
click("btn2")})
shiny::actionButton("btn1", "do something")
tags$a(href = "#section-mytab",
# set this button to `display: none;` but *not* to `hidden`
shiny::actionButton("btn2", "go to mytab", style = "display: none")
)
```
Column {.tabset}
-------------------------------------
### Chart 2
```{r}
```
### Chart 3 {#mytab}
```{r}
```
How can I add an empty code chunk in R markdown? I have found several options to manipulate the html to give more white space. But I would like to present some empty lines in the well known gray code box in order to indicate space for assigments.
---
title: "Untitled"
author: "Author"
output: html_document
---
## R Markdown
```{r cars}
summary(cars)
```
## Homework
Please calculate the mean of the `speed` variable in `cars`.
```{r}
```
A hacky way... almost there:
```{r, code="'\n\n\n\n'", results=F}
```
A possible solution using results = 'asis' and relying on chunck HTML class:
```{r, results='asis', echo=F}
cat(
'<pre class="r">
<code class = "hlsj"> <span class="hljs-string"> <br> <br> </span> </code>
</pre>
')
```
Just add <br> to increase the number of lines.
There does not seem to be a way to get knitr to recognise a completely empty chunk as a chunk. It will always omit it, regardless of the chunk options.
You have to insert something to get it to render, for example a comment. So you can put the empty lines between two comments:
---
output: html_document
---
## Homework
Please calculate the mean of the `speed` variable in `cars`.
```{r}
# Insert code here
# End
```
Or with the strip.white=FALSE chunk option we can use a single comment line, but strangely this only works for leading, not trailing, whitespace:
---
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(strip.white = FALSE)
```
## Homework
Please calculate the mean of the `speed` variable in `cars`.
```{r}
# Insert code above
```
The goal is to create a a page in Rmarkdown that contains two tabs each displaying different information. After over a dozen different tries I've decided it makes sense to ask since the closest I've gotten as shown in the image is two tabs both showing the same information. Not sure what it is I'm missing. I've searched a couple other questions and none of them address the issue.
This is the code that I have tried so far
---
title: test
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
self_contained: false
---
Page
========================
## Try {.tabset}
### Tryto
```{r}
cat(paste("WORDSSSSS"))
```
### Work
```{r}
cat(paste("WORDSSSSSqqqqqqqqq"))
```
I included the single quotes here since it was messing with how things were displayed in SO so please remove.
Desired out put would have "WORDSSSSS" under the "Tryto" tab and "WORDSSSSqqqqqqqqqq" under "Work".
Thanks!
EDIT:
packages
---
title: "Test"
output: html_document
---
## Try {.tabset}
### Tryto
```{r}
cat(paste("WORDSSSSS"))
```
### Work
```{r}
cat(paste("WORDSSSSSqqqqqqqqq"))
```
I want to use ionicons icons when building a dashboard with flexdashboard.
From documentation ( https://rmarkdown.rstudio.com/flexdashboard/using.html#icon-sets )an example:
“ion-social-twitter”
When i search for same icon in iconicons website ( https://ionicons.com/ ) I get
<ion-icon name="logo-twitter"></ion-icon>
If in my R code I insert "ion-logo-twitter" it doesn't work. What's the correct name for icons of this website? Thanks
I had a similar icon issue with my R Markdown site. The explanation is that R Markdown is operating with an outdated version of ionicons (v2), which uses a different naming convention.
If you use the v2 ionicon names, found at https://ionicons.com/v2/cheatsheet.html, it should solve your problem.
A little hard to tell without more code, but the following should work:
---
title: "Column Orientation"
output: flexdashboard::flex_dashboard
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column
-------------------------------------
### Chart 1
```{r}
valueBox(42, icon = "ion-social-twitter")
```
Column
-------------------------------------
### Chart 2
```{r}
```
### Chart 3
```{r}