Generate <style> block of CSS to change tabset colors by a condition

dynamic-tabset-colors.Rmd

---
title: "Untitled"
author: "Emily Riederer"
date: "5/15/2019"
output: html_document
---

```{r}
# dummy data
data <- data.frame(
  METRIC = paste('var', 1:10),
  VAL = runif(10),
  stringsAsFactors = FALSE
)
```

```{r results = 'asis'}
# automatically generate <style> block of css for each tab
tab_number <- 1:nrow(data)
tab_color <- ifelse(data$VAL > 0.75, 'green', ifelse(data$VAL > 0.25, 'yellow', 'red'))

css <- sprintf(".color-tabs>.nav-pills>li:nth-child(%d){background:%s;}", tab_number, tab_color)
css <- paste(css, collapse = "\n")
css <- paste("<style>", css, "</style>")
cat(css)
```

# section {.color-tabs .tabset .tabset-pills}

```{r, results='asis'}
# dynamically generate code for each chunk
vars <- data$METRIC
val <- data$VAL
out <- paste("##", vars, "<br>\n", "The value is ", val, "<br>\n<br>\n\n")
invisible(lapply(out, cat))
```

# section 2 {.color-tabs .tabset .tabset-pills}

```{r}
# create plots
library(ggplot2)
plots <- 
  lapply(1:10, 
         function(x) ggplot(data[data$METRIC == paste("var", x),], aes(x = 1, y = VAL)) + geom_col()
         )
```

```{r echo = FALSE, results ='asis'}
invisible(
mapply( 
  function(name, plot) {
    cat('\n##', name, '\n')
    print(plot)
    cat('\n')
  },
  name = data$METRIC,
  plot = plots
  )
)
```

# section 3 {.tabset .tabset-pills}

This verifies that CSS does not "bleed" into non-colored sections

## tab 1

content

## tab 2

content

This is really cool! I've only taken an hour workshop on CSS so I've got a question.

out is a class(val) = "numeric" object.

I tried placing a list of ggplot2 objects in it's place but it doesn't work. Is it possible somehow? It would be useful to set a custom CSS for separate RMarkdown chunks or xaringan slides FWIW.

Hey @moldach! Sure thing.

The reason it doesn't work quite work to swap val and a list of plots is that the original code is just creating a huge text string of everything. For plots, it will be easier if we use cat for the text but print for the plots. Here's a working example. Replacing the final code chunk above with the following adds separate plots to each tab:

```{r}
# create plots
library(ggplot2)
plots <- 
  lapply(1:10, 
         function(x) ggplot(data[data$METRIC == paste("var", x),], aes(x = 1, y = VAL)) + geom_col()
         )
```

# section {.color-tabs .tabset .tabset-pills}

```{r echo = FALSE, results ='asis'}
invisible(
mapply( 
  function(name, plot) {
    cat('\n##', name, '\n')
    print(plot)
    cat('\n')
  },
  name = data$METRIC,
  plot = plots
  )
)
```

Thanks for the idea! I updated the gist to include this since it does seem very useful to have down for reference.

Nicely done

Hello, Thank you.
I would like to ask you, I am using your code for multiple tabset chunks with different ccs styles (every chunk has various data$VAL) . However Rmarkdown uses only the last one ccs style.