library(shiny)
library(shinyjs)
library(colourpicker)
library(gridExtra)
library(ggplot2)


ui <- 
  fluidPage(
    
    useShinyjs(),
    
    column(
    
      tags$title("R Color Picker and Visualizer"),
      
      h3("R Color Picker and Visualizer"),
      
      p("The applications on this page allow you to select colors for use in data visualization, such as the", code("ggplot2"), "package in R."),
      
      p("Pick how many colors you would like to plot, and then click in the colored field below \"Select color\" to open the color picker tool."),
      
      p("In the color picker tool, the square on the left allows you to adjust the lightness and darkness of the color, the middle slider is for selecting the color (technically, the \"hue\"), and the rightmost slider allows you to select the alpha level (transparency) of the color."),
      
      p("The plots visualize data from the", code("mtcars"), "dataset, and they will update as you change the color."),
      
      p("Some combinations of colors work better than others for aesthetic or distinguishability purposes. The application below lets you set one to three colors, which are then mapped to an appropriate variable from", code("mtcars"), "."),
      
      sidebarLayout(
        sidebarPanel(
          radioButtons("n", "Number of colors:", c("1", "2", "3")),
          colourInput("col1", "Select color", "#555599", allowTransparent = T),
          conditionalPanel("input.n >= '2'", 
                           colourInput("col2", "Select color", "#66BBBB", allowTransparent = T)),
          conditionalPanel("input.n == '3'", 
                           colourInput("col3", "Select color", "#DD4444", allowTransparent = T))
        ),
        mainPanel(
          plotOutput("plot")
        )
      ),
      
      h4("Modifying Colors in ggplot2"),
      
      p("Once you have selected your color(s), copy the hex code including ", code("#"), "( e.g., ", code("#555599"), "). Surround this with quotes and provide it as a function argument in ggplot. For example,"),
        
      pre("ggplot(mtcars, aes(wt, mpg)) + 
    geom_point(color = \"#555599\", size = 3)"),
      
      p("For more on using ggplot, see ", a("Data Visualization in R with ggplot2.", href = "https://sscc.wisc.edu/sscc/pubs/dvr/")),
      
      width = 8, offset = 2
    )
  )

server <-
  function(input, output) {
    output$plot <- renderPlot({
      
      runjs("toggleCodePosition();")
      
      cols <- c(input$col1, input$col2, input$col3)
      
      colvar <- ifelse(input$n == 1, "vs", ifelse(input$n == 2, "am", "gear"))
      
      if (input$n == 1) {
        grid.arrange(ggplot(mtcars, aes(wt, mpg)) + 
                       geom_point(size = 3, color = input$col1),
                     ggplot(mtcars, aes(as.factor(cyl))) + 
                       geom_bar(fill = input$col1),
                     ncol = 1)
      } else {
        grid.arrange(ggplot(mtcars, aes(wt, mpg, color = as.factor(!!sym(colvar)))) + 
                       geom_point(size = 3) + 
                       scale_color_manual(values = cols, name = colvar),
                     ggplot(mtcars, aes(as.factor(cyl), fill = as.factor(!!sym(colvar)))) + 
                       geom_bar() + 
                       scale_fill_manual(values = cols, name = colvar),
                     ncol = 1)
      }
      
    })
  }

shinyApp(ui = ui, server = server, options = list(display.mode = "showcase"))