# slickR with Shiny

    library(slickR)
    library(svglite)
    library(gdtools)
    library(shiny)

# slickR in Shiny

The Following example is a Shiny App that creates `plot_num` histograms from `rnorm` with `n_obs` observations. These plots are placed in a slick carousel.

The use can choose between the different slick layouts

- One single slick
- Two slicks stacked
- Two slicks stacked and synched

## UI

    ui <- fluidPage(
      sidebarLayout(
        sidebarPanel(

          sliderInput(inputId = "plot_num",
                      label = "Number of Plots:",
                      min = 1, max = 20, value = 5),

          sliderInput(inputId = "n_obs",
                      label = "Number of observations:",
                      min = 10, max = 500, value = 100),

          shiny::radioButtons('slick_type',
                              label = 'Carousel Type',
                              choices = c('single','stack','synch'),
                              selected = 'single',
                              inline = TRUE),

          shiny::verbatimTextOutput('current')
        ),
        mainPanel(

          slickROutput("slick_output",width='100%',height='200px')

          )
      )
    )

## Server

    server <- function(input, output) {

    # Create content for the carousel

    plots <- eventReactive(c(input$n_obs,input$plot_num),{

    replicate(input$plot_num,{

         xmlSVG({hist(rnorm(input$n_obs),
                      col = 'darkgray',
                      border = 'white')},
                standalone=TRUE)

         },simplify = FALSE)
    })

    # renderSlickR (We create the slickR objects here)

      output$slick_output <- renderSlickR({

        x <- slickR(plots(),
                    slideId = 'slick1',
                    height = 600,
                    width = '50%') +
          settings(slidesToShow=3,centerMode=TRUE)

        y <- slickR(plots(),
                    slideId = 'slick2',
                    height = 600,
                    width = '50%') +
          settings(slidesToShow=3,centerMode=TRUE)

        switch(input$slick_type,
               'single' = x,
               'stack'  = x %stack% y,
               'synch'  = x %synch% y
               )

      })

    # Observe the active slick

    # The htmlwidget is observed by shiny and information can be retrieved.

    # Using the output name you set for the `renderSlick` object in this example
    # it is `output$slick_output`

    # Using this you can interact server-side "on click" of the active carousel
    # by accessing elements in `input$slick_output_current$`

    # `.clicked`   : The index of the clicked element|
    # `.relative_clicked`: The relative position of the clicked element|
    # `.center`    : The index of the center element|
    # `.total`     : The total number of elements in the carousel|
    # `.active`    : The ID of the active carousel|

    # We will store this information in a new reactive environment
    active_slick <- shiny::reactiveValues()

    shiny::observeEvent(input$slick_output_current,{
        active_slick$clicked    <- input$slick_output_current$.clicked
        active_slick$relative_clicked <- input$slick_output_current$.relative_clicked
        active_slick$center     <- input$slick_output_current$.center
        active_slick$total      <- input$slick_output_current$.total
        active_slick$active     <- input$slick_output_current$.slide
    })

    # Show in the UI the values in active_slick

    output$current <- renderText({
      l <- unlist(shiny::reactiveValuesToList(active_slick))
      paste(gsub('_',' ', names(l)), l, sep=' = ', collapse='\n')
    })

    }

## Run the App

    shinyApp(ui = ui, server = server)