---
title: "slickR with Plots"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{slickR with Plots}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>",
  eval = interactive()
)
```

```{r setup}
library(svglite)
library(slickR)
```

To place plots directly into slickR we need to convert plots into svg code using `svglite::xmlSVG`

Here are some examples of how this can be done using different packages.

```{r}

# Standard Plot
  xmlSVG({
    plot(1:10)
  }, standalone = TRUE)

#library(lattice)
  
# xyplot
  xmlSVG({
    print(xyplot(x ~ x, data.frame(x = 1:10), type = "l"))
  }, standalone = TRUE)
    
# dotplot
  xmlSVG({
    print(dotplot(variety ~ yield | site,
      data = barley, groups = year,
      key = simpleKey(levels(barley$year), space = "right"),
      xlab = "Barley Yield (bushels/acre) ",
      aspect = 0.5, layout = c(1, 6), ylab = NULL
    ))
  }, standalone = TRUE)

#library(ggplot2)

  xmlSVG({
    show(ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width, colour = Species)) +
      geom_point())
  }, standalone = TRUE)  
  
```

## Example using Base Plots

### Create Plots

```{r}
plotsToSVG <- replicate(5,{
                       svglite::xmlSVG(
                         code = {
                           x <- sample(1:5,1)
                           plot(stats::density(stats::rnorm(10*x,sd=x)))
                           },
                         standalone = TRUE)
                       },
                      simplify = FALSE
                     )
```

### Single Carousel
 
```{r}
slickR::slickR(plotsToSVG, height = 200, width = "95%")
```


### Multiple Carousels

There are instances when you have many outputs at once and do not want to go through all, so you can combine two carousels one for viewing and one for searching.

```{r}

slick_up <- slickR(plotsToSVG, height = 200, width = "95%") + 
  settings(slidesToShow = 1, slidesToScroll = 1)

slick_down <- slickR(plotsToSVG, height = 100, width = "95%") + 
  settings(slidesToScroll = 1,  slidesToShow = 3, 
     centerMode = TRUE, focusOnSelect = TRUE)

slick_up %synch% slick_down

```