R: Modifying an R Markdown Tutorial

Question

I am working with the R programming language.

I have the following 8 plots have been made beforehand and saved as HTML files in my working directory:

library(plotly)

Red_A <- data.frame(var1 = rnorm(100,100,100), var2 = rnorm(100,100,100)) %>%
  plot_ly(x = ~var1, y = ~var2, marker = list(color = "red")) %>% 
  layout(title = 'Red A')

Red_B <- data.frame(var1 = rnorm(100,100,100), var2 = rnorm(100,100,100)) %>%
  plot_ly(x = ~var1, y = ~var2, marker = list(color = "red")) %>% 
  layout(title = 'Red B')

Blue_A <- data.frame(var1 = rnorm(100,100,100), var2 = rnorm(100,100,100)) %>%
  plot_ly(x = ~var1, y = ~var2, marker = list(color = "blue")) %>% 
  layout(title = 'Blue A')

Blue_B <- data.frame(var1 = rnorm(100,100,100), var2 = rnorm(100,100,100)) %>%
  plot_ly(x = ~var1, y = ~var2, marker = list(color = "red")) %>% 
  layout(title = 'Blue B')

htmlwidgets::saveWidget(as_widget(Red_A), "Red_A.html")
htmlwidgets::saveWidget(as_widget(Red_B), "Red_B.html")
htmlwidgets::saveWidget(as_widget(Blue_A), "Blue_A.html")
htmlwidgets::saveWidget(as_widget(Blue_B), "Blue_B.html")

My Question: Using this template over here (https://testing-apps.shinyapps.io/flexdashboard-shiny-biclust/) - I would like to make a flexdashboard that allows the user to select (from two dropdown menus) a "color" and a "letter" - and then render one of the corresponding graphs (e.g. col = Red & letter = B -> "Red B"). I would then like to be able to save the final product itself as an HTML file. This would look something like this:

I tried to write the Rmarkdown Code for this problem by adapting the tutorial:

---
title: "Plotly Graph Selector"
output: 
  flexdashboard::flex_dashboard:
  orientation: columns
vertical_layout: fill
runtime: shiny
---
  
  
Inputs {.sidebar}

---

 selectInput("Letter", label = h3("Letter"), 
    choices = list("A" = 1, "B" = 2), 
    selected = 1)

 selectInput("Color", label = h3("Color"), 
    choices = list("Red" = 1, "Blue" = 2), 
    selected = 1)

How can I continue with this?

Note

I know that it is possible to load HTML files into a dashboard that have been made beforehand, e.g.

# https://stackoverflow.com/questions/73467711/directly-loading-html-files-in-r
<object class="one" type="text/html" data="Red_A.html"></object>
<object class="one" type="text/html" data="Red_B.html"></object>
<object class="one" type="text/html" data="Blue_A.html"></object>
<object class="one" type="text/html" data="Blue_B.html"></object>

Answer 1

You could use iframe with renderUI to render the HTML files locally using addResourcePath with the location of your files. With paste0 and paste your could dynamically create the html files to select them. Here is some reproducible code:

---
title: "Plotly Graph Selector"
output: 
  flexdashboard::flex_dashboard:
  orientation: columns
  vertical_layout: fill
  self_contained: false
runtime: shiny
---
  
```{r global, include=FALSE}
```

Inputs {.sidebar}
-----------------------------------------------------------------------

```{r}
 selectInput("Letter", label = h3("Letter"), 
    choices = c("A", "B"), 
    selected = "A")

 selectInput("Color", label = h3("Color"), 
    choices = c("Red", "Blue"), 
    selected = "Red")
```

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

```{r}
addResourcePath("Downloads", "~/Downloads")
renderUI({
  color <- input$Color
  letter <- input$Letter
  tags$iframe(
    seamless="seamless",
    src=paste0("Downloads/", paste0(paste(color, letter, sep = "_"), ".html")),
    width = 600,
    height = 400)
})
```

Output:

---

If you want to remove the border around the plot, you could add frameBorder = "0" in your iframe call like this:

```{r}
addResourcePath("Downloads", "~/Downloads")
renderUI({
  color <- input$Color
  letter <- input$Letter
  tags$iframe(
    seamless="seamless",
    src=paste0("Downloads/", paste0(paste(color, letter, sep = "_"), ".html")),
    width = 600,
    height = 400,
    frameBorder = "0")
})
```

Output:

---

Using getwd() with basename like this:

```{r}
addResourcePath(basename(getwd()), getwd())
renderUI({
  color <- input$Color
  letter <- input$Letter
  tags$iframe(
    seamless="seamless",
    src=paste0(basename(getwd()), "/", paste0(paste(color, letter, sep = "_"), ".html")),
    width = 600,
    height = 400,
    frameBorder = "0")
})
```